@designcrowd/fe-shared-lib 1.2.0 → 1.2.1-ast-disabled-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.0",
+  "version": "1.2.1-ast-disabled-1",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",

package/public/css/tailwind-brandCrowd.css

@@ -719,6 +719,9 @@ video {
 .theme-brandCrowd .tw-ml-auto {
   margin-left: auto;
 }
+.theme-brandCrowd .tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .theme-brandCrowd .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -827,6 +830,10 @@ video {
 .theme-brandCrowd .tw-h-auto {
   height: auto;
 }
+.theme-brandCrowd .tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .theme-brandCrowd .tw-h-full {
   height: 100%;
 }
@@ -1013,6 +1020,9 @@ video {
 .theme-brandCrowd .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-brandCrowd .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1446,6 +1456,17 @@ video {
 .theme-brandCrowd .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.theme-brandCrowd .tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.theme-brandCrowd .tw-from-\[\#d946ef\] {
+  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.theme-brandCrowd .tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .theme-brandCrowd .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2087,6 +2108,10 @@ video {
   --tw-shadow-color: #0097D7 !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.theme-brandCrowd .hover\:tw-brightness-\[0\.85\]:hover {
+  --tw-brightness: brightness(0.85);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .theme-brandCrowd .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(194 22 50 / var(--tw-border-opacity));

package/public/css/tailwind-brandPage.css

@@ -719,6 +719,9 @@ video {
 .theme-brandPage .tw-ml-auto {
   margin-left: auto;
 }
+.theme-brandPage .tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .theme-brandPage .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -827,6 +830,10 @@ video {
 .theme-brandPage .tw-h-auto {
   height: auto;
 }
+.theme-brandPage .tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .theme-brandPage .tw-h-full {
   height: 100%;
 }
@@ -1013,6 +1020,9 @@ video {
 .theme-brandPage .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-brandPage .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1294,6 +1304,17 @@ video {
 .theme-brandPage .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.theme-brandPage .tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.theme-brandPage .tw-from-\[\#d946ef\] {
+  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.theme-brandPage .tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .theme-brandPage .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -1791,6 +1812,10 @@ video {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.theme-brandPage .hover\:tw-brightness-\[0\.85\]:hover {
+  --tw-brightness: brightness(0.85);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .theme-brandPage .focus\:tw-border-grayscale-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));

package/public/css/tailwind-crazyDomains.css

@@ -719,6 +719,9 @@ video {
 .theme-crazyDomains .tw-ml-auto {
   margin-left: auto;
 }
+.theme-crazyDomains .tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .theme-crazyDomains .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -827,6 +830,10 @@ video {
 .theme-crazyDomains .tw-h-auto {
   height: auto;
 }
+.theme-crazyDomains .tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .theme-crazyDomains .tw-h-full {
   height: 100%;
 }
@@ -1013,6 +1020,9 @@ video {
 .theme-crazyDomains .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-crazyDomains .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1446,6 +1456,17 @@ video {
 .theme-crazyDomains .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.theme-crazyDomains .tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.theme-crazyDomains .tw-from-\[\#d946ef\] {
+  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.theme-crazyDomains .tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .theme-crazyDomains .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2087,6 +2108,10 @@ video {
   --tw-shadow-color: #00A1EF !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.theme-crazyDomains .hover\:tw-brightness-\[0\.85\]:hover {
+  --tw-brightness: brightness(0.85);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .theme-crazyDomains .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(186 24 79 / var(--tw-border-opacity));

package/public/css/tailwind-designCom.css

@@ -719,6 +719,9 @@ video {
 .theme-designCom .tw-ml-auto {
   margin-left: auto;
 }
+.theme-designCom .tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .theme-designCom .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -827,6 +830,10 @@ video {
 .theme-designCom .tw-h-auto {
   height: auto;
 }
+.theme-designCom .tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .theme-designCom .tw-h-full {
   height: 100%;
 }
@@ -1013,6 +1020,9 @@ video {
 .theme-designCom .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-designCom .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1446,6 +1456,17 @@ video {
 .theme-designCom .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.theme-designCom .tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.theme-designCom .tw-from-\[\#d946ef\] {
+  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.theme-designCom .tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .theme-designCom .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2087,6 +2108,10 @@ video {
   --tw-shadow-color: #3f59f6 !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.theme-designCom .hover\:tw-brightness-\[0\.85\]:hover {
+  --tw-brightness: brightness(0.85);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .theme-designCom .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(182 58 42 / var(--tw-border-opacity));

package/public/css/tailwind-designCrowd.css

@@ -719,6 +719,9 @@ video {
 .theme-designCrowd .tw-ml-auto {
   margin-left: auto;
 }
+.theme-designCrowd .tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .theme-designCrowd .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -827,6 +830,10 @@ video {
 .theme-designCrowd .tw-h-auto {
   height: auto;
 }
+.theme-designCrowd .tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .theme-designCrowd .tw-h-full {
   height: 100%;
 }
@@ -1013,6 +1020,9 @@ video {
 .theme-designCrowd .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-designCrowd .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1446,6 +1456,17 @@ video {
 .theme-designCrowd .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.theme-designCrowd .tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.theme-designCrowd .tw-from-\[\#d946ef\] {
+  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.theme-designCrowd .tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .theme-designCrowd .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2087,6 +2108,10 @@ video {
   --tw-shadow-color: #1197EB !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.theme-designCrowd .hover\:tw-brightness-\[0\.85\]:hover {
+  --tw-brightness: brightness(0.85);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .theme-designCrowd .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(195 50 48 / var(--tw-border-opacity));

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/ButtonAi.vue

@@ -2,7 +2,7 @@
   <button
     v-if="!url"
     style="box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;"
-    class="tw-font-sans tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-rounded-xl tw-p-1 tw-text-white tw-duration-300 hover:tw-brightness-[0.85]"
+    class="tw-font-sans tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-p-1 tw-text-white tw-duration-300 hover:tw-brightness-[0.85]"
     :class="[
       classes,
       {
@@ -25,7 +25,7 @@
   <a
     v-else
     :href="computedUrl"
-    class="tw-font-sans tw-inline-flex tw-justify-center tw-rounded-xl tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-text-white"
+    class="tw-font-sans tw-inline-flex tw-justify-center tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-text-white"
     :class="[
       commonUrlButtonClasses,
       classes,

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/atoms/components/Dropdown/Dropdown.stories.js

@@ -18,11 +18,11 @@ export const Sample = () => {
     data() {
       return {
         show: true,
-      }
+      };
     },
     template: `
       <div class="tw-font-sans tw-w-1/4">
-        <Dropdown menu-align="right" v-model:show="show" @update:show="(visible) => show = visible">
+        <Dropdown menu-align="right" v-model:show="show" @update:show="(visible) => show = visible" menu-element-classes="tw-w-full">
           <DropdownItem @click="() => show = false">
             <span class="tw-grow">Menu item 1</span>
             <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
@@ -45,7 +45,7 @@ export const Disabled = () => {
     },
     template: `
       <div class="tw-font-sans tw-w-1/4">
-        <Dropdown menu-align="right" disabled>
+        <Dropdown menu-align="right" disabled menu-element-classes="tw-w-full">
           <DropdownItem>
             <span>Menu item 1</span>
           </DropdownItem>
@@ -67,7 +67,7 @@ export const LongListFixedHeight = () => {
     },
     template: `
       <div class="tw-font-sans tw-w-1/4">
-        <Dropdown menu-align="right" menu-element-classes="tw-h-40 tw-overflow-y-auto">
+        <Dropdown menu-align="right" menu-element-classes="tw-h-40 tw-overflow-y-auto tw-w-full">
           <DropdownItem v-for="(item, i) in items" :key="i">
             <span class="tw-grow">{{ item.display }}</span>
           </DropdownItem>
@@ -123,7 +123,7 @@ export const SampleElementClasses = () => {
     },
     template: `
       <div class="tw-flex tw-gap-2 tw-m-4">
-        <Dropdown menu-align="right" element-classes="tw-h-12">
+        <Dropdown menu-align="right" element-classes="tw-h-12" menu-element-classes="tw-w-full">
           <DropdownItem>
             <span class="tw-grow">Menu item 1</span>
             <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>

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,
@@ -195,6 +196,7 @@
                 :display-result-limit="4"
                 :domain-search-location="sitePublishedModal"
                 @on-change-search="onSearchTextChanged"
+                @on-buy-now-click="onBuyNowClick"
               />
             </div>
             <Button
@@ -488,7 +490,7 @@ export default {
       this.$emit('on-hide-domain-modal');
     },
     onCopyUrlClick() {
-      this.$emit('copy-url-click');
+      this.$emit('copy-url-clicked');
     },
     onSlugChanged(e) {
       this.searchText = e;
@@ -508,6 +510,7 @@ export default {
     },
     onSearchTextChanged(val) {
       this.searchText = val;
+      this.$emit('on-change-search', val);
     },
     onSelectPurchasedDomain(newVal) {
       this.selectedCustomDomain = newVal;
@@ -523,6 +526,9 @@ export default {
     onSellDomainNameListCloseModal() {
       this.$emit('on-hide-domain-modal');
     },
+    onBuyNowClick() {
+      this.$emit('on-buy-now-clicked');
+    },
     async searchDomainName(isUserTriggered) {
       this.isLoading = true;
       let searchSlug = '';

package/src/experiences/components/SellDomainNameList/SellDomainNameList.vue

@@ -114,6 +114,7 @@ export default {
       if (typeof this.domainSearchLocation !== 'undefined') {
         request.domainSearchLocation = this.domainSearchLocation;
       }
+      this.$emit('on-buy-now-click');
       window.dispatchEvent(
         new CustomEvent(Events.DomainSelectedEvent, {
           detail: request,

package/src/experiences/components/SellDomainNameSearchResult/SellDomainNameListSearchResult.vue

@@ -25,6 +25,7 @@
       :load-more-domains-button-text="loadMoreDomainsButtonText"
       :domain-search-location="domainSearchLocation"
       @load-more-domains="onLoadMoreDomains"
+      @on-buy-now-click="onBuyNowClick"
     />
     <div v-else-if="shouldShowDomainNameNotFound" class="tw-flex tw-justify-center tw-text-center">
       Sorry, we couldn't find any domain for "{{ previousSearchText }}".
@@ -145,6 +146,9 @@ export default {
       window.dispatchEvent(new CustomEvent(Events.DomainLoadMoreEvent));
       this.domainNameItemsInView += this.domainNameItemsPerPage;
     },
+    onBuyNowClick() {
+      this.$emit('on-buy-now-click');
+    },
     resetDomainNameItemsInView() {
       this.domainNameItemsInView = this.domainNameItemsPerPage;
     },

package/src/experiences/components/SellDomainNameSearchWithResults/SellDomainNameSearchWithResults.vue

@@ -20,6 +20,7 @@
       :domain-name-items-per-page="domainNameItemsPerPage"
       :load-more-domains-button-text="loadMoreDomainsButtonText"
       :domain-search-location="domainSearchLocation"
+      @on-buy-now-click="onBuyNowClick"
     />
   </div>
 </template>
@@ -170,6 +171,9 @@ export default {
         this.isBusy = false;
       }
     },
+    onBuyNowClick() {
+      this.$emit('on-buy-now-click');
+    },
     cleanText(inputText) {
       // In this function, we use the Unicode property escapes \p{L} and \p{N} to match any Unicode letters (characters from various scripts) and Unicode numbers, respectively.
       const cleanedText = inputText.replace(/[^\p{L}\p{N}\-.]+/gu, '');