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

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

@@ -0,0 +1,174 @@
+import { defineComponent } from 'vue';
+import Notice from './Notice.vue';
+import Button from '../Button/Button.vue';
+
+export default {
+  title: 'Components/Notice',
+  component: Notice,
+};
+
+const generateNoticeVariant = (direction, isVisibleProp, onClick) => {
+  return {
+    notice: {
+      direction,
+      isVisible: isVisibleProp,
+    },
+    button: {
+      label: 'Click me',
+      variant: 'primary',
+      size: 'small-wide',
+      onClick,
+    },
+  };
+};
+
+const StorybookNoticeBodyComponent = defineComponent('StorybookNoticeBody', {
+  components: {
+    Button,
+  },
+  template: `
+    <div class="tw-p-4">
+      <input type="text" class="tw-mb-2" />
+      <Button
+        label="Submit"
+        variant="primary"
+        size="small-wide"
+        :full-width="true"
+      />
+    </div>
+  `,
+});
+
+export const Sample = () => {
+  return {
+    components: { Notice, Button, StorybookNoticeBodyComponent },
+    data() {
+      return {
+        isTopNoticeVisible: false,
+        isRightNoticeVisible: false,
+        isBottomNoticeVisible: false,
+        isLeftNoticeVisible: false,
+        directions: ['Top', 'Right', 'Bottom', 'Left'],
+      };
+    },
+    computed: {
+      onClickFunctions() {
+        return {
+          top: () => {
+            this.isTopNoticeVisible = !this.isTopNoticeVisible;
+          },
+          right: () => {
+            this.isRightNoticeVisible = !this.isRightNoticeVisible;
+          },
+          bottom: () => {
+            this.isBottomNoticeVisible = !this.isBottomNoticeVisible;
+          },
+          left: () => {
+            this.isLeftNoticeVisible = !this.isLeftNoticeVisible;
+          },
+        };
+      },
+      variants() {
+        return this.directions.map((direction) => {
+          const directionLowerCase = direction.toLowerCase();
+          return generateNoticeVariant(
+            directionLowerCase,
+            this[`is${direction}NoticeVisible`],
+            this.onClickFunctions[directionLowerCase],
+          );
+        });
+      },
+    },
+    template: `
+      <div class="tw-flex tw-justify-center tw-mt-40">
+        <div class="tw-container tw-max-w-300">
+          <table class="tw-w-full">
+            <thead>
+            <tr>
+              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Notice</th>
+              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+            </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(variant, index) in variants"
+                :key="index"
+                class="tw-bg-grayscale-200"
+              >
+                <td class="tw-p-4">
+                  <Notice
+                    :direction="variant.notice.direction"
+                    :is-visible="variant.notice.isVisible"
+                  >
+                    <template #target>
+                      <Button
+                        :label="variant.button.label"
+                        :variant="variant.button.variant"
+                        :size="variant.button.size"
+                        @on-click="variant.button.onClick"
+                      />
+                    </template>
+                    <template #body>
+                      <StorybookNoticeBodyComponent />
+                    </template>
+                  </Notice>
+                </td>
+                <td class="tw-p-4">
+                  <code
+                    class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900"
+                  >
+                    &lt;Notice direction="{{ variant.notice.direction }}" is-visible="{{ variant.notice.isVisible }}"&gt;
+
+                    &lt;template #target&gt;...&lt;/template&gt;
+
+                    &lt;template #body&gt;...&lt;/template&gt;
+                    &lt;/Notice&gt;
+                  </code>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    `,
+  };
+};
+
+export const Mobile = () => {
+  return {
+    components: { Notice, Button },
+    data() {
+      return {
+        isNoticeVisible: false,
+      };
+    },
+    template: `
+      <Notice
+        direction="bottom"
+        :is-visible="isNoticeVisible"
+        size="md"
+      >
+        <template #target>
+          <Button
+            :full-width="true"
+            label="Click me"
+            variant="primary"
+            size="small-wide"
+            @on-click="isNoticeVisible = !isNoticeVisible"
+          />
+        </template>
+        <template #body>
+          <div class="tw-p-4">
+            <input type="text" class="tw-mb-2 tw-w-full" />
+            <Button
+              label="Submit"
+              variant="primary"
+              size="small-wide"
+              :full-width="true"
+            />
+          </div>
+        </template>
+      </Notice>
+    `,
+  };
+};

package/src/atoms/components/Notice/Notice.vue

@@ -0,0 +1,71 @@
+<template>
+  <div
+    :class="{
+      'tw-relative tw-inline-flex tw-flex-col sm:tw-flex-row tw-w-full sm:tw-w-auto': true,
+      'tw-justify-center': alignment === 'center',
+      'tw-justify-end': alignment === 'right',
+      'tw-justify-start': alignment === 'left',
+    }"
+  >
+    <slot name="target"></slot>
+    <div
+      :class="{
+        'sm:tw-absolute tw-static tw-w-full tw-z-10 tw-border tw-border-solid tw-border-grayscale-500 tw-rounded tw-bg-white tw-top-full tw-mt-4': true,
+        'sm:tw-top-auto sm:tw-mt-0': direction !== 'bottom',
+        'sm:tw-bottom-full sm:tw-mb-4': direction === 'top',
+        'sm:tw-left-full sm:tw-ml-4': direction === 'right',
+        'sm:tw-right-full sm:tw-mr-4': direction === 'left',
+        'tw-right-0': alignment === 'right',
+        'tw-left-0': alignment === 'left',
+        'sm:tw-w-64': size === 'sm',
+        'sm:tw-w-72': size === 'md',
+        'sm:tw-w-96': size === 'lg',
+        'tw-hidden': !isVisible,
+      }"
+    >
+      <slot name="body"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    // Color can be primary (blue), secondary (dark gray), warning (yellow), alert (red)
+    // or success (green)
+    color: {
+      type: String,
+      required: false,
+      default: 'primary',
+    },
+    // The placement of the tooltip. Can be top, right, bottom, top right, top left, bottom right or bottom left
+    direction: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+    alignment: {
+      type: String,
+      required: false,
+      default: 'left',
+    },
+    size: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    // Whether the notice can be dismissed or not
+    closable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    // Whether the notice tooltip should be visible or not
+    isVisible: {
+      type: Boolean,
+      required: false,
+      default: undefined,
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,47 @@
+import NumberStepper from './NumberStepper.vue';
+import Button from '../Button/Button.vue';
+
+export default {
+  title: 'Components/Number Stepper',
+  component: NumberStepper,
+};
+
+const data = {
+  components: {
+    NumberStepper,
+    Button,
+  },
+  data() {
+    return {
+      numberValue: 20,
+    };
+  },
+};
+
+export const Primary = () => {
+  return {
+    ...data,
+    template: `
+      <div>
+        <div>Full width min 18 max 25</div>
+        <NumberStepper v-model="numberValue" id="id1" :min="18" :max="25" :disabled="false" />
+        <div class="tw-mt-4 tw-w-64">
+          <div>Fixed container width</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
+        </div>
+        <div class="tw-mt-4 tw-w-64">
+          <div>Disabled</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="true" />
+        </div>
+        <div class="tw-mt-4 tw-w-64">
+          <div>Normal size</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
+        </div>
+        <div class="tw-mt-4 tw-w-64">
+          <div>Bigger size</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
+        </div>
+      </div>
+    `,
+  };
+};

package/src/atoms/components/NumberStepper/NumberStepper.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="tw-flex tw-items-stretch">
+    <Button
+      variant="flat"
+      icon="minus"
+      :icon-size="buttonIconSize"
+      class="tw-rounded-r-none"
+      :classes="buttonStyle"
+      :rounded="false"
+      :rounded-left="true"
+      :disabled="disabled"
+      @mousedown.left="onMouseDown('down')"
+      @mousedown.right="clearLongPressTimers"
+      @mousedown.middle="clearLongPressTimers"
+      @mouseup="clearLongPressTimers"
+      @mouseleave="clearLongPressTimers"
+      @touchstart="onMouseDown('down')"
+      @touchend="clearLongPressTimers($event)"
+      @touchcancel="clearLongPressTimers($event)"
+    />
+    <input
+      :ref="numberStepperRef"
+      class="tw-w-full tw-text-center tw-border tw-border-solid tw-border-secondary-200"
+      type="text"
+      :value="number"
+      pattern="[0-9]"
+      :disabled="disabled"
+      @wheel="onMouseWheel"
+      @input.stop="onInput"
+      @keyup="clearLongPressTimers"
+      @keydown.up="onArrowDown('up')"
+      @keydown.down="onArrowDown('down')"
+      @focus="$emit(FOCUSED_EVENT)"
+      @blur="$emit(BLUR_EVENT)"
+    />
+    <Button
+      variant="flat"
+      :rounded="false"
+      :rounded-right="true"
+      icon="plus"
+      :icon-size="buttonIconSize"
+      class="tw-rounded-l-none"
+      :classes="buttonStyle"
+      :disabled="disabled"
+      @mousedown.left="onMouseDown('up')"
+      @mousedown.right="clearLongPressTimers"
+      @mousedown.middle="clearLongPressTimers"
+      @mouseup="clearLongPressTimers"
+      @mouseleave="clearLongPressTimers"
+      @touchstart="onMouseDown('up')"
+      @touchend="clearLongPressTimers($event)"
+      @touchcancel="clearLongPressTimers($event)"
+    />
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import Button from '../Button/Button.vue';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    // The value returned when a variable is assigned to v-model
+    id: {
+      type: String,
+      default: () => '1',
+    },
+    modelValue: {
+      type: Number,
+      default: undefined,
+    },
+    min: {
+      type: Number,
+      default: 1,
+    },
+    max: {
+      type: Number,
+      default: undefined,
+    },
+    dataAttribute: {
+      type: String,
+      default: null,
+    },
+    // Flag that determines if the input is disabled or not
+    disabled: {
+      type: Boolean,
+      default: undefined,
+    },
+    size: {
+      type: String,
+      default: 'medium',
+    },
+  },
+  setup(props) {
+    const numberStepperRef = `js-number-stepper-${props.id}`;
+    return { numberStepperRef, [numberStepperRef]: ref(null) };
+  },
+  data() {
+    return {
+      num: null,
+      longPress: null,
+      longPressTimeout: null,
+      longPressInterval: null,
+    };
+  },
+  computed: {
+    buttonStyle() {
+      let style = '';
+      if (this.size === 'medium') {
+        style = '!tw-p-4';
+      }
+      return style;
+    },
+    buttonIconSize() {
+      let size = 'xs';
+      if (this.size === 'medium') {
+        size = 'sm';
+      }
+      return size;
+    },
+    number: {
+      get() {
+        return parseInt(this.num, 10);
+      },
+      set(val) {
+        this.num = val;
+      },
+    },
+  },
+  watch: {
+    modelValue(val) {
+      this.number = val;
+    },
+  },
+  created() {
+    this.LONG_PRESS_DELAY = 1000;
+    this.LONG_PRESS_INTERVAL_DELAY = 100;
+    this.LONG_PRESS_AMOUNT = 5;
+    this.FOCUSED_EVENT = 'focus';
+    this.BLUR_EVENT = 'blur';
+  },
+  mounted() {
+    this.number = this.modelValue;
+    this.addDataAttribute();
+  },
+  beforeUnmount() {
+    this.clearLongPressTimers();
+  },
+  methods: {
+    addDataAttribute() {
+      if (this.dataAttribute) {
+        const inputEl = this.$refs[this.numberStepperRef];
+        inputEl.setAttribute(this.dataAttribute, '');
+      }
+    },
+    changeNumber(direction, value) {
+      if (!this.disabled) {
+        if (direction === 'up') {
+          this.increment(value);
+        } else {
+          this.decrement(value);
+        }
+      }
+    },
+    increment(val) {
+      const value = typeof val === 'number' ? val : 1;
+      if (!this.max || (this.max && this.number + value <= this.max)) {
+        this.number += value;
+      }
+
+      if (this.max && this.number + value > this.max) {
+        this.number = this.max;
+      }
+
+      this.$emit('update:modelValue', this.number);
+      this.$emit('input', this.number);
+    },
+    decrement(val) {
+      const value = typeof val === 'number' ? val : 1;
+
+      if (this.number - value >= this.min) {
+        this.number -= value;
+      } else {
+        this.number = this.min;
+      }
+
+      this.$emit('update:modelValue', this.number);
+      this.$emit('input', this.number);
+    },
+    onMouseWheel(e) {
+      if (!this.disabled) {
+        e.preventDefault();
+
+        if (e.deltaY < 0) {
+          this.increment();
+        } else {
+          this.decrement();
+        }
+      }
+    },
+    onMouseDown(direction) {
+      if (!this.disabled) {
+        const vm = this;
+        let longPressValue = 1;
+
+        vm.changeNumber(direction);
+
+        vm.longPressInterval = setInterval(() => {
+          vm.changeNumber(direction, longPressValue);
+        }, vm.LONG_PRESS_INTERVAL_DELAY);
+
+        vm.longPressTimeout = setTimeout(() => {
+          longPressValue = vm.LONG_PRESS_AMOUNT;
+        }, vm.LONG_PRESS_DELAY);
+      }
+    },
+    clearLongPressTimers(e) {
+      // eslint-disable-next-line no-unused-expressions
+      e && e.preventDefault();
+      clearTimeout(this.longPressTimeout);
+      clearInterval(this.longPressInterval);
+      this.longPressTimeout = null;
+      this.longPressInterval = null;
+      this.longPress = false;
+    },
+    onArrowDown(direction) {
+      if (!this.disabled) {
+        const vm = this;
+
+        if (vm.longPress) {
+          vm.changeNumber(direction, vm.LONG_PRESS_AMOUNT);
+        } else {
+          vm.changeNumber(direction);
+        }
+
+        if (!vm.longPressTimeout) {
+          vm.longPressTimeout = setTimeout(() => {
+            vm.longPress = true;
+          }, vm.LONG_PRESS_DELAY);
+        }
+      }
+    },
+    onInput(e) {
+      if (!this.disabled) {
+        const value = Math.round(parseFloat(e.target.value));
+        let newNumber = 0;
+
+        if (!/\D/.test(value) || !value) {
+          newNumber = value && value;
+        } else if (value.length >= this.number.toString().length) {
+          newNumber = value.slice(0, -1);
+        } else if (typeof size === 'string') {
+          // TODO: revist linting
+          // eslint-disable-next-line no-undef
+          const integer = Math.round(parseFloat(size));
+          newNumber = Number.isNaN(integer) ? this.number : integer;
+        }
+
+        if (value) {
+          if (value < this.min) {
+            newNumber = this.min;
+          }
+
+          if (this.max && value > this.max) {
+            newNumber = this.max;
+          }
+        } else {
+          newNumber = this.min;
+        }
+
+        this.number = newNumber;
+        e.target.value = newNumber;
+        this.$emit('update:modelValue', this.number);
+        this.$emit('input', this.number);
+      }
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,90 @@
+import Picture from './Picture.vue';
+import pictureFixtures from './picture.fixtures';
+
+export default {
+  title: 'Components/Picture',
+  component: Picture,
+};
+
+export const Standard = () => {
+  return {
+    components: {
+      Picture,
+    },
+    data() {
+      return {
+        picture: pictureFixtures.standard,
+      };
+    },
+    template: `
+      <Picture
+        :default-image-url="picture.defaultImageUrl"
+        :sources="picture.sources"
+        :alt="picture.alt"
+        data-attribute="data-test-preview"
+      />
+    `,
+  };
+};
+
+export const LogoSearchResultsGrid = () => {
+  return {
+    components: {
+      Picture,
+    },
+    data() {
+      return {
+        picture: pictureFixtures.logoSearchResultsGrid,
+      };
+    },
+    template: `
+      <div class="tw-container tw-max-w-300 tw-mx-auto tw-px-2 lg:tw-px-2.5 tw-mb-4">
+        <div class="tw-grid md:tw-grid-cols-3 tw-gap-5 tw-pt-8 tw-mb-12 lg:tw-grid-cols-4 tw-grid-cols-2 tw-px-2.5">
+          <div
+            v-for="index in 30"
+            :key="index"
+            class="tw-border tw-border-solid tw-border-grayscale-400"
+          >
+            <Picture
+              classes="tw-object-cover tw-w-full tw-object-top"
+              :default-image-url="picture.defaultImageUrl"
+              :sources="picture.sources"
+              :alt="picture.alt"
+            />
+          </div>
+        </div>
+      </div>
+    `,
+  };
+};
+
+export const DesignSearchResultsGrid = () => {
+  return {
+    components: {
+      Picture,
+    },
+    data() {
+      return {
+        picture: pictureFixtures.designSearchResultsGrid,
+      };
+    },
+    template: `
+      <div class="tw-container tw-max-w-300 tw-mx-auto tw-px-2 lg:tw-px-2.5 tw-mb-4">
+        <div class="tw-grid md:tw-grid-cols-3 tw-gap-5 tw-pt-8 tw-mb-12 lg:tw-grid-cols-3 tw-grid-cols-1 tw-px-2.5">
+          <div
+            v-for="index in 30"
+            :key="index"
+            class="tw-border tw-border-solid tw-border-grayscale-400"
+          >
+            <Picture
+              classes="tw-object-cover tw-w-full tw-object-top"
+              :default-image-url="picture.defaultImageUrl"
+              :sources="picture.sources"
+              :alt="picture.alt"
+            />
+          </div>
+        </div>
+      </div>
+    `,
+  };
+};