@designcrowd/fe-shared-lib 1.4.5 → 1.4.6-ast-generate-ai-1

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

@@ -3,6 +3,139 @@ 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 = () => {
@@ -204,4 +337,4 @@ export const NoBorder = () => {
       </div>
     `,
   };
-};
+};

package/src/atoms/components/Checkbox/Checkbox.vue

@@ -48,13 +48,7 @@
           }"
           :classes="classes"
         >
-          <Icon
-            v-show="modelValue"
-            :class="{ 'tw-mt-1': size === 'md', 'tw-mt-0.5': size === 'sm' }"
-            name="check"
-            color="white"
-            :size="iconSize"
-          />
+          <Icon v-show="modelValue" name="check" color="white" :size="iconSize" />
         </div>
       </div>
     </label>
@@ -87,4 +81,4 @@ export default {
     },
   },
 };
-</script>
+</script>

package/src/atoms/components/Dropdown/DropdownItem.vue

@@ -2,7 +2,7 @@
   <div>
     <div
       class="tw-flex tw-items-center tw-px-2 tw-py-2 tw-cursor-pointer"
-      @click="onClick"
+      @click.stop="onClick"
       :class="{
         'dropdown-item-hover': backgroundHover,
       }"

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

@@ -84,6 +84,7 @@ export const IconSample = () => {
           { name: 'eye-crossed' },
           { name: 'eye-open' },
           { name: 'fees' },
+          { name: 'file' },
           { name: 'filter' },
           { name: 'filter-crazy-domains' },
           { name: 'flag' },
@@ -189,6 +190,7 @@ export const IconSample = () => {
           { name: 'payments-featured' },
           { name: 'payments-textonly' },
           { name: 'payments-thumbnail' },
+          { name: 'pen-tool' },
           { name: 'phone' },
           { name: 'plus' },
           { name: 'plus-circle' },
@@ -203,6 +205,7 @@ export const IconSample = () => {
           { name: 'reorderable' },
           { name: 'search' },
           { name: 'secure' },
+          { name: 'send' },
           { name: 'services' },
           { name: 'settings' },
           { name: 'share' },
@@ -222,6 +225,7 @@ export const IconSample = () => {
           { name: 'star-filled' },
           { name: 'star-hollow' },
           { name: 'sticker' },
+          { name: 'stop' },
           { name: 'submit' },
           { name: 'time' },
           { name: 'text-image' },