@designcrowd/fe-shared-lib 1.0.9 → 1.0.10

package/src/experiences/components/SellDomainNameList/SellDomainNameList.fixtures.js

@@ -1,32 +1,32 @@
-// eslint-disable-next-line import/prefer-default-export
-export const domainNamesFixture = [...Array(3).keys()]
-  .map(() => [
-    {
-      domainName: 'notloic.fr',
-      price: '0.00',
-      currency: 'usd',
-      checkoutUrl: '#',
-    },
-    {
-      domainName: 'shadyloic.fr',
-      price: '18.00',
-      costPrice: '12.00',
-      currency: 'usd',
-      checkoutUrl: '#',
-    },
-    {
-      domainName: 'badloic.fr',
-      price: '18.00',
-      costPrice: '12.00',
-      currency: 'usd',
-      checkoutUrl: '#',
-    },
-    {
-      domainName: 'flirtyloic.fr',
-      price: '18.00',
-      costPrice: '12.00',
-      currency: 'usd',
-      checkoutUrl: '#',
-    },
-  ])
-  .reduce((prev, curr) => prev.concat(curr), []);
+// eslint-disable-next-line import/prefer-default-export
+export const domainNamesFixture = [...Array(3).keys()]
+  .map(() => [
+    {
+      domainName: 'notloic.fr',
+      price: '0.00',
+      currency: 'usd',
+      checkoutUrl: '#',
+    },
+    {
+      domainName: 'shadyloic.fr',
+      price: '18.00',
+      costPrice: '12.00',
+      currency: 'usd',
+      checkoutUrl: '#',
+    },
+    {
+      domainName: 'badloic.fr',
+      price: '18.00',
+      costPrice: '12.00',
+      currency: 'usd',
+      checkoutUrl: '#',
+    },
+    {
+      domainName: 'flirtyloic.fr',
+      price: '18.00',
+      costPrice: '12.00',
+      currency: 'usd',
+      checkoutUrl: '#',
+    },
+  ])
+  .reduce((prev, curr) => prev.concat(curr), []);

package/src/experiences/components/SellDomainNameList/SellDomainNameList.vue

