@designcrowd/fe-shared-lib 1.4.5-eng-3440 → 1.4.5

package/dist/css/tailwind-brandCrowd.css

@@ -738,6 +738,9 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
+.tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -750,9 +753,6 @@ video {
 .tw-mt-4 {
   margin-top: 1rem;
 }
-.tw-mt-6 {
-  margin-top: 1.5rem;
-}
 .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -926,9 +926,6 @@ 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,6 +738,9 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
+.tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -750,9 +753,6 @@ video {
 .tw-mt-4 {
   margin-top: 1rem;
 }
-.tw-mt-6 {
-  margin-top: 1.5rem;
-}
 .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -926,9 +926,6 @@ 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,6 +738,9 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
+.tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -750,9 +753,6 @@ video {
 .tw-mt-4 {
   margin-top: 1rem;
 }
-.tw-mt-6 {
-  margin-top: 1.5rem;
-}
 .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -926,9 +926,6 @@ 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,6 +738,9 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
+.tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -750,9 +753,6 @@ video {
 .tw-mt-4 {
   margin-top: 1rem;
 }
-.tw-mt-6 {
-  margin-top: 1.5rem;
-}
 .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -926,9 +926,6 @@ 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,6 +738,9 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
+.tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -750,9 +753,6 @@ video {
 .tw-mt-4 {
   margin-top: 1rem;
 }
-.tw-mt-6 {
-  margin-top: 1.5rem;
-}
 .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -926,9 +926,6 @@ 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-eng-3440",
+  "version": "1.4.5",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",
@@ -20,6 +20,7 @@
   },
   "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,139 +3,6 @@ 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 = () => {
@@ -337,4 +204,4 @@ export const NoBorder = () => {
       </div>
     `,
   };
-};
+};

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

@@ -48,7 +48,13 @@
           }"
           :classes="classes"
         >
-          <Icon v-show="modelValue" name="check" color="white" :size="iconSize" />
+          <Icon
+            v-show="modelValue"
+            :class="{ 'tw-mt-1': size === 'md', 'tw-mt-0.5': size === 'sm' }"
+            name="check"
+            color="white"
+            :size="iconSize"
+          />
         </div>
       </div>
     </label>
@@ -81,4 +87,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.stop="onClick"
+      @click="onClick"
       :class="{
         'dropdown-item-hover': backgroundHover,
       }"

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

@@ -84,7 +84,6 @@ export const IconSample = () => {
           { name: 'eye-crossed' },
           { name: 'eye-open' },
           { name: 'fees' },
-          { name: 'file' },
           { name: 'filter' },
           { name: 'filter-crazy-domains' },
           { name: 'flag' },
@@ -190,7 +189,6 @@ export const IconSample = () => {
           { name: 'payments-featured' },
           { name: 'payments-textonly' },
           { name: 'payments-thumbnail' },
-          { name: 'pen-tool' },
           { name: 'phone' },
           { name: 'plus' },
           { name: 'plus-circle' },