@zap-wunschlachen/wl-shared-components 1.0.0

package/src/stories/Laboratory/ProgressCircle.stories.ts

@@ -0,0 +1,261 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import ProgressCircle from '@components/Laboratory/ProgressCircle/ProgressCircle.vue';
+
+// Meta configuration for the ProgressCircle component
+const meta: Meta<typeof ProgressCircle> = {
+  title: 'WL/Laboratory/ProgressCircle',
+  component: ProgressCircle,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+      description: 'Size of the circle in pixels.',
+    },
+    text: {
+      control: 'text',
+      description: 'Text displayed inside the circle.',
+    },
+    bgColors: {
+      control: 'object',
+      description: 'Array of background colors for the segments.',
+    },
+    borderColors: {
+      control: 'object',
+      description: 'Array of border colors for the segments.',
+    },
+  },
+  args: {
+    size: '60',
+    text: 'A',
+    bgColors: [
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+    ],
+    borderColors: [
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent',
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`ProgressCircle\` component displays a circular progress indicator with customizable colors, sizes, and text.
+
+### Props
+- **\`size\`**: Sets the size of the circle in pixels.
+- **\`text\`**: Text displayed inside the circle.
+- **\`bgColors\`**: An array of background colors for the circle's segments.
+- **\`borderColors\`**: An array of border colors for the circle's segments.
+
+### Usage
+Use the \`ProgressCircle\` component to display progress in a circular format, with options to customize the appearance.
+
+Below are examples of different configurations of the \`ProgressCircle\` component.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Define a common render template
+const Template: Story = {
+  render: (args) => ({
+    components: { ProgressCircle },
+    setup() {
+      return { args };
+    },
+    template: `<div style="padding: 16px;">
+        <ProgressCircle v-bind="args" />
+      </div>`,
+  }),
+};
+
+// Default story
+export const Default: Story = {
+  ...Template,
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ProgressCircle
+    :size="'60'"
+    text="A"
+    :bgColors="[
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)'
+    ]"
+    :borderColors="[
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent'
+    ]"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Draft story
+export const Draft: Story = {
+  ...Template,
+  args: {
+    text: '1',
+    bgColors: [
+      '#E5E6EE',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+    ],
+    borderColors: [
+      '#172774',
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent',
+    ],
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ProgressCircle
+    text="1"
+    :size="'60'"
+    :bgColors="[
+      '#E5E6EE',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)',
+      'var(--Soft-Concrete-1)'
+    ]"
+    :borderColors="[
+      '#172774',
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent'
+    ]"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// DesignStarted story
+export const DesignStarted: Story = {
+  ...Template,
+  args: {
+    text: '2',
+    size: '60',
+    bgColors: ['var(--Check-0)', '#FEFDBD', '#DDDDDF', '#DDDDDF', '#DDDDDF'],
+    borderColors: [
+      'transparent',
+      '#4F4700',
+      'transparent',
+      'transparent',
+      'transparent',
+    ],
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ProgressCircle
+    text="2"
+    :size="'60'"
+    :bgColors="[
+      'var(--Check-0)',
+      '#FEFDBD',
+      '#DDDDDF',
+      '#DDDDDF',
+      '#DDDDDF'
+    ]"
+    :borderColors="[
+      'transparent',
+      '#4F4700',
+      'transparent',
+      'transparent',
+      'transparent'
+    ]"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// DesignStarted story
+export const TreatmentDone: Story = {
+  ...Template,
+  args: {
+    text: '5',
+    size: '60',
+    bgColors: [
+      'var(--Check-0)',
+      'var(--Check-0)',
+      'var(--Check-0)',
+      'var(--Check-0)',
+      'var(--Check-0)',
+    ],
+    borderColors: [
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent',
+      'transparent',
+    ],
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <ProgressCircle
+    text="2"
+    :size="'60'"
+    :bgColors="[
+      'var(--Check-0)',
+      '#FEFDBD',
+      '#DDDDDF',
+      '#DDDDDF',
+      '#DDDDDF'
+    ]"
+    :borderColors="[
+      'transparent',
+      '#4F4700',
+      'transparent',
+      'transparent',
+      'transparent'
+    ]"
+  />
+</template>
+        `,
+      },
+    },
+  },
+};

package/src/stories/Laboratory/SelectionColumnBar.stories.ts

