@designcrowd/fe-shared-lib 1.5.7-eng-3522 → 1.5.7-fix-icon

package/src/atoms/components/Checkbox/Checkbox.stories.js

@@ -1,340 +1,340 @@
-import Checkbox from './Checkbox.vue';
-
-export default {
-  title: 'Components/Checkbox',
-  component: Checkbox,
-  argTypes: {
-    modelValue: {
-      control: 'boolean',
-      description: 'The checked state of the checkbox',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    id: {
-      control: 'text',
-      description: 'Unique identifier for the checkbox',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    label: {
-      control: 'text',
-      description: 'Label text for the checkbox',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    showLabelScreenReaderOnly: {
-      control: 'boolean',
-      description: 'Whether to show the label only to screen readers',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    inline: {
-      control: 'boolean',
-      description: 'Display checkbox and label inline',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    required: {
-      control: 'boolean',
-      description: 'Show required asterisk on label',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disable the checkbox',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    color: {
-      control: 'select',
-      options: ['primary', 'success', 'error', 'info', 'warning'],
-      description: 'Color scheme for the checkbox',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'success' },
-      },
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md'],
-      description: 'Size of the checkbox',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'md' },
-      },
-    },
-    showBorder: {
-      control: 'boolean',
-      description: 'Show border around the checkbox',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-      },
-    },
-    classes: {
-      control: 'text',
-      description: 'Additional CSS classes',
-      table: {
-        type: { summary: 'string | object' },
-        defaultValue: { summary: '""' },
-      },
-    },
-  },
-};
-
-// Interactive story with all controls
-export const Interactive = (args) => ({
-  components: { Checkbox },
-  setup() {
-    return { args };
-  },
-  data() {
-    return {
-      checked: args.modelValue,
-    };
-  },
-  template: `
-    <Checkbox 
-      v-model="checked"
-      :id="args.id"
-      :label="args.label"
-      :showLabelScreenReaderOnly="args.showLabelScreenReaderOnly"
-      :inline="args.inline"
-      :required="args.required"
-      :disabled="args.disabled"
-      :color="args.color"
-      :size="args.size"
-      :showBorder="args.showBorder"
-      :classes="args.classes"
-    />
-  `,
-});
-
-Interactive.args = {
-  modelValue: true,
-  id: 'interactive-checkbox',
-  label: 'Do you love checkboxes?',
-  showLabelScreenReaderOnly: false,
-  inline: false,
-  required: false,
-  disabled: false,
-  color: 'success',
-  size: 'md',
-  showBorder: true,
-  classes: '',
-};
-
-export const Sample = () => {
-  return {
-    components: {
-      Checkbox,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Checkbox v-model="checked" id="test"  showBorder/>
-    `,
-  };
-};
-
-export const Label = () => {
-  return {
-    components: {
-      Checkbox,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Checkbox v-model="checked" id="test" label="Do you love checkboxes?" showBorder />
-    `,
-  };
-};
-
-export const LabelInline = () => {
-  return {
-    components: {
-      Checkbox,
-    },
-
-    data() {
-      return {
-        checked: true,
-        unchecked: false,
-      };
-    },
-    template: `
-      <Checkbox v-model="checked" class="tw-mb-4" id="test-1" label="Do you love checkboxes?" :inline="true" showBorder />
-      <Checkbox v-model="unchecked" id="test-2" label="Do you love checkboxes?" :inline="true" showBorder />
-    `,
-  };
-};
-
-export const Required = () => {
-  return {
-    components: {
-      Checkbox,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Checkbox v-model="checked" id="test" label="Do you love checkboxes?" :required="true" showBorder />
-    `,
-  };
-};
-
-export const Success = () => {
-  return {
-    components: {
-      Checkbox,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Checkbox v-model="checked" id="test" color="success" showBorder />
-    `,
-  };
-};
-
-export const Error = () => {
-  return {
-    components: {
-      Checkbox,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Checkbox v-model="checked" id="test" color="error" showBorder />
-    `,
-  };
-};
-
-export const Info = () => {
-  return {
-    components: {
-      Checkbox,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Checkbox v-model="checked" id="test" color="info" showBorder />
-    `,
-  };
-};
-
-export const Warning = () => {
-  return {
-    components: {
-      Checkbox,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Checkbox v-model="checked" id="test" color="warning" showBorder />
-    `,
-  };
-};
-
-export const Disabled = () => {
-  return {
-    components: {
-      Checkbox,
-    },
-
-    data() {
-      return {
-        checked: true,
-        unchecked: false,
-      };
-    },
-    template: `
-      <div>
-        <div class="tw-flex tw-gap-4 tw-mb-4">
-          <Checkbox v-model="checked" id="test-1" :disabled="true" showBorder />
-          <Checkbox v-model="unchecked" id="test-2" :disabled="true" showBorder />
-        </div>
-        <div class="tw-flex tw-gap-4">
-          <Checkbox v-model="checked" id="test-3" label="Do you love checkboxes?" :inline="true" :disabled="true" showBorder />
-          <Checkbox v-model="unchecked" id="test-4" label="Do you love checkboxes?" :inline="true" :disabled="true" showBorder />
-        </div>
-      </div
-    `,
-  };
-};
-
-export const Small = () => {
-  return {
-    components: {
-      Checkbox,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Checkbox v-model="checked" id="test" size="sm" showBorder />
-    `,
-  };
-};
-
-export const NoBorder = () => {
-  return {
-    components: {
-      Checkbox,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <div class="tw-bg-grayscale-400 !tw-p-8">
-        <Checkbox v-model="checked" id="test" size="sm" />
-      </div>
-    `,
-  };
-};
+import Checkbox from './Checkbox.vue';
+
+export default {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  argTypes: {
+    modelValue: {
+      control: 'boolean',
+      description: 'The checked state of the checkbox',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    id: {
+      control: 'text',
+      description: 'Unique identifier for the checkbox',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Label text for the checkbox',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    showLabelScreenReaderOnly: {
+      control: 'boolean',
+      description: 'Whether to show the label only to screen readers',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    inline: {
+      control: 'boolean',
+      description: 'Display checkbox and label inline',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    required: {
+      control: 'boolean',
+      description: 'Show required asterisk on label',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the checkbox',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    color: {
+      control: 'select',
+      options: ['primary', 'success', 'error', 'info', 'warning'],
+      description: 'Color scheme for the checkbox',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'success' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md'],
+      description: 'Size of the checkbox',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'md' },
+      },
+    },
+    showBorder: {
+      control: 'boolean',
+      description: 'Show border around the checkbox',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    classes: {
+      control: 'text',
+      description: 'Additional CSS classes',
+      table: {
+        type: { summary: 'string | object' },
+        defaultValue: { summary: '""' },
+      },
+    },
+  },
+};
+
+// Interactive story with all controls
+export const Interactive = (args) => ({
+  components: { Checkbox },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      checked: args.modelValue,
+    };
+  },
+  template: `
+    <Checkbox 
+      v-model="checked"
+      :id="args.id"
+      :label="args.label"
+      :showLabelScreenReaderOnly="args.showLabelScreenReaderOnly"
+      :inline="args.inline"
+      :required="args.required"
+      :disabled="args.disabled"
+      :color="args.color"
+      :size="args.size"
+      :showBorder="args.showBorder"
+      :classes="args.classes"
+    />
+  `,
+});
+
+Interactive.args = {
+  modelValue: true,
+  id: 'interactive-checkbox',
+  label: 'Do you love checkboxes?',
+  showLabelScreenReaderOnly: false,
+  inline: false,
+  required: false,
+  disabled: false,
+  color: 'success',
+  size: 'md',
+  showBorder: true,
+  classes: '',
+};
+
+export const Sample = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test"  showBorder/>
+    `,
+  };
+};
+
+export const Label = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test" label="Do you love checkboxes?" showBorder />
+    `,
+  };
+};
+
+export const LabelInline = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+        unchecked: false,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" class="tw-mb-4" id="test-1" label="Do you love checkboxes?" :inline="true" showBorder />
+      <Checkbox v-model="unchecked" id="test-2" label="Do you love checkboxes?" :inline="true" showBorder />
+    `,
+  };
+};
+
+export const Required = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test" label="Do you love checkboxes?" :required="true" showBorder />
+    `,
+  };
+};
+
+export const Success = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test" color="success" showBorder />
+    `,
+  };
+};
+
+export const Error = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test" color="error" showBorder />
+    `,
+  };
+};
+
+export const Info = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test" color="info" showBorder />
+    `,
+  };
+};
+
+export const Warning = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test" color="warning" showBorder />
+    `,
+  };
+};
+
+export const Disabled = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+        unchecked: false,
+      };
+    },
+    template: `
+      <div>
+        <div class="tw-flex tw-gap-4 tw-mb-4">
+          <Checkbox v-model="checked" id="test-1" :disabled="true" showBorder />
+          <Checkbox v-model="unchecked" id="test-2" :disabled="true" showBorder />
+        </div>
+        <div class="tw-flex tw-gap-4">
+          <Checkbox v-model="checked" id="test-3" label="Do you love checkboxes?" :inline="true" :disabled="true" showBorder />
+          <Checkbox v-model="unchecked" id="test-4" label="Do you love checkboxes?" :inline="true" :disabled="true" showBorder />
+        </div>
+      </div
+    `,
+  };
+};
+
+export const Small = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test" size="sm" showBorder />
+    `,
+  };
+};
+
+export const NoBorder = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <div class="tw-bg-grayscale-400 !tw-p-8">
+        <Checkbox v-model="checked" id="test" size="sm" />
+      </div>
+    `,
+  };
+};