@zap-wunschlachen/wl-shared-components 1.0.4 → 1.0.6

package/src/stories/Laboratory/Timeline.stories.ts

@@ -1,403 +1,403 @@
-import { Meta, Story } from '@storybook/vue3';
-import Timeline from '@components/Laboratory/TimeLine/Timeline.vue';
-import TimelineEvent from '@components/Laboratory/TimeLine/TimeLineEvent.vue';
-import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
-
-const meta: Meta<typeof Timeline> = {
-  title: 'WL/Laboratory/Timeline',
-  component: Timeline,
-  tags: ['autodocs'],
-  argTypes: {
-    events: {
-      control: 'object',
-      description: 'An array of event objects to display in the timeline.',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The \`Timeline\` component displays a series of events in chronological order. Each event can include headers, durations, steps, and status indicators.
-
-### Props
-
-- **\`events\`**: An array of event objects. Each event object can have the following properties:
-  - **\`status\`**: The status of the event, e.g., 'Done', 'Ready', 'Dispatched'.
-  - **\`firstHeader\`**: The main header for the event.
-  - **\`secondHeader\`**: A secondary header for the event.
-  - **\`firstDuration\`**: Duration text associated with the first header.
-  - **\`secondDuration\`**: Duration text associated with the second header.
-  - **\`steps\`**: An array of step objects, each containing a date and description.
-  - **\`urgent\`**: A boolean indicating if the event is marked as urgent.
-
-### Slots
-
-- **\`content\`**: Slot to customize the rendering of each event. Receives \`event\` as a scoped slot prop.
-
-### Example Usage
-
-Below are examples of how to use the \`Timeline\` component with various event configurations.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-
-const Template: Story = (args) => ({
-  components: { Timeline, TimelineEvent, TagLabel },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div style="padding: 16px;">
-      <Timeline v-bind="args">
-        <template #content="{ event }">
-          <TimelineEvent
-            :firstHeader="event.firstHeader"
-            :secondHeader="event.secondHeader"
-            :firstDuration="event.firstDuration"
-            :secondDuration="event.secondDuration"
-            :steps="event.steps"
-            :urgent="event.urgent"
-          >
-            <template #icon>
-              <TagLabel :status="event.status" />
-            </template>
-          </TimelineEvent>
-        </template>
-      </Timeline>
-    </div>
-  `,
-});
-
-export const DefaultTimeline = Template.bind({});
-DefaultTimeline.args = {
-  events: [
-    {
-      status: 'Done',
-      firstHeader: 'Projekt A',
-      secondHeader: 'Projekt B',
-      firstDuration: '10 Tage 5 Stunden',
-      secondDuration: '12 Tage 3 Stunden',
-      steps: [
-        {
-          date: '12. Sept. 2021',
-          description:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-        },
-        {
-          date: '15. Sept. 2022',
-          description:
-            'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-        },
-      ],
-    },
-  ],
-};
-DefaultTimeline.parameters = {
-  docs: {
-    source: {
-      code: `
-<script setup>
-import Timeline from '@components/Laboratory/TimeLine/Timeline.vue';
-import TimelineEvent from '@components/Laboratory/TimeLine/TimeLineEvent.vue';
-import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
-
-const events = [
-  {
-    status: 'Done',
-    firstHeader: 'Projekt A',
-    secondHeader: 'Projekt B',
-    firstDuration: '10 Tage 5 Stunden',
-    secondDuration: '12 Tage 3 Stunden',
-    steps: [
-      {
-        date: '12. Sept. 2021',
-        description:
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-      },
-      {
-        date: '15. Sept. 2022',
-        description:
-          'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-      },
-    ],
-  },
-];
-</script>
-
-<template>
-  <Timeline :events="events">
-    <template #content="{ event }">
-      <TimelineEvent
-        :firstHeader="event.firstHeader"
-        :secondHeader="event.secondHeader"
-        :firstDuration="event.firstDuration"
-        :secondDuration="event.secondDuration"
-        :steps="event.steps"
-        :urgent="event.urgent"
-      >
-        <template #icon>
-          <TagLabel :status="event.status" />
-        </template>
-      </TimelineEvent>
-    </template>
-  </Timeline>
-</template>
-      `,
-    },
-  },
-};
-
-export const MultipleStepsTimeline = Template.bind({});
-MultipleStepsTimeline.args = {
-  events: [
-    {
-      status: 'Done',
-      firstHeader: 'Projekt A',
-      secondHeader: 'Projekt B',
-      firstDuration: '10 Tage 5 Stunden',
-      secondDuration: '12 Tage 3 Stunden',
-      steps: [
-        {
-          date: '12. Sept. 2021',
-          description:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-        },
-        {
-          date: '15. Sept. 2022',
-          description:
-            'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-        },
-      ],
-    },
-    {
-      urgent: true,
-      status: 'Ready',
-      firstHeader: 'Projekt C',
-      secondHeader: 'Estimated',
-      firstDuration: '5 Tage 2 Stunden',
-      secondDuration: '1 d 5 h',
-      steps: [
-        {
-          date: '18. Sept. 2023',
-          description:
-            'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
-        },
-        {
-          date: '20. Sept. 2024',
-          description:
-            'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
-        },
-      ],
-    },
-    {
-      status: 'Dispatched',
-      firstHeader: 'Projekt E',
-      secondHeader: 'Projekt F',
-      firstDuration: '4 Tage 2 Stunden',
-      secondDuration: '6 Tage 3 Stunden',
-      steps: [], // No steps for this event
-    },
-  ],
-};
-MultipleStepsTimeline.parameters = {
-  docs: {
-    source: {
-      code: `
-<script setup>
-import Timeline from '@components/Laboratory/TimeLine/Timeline.vue';
-import TimelineEvent from '@components/Laboratory/TimeLine/TimeLineEvent.vue';
-import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
-
-const events = [
-  {
-    status: 'Done',
-    firstHeader: 'Projekt A',
-    secondHeader: 'Projekt B',
-    firstDuration: '10 Tage 5 Stunden',
-    secondDuration: '12 Tage 3 Stunden',
-    steps: [
-      {
-        date: '12. Sept. 2021',
-        description:
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-      },
-      {
-        date: '15. Sept. 2022',
-        description:
-          'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-      },
-    ],
-  },
-  {
-    urgent: true,
-    status: 'Ready',
-    firstHeader: 'Projekt C',
-    secondHeader: 'Estimated',
-    firstDuration: '5 Tage 2 Stunden',
-    secondDuration: '1 d 5 h',
-    steps: [
-      {
-        date: '18. Sept. 2023',
-        description:
-          'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
-      },
-      {
-        date: '20. Sept. 2024',
-        description:
-          'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
-      },
-    ],
-  },
-  {
-    status: 'Dispatched',
-    firstHeader: 'Projekt E',
-    secondHeader: 'Projekt F',
-    firstDuration: '4 Tage 2 Stunden',
-    secondDuration: '6 Tage 3 Stunden',
-    steps: [],
-  },
-];
-</script>
-
-<template>
-  <Timeline :events="events">
-    <template #content="{ event }">
-      <TimelineEvent
-        :firstHeader="event.firstHeader"
-        :secondHeader="event.secondHeader"
-        :firstDuration="event.firstDuration"
-        :secondDuration="event.secondDuration"
-        :steps="event.steps"
-        :urgent="event.urgent"
-      >
-        <template #icon>
-          <TagLabel :status="event.status" />
-        </template>
-      </TimelineEvent>
-    </template>
-  </Timeline>
-</template>
-      `,
-    },
-  },
-};
-
-export const NoStepsTimeline = Template.bind({});
-NoStepsTimeline.args = {
-  events: [
-    {
-      status: 'Dispatched',
-      firstHeader: 'Projekt E',
-      secondHeader: 'Projekt F',
-      firstDuration: '4 Tage 2 Stunden',
-      secondDuration: '6 Tage 3 Stunden',
-      steps: [], // No steps for this event
-    },
-  ],
-};
-NoStepsTimeline.parameters = {
-  docs: {
-    source: {
-      code: `
-<script setup>
-import Timeline from '@components/Laboratory/TimeLine/Timeline.vue';
-import TimelineEvent from '@components/Laboratory/TimeLine/TimeLineEvent.vue';
-import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
-
-const events = [
-  {
-    status: 'Dispatched',
-    firstHeader: 'Projekt E',
-    secondHeader: 'Projekt F',
-    firstDuration: '4 Tage 2 Stunden',
-    secondDuration: '6 Tage 3 Stunden',
-    steps: [],
-  },
-];
-</script>
-
-<template>
-  <Timeline :events="events">
-    <template #content="{ event }">
-      <TimelineEvent
-        :firstHeader="event.firstHeader"
-        :secondHeader="event.secondHeader"
-        :firstDuration="event.firstDuration"
-        :secondDuration="event.secondDuration"
-        :steps="event.steps"
-        :urgent="event.urgent"
-      >
-        <template #icon>
-          <TagLabel :status="event.status" />
-        </template>
-      </TimelineEvent>
-    </template>
-  </Timeline>
-</template>
-      `,
-    },
-  },
-};
-
-export const UrgentTimeline = Template.bind({});
-UrgentTimeline.args = {
-  events: [
-    {
-      urgent: true,
-      status: 'Done',
-      firstHeader: 'Projekt B',
-      secondHeader: 'Estimated',
-      firstDuration: '4 Tage 2 Stunden',
-      secondDuration: '6 Tage 3 Stunden',
-      steps: [], // No steps for this event
-    },
-  ],
-};
-UrgentTimeline.parameters = {
-  docs: {
-    source: {
-      code: `
-<script setup>
-import Timeline from '@components/Laboratory/TimeLine/Timeline.vue';
-import TimelineEvent from '@components/Laboratory/TimeLine/TimeLineEvent.vue';
-import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
-
-const events = [
-  {
-    urgent: true,
-    status: 'Done',
-    firstHeader: 'Projekt B',
-    secondHeader: 'Estimated',
-    firstDuration: '4 Tage 2 Stunden',
-    secondDuration: '6 Tage 3 Stunden',
-    steps: [],
-  },
-];
-</script>
-
-<template>
-  <Timeline :events="events">
-    <template #content="{ event }">
-      <TimelineEvent
-        :firstHeader="event.firstHeader"
-        :secondHeader="event.secondHeader"
-        :firstDuration="event.firstDuration"
-        :secondDuration="event.secondDuration"
-        :steps="event.steps"
-        :urgent="event.urgent"
-      >
-        <template #icon>
-          <TagLabel :status="event.status" />
-        </template>
-      </TimelineEvent>
-    </template>
-  </Timeline>
-</template>
-      `,
-    },
-  },
-};
+import { Meta, Story } from '@storybook/vue3';
+import Timeline from '@components/Laboratory/TimeLine/Timeline.vue';
+import TimelineEvent from '@components/Laboratory/TimeLine/TimeLineEvent.vue';
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+
+const meta: Meta<typeof Timeline> = {
+  title: 'WL/Laboratory/Timeline',
+  component: Timeline,
+  tags: ['autodocs'],
+  argTypes: {
+    events: {
+      control: 'object',
+      description: 'An array of event objects to display in the timeline.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`Timeline\` component displays a series of events in chronological order. Each event can include headers, durations, steps, and status indicators.
+
+### Props
+
+- **\`events\`**: An array of event objects. Each event object can have the following properties:
+  - **\`status\`**: The status of the event, e.g., 'Done', 'Ready', 'Dispatched'.
+  - **\`firstHeader\`**: The main header for the event.
+  - **\`secondHeader\`**: A secondary header for the event.
+  - **\`firstDuration\`**: Duration text associated with the first header.
+  - **\`secondDuration\`**: Duration text associated with the second header.
+  - **\`steps\`**: An array of step objects, each containing a date and description.
+  - **\`urgent\`**: A boolean indicating if the event is marked as urgent.
+
+### Slots
+
+- **\`content\`**: Slot to customize the rendering of each event. Receives \`event\` as a scoped slot prop.
+
+### Example Usage
+
+Below are examples of how to use the \`Timeline\` component with various event configurations.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+
+const Template: Story = (args) => ({
+  components: { Timeline, TimelineEvent, TagLabel },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="padding: 16px;">
+      <Timeline v-bind="args">
+        <template #content="{ event }">
+          <TimelineEvent
+            :firstHeader="event.firstHeader"
+            :secondHeader="event.secondHeader"
+            :firstDuration="event.firstDuration"
+            :secondDuration="event.secondDuration"
+            :steps="event.steps"
+            :urgent="event.urgent"
+          >
+            <template #icon>
+              <TagLabel :status="event.status" />
+            </template>
+          </TimelineEvent>
+        </template>
+      </Timeline>
+    </div>
+  `,
+});
+
+export const DefaultTimeline = Template.bind({});
+DefaultTimeline.args = {
+  events: [
+    {
+      status: 'Done',
+      firstHeader: 'Projekt A',
+      secondHeader: 'Projekt B',
+      firstDuration: '10 Tage 5 Stunden',
+      secondDuration: '12 Tage 3 Stunden',
+      steps: [
+        {
+          date: '12. Sept. 2021',
+          description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        },
+        {
+          date: '15. Sept. 2022',
+          description:
+            'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        },
+      ],
+    },
+  ],
+};
+DefaultTimeline.parameters = {
+  docs: {
+    source: {
+      code: `
+<script setup>
+import Timeline from '@components/Laboratory/TimeLine/Timeline.vue';
+import TimelineEvent from '@components/Laboratory/TimeLine/TimeLineEvent.vue';
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+
+const events = [
+  {
+    status: 'Done',
+    firstHeader: 'Projekt A',
+    secondHeader: 'Projekt B',
+    firstDuration: '10 Tage 5 Stunden',
+    secondDuration: '12 Tage 3 Stunden',
+    steps: [
+      {
+        date: '12. Sept. 2021',
+        description:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      },
+      {
+        date: '15. Sept. 2022',
+        description:
+          'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      },
+    ],
+  },
+];
+</script>
+
+<template>
+  <Timeline :events="events">
+    <template #content="{ event }">
+      <TimelineEvent
+        :firstHeader="event.firstHeader"
+        :secondHeader="event.secondHeader"
+        :firstDuration="event.firstDuration"
+        :secondDuration="event.secondDuration"
+        :steps="event.steps"
+        :urgent="event.urgent"
+      >
+        <template #icon>
+          <TagLabel :status="event.status" />
+        </template>
+      </TimelineEvent>
+    </template>
+  </Timeline>
+</template>
+      `,
+    },
+  },
+};
+
+export const MultipleStepsTimeline = Template.bind({});
+MultipleStepsTimeline.args = {
+  events: [
+    {
+      status: 'Done',
+      firstHeader: 'Projekt A',
+      secondHeader: 'Projekt B',
+      firstDuration: '10 Tage 5 Stunden',
+      secondDuration: '12 Tage 3 Stunden',
+      steps: [
+        {
+          date: '12. Sept. 2021',
+          description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        },
+        {
+          date: '15. Sept. 2022',
+          description:
+            'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        },
+      ],
+    },
+    {
+      urgent: true,
+      status: 'Ready',
+      firstHeader: 'Projekt C',
+      secondHeader: 'Estimated',
+      firstDuration: '5 Tage 2 Stunden',
+      secondDuration: '1 d 5 h',
+      steps: [
+        {
+          date: '18. Sept. 2023',
+          description:
+            'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
+        },
+        {
+          date: '20. Sept. 2024',
+          description:
+            'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+        },
+      ],
+    },
+    {
+      status: 'Dispatched',
+      firstHeader: 'Projekt E',
+      secondHeader: 'Projekt F',
+      firstDuration: '4 Tage 2 Stunden',
+      secondDuration: '6 Tage 3 Stunden',
+      steps: [], // No steps for this event
+    },
+  ],
+};
+MultipleStepsTimeline.parameters = {
+  docs: {
+    source: {
+      code: `
+<script setup>
+import Timeline from '@components/Laboratory/TimeLine/Timeline.vue';
+import TimelineEvent from '@components/Laboratory/TimeLine/TimeLineEvent.vue';
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+
+const events = [
+  {
+    status: 'Done',
+    firstHeader: 'Projekt A',
+    secondHeader: 'Projekt B',
+    firstDuration: '10 Tage 5 Stunden',
+    secondDuration: '12 Tage 3 Stunden',
+    steps: [
+      {
+        date: '12. Sept. 2021',
+        description:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      },
+      {
+        date: '15. Sept. 2022',
+        description:
+          'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      },
+    ],
+  },
+  {
+    urgent: true,
+    status: 'Ready',
+    firstHeader: 'Projekt C',
+    secondHeader: 'Estimated',
+    firstDuration: '5 Tage 2 Stunden',
+    secondDuration: '1 d 5 h',
+    steps: [
+      {
+        date: '18. Sept. 2023',
+        description:
+          'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
+      },
+      {
+        date: '20. Sept. 2024',
+        description:
+          'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+      },
+    ],
+  },
+  {
+    status: 'Dispatched',
+    firstHeader: 'Projekt E',
+    secondHeader: 'Projekt F',
+    firstDuration: '4 Tage 2 Stunden',
+    secondDuration: '6 Tage 3 Stunden',
+    steps: [],
+  },
+];
+</script>
+
+<template>
+  <Timeline :events="events">
+    <template #content="{ event }">
+      <TimelineEvent
+        :firstHeader="event.firstHeader"
+        :secondHeader="event.secondHeader"
+        :firstDuration="event.firstDuration"
+        :secondDuration="event.secondDuration"
+        :steps="event.steps"
+        :urgent="event.urgent"
+      >
+        <template #icon>
+          <TagLabel :status="event.status" />
+        </template>
+      </TimelineEvent>
+    </template>
+  </Timeline>
+</template>
+      `,
+    },
+  },
+};
+
+export const NoStepsTimeline = Template.bind({});
+NoStepsTimeline.args = {
+  events: [
+    {
+      status: 'Dispatched',
+      firstHeader: 'Projekt E',
+      secondHeader: 'Projekt F',
+      firstDuration: '4 Tage 2 Stunden',
+      secondDuration: '6 Tage 3 Stunden',
+      steps: [], // No steps for this event
+    },
+  ],
+};
+NoStepsTimeline.parameters = {
+  docs: {
+    source: {
+      code: `
+<script setup>
+import Timeline from '@components/Laboratory/TimeLine/Timeline.vue';
+import TimelineEvent from '@components/Laboratory/TimeLine/TimeLineEvent.vue';
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+
+const events = [
+  {
+    status: 'Dispatched',
+    firstHeader: 'Projekt E',
+    secondHeader: 'Projekt F',
+    firstDuration: '4 Tage 2 Stunden',
+    secondDuration: '6 Tage 3 Stunden',
+    steps: [],
+  },
+];
+</script>
+
+<template>
+  <Timeline :events="events">
+    <template #content="{ event }">
+      <TimelineEvent
+        :firstHeader="event.firstHeader"
+        :secondHeader="event.secondHeader"
+        :firstDuration="event.firstDuration"
+        :secondDuration="event.secondDuration"
+        :steps="event.steps"
+        :urgent="event.urgent"
+      >
+        <template #icon>
+          <TagLabel :status="event.status" />
+        </template>
+      </TimelineEvent>
+    </template>
+  </Timeline>
+</template>
+      `,
+    },
+  },
+};
+
+export const UrgentTimeline = Template.bind({});
+UrgentTimeline.args = {
+  events: [
+    {
+      urgent: true,
+      status: 'Done',
+      firstHeader: 'Projekt B',
+      secondHeader: 'Estimated',
+      firstDuration: '4 Tage 2 Stunden',
+      secondDuration: '6 Tage 3 Stunden',
+      steps: [], // No steps for this event
+    },
+  ],
+};
+UrgentTimeline.parameters = {
+  docs: {
+    source: {
+      code: `
+<script setup>
+import Timeline from '@components/Laboratory/TimeLine/Timeline.vue';
+import TimelineEvent from '@components/Laboratory/TimeLine/TimeLineEvent.vue';
+import TagLabel from '@components/Laboratory/TagLabel/TagLabel.vue';
+
+const events = [
+  {
+    urgent: true,
+    status: 'Done',
+    firstHeader: 'Projekt B',
+    secondHeader: 'Estimated',
+    firstDuration: '4 Tage 2 Stunden',
+    secondDuration: '6 Tage 3 Stunden',
+    steps: [],
+  },
+];
+</script>
+
+<template>
+  <Timeline :events="events">
+    <template #content="{ event }">
+      <TimelineEvent
+        :firstHeader="event.firstHeader"
+        :secondHeader="event.secondHeader"
+        :firstDuration="event.firstDuration"
+        :secondDuration="event.secondDuration"
+        :steps="event.steps"
+        :urgent="event.urgent"
+      >
+        <template #icon>
+          <TagLabel :status="event.status" />
+        </template>
+      </TimelineEvent>
+    </template>
+  </Timeline>
+</template>
+      `,
+    },
+  },
+};