/g, version))
+ .pipe(dest("./docs"));
+});
diff --git a/package-lock.json b/package-lock.json
index e6b9be37..3c0ddd19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -71,6 +71,7 @@
"gulp": "^5.0.0",
"gulp-concat": "^2.6.1",
"gulp-order": "^1.2.0",
+ "gulp-replace": "^1.1.4",
"husky": "^8.0.0",
"lodash": "^4.17.21",
"nodemon": "^2.0.22",
@@ -4253,6 +4254,12 @@
"integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
"dev": true
},
+ "node_modules/@types/expect": {
+ "version": "1.20.4",
+ "resolved": "https://registry.npmjs.org/@types/expect/-/expect-1.20.4.tgz",
+ "integrity": "sha512-Q5Vn3yjTDyCMV50TB6VRIbQNxSE4OmZR86VSbGaNpfUolm0iePBB4KdEEHmxoY5sT2+2DIvXW0rvMDP2nHZ4Mg==",
+ "dev": true
+ },
"node_modules/@types/express": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
@@ -4597,6 +4604,16 @@
"integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
"dev": true
},
+ "node_modules/@types/vinyl": {
+ "version": "2.0.12",
+ "resolved": "https://registry.npmjs.org/@types/vinyl/-/vinyl-2.0.12.tgz",
+ "integrity": "sha512-Sr2fYMBUVGYq8kj3UthXFAu5UN6ZW+rYr4NACjZQJvHvj+c8lYv0CahmZ2P/r7iUkN44gGUBwqxZkrKXYPb7cw==",
+ "dev": true,
+ "dependencies": {
+ "@types/expect": "^1.20.4",
+ "@types/node": "*"
+ }
+ },
"node_modules/@types/ws": {
"version": "7.4.7",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-7.4.7.tgz",
@@ -6778,6 +6795,18 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/binaryextensions": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/binaryextensions/-/binaryextensions-2.3.0.tgz",
+ "integrity": "sha512-nAihlQsYGyc5Bwq6+EsubvANYGExeJKHDO3RjnvwU042fawQTQfM3Kxn7IHUXQOz4bzfwsGYYHGSvXyW4zOGLg==",
+ "dev": true,
+ "engines": {
+ "node": ">=0.8"
+ },
+ "funding": {
+ "url": "https://bevry.me/fund"
+ }
+ },
"node_modules/bl": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -11602,6 +11631,22 @@
"node": "*"
}
},
+ "node_modules/gulp-replace": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/gulp-replace/-/gulp-replace-1.1.4.tgz",
+ "integrity": "sha512-SVSF7ikuWKhpAW4l4wapAqPPSToJoiNKsbDoUnRrSgwZHH7lH8pbPeQj1aOVYQrbZKhfSVBxVW+Py7vtulRktw==",
+ "dev": true,
+ "dependencies": {
+ "@types/node": "*",
+ "@types/vinyl": "^2.0.4",
+ "istextorbinary": "^3.0.0",
+ "replacestream": "^4.0.3",
+ "yargs-parser": ">=5.0.0-security.0"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/gulplog": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/gulplog/-/gulplog-2.2.0.tgz",
@@ -13068,6 +13113,22 @@
"node": ">=8"
}
},
+ "node_modules/istextorbinary": {
+ "version": "3.3.0",
+ "resolved": "https://registry.npmjs.org/istextorbinary/-/istextorbinary-3.3.0.tgz",
+ "integrity": "sha512-Tvq1W6NAcZeJ8op+Hq7tdZ434rqnMx4CCZ7H0ff83uEloDvVbqAwaMTZcafKGJT0VHkYzuXUiCY4hlXQg6WfoQ==",
+ "dev": true,
+ "dependencies": {
+ "binaryextensions": "^2.2.0",
+ "textextensions": "^3.2.0"
+ },
+ "engines": {
+ "node": ">=8"
+ },
+ "funding": {
+ "url": "https://bevry.me/fund"
+ }
+ },
"node_modules/jest-worker": {
"version": "27.5.1",
"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
@@ -15724,6 +15785,15 @@
"url": "https://github.com/fb55/nth-check?sponsor=1"
}
},
+ "node_modules/object-assign": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+ "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+ "dev": true,
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/object-inspect": {
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
@@ -18146,6 +18216,53 @@
"node": ">= 10.13.0"
}
},
+ "node_modules/replacestream": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/replacestream/-/replacestream-4.0.3.tgz",
+ "integrity": "sha512-AC0FiLS352pBBiZhd4VXB1Ab/lh0lEgpP+GGvZqbQh8a5cmXVoTe5EX/YeTFArnp4SRGTHh1qCHu9lGs1qG8sA==",
+ "dev": true,
+ "dependencies": {
+ "escape-string-regexp": "^1.0.3",
+ "object-assign": "^4.0.1",
+ "readable-stream": "^2.0.2"
+ }
+ },
+ "node_modules/replacestream/node_modules/isarray": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+ "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+ "dev": true
+ },
+ "node_modules/replacestream/node_modules/readable-stream": {
+ "version": "2.3.8",
+ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+ "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+ "dev": true,
+ "dependencies": {
+ "core-util-is": "~1.0.0",
+ "inherits": "~2.0.3",
+ "isarray": "~1.0.0",
+ "process-nextick-args": "~2.0.0",
+ "safe-buffer": "~5.1.1",
+ "string_decoder": "~1.1.1",
+ "util-deprecate": "~1.0.1"
+ }
+ },
+ "node_modules/replacestream/node_modules/safe-buffer": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+ "dev": true
+ },
+ "node_modules/replacestream/node_modules/string_decoder": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+ "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+ "dev": true,
+ "dependencies": {
+ "safe-buffer": "~5.1.0"
+ }
+ },
"node_modules/request-progress": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/request-progress/-/request-progress-3.0.0.tgz",
@@ -20127,6 +20244,18 @@
"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
"dev": true
},
+ "node_modules/textextensions": {
+ "version": "3.3.0",
+ "resolved": "https://registry.npmjs.org/textextensions/-/textextensions-3.3.0.tgz",
+ "integrity": "sha512-mk82dS8eRABNbeVJrEiN5/UMSCliINAuz8mkUwH4SwslkNP//gbEzlWNS5au0z5Dpx40SQxzqZevZkn+WYJ9Dw==",
+ "dev": true,
+ "engines": {
+ "node": ">=8"
+ },
+ "funding": {
+ "url": "https://bevry.me/fund"
+ }
+ },
"node_modules/throttleit": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.1.tgz",
diff --git a/package.json b/package.json
index 78990127..2b14de6f 100644
--- a/package.json
+++ b/package.json
@@ -11,12 +11,13 @@
"build": "npm run build:react && rm -rf lib && rollup --config rollup.config.mjs && node ./scripts/frankBuild.js",
"build:react": "npm run cem && node ./scripts/makeReact.mjs",
"build:readme": "gulp build-readme",
- "write:stories": "npm run cem && node ./scripts/generateStories.mjs && npm run concat:stories",
+ "write:stories": "npm run cem && node ./scripts/generateStories.mjs && npm run concat:stories && npm run update:version",
"write:component": "plop",
"test": "rm -rf test-outdir && rollup --config rollup.test.config.js && web-test-runner",
"test:scripts": "wtr scripts/__tests__/**/*.test.js --node-resolve",
"prepare": "husky install",
"concat:stories": "gulp concat-stories-js && gulp concat-storybook-mdx",
+ "update:version": "gulp replace-version",
"format": "prettier --ignore-path .gitignore --write \"**/*.+(js|ts|json)\"",
"lint": "eslint --ignore-path .gitignore --ext .js,.ts .",
"lint:fix": "npm run lint -- --fix",
@@ -106,6 +107,7 @@
"gulp": "^5.0.0",
"gulp-concat": "^2.6.1",
"gulp-order": "^1.2.0",
+ "gulp-replace": "^1.1.4",
"husky": "^8.0.0",
"lodash": "^4.17.21",
"nodemon": "^2.0.22",
diff --git a/src/css/reboot.css b/src/css/reboot.css
index bd6679a5..476a268f 100644
--- a/src/css/reboot.css
+++ b/src/css/reboot.css
@@ -59,6 +59,7 @@ h6 {
color: var(--sgds-header-color);
font-family: var(--sgds-font-family-brand);
font-style: normal;
+ margin-top: var(--sgds-margin-none);
}
h1,
h2,
@@ -92,7 +93,7 @@ h2 {
margin-bottom: var(--sgds-margin-2-xs);
}
h3 {
- font-size: var(---sgds-font-size-5);
+ font-size: var(--sgds-font-size-5);
margin-bottom: var(--sgds-margin-2-xs);
}
h4 {
@@ -126,6 +127,7 @@ p {
font-family: var(--sgds-font-family-brand);
line-height: var(--sgds-line-height-body);
letter-spacing: var(--sgds-letter-spacing-normal);
+ margin-top: var(--sgds-margin-none);
}
/* ANCHOR */
diff --git a/stories/getting-started/Frameworks/Angular.mdx b/stories/frameworks/Angular.mdx
similarity index 69%
rename from stories/getting-started/Frameworks/Angular.mdx
rename to stories/frameworks/Angular.mdx
index 0e4a3d54..a692e4eb 100644
--- a/stories/getting-started/Frameworks/Angular.mdx
+++ b/stories/frameworks/Angular.mdx
@@ -1,5 +1,5 @@
import { Meta, Markdown } from "@storybook/blocks";
-import Angular from "../../../docs/Angular.md?raw";
+import Angular from "../../docs/Angular.md?raw";
{FoundationalStyles}
\ No newline at end of file
diff --git a/stories/getting-started/Migration/oneToTwo.mdx b/stories/migration/oneToTwo.mdx
similarity index 65%
rename from stories/getting-started/Migration/oneToTwo.mdx
rename to stories/migration/oneToTwo.mdx
index ff7499dc..87bf47d5 100644
--- a/stories/getting-started/Migration/oneToTwo.mdx
+++ b/stories/migration/oneToTwo.mdx
@@ -1,5 +1,5 @@
import { Meta, Markdown } from "@storybook/blocks";
-import versionOneToTwo from '../../../docs/Migration_v1_to_v2.md?raw';
+import versionOneToTwo from '../../docs/Migration_v1_to_v2.md?raw';
{FoundationalStyles}
+
+## Headings
+
+
+
+
+## Paragraph
+
+
+
+
+## Anchor
+
+
+
+
+## Caption
+
+
+
+
+## Label
+
+
+
+
+## List
+
+### Unordered
+
+
+
+
+### Ordered
+
+
+
+
+## Source files
+
+
\ No newline at end of file
diff --git a/stories/getting-started/Style/Theming.mdx b/stories/style/Theming.mdx
similarity index 68%
rename from stories/getting-started/Style/Theming.mdx
rename to stories/style/Theming.mdx
index 5895c874..2b6f6fa2 100644
--- a/stories/getting-started/Style/Theming.mdx
+++ b/stories/style/Theming.mdx
@@ -1,5 +1,5 @@
import { Meta, Markdown } from "@storybook/blocks";
-import Theming from '../../../docs/Theming.md?raw';
+import Theming from '../../docs/Theming.md?raw';
+
Header H1
+ Header H2
+ Header H3
+ Header H4
+ Header H5
+ Header H6
+
+ `;
+};
+const ParagraphTemplate = () => {
+ return html`
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+ standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
+ type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
+ remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+ Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
+ of Lorem Ipsum.
+
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+ standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
+ type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
+ remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+ Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
+ of Lorem Ipsum.
+
+ `;
+};
+const LabelTemplate = () => {
+ return html` Label `;
+};
+const CaptionTemplate = () => {
+ return html`
+
+ Caption
+
+ `;
+};
+const AnchorTemplate = () => {
+ return html` Anchor link `;
+};
+const UListTemplate = () => {
+ return html`
+
+ hello world
+
+ hello world
+
+ Sub of Second
+ Another Sub
+
+
+ hello world
+ hello world
+
+ `;
+};
+const OListTemplate = () => {
+ return html`
+
+ Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..
+
+ Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..
+
+ Sub of Second
+ Another Sub
+
+
+ hello world
+ hello world
+ hello world
+ hello world
+ hello world
+ hello world
+ hello world
+ hello world
+ hello world
+
+ `;
+};
+export const Headings = {
+ render: HeaderTemplate.bind({}),
+ name: "Headings",
+ args: {},
+ parameters: {},
+ tags: ["!dev", "!autodocs"]
+};
+export const Paragraph = {
+ render: ParagraphTemplate.bind({}),
+ name: "Paragraph",
+ args: {},
+ parameters: {},
+ tags: ["!dev", "!autodocs"]
+};
+export const Label = {
+ render: LabelTemplate.bind({}),
+ name: "Label",
+ args: {},
+ parameters: {},
+ tags: ["!dev", "!autodocs"]
+};
+export const Caption = {
+ render: CaptionTemplate.bind({}),
+ name: "Caption",
+ args: {},
+ parameters: {},
+ tags: ["!dev", "!autodocs"]
+};
+export const Anchor = {
+ render: AnchorTemplate.bind({}),
+ name: "Anchor",
+ args: {},
+ parameters: {},
+ tags: ["!dev", "!autodocs"]
+};
+export const ULists = {
+ render: UListTemplate.bind({}),
+ name: "Unordered lists",
+ args: {},
+ parameters: {},
+ tags: ["!dev", "!autodocs"]
+};
+export const OLists = {
+ render: OListTemplate.bind({}),
+ name: "Ordered lists",
+ args: {},
+ parameters: {},
+ tags: ["!dev", "!autodocs"]
+};
diff --git a/stories/getting-started/Usage/Attributes.mdx b/stories/usage/Attributes.mdx
similarity index 67%
rename from stories/getting-started/Usage/Attributes.mdx
rename to stories/usage/Attributes.mdx
index 80329a3c..6608b1f5 100644
--- a/stories/getting-started/Usage/Attributes.mdx
+++ b/stories/usage/Attributes.mdx
@@ -1,5 +1,5 @@
import { Meta, Markdown } from "@storybook/blocks";
-import AttributeAndProperties from '../../../docs/Attributes.md?raw';
+import AttributeAndProperties from '../../docs/Attributes.md?raw';