@@ -0,0 +1,234 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import SelectionColumnBar from '@components/Laboratory/SelectionColumnBar/SelectionColumnBar.vue';
+import { action } from '@storybook/addon-actions';
+
+// Meta configuration for the SelectionColumnBar component
+const meta: Meta<typeof SelectionColumnBar> = {
+  title: 'WL/Laboratory/SelectionColumnBar',
+  component: SelectionColumnBar,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'The title displayed in the center button.',
+    },
+    disableLast: {
+      control: 'boolean',
+      description: 'Disables the "Vorheriges Board" button if true.',
+    },
+    disableNext: {
+      control: 'boolean',
+      description: 'Disables the "Nächstes Board" button if true.',
+    },
+    'click:last': {
+      action: 'click:last',
+      description: 'Triggered when the "Vorheriges Board" button is clicked.',
+    },
+    'click:next': {
+      action: 'click:next',
+      description: 'Triggered when the "Nächstes Board" button is clicked.',
+    },
+  },
+  args: {
+    title: 'Draft Board', // Default title
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`SelectionColumnBar\` component provides navigation with options for "Vorheriges Board" (Previous Board) and "Nächstes Board" (Next Board) buttons, along with a dynamic title. You can disable either navigation button with the \`disableLast\` and \`disableNext\` props, and track clicks on these buttons with event actions.
+
+### Props
+- **\`title\`**: Sets the title text in the center button.
+- **\`disableLast\`**: Disables the "Vorheriges Board" button if set to true.
+- **\`disableNext\`**: Disables the "Nächstes Board" button if set to true.
+
+### Events
+- **\`click:last\`**: Emitted when the "Vorheriges Board" button is clicked.
+- **\`click:next\`**: Emitted when the "Nächstes Board" button is clicked.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Common template
+const Template: Story = {
+  render: (args) => ({
+    components: { SelectionColumnBar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <SelectionColumnBar 
+        v-bind="args" 
+        @click:last="args['click:last']" 
+        @click:next="args['click:next']" 
+      />
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <SelectionColumnBar 
+    :title="title"
+    :disableLast="disableLast"
+    :disableNext="disableNext"
+    @click:last="clickLast"
+    @click:next="clickNext"
+  />
+</template>
+
+<script setup>
+import SelectionColumnBar from '@components/Laboratory/SelectionColumnBar/SelectionColumnBar.vue';
+
+const clickLast = () => console.log('Previous button clicked');
+const clickNext = () => console.log('Next button clicked');
+</script>
+        `,
+      },
+    },
+  },
+};
+
+// Default story
+export const Default: Story = { ...Template };
+
+// Custom title story
+export const CustomTitle: Story = {
+  ...Template,
+  args: {
+    title: 'Custom Draft Title',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <SelectionColumnBar 
+    title="Custom Draft Title" 
+    @click:last="clickLast" 
+    @click:next="clickNext" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// With disabled previous button
+export const DisabledPrevious: Story = {
+  ...Template,
+  args: {
+    title: 'Board with Disabled Previous',
+    disableLast: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <SelectionColumnBar 
+    title="Board with Disabled Previous" 
+    :disableLast="true" 
+    @click:last="clickLast" 
+    @click:next="clickNext" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// With disabled next button
+export const DisabledNext: Story = {
+  ...Template,
+  args: {
+    title: 'Board with Disabled Next',
+    disableNext: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <SelectionColumnBar 
+    title="Board with Disabled Next" 
+    :disableNext="true" 
+    @click:last="clickLast" 
+    @click:next="clickNext" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// With both buttons disabled
+export const BothDisabled: Story = {
+  ...Template,
+  args: {
+    title: 'Board with Both Buttons Disabled',
+    disableLast: true,
+    disableNext: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <SelectionColumnBar 
+    title="Board with Both Buttons Disabled" 
+    :disableLast="true" 
+    :disableNext="true" 
+    @click:last="clickLast" 
+    @click:next="clickNext" 
+  />
+</template>
+        `,
+      },
+    },
+  },
+};
+
+// Story with event actions for debugging
+export const WithEventActions: Story = {
+  ...Template,
+  args: {
+    title: 'Event Handling Board',
+  },
+  argTypes: {
+    'click:last': { action: 'click:last' },
+    'click:next': { action: 'click:next' },
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<template>
+  <SelectionColumnBar 
+    title="Event Handling Board" 
+    @click:last="clickLast" 
+    @click:next="clickNext" 
+  />
+</template>
+
+<script setup>
+import { action } from '@storybook/addon-actions';
+
+const clickLast = action('click:last');
+const clickNext = action('click:next');
+</script>
+        `,
+      },
+    },
+  },
+};