@designcrowd/fe-shared-lib 1.0.9 → 1.0.10

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

@@ -1,39 +1,39 @@
-import PillBar from './PillBar.vue';
-import categories from './PillBar.fixtures';
-
-export default {
-  title: 'Components/PillBar',
-  component: PillBar,
-};
-
-export const Sample = () => {
-  return {
-    components: { PillBar },
-    data() {
-      return {
-        categories,
-      };
-    },
-    template: `
-      <div class="tw-max-w-300">
-        <PillBar :categories="categories" />
-      </div>
-    `,
-  };
-};
-
-export const SampleDarkMode = () => {
-  return {
-    components: { PillBar },
-    data() {
-      return {
-        categories,
-      };
-    },
-    template: `
-      <div class="tw-max-w-300 tw-bg-black tw-p-8">
-        <PillBar :categories="categories" is-dark-mode />
-      </div>
-    `,
-  };
-};
+import PillBar from './PillBar.vue';
+import categories from './PillBar.fixtures';
+
+export default {
+  title: 'Components/PillBar',
+  component: PillBar,
+};
+
+export const Sample = () => {
+  return {
+    components: { PillBar },
+    data() {
+      return {
+        categories,
+      };
+    },
+    template: `
+      <div class="tw-max-w-300">
+        <PillBar :categories="categories" />
+      </div>
+    `,
+  };
+};
+
+export const SampleDarkMode = () => {
+  return {
+    components: { PillBar },
+    data() {
+      return {
+        categories,
+      };
+    },
+    template: `
+      <div class="tw-max-w-300 tw-bg-black tw-p-8">
+        <PillBar :categories="categories" is-dark-mode />
+      </div>
+    `,
+  };
+};

package/src/atoms/components/PillBar/PillBar.vue

@@ -1,62 +1,62 @@
-<template>
-  <ul class="tw-list-none tw-flex tw-overflow-y-hidden tw-overflow-x-auto tw-m-0 tw-p-0">
-    <li v-for="category in categories" :key="category.name" class="carousel-filter__category">
-      <Button
-        :label="category.name"
-        :variant="isDarkMode ? 'dark-mode-pill' : 'pill'"
-        :active="category.name === selectedCategory"
-        @on-click="onSelectCategory(category)"
-      />
-    </li>
-  </ul>
-</template>
-
-<script>
-import Button from '../Button/Button.vue';
-
-export default {
-  components: {
-    Button,
-  },
-  props: {
-    categories: {
-      type: Array,
-      required: true,
-      default: () => [],
-    },
-    initialCategory: {
-      type: String,
-      required: false,
-      default: 'Popular',
-    },
-    isDarkMode: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      selectedCategory: null,
-    };
-  },
-  created() {
-    this.selectedCategory = this.initialCategory;
-  },
-  methods: {
-    onSelectCategory(category) {
-      this.selectedCategory = category.name;
-      this.$emit('on-click-category', category);
-    },
-  },
-};
-</script>
-
-<style>
-.carousel-filter__category {
-  @apply tw-whitespace-nowrap;
-}
-
-.carousel-filter__category:not(:last-child) {
-  @apply tw-mr-3;
-}
-</style>
+<template>
+  <ul class="tw-list-none tw-flex tw-overflow-y-hidden tw-overflow-x-auto tw-m-0 tw-p-0">
+    <li v-for="category in categories" :key="category.name" class="carousel-filter__category">
+      <Button
+        :label="category.name"
+        :variant="isDarkMode ? 'dark-mode-pill' : 'pill'"
+        :active="category.name === selectedCategory"
+        @on-click="onSelectCategory(category)"
+      />
+    </li>
+  </ul>
+</template>
+
+<script>
+import Button from '../Button/Button.vue';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    categories: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+    initialCategory: {
+      type: String,
+      required: false,
+      default: 'Popular',
+    },
+    isDarkMode: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      selectedCategory: null,
+    };
+  },
+  created() {
+    this.selectedCategory = this.initialCategory;
+  },
+  methods: {
+    onSelectCategory(category) {
+      this.selectedCategory = category.name;
+      this.$emit('on-click-category', category);
+    },
+  },
+};
+</script>
+
+<style>
+.carousel-filter__category {
+  @apply tw-whitespace-nowrap;
+}
+
+.carousel-filter__category:not(:last-child) {
+  @apply tw-mr-3;
+}
+</style>

