From 907dc49b0fee4d735272ce18f3246e36046e13e0 Mon Sep 17 00:00:00 2001 From: "fabian.wilms" Date: Fri, 10 May 2024 06:14:49 +0200 Subject: [PATCH 1/2] :bug: fix storybook brandImage --- .storybook/MucTheme.ts | 2 +- .storybook/main.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.storybook/MucTheme.ts b/.storybook/MucTheme.ts index d14397ee..9bfb0880 100644 --- a/.storybook/MucTheme.ts +++ b/.storybook/MucTheme.ts @@ -4,6 +4,6 @@ export default create({ base: 'light', brandTitle: 'muc-patternlab-vue', brandUrl: 'https://github.com/it-at-m/muc-patternlab-vue', - brandImage: '../docs/images/muc-patternlab-vue.png', + brandImage: './muc-patternlab-vue.png', brandTarget: '_blank', }); \ No newline at end of file diff --git a/.storybook/main.ts b/.storybook/main.ts index 23936bac..8df803d6 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -12,7 +12,7 @@ const mucIconsSvg = fs.readFileSync( const config: StorybookConfig = { stories: ["../docs/*.mdx", "../src/components/**/*.stories.ts"], - staticDirs: ["../public"], + staticDirs: ["../public", "../docs/images"], addons: [ "@storybook/addon-links", "@storybook/addon-essentials", From 939bedaae3a2f8a98df5355d302142e9cefcbfb1 Mon Sep 17 00:00:00 2001 From: "fabian.wilms" Date: Fri, 10 May 2024 06:15:44 +0200 Subject: [PATCH 2/2] :sparkles: add additional custom icons --- .storybook/main.ts | 9 +++++++-- docs/Iconography.mdx | 24 ++++++++++++++++++++++++ public/assets/temporary/custom-icons.svg | 7 +++++++ public/assets/temporary/muc-icons.svg | 2 +- 4 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 docs/Iconography.mdx create mode 100644 public/assets/temporary/custom-icons.svg 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/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/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 @@ -