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

package/src/atoms/components/ButtonGroup/ButtonGroup.vue

@@ -0,0 +1,188 @@
+<!-- eslint-disable vue/html-button-has-type -->
+<template>
+  <!-- Start custom button group -->
+  <div v-if="variant === 'custom'" class="button-group" :style="buttonGroupStyle">
+    <div
+      v-for="(option, idx) in options"
+      :key="`button-${option.value}`"
+      :class="{ 'tw-ml-2': idx > 0 && !isGridDisplay, 'tw-w-full': option.title || option.label }"
+    >
+      <button
+        class="button-group-item tw-text-xs tw-shadow-inner tw-w-full tw-py-2"
+        :class="{
+          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+        }"
+        v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
+        @click="$emit('on-select', option)"
+      >
+        <slot name="content" :option="option"></slot>
+      </button>
+      <p v-if="option.title" class="tw-w-full tw-text-center tw-font-bold tw-font-sans tw-text-xs tw-mb-0 tw-mt-2">
+        {{ option.title }}
+      </p>
+    </div>
+  </div>
+  <!-- End custom button group -->
+
+  <!-- Start icon/image button group -->
+  <div v-else-if="variant === 'icon' || variant === 'image'" class="button-group" :style="buttonGroupStyle">
+    <div
+      v-for="(option, idx) in options"
+      :key="`button-${option.value}`"
+      :class="{ 'tw-ml-2': idx > 0 && !isGridDisplay, 'tw-w-full': option.title }"
+    >
+      <button
+        v-if="variant === 'icon'"
+        :class="{
+          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+          'tw-px-2': !option.iconViewBox,
+          'tw-px-px':
+            option.iconViewBox && !option.isSelected && !option.iconName.includes('display-style') && btnStyleVariant, // TODO - move style logic to computed prop
+          'tw-px-0.5': option.iconViewBox && option.isSelected,
+          'tw-py-2': !option.iconName.includes('display-style') && !btnStyleVariant,
+          'tw-px-0 tw-py-0': option.iconName.includes('display-style') || btnStyleVariant === 'compressed',
+        }"
+        :style="option.iconName.includes('display-style') ? { lineHeight: 0 } : {}"
+        class="tw-text-xs button-group-icon-button tw-shadow-inner"
+        v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
+        @click="$emit('on-select', option)"
+      >
+        <div
+          :class="{
+            'tw-flex tw-flex-cols-2 tw-gap-4 tw-items-center tw-justify-center': option.iconName.includes('column-'),
+          }"
+        >
+          <p v-if="option.iconName.includes('column-')" class="tw-w-full tw-text-center tw-font-bold">
+            {{ option.label }}
+          </p>
+          <Icon
+            :name="option.iconName"
+            :size="option.iconSize ? option.iconSize : option.iconViewBox"
+            :view-box="option.iconViewBox"
+          />
+        </div>
+      </button>
+      <button
+        v-else
+        :class="{
+          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+        }"
+        class="tw-text-xs button-group-image-button tw-shadow-inner"
+        v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
+        @click="$emit('on-select', option)"
+      >
+        <img :src="option.src" :alt="option.alt" class="tw-w-full tw-h-full" />
+      </button>
+      <p v-if="option.title" class="tw-w-full tw-text-center tw-font-bold tw-font-sans tw-text-xs tw-mb-0 tw-mt-2">
+        {{ option.title }}
+      </p>
+    </div>
+  </div>
+  <!-- End icon/image button group -->
+
+  <!-- Start text button group -->
+  <div v-else class="button-group" :style="buttonGroupStyle">
+    <button
+      v-for="(option, idx) in options"
+      :key="`button-${option.value}`"
+      :class="{
+        'tw-ml-2': idx > 0 && !columns,
+        '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
+        '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+      }"
+      class="tw-text-xs button-group-button tw-shadow-inner"
+      @click="$emit('on-select', option)"
+    >
+      {{ option.label }}
+    </button>
+  </div>
+  <!-- End text button group -->
+</template>
+<script>
+import Icon from '../Icon/Icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    options: {
+      type: Array,
+      required: true,
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    btnStyleVariant: {
+      type: String,
+      validator(value) {
+        return ['compressed'].includes(value);
+      },
+      required: false,
+      default: undefined,
+    },
+    columns: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+    padding: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+    lineHeight: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+  },
+  computed: {
+    isGridDisplay() {
+      return !!this.columns;
+    },
+
+    buttonGroupStyle() {
+      if (!this.isGridDisplay) {
+        return {};
+      }
+
+      return {
+        display: 'grid',
+        gap: '0.5rem',
+        gridTemplateColumns: `repeat(${
+          this.options.length === 3 && this.columns === 2 ? this.options.length : this.columns
+        }, minmax(0, 1fr))`,
+      };
+    },
+  },
+};
+</script>
+<style scoped>
+.button-group {
+  @apply tw-w-full tw-inline-flex;
+}
+
+.button-group-item {
+  @apply tw-bg-white tw-font-bold tw-font-sans tw-cursor-pointer
+  tw-border-0 tw-text-black tw-rounded tw-text-center
+  tw-transition-shadow tw-duration-200 tw-ease-out;
+}
+
+.button-group-icon-button {
+  @apply button-group-item tw-w-full;
+}
+
+.button-group-image-button {
+  @apply button-group-item tw-p-2 tw-w-full;
+}
+
+.button-group-button {
+  @apply button-group-item tw-w-full tw-p-3;
+}
+</style>

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

@@ -0,0 +1,35 @@
+export const carouselProps = {
+  loop: false,
+  spaceBetween: 22,
+  slidesPerView: 'auto',
+  centeredSlides: false,
+  pagination: true,
+  breakpoints: {
+    1024: {
+      slidesPerView: 1,
+      slidesPerGroup: 1,
+      centerInsufficientSlides: true,
+    },
+  },
+};
+
+export const cards = [
+  {
+    editorUrl: '#',
+    imageUrl: 'https://bcassetcdn.com/assets/images/carousel/carousel-logo.png',
+    name: 'Logo design',
+    pluralName: 'Logo Designs',
+  },
+  {
+    editorUrl: '#',
+    imageUrl: 'https://bcassetcdn.com/assets/images/carousel/carousel-business-card.png',
+    name: 'Business card',
+    pluralName: 'Business Cards',
+  },
+  {
+    editorUrl: '#',
+    imageUrl: 'https://bcassetcdn.com/assets/images/carousel/carousel-facebook-cover.png',
+    name: 'Facebook cover',
+    pluralName: 'Facebook Covers',
+  },
+];

package/src/atoms/components/Carousel/Carousel.vue

@@ -0,0 +1,352 @@
+<template>
+  <div :class="['carousel tw-flex tw-flex-col tw-box-content', ...classes]" @contextmenu="onRightClick">
+    <div class="tw-flex tw-items-center tw-relative">
+      <slot v-if="showControls" name="arrow-left">
+        <div id="btn_carousel_prev" class="carousel__button-nav" :class="navigationPrevClass">
+          <div
+            class="tw-hidden sm:tw-block tw-cursor-pointer tw-absolute tw-z-10 tw--left-16 tw-top-1/2 tw-transform tw--translate-y-1/2 tw-h-10 tw-w-10 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
+            :class="{
+              'nav-carousel__button-prev-pointer': navCarousel,
+            }"
+          >
+            <Icon
+              classes="tw--mb-1 tw-absolute tw-left-0 tw-right-0 tw-m-auto tw-flex tw-justify-center tw-top-1/2 tw-transform tw--translate-y-1/2"
+              name="chevron-left"
+              size="sm"
+            />
+          </div>
+          <div
+            class="sm:tw-hidden tw-cursor-pointer tw-mr-2 tw-h-6 tw-w-6 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
+            :class="{
+              'nav-carousel__button-prev-pointer': navCarousel,
+            }"
+          >
+            <Icon
+              classes="tw--mb-1 tw-absolute tw-left-0 tw-right-2 tw-m-auto tw-flex tw-justify-center tw-top-1/2 tw-transform tw--translate-y-1/2"
+              name="chevron-left"
+              size="xs"
+            />
+          </div>
+        </div>
+      </slot>
+      <swiper
+        :ref="swiperRef"
+        :modules="modules"
+        :keyboard="swiperOptions.keyboard"
+        :navigation="swiperOptions.navigation"
+        :pagination="swiperOptions.pagination"
+        :space-between="swiperOptions.spaceBetween"
+        :slides-per-view="swiperOptions.slidesPerView"
+        :slides-per-group="swiperOptions.slidesPerGroup"
+        :loop="swiperOptions.loop"
+        :initial-slide="swiperOptions.initialSlide"
+        :breakpoints="swiperOptions.breakpoints"
+        :centered-slides="swiperOptions.centeredSlides"
+        :center-insufficient-slides="swiperOptions.centerInsufficientSlides"
+        :auto-height="swiperOptions.autoHeight"
+        :autoplay="swiperOptions.autoplay"
+        :free-mode="swiperOptions.freeMode"
+        @swiper="onSwiper"
+      >
+        <swiper-slide v-for="(slide, i) in cards" :key="i" :style="{ width: slide.width }">
+          <div class="tw-h-full">
+            <slot name="slide" :slide="slide" :index="i"></slot>
+          </div>
+        </swiper-slide>
+      </swiper>
+      <slot v-if="showControls" name="arrow-right">
+        <div id="btn_carousel_next" class="carousel__button-nav" :class="navigationNextClass">
+          <div
+            class="tw-hidden sm:tw-block tw-cursor-pointer tw-absolute tw-z-10 tw--right-16 tw-top-1/2 tw-transform tw--translate-y-1/2 tw-h-10 tw-w-10 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
+            :class="{
+              'nav-carousel__button-next-pointer': navCarousel,
+            }"
+          >
+            <Icon
+              classes="tw--mb-1 tw-absolute tw-left-0 tw-right-0 tw-m-auto tw-flex tw-justify-center tw-top-1/2 tw-transform tw--translate-y-1/2"
+              name="chevron-right"
+              size="sm"
+            />
+          </div>
+          <div
+            class="sm:tw-hidden tw-cursor-pointer tw-ml-2 tw-h-6 tw-w-6 tw-rounded-full tw-shadow tw-border tw-border-solid tw-border-grayscale-300 tw-bg-white"
+            :class="{
+              'nav-carousel__button-next-pointer': navCarousel,
+            }"
+          >
+            <Icon
+              classes="tw--mb-1 tw-absolute tw-left-2 tw-right-0 tw-m-auto tw-flex tw-justify-center tw-top-1/2 tw-transform tw--translate-y-1/2"
+              name="chevron-right"
+              size="xs"
+            />
+          </div>
+        </div>
+      </slot>
+    </div>
+    <div
+      v-if="!hideBulletsElement"
+      class="swiper-pagination"
+      :class="[
+        {
+          'pagination-hidden': navCarousel,
+          'swiper-pagination--desktop-only': hideBulletsOnMobile,
+        },
+        paginationClass,
+      ]"
+    ></div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable import/no-unresolved */
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/free-mode';
+/* eslint-enable import/no-unresolved */
+import merge from 'deepmerge';
+import { Navigation, Pagination, Autoplay, Keyboard, FreeMode } from 'swiper/modules';
+import Icon from '../Icon/Icon.vue';
+
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+    Icon,
+  },
+  props: {
+    classes: {
+      type: [String, Object, Array],
+      required: false,
+      default: () => [],
+    },
+    cards: {
+      type: Array,
+      required: true,
+    },
+    options: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    disableRightClick: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    navCarousel: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    showControls: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    showBullets: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    hideBulletsOnMobile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    hideBulletsElement: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    swiperRef: {
+      type: String,
+      default: 'js-swiper',
+    },
+    navigationUniqueIndexer: {
+      type: String,
+      default: undefined,
+    },
+    slideIndex: {
+      type: Number,
+      required: false,
+      default: undefined,
+    },
+  },
+  setup() {
+    return {
+      modules: [Keyboard, Navigation, Pagination, Autoplay, FreeMode],
+    };
+  },
+  data() {
+    return {
+      swiper: null,
+      defaultOptions: {
+        navigation: {
+          prevEl: '.carousel__button-prev',
+          nextEl: '.carousel__button-next',
+        },
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true,
+        },
+        speed: 600,
+      },
+    };
+  },
+  computed: {
+    navigationPrevClass() {
+      if (this.navigationUniqueIndexer) {
+        return `carousel__button-prev--${this.navigationUniqueIndexer}`;
+      }
+      return 'carousel__button-prev';
+    },
+    navigationNextClass() {
+      if (this.navigationUniqueIndexer) {
+        return `carousel__button-next--${this.navigationUniqueIndexer}`;
+      }
+      return 'carousel__button-next';
+    },
+    paginationClass() {
+      if (this.navigationUniqueIndexer) {
+        return `pagination--${this.navigationUniqueIndexer}`;
+      }
+      return '';
+    },
+    swiperOptions() {
+      const defaultOptions = { ...this.defaultOptions };
+
+      if (!this.showControls) {
+        delete defaultOptions.navigation;
+        delete defaultOptions.pagination;
+      }
+
+      if (!this.showBullets || this.hideBulletsElement || !this.showControls) {
+        delete defaultOptions.pagination;
+      }
+
+      const options = merge(defaultOptions, this.options || {});
+
+      options.initialSlide = this.slideIndex || options.initialSlide;
+
+      options.keyboard = defaultOptions.keyboard || {
+        enabled: true,
+      };
+
+      return options;
+    },
+  },
+  watch: {
+    slideIndex(newIdx) {
+      if (!this.swiper || Number.isNaN(newIdx)) {
+        return;
+      }
+
+      this.swiper.update();
+      this.swiper.slideTo(newIdx, 0, false);
+    },
+  },
+  methods: {
+    onRightClick(e) {
+      if (this.disableRightClick) {
+        e.preventDefault();
+        return false;
+      }
+
+      return true;
+    },
+    onSwiper() {
+      this.swiper = this.$refs[this.swiperRef].$el.swiper;
+      this.swiper.update();
+
+      this.$emit('on-carousel-load');
+    },
+    onClickNextSlide() {
+      if (this.swiper) {
+        this.swiper.slideNext();
+      }
+    },
+    onClickPrevSlide() {
+      if (this.swiper) {
+        this.swiper.slidePrev();
+      }
+    },
+    update() {
+      this.swiper.update();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.carousel :deep(.swiper-button-next, .swiper-button-prev) {
+  @apply tw-hidden;
+}
+
+.carousel :deep(.swiper-button-disabled) {
+  @apply tw-hidden;
+}
+
+.carousel :deep(.swiper-pagination) {
+  @apply tw-static tw-pt-6;
+}
+
+.carousel :deep(.swiper-pagination-bullets) {
+  @apply tw-text-center;
+}
+
+.carousel :deep(.swiper-pagination--desktop-only) {
+  @apply tw-hidden sm:tw-block;
+}
+
+.carousel :deep(.carousel__button-nav) {
+  @apply tw-relative;
+}
+
+.carousel :deep(.swiper-pagination-bullet) {
+  border-color: #595959;
+  @apply tw-border-2 tw-border-solid tw-opacity-100 tw-bg-transparent tw-w-2 tw-h-2 tw-inline-block tw-rounded tw-cursor-pointer;
+}
+
+.carousel :deep(.swiper-pagination-bullet.swiper-pagination-bullet-active) {
+  background-color: #595959;
+}
+
+.carousel :deep(.swiper-pagination-bullet:not(:last-child)) {
+  @apply tw-mr-2;
+}
+
+.carousel :deep(.swiper-pagination-bullet:only-child) {
+  @apply tw-hidden;
+}
+
+.carousel :deep(.swiper-container) {
+  @apply tw-w-full;
+}
+
+.carousel :deep(.swiper-slide) {
+  @apply tw-h-auto tw-w-auto;
+}
+
+.nav-carousel__button-next-pointer,
+.nav-carousel__button-prev-pointer {
+  background: none;
+  box-shadow: none;
+  border: none;
+  position: relative;
+  vertical-align: middle;
+  --tw-translate-y: 0;
+}
+
+.nav-carousel__button-next-pointer {
+  right: 0;
+}
+
+.nav-carousel__button-prev-pointer {
+  left: 0;
+}
+
+.pagination-hidden {
+  display: none !important;
+}
+</style>