@designcrowd/fe-shared-lib 1.0.0-test-publish

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

@@ -0,0 +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>
+    `,
+  };
+};

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

@@ -0,0 +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>

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

@@ -0,0 +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];

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

@@ -0,0 +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',
+  },
+};

package/src/atoms/components/Price/Price.vue

@@ -0,0 +1,97 @@
+<template>
+  <span class="notranslate">
+    {{ optionalLeftParenthesis }}{{ currencyAbbreviation }}{{ currencySymbolBefore }}{{ amountFormatted
+    }}{{ currencySymbolAfter }}{{ optionalRightParenthesis }}{{ suffix }}
+  </span>
+</template>
+<script>
+export default {
+  props: {
+    amount: {
+      type: [Number, String],
+      required: false,
+      default: null,
+    },
+    alwaysShowFraction: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    currency: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    fraction: {
+      type: [Number, String],
+      required: false,
+      default: 0,
+    },
+    showAbbreviation: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    wrapInParentheses: {
+      type: Boolean,
+      requred: false,
+      default: false,
+    },
+    suffix: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    amountFormatted() {
+      if (!this.amount || this.amount === 0) {
+        return 'Free';
+      }
+
+      const parsedAmount = Number.parseFloat(this.amount);
+
+      if (Number.isNaN(parsedAmount)) {
+        return this.amount;
+      }
+
+      const hasFraction = parsedAmount % 1 !== 0;
+
+      if (!hasFraction && !this.alwaysShowFraction) {
+        return parsedAmount.toFixed(0);
+      }
+
+      return parsedAmount.toFixed(this.fraction);
+    },
+    currencyAbbreviation() {
+      return this.showAbbreviation && this.amount > 0 ? this.currency?.abbreviation?.trim() : '';
+    },
+    currencySymbol() {
+      if (!this.amount || this.amount === 0) {
+        return '';
+      }
+
+      return this.currency?.symbol?.trim() ?? '$';
+    },
+    isSymbolPlacedBeforePrice() {
+      if (this.currency?.isSymbolPlacedBeforePrice == null) {
+        return true;
+      }
+
+      return this.currency?.isSymbolPlacedBeforePrice === true;
+    },
+    currencySymbolBefore() {
+      return this.isSymbolPlacedBeforePrice ? this.currencySymbol : '';
+    },
+    currencySymbolAfter() {
+      return this.isSymbolPlacedBeforePrice ? '' : this.currencySymbol;
+    },
+    optionalLeftParenthesis() {
+      return this.wrapInParentheses ? '(' : '';
+    },
+    optionalRightParenthesis() {
+      return this.wrapInParentheses ? ')' : '';
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,21 @@
+import SearchBar from './SearchBar.vue';
+
+export default {
+  title: 'Components/Search Bar',
+  component: SearchBar,
+};
+
+export const Sample = () => {
+  return {
+    components: {
+      SearchBar,
+    },
+    template: `
+      <SearchBar label="Search" placeholder="Business name"/>
+    `,
+  };
+};
+
+Sample.story = {
+  name: 'SearchBar',
+};

package/src/atoms/components/SearchBar/SearchBar.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="tw-flex">
+    <input
+      type="text"
+      :placeholder="placeholder"
+      :disabled="searchInputDisabled"
+      style="padding-top: 9px; padding-bottom: 9px"
+      class="tw-grow tw-rounded tw-bg-white tw-border-grayscale-500 !tw-rounded-r-none"
+    />
+    <div>
+      <ButtonPrimary
+        class="tw-flex-none tw-p-1"
+        :rounded-left="false"
+        :rounded="false"
+        :rounded-right="true"
+        :on-click="onClick"
+      >
+        {{ label }}
+      </ButtonPrimary>
+    </div>
+  </div>
+</template>
+<script>
+import ButtonPrimary from '../Button/variants/ButtonPrimary.vue';
+
+export default {
+  components: {
+    ButtonPrimary,
+  },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+      required: true,
+    },
+    searchInputDisabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,142 @@
+import Select from './Select.vue';
+
+export default {
+  title: 'Components/Select',
+  component: Select,
+  args: {
+    isLoading: false,
+    isSearchable: true,
+    shouldAllowCustom: true,
+    shouldCloseOnSelect: true,
+    isDisabled: false,
+    deselectLabel: undefined,
+    selectLabel: undefined,
+    customPosition: undefined,
+    optionHeight: undefined,
+    shouldHideSelected: undefined,
+    shouldShowPointer: undefined,
+    shouldPreserveSearch: undefined,
+    optionsLimit: undefined,
+    openDirection: undefined,
+    maxHeight: undefined,
+    customPlaceholder: undefined,
+    id: undefined,
+    shouldPreselectFirst: undefined,
+    shouldPreventAutofocus: undefined,
+    name: undefined,
+    shouldShowLabels: undefined,
+    customLabel: undefined,
+    isInternalSearch: undefined,
+    label: undefined,
+    shouldAllowEmpty: undefined,
+    selectedLabel: undefined,
+    shouldPreventAutoFocus: undefined,
+    shouldResetAfter: undefined,
+    shouldShowNoResults: undefined,
+    options: [
+      'Luke Skywalker',
+      'Princess Leia Organa',
+      'Han Solo',
+      'Darth Vader',
+      'Obi-Wan Kenobi',
+      'Yoda',
+      'Chewbacca',
+      'R2-D2',
+      'C-3PO',
+      'Emperor Palpatine',
+    ],
+  },
+  argTypes: {
+    customPosition: {
+      type: 'string',
+      control: {
+        type: 'select',
+        options: ['top', 'bottom'],
+      },
+    },
+    openDirection: {
+      type: 'string',
+      control: {
+        type: 'select',
+        options: ['top', 'bottom'],
+      },
+    },
+  },
+};
+
+export const Basic = (args, { argTypes }) => {
+  return {
+    components: {
+      Select,
+    },
+    props: Object.keys(argTypes),
+    setup() {
+      return { args };
+    },
+    data: () => ({
+      internalValue: '',
+    }),
+    watch: {
+      value(v) {
+        this.internalValue = v;
+      },
+    },
+    template: `
+          <Select
+              v-model="internalValue"
+              v-bind="args"
+              @custom="add"
+          />
+        `,
+    methods: {
+      add(value) {
+        this.internalValue = value;
+        this.args.options.push(value);
+      },
+    },
+  };
+};
+
+export const CustomOptionValues = (args, { argTypes }) => {
+  return {
+    components: {
+      Select,
+    },
+    props: Object.keys(argTypes),
+    setup() {
+      return { args };
+    },
+    data: () => ({
+      internalValue: '',
+    }),
+    watch: {
+      value(v) {
+        this.internalValue = v;
+      },
+    },
+    template: `
+          <Select
+              v-model="internalValue"
+              v-bind="args"
+              @custom="add"
+          >
+            <template v-slot:label="{option}">
+              <div class="tw-m-1 tw-bg-info-300">
+                {{ option }}
+              </div>
+            </template>
+            <template v-slot:option="{option}">
+              <div class="tw-italic tw-text-success-500">
+                {{ option }}
+              </div>
+            </template>
+          </Select>
+        `,
+    methods: {
+      add(value) {
+        this.internalValue = value;
+        this.args.options.push(value);
+      },
+    },
+  };
+};