@designcrowd/fe-shared-lib 1.4.5 → 1.4.6

package/dist/css/tailwind-brandCrowd.css

@@ -738,9 +738,6 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
-.tw-mt-0\.5 {
-  margin-top: 0.125rem;
-}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -753,6 +750,9 @@ video {
 .tw-mt-4 {
   margin-top: 1rem;
 }
+.tw-mt-6 {
+  margin-top: 1.5rem;
+}
 .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -926,6 +926,9 @@ video {
 .tw-flex-none {
   flex: none;
 }
+.tw-flex-shrink-0 {
+  flex-shrink: 0;
+}
 .tw-grow {
   flex-grow: 1;
 }

package/dist/css/tailwind-brandPage.css

@@ -738,9 +738,6 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
-.tw-mt-0\.5 {
-  margin-top: 0.125rem;
-}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -753,6 +750,9 @@ video {
 .tw-mt-4 {
   margin-top: 1rem;
 }
+.tw-mt-6 {
+  margin-top: 1.5rem;
+}
 .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -926,6 +926,9 @@ video {
 .tw-flex-none {
   flex: none;
 }
+.tw-flex-shrink-0 {
+  flex-shrink: 0;
+}
 .tw-grow {
   flex-grow: 1;
 }

package/dist/css/tailwind-crazyDomains.css

@@ -738,9 +738,6 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
-.tw-mt-0\.5 {
-  margin-top: 0.125rem;
-}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -753,6 +750,9 @@ video {
 .tw-mt-4 {
   margin-top: 1rem;
 }
+.tw-mt-6 {
+  margin-top: 1.5rem;
+}
 .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -926,6 +926,9 @@ video {
 .tw-flex-none {
   flex: none;
 }
+.tw-flex-shrink-0 {
+  flex-shrink: 0;
+}
 .tw-grow {
   flex-grow: 1;
 }

package/dist/css/tailwind-designCom.css

@@ -738,9 +738,6 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
-.tw-mt-0\.5 {
-  margin-top: 0.125rem;
-}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -753,6 +750,9 @@ video {
 .tw-mt-4 {
   margin-top: 1rem;
 }
+.tw-mt-6 {
+  margin-top: 1.5rem;
+}
 .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -926,6 +926,9 @@ video {
 .tw-flex-none {
   flex: none;
 }
+.tw-flex-shrink-0 {
+  flex-shrink: 0;
+}
 .tw-grow {
   flex-grow: 1;
 }

package/dist/css/tailwind-designCrowd.css

@@ -738,9 +738,6 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
-.tw-mt-0\.5 {
-  margin-top: 0.125rem;
-}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -753,6 +750,9 @@ video {
 .tw-mt-4 {
   margin-top: 1rem;
 }
+.tw-mt-6 {
+  margin-top: 1.5rem;
+}
 .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -926,6 +926,9 @@ video {
 .tw-flex-none {
   flex: none;
 }
+.tw-flex-shrink-0 {
+  flex-shrink: 0;
+}
 .tw-grow {
   flex-grow: 1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",
@@ -20,7 +20,6 @@
   },
   "dependencies": {
     "@nuxtjs/i18n": "9.5.4",
-    "@storybook/react": "^9.0.4",
     "autoprefixer": "10.4.17",
     "axios": "1.6.7",
     "click-outside-vue3": "4.0.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' },