added simple bht #89

src/components/BuisnessHours/MucBusinessHoursTile.stories.ts

@@ -0,0 +1,45 @@
+import MucBusinessHoursTile from "./MucBusinessHoursTile.vue";
+
+export default {
+  component: MucBusinessHoursTile,
+  title: "MucBusinessHoursTile",
+  tags: ["autodocs"],
+  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The businessHoursTile component is used to display the business hours for each day of the week. 
+
+[🔗 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",
+    },
+  ],
+};
+export const Default = {
+  args: {
+    businessHours: businessHours,
+  },
+};
+
+export const Closed = {
+  args: {
+    ...Default.args,
+    closed: true,
+  },
+};

src/components/BuisnessHours/MucBusinessHoursTile.vue

@@ -0,0 +1,60 @@
+<template>
+  <div
+    class="m-business-hours-tile"
+    :class="hasOpenClass"
+  >
+    <div class="m-business-hours-tile__weekday">
+      {{ businessHours.weekDay }}
+    </div>
+    <div class="m-business-hours-tile__hours">
+      <div v-if="businessHours.openingHours.length === 0">geschlossen</div>
+      <div
+        v-else
+        v-for="time in businessHours.openingHours"
+        :key="time.from"
+      >
+        {{ time.from }} - {{ time.to }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { BusinessHourType } from "./BusinessHourType";
+
+const LOCALES = "de-DE";
+
+const props = withDefaults(
+  defineProps<{
+    closed?: boolean;
+    businessHours: BusinessHourType;
+  }>(),
+  {
+    closed: false,
+  }
+);
+
+const hasOpenClass = computed(() =>
+  props.closed
+    ? "m-business-hours-tile--has-closed"
+    : "m-business-hours-tile--is-open"
+);
+
+/**
+ * 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" });
+});
+
+const isOpen = computed(() => {
+  return false;
+});
+</script>
+
+<style scoped></style>