@designcrowd/fe-shared-lib 1.5.8 → 1.5.9-dbc-2

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

@@ -1,84 +1,84 @@
-<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" 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>
+<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" 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>

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

@@ -1,79 +1,79 @@
-import Checktile from './Checktile.vue';
-
-export default {
-  title: 'Components/Checktile',
-  component: Checktile,
-};
-
-const data = {
-  components: {
-    Checktile,
-  },
-};
-
-export const Sample = () => {
-  return {
-    ...data,
-    data() {
-      return {
-        selected: false,
-      };
-    },
-    template: `
-      <Checktile @click="onClick" :selected="selected">
-        <img src="https://picsum.photos/200/300" alt="" />
-      </Checktile>
-    `,
-    methods: {
-      onClick() {
-        this.selected = !this.selected;
-      },
-    },
-  };
-};
-
-export const SampleSelected = () => {
-  return {
-    ...data,
-    template: `
-      <Checktile :selected="true">
-        <img src="https://picsum.photos/200/300" alt="" />
-      </Checktile>
-    `,
-  };
-};
-
-export const SampleText = () => {
-  return {
-    ...data,
-    data() {
-      return {
-        selected: false,
-      };
-    },
-    template: `
-      <div class="tw-flex tw-flex-col tw-my-2 tw-w-64">
-        <Checktile class="tw-my-2" @click="onClick" :selected="selected" :check-position="'middle-right'">
-          <div class="tw-my-2 tw-mx-10">
-          Hello World
-          </div>
-        </Checktile>
-        <Checktile class="tw-my-2" :selected="true" :check-position="'middle-right'">
-          <div class="tw-my-2 tw-mx-10 tw-py-10">
-          Hello World Tall
-          </div>
-        </Checktile>
-        <Checktile class="tw-my-2" :selected="true" :display-check="false" :check-position="'middle-right'">
-          <div class="tw-my-2 tw-mx-10">
-          Without check
-          </div>
-        </Checktile>
-      </div>
-    `,
-    methods: {
-      onClick() {
-        this.selected = !this.selected;
-      },
-    },
-  };
-};
+import Checktile from './Checktile.vue';
+
+export default {
+  title: 'Components/Checktile',
+  component: Checktile,
+};
+
+const data = {
+  components: {
+    Checktile,
+  },
+};
+
+export const Sample = () => {
+  return {
+    ...data,
+    data() {
+      return {
+        selected: false,
+      };
+    },
+    template: `
+      <Checktile @click="onClick" :selected="selected">
+        <img src="https://picsum.photos/200/300" alt="" />
+      </Checktile>
+    `,
+    methods: {
+      onClick() {
+        this.selected = !this.selected;
+      },
+    },
+  };
+};
+
+export const SampleSelected = () => {
+  return {
+    ...data,
+    template: `
+      <Checktile :selected="true">
+        <img src="https://picsum.photos/200/300" alt="" />
+      </Checktile>
+    `,
+  };
+};
+
+export const SampleText = () => {
+  return {
+    ...data,
+    data() {
+      return {
+        selected: false,
+      };
+    },
+    template: `
+      <div class="tw-flex tw-flex-col tw-my-2 tw-w-64">
+        <Checktile class="tw-my-2" @click="onClick" :selected="selected" :check-position="'middle-right'">
+          <div class="tw-my-2 tw-mx-10">
+          Hello World
+          </div>
+        </Checktile>
+        <Checktile class="tw-my-2" :selected="true" :check-position="'middle-right'">
+          <div class="tw-my-2 tw-mx-10 tw-py-10">
+          Hello World Tall
+          </div>
+        </Checktile>
+        <Checktile class="tw-my-2" :selected="true" :display-check="false" :check-position="'middle-right'">
+          <div class="tw-my-2 tw-mx-10">
+          Without check
+          </div>
+        </Checktile>
+      </div>
+    `,
+    methods: {
+      onClick() {
+        this.selected = !this.selected;
+      },
+    },
+  };
+};

package/src/atoms/components/Checktile/Checktile.vue