package/src/atoms/components/Price/Price.fixtures.js

@@ -1,25 +1,25 @@
-export const usdCurrency = {
-  id: 1,
-  name: 'United State Dollars',
-  iso4127Code: 'USD',
-  symbol: '$',
-  abbreviation: 'US',
-};
-
-export const audCurrency = {
-  id: 2,
-  name: 'Australian Dollars',
-  iso4127Code: 'AUD',
-  symbol: '$',
-  abbreviation: 'AU',
-};
-
-export const euroCurrency = {
-  id: 999,
-  name: 'Euro',
-  iso4127Code: 'EUR',
-  symbol: '€',
-  abbreviation: 'EU',
-};
-
-export const currencies = [usdCurrency, audCurrency, euroCurrency];
+export const usdCurrency = {
+  id: 1,
+  name: 'United State Dollars',
+  iso4127Code: 'USD',
+  symbol: '$',
+  abbreviation: 'US',
+};
+
+export const audCurrency = {
+  id: 2,
+  name: 'Australian Dollars',
+  iso4127Code: 'AUD',
+  symbol: '$',
+  abbreviation: 'AU',
+};
+
+export const euroCurrency = {
+  id: 999,
+  name: 'Euro',
+  iso4127Code: 'EUR',
+  symbol: '€',
+  abbreviation: 'EU',
+};
+
+export const currencies = [usdCurrency, audCurrency, euroCurrency];

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