@@ -1,145 +1,145 @@
-<template>
-  <div class="tw-flex tw-w-full tw-flex-col">
-    <ul :class="{ 'tw-ml-4': !hasBorderBoxListStyling }">
-      <li
-        v-for="(item, idx) in domainNameItems"
-        :key="`${item.domainName}-${idx}`"
-        class="tw-flex tw-w-full tw-items-center tw-border-grayscale-500"
-        :class="{
-          'tw-py-3': !hasBorderBoxListStyling,
-          'tw-border-solid tw-border-0 tw-border-t': idx > 0 && !hasBorderBoxListStyling,
-          'tw-border tw-bg-white tw-my-4 tw-py-5 tw-px-4 tw-drop-shadow-sm': hasBorderBoxListStyling,
-          'tw-rounded': isDesignCom && hasBorderBoxListStyling,
-        }"
-      >
-        <div class="tw-grow tw-flex tw-flex-col sm:tw-flex-row tw-justify-start">
-          <div
-            :class="{
-              'tw-text-lg': hasBorderBoxListStyling,
-            }"
-            class="tw-grow tw-font-bold tw-break-all"
-          >
-            {{ item.domainName }}
-          </div>
-          <div v-if="item.costPrice" class="tw-text-xs tw-text-grayscale-600 tw-flex tw-items-center">
-            <span class="tw-mr-2"> Cost Price: </span>
-            <Price
-              class="tw-font-bold"
-              :amount="getCostPrice(item)"
-              :always-show-fraction="true"
-              :currency="currency"
-              fraction="2"
-              :show-abbreviation="false"
-              suffix="/yr"
-            />
-          </div>
-          <div v-if="!isFree(item) || item.costPrice" class="tw-px-0 tw-mt-4 sm:tw-px-4 sm:tw-mt-0">
-            <Price
-              class="tw-font-bold"
-              :amount="getPrice(item)"
-              :always-show-fraction="true"
-              :currency="currency"
-              fraction="2"
-              :show-abbreviation="false"
-              suffix="/yr"
-            />
-          </div>
-        </div>
-        <Button
-          :label="getPurchaseLabel(item)"
-          class="c-sell-domain-name-list--button tw-flex tw-justify-end"
-          variant="outline-success"
-          @on-click="onBuyNowClick(item)"
-        />
-      </li>
-    </ul>
-    <Button
-      v-if="shouldShowLoadMoreDomainsButton"
-      :label="loadMoreDomainsButtonText"
-      class="tw-self-center"
-      variant="outline"
-      @on-click="$emit('load-more-domains')"
-    />
-  </div>
-</template>
-<script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-import Price from '../../../../src/atoms/components/Price/Price.vue';
-
-import Events from '../../constants/event-constants';
-
-export default {
-  components: {
-    Button,
-    Price,
-  },
-  props: {
-    domainNameItems: {
-      type: Array,
-      required: true,
-    },
-    currency: {
-      type: Object,
-      required: true,
-    },
-    hasBorderBoxListStyling: {
-      type: Boolean,
-      default: false,
-    },
-    isUserAuthenticated: {
-      type: Boolean,
-      default: true,
-    },
-    isDesignCom: {
-      type: Boolean,
-      default: false,
-    },
-    shouldShowLoadMoreDomainsButton: {
-      type: Boolean,
-      default: false,
-    },
-    loadMoreDomainsButtonText: {
-      type: String,
-      default: 'Load more domains',
-    },
-    domainSearchLocation: {
-      type: String,
-      default: undefined,
-    },
-  },
-  emits: ['load-more-domains'],
-  methods: {
-    onBuyNowClick(domain) {
-      const request = domain;
-      if (typeof this.domainSearchLocation !== 'undefined') {
-        request.domainSearchLocation = this.domainSearchLocation;
-      }
-      window.dispatchEvent(
-        new CustomEvent(Events.DomainSelectedEvent, {
-          detail: request,
-        }),
-      );
-      if (this.isUserAuthenticated) {
-        window.location.href = domain.checkoutUrl;
-      }
-    },
-    getPrice(domain) {
-      return domain.price / (domain.recurringYears ?? 1);
-    },
-    getCostPrice(domain) {
-      return domain.costPrice / (domain.recurringYears ?? 1);
-    },
-    isFree(domain) {
-      return parseFloat(domain.price) === 0;
-    },
-    getPurchaseLabel(domain) {
-      return this.isFree(domain) ? 'Free Domain' : 'Buy Now';
-    },
-  },
-};
-</script>
-<style scoped>
-:deep(.c-sell-domain-name-list--button) {
-  min-width: 7rem;
-}
-</style>
+<template>
+  <div class="tw-flex tw-w-full tw-flex-col">
+    <ul :class="{ 'tw-ml-4': !hasBorderBoxListStyling }">
+      <li
+        v-for="(item, idx) in domainNameItems"
+        :key="`${item.domainName}-${idx}`"
+        class="tw-flex tw-w-full tw-items-center tw-border-grayscale-500"
+        :class="{
+          'tw-py-3': !hasBorderBoxListStyling,
+          'tw-border-solid tw-border-0 tw-border-t': idx > 0 && !hasBorderBoxListStyling,
+          'tw-border tw-bg-white tw-my-4 tw-py-5 tw-px-4 tw-drop-shadow-sm': hasBorderBoxListStyling,
+          'tw-rounded': isDesignCom && hasBorderBoxListStyling,
+        }"
+      >
+        <div class="tw-grow tw-flex tw-flex-col sm:tw-flex-row tw-justify-start">
+          <div
+            :class="{
+              'tw-text-lg': hasBorderBoxListStyling,
+            }"
+            class="tw-grow tw-font-bold tw-break-all"
+          >
+            {{ item.domainName }}
+          </div>
+          <div v-if="item.costPrice" class="tw-text-xs tw-text-grayscale-600 tw-flex tw-items-center">
+            <span class="tw-mr-2"> Cost Price: </span>
+            <Price
+              class="tw-font-bold"
+              :amount="getCostPrice(item)"
+              :always-show-fraction="true"
+              :currency="currency"
+              fraction="2"
+              :show-abbreviation="false"
+              suffix="/yr"
+            />
+          </div>
+          <div v-if="!isFree(item) || item.costPrice" class="tw-px-0 tw-mt-4 sm:tw-px-4 sm:tw-mt-0">
+            <Price
+              class="tw-font-bold"
+              :amount="getPrice(item)"
+              :always-show-fraction="true"
+              :currency="currency"
+              fraction="2"
+              :show-abbreviation="false"
+              suffix="/yr"
+            />
+          </div>
+        </div>
+        <Button
+          :label="getPurchaseLabel(item)"
+          class="c-sell-domain-name-list--button tw-flex tw-justify-end"
+          variant="outline-success"
+          @on-click="onBuyNowClick(item)"
+        />
+      </li>
+    </ul>
+    <Button
+      v-if="shouldShowLoadMoreDomainsButton"
+      :label="loadMoreDomainsButtonText"
+      class="tw-self-center"
+      variant="outline"
+      @on-click="$emit('load-more-domains')"
+    />
+  </div>
+</template>
+<script>
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Price from '../../../../src/atoms/components/Price/Price.vue';
+
+import Events from '../../constants/event-constants';
+
+export default {
+  components: {
+    Button,
+    Price,
+  },
+  props: {
+    domainNameItems: {
+      type: Array,
+      required: true,
+    },
+    currency: {
+      type: Object,
+      required: true,
+    },
+    hasBorderBoxListStyling: {
+      type: Boolean,
+      default: false,
+    },
+    isUserAuthenticated: {
+      type: Boolean,
+      default: true,
+    },
+    isDesignCom: {
+      type: Boolean,
+      default: false,
+    },
+    shouldShowLoadMoreDomainsButton: {
+      type: Boolean,
+      default: false,
+    },
+    loadMoreDomainsButtonText: {
+      type: String,
+      default: 'Load more domains',
+    },
+    domainSearchLocation: {
+      type: String,
+      default: undefined,
+    },
+  },
+  emits: ['load-more-domains'],
+  methods: {
+    onBuyNowClick(domain) {
+      const request = domain;
+      if (typeof this.domainSearchLocation !== 'undefined') {
+        request.domainSearchLocation = this.domainSearchLocation;
+      }
+      window.dispatchEvent(
+        new CustomEvent(Events.DomainSelectedEvent, {
+          detail: request,
+        }),
+      );
+      if (this.isUserAuthenticated) {
+        window.location.href = domain.checkoutUrl;
+      }
+    },
+    getPrice(domain) {
+      return domain.price / (domain.recurringYears ?? 1);
+    },
+    getCostPrice(domain) {
+      return domain.costPrice / (domain.recurringYears ?? 1);
+    },
+    isFree(domain) {
+      return parseFloat(domain.price) === 0;
+    },
+    getPurchaseLabel(domain) {
+      return this.isFree(domain) ? 'Free Domain' : 'Buy Now';
+    },
+  },
+};
+</script>
+<style scoped>
+:deep(.c-sell-domain-name-list--button) {
+  min-width: 7rem;
+}
+</style>

package/src/experiences/components/SellDomainNameListModal/SellDomainNameListModal.stories.js

@@ -1,74 +1,74 @@
-import { domainNamesFixture } from '../SellDomainNameList/SellDomainNameList.fixtures';
-import SellDomainNameListModal from './SellDomainNameListModal.vue';
-
-export default {
-  title: 'Components/SellDomainNameListModal',
-  component: SellDomainNameListModal,
-};
-
-export const Sample = () => {
-  return {
-    components: {
-      SellDomainNameListModal,
-    },
-    data() {
-      return {
-        domainNamesFixture,
-        isBusy: false,
-        currency: {
-          id: 1,
-          name: 'United State Dollars',
-          iso4127Code: 'USD',
-          symbol: '$',
-          abbreviation: 'US',
-        },
-      };
-    },
-    methods: {
-      onSearch(payload) {
-        console.log('onSearch', payload);
-        this.isBusy = true;
-
-        setTimeout(() => {
-          this.isBusy = false;
-        }, 1000);
-      },
-    },
-    template: `
-        <div>
-          <SellDomainNameListModal :visible="true" :currency="currency" :domain-name-items="domainNamesFixture" :is-busy="isBusy" @search="onSearch"/>
-        </div>
-      `,
-  };
-};
-
-export const SampleLoading = () => {
-  return {
-    components: {
-      SellDomainNameListModal,
-    },
-    data() {
-      return {
-        domainNamesFixture,
-        isBusy: true,
-        currency: {
-          id: 1,
-          name: 'United State Dollars',
-          iso4127Code: 'USD',
-          symbol: '$',
-          abbreviation: 'US',
-        },
-      };
-    },
-    methods: {
-      onSearch(payload) {
-        console.log(`onSearch: ignored ${payload}`);
-      },
-    },
-    template: `
-        <div>
-          <SellDomainNameListModal :visible="true" :currency="currency" :domain-name-items="domainNamesFixture" :is-busy="isBusy" @search="onSearch"/>
-        </div>
-      `,
-  };
-};
+import { domainNamesFixture } from '../SellDomainNameList/SellDomainNameList.fixtures';
+import SellDomainNameListModal from './SellDomainNameListModal.vue';
+
+export default {
+  title: 'Components/SellDomainNameListModal',
+  component: SellDomainNameListModal,
+};
+
+export const Sample = () => {
+  return {
+    components: {
+      SellDomainNameListModal,
+    },
+    data() {
+      return {
+        domainNamesFixture,
+        isBusy: false,
+        currency: {
+          id: 1,
+          name: 'United State Dollars',
+          iso4127Code: 'USD',
+          symbol: '$',
+          abbreviation: 'US',
+        },
+      };
+    },
+    methods: {
+      onSearch(payload) {
+        console.log('onSearch', payload);
+        this.isBusy = true;
+
+        setTimeout(() => {
+          this.isBusy = false;
+        }, 1000);
+      },
+    },
+    template: `
+        <div>
+          <SellDomainNameListModal :visible="true" :currency="currency" :domain-name-items="domainNamesFixture" :is-busy="isBusy" @search="onSearch"/>
+        </div>
+      `,
+  };
+};
+
+export const SampleLoading = () => {
+  return {
+    components: {
+      SellDomainNameListModal,
+    },
+    data() {
+      return {
+        domainNamesFixture,
+        isBusy: true,
+        currency: {
+          id: 1,
+          name: 'United State Dollars',
+          iso4127Code: 'USD',
+          symbol: '$',
+          abbreviation: 'US',
+        },
+      };
+    },
+    methods: {
+      onSearch(payload) {
+        console.log(`onSearch: ignored ${payload}`);
+      },
+    },
+    template: `
+        <div>
+          <SellDomainNameListModal :visible="true" :currency="currency" :domain-name-items="domainNamesFixture" :is-busy="isBusy" @search="onSearch"/>
+        </div>
+      `,
+  };
+};