@@ -1,73 +1,73 @@
-<template>
-  <button
-    class="tw-transition-shadow tw-duration-200 tw-ease-out tw-border-none tw-bg-white tw-cursor-pointer"
-    :class="{
-      'hover:tw-shadow-lg': !selected,
-      'tw-rounded-sm': borderRadius === 'sm',
-      'tw-rounded': borderRadius === 'reg',
-      'tw-rounded-md': borderRadius === 'md',
-    }"
-    @click="onClick"
-  >
-    <div
-      class="tw-h-full tw-relative tw-transition-shadow tw-duration-200 tw-ease-out tw-overflow-hidden"
-      :class="{
-        'tw-rounded-sm': borderRadius === 'sm',
-        'tw-rounded': borderRadius === 'reg',
-        'tw-rounded-md': borderRadius === 'md',
-        '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': selected,
-        '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !selected,
-      }"
-    >
-      <div class="tw-block tw-overflow-hidden">
-        <slot />
-      </div>
-      <div
-        v-if="displayCheck"
-        :class="{
-          'tw-scale-0': !selected,
-          'tw-scale-100': selected,
-          'tw-absolute tw-bottom-0 tw-right-0 tw--translate-x-2 tw--translate-y-2': checkPosition === 'bottom-right',
-          'tw-absolute tw-right-0 tw-top-1/2 tw--translate-y-1/2 tw-mr-3': checkPosition === 'middle-right',
-        }"
-        class="tw-transition-transform tw-duration-200 tw-ease-out tw-text-white tw-transform tw-bg-info-500 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-w-6 tw-h-6"
-      >
-        <Icon name="check" size="xs" />
-      </div>
-    </div>
-  </button>
-</template>
-<script>
-import Icon from '../Icon/Icon.vue';
-
-export default {
-  components: {
-    Icon,
-  },
-  props: {
-    selected: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    checkPosition: {
-      type: String,
-      default: 'bottom-right',
-    },
-    displayCheck: {
-      type: Boolean,
-      default: true,
-    },
-    borderRadius: {
-      type: String,
-      required: false,
-      default: 'sm',
-    },
-  },
-  methods: {
-    onClick() {
-      this.$emit('click');
-    },
-  },
-};
-</script>
+<template>
+  <button
+    class="tw-transition-shadow tw-duration-200 tw-ease-out tw-border-none tw-bg-white tw-cursor-pointer"
+    :class="{
+      'hover:tw-shadow-lg': !selected,
+      'tw-rounded-sm': borderRadius === 'sm',
+      'tw-rounded': borderRadius === 'reg',
+      'tw-rounded-md': borderRadius === 'md',
+    }"
+    @click="onClick"
+  >
+    <div
+      class="tw-h-full tw-relative tw-transition-shadow tw-duration-200 tw-ease-out tw-overflow-hidden"
+      :class="{
+        'tw-rounded-sm': borderRadius === 'sm',
+        'tw-rounded': borderRadius === 'reg',
+        'tw-rounded-md': borderRadius === 'md',
+        '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': selected,
+        '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !selected,
+      }"
+    >
+      <div class="tw-block tw-overflow-hidden">
+        <slot />
+      </div>
+      <div
+        v-if="displayCheck"
+        :class="{
+          'tw-scale-0': !selected,
+          'tw-scale-100': selected,
+          'tw-absolute tw-bottom-0 tw-right-0 tw--translate-x-2 tw--translate-y-2': checkPosition === 'bottom-right',
+          'tw-absolute tw-right-0 tw-top-1/2 tw--translate-y-1/2 tw-mr-3': checkPosition === 'middle-right',
+        }"
+        class="tw-transition-transform tw-duration-200 tw-ease-out tw-text-white tw-transform tw-bg-info-500 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-w-6 tw-h-6"
+      >
+        <Icon name="check" size="xs" />
+      </div>
+    </div>
+  </button>
+</template>
+<script>
+import Icon from '../Icon/Icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    selected: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    checkPosition: {
+      type: String,
+      default: 'bottom-right',
+    },
+    displayCheck: {
+      type: Boolean,
+      default: true,
+    },
+    borderRadius: {
+      type: String,
+      required: false,
+      default: 'sm',
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>

package/src/atoms/components/CollapsiblePanel/CollapsiblePanel.mixin.js

@@ -1,38 +1,38 @@
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    subtitle: {
-      type: String,
-      default: '',
-    },
-    isCollapsed: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      selfIsCollapsed: false,
-    };
-  },
-  watch: {
-    isCollapsed(newVal) {
-      this.selfIsCollapsed = newVal;
-    },
-  },
-  created() {
-    this.selfIsCollapsed = this.isCollapsed;
-  },
-  methods: {
-    toggleCollapsed() {
-      this.selfIsCollapsed = !this.selfIsCollapsed;
-      this.$emit('changed');
-    },
-  },
-});
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    subtitle: {
+      type: String,
+      default: '',
+    },
+    isCollapsed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      selfIsCollapsed: false,
+    };
+  },
+  watch: {
+    isCollapsed(newVal) {
+      this.selfIsCollapsed = newVal;
+    },
+  },
+  created() {
+    this.selfIsCollapsed = this.isCollapsed;
+  },
+  methods: {
+    toggleCollapsed() {
+      this.selfIsCollapsed = !this.selfIsCollapsed;
+      this.$emit('changed');
+    },
+  },
+});

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