@@ -1,173 +1,173 @@
-import Price from './Price.vue';
-import { currencies } from './Price.fixtures';
-
-// noinspection JSUnusedGlobalSymbols
-export default {
-  title: 'Components/Price',
-  component: Price,
-  args: {
-    currencyName: currencies[0].name,
-  },
-  argTypes: {
-    amount: {
-      type: 'number',
-    },
-    currencyName: {
-      control: { type: 'select' },
-      options: currencies.map((x) => x.name),
-    },
-  },
-};
-
-export const Sample = {
-  render: (args, { argTypes }) => {
-    return {
-      components: { Price },
-      props: Object.keys(argTypes),
-      setup() {
-        return { args };
-      },
-      computed: {
-        selectedCurrency() {
-          return currencies.find((x) => x.name === this.args.currencyName);
-        },
-      },
-      template: `
-      <span>
-        <price 
-            v-bind="args"
-            :currency="selectedCurrency"
-        />
-      </span>
-    `,
-    };
-  },
-  args: {
-    amount: 45,
-  },
-};
-
-export const WithFraction = {
-  render: (args, { argTypes }) => {
-    return {
-      components: { Price },
-      props: Object.keys(argTypes),
-      setup() {
-        return { args };
-      },
-      computed: {
-        selectedCurrency() {
-          return currencies.find((x) => x.name === this.args.currencyName);
-        },
-      },
-      template: `
-      <span>
-        <price
-            v-bind="args"
-            :currency="selectedCurrency"
-            fraction="2"
-            :show-abbreviation="true"
-        />
-      </span>
-    `,
-    };
-  },
-  args: {
-    amount: 22.5,
-  },
-};
-
-export const AlwaysShowFractionOn = {
-  render: (args, { argTypes }) => {
-    return {
-      components: { Price },
-      props: Object.keys(argTypes),
-      setup() {
-        return { args };
-      },
-      computed: {
-        selectedCurrency() {
-          return currencies.find((x) => x.name === this.args.currencyName);
-        },
-      },
-      template: `
-      <span>
-        <price
-            v-bind="args"
-            :always-show-fraction="true"
-            :currency="selectedCurrency"
-            fraction="2"
-            :show-abbreviation="true"
-        />
-      </span>
-    `,
-    };
-  },
-  args: {
-    amount: 22.0,
-  },
-};
-
-export const AlwaysShowFractionOff = {
-  render: (args, { argTypes }) => {
-    return {
-      components: { Price },
-      props: Object.keys(argTypes),
-      setup() {
-        return { args };
-      },
-      computed: {
-        selectedCurrency() {
-          return currencies.find((x) => x.name === this.args.currencyName);
-        },
-      },
-      template: `
-      <span>
-        <price
-            v-bind="args"
-            :always-show-fraction="false"
-            :currency="selectedCurrency"
-            fraction="2"
-            :show-abbreviation="true"
-          />
-      </span>
-    `,
-    };
-  },
-  args: {
-    amount: 22.0,
-  },
-};
-
-export const WithSuffix = {
-  render: (args, { argTypes }) => {
-    return {
-      components: { Price },
-      props: Object.keys(argTypes),
-      setup() {
-        return { args };
-      },
-      computed: {
-        selectedCurrency() {
-          return currencies.find((x) => x.name === this.args.currencyName);
-        },
-      },
-      template: `
-      <span>
-        <price
-            v-bind="args"
-            :always-show-fraction="true"
-            :currency="selectedCurrency"
-            fraction="2"
-            :show-abbreviation="true"
-            :suffix="suffix"
-          />
-      </span>
-    `,
-    };
-  },
-  args: {
-    amount: 22.0,
-    suffix: '/yr',
-  },
-};
+import Price from './Price.vue';
+import { currencies } from './Price.fixtures';
+
+// noinspection JSUnusedGlobalSymbols
+export default {
+  title: 'Components/Price',
+  component: Price,
+  args: {
+    currencyName: currencies[0].name,
+  },
+  argTypes: {
+    amount: {
+      type: 'number',
+    },
+    currencyName: {
+      control: { type: 'select' },
+      options: currencies.map((x) => x.name),
+    },
+  },
+};
+
+export const Sample = {
+  render: (args, { argTypes }) => {
+    return {
+      components: { Price },
+      props: Object.keys(argTypes),
+      setup() {
+        return { args };
+      },
+      computed: {
+        selectedCurrency() {
+          return currencies.find((x) => x.name === this.args.currencyName);
+        },
+      },
+      template: `
+      <span>
+        <price 
+            v-bind="args"
+            :currency="selectedCurrency"
+        />
+      </span>
+    `,
+    };
+  },
+  args: {
+    amount: 45,
+  },
+};
+
+export const WithFraction = {
+  render: (args, { argTypes }) => {
+    return {
+      components: { Price },
+      props: Object.keys(argTypes),
+      setup() {
+        return { args };
+      },
+      computed: {
+        selectedCurrency() {
+          return currencies.find((x) => x.name === this.args.currencyName);
+        },
+      },
+      template: `
+      <span>
+        <price
+            v-bind="args"
+            :currency="selectedCurrency"
+            fraction="2"
+            :show-abbreviation="true"
+        />
+      </span>
+    `,
+    };
+  },
+  args: {
+    amount: 22.5,
+  },
+};
+
+export const AlwaysShowFractionOn = {
+  render: (args, { argTypes }) => {
+    return {
+      components: { Price },
+      props: Object.keys(argTypes),
+      setup() {
+        return { args };
+      },
+      computed: {
+        selectedCurrency() {
+          return currencies.find((x) => x.name === this.args.currencyName);
+        },
+      },
+      template: `
+      <span>
+        <price
+            v-bind="args"
+            :always-show-fraction="true"
+            :currency="selectedCurrency"
+            fraction="2"
+            :show-abbreviation="true"
+        />
+      </span>
+    `,
+    };
+  },
+  args: {
+    amount: 22.0,
+  },
+};
+
+export const AlwaysShowFractionOff = {
+  render: (args, { argTypes }) => {
+    return {
+      components: { Price },
+      props: Object.keys(argTypes),
+      setup() {
+        return { args };
+      },
+      computed: {
+        selectedCurrency() {
+          return currencies.find((x) => x.name === this.args.currencyName);
+        },
+      },
+      template: `
+      <span>
+        <price
+            v-bind="args"
+            :always-show-fraction="false"
+            :currency="selectedCurrency"
+            fraction="2"
+            :show-abbreviation="true"
+          />
+      </span>
+    `,
+    };
+  },
+  args: {
+    amount: 22.0,
+  },
+};
+
+export const WithSuffix = {
+  render: (args, { argTypes }) => {
+    return {
+      components: { Price },
+      props: Object.keys(argTypes),
+      setup() {
+        return { args };
+      },
+      computed: {
+        selectedCurrency() {
+          return currencies.find((x) => x.name === this.args.currencyName);
+        },
+      },
+      template: `
+      <span>
+        <price
+            v-bind="args"
+            :always-show-fraction="true"
+            :currency="selectedCurrency"
+            fraction="2"
+            :show-abbreviation="true"
+            :suffix="suffix"
+          />
+      </span>
+    `,
+    };
+  },
+  args: {
+    amount: 22.0,
+    suffix: '/yr',
+  },
+};