@designcrowd/fe-shared-lib 1.0.9 → 1.0.10

package/src/atoms/components/Button/Button.vue

@@ -1,323 +1,323 @@
-<template>
-  <div :class="[{ 'tw-w-full': fullWidth }, containerClasses]">
-    <component
-      :is="`button-${theme || 'brandCrowd'}-${variant}`"
-      v-bind="dataAttribute ? { [dataAttribute]: '' } : {}"
-      data-scl-button
-      :attrs="attrs"
-      :size="size"
-      :classes="classes"
-      :disabled="disabled"
-      :is-busy="isBusy"
-      :download="download"
-      :icon="icon"
-      :icon-view-box="iconViewBox"
-      :url="url"
-      :full-width="fullWidth"
-      :full-height="fullHeight"
-      :rounded="rounded"
-      :rounded-left="roundedLeft"
-      :rounded-right="roundedRight"
-      :on-click="onClick"
-      :target="target"
-      :active="active"
-      :white="white"
-      :type="type"
-    >
-      <div v-if="iconTop" class="tw-mb-1 tw-flex tw-w-full tw-flex-col tw-items-center">
-        <Icon :name="iconTop" :size="iconTopSize" :color="iconColor" />
-      </div>
-      <span
-        class="tw-w-full tw-flex"
-        :class="{
-          'tw-justify-center': justify === 'center',
-          'tw-justify-between': justify === 'between',
-        }"
-      >
-        <span
-          class="tw-inline-flex tw-items-center"
-          :class="{
-            'tw-opacity-50': greyOutLeft === true,
-          }"
-        >
-          <Icon v-if="iconOnly" class="tw-flex tw-items-center" :name="icon" :size="iconSize" :color="iconColor" />
-          <Icon
-            v-if="iconLeft && !iconOnly"
-            class="tw-mr-2 tw-flex tw-items-center"
-            :name="iconLeft"
-            :size="iconLeftSize"
-            :color="iconColor"
-          />
-          <span
-            v-if="isBusy"
-            :class="{
-              'tw-my-auto tw-w-4 tw-h-4': true,
-              'tw-mr-2': isBusyLabel,
-            }"
-          >
-            <Icon class="tw-animate-spin tw-w-4 tw-h-4" name="processing" />
-          </span>
-          <span v-if="!isBusy && !iconOnly && showLabel" class="tw-my-auto tw-text-center">{{ label }}</span>
-          <span v-if="isBusy && isBusyLabel" class="tw-my-auto tw-text-center">{{ isBusyLabel }}</span>
-        </span>
-        <Icon
-          v-if="iconRight && !iconOnly"
-          class="tw-ml-2 tw-flex tw-items-center"
-          :name="iconRight"
-          :size="iconRightSize"
-          :color="iconColor"
-        />
-      </span>
-    </component>
-  </div>
-</template>
-
-<script>
-import ButtonOutline from './variants/ButtonOutline.vue';
-import ButtonPrimary from './variants/ButtonPrimary.vue';
-import ButtonWarning from './variants/ButtonWarning.vue';
-import ButtonSecondary from './variants/ButtonSecondary.vue';
-import ButtonInfoFilled from './variants/ButtonInfoFilled.vue';
-import ButtonGray from './variants/ButtonGray.vue';
-import ButtonPrimaryWithIcon from './variants/ButtonPrimaryWithIcon.vue';
-import ButtonSuccess from './variants/ButtonSuccess.vue';
-import ButtonOutlineSuccess from './variants/ButtonOutlineSuccess.vue';
-import ButtonNoHover from './variants/ButtonOutlineNoHover.vue';
-
-import ButtonInfo from './variants/ButtonInfo.vue';
-import ButtonCrazyDomainsPrimary from './variants/crazy-domains/ButtonCrazyDomainsPrimary.vue';
-import ButtonCrazyDomainsOutline from './variants/crazy-domains/ButtonCrazyDomainsOutline.vue';
-import ButtonNoBorder from './variants/ButtonNoBorder.vue';
-import ButtonFlat from './variants/ButtonFlat.vue';
-import ButtonPill from './variants/ButtonPill.vue';
-import ButtonDarkModePill from './variants/ButtonDarkModePill.vue';
-import Icon from '../Icon/Icon.vue';
-
-export default {
-  name: 'Button',
-  components: {
-    'button-crazyDomains-primary': ButtonCrazyDomainsPrimary,
-    'button-crazyDomains-outline': ButtonCrazyDomainsOutline,
-    'button-crazyDomains-secondary': ButtonSecondary,
-    'button-crazyDomains-primary-with-icon': ButtonPrimaryWithIcon,
-    'button-crazyDomains-success': ButtonSuccess,
-    'button-crazyDomains-info': ButtonInfo,
-    'button-crazyDomains-gray': ButtonGray,
-    'button-crazyDomains-no-border': ButtonNoBorder,
-    'button-crazyDomains-flat': ButtonFlat,
-    'button-crazyDomains-pill': ButtonPill,
-
-    'button-brandCrowd-primary': ButtonPrimary,
-    'button-brandCrowd-warning': ButtonWarning,
-    'button-brandCrowd-info-filled': ButtonInfoFilled,
-    'button-brandCrowd-outline': ButtonOutline,
-    'button-brandCrowd-secondary': ButtonSecondary,
-    'button-brandCrowd-primary-with-icon': ButtonPrimaryWithIcon,
-    'button-brandCrowd-success': ButtonSuccess,
-    'button-brandCrowd-outline-success': ButtonOutlineSuccess,
-    'button-brandCrowd-outline-no-hover': ButtonNoHover,
-    'button-brandCrowd-info': ButtonInfo,
-    'button-brandCrowd-gray': ButtonGray,
-    'button-brandCrowd-no-border': ButtonNoBorder,
-    'button-brandCrowd-flat': ButtonFlat,
-    'button-brandCrowd-pill': ButtonPill,
-    'button-brandCrowd-dark-mode-pill': ButtonDarkModePill,
-
-    Icon,
-  },
-  props: {
-    attrs: {
-      type: Object,
-      required: false,
-      default: () => {},
-    },
-    label: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    url: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    theme: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    variant: {
-      type: String,
-      required: false,
-      default: null, // options: success, primary, outline
-    },
-    size: {
-      type: String,
-      required: false,
-      default: null, // options: small, small-wide, small-medium, medium || null, large
-    },
-    iconSize: {
-      type: String,
-      required: false,
-      default: 'xs',
-    },
-    icon: {
-      type: String,
-      required: false,
-      default: null, // options: any icon name from the Icon.vue component eg. chevron-right
-    },
-    iconViewBox: {
-      type: String,
-      required: false,
-      default: null, // used for a custom icon viewbox when using the primary-with-icon variant
-    },
-    iconLeft: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    iconLeftSize: {
-      type: String,
-      required: false,
-      default: 'xs',
-    },
-    iconRight: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    iconRightSize: {
-      type: String,
-      required: false,
-      default: 'xs',
-    },
-    iconTop: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    iconTopSize: {
-      type: String,
-      required: false,
-      default: 'xs',
-    },
-    iconColor: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    fullWidth: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    fullHeight: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    classes: {
-      type: [String, Object],
-      required: false,
-      default: '',
-    },
-    containerClasses: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    greyOutLeft: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    white: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    rounded: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    roundedLeft: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    roundedRight: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isBusy: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isBusyLabel: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    download: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    active: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    target: {
-      type: String,
-      required: false,
-      default: '_self',
-    },
-    justify: {
-      type: String,
-      required: false,
-      default: 'center',
-    },
-    type: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    showLabel: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    dataAttribute: {
-      type: String,
-      default: undefined,
-    },
-  },
-  data() {
-    return {
-      themeCrazyDomains: 'crazyDomains',
-    };
-  },
-  computed: {
-    iconOnly() {
-      return !this.label && this.icon;
-    },
-  },
-  methods: {
-    onClick(e) {
-      this.$emit('on-click', e);
-    },
-    isNotThemedAndIsVariant(variant) {
-      return !this.theme && this.variant === variant;
-    },
-  },
-};
-</script>
+<template>
+  <div :class="[{ 'tw-w-full': fullWidth }, containerClasses]">
+    <component
+      :is="`button-${theme || 'brandCrowd'}-${variant}`"
+      v-bind="dataAttribute ? { [dataAttribute]: '' } : {}"
+      data-scl-button
+      :attrs="attrs"
+      :size="size"
+      :classes="classes"
+      :disabled="disabled"
+      :is-busy="isBusy"
+      :download="download"
+      :icon="icon"
+      :icon-view-box="iconViewBox"
+      :url="url"
+      :full-width="fullWidth"
+      :full-height="fullHeight"
+      :rounded="rounded"
+      :rounded-left="roundedLeft"
+      :rounded-right="roundedRight"
+      :on-click="onClick"
+      :target="target"
+      :active="active"
+      :white="white"
+      :type="type"
+    >
+      <div v-if="iconTop" class="tw-mb-1 tw-flex tw-w-full tw-flex-col tw-items-center">
+        <Icon :name="iconTop" :size="iconTopSize" :color="iconColor" />
+      </div>
+      <span
+        class="tw-w-full tw-flex"
+        :class="{
+          'tw-justify-center': justify === 'center',
+          'tw-justify-between': justify === 'between',
+        }"
+      >
+        <span
+          class="tw-inline-flex tw-items-center"
+          :class="{
+            'tw-opacity-50': greyOutLeft === true,
+          }"
+        >
+          <Icon v-if="iconOnly" class="tw-flex tw-items-center" :name="icon" :size="iconSize" :color="iconColor" />
+          <Icon
+            v-if="iconLeft && !iconOnly"
+            class="tw-mr-2 tw-flex tw-items-center"
+            :name="iconLeft"
+            :size="iconLeftSize"
+            :color="iconColor"
+          />
+          <span
+            v-if="isBusy"
+            :class="{
+              'tw-my-auto tw-w-4 tw-h-4': true,
+              'tw-mr-2': isBusyLabel,
+            }"
+          >
+            <Icon class="tw-animate-spin tw-w-4 tw-h-4" name="processing" />
+          </span>
+          <span v-if="!isBusy && !iconOnly && showLabel" class="tw-my-auto tw-text-center">{{ label }}</span>
+          <span v-if="isBusy && isBusyLabel" class="tw-my-auto tw-text-center">{{ isBusyLabel }}</span>
+        </span>
+        <Icon
+          v-if="iconRight && !iconOnly"
+          class="tw-ml-2 tw-flex tw-items-center"
+          :name="iconRight"
+          :size="iconRightSize"
+          :color="iconColor"
+        />
+      </span>
+    </component>
+  </div>
+</template>
+
+<script>
+import ButtonOutline from './variants/ButtonOutline.vue';
+import ButtonPrimary from './variants/ButtonPrimary.vue';
+import ButtonWarning from './variants/ButtonWarning.vue';
+import ButtonSecondary from './variants/ButtonSecondary.vue';
+import ButtonInfoFilled from './variants/ButtonInfoFilled.vue';
+import ButtonGray from './variants/ButtonGray.vue';
+import ButtonPrimaryWithIcon from './variants/ButtonPrimaryWithIcon.vue';
+import ButtonSuccess from './variants/ButtonSuccess.vue';
+import ButtonOutlineSuccess from './variants/ButtonOutlineSuccess.vue';
+import ButtonNoHover from './variants/ButtonOutlineNoHover.vue';
+
+import ButtonInfo from './variants/ButtonInfo.vue';
+import ButtonCrazyDomainsPrimary from './variants/crazy-domains/ButtonCrazyDomainsPrimary.vue';
+import ButtonCrazyDomainsOutline from './variants/crazy-domains/ButtonCrazyDomainsOutline.vue';
+import ButtonNoBorder from './variants/ButtonNoBorder.vue';
+import ButtonFlat from './variants/ButtonFlat.vue';
+import ButtonPill from './variants/ButtonPill.vue';
+import ButtonDarkModePill from './variants/ButtonDarkModePill.vue';
+import Icon from '../Icon/Icon.vue';
+
+export default {
+  name: 'Button',
+  components: {
+    'button-crazyDomains-primary': ButtonCrazyDomainsPrimary,
+    'button-crazyDomains-outline': ButtonCrazyDomainsOutline,
+    'button-crazyDomains-secondary': ButtonSecondary,
+    'button-crazyDomains-primary-with-icon': ButtonPrimaryWithIcon,
+    'button-crazyDomains-success': ButtonSuccess,
+    'button-crazyDomains-info': ButtonInfo,
+    'button-crazyDomains-gray': ButtonGray,
+    'button-crazyDomains-no-border': ButtonNoBorder,
+    'button-crazyDomains-flat': ButtonFlat,
+    'button-crazyDomains-pill': ButtonPill,
+
+    'button-brandCrowd-primary': ButtonPrimary,
+    'button-brandCrowd-warning': ButtonWarning,
+    'button-brandCrowd-info-filled': ButtonInfoFilled,
+    'button-brandCrowd-outline': ButtonOutline,
+    'button-brandCrowd-secondary': ButtonSecondary,
+    'button-brandCrowd-primary-with-icon': ButtonPrimaryWithIcon,
+    'button-brandCrowd-success': ButtonSuccess,
+    'button-brandCrowd-outline-success': ButtonOutlineSuccess,
+    'button-brandCrowd-outline-no-hover': ButtonNoHover,
+    'button-brandCrowd-info': ButtonInfo,
+    'button-brandCrowd-gray': ButtonGray,
+    'button-brandCrowd-no-border': ButtonNoBorder,
+    'button-brandCrowd-flat': ButtonFlat,
+    'button-brandCrowd-pill': ButtonPill,
+    'button-brandCrowd-dark-mode-pill': ButtonDarkModePill,
+
+    Icon,
+  },
+  props: {
+    attrs: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
+    label: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    url: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: null, // options: success, primary, outline
+    },
+    size: {
+      type: String,
+      required: false,
+      default: null, // options: small, small-wide, small-medium, medium || null, large
+    },
+    iconSize: {
+      type: String,
+      required: false,
+      default: 'xs',
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: null, // options: any icon name from the Icon.vue component eg. chevron-right
+    },
+    iconViewBox: {
+      type: String,
+      required: false,
+      default: null, // used for a custom icon viewbox when using the primary-with-icon variant
+    },
+    iconLeft: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    iconLeftSize: {
+      type: String,
+      required: false,
+      default: 'xs',
+    },
+    iconRight: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    iconRightSize: {
+      type: String,
+      required: false,
+      default: 'xs',
+    },
+    iconTop: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    iconTopSize: {
+      type: String,
+      required: false,
+      default: 'xs',
+    },
+    iconColor: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    fullWidth: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    fullHeight: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    classes: {
+      type: [String, Object],
+      required: false,
+      default: '',
+    },
+    containerClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    greyOutLeft: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    white: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    rounded: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    roundedLeft: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    roundedRight: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isBusy: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isBusyLabel: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    download: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    active: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    target: {
+      type: String,
+      required: false,
+      default: '_self',
+    },
+    justify: {
+      type: String,
+      required: false,
+      default: 'center',
+    },
+    type: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    showLabel: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    dataAttribute: {
+      type: String,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      themeCrazyDomains: 'crazyDomains',
+    };
+  },
+  computed: {
+    iconOnly() {
+      return !this.label && this.icon;
+    },
+  },
+  methods: {
+    onClick(e) {
+      this.$emit('on-click', e);
+    },
+    isNotThemedAndIsVariant(variant) {
+      return !this.theme && this.variant === variant;
+    },
+  },
+};
+</script>