@designcrowd/fe-shared-lib 1.5.6 → 1.5.7-eng-3522-1

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

@@ -1,292 +1,292 @@
-import Price from './Price.vue';
-import { currencies, locales } from './Price.fixtures';
-import { setSharedLibLocaleAsync } from "../../../useSharedLibTranslate";
-import { defineComponent } from "vue";
-
-await setSharedLibLocaleAsync();
-
-// noinspection JSUnusedGlobalSymbols
-export default {
-  title: 'Components/Price',
-  component: Price,
-  args: {
-    currencyName: currencies[0].name,
-    locale: locales[0]
-  },
-  argTypes: {
-    amount: {
-      type: 'number',
-    },
-    currencyName: {
-      control: { type: 'select' },
-      options: currencies.map((x) => x.name),
-    },
-    locale: {
-      control: { type: 'select' },
-      options: locales,
-    },
-  },
-};
-
-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);
-        },
-        selectedLocale() {
-          return locales.find((x) => x === this.args.locale);
-        },
-      },
-      template: `
-      <span>
-        <price 
-            v-bind="args"
-            :currency="selectedCurrency"
-            :locale="selectedLocale"
-        />
-      </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);
-        },
-        selectedLocale() {
-          return locales.find((x) => x === this.args.locale);
-        },
-      },
-      template: `
-      <span>
-        <price
-            v-bind="args"
-            :currency="selectedCurrency"
-            fraction="2"
-            :locale="selectedLocale"
-        />
-      </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);
-        },
-        selectedLocale() {
-          return locales.find((x) => x === this.args.locale);
-        },
-      },
-      template: `
-      <span>
-        <price
-            v-bind="args"
-            :always-show-fraction="true"
-            :currency="selectedCurrency"
-            fraction="2"
-            :locale="selectedLocale"
-        />
-      </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"
-            :locale="selectedLocale"
-          />
-      </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);
-        },
-        selectedLocale() {
-          return locales.find((x) => x === this.args.locale);
-        },
-      },
-      template: `
-      <span>
-        <price
-            v-bind="args"
-            :always-show-fraction="true"
-            :currency="selectedCurrency"
-            fraction="2"
-            :suffix="suffix"
-            :locale="selectedLocale"
-          />
-      </span>
-    `,
-    };
-  },
-  args: {
-    amount: 22.0,
-    suffix: '/yr',
-  },
-};
-
-export const WithLocale = {
-  render: (args, { argTypes }) => {
-    return {
-      components: { Price },
-      props: Object.keys(argTypes),
-      setup() {
-        return { args };
-      },
-      computed: {
-        selectedCurrency() {
-          return currencies.find((x) => x.name === this.args.currencyName);
-        },
-        selectedLocale() {
-          return locales.find((x) => x === this.args.locale);
-        },
-      },
-      template: `
-      <span>
-        <price
-            v-bind="args"
-            :currency="selectedCurrency"
-            :locale="selectedLocale"
-        />
-      </span>
-    `,
-    };
-  },
-  args: {
-    amount: 22.0,
-  },
-};
-
-export const AllLocalesAndCurrencies = (args, { argTypes }) => {
-  return {
-    components: {
-      StorybookPriceComponent,
-    },
-    props: Object.keys(argTypes),
-    data() {
-      const combos = new Array(locales.length).fill(0);
-      combos.forEach((item, index) => {
-        combos[index] = new Array(currencies.length).fill(0).map((item2, index2) => ({"locale": locales[index], "currency": currencies[index2]}));
-      })
-      return {
-        variants: combos,
-      };
-    },
-    template: `
-      <StorybookPriceComponent
-          :variants="variants"/>
-      <StorybookPriceComponent
-          :variants="variants"
-          :show-abbreviation="true"
-      />
-    `,
-  };
-};
-
-const StorybookPriceComponent = defineComponent({
-    components: {
-      Price,
-    },
-    props: {
-      variants: {
-        type: Array,
-        required: true,
-      },
-      showAbbreviation: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    template: `
-    <table class="tw-w-full">
-      <thead>
-        <tr>
-          <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Price</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="locale in variants" class="tw-bg-grayscale-200">
-          <td>{{ locale[0].locale }}</td>
-          <td v-for="item in locale" class="tw-p-4">
-            <price
-                :amount=10.00
-                :currency="item.currency"
-                :locale="item.locale"
-                :show-abbreviation="showAbbreviation"
-                fraction="2"
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  `,
+import Price from './Price.vue';
+import { currencies, locales } from './Price.fixtures';
+import { setSharedLibLocaleAsync } from "../../../useSharedLibTranslate";
+import { defineComponent } from "vue";
+
+await setSharedLibLocaleAsync();
+
+// noinspection JSUnusedGlobalSymbols
+export default {
+  title: 'Components/Price',
+  component: Price,
+  args: {
+    currencyName: currencies[0].name,
+    locale: locales[0]
+  },
+  argTypes: {
+    amount: {
+      type: 'number',
+    },
+    currencyName: {
+      control: { type: 'select' },
+      options: currencies.map((x) => x.name),
+    },
+    locale: {
+      control: { type: 'select' },
+      options: locales,
+    },
+  },
+};
+
+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);
+        },
+        selectedLocale() {
+          return locales.find((x) => x === this.args.locale);
+        },
+      },
+      template: `
+      <span>
+        <price 
+            v-bind="args"
+            :currency="selectedCurrency"
+            :locale="selectedLocale"
+        />
+      </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);
+        },
+        selectedLocale() {
+          return locales.find((x) => x === this.args.locale);
+        },
+      },
+      template: `
+      <span>
+        <price
+            v-bind="args"
+            :currency="selectedCurrency"
+            fraction="2"
+            :locale="selectedLocale"
+        />
+      </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);
+        },
+        selectedLocale() {
+          return locales.find((x) => x === this.args.locale);
+        },
+      },
+      template: `
+      <span>
+        <price
+            v-bind="args"
+            :always-show-fraction="true"
+            :currency="selectedCurrency"
+            fraction="2"
+            :locale="selectedLocale"
+        />
+      </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"
+            :locale="selectedLocale"
+          />
+      </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);
+        },
+        selectedLocale() {
+          return locales.find((x) => x === this.args.locale);
+        },
+      },
+      template: `
+      <span>
+        <price
+            v-bind="args"
+            :always-show-fraction="true"
+            :currency="selectedCurrency"
+            fraction="2"
+            :suffix="suffix"
+            :locale="selectedLocale"
+          />
+      </span>
+    `,
+    };
+  },
+  args: {
+    amount: 22.0,
+    suffix: '/yr',
+  },
+};
+
+export const WithLocale = {
+  render: (args, { argTypes }) => {
+    return {
+      components: { Price },
+      props: Object.keys(argTypes),
+      setup() {
+        return { args };
+      },
+      computed: {
+        selectedCurrency() {
+          return currencies.find((x) => x.name === this.args.currencyName);
+        },
+        selectedLocale() {
+          return locales.find((x) => x === this.args.locale);
+        },
+      },
+      template: `
+      <span>
+        <price
+            v-bind="args"
+            :currency="selectedCurrency"
+            :locale="selectedLocale"
+        />
+      </span>
+    `,
+    };
+  },
+  args: {
+    amount: 22.0,
+  },
+};
+
+export const AllLocalesAndCurrencies = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookPriceComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      const combos = new Array(locales.length).fill(0);
+      combos.forEach((item, index) => {
+        combos[index] = new Array(currencies.length).fill(0).map((item2, index2) => ({"locale": locales[index], "currency": currencies[index2]}));
+      })
+      return {
+        variants: combos,
+      };
+    },
+    template: `
+      <StorybookPriceComponent
+          :variants="variants"/>
+      <StorybookPriceComponent
+          :variants="variants"
+          :show-abbreviation="true"
+      />
+    `,
+  };
+};
+
+const StorybookPriceComponent = defineComponent({
+    components: {
+      Price,
+    },
+    props: {
+      variants: {
+        type: Array,
+        required: true,
+      },
+      showAbbreviation: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    template: `
+    <table class="tw-w-full">
+      <thead>
+        <tr>
+          <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Price</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="locale in variants" class="tw-bg-grayscale-200">
+          <td>{{ locale[0].locale }}</td>
+          <td v-for="item in locale" class="tw-p-4">
+            <price
+                :amount=10.00
+                :currency="item.currency"
+                :locale="item.locale"
+                :show-abbreviation="showAbbreviation"
+                fraction="2"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `,
 });