@designcrowd/fe-shared-lib 1.2.10-ml-407-1 → 1.2.11-ast-upsell

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.10-ml-407-1",
+  "version": "1.2.11-ast-upsell",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",
@@ -113,4 +113,4 @@
   "overrides": {
     "storybook": "$storybook"
   }
-}
+}

package/public/css/tailwind-brandCrowd.css

@@ -1020,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;
 }
@@ -2041,10 +2044,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 121 172 / var(--tw-bg-opacity));
 }
-.theme-brandCrowd .hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 209 217 / var(--tw-bg-opacity));
-}
 .theme-brandCrowd .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(245 73 101 / var(--tw-bg-opacity));

package/public/css/tailwind-brandPage.css

@@ -1020,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;
 }

package/public/css/tailwind-crazyDomains.css

@@ -1020,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;
 }
@@ -2041,10 +2044,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 129 191 / var(--tw-bg-opacity));
 }
-.theme-crazyDomains .hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(226 238 213 / var(--tw-bg-opacity));
-}
 .theme-crazyDomains .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(140 189 89 / var(--tw-bg-opacity));

package/public/css/tailwind-designCom.css

@@ -1020,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;
 }
@@ -2041,10 +2044,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(50 71 197 / var(--tw-bg-opacity));
 }
-.theme-designCom .hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 238 254 / var(--tw-bg-opacity));
-}
 .theme-designCom .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(121 139 249 / var(--tw-bg-opacity));

package/public/css/tailwind-designCrowd.css

@@ -1020,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;
 }
@@ -2041,10 +2044,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(14 121 188 / var(--tw-bg-opacity));
 }
-.theme-designCrowd .hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(207 234 251 / var(--tw-bg-opacity));
-}
 .theme-designCrowd .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(65 172 239 / var(--tw-bg-opacity));

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/AuthFlow/SignIn.vue

@@ -57,7 +57,7 @@
           </p>
           <div class="tw-flex tw-flex-col">
             <div>
-              <form id="signin" :action="getSignInAction" method="post" @submit="validate">
+              <form id="signin" action="/identity/account/signin" method="post" @submit="validate">
                 <input name="__RequestVerificationToken" type="hidden" :value="antiForgeryToken" />
                 <label for="userName" class="tw-sr-only"> {{ emailLabel }} </label>
                 <input
@@ -170,7 +170,6 @@ import themeMixin from '../../mixins/themeMixin';
 import { SIGN_IN } from '../../constants/partner-dictionary-constants';
 import isValidEmail from '../../helpers/email-validator';
 import SocialSignIn from './SocialSignIn.vue';
-import { getCurrentLocale } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -310,7 +309,7 @@ export default {
     signInContent: {
       type: Object,
       required: false,
-      default: () => { },
+      default: () => {},
     },
   },
   data() {
@@ -335,9 +334,6 @@ export default {
     isLoading() {
       return this.emailLoading || this.facebookLoading || this.googleLoading;
     },
-    currentLocale() {
-      return getCurrentLocale();
-    },
     submissionButtonLabelLowercase() {
       return this.submissionButtonLabel.toLowerCase();
     },
@@ -373,11 +369,6 @@ export default {
       }
       return this.signUpText;
     },
-    getSignInAction() {
-      const params = new URLSearchParams();
-      params.set('locale', this.currentLocale);
-      return `/identity/account/signin?${params.toString()}`;
-    },
   },
   watch: {
     capturePassword() {
@@ -440,7 +431,6 @@ export default {
   background-image: url(https://dcstatic.com/images/icons/forms/forms-email-58207f9a5c.svg);
   background-position: top 50% left 0.5rem;
 }
-
 .password-input {
   background-image: url(https://dcstatic.com/images/icons/forms/forms-password-ff538cd5e4.svg);
   background-position: top 50% left 0.5rem;

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

@@ -21,6 +21,7 @@
           <p v-else class="tw-text-grayscale-600 tw-mb-8 tw-font-normal">
             {{ publishedSuccessDescriptionLabel }}
           </p>
+          <slot name="upsell" />
         </div>
       </template>
       <template #default>