@@ -1,53 +1,53 @@
-import CollapsiblePanel from './CollapsiblePanel.vue';
-
-export default {
-  title: 'Components/CollapsiblePanel',
-  component: CollapsiblePanel,
-};
-
-const data = {
-  components: {
-    CollapsiblePanel,
-  },
-};
-
-export const Simple = () => {
-  return {
-    ...data,
-    template: `
-      <CollapsiblePanel title="Hello">
-        <h1>Content</h1>
-        <p>Content Content Content Content</p>
-      </CollapsiblePanel>
-    `,
-  };
-};
-
-export const WithForm = () => {
-  return {
-    ...data,
-    template: `
-      <CollapsiblePanel title="Form">
-        <form>
-          <label for="fname">First name:</label><br>
-          <input class="tw-border tw-border-grayscale-500 tw-border-solid" type="text" id="fname" name="fname"><br>
-          <label for="lname">Last name:</label><br>
-          <input class="tw-border tw-border-grayscale-500 tw-border-solid" type="text" id="lname" name="lname">
-        </form>
-      </CollapsiblePanel>
-    `,
-  };
-};
-
-export const WithSubtitle = () => {
-  return {
-    ...data,
-    template: `
-      <CollapsiblePanel title="Hello" subtitle="This is a subtitle">
-        <p>Test case with subtitle</p>
-        <p>Test case with subtitle</p>
-        <p>Test case with subtitle</p>
-      </CollapsiblePanel>
-    `,
-  };
-};
+import CollapsiblePanel from './CollapsiblePanel.vue';
+
+export default {
+  title: 'Components/CollapsiblePanel',
+  component: CollapsiblePanel,
+};
+
+const data = {
+  components: {
+    CollapsiblePanel,
+  },
+};
+
+export const Simple = () => {
+  return {
+    ...data,
+    template: `
+      <CollapsiblePanel title="Hello">
+        <h1>Content</h1>
+        <p>Content Content Content Content</p>
+      </CollapsiblePanel>
+    `,
+  };
+};
+
+export const WithForm = () => {
+  return {
+    ...data,
+    template: `
+      <CollapsiblePanel title="Form">
+        <form>
+          <label for="fname">First name:</label><br>
+          <input class="tw-border tw-border-grayscale-500 tw-border-solid" type="text" id="fname" name="fname"><br>
+          <label for="lname">Last name:</label><br>
+          <input class="tw-border tw-border-grayscale-500 tw-border-solid" type="text" id="lname" name="lname">
+        </form>
+      </CollapsiblePanel>
+    `,
+  };
+};
+
+export const WithSubtitle = () => {
+  return {
+    ...data,
+    template: `
+      <CollapsiblePanel title="Hello" subtitle="This is a subtitle">
+        <p>Test case with subtitle</p>
+        <p>Test case with subtitle</p>
+        <p>Test case with subtitle</p>
+      </CollapsiblePanel>
+    `,
+  };
+};