@designcrowd/fe-shared-lib 1.1.10 → 1.1.12-ast-disabled-1

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

@@ -84,6 +84,7 @@
 <script>
 import ButtonOutline from './variants/ButtonOutline.vue';
 import ButtonPrimary from './variants/ButtonPrimary.vue';
+import ButtonOutlinePrimary from './variants/ButtonOutlinePrimary.vue';
 import ButtonWarning from './variants/ButtonWarning.vue';
 import ButtonSecondary from './variants/ButtonSecondary.vue';
 import ButtonInfoFilled from './variants/ButtonInfoFilled.vue';
@@ -107,6 +108,7 @@ export default {
   name: 'Button',
   components: {
     'button-crazyDomains-primary': ButtonCrazyDomainsPrimary,
+    'button-crazyDomains-outline-primary': ButtonOutlinePrimary,
     'button-crazyDomains-outline': ButtonCrazyDomainsOutline,
     'button-crazyDomains-secondary': ButtonSecondary,
     'button-crazyDomains-primary-with-icon': ButtonPrimaryWithIcon,
@@ -118,6 +120,7 @@ export default {
     'button-crazyDomains-pill': ButtonPill,
 
     'button-brandCrowd-primary': ButtonPrimary,
+    'button-brandCrowd-outline-primary': ButtonOutlinePrimary,
     'button-brandCrowd-warning': ButtonWarning,
     'button-brandCrowd-info-filled': ButtonInfoFilled,
     'button-brandCrowd-outline': ButtonOutline,

package/src/atoms/components/Button/Buttons.stories.js

@@ -278,6 +278,30 @@ export const PrimarySamples = (args, { argTypes }) => {
 PrimarySamples.args = controlArgs;
 PrimarySamples.argTypes = controlArgTypes;
 
+export const OutlinePrimarySamples = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('outline-primary'),
+      };
+    },
+    template: `
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `,
+  };
+};
+OutlinePrimarySamples.args = controlArgs;
+OutlinePrimarySamples.argTypes = controlArgTypes;
+
 export const SecondarySamples = (args, { argTypes }) => {
   return {
     components: {

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

@@ -0,0 +1,53 @@
+<template>
+  <button
+    v-if="!url"
+    class="tw-font-sans tw-border-2 tw-border-solid tw-font-bold tw-text-primary-500 tw-uppercase tw-transition-colors tw-duration-300"
+    :class="[
+      classes,
+      computedClasses,
+      {
+        'tw-border-grayscale-500 tw-bg-grayscale-400 tw-text-grayscale-600 tw-cursor-not-allowed': disabled,
+        'tw-cursor-pointer': !disabled,
+        'tw-border-primary-500 tw-bg-white hover:tw-bg-primary-100 tw-text-primary-500': !isBusy && !disabled,
+        'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
+          isBusy,
+      },
+    ]"
+    :disabled="disabled"
+    :type="type"
+    v-bind="attrs"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+  <a
+    v-else
+    :href="computedUrl"
+    class="tw-justify-center tw-font-sans tw-inline-flex tw-border-2 tw-border-solid tw-font-bold tw-uppercase tw-transition-colors tw-duration-300"
+    :class="[
+      commonUrlButtonClasses,
+      classes,
+      computedClasses,
+      {
+        'tw-cursor-wait': disabled,
+        'tw-cursor-pointer': !disabled,
+        'tw-border-primary-500 tw-bg-white hover:tw-bg-primary-100 tw-text-primary-500': !isBusy,
+        'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
+          isBusy,
+      },
+    ]"
+    :download="download"
+    v-bind="attrs"
+    :target="target"
+    @click="onClick"
+  >
+    <slot />
+  </a>
+</template>
+<script>
+import ButtonVariant from '../ButtonVariant.mixin.vue';
+
+export default {
+  mixins: [ButtonVariant],
+};
+</script>

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

@@ -21,6 +21,7 @@ export const Sample = () => {
         {
           label: 'Medium',
           value: 'medium',
+          disabled: true,
         },
         {
           label: 'Large',

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

@@ -10,11 +10,14 @@
       <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,
+          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+          'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+          'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
         }"
+        :disabled="option.disabled"
         v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
-        @click="$emit('on-select', option)"
+        @click="!option.disabled && $emit('on-select', option)"
       >
         <slot name="content" :option="option"></slot>
       </button>
@@ -35,8 +38,10 @@
       <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-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+          'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+          'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
           '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
@@ -45,9 +50,10 @@
           'tw-px-0 tw-py-0': option.iconName.includes('display-style') || btnStyleVariant === 'compressed',
         }"
         :style="option.iconName.includes('display-style') ? { lineHeight: 0 } : {}"
+        :disabled="option.disabled"
         class="tw-text-xs button-group-icon-button tw-shadow-inner"
         v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
-        @click="$emit('on-select', option)"
+        @click="!option.disabled && $emit('on-select', option)"
       >
         <div
           :class="{
@@ -67,12 +73,15 @@
       <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,
+          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+          'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+          'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
         }"
+        :disabled="option.disabled"
         class="tw-text-xs button-group-image-button tw-shadow-inner"
         v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
-        @click="$emit('on-select', option)"
+        @click="!option.disabled && $emit('on-select', option)"
       >
         <img :src="option.src" :alt="option.alt" class="tw-w-full tw-h-full" />
       </button>
@@ -90,11 +99,14 @@
       :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,
+        '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+        '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+        'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+        'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
       }"
+      :disabled="option.disabled"
       class="tw-text-xs button-group-button tw-shadow-inner"
-      @click="$emit('on-select', option)"
+      @click="!option.disabled && $emit('on-select', option)"
     >
       {{ option.label }}
     </button>

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue

@@ -138,6 +138,7 @@
                   :element-classes="{
                     'tw-h-12': true,
                   }"
+                  menu-element-classes="tw-w-full"
                   :disabled="domainTypeValue === DOMAIN_TYPES.slug"
                   :class="{
                     'tw-text-grayscale-600 tw-font-normal': !selectedCustomDomain,