@designcrowd/fe-shared-lib 1.0.9 → 1.0.10

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

@@ -1,207 +1,207 @@
-import Checkbox from './Checkbox.vue';
-
-export default {
-  title: 'Components/Checkbox',
-  component: Checkbox,
-};
-
-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,
+};
+
+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>
+    `,
+  };
 };

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

@@ -1,90 +1,90 @@
-<template>
-  <div
-    class="tw-box-border"
-    :class="{
-      'tw-cursor-pointer tw-pointer-events-none tw-opacity-30': disabled,
-    }"
-  >
-    <label
-      :for="`scl-input-${id}`"
-      class="tw-cursor-pointer"
-      :class="{
-        'tw-flex tw-items-center': inline,
-      }"
-    >
-      <span
-        v-if="label"
-        class="tw-font-sans tw-text-grayscale-700 tw-text-sm tw-block tw-font-semibold"
-        :class="{
-          'tw-sr-only': showLabelScreenReaderOnly,
-          'tw-mb-2': !inline,
-          'tw-ml-2 tw-order-last': inline,
-        }"
-      >
-        {{ label }}
-        <span v-if="required" class="tw-text-error-500">*</span>
-      </span>
-      <div class="tw-flex tw-justify-between tw-items-center">
-        <input
-          :id="`scl-input-${id}`"
-          :checked="modelValue"
-          type="checkbox"
-          class="tw-sr-only"
-          :disabled="disabled"
-          @change="$emit('update:modelValue', $event.target.checked)"
-        />
-        <div
-          class="tw-rounded tw-duration-300 tw-ease-in-out tw-flex tw-items-center tw-justify-center"
-          :class="{
-            'tw-bg-primary-500': modelValue && color === 'primary',
-            'tw-bg-success-500': modelValue && color === 'success',
-            'tw-bg-error-500': modelValue && color === 'error',
-            'tw-bg-info-500': modelValue && color === 'info',
-            'tw-bg-warning-500': modelValue && color === 'warning',
-            'tw-bg-white': !modelValue,
-            'tw-h-5 tw-w-5': size === 'sm',
-            'tw-h-6 tw-w-6': size === 'md',
-            'tw-border tw-border-solid tw-border-grayscale-500': showBorder,
-          }"
-          :classes="classes"
-        >
-          <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>
-  </div>
-</template>
-<script>
-import Icon from '../Icon/Icon.vue';
-import CheckboxMixin from './Checkbox.mixin';
-
-export default {
-  components: {
-    Icon,
-  },
-  mixins: [CheckboxMixin],
-  computed: {
-    iconSize() {
-      let iconSize;
-
-      switch (this.size) {
-        case 'sm':
-          iconSize = 'xs';
-          break;
-        case 'md':
-        default:
-          iconSize = 'sm';
-          break;
-      }
-
-      return iconSize;
-    },
-  },
-};
+<template>
+  <div
+    class="tw-box-border"
+    :class="{
+      'tw-cursor-pointer tw-pointer-events-none tw-opacity-30': disabled,
+    }"
+  >
+    <label
+      :for="`scl-input-${id}`"
+      class="tw-cursor-pointer"
+      :class="{
+        'tw-flex tw-items-center': inline,
+      }"
+    >
+      <span
+        v-if="label"
+        class="tw-font-sans tw-text-grayscale-700 tw-text-sm tw-block tw-font-semibold"
+        :class="{
+          'tw-sr-only': showLabelScreenReaderOnly,
+          'tw-mb-2': !inline,
+          'tw-ml-2 tw-order-last': inline,
+        }"
+      >
+        {{ label }}
+        <span v-if="required" class="tw-text-error-500">*</span>
+      </span>
+      <div class="tw-flex tw-justify-between tw-items-center">
+        <input
+          :id="`scl-input-${id}`"
+          :checked="modelValue"
+          type="checkbox"
+          class="tw-sr-only"
+          :disabled="disabled"
+          @change="$emit('update:modelValue', $event.target.checked)"
+        />
+        <div
+          class="tw-rounded tw-duration-300 tw-ease-in-out tw-flex tw-items-center tw-justify-center"
+          :class="{
+            'tw-bg-primary-500': modelValue && color === 'primary',
+            'tw-bg-success-500': modelValue && color === 'success',
+            'tw-bg-error-500': modelValue && color === 'error',
+            'tw-bg-info-500': modelValue && color === 'info',
+            'tw-bg-warning-500': modelValue && color === 'warning',
+            'tw-bg-white': !modelValue,
+            'tw-h-5 tw-w-5': size === 'sm',
+            'tw-h-6 tw-w-6': size === 'md',
+            'tw-border tw-border-solid tw-border-grayscale-500': showBorder,
+          }"
+          :classes="classes"
+        >
+          <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>
+  </div>
+</template>
+<script>
+import Icon from '../Icon/Icon.vue';
+import CheckboxMixin from './Checkbox.mixin';
+
+export default {
+  components: {
+    Icon,
+  },
+  mixins: [CheckboxMixin],
+  computed: {
+    iconSize() {
+      let iconSize;
+
+      switch (this.size) {
+        case 'sm':
+          iconSize = 'xs';
+          break;
+        case 'md':
+        default:
+          iconSize = 'sm';
+          break;
+      }
+
+      return iconSize;
+    },
+  },
+};
 </script>