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

package/src/atoms/components/Carousel/carousel.stories.js

@@ -0,0 +1,261 @@
+import Carousel from './Carousel.vue';
+import Icon from '../Icon/Icon.vue';
+import { carouselProps, cards } from './Carousel.fixtures';
+
+export default {
+  title: 'Components/Carousel',
+  component: Carousel,
+};
+
+export const Sample = () => {
+  return {
+    components: { Carousel },
+    data() {
+      return {
+        carouselProps,
+        cards,
+      };
+    },
+    methods: {
+      alert(e) {
+        // eslint-disable-next-line no-alert
+        alert(`You have clicked the "${e.slide.name}" slide`);
+      },
+    },
+    template: `
+      <Carousel
+      class="tw-p-8"
+        :cards="cards"
+        :options="carouselProps"
+        :hide-bullets-on-mobile="false"
+        @on-slide-click="alert"
+      >
+        <template #slide="{ slide }">
+          <div class="tw-flex tw-flex-col tw-items-center tw-cursor-pointer">
+            <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full" width="100px" />
+              <span>{{ slide.name }}</span>
+          </div>
+        </template>
+      </Carousel>
+    `,
+  };
+};
+
+export const CarouselDotsHidden = () => {
+  return {
+    components: { Carousel },
+    data() {
+      return {
+        carouselProps,
+        cards,
+      };
+    },
+    methods: {
+      alert(e) {
+        // eslint-disable-next-line no-alert
+        alert(`You have clicked the "${e.slide.name}" slide`);
+      },
+    },
+    template: `
+      <Carousel
+        :cards="cards"
+        :show-bullets="false"
+        @on-slide-click="alert"
+      >
+        <template #slide="{ slide }">
+          <div class="tw-flex tw-flex-col tw-items-center tw-cursor-pointer">
+            <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full" />
+            <span>{{ slide.name }}</span>
+          </div>
+        </template>
+      </Carousel>
+    `,
+  };
+};
+
+export const CustomArrows = () => {
+  return {
+    components: { Carousel, Icon },
+    data() {
+      return {
+        carouselProps,
+        cards,
+      };
+    },
+    template: `
+      <Carousel :cards="cards">
+        <template #arrow-left>
+          <Icon classes="left-arrow tw--mb-1 tw-mr-4 tw-cursor-pointer tw-transform tw-rotate-180" name="maker-youtube" color="secondary-500" size="3xl" />
+        </template>
+        <template #slide="{ slide }">
+          <div class="tw-flex tw-flex-col tw-items-center">
+            <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full" />
+            <span>{{ slide.name }}</span>
+          </div>
+        </template>
+        <template #arrow-right>
+        <Icon classes="tw--mb-1 tw-ml-4 tw-cursor-pointer" name="maker-youtube" color="secondary-500" size="3xl" />
+        </template>
+      </Carousel>
+    `,
+  };
+};
+
+export const CustomOptions = () => {
+  return {
+    components: { Carousel, Icon },
+    data() {
+      return {
+        carouselProps,
+        cards,
+        options: {
+          loop: false,
+          breakpoints: {
+            1024: {
+              pagination: false,
+              slidesPerView: 4,
+              slidesPerGroup: 4,
+            },
+          },
+        },
+      };
+    },
+    template: `
+      <Carousel :cards="cards" :options="options">
+        <template #arrow-left>
+          <Icon classes="tw--mb-1 tw-ml-4 tw-cursor-pointer" name="chevron-left" size="4xl" />
+        </template>
+        <template #slide="{ slide }">
+          <div class="tw-flex tw-flex-col tw-items-center">
+            <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full" />
+            <span>{{ slide.name }}</span>
+          </div>
+        </template>
+        <template #arrow-right>
+          <Icon classes="tw--mb-1 tw-ml-4 tw-cursor-pointer" name="chevron-right" size="4xl" />
+        </template>
+      </Carousel>
+    `,
+  };
+};
+
+export const SampleMultiple = () => {
+  return {
+    components: { Carousel },
+    data() {
+      return {
+        carouselProps,
+        cards,
+        swiperOne: {
+          options: {
+            navigation: {
+              prevEl: `.carousel__button-prev--1`,
+              nextEl: `.carousel__button-next--1`,
+            },
+            pagination: {
+              el: `.pagination--1`,
+            },
+          },
+          navigationUniqueIndexer: '1',
+        },
+        swiperTwo: {
+          options: {
+            navigation: {
+              prevEl: `.carousel__button-prev--2`,
+              nextEl: `.carousel__button-next--2`,
+            },
+            pagination: {
+              el: `.pagination--2`,
+            },
+          },
+          navigationUniqueIndexer: '2',
+        },
+      };
+    },
+    methods: {
+      alert(slide) {
+        // eslint-disable-next-line no-alert
+        alert(`You have clicked the ${slide.name} slide`);
+      },
+    },
+    template: `
+      <div>
+        <h1 class="tw-w-full tw-text-center">Have a look at the configuration of this story if you need multiple carousels on the same page.</h1>
+        <div class="tw-flex tw-flex-col tw-justify-center tw-mx-8">
+          <div class="tw-w-full tw-flex tw-items-center tw-justify-center">
+            <div class="tw-w-1/2 md:tw-w-1/6">
+              <Carousel
+              :cards="cards"
+              :show-bullets="true"
+              :swiper-ref="swiperOne.navigationUniqueIndexer"
+              :navigation-unique-indexer="swiperOne.navigationUniqueIndexer"
+              :options="swiperOne.options"
+              @on-slide-click="alert"
+              >
+                <template #slide="{ slide }">
+                  <div class="tw-flex tw-flex-col tw-items-center tw-cursor-pointer">
+                    <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full" />
+                    <span>{{ slide.name }}</span>
+                  </div>
+                </template>
+              </Carousel>
+            </div>
+          </div>
+          <div class="tw-w-full tw-flex tw-items-center tw-justify-center">
+            <div class="tw-w-1/2 md:tw-w-1/6">
+              <Carousel
+              :cards="cards"
+              :show-bullets="true"
+              :swiper-ref="swiperTwo.navigationUniqueIndexer"
+              :navigation-unique-indexer="swiperTwo.navigationUniqueIndexer"
+              :options="swiperTwo.options"
+              @on-slide-click="alert"
+              >
+                <template #slide="{ slide }">
+                  <div class="tw-flex tw-flex-col tw-items-center tw-cursor-pointer">
+                    <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full" />
+                    <span>{{ slide.name }}</span>
+                  </div>
+                </template>
+              </Carousel>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  };
+};
+
+export const FreeMode = () => {
+  return {
+    components: { Carousel, Icon },
+    data() {
+      return {
+        carouselProps,
+        cards: [...cards, ...cards, ...cards],
+        options: {
+          loop: false,
+          spaceBetween: 30,
+          freeMode: true,
+          slidesPerView: 'auto',
+        },
+      };
+    },
+    template: `
+        <Carousel :cards="cards" :options="options">
+          <template #arrow-left>
+            <Icon classes="tw--mb-1 tw-ml-4 tw-cursor-pointer" name="chevron-left" size="4xl" />
+          </template>
+          <template #slide="{ slide }">
+            <div class="tw-flex tw-flex-col tw-items-center">
+              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-20" />
+              <span>{{ slide.name }}</span>
+            </div>
+          </template>
+          <template #arrow-right>
+            <Icon classes="tw--mb-1 tw-ml-4 tw-cursor-pointer" name="chevron-right" size="4xl" />
+          </template>
+        </Carousel>
+    `,
+  };
+};

package/src/atoms/components/Checkbox/Checkbox.mixin.js

@@ -0,0 +1,47 @@
+export default {
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: true,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    showLabelScreenReaderOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    inline: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    color: {
+      type: String,
+      required: false,
+      default: 'success', // success, info, error, warning
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'md', // sm, md
+    },
+  },
+};

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

@@ -0,0 +1,176 @@
+import Checkbox from './Checkbox.vue';
+
+export default {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+};
+
+export const Sample = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test" />
+    `,
+  };
+};
+
+export const Label = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test" label="Do you love checkboxes?" />
+    `,
+  };
+};
+
+export const LabelInline = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test" label="Do you love checkboxes?" :inline="true" />
+    `,
+  };
+};
+
+export const Required = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test" label="Do you love checkboxes?" :required="true" />
+    `,
+  };
+};
+
+export const Success = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test" color="success" />
+    `,
+  };
+};
+
+export const Error = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test" color="error" />
+    `,
+  };
+};
+
+export const Info = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test" color="info" />
+    `,
+  };
+};
+
+export const Warning = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test" color="warning" />
+    `,
+  };
+};
+
+export const Disabled = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test" :disabled="true" />
+    `,
+  };
+};
+
+export const Small = () => {
+  return {
+    components: {
+      Checkbox,
+    },
+
+    data() {
+      return {
+        checked: true,
+      };
+    },
+    template: `
+      <Checkbox v-model="checked" id="test" size="sm" />
+    `,
+  };
+};

package/src/atoms/components/Checkbox/Checkbox.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="tw-box-border"
+    :class="{
+      'tw-cursor-pointer tw-pointer-events-none tw-opacity-30': disabled,
+    }"
+  >
+    <label
+      :for="`scl-input-${id}`"
+      class="tw-cursor-pointer"
+      :class="{
+        'tw-flex tw-items-center': inline,
+      }"
+    >
+      <span
+        v-if="label"
+        class="tw-font-sans tw-text-grayscale-600 tw-text-sm tw-block tw-font-semibold"
+        :class="{
+          'tw-sr-only': showLabelScreenReaderOnly,
+          'tw-mb-2': !inline,
+          'tw-ml-2 tw-order-last': inline,
+        }"
+      >
+        {{ label }}
+        <span v-if="required" class="tw-text-error-500">*</span>
+      </span>
+      <div class="tw-flex tw-justify-between tw-items-center">
+        <input
+          :id="`scl-input-${id}`"
+          :checked="modelValue"
+          type="checkbox"
+          class="tw-sr-only"
+          :disabled="disabled"
+          @change="$emit('update:modelValue', $event.target.checked)"
+        />
+        <div
+          class="tw-rounded-md tw-duration-300 tw-ease-in-out tw-flex tw-items-center tw-justify-center"
+          :class="{
+            'tw-bg-primary-500': modelValue && color === 'primary',
+            'tw-bg-success-500': modelValue && color === 'success',
+            'tw-bg-error-500': modelValue && color === 'error',
+            'tw-bg-info-500': modelValue && color === 'info',
+            'tw-bg-warning-500': modelValue && color === 'warning',
+            'tw-bg-grayscale-500': !modelValue,
+            'tw-h-5 tw-w-5': size === 'sm',
+            'tw-h-6 tw-w-6': size === 'md',
+          }"
+        >
+          <Icon
+            v-show="modelValue"
+            :class="{ 'tw-mt-1': size === 'md', 'tw-mt-0.5': size === 'sm' }"
+            name="check"
+            color="white"
+            :size="iconSize"
+          />
+        </div>
+      </div>
+    </label>
+  </div>
+</template>
+<script>
+import Icon from '../Icon/Icon.vue';
+import CheckboxMixin from './Checkbox.mixin';
+
+export default {
+  components: {
+    Icon,
+  },
+  mixins: [CheckboxMixin],
+  computed: {
+    iconSize() {
+      let iconSize;
+
+      switch (this.size) {
+        case 'sm':
+          iconSize = 'xs';
+          break;
+        case 'md':
+        default:
+          iconSize = 'sm';
+          break;
+      }
+
+      return iconSize;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,79 @@
+import Checktile from './Checktile.vue';
+
+export default {
+  title: 'Components/Checktile',
+  component: Checktile,
+};
+
+const data = {
+  components: {
+    Checktile,
+  },
+};
+
+export const Sample = () => {
+  return {
+    ...data,
+    data() {
+      return {
+        selected: false,
+      };
+    },
+    template: `
+      <Checktile @click="onClick" :selected="selected">
+        <img src="https://picsum.photos/200/300" alt="" />
+      </Checktile>
+    `,
+    methods: {
+      onClick() {
+        this.selected = !this.selected;
+      },
+    },
+  };
+};
+
+export const SampleSelected = () => {
+  return {
+    ...data,
+    template: `
+      <Checktile :selected="true">
+        <img src="https://picsum.photos/200/300" alt="" />
+      </Checktile>
+    `,
+  };
+};
+
+export const SampleText = () => {
+  return {
+    ...data,
+    data() {
+      return {
+        selected: false,
+      };
+    },
+    template: `
+      <div class="tw-flex tw-flex-col tw-my-2 tw-w-64">
+        <Checktile class="tw-my-2" @click="onClick" :selected="selected" :check-position="'middle-right'">
+          <div class="tw-my-2 tw-mx-10">
+          Hello World
+          </div>
+        </Checktile>
+        <Checktile class="tw-my-2" :selected="true" :check-position="'middle-right'">
+          <div class="tw-my-2 tw-mx-10 tw-py-10">
+          Hello World Tall
+          </div>
+        </Checktile>
+        <Checktile class="tw-my-2" :selected="true" :display-check="false" :check-position="'middle-right'">
+          <div class="tw-my-2 tw-mx-10">
+          Without check
+          </div>
+        </Checktile>
+      </div>
+    `,
+    methods: {
+      onClick() {
+        this.selected = !this.selected;
+      },
+    },
+  };
+};