From be00c814470b13b5e621e2c881e396ccb78ac0d1 Mon Sep 17 00:00:00 2001
From: langehm <38280183+langehm@users.noreply.github.com>
Date: Fri, 26 Jul 2024 10:29:16 +0200
Subject: [PATCH] added simple bht #89

---
 .../MucBusinessHoursTile.stories.ts           | 45 ++++++++++++++
 .../BuisnessHours/MucBusinessHoursTile.vue    | 60 +++++++++++++++++++
 2 files changed, 105 insertions(+)
 create mode 100644 src/components/BuisnessHours/MucBusinessHoursTile.stories.ts
 create mode 100644 src/components/BuisnessHours/MucBusinessHoursTile.vue

diff --git a/src/components/BuisnessHours/MucBusinessHoursTile.stories.ts b/src/components/BuisnessHours/MucBusinessHoursTile.stories.ts
new file mode 100644
index 00000000..541cc678
--- /dev/null
+++ b/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,
+  },
+};
diff --git a/src/components/BuisnessHours/MucBusinessHoursTile.vue b/src/components/BuisnessHours/MucBusinessHoursTile.vue
new file mode 100644
index 00000000..5c4a5795
--- /dev/null
+++ b/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>