@designcrowd/fe-shared-lib 1.7.0-eng-4159 → 1.7.1

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

@@ -1,176 +1,176 @@
-import Toggle from './Toggle.vue';
-
-export default {
-  title: 'Components/Toggle',
-  component: Toggle,
-};
-
-export const Sample = () => {
-  return {
-    components: {
-      Toggle,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Toggle v-model="checked" id="test" />
-    `,
-  };
-};
-
-export const Label = () => {
-  return {
-    components: {
-      Toggle,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Toggle v-model="checked" id="test" label="Do you love switches?" />
-    `,
-  };
-};
-
-export const LabelInline = () => {
-  return {
-    components: {
-      Toggle,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Toggle v-model="checked" id="test" label="Do you love switches?" :inline="true" />
-    `,
-  };
-};
-
-export const Required = () => {
-  return {
-    components: {
-      Toggle,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Toggle v-model="checked" id="test" label="Do you love switches?" :required="true" />
-    `,
-  };
-};
-
-export const Success = () => {
-  return {
-    components: {
-      Toggle,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Toggle v-model="checked" id="test" color="success" />
-    `,
-  };
-};
-
-export const Error = () => {
-  return {
-    components: {
-      Toggle,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Toggle v-model="checked" id="test" color="error" />
-    `,
-  };
-};
-
-export const Info = () => {
-  return {
-    components: {
-      Toggle,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Toggle v-model="checked" id="test" color="info" />
-    `,
-  };
-};
-
-export const Warning = () => {
-  return {
-    components: {
-      Toggle,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Toggle v-model="checked" id="test" color="warning" />
-    `,
-  };
-};
-
-export const Disabled = () => {
-  return {
-    components: {
-      Toggle,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Toggle v-model="checked" id="test" :disabled="true" />
-    `,
-  };
-};
-
-export const Small = () => {
-  return {
-    components: {
-      Toggle,
-    },
-
-    data() {
-      return {
-        checked: true,
-      };
-    },
-    template: `
-      <Toggle v-model="checked" id="test" size="sm" />
-    `,
-  };
-};
+import Toggle from './Toggle.vue';
+
+export default {
+  title: 'Components/Toggle',
+  component: Toggle,
+};
+
+export const Sample = () => {
+  return {
+    components: {
+      Toggle,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Toggle v-model="checked" id="test" />
+    `,
+  };
+};
+
+export const Label = () => {
+  return {
+    components: {
+      Toggle,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Toggle v-model="checked" id="test" label="Do you love switches?" />
+    `,
+  };
+};
+
+export const LabelInline = () => {
+  return {
+    components: {
+      Toggle,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Toggle v-model="checked" id="test" label="Do you love switches?" :inline="true" />
+    `,
+  };
+};
+
+export const Required = () => {
+  return {
+    components: {
+      Toggle,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Toggle v-model="checked" id="test" label="Do you love switches?" :required="true" />
+    `,
+  };
+};
+
+export const Success = () => {
+  return {
+    components: {
+      Toggle,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Toggle v-model="checked" id="test" color="success" />
+    `,
+  };
+};
+
+export const Error = () => {
+  return {
+    components: {
+      Toggle,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Toggle v-model="checked" id="test" color="error" />
+    `,
+  };
+};
+
+export const Info = () => {
+  return {
+    components: {
+      Toggle,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Toggle v-model="checked" id="test" color="info" />
+    `,
+  };
+};
+
+export const Warning = () => {
+  return {
+    components: {
+      Toggle,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Toggle v-model="checked" id="test" color="warning" />
+    `,
+  };
+};
+
+export const Disabled = () => {
+  return {
+    components: {
+      Toggle,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Toggle v-model="checked" id="test" :disabled="true" />
+    `,
+  };
+};
+
+export const Small = () => {
+  return {
+    components: {
+      Toggle,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Toggle v-model="checked" id="test" size="sm" />
+    `,
+  };
+};

package/src/atoms/components/Toggle/Toggle.vue

@@ -1,69 +1,69 @@
-<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-600 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-flex tw-items-center tw-rounded-full tw-p-1 tw-duration-300 tw-ease-in-out tw-box-border"
-          :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-grayscale-500': !modelValue,
-            'tw-w-10 tw-h-5': size === 'sm',
-            'tw-w-12 tw-h-6': size === 'md',
-          }"
-        >
-          <div
-            class="tw-bg-white tw-rounded-full tw-shadow-sm tw-transform tw-duration-300 tw-ease-in-out"
-            :class="{
-              'tw-w-3 tw-h-3': size === 'sm',
-              'tw-w-4 tw-h-4': size === 'md',
-              'tw-translate-x-5': size === 'sm' && modelValue,
-              'tw-translate-x-6': size === 'md' && modelValue,
-            }"
-          ></div>
-        </div>
-      </div>
-    </label>
-  </div>
-</template>
-<script>
-import CheckboxMixin from '../Checkbox/Checkbox.mixin';
-
-export default {
-  mixins: [CheckboxMixin],
-};
-</script>
+<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-600 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-flex tw-items-center tw-rounded-full tw-p-1 tw-duration-300 tw-ease-in-out tw-box-border"
+          :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-grayscale-500': !modelValue,
+            'tw-w-10 tw-h-5': size === 'sm',
+            'tw-w-12 tw-h-6': size === 'md',
+          }"
+        >
+          <div
+            class="tw-bg-white tw-rounded-full tw-shadow-sm tw-transform tw-duration-300 tw-ease-in-out"
+            :class="{
+              'tw-w-3 tw-h-3': size === 'sm',
+              'tw-w-4 tw-h-4': size === 'md',
+              'tw-translate-x-5': size === 'sm' && modelValue,
+              'tw-translate-x-6': size === 'md' && modelValue,
+            }"
+          ></div>
+        </div>
+      </div>
+    </label>
+  </div>
+</template>
+<script>
+import CheckboxMixin from '../Checkbox/Checkbox.mixin';
+
+export default {
+  mixins: [CheckboxMixin],
+};
+</script>