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

package/src/atoms/components/PromoCard/PromoCard.vue

@@ -1,83 +1,83 @@
-<template>
-  <div class="tw-flex" :class="shouldShowImageOnTop ? 'tw-flex-col' : 'tw-flex-row'">
-    <div
-      class="tw-flex tw-justify-center tw-items-center tw-bg-grayscale-400 tw-w-60 tw-p-1 dcom-rounded-tl dcom-rounded-bl"
-      :class="{
-        'tw-w-full tw-px-8 md:tw-px-12 lg:tw-px-20 tw-py-4': shouldShowImageOnTop,
-        'tw-px-4': !shouldShowImageOnTop,
-      }"
-    >
-      <img class="tw-w-full" :src="imageUrl" :alt="altText" />
-    </div>
-    <div
-      class="tw-flex tw-bg-white tw-w-full tw-p-4 tw-grow dcom-rounded-tr dcom-rounded-br tw-flex-col tw-justify-between"
-      :class="{
-        'sm:tw-flex-row sm:tw-items-center': horizontalLayout,
-      }"
-    >
-      <div class="tw-text-left tw-overflow-hidden tw-text-ellipsis tw-text-base" :class="lineClampStyle">
-        <div class="tw-font-bold tw-text-black tw-mb-0.5">
-          {{ title }}
-        </div>
-        <p>
-          {{ description }}
-        </p>
-      </div>
-      <Button
-        variant="primary"
-        size="small"
-        :full-width="fullwidthButton"
-        class="tw-text-left tw-mt-4"
-        :class="horizontalLayout ? 'tw-w-full tw-mr-2 sm:tw-mt-0 sm:tw-ml-2 sm:tw-w-auto' : ''"
-        :label="buttonLabel"
-        @on-click="buttonClicked"
-      />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { computed, defineEmits } from 'vue';
-import { BREAKPOINTS } from '../../../experiences/mixins/mediaQueryMixin';
-import Button from '../Button/Button.vue';
-
-const props = defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  imageUrl: { type: String, required: true },
-  altText: { type: String, default: '' },
-  buttonLabel: {
-    type: String,
-    required: true,
-  },
-  horizontalLayout: {
-    type: Boolean,
-    default: false,
-  },
-  shouldShowImageOnTop: {
-    type: Boolean,
-    default: false,
-  },
-  textLineClamp: {
-    type: Number,
-    default: 0, // 0 is infinite
-  },
-});
-
-const emits = defineEmits(['button-clicked']);
-const buttonClicked = () => emits('button-clicked');
-
-const lineClampStyle = computed(() => {
-  if (props.textLineClamp > 0) {
-    return `tw-line-clamp-${props.textLineClamp}`;
-  }
-  return 'tw-line-clamp-none';
-});
-
-const fullwidthButton = computed(() => !(props.horizontalLayout && window.innerWidth >= BREAKPOINTS.SMALL));
-</script>
+<template>
+  <div class="tw-flex" :class="shouldShowImageOnTop ? 'tw-flex-col' : 'tw-flex-row'">
+    <div
+      class="tw-flex tw-justify-center tw-items-center tw-bg-grayscale-400 tw-w-60 tw-p-1 dcom-rounded-tl dcom-rounded-bl"
+      :class="{
+        'tw-w-full tw-px-8 md:tw-px-12 lg:tw-px-20 tw-py-4': shouldShowImageOnTop,
+        'tw-px-4': !shouldShowImageOnTop,
+      }"
+    >
+      <img class="tw-w-full" :src="imageUrl" :alt="altText" />
+    </div>
+    <div
+      class="tw-flex tw-bg-white tw-w-full tw-p-4 tw-grow dcom-rounded-tr dcom-rounded-br tw-flex-col tw-justify-between"
+      :class="{
+        'sm:tw-flex-row sm:tw-items-center': horizontalLayout,
+      }"
+    >
+      <div class="tw-text-left tw-overflow-hidden tw-text-ellipsis tw-text-base" :class="lineClampStyle">
+        <div class="tw-font-bold tw-text-black tw-mb-0.5">
+          {{ title }}
+        </div>
+        <p>
+          {{ description }}
+        </p>
+      </div>
+      <Button
+        variant="primary"
+        size="small"
+        :full-width="fullwidthButton"
+        class="tw-text-left tw-mt-4"
+        :class="horizontalLayout ? 'tw-w-full tw-mr-2 sm:tw-mt-0 sm:tw-ml-2 sm:tw-w-auto' : ''"
+        :label="buttonLabel"
+        @on-click="buttonClicked"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, defineEmits } from 'vue';
+import { BREAKPOINTS } from '../../../experiences/mixins/mediaQueryMixin';
+import Button from '../Button/Button.vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  imageUrl: { type: String, required: true },
+  altText: { type: String, default: '' },
+  buttonLabel: {
+    type: String,
+    required: true,
+  },
+  horizontalLayout: {
+    type: Boolean,
+    default: false,
+  },
+  shouldShowImageOnTop: {
+    type: Boolean,
+    default: false,
+  },
+  textLineClamp: {
+    type: Number,
+    default: 0, // 0 is infinite
+  },
+});
+
+const emits = defineEmits(['button-clicked']);
+const buttonClicked = () => emits('button-clicked');
+
+const lineClampStyle = computed(() => {
+  if (props.textLineClamp > 0) {
+    return `tw-line-clamp-${props.textLineClamp}`;
+  }
+  return 'tw-line-clamp-none';
+});
+
+const fullwidthButton = computed(() => !(props.horizontalLayout && window.innerWidth >= BREAKPOINTS.SMALL));
+</script>

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

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

@@ -1,51 +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>
+<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

@@ -1,142 +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);
-      },
-    },
-  };
-};
+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);
+      },
+    },
+  };
+};