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

package/src/atoms/components/StarRating/StarRating.vue

@@ -1,84 +1,84 @@
-<template>
-  <ul class="tw-flex tw-justify-center">
-    <li
-      v-for="index in maxRating"
-      :key="index"
-      class="tw-list-none"
-      @click="onRate(index)"
-      @mouseover="applyHoverEffect(index)"
-      @mouseleave="removeHoverEffect()"
-    >
-      <Icon v-if="index <= currentRating" name="star-filled" :size="size" :color="color" />
-      <Icon v-else-if="shouldShowFilledOnHover(index)" name="star-filled" :size="size" :color="color" />
-      <Icon v-else name="star-hollow" :size="size" :color="color" />
-    </li>
-  </ul>
-</template>
-
-<script>
-import Icon from '../Icon/Icon.vue';
-
-export default {
-  components: {
-    Icon,
-  },
-  props: {
-    maxRating: {
-      type: Number,
-      required: false,
-      default: 5,
-    },
-    rating: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    size: {
-      type: String,
-      required: false,
-      default: 'sm',
-    },
-    color: {
-      type: String,
-      required: false,
-      default: 'warning-500',
-    },
-    isInteractive: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      currentRating: this.rating,
-      hoverRating: undefined,
-    };
-  },
-  methods: {
-    shouldShowFilledOnHover(index) {
-      return this.isInteractive && this.hoverRating && this.hoverRating >= index;
-    },
-    onRate(rating) {
-      if (this.isInteractive) {
-        this.currentRating = rating;
-        this.$emit('on-rated', rating);
-      }
-    },
-    applyHoverEffect(rating) {
-      if (this.isInteractive) {
-        this.hoverRating = rating;
-      }
-    },
-    removeHoverEffect() {
-      this.hoverRating = undefined;
-    },
-  },
-};
-</script>
-
-<style scoped>
-li:not(:last-child) {
-  @apply tw-mr-1;
-}
-</style>
+<template>
+  <ul class="tw-flex tw-justify-center">
+    <li
+      v-for="index in maxRating"
+      :key="index"
+      class="tw-list-none"
+      @click="onRate(index)"
+      @mouseover="applyHoverEffect(index)"
+      @mouseleave="removeHoverEffect()"
+    >
+      <Icon v-if="index <= currentRating" name="star-filled" :size="size" :color="color" />
+      <Icon v-else-if="shouldShowFilledOnHover(index)" name="star-filled" :size="size" :color="color" />
+      <Icon v-else name="star-hollow" :size="size" :color="color" />
+    </li>
+  </ul>
+</template>
+
+<script>
+import Icon from '../Icon/Icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    maxRating: {
+      type: Number,
+      required: false,
+      default: 5,
+    },
+    rating: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'sm',
+    },
+    color: {
+      type: String,
+      required: false,
+      default: 'warning-500',
+    },
+    isInteractive: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      currentRating: this.rating,
+      hoverRating: undefined,
+    };
+  },
+  methods: {
+    shouldShowFilledOnHover(index) {
+      return this.isInteractive && this.hoverRating && this.hoverRating >= index;
+    },
+    onRate(rating) {
+      if (this.isInteractive) {
+        this.currentRating = rating;
+        this.$emit('on-rated', rating);
+      }
+    },
+    applyHoverEffect(rating) {
+      if (this.isInteractive) {
+        this.hoverRating = rating;
+      }
+    },
+    removeHoverEffect() {
+      this.hoverRating = undefined;
+    },
+  },
+};
+</script>
+
+<style scoped>
+li:not(:last-child) {
+  @apply tw-mr-1;
+}
+</style>

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

@@ -1,54 +1,54 @@
-import TabMenu from './TabMenu.vue';
-
-export default {
-  title: 'Components/Tab Menu',
-  component: TabMenu,
-};
-
-export const Sample = () => {
-  return {
-    components: {
-      TabMenu,
-    },
-
-    data() {
-      return {
-        checked: true,
-        tabNames: ['all', 'categories'],
-        selectedTabName: 'all',
-      };
-    },
-    methods: {
-      selectTab(tabName) {
-        this.selectedTabName = tabName;
-      },
-    },
-    template: `
-      <TabMenu :tab-names="tabNames" :selected-tab-name="selectedTabName" @on-tab-selected="selectTab" />
-    `,
-  };
-};
-
-export const SampleMoreTabs = () => {
-  return {
-    components: {
-      TabMenu,
-    },
-
-    data() {
-      return {
-        checked: true,
-        tabNames: ['home', 'gaming', 'food', 'nature', 'beauty', 'tax', 'legal'],
-        selectedTabName: 'gaming',
-      };
-    },
-    methods: {
-      selectTab(tabName) {
-        this.selectedTabName = tabName;
-      },
-    },
-    template: `
-      <TabMenu :tab-names="tabNames" :selected-tab-name="selectedTabName" @on-tab-selected="selectTab" />
-    `,
-  };
-};
+import TabMenu from './TabMenu.vue';
+
+export default {
+  title: 'Components/Tab Menu',
+  component: TabMenu,
+};
+
+export const Sample = () => {
+  return {
+    components: {
+      TabMenu,
+    },
+
+    data() {
+      return {
+        checked: true,
+        tabNames: ['all', 'categories'],
+        selectedTabName: 'all',
+      };
+    },
+    methods: {
+      selectTab(tabName) {
+        this.selectedTabName = tabName;
+      },
+    },
+    template: `
+      <TabMenu :tab-names="tabNames" :selected-tab-name="selectedTabName" @on-tab-selected="selectTab" />
+    `,
+  };
+};
+
+export const SampleMoreTabs = () => {
+  return {
+    components: {
+      TabMenu,
+    },
+
+    data() {
+      return {
+        checked: true,
+        tabNames: ['home', 'gaming', 'food', 'nature', 'beauty', 'tax', 'legal'],
+        selectedTabName: 'gaming',
+      };
+    },
+    methods: {
+      selectTab(tabName) {
+        this.selectedTabName = tabName;
+      },
+    },
+    template: `
+      <TabMenu :tab-names="tabNames" :selected-tab-name="selectedTabName" @on-tab-selected="selectTab" />
+    `,
+  };
+};

package/src/atoms/components/TabMenu/TabMenu.vue

@@ -1,44 +1,44 @@
-<template>
-  <div class="tw-flex tw-w-full tw-overflow-x-auto">
-    <div
-      v-for="(tabName, index) in tabNames"
-      :key="index"
-      class="tw-w-full tw-py-2 tw-text-center tw-uppercase tw-font-bold tw-font-sans tw-text-sm tw-cursor-pointer tw-border tw-border-l-0 tw-border-r-0 tw-border-t-0 tw-border-solid"
-      :class="[
-        {
-          'tw-text-secondary-500 tw-border-grayscale-500 tw-border-b-1': selectedTabName !== tabName,
-          'tw-text-primary-500 tw-border-primary-500 tw-border-b-4': selectedTabName === tabName,
-        },
-        classes,
-      ]"
-      @click="onTabSelected(tabName)"
-    >
-      {{ tabName }}
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    tabNames: {
-      type: Array,
-      required: true,
-    },
-
-    selectedTabName: {
-      type: String,
-      required: true,
-    },
-    classes: {
-      type: [String, Object],
-      required: false,
-      default: '',
-    },
-  },
-  methods: {
-    onTabSelected(tabName) {
-      this.$emit('on-tab-selected', tabName);
-    },
-  },
-};
-</script>
+<template>
+  <div class="tw-flex tw-w-full tw-overflow-x-auto">
+    <div
+      v-for="(tabName, index) in tabNames"
+      :key="index"
+      class="tw-w-full tw-py-2 tw-text-center tw-uppercase tw-font-bold tw-font-sans tw-text-sm tw-cursor-pointer tw-border tw-border-l-0 tw-border-r-0 tw-border-t-0 tw-border-solid"
+      :class="[
+        {
+          'tw-text-secondary-500 tw-border-grayscale-500 tw-border-b-1': selectedTabName !== tabName,
+          'tw-text-primary-500 tw-border-primary-500 tw-border-b-4': selectedTabName === tabName,
+        },
+        classes,
+      ]"
+      @click="onTabSelected(tabName)"
+    >
+      {{ tabName }}
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    tabNames: {
+      type: Array,
+      required: true,
+    },
+
+    selectedTabName: {
+      type: String,
+      required: true,
+    },
+    classes: {
+      type: [String, Object],
+      required: false,
+      default: '',
+    },
+  },
+  methods: {
+    onTabSelected(tabName) {
+      this.$emit('on-tab-selected', tabName);
+    },
+  },
+};
+</script>

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

@@ -1,68 +1,68 @@
-import TextCopyField from './TextCopyField.vue';
-import Button from '../Button/Button.vue';
-
-export default {
-  title: 'Components/Text Copy Field',
-  component: TextCopyField,
-};
-
-const data = {
-  components: {
-    TextCopyField,
-    Button,
-  },
-  data() {
-    return {
-      value: 'Hello world',
-      copyButtonText: 'Hello!',
-      copiedButtonText: 'Goodbye!',
-      reset: true,
-    };
-  },
-  methods: {
-    resetCopy() {
-      this.reset = !this.reset;
-    },
-  },
-};
-
-export const Primary = () => {
-  return {
-    ...data,
-    template: `
-      <TextCopyField button-variant="primary" :text="value" />
-    `,
-  };
-};
-
-export const Secondary = () => {
-  return {
-    ...data,
-    template: `
-      <TextCopyField button-variant="secondary" :text="value" />
-    `,
-  };
-};
-
-export const CustomText = () => {
-  return {
-    ...data,
-    template: `
-      <div>
-        <TextCopyField button-variant="primary" :text="value" :defaultCopyButtonText="copyButtonText" :copiedButtonText="copiedButtonText" />
-      </div>
-      `,
-  };
-};
-
-export const ResetButton = () => {
-  return {
-    ...data,
-    template: `
-      <div>
-        <TextCopyField button-variant="primary" :text="value" :reset="reset" />
-        <Button label="Reset" variant="primary" size="large" @on-click="resetCopy()" />
-      </div>
-      `,
-  };
-};
+import TextCopyField from './TextCopyField.vue';
+import Button from '../Button/Button.vue';
+
+export default {
+  title: 'Components/Text Copy Field',
+  component: TextCopyField,
+};
+
+const data = {
+  components: {
+    TextCopyField,
+    Button,
+  },
+  data() {
+    return {
+      value: 'Hello world',
+      copyButtonText: 'Hello!',
+      copiedButtonText: 'Goodbye!',
+      reset: true,
+    };
+  },
+  methods: {
+    resetCopy() {
+      this.reset = !this.reset;
+    },
+  },
+};
+
+export const Primary = () => {
+  return {
+    ...data,
+    template: `
+      <TextCopyField button-variant="primary" :text="value" />
+    `,
+  };
+};
+
+export const Secondary = () => {
+  return {
+    ...data,
+    template: `
+      <TextCopyField button-variant="secondary" :text="value" />
+    `,
+  };
+};
+
+export const CustomText = () => {
+  return {
+    ...data,
+    template: `
+      <div>
+        <TextCopyField button-variant="primary" :text="value" :defaultCopyButtonText="copyButtonText" :copiedButtonText="copiedButtonText" />
+      </div>
+      `,
+  };
+};
+
+export const ResetButton = () => {
+  return {
+    ...data,
+    template: `
+      <div>
+        <TextCopyField button-variant="primary" :text="value" :reset="reset" />
+        <Button label="Reset" variant="primary" size="large" @on-click="resetCopy()" />
+      </div>
+      `,
+  };
+};

package/src/atoms/components/TextCopyField/TextCopyField.vue

@@ -1,75 +1,75 @@
-<template>
-  <div class="tw-flex tw-w-full">
-    <TextInput :model-value="text" :readonly="true" :border-right="false" element-classes="tw-m-0" class="tw-w-full" />
-    <Button
-      :label="copyButtonText"
-      :variant="buttonVariant"
-      :rounded="false"
-      :rounded-right="true"
-      :full-height="true"
-      size="small-wide"
-      @on-click="onClick"
-    />
-  </div>
-</template>
-<script>
-import TextInput from '../TextInput/TextInput.vue';
-import Button from '../Button/Button.vue';
-
-export default {
-  components: {
-    TextInput,
-    Button,
-  },
-  props: {
-    text: {
-      type: String,
-      required: true,
-    },
-    buttonVariant: {
-      type: String,
-      required: false,
-      default: 'primary',
-    },
-    defaultCopyButtonText: {
-      type: String,
-      required: false,
-      default: 'Copy',
-    },
-    copiedButtonText: {
-      type: String,
-      required: false,
-      default: 'Copied!',
-    },
-    reset: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      copyButtonText: this.defaultCopyButtonText,
-    };
-  },
-  watch: {
-    reset(newVal, oldVal) {
-      if (newVal !== oldVal) {
-        this.copyButtonText = this.defaultCopyButtonText;
-      }
-    },
-  },
-  methods: {
-    onClick() {
-      this.$emit('on-click');
-
-      this.copyToClipboard();
-    },
-
-    copyToClipboard() {
-      this.copyButtonText = this.copiedButtonText;
-      navigator.clipboard.writeText(this.text);
-    },
-  },
-};
-</script>
+<template>
+  <div class="tw-flex tw-w-full">
+    <TextInput :model-value="text" :readonly="true" :border-right="false" element-classes="tw-m-0" class="tw-w-full" />
+    <Button
+      :label="copyButtonText"
+      :variant="buttonVariant"
+      :rounded="false"
+      :rounded-right="true"
+      :full-height="true"
+      size="small-wide"
+      @on-click="onClick"
+    />
+  </div>
+</template>
+<script>
+import TextInput from '../TextInput/TextInput.vue';
+import Button from '../Button/Button.vue';
+
+export default {
+  components: {
+    TextInput,
+    Button,
+  },
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+    buttonVariant: {
+      type: String,
+      required: false,
+      default: 'primary',
+    },
+    defaultCopyButtonText: {
+      type: String,
+      required: false,
+      default: 'Copy',
+    },
+    copiedButtonText: {
+      type: String,
+      required: false,
+      default: 'Copied!',
+    },
+    reset: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      copyButtonText: this.defaultCopyButtonText,
+    };
+  },
+  watch: {
+    reset(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.copyButtonText = this.defaultCopyButtonText;
+      }
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('on-click');
+
+      this.copyToClipboard();
+    },
+
+    copyToClipboard() {
+      this.copyButtonText = this.copiedButtonText;
+      navigator.clipboard.writeText(this.text);
+    },
+  },
+};
+</script>