diff --git a/.storybook/main.ts b/.storybook/main.ts index 8df803d6..594f9a3b 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -6,8 +6,12 @@ import { StorybookConfig } from "@storybook/vue3-vite"; const fs = require("fs"); const path = require("path"); const mucIconsSvg = fs.readFileSync( - path.resolve(__dirname, "../public/assets/temporary/muc-icons.svg"), - "utf8" + path.resolve(__dirname, "../public/assets/temporary/muc-icons.svg"), + "utf8" +); +const customIconsSvg = fs.readFileSync( + path.resolve(__dirname, "../public/assets/temporary/custom-icons.svg"), + "utf8" ); const config: StorybookConfig = { @@ -27,6 +31,7 @@ const config: StorybookConfig = { previewBody: (body) => ` ${body} ${mucIconsSvg} + ${customIconsSvg} `, docs: { autodocs: "tag", diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html new file mode 100644 index 00000000..611c226f --- /dev/null +++ b/.storybook/manager-head.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/GettingStarted.mdx b/docs/GettingStarted.mdx index 828f592d..16b388ea 100644 --- a/docs/GettingStarted.mdx +++ b/docs/GettingStarted.mdx @@ -32,22 +32,21 @@ export default defineConfig({ }); ``` -In your Webcomponents root you should import the MDE5-CSS and SVG-Sprite for MDE5-Icons: +In your Webcomponents root you should import the MDE5-CSS and SVG-Sprite for MDE5-Icons, as well as the optional custom-icons SVG-Sprite: ```html @@ -55,6 +54,7 @@ In your Webcomponents root you should import the MDE5-CSS and SVG-Sprite for MDE ``` diff --git a/docs/Iconography.mdx b/docs/Iconography.mdx new file mode 100644 index 00000000..f5e3e722 --- /dev/null +++ b/docs/Iconography.mdx @@ -0,0 +1,24 @@ +import { Meta, IconGallery, IconItem } from '@storybook/blocks'; + + + +# Iconography + +This library already contains MDE5-Patternlabs iconset. The documentation to it can be found [here](https://patternlab.muenchen.space/?p=viewall-guidelines-icons). + +Additionally, it adds some specialty icons from [Pictogrammers](https://pictogrammers.com/library/mdi) which can be accessed by embedding the SVG-Sprite `custom-icons.svg` as described in [the getting started guide](/docs/getting-started--docs#setup). + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/images/favicon.ico b/docs/images/favicon.ico new file mode 100644 index 00000000..bc5d76b1 Binary files /dev/null and b/docs/images/favicon.ico differ diff --git a/package-lock.json b/package-lock.json index 14ee5644..0ad8a029 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5166,9 +5166,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.12.11", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.11.tgz", - "integrity": "sha512-vDg9PZ/zi+Nqp6boSOT7plNuthRugEKixDv5sFTIpkE89MmNtEArAShI4mxuX2+UrLEe9pxC1vm2cjm9YlWbJw==", + "version": "20.12.12", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz", + "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==", "dev": true, "dependencies": { "undici-types": "~5.26.4" @@ -5620,25 +5620,28 @@ } }, "node_modules/@volar/typescript": { - "version": "2.2.0", - "integrity": "sha512-wC6l4zLiiCLxF+FGaHCbWlQYf4vMsnRxYhcI6WgvaNppOD6r1g+Ef1RKRJUApALWU46Yy/JDU/TbdV6w/X6Liw==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.2.tgz", + "integrity": "sha512-WcwOREz7+uOrpjUrKhOMaOKKmyPdtqF95HWX7SE0d9hhBB1KkfahxhaAex5U9Bn43LfINHlycLoYCNEtfeKm0g==", "dev": true, "dependencies": { - "@volar/language-core": "2.2.0", + "@volar/language-core": "2.2.2", "path-browserify": "^1.0.1" } }, "node_modules/@volar/typescript/node_modules/@volar/language-core": { - "version": "2.2.0", - "integrity": "sha512-a8WG9+4OdeNDW4ywABZIM6S6UN7em8uIlM/BZ2pWQUYrVmX+m8sj/X+QadvO+Li/t/LjAqbWJQtVgxdpEWLALQ==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.2.tgz", + "integrity": "sha512-GuvEL4JdxbnLVhPLICncCGT+tVW4cIz9GxXNeDofNnJ4iNTKhr5suGVsA1GLOne9PbraSjn8PlLt+pvLxuRVeQ==", "dev": true, "dependencies": { - "@volar/source-map": "2.2.0" + "@volar/source-map": "2.2.2" } }, "node_modules/@volar/typescript/node_modules/@volar/source-map": { - "version": "2.2.0", - "integrity": "sha512-HQlPRlHOVqCCHK8wI76ZldHkEwKsjp7E6idUc36Ekni+KJDNrqgSqPvyHQixybXPHNU7CI9Uxd9/IkxO7LuNBw==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.2.tgz", + "integrity": "sha512-vUwvZuSW6iN4JI9QRinh9EjFasx1TUtnaWMKwgWx08xz1PyYuNkLlWlrZXBZ5GGBhML0u230M/7X+AHY2h9yKg==", "dev": true, "dependencies": { "muggle-string": "^0.4.0" @@ -5646,6 +5649,7 @@ }, "node_modules/@volar/typescript/node_modules/muggle-string": { "version": "0.4.1", + "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz", "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==", "dev": true }, @@ -15069,8 +15073,9 @@ } }, "node_modules/rimraf": { - "version": "5.0.5", - "integrity": "sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A==", + "version": "5.0.7", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.7.tgz", + "integrity": "sha512-nV6YcJo5wbLW77m+8KjH8aB/7/rxQy9SZ0HY5shnwULfS+9nmTtVXAJET5NdZmCzA4fPI/Hm1wo/Po/4mopOdg==", "dev": true, "dependencies": { "glob": "^10.3.7" @@ -15079,7 +15084,10 @@ "rimraf": "dist/esm/bin.mjs" }, "engines": { - "node": ">=14" + "node": ">=14.18" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" } }, "node_modules/rollup": { @@ -17494,12 +17502,13 @@ } }, "node_modules/vue-tsc": { - "version": "2.0.16", - "integrity": "sha512-/gHAWJa216PeEhfxtAToIbxdWgw01wuQzo48ZUqMYVEyNqDp+OYV9xMO5HaPS2P3Ls0+EsjguMZLY4cGobX4Ew==", + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.17.tgz", + "integrity": "sha512-RRZsiCBD1hvATQb321xV+SkRDKsK5hgFQ4WXy5wuYsyyjz8xAK4DjxHkpH7PFoJKUbZTbeW8KzhejzXZS49Tzw==", "dev": true, "dependencies": { - "@volar/typescript": "~2.2.0", - "@vue/language-core": "2.0.16", + "@volar/typescript": "~2.2.2", + "@vue/language-core": "2.0.17", "semver": "^7.5.4" }, "bin": { @@ -17510,27 +17519,30 @@ } }, "node_modules/vue-tsc/node_modules/@volar/language-core": { - "version": "2.2.0", - "integrity": "sha512-a8WG9+4OdeNDW4ywABZIM6S6UN7em8uIlM/BZ2pWQUYrVmX+m8sj/X+QadvO+Li/t/LjAqbWJQtVgxdpEWLALQ==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.2.tgz", + "integrity": "sha512-GuvEL4JdxbnLVhPLICncCGT+tVW4cIz9GxXNeDofNnJ4iNTKhr5suGVsA1GLOne9PbraSjn8PlLt+pvLxuRVeQ==", "dev": true, "dependencies": { - "@volar/source-map": "2.2.0" + "@volar/source-map": "2.2.2" } }, "node_modules/vue-tsc/node_modules/@volar/source-map": { - "version": "2.2.0", - "integrity": "sha512-HQlPRlHOVqCCHK8wI76ZldHkEwKsjp7E6idUc36Ekni+KJDNrqgSqPvyHQixybXPHNU7CI9Uxd9/IkxO7LuNBw==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.2.tgz", + "integrity": "sha512-vUwvZuSW6iN4JI9QRinh9EjFasx1TUtnaWMKwgWx08xz1PyYuNkLlWlrZXBZ5GGBhML0u230M/7X+AHY2h9yKg==", "dev": true, "dependencies": { "muggle-string": "^0.4.0" } }, "node_modules/vue-tsc/node_modules/@vue/language-core": { - "version": "2.0.16", - "integrity": "sha512-Bc2sexRH99pznOph8mLw2BlRZ9edm7tW51kcBXgx8adAoOcZUWJj3UNSsdQ6H9Y8meGz7BoazVrVo/jUukIsPw==", + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.17.tgz", + "integrity": "sha512-tHw2J6G9yL4kn3jN5MftOHEq86Y6qnuohBQ1OHkJ73fAv3OYgwDI1cfX7ds0OEJEycOMG64BA3ql5bDgDa41zw==", "dev": true, "dependencies": { - "@volar/language-core": "~2.2.0", + "@volar/language-core": "~2.2.2", "@vue/compiler-dom": "^3.4.0", "@vue/shared": "^3.4.0", "computeds": "^0.0.1", @@ -17549,6 +17561,7 @@ }, "node_modules/vue-tsc/node_modules/muggle-string": { "version": "0.4.1", + "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz", "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==", "dev": true }, diff --git a/package.json b/package.json index 9d2c93e9..ca3ee3bf 100644 --- a/package.json +++ b/package.json @@ -21,9 +21,12 @@ "types": "./dist/types/index.d.ts", "import": "./dist/muc-patternlab-vue.es.js" }, - "./dist/assets/temporary/muc-icons.svg": "./dist/assets/temporary/muc-icons.svg", + "./dist/style.css": "./dist/style.css", + "./dist/assets/temporary/custom-style.css": "./dist/assets/temporary/custom-style.css", + "./dist/assets/temporary/muenchende-style.css": "./dist/assets/temporary/muenchende-style.css", "./dist/assets/temporary/muenchende-fontface.css": "./dist/assets/temporary/muenchende-fontface.css", - "./dist/assets/temporary/muenchende-style.css": "./dist/assets/temporary/muenchende-style.css" + "./dist/assets/temporary/muc-icons.svg": "./dist/assets/temporary/muc-icons.svg", + "./dist/assets/temporary/custom-icons.svg": "./dist/assets/temporary/custom-icons.svg" }, "files": [ "src", diff --git a/public/assets/temporary/custom-icons.svg b/public/assets/temporary/custom-icons.svg new file mode 100644 index 00000000..93f44e3d --- /dev/null +++ b/public/assets/temporary/custom-icons.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/assets/temporary/muc-icons.svg b/public/assets/temporary/muc-icons.svg index 68e7ec55..61cc2657 100644 --- a/public/assets/temporary/muc-icons.svg +++ b/public/assets/temporary/muc-icons.svg @@ -1,4 +1,4 @@ -
-
-
-
-
- +
+
+
+

- {{ tagline }} - - -

- {{ title }} -

+ > + {{ tagline }} +

+

+ {{ title }} +

+
-
+
-
-

- -

-
-
+
+

+ +

diff --git a/src/index.ts b/src/index.ts index c3c71341..0d8960c9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,8 +2,6 @@ import { type App } from "vue"; import * as components from "./components"; -import "../public/assets/temporary/muenchende-style.css"; - function install(app: App) { for (const key in components) { // @ts-expect-error