Merge pull request #78 from it-at-m/beta

Release Merge

.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",

.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel="shortcut icon" href="/favicon.ico">

docs/GettingStarted.mdx

@@ -32,29 +32,29 @@ 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
 <script
   lang="ts"
   setup
 >
-  import sprites from "@muenchen/muc-patternlab-vue/dist/assets/temporary/muc-icons.svg?raw";
+  import mucIconsSprite from "@muenchen/muc-patternlab-vue/dist/assets/temporary/muc-icons.svg?raw";
+  import customIconsSprite from "@muenchen/muc-patternlab-vue/dist/assets/temporary/custom-icons.svg?raw";
 </script>
 
 <template>
   <div>
-    <svg
-      style="display: none;"
-      v-html="sprites"
-    ></svg>
+    <div v-html="mucIconsSprite"></div>
+    <div v-html="customIconsSprite"></div>
     <...>
   </div>
 </template>
 
 <style>
   @import "@muenchen/muc-patternlab-vue/dist/assets/temporary/muenchende-style.css";
   @import "@muenchen/muc-patternlab-vue/dist/assets/temporary/custom-style.css";
+  @import "@muenchen/muc-patternlab-vue/dist/style.css";
 </style>
 ```
 

docs/Iconography.mdx

@@ -0,0 +1,24 @@
+import { Meta, IconGallery, IconItem } from '@storybook/blocks';
+
+<Meta title="Iconography" />
+
+# 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).
+
+<IconGallery>
+    <IconItem name="pencil">
+        <svg fill="currentColor"><use href="#icon-pencil" /></svg>
+    </IconItem>
+    <IconItem name="dots-vertical">
+        <svg fill="currentColor"><use href="#icon-dots-vertical" /></svg>
+    </IconItem>
+    <IconItem name="circle-off-outline">
+        <svg fill="currentColor"><use href="#icon-circle-off-outline" /></svg>
+    </IconItem>
+    <IconItem name="account">
+        <svg fill="currentColor"><use href="#icon-account" /></svg>
+    </IconItem>
+</IconGallery>

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",

src/components/Intro/MucIntro.vue

@@ -16,40 +16,39 @@ defineProps<{
 
 defineSlots<{
   /**
-   * Text-content of the Intro.
+   * Body of the Intro.
    */
   default(): any;
 }>();
 </script>
 
 <template>
-  <div class="m-intro m-intro-vertical">
-    <div class="m-intro-vertical__body">
-      <div class="container">
-        <div class="m-intro-vertical__grid">
-          <div class="m-intro-vertical__grid-inner">
-            <span
+  <div class="m-intro m-intro-static-image" style="background-color: var(--color-neutrals-blue-xlight);">
+    <div
+        class="container"
+    >
+      <div style="width: 66.6%">
+        <div>
+          <p
               v-if="tagline"
               class="m-intro-vertical__tagline"
-            >
-              {{ tagline }}
-            </span>
-
-            <h1 class="m-intro-vertical__title">
-              {{ title }}
-            </h1>
+          >
+            {{ tagline }}
+          </p>
+          <h1 class="m-intro-vertical__title">
+            {{ title }}
+          </h1>
+        </div>
 
-            <div
-              v-if="divider"
-              class="muc-divider"
-            ></div>
+        <div
+            v-if="divider"
+            class="muc-divider"
+        ></div>
 
-            <div class="m-intro-vertical__content">
-              <p>
-                <slot></slot>
-              </p>
-            </div>
-          </div>
+        <div class="m-intro-vertical__content">
+          <p style="padding-bottom: 32px;">
+            <slot></slot>
+          </p>
         </div>
       </div>
     </div>

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