57 muccard

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import "../public/assets/temporary/muenchende-style.css";
+import "../public/assets/temporary/custom-style.css";
 import "../public/assets/temporary/muenchende-fontfaces.css";
 
 /** @type { import('@storybook/vue3').Preview } */

docs/GettingStarted.mdx

@@ -54,6 +54,7 @@ In your Webcomponents root you should import the MDE5-CSS and SVG-Sprite for MDE
 
 <style>
   @import "@muenchen/muc-patternlab-vue/dist/assets/temporary/muenchende-style.css";
+  @import "@muenchen/muc-patternlab-vue/dist/assets/temporary/custom-style.css";
 </style>
 ```
 

public/assets/temporary/custom-style.css

@@ -0,0 +1,71 @@
+/**
+ * We need this css to ensure the correct patternlab
+ * behaviour inside of a webcomponent.
+ */
+:root {
+    --color-brand-main-blue: #005A9F;
+    --color-neutrals-blue: #BDD4EA;
+    --color-neutrals-blue-xlight: #F2F6FA;
+    --color-neutrals-grey: #3A5368;
+    color: var(--color-neutrals-grey);
+    font-family: Open Sans, Arial, sans-serif;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    word-break: break-word;
+    background-color: #fff;
+    -webkit-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+h1 {
+    font-family: "Roboto Condensed",Arial,sans-serif;
+    font-size: 1.875rem;
+    font-weight: 700;
+    line-height: 1.25;
+}
+h2 {
+    font-family: "Roboto Condensed",Arial,sans-serif;
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1.25;
+}
+h3 {
+    font-family: "Roboto Condensed",Arial,sans-serif;
+    font-size: 1.25rem;
+    font-weight: 700;
+    line-height: 1.25;
+}
+h4 {
+    font-family: "Roboto Condensed",Arial,sans-serif;
+    font-size: 1.125rem;
+    font-weight: 700;
+    line-height: 1.25;
+}
+h5 {
+    font-family: "Roboto Condensed",Arial,sans-serif;
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.5;
+}
+
+@media all and (min-width:1200px) {
+    h1 {
+        font-size: 2.375rem;
+    }
+    h2 {
+        font-size: 1.75rem;
+    }
+    h3 {
+        font-size: 1.5rem;
+    }
+    h4 {
+        font-size: 1.25rem;
+    }
+}
+
+.muc-divider {
+    align-self: stretch;
+    height: 0;
+    border: 1px var(--color-neutrals-blue) solid;
+}

src/components/Card/MucCard.stories.ts

@@ -0,0 +1,55 @@
+import { fn } from "@storybook/test";
+
+import MucCard from "./MucCard.vue";
+
+export default {
+  component: MucCard,
+  title: "MucCard",
+  tags: ["autodocs"],
+  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
+  args: { onClick: fn() },
+  parameters: {
+    docs: {
+      description: {
+        component: `A Card-Component in Patternlab-Style.
+
+Use inside [MucCardContainer](/docs/muccardcontainer--docs) for a automatically wrapping layout.
+
+🔗 Patternlab-Docs (not yet available)
+`,
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    title: "Lorem Ipsum",
+    tagline: "Dolor",
+    content:
+      "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+  },
+};
+
+export const WithHeaderPrefix = () => ({
+  components: { MucCard },
+  template: `
+      <MucCard
+          v-bind="$props"
+          title="Lorem Ipsum"
+          tagline="Dolor"
+      >
+        <template #headerPrefix>
+          <div
+              style="padding-right: 16px; font-size: 32px;"
+          >
+            📆
+          </div>
+        </template>
+        <template #content>
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+          dolore magna aliquyam erat, sed diam voluptua.
+        </template>
+      </MucCard>
+    `,
+});

src/components/Card/MucCard.vue

@@ -0,0 +1,92 @@
+<template>
+  <div
+    class="card"
+    @click="emit('click', $event)"
+  >
+    <div class="card-content">
+      <div class="card-header">
+        <slot name="headerPrefix" />
+        <div>
+          <div
+            v-if="tagline"
+            class="card-tagline"
+          >
+            {{ tagline }}
+          </div>
+          <div>
+            <h3>{{ title }}</h3>
+          </div>
+        </div>
+      </div>
+
+      <div class="muc-divider" />
+
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits<{
+  /**
+   * Triggered when card is clicked.
+   * @param e Click-Event
+   */
+  (e: "click", click: Event): void;
+}>();
+
+defineProps<{
+  title: string;
+  tagline: string;
+}>();
+
+defineSlots<{
+  /**
+   * Icon shown above the callout. Defaults to icons matching the type.
+   */
+  headerPrefix(): any;
+  /**
+   * Content beneath the heading shown as text.
+   */
+  content(): any;
+}>();
+</script>
+
+<style scoped>
+.card {
+  cursor: pointer;
+  border: solid 1px var(--color-neutrals-blue);
+  border-bottom: solid 5px var(--color-brand-main-blue);
+  transition: background-color ease-in 150ms;
+}
+
+.card:hover {
+  background-color: #f1f1f1;
+}
+
+.card-content {
+  padding: 32px 24px;
+}
+
+.card-header {
+  display: flex;
+}
+
+.card-tagline {
+  font-size: 16px;
+  font-family:
+    Open Sans,
+    sans-serif;
+  color: #005a9f;
+  font-weight: 700;
+  line-height: 24px;
+  word-wrap: break-word;
+
+  padding-bottom: 4px;
+}
+
+.muc-divider {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+</style>

src/components/Card/MucCardContainer.stories.ts

@@ -0,0 +1,43 @@
+import { fn } from "@storybook/test";
+
+import MucCard from "./MucCard.vue";
+import MucCardContainer from "./MucCardContainer.vue";
+
+export default {
+  components: { MucCardContainer },
+  component: MucCardContainer,
+  title: "MucCardContainer",
+  tags: ["autodocs"],
+  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
+  args: { onClick: fn() },
+  parameters: {
+    docs: {
+      description: {
+        component: `A wrapping Layout to use with [MucCard](/docs/muccard--docs).
+
+🔗 Patternlab-Docs (not yet available)
+`,
+      },
+    },
+  },
+};
+
+export const Template = () => ({
+  components: { MucCardContainer, MucCard },
+  template: `
+      <MucCardContainer>
+        <MucCard
+            v-bind="$props"
+            title="Lorem Ipsum"
+            tagline="Dolor"
+            v-for="index in 5"
+            :key="index"
+        >
+          <template #content>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua.
+          </template>
+        </MucCard>
+      </MucCardContainer>
+    `,
+});

src/components/Card/MucCardContainer.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="container card-container">
+    <slot/>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineSlots<{
+  /**
+   * MucCards can be put into this slot.
+   */
+  default(): any;
+}>();
+</script>
+
+<style scoped>
+@media all and (min-width: 992px) {
+  .card-container {
+    padding-left: 0;
+    padding-right: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 384px);
+    grid-column-gap: 32px;
+    grid-row-gap: 32px;
+  }
+}
+
+@media all and (max-width: 992px) {
+  .card-container {
+    padding-left: 0;
+    padding-right: 0;
+    display: inline-grid;
+    grid-template-columns: 1fr;
+    grid-row-gap: 32px;
+  }
+}
+</style>

src/components/Card/index.ts

@@ -0,0 +1,4 @@
+import MucCard from "./MucCard.vue";
+import MucCardContainer from "./MucCardContainer.vue";
+
+export { MucCard, MucCardContainer };

src/components/Intro/MucIntro.stories.ts

@@ -20,9 +20,18 @@ Used e.g. in https://stadt.muenchen.de/buergerservice/anliegen.html.
 
 export const Default = {
   args: {
-    title: "Intro-Title",
+    tagline: "Tagline",
+    title: "Intro with Title",
+    divider: true,
     default:
       "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.\n" +
       "    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
   },
 };
+
+export const Minimal = {
+  args: {
+    title: "Smaller Intro with Title",
+    default: Default.args.default,
+  },
+};