@muenchen/muc-patternlab-vue 1.11.0-beta.2 → 1.11.0-beta.3

package/dist/style.css

@@ -1 +1 @@
-.m-banner--success[data-v-ac0adeb7]{background-color:#f1f6f3;border-bottom:1px solid #3a7f53}.m-callout--success[data-v-efad4956]{background-color:#f1f6f3;border-color:#95b9a2}.m-callout--success .m-callout__icon[data-v-efad4956]{background-color:#3a7f53;box-shadow:0 .3125rem .625rem #005a9f33}.m-callout--error[data-v-efad4956]{background-color:#f8f2f2;border-color:#c79a9b}.m-callout--error .m-callout__icon[data-v-efad4956]{background-color:#984447;box-shadow:0 .3125rem .625rem #005a9f33}.card[data-v-acf0a1dd]{cursor:pointer;border:solid 1px var(--color-neutrals-blue);border-bottom:solid 5px var(--color-brand-main-blue);transition:background-color ease-in .15s}.card[data-v-acf0a1dd]:hover{background-color:#f1f1f1}.card-content[data-v-acf0a1dd]{padding:32px 24px}.card-header[data-v-acf0a1dd]{display:flex}.card-tagline[data-v-acf0a1dd]{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[data-v-acf0a1dd]{margin-top:16px;margin-bottom:16px}@media all and (min-width: 992px){.card-container[data-v-6740df8f]{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[data-v-6740df8f]{padding-left:0;padding-right:0;display:inline-grid;grid-template-columns:1fr;grid-row-gap:32px}}.muc-divider[data-v-3957c1bd]{margin-top:8px;margin-bottom:16px}
+.m-banner--success[data-v-53bc7eca]{background-color:#f1f6f3;border-bottom:1px solid #3a7f53}.m-callout--success[data-v-e6cf4104]{background-color:#f1f6f3;border-color:#95b9a2}.m-callout--success .m-callout__icon[data-v-e6cf4104]{background-color:#3a7f53;box-shadow:0 .3125rem .625rem #005a9f33}.m-callout--error[data-v-e6cf4104]{background-color:#f8f2f2;border-color:#c79a9b}.m-callout--error .m-callout__icon[data-v-e6cf4104]{background-color:#984447;box-shadow:0 .3125rem .625rem #005a9f33}.card[data-v-acf0a1dd]{cursor:pointer;border:solid 1px var(--color-neutrals-blue);border-bottom:solid 5px var(--color-brand-main-blue);transition:background-color ease-in .15s}.card[data-v-acf0a1dd]:hover{background-color:#f1f1f1}.card-content[data-v-acf0a1dd]{padding:32px 24px}.card-header[data-v-acf0a1dd]{display:flex}.card-tagline[data-v-acf0a1dd]{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[data-v-acf0a1dd]{margin-top:16px;margin-bottom:16px}@media all and (min-width: 992px){.card-container[data-v-6740df8f]{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[data-v-6740df8f]{padding-left:0;padding-right:0;display:inline-grid;grid-template-columns:1fr;grid-row-gap:32px}}.display-listbox[data-v-d28d341e]{display:block!important}.muc-divider[data-v-9ad3adc7]{margin-top:8px;margin-bottom:16px}

package/package.json

@@ -3,7 +3,7 @@
   "author": "FabianWilms",
   "description": "A vue component library of some of the components available from https://patternlab.muenchen.space",
   "license": "MIT",
-  "version": "1.11.0-beta.2",
+  "version": "1.11.0-beta.3",
   "private": false,
   "module": "./dist/muc-patternlab-vue.es.js",
   "types": "./dist/types/index.d.ts",

package/src/components/Banner/MucBanner.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import { MucIcon } from "../Icon";
+
 type bannerType = "info" | "success" | "warning" | "emergency";
 
 const props = withDefaults(
@@ -70,13 +72,13 @@ const typeAriaLabel = computed(() => {
 const typeIcon = computed(() => {
   switch (props.type) {
     case "success":
-      return "#icon-check";
+      return "check";
     case "warning":
     case "emergency":
-      return "#icon-warning";
+      return "warning";
     case "info":
     default:
-      return "#icon-information";
+      return "information";
   }
 });
 </script>
@@ -91,9 +93,7 @@ const typeIcon = computed(() => {
         :aria-label="typeAriaLabel"
       >
         <div class="container-fluid">
-          <svg class="icon">
-            <use :href="typeIcon" />
-          </svg>
+          <muc-icon :icon="typeIcon" />
           <slot />
         </div>
       </div>

package/src/components/BuisnessHours/MucBusinessHours.vue

@@ -12,12 +12,10 @@
       data-bs-toggle="collapse"
       :aria-expanded="!collapsed"
     >
-      <svg
-        aria-hidden="true"
+      <muc-icon
+        :icon="icon"
         class="icon icon--before"
-      >
-        <use :xlink:href="'#icon-' + icon"></use>
-      </svg>
+      />
       <div v-if="todaysBusinessHours">
         <span> {{ todaysBusinessHours.weekDay }} geöffnet </span>
         <span
@@ -30,13 +28,10 @@
           </span>
         </span>
       </div>
-
-      <svg
-        aria-hidden="true"
+      <muc-icon
+        icon="chevron-down"
         class="icon icon--after"
-      >
-        <use xlink:href="#icon-chevron-down"></use>
-      </svg>
+      />
     </button>
     <div
       class="m-business-hours-toggle__content"
@@ -74,6 +69,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 
+import { MucIcon } from "../Icon";
 import { BusinessHourType } from "./BusinessHourType";
 
 const LOCALES = "de-DE";

package/src/components/Button/MucButton.vue

@@ -7,13 +7,11 @@
   >
     <span>
       <slot />
-      <svg
+      <muc-icon
         v-if="icon"
-        aria-hidden="true"
+        :icon="icon"
         class="m-button__icon"
-      >
-        <use :xlink:href="'#icon-' + icon"></use>
-      </svg>
+      />
     </span>
   </button>
 </template>
@@ -21,6 +19,8 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import { MucIcon } from "../Icon";
+
 type buttonType = "primary" | "secondary" | "ghost";
 
 const props = withDefaults(

package/src/components/Callout/MucCallout.vue

@@ -8,12 +8,7 @@
       <div class="m-callout__icon">
         <slot name="icon">
           <!-- fallback icon -->
-          <svg
-            aria-hidden="true"
-            class="icon"
-          >
-            <use :xlink:href="`#icon-${fallbackCalloutIcon}`"></use>
-          </svg>
+          <muc-icon :icon="fallbackCalloutIcon" />
         </slot>
       </div>
       <div class="m-callout__body">
@@ -38,6 +33,8 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
+import { MucIcon } from "../Icon";
+
 type calloutType = "info" | "warning" | "success" | "error";
 
 const props = withDefaults(

package/src/components/Comment/MucComment.vue

@@ -12,9 +12,9 @@
           <slot name="author" />
         </span>
         <span v-if="showDate">
-          <span class="m-comment__author"
-            >&nbsp;<slot name="datePrefix"
-          /></span>
+          <span class="m-comment__author">
+            &nbsp;<slot name="datePrefix" />
+          </span>
           <span class="m-comment__date">&nbsp;<slot name="date" /> </span>
         </span>
         <div
@@ -27,35 +27,20 @@
             :key="n"
             class="m-star-rating__item m-star-rating__item--full"
           >
-            <svg
-              aria-hidden="true"
-              class="icon"
-            >
-              <use xlink:href="#icon-solid-star"></use>
-            </svg>
+            <muc-icon icon="solid-star" />
           </div>
           <div
             v-if="evaluateRating.isHalfStar"
             class="m-star-rating__item m-star-rating__item--half"
           >
-            <svg
-              aria-hidden="true"
-              class="icon"
-            >
-              <use xlink:href="#icon-half-star"></use>
-            </svg>
+            <muc-icon icon="half-star" />
           </div>
           <div
             v-for="n in evaluateRating.emptyStars"
             :key="n"
             class="m-star-rating__item"
           >
-            <svg
-              aria-hidden="true"
-              class="icon"
-            >
-              <use xlink:href="#icon-solid-star"></use>
-            </svg>
+            <muc-icon icon="solid-star" />
           </div>
           <div class="m-star-rating__numeric">
             {{ ratingWithDecimalComma }}
@@ -76,6 +61,7 @@
 <script setup lang="ts">
 import { computed, useSlots } from "vue";
 
+import { MucIcon } from "../Icon";
 import CommentType from "./CommentType";
 
 const LOCALES = "de-DE";

package/src/components/Form/MucCheckbox.stories.ts

@@ -0,0 +1,25 @@
+import MucCheckbox from "./MucCheckbox.vue";
+
+export default {
+  component: MucCheckbox,
+  title: "Forms/MucCheckBox",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `The MucCheckBox component is a UI element that allows users to make a binary choice, such as "yes" or "no". 
+        It is typically used in forms and settings where multiple options can be selected independently.
+        
+
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-checkboxes)
+`,
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    label: "This is a checkbox - click me",
+  },
+};

package/src/components/Form/MucCheckbox.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    class="m-checkboxes__item"
+    @click="clickedCheckbox"
+  >
+    <input
+      class="m-checkboxes__input"
+      name="checkbox"
+      type="checkbox"
+      :checked="checkBoxValue"
+      @click.stop="clickedCheckbox"
+    />
+    <label class="m-label m-checkboxes__label">
+      {{ label }} {{ checkBoxValue }}
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Input value from the checkbox component.
+ */
+const checkBoxValue = defineModel<boolean>("modelValue", { default: false });
+
+defineProps<{
+  /**
+   * Label is displayed to the right of the checkbox as information for the user.
+   */
+  label: string;
+}>();
+
+const emit = defineEmits<{
+  /**
+   * Emits every time the checkbox or the label is clicked - thus switching the state.
+   * @param e emits the click event.
+   */
+  (e: "click"): void;
+}>();
+
+/**
+ * Called upon clicking the checkbox or label, switches the state of the checkbox and emits the event.
+ */
+const clickedCheckbox = () => {
+  checkBoxValue.value = !checkBoxValue.value;
+  emit("click");
+};
+</script>

package/src/components/Form/MucCheckboxGroup.stories.ts

@@ -0,0 +1,43 @@
+import MucCheckbox from "./MucCheckbox.vue";
+import MucCheckboxGroup from "./MucCheckboxGroup.vue";
+
+export default {
+  components: { MucCheckboxGroup, MucCheckbox },
+  component: MucCheckboxGroup,
+  title: "Forms/MucCheckboxGroup",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `The MucCheckboxGroup component is a wrapper designed to group multiple MucCheckBox components together, allowing users to select multiple options from a set.
+
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-checkboxes-collapse)`,
+      },
+    },
+  },
+};
+
+export const NotCollapsable = () => ({
+  components: { MucCheckbox, MucCheckboxGroup },
+  template: `
+      <MucCheckboxGroup heading="Collapsable checkbox group ">
+         <template #checkboxes>
+           <MucCheckbox v-for="index in 4" :key="index" :label="'not-collapsed-' + index" />
+         </template>
+      </MucCheckboxGroup>
+  `,
+});
+
+export const Collapsable = () => ({
+  components: { MucCheckbox, MucCheckboxGroup },
+  template: `
+      <MucCheckboxGroup heading="Collapsable checkbox group ">
+         <template #checkboxes>
+           <MucCheckbox v-for="index in 4" :key="index" :label="'not-collapsed-' + index" />
+         </template>
+         <template #collapsableCheckboxes>
+           <MucCheckbox v-for="index in 4" :key="index" :label="'collapsed-' + index" />
+         </template>  
+      </MucCheckboxGroup>
+  `,
+});

package/src/components/Form/MucCheckboxGroup.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="m-form-group">
+    <fieldset class="m-checkbox-group">
+      <legend class="m-checkbox-group__legend">
+        <h3 class="m-checkbox-group__heading">
+          {{ heading }}
+        </h3>
+      </legend>
+      <div class="m-checkboxes m-checkboxes--collapse">
+        <slot name="checkboxes" />
+        <div
+          v-if="$slots.collapsableCheckboxes"
+          class="m-checkboxes__collapse__container"
+          :class="isCollapsed"
+        >
+          <slot name="collapsableCheckboxes" />
+        </div>
+        <muc-button
+          v-if="$slots.collapsableCheckboxes"
+          variant="ghost"
+          @click="toggleCollapse"
+          :aria-expanded="!collapsed"
+        >
+          <span>Mehr </span>
+          <svg
+            aria-hidden="true"
+            class="icon icon--after"
+          >
+            <use :href="'#icon-chevron-' + buttonIcon"></use>
+          </svg>
+        </muc-button>
+      </div>
+    </fieldset>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+import { MucButton } from "../Button";
+
+/**
+ * Internal state for the collapsed section
+ */
+const collapsed = ref(true);
+
+defineProps<{
+  /**
+   * Display a heading above the slots.
+   */
+  heading?: string;
+}>();
+
+defineSlots<{
+  /**
+   * Slot directly beneath the heading which will be displayed at all times.
+   */
+  checkboxes(): any;
+
+  /**
+   * Slot beneath the regular checkbox slot which will be collapsed at first.
+   */
+  collapsableCheckboxes(): any;
+}>();
+
+/**
+ * Switches the collapse class for the collapsable container.
+ */
+const isCollapsed = computed(() => (collapsed.value ? "collapse" : ""));
+
+/**
+ * Switches the icon in the button to collapse / expand the container.
+ */
+const buttonIcon = computed(() => (collapsed.value ? "down" : "up"));
+
+/**
+ * Toggles the internal state for the collapsed container.
+ */
+const toggleCollapse = () => (collapsed.value = !collapsed.value);
+</script>

package/src/components/Form/MucErrorList.stories.ts

@@ -0,0 +1,31 @@
+import MucErrorList from "./MucErrorList.vue";
+
+export default {
+  component: MucErrorList,
+  title: "Forms/MucErrorList",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `Simple display of one or more errors as a list.
+
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-error-list)
+`,
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    title: "A problem occurred!",
+    errors: "Only one error line",
+  },
+};
+
+export const Multiple = {
+  args: {
+    title: "A problem occurred!",
+    errors: ["Error 1", "Error 2", "Error 3", "Error 4"],
+  },
+};

package/src/components/Form/MucErrorList.vue

@@ -0,0 +1,34 @@
+<template>
+  <div
+    class="m-error-list"
+    role="alert"
+    tabindex="-1"
+  >
+    <h2 class="m-error-list__title">
+      {{ title }}
+    </h2>
+    <div class="m-error-list__body">
+      <ul class="m-list m-error-list__list">
+        <li
+          v-for="(error, index) in listOfErrors"
+          :key="index"
+        >
+          <a>{{ error }} </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+  title?: string;
+  errors: string | string[];
+}>();
+
+const listOfErrors = computed(() =>
+  typeof props.errors === "string" ? [props.errors] : props.errors
+);
+</script>

package/src/components/Form/MucInput.stories.ts

@@ -0,0 +1,90 @@
+import MucInput from "./MucInput.vue";
+
+export default {
+  component: MucInput,
+  title: "Forms/MucInput",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `The MucInput component is a text-based input field.
+        Various types are allowed e.g. datepicker or password.
+         It supports various styling options like prefixes /suffixes, buttons and can also be displayed as a textarea.
+
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-input-text)
+`,
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    placeholder: "Please type here",
+  },
+};
+
+export const HintAndLabel = {
+  args: {
+    ...Default.args,
+    hint: "This is a hint",
+    label: "This is a label",
+  },
+};
+
+export const Password = {
+  args: {
+    ...Default.args,
+    type: "password",
+    modelValue: "password",
+    hint: "The input text is 'password'",
+  },
+};
+
+export const Error = {
+  args: {
+    ...Default.args,
+    errorMsg: "Oops, an error occurred",
+    hint: "An error message triggers the error state",
+  },
+};
+
+export const Prefix = {
+  args: {
+    ...Default.args,
+    prefix: "Prefix",
+  },
+};
+
+export const SuffixIcon = {
+  args: {
+    ...Default.args,
+    suffixIcon: "search",
+  },
+};
+
+export const Search = {
+  args: {
+    ...Default.args,
+    type: "search",
+    datalist: ["chocolate", "coconut", "vanilla", "mint"],
+  },
+};
+
+export const Color = {
+  args: {
+    type: "color",
+  },
+};
+
+export const Date = {
+  args: {
+    type: "date",
+  },
+};
+
+export const Datetime_Local = {
+  args: {
+    type: "datetime-local",
+  },
+};