@muenchen/muc-patternlab-vue 1.13.0-beta.7 → 1.13.0-beta.8

package/src/components/Banner/MucBanner.stories.ts

@@ -1,47 +0,0 @@
-import MucBanner from "./MucBanner.vue";
-
-export default {
-  component: MucBanner,
-  title: "MucBanner",
-  tags: ["autodocs"],
-  //👇 Our exports that end in "Data" are not stories.
-  excludeStories: /.*Data$/,
-  parameters: {
-    docs: {
-      description: {
-        component: `A banner-component used for single-line informations. Available in multiple types.
-
-[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-elements-banner)
-`,
-      },
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    default: "Hi, I'm an Info-Banner!",
-    type: "info",
-  },
-};
-
-export const Success = {
-  args: {
-    default: "Hi, I'm a Success-Banner!",
-    type: "success",
-  },
-};
-
-export const Warning = {
-  args: {
-    default: "Hi, I'm a Warning-Banner!",
-    type: "warning",
-  },
-};
-
-export const Emergency = {
-  args: {
-    default: "Hi, I'm an Emergency-Banner!",
-    type: "emergency",
-  },
-};

package/src/components/Banner/MucBanner.vue

@@ -1,109 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-import { MucIcon } from "../Icon";
-
-type bannerType = "info" | "success" | "warning" | "emergency";
-
-const props = withDefaults(
-  defineProps<{
-    /**
-     * Changes the style of the banner. Available types are `info`, `warning` and `emergency`.
-     */
-    type?: bannerType;
-  }>(),
-  {
-    type: "info",
-  }
-);
-
-defineSlots<{
-  /**
-   * Text-content of the banner.
-   */
-  default(): any;
-}>();
-
-const typeClass = computed(() => {
-  switch (props.type) {
-    case "info":
-      return "m-banner--info";
-    case "success":
-      return "m-banner--success";
-    case "warning":
-      return "m-banner--warning";
-    case "emergency":
-      return "m-banner--emergency";
-    default:
-      return "m-banner--info";
-  }
-});
-
-const typeRole = computed(() => {
-  switch (props.type) {
-    case "info":
-      return "dialog";
-    case "success":
-      return "dialog";
-    case "warning":
-      return "alert";
-    case "emergency":
-      return "alert";
-    default:
-      return "dialog";
-  }
-});
-
-const typeAriaLabel = computed(() => {
-  switch (props.type) {
-    case "info":
-      return "Information";
-    case "success":
-      return "Erfolg";
-    case "warning":
-      return "Warnung";
-    case "emergency":
-      return "Emergency";
-    default:
-      return "Information";
-  }
-});
-
-const typeIcon = computed(() => {
-  switch (props.type) {
-    case "success":
-      return "check";
-    case "warning":
-    case "emergency":
-      return "warning";
-    case "info":
-    default:
-      return "information";
-  }
-});
-</script>
-
-<template>
-  <div>
-    <div>
-      <div
-        class="m-banner"
-        :class="typeClass"
-        :role="typeRole"
-        :aria-label="typeAriaLabel"
-      >
-        <div class="container-fluid">
-          <muc-icon :icon="typeIcon" />
-          <slot />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.m-banner--success {
-  background-color: #f1f6f3;
-  border-bottom: 1px solid #3a7f53;
-}
-</style>

package/src/components/Banner/index.ts

@@ -1,3 +0,0 @@
-import MucBanner from "./MucBanner.vue";
-
-export { MucBanner };

package/src/components/BuisnessHours/BusinessHourType.ts

@@ -1,28 +0,0 @@
-/**
- * Shorthand notation of all seven days in german.
- *
- * @typedef {"Mo" | "Di" | "Mi" | "Do" | "Fr" | "Sa" | "So"} WeekDays
- */
-type WeekDays = "Mo" | "Di" | "Mi" | "Do" | "Fr" | "Sa" | "So";
-
-/**
- * @typedef {Object} OpeningHour
- * @property {string} from - The start time of the opening period (in 'HH:mm' format).
- * @property {string} to - The end time of the opening period (in 'HH:mm' format).
- */
-type OpeningHour = {
-  from: string;
-  to: string;
-};
-
-/**
- * @typedef {Object} BusinessHourType
- * @property {WeekDays} weekDay - The day of the week for which the opening hours apply.
- * @property {OpeningHour[]} openingHours - A list of opening hours for the specified day of the week.
- */
-type BusinessHourType = {
-  weekDay: WeekDays;
-  openingHours: OpeningHour[];
-};
-
-export type { BusinessHourType, OpeningHour, WeekDays };

package/src/components/BuisnessHours/BusinessHours.stories.ts

@@ -1,108 +0,0 @@
-import MucBusinessHours from "./MucBusinessHours.vue";
-
-export default {
-  component: MucBusinessHours,
-  title: "MucBusinessHours",
-  tags: ["autodocs"],
-  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The businessHours component is used to display the business hours for each day of the week. 
-The current day is highlighted as well as the days that are closed. 
-In the toggleable variant, the current day and the opening hours are also displayed on the toggle button.
-
-[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-components-business-hours)
-`,
-      },
-    },
-  },
-};
-
-const businessHours = [
-  {
-    weekDay: "Mo",
-    openingHours: [
-      {
-        from: "08:00",
-        to: "12:00",
-      },
-      {
-        from: "14:00",
-        to: "18:00",
-      },
-    ],
-  },
-  {
-    weekDay: "Di",
-    openingHours: [
-      {
-        from: "09:00",
-        to: "13:00",
-      },
-    ],
-  },
-  {
-    weekDay: "Mi",
-    openingHours: [
-      {
-        from: "10:00",
-        to: "14:00",
-      },
-    ],
-  },
-  {
-    weekDay: "Do",
-    openingHours: [
-      {
-        from: "08:00",
-        to: "12:00",
-      },
-      {
-        from: "15:00",
-        to: "19:00",
-      },
-    ],
-  },
-  {
-    weekDay: "Fr",
-    openingHours: [
-      {
-        from: "08:00",
-        to: "12:00",
-      },
-      {
-        from: "13:00",
-        to: "17:00",
-      },
-    ],
-  },
-  {
-    weekDay: "Sa",
-    openingHours: [
-      {
-        from: "10:00",
-        to: "13:00",
-      },
-    ],
-  },
-  {
-    weekDay: "So",
-    openingHours: [],
-  },
-];
-
-export const Default = {
-  args: {
-    businessHours: businessHours,
-    toggleable: true,
-  },
-};
-
-export const Fixed = {
-  args: {
-    ...Default.args,
-    toggleable: false,
-  },
-};

package/src/components/BuisnessHours/MucBusinessHours.vue

@@ -1,162 +0,0 @@
-<template>
-  <div class="m-business-hours-toggle">
-    <h3 class="m-business-hours-toggle__title visually-hidden">
-      Öffnungszeiten
-    </h3>
-    <button
-      v-if="toggleable"
-      @click="toggleCollapsable"
-      class="m-business-hours-toggle__trigger is-open"
-      :class="collapsedClass"
-      type="button"
-      data-bs-toggle="collapse"
-      :aria-expanded="!collapsed"
-    >
-      <muc-icon
-        :icon="icon"
-        class="icon icon--before"
-      />
-      <div v-if="todaysBusinessHours">
-        <span> {{ todaysBusinessHours.weekDay }} geöffnet </span>
-        <span
-          v-for="(time, index) in todaysBusinessHours.openingHours"
-          :key="index"
-        >
-          {{ time.from }} bis {{ time.to }}
-          <span v-if="index < todaysBusinessHours.openingHours.length - 1">
-            und
-          </span>
-        </span>
-      </div>
-      <muc-icon
-        icon="chevron-down"
-        class="icon icon--after"
-      />
-    </button>
-    <div
-      class="m-business-hours-toggle__content"
-      :class="collapseClass"
-    >
-      <ul class="ml-0">
-        <li
-          v-for="day in businessHours"
-          :key="day.weekDay"
-          :class="highlightBusinessDay(day)"
-        >
-          <span class="weekday">{{ day.weekDay }}</span>
-          <span class="hours">
-            <div v-if="day.openingHours.length === 0">geschlossen</div>
-            <div
-              v-else
-              v-for="time in day.openingHours"
-              :key="time.from"
-            >
-              {{ time.from }} - {{ time.to }}
-            </div>
-          </span>
-        </li>
-      </ul>
-      <div
-        v-if="slots['hint']"
-        class="hint"
-      >
-        <slot name="hint" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-
-import { MucIcon } from "../Icon";
-import { BusinessHourType } from "./BusinessHourType";
-
-const LOCALES = "de-DE";
-
-const props = withDefaults(
-  defineProps<{
-    /**
-     * This array includes all the opening hours for all days of the week.
-     */
-    businessHours: BusinessHourType[];
-
-    /**
-     * Lets you choose between the toggleable and fixed state of the component.
-     * In the fixed state, no toggle button will be shown.
-     */
-    toggleable?: boolean;
-
-    /**
-     * Choose an icon for the toggle button. The default if none is given is the time icon.
-     */
-    icon?: string;
-  }>(),
-  {
-    icon: "time",
-    toggleable: false,
-  }
-);
-
-let collapsed = ref(props.toggleable);
-
-const slots = defineSlots<{
-  /**
-   * Display a hint beneath all the opening hours.
-   */
-  hint(): any;
-}>();
-
-/**
- * Toggles the collapsed state of the business hours section.
- */
-const toggleCollapsable = () => {
-  collapsed.value = !collapsed.value;
-};
-
-/**
- * Computes the CSS class for the collapse state.
- *
- * @returns {string} The CSS class for the collapse state.
- */
-const collapseClass = computed(() => (collapsed.value ? "collapse" : ""));
-
-/**
- * Computes the CSS class for the collapsed state.
- *
- * @returns {string} The CSS class for the collapsed state.
- */
-const collapsedClass = computed(() => (collapsed.value ? "collapsed" : ""));
-
-/**
- * Computes the short name of today's day.
- *
- * @returns {string} The short name of today's day (e.g., "Mo", "Di").
- */
-const todaysDayShortName = computed(() => {
-  const today = new Date();
-  return today.toLocaleDateString(LOCALES, { weekday: "short" });
-});
-
-/**
- * Highlights the business day based on whether it has opening hours and if it is today's day.
- *
- * @param {BusinessHourType} businessHour - The business hour object to check.
- * @returns {string} The CSS class indicating if the business is open or closed.
- */
-const highlightBusinessDay = (businessHour: BusinessHourType) => {
-  if (businessHour.openingHours.length === 0) return "is-closed";
-  if (businessHour.weekDay === todaysDayShortName.value) return "is-open";
-};
-
-/**
- * Computes today's business hours from the provided business hours.
- *
- * @returns {BusinessHourType | undefined} The business hours for today, if available.
- */
-const todaysBusinessHours = computed(() =>
-  props.businessHours.find((curr) => curr.weekDay === todaysDayShortName.value)
-);
-</script>
-
-<style scoped></style>

package/src/components/Button/MucButton.stories.ts

@@ -1,63 +0,0 @@
-import { fn } from "@storybook/test";
-
-import MucButton from "./MucButton.vue";
-
-export default {
-  component: MucButton,
-  title: "MucButton",
-  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: `The \`muc-button\` component themes the standard html button using the style from patternlab.
-
-[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-elements-buttons)
-`,
-      },
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    default: "Primary",
-  },
-};
-
-export const Secondary = {
-  args: {
-    default: "Secondary",
-    variant: "secondary",
-  },
-};
-
-export const Ghost = {
-  args: {
-    default: "Ghost",
-    variant: "ghost",
-  },
-};
-
-export const Disabled = {
-  args: {
-    default: "Disabled",
-    disabled: true,
-  },
-};
-
-export const Icon = {
-  args: {
-    default: "With Icon",
-    icon: "arrow-right",
-  },
-};
-
-export const IconAnimated = {
-  args: {
-    default: "With Icon",
-    icon: "arrow-right",
-    iconAnimated: true,
-  },
-};

package/src/components/Button/MucButton.vue

@@ -1,89 +0,0 @@
-<template>
-  <button
-    @click="handleClick"
-    :disabled="disabled"
-    class="m-button"
-    :class="[buttonVariantClass, iconAnimatedClass]"
-  >
-    <span>
-      <slot />
-      <muc-icon
-        v-if="icon"
-        :icon="icon"
-        class="m-button__icon"
-      />
-    </span>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-import { MucIcon } from "../Icon";
-
-type buttonType = "primary" | "secondary" | "ghost";
-
-const props = withDefaults(
-  defineProps<{
-    /**
-     * The variant prop gives you easy access to several different button styles.
-     *
-     * Available are `primary`, `secondary` and `ghost`.
-     */
-    variant?: buttonType;
-    /**
-     * Let`s you indicate that the button is not currently interactive or clickable.
-     */
-    disabled?: boolean;
-    /**
-     * Choose an icon to be appended behind the slot. No icon will be placed if the prop is left empty.
-     */
-    icon?: string;
-    /**
-     * Wether the Icon should be animated on hover (slide-right) or not.
-     *
-     * Default is `false`
-     */
-    iconAnimated?: boolean;
-  }>(),
-  {
-    variant: "primary",
-    disabled: false,
-    iconAnimated: false,
-  }
-);
-
-defineSlots<{
-  /**
-   * Display content inside the button.
-   */
-  default(): any;
-}>();
-
-const emit = defineEmits<{
-  /**
-   * Triggered when button is clicked.
-   * @param e Click-Event
-   */
-  (e: "click"): void;
-}>();
-
-const buttonVariantClass = computed(() => {
-  switch (props.variant) {
-    case "secondary":
-      return "m-button--secondary";
-    case "ghost":
-      return "m-button--ghost";
-    default:
-      return "m-button--primary";
-  }
-});
-
-const iconAnimatedClass = computed(() =>
-  props.iconAnimated ? "m-button--animated-right" : ""
-);
-
-const handleClick = () => {
-  emit("click");
-};
-</script>

package/src/components/Button/index.ts

@@ -1,3 +0,0 @@
-import MucButton from "./MucButton.vue";
-
-export { MucButton };

package/src/components/Callout/MucCallout.stories.ts

@@ -1,49 +0,0 @@
-import MucCallout from "./MucCallout.vue";
-
-export default {
-  component: MucCallout,
-  title: "MucCallout",
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `The \`muc-callout\` component is used to convey important information to the user through the use of contextual types, icons, and colors.
-
-[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-components-callout)
-`,
-      },
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    header: "Information",
-    content: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
-    type: "info",
-  },
-};
-
-export const Success = {
-  args: {
-    ...Default.args,
-    header: "Success",
-    type: "success",
-  },
-};
-
-export const Warning = {
-  args: {
-    ...Default.args,
-    header: "Warning",
-    type: "warning",
-  },
-};
-
-export const Error = {
-  args: {
-    ...Default.args,
-    header: "Error",
-    type: "error",
-  },
-};