@designcrowd/fe-shared-lib 1.0.9 → 1.0.10

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

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

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