@designcrowd/library.brand-page 6.0.18 → 6.0.19-ast-btns-2

package/src/brand-page/components/contact-form/ContactForm.vue

@@ -30,6 +30,7 @@
         :title="title"
         :title-style="viewModel.titleStyle"
         :button-styles="viewModel.buttonStyles.style"
+        :background-style="viewModel.backgroundStyle"
         :can-collapse="canCollapse"
         :context="context"
         :class="{ 'contact-container': context.isBrandSite }"
@@ -80,17 +81,25 @@
                 {{ value.error }}
               </p>
             </div>
-            <button
+            <ButtonStyleWrapper
               v-if="isSubmitButtonVisible"
-              class="tw-block tw-border-0 tw-mt-4 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-full hover:tw-cursor-pointer"
-              :style="submitButtonStyle"
+              :selected-button-style-id="
+                viewModel.buttonStyles.selectedButtonStyleId
+              "
+              :icon-color="viewModel.buttonStyles.style.backgroundColor"
+              :no-margin="true"
             >
-              <TextWrapper
-                :text-style="submitButtonTextStyle"
-                :text="viewModel.buttonText"
-                class="tw-text-center tw-text-base"
-              />
-            </button>
+              <button
+                class="tw-block tw-border-0 tw-mt-4 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-full hover:tw-cursor-pointer"
+                :style="submitButtonStyle"
+              >
+                <TextWrapper
+                  :text-style="submitButtonTextStyle"
+                  :text="viewModel.buttonText"
+                  class="tw-text-center tw-text-base"
+                />
+              </button>
+            </ButtonStyleWrapper>
           </div>
           <div v-else class="tw-w-full tw-flex tw-justify-center">
             <Loader />
@@ -184,18 +193,30 @@
                   </p>
                 </div>
                 <div class="tw-flex tw-w-full tw-justify-center tw-col-span-2">
-                  <button
+                  <ButtonStyleWrapper
                     v-if="isSubmitButtonVisible"
-                    class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
-                    :style="submitButtonStyle"
-                    :class="{ 'tw-w-full': isMobileDevice }"
+                    :selected-button-style-id="
+                      viewModel.buttonStyles.selectedButtonStyleId
+                    "
+                    :icon-color="viewModel.buttonStyles.style.backgroundColor"
+                    :full-width="!!isMobileDevice"
+                    :no-margin="true"
                   >
-                    <TextWrapper
-                      :text-style="submitButtonTextStyle"
-                      :text="viewModel.buttonText"
-                      class="tw-text-center tw-text-base"
-                    />
-                  </button>
+                    <button
+                      class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
+                      :style="submitButtonStyle"
+                      :class="{
+                        'tw-w-full': isMobileDevice,
+                        'tw-min-w-[120px]': isDecorativeSubmitStyle,
+                      }"
+                    >
+                      <TextWrapper
+                        :text-style="submitButtonTextStyle"
+                        :text="viewModel.buttonText"
+                        class="tw-text-center tw-text-base"
+                      />
+                    </button>
+                  </ButtonStyleWrapper>
                 </div>
               </div>
               <div v-else class="tw-w-full tw-flex tw-justify-center">
@@ -296,18 +317,30 @@
                 </p>
               </div>
               <div class="tw-flex tw-w-full tw-justify-start tw-col-span-2">
-                <button
+                <ButtonStyleWrapper
                   v-if="isSubmitButtonVisible"
-                  class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
-                  :style="submitButtonStyle"
-                  :class="{ 'tw-w-full': isMobileDevice }"
+                  :selected-button-style-id="
+                    viewModel.buttonStyles.selectedButtonStyleId
+                  "
+                  :icon-color="viewModel.buttonStyles.style.backgroundColor"
+                  :full-width="!!isMobileDevice"
+                  :no-margin="true"
                 >
-                  <TextWrapper
-                    :text-style="submitButtonTextStyle"
-                    :text="viewModel.buttonText"
-                    class="tw-text-center tw-text-base"
-                  />
-                </button>
+                  <button
+                    class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
+                    :style="submitButtonStyle"
+                    :class="{
+                      'tw-w-full': isMobileDevice,
+                      'tw-min-w-[120px]': isDecorativeSubmitStyle,
+                    }"
+                  >
+                    <TextWrapper
+                      :text-style="submitButtonTextStyle"
+                      :text="viewModel.buttonText"
+                      class="tw-text-center tw-text-base"
+                    />
+                  </button>
+                </ButtonStyleWrapper>
               </div>
             </div>
             <p v-if="hasSubmitError" class="tw-text-center tw-mt-2 form-error">
@@ -426,18 +459,32 @@
                     <div
                       class="tw-flex tw-w-full tw-justify-start tw-col-span-2"
                     >
-                      <button
+                      <ButtonStyleWrapper
                         v-if="isSubmitButtonVisible"
-                        class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
-                        :style="submitButtonStyle"
-                        :class="{ 'tw-w-full': isMobileDevice }"
+                        :selected-button-style-id="
+                          viewModel.buttonStyles.selectedButtonStyleId
+                        "
+                        :icon-color="
+                          viewModel.buttonStyles.style.backgroundColor
+                        "
+                        :full-width="!!isMobileDevice"
+                        :no-margin="true"
                       >
-                        <TextWrapper
-                          :text-style="submitButtonTextStyle"
-                          :text="viewModel.buttonText"
-                          class="tw-text-center tw-text-base"
-                        />
-                      </button>
+                        <button
+                          class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
+                          :style="submitButtonStyle"
+                          :class="{
+                            'tw-w-full': isMobileDevice,
+                            'tw-min-w-[120px]': isDecorativeSubmitStyle,
+                          }"
+                        >
+                          <TextWrapper
+                            :text-style="submitButtonTextStyle"
+                            :text="viewModel.buttonText"
+                            class="tw-text-center tw-text-base"
+                          />
+                        </button>
+                      </ButtonStyleWrapper>
                     </div>
                   </div>
                   <div v-else class="tw-w-full tw-flex tw-justify-center">
@@ -476,6 +523,7 @@ import Collapsible from '../collapsible/Collapsible.vue';
 import MailingListMixin from './ContactForm.mixin.ts';
 import Media from '../media/Media.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
+import ButtonStyleWrapper from '../button/ButtonStyleWrapper.vue';
 import RecaptchaDisclosure from '../recaptcha-disclosure/RecaptchaDisclosure.vue';
 
 export default {
@@ -486,6 +534,7 @@ export default {
     Loader,
     Media,
     TextWrapper,
+    ButtonStyleWrapper,
     RecaptchaDisclosure,
   },
   mixins: [MailingListMixin],
@@ -520,6 +569,12 @@ export default {
   .c-button-full {
     @apply tw-w-full;
   }
+  /* Match the button's full-width on published mobile. The maker uses the
+     isMobileDevice prop for this; the renderer has no such state, so the
+     decorative-button wrapper is widened here via the real viewport instead. */
+  :deep(.bp-style-wrapper) {
+    @apply tw-w-full;
+  }
   .c-col-span-2 {
     @apply tw-col-span-2;
   }

package/src/brand-page/components/mailing-list/MailingList.mixin.ts

@@ -126,6 +126,12 @@ export default defineComponent({
         buttonStyle.borderRadius = '24px';
       }
 
+      // Own background colour decouples the container from the button fill (BP-5800).
+      if (this.viewModel.backgroundStyle?.backgroundColor) {
+        buttonStyle.backgroundColor =
+          this.viewModel.backgroundStyle.backgroundColor;
+      }
+
       return buttonStyle;
     },
 

package/src/brand-page/components/mailing-list/MailingList.vue

@@ -46,17 +46,23 @@
         <p v-if="hasEmailError" class="form-error">
           {{ emailError }}
         </p>
-        <button
-          :style="buttonStyle"
-          :disabled="isFormDisabled"
-          class="tw-w-full tw-py-4 tw-mt-4 tw-block tw-text-center tw-text-base tw-border-0"
-          :class="{
-            'tw-cursor-pointer hover:tw-underline': !isFormDisabled,
-            'tw-cursor-wait': isSubmitting,
-          }"
+        <ButtonStyleWrapper
+          :selected-button-style-id="viewModel.styles.selectedButtonStyleId"
+          :icon-color="viewModel.styles.style.backgroundColor"
+          :no-margin="true"
         >
-          {{ buttonText }}
-        </button>
+          <button
+            :style="buttonStyle"
+            :disabled="isFormDisabled"
+            class="tw-w-full tw-py-4 tw-mt-4 tw-block tw-text-center tw-text-base tw-border-0"
+            :class="{
+              'tw-cursor-pointer hover:tw-underline': !isFormDisabled,
+              'tw-cursor-wait': isSubmitting,
+            }"
+          >
+            {{ buttonText }}
+          </button>
+        </ButtonStyleWrapper>
         <p v-if="hasSubmitError" class="tw-text-center tw-mt-2 form-error">
           {{ submitError }}
         </p>
@@ -74,12 +80,14 @@
 import { TextInput } from '@designcrowd/fe-shared-lib';
 import MailingListMixin from './MailingList.mixin.ts';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
+import ButtonStyleWrapper from '../button/ButtonStyleWrapper.vue';
 import RecaptchaDisclosure from '../recaptcha-disclosure/RecaptchaDisclosure.vue';
 
 export default {
   components: {
     TextInput,
     TextWrapper,
+    ButtonStyleWrapper,
     RecaptchaDisclosure,
   },
   mixins: [MailingListMixin],

package/src/brand-page/components/payment/Payment.mixin.ts

@@ -126,6 +126,12 @@ export default defineComponent({
         buttonStyle.borderRadius = '26px';
       }
 
+      // Own background colour decouples the container from the button fill (BP-5800).
+      if (this.viewModel.backgroundStyle?.backgroundColor) {
+        buttonStyle.backgroundColor =
+          this.viewModel.backgroundStyle.backgroundColor;
+      }
+
       return buttonStyle;
     },
 

package/src/brand-page/components/payment/Payment.vue

@@ -49,22 +49,31 @@
         <slot name="payment-options" />
 
         <!-- TODO: Calculate or constant disabled background colour -->
-        <button
-          class="tw-w-full tw-py-4 tw-mt-4 tw-block tw-text-center tw-text-base tw-border-0"
-          :style="continueButtonStyle"
+        <ButtonStyleWrapper
+          :selected-button-style-id="
+            viewModel.buttonStyles.selectedButtonStyleId
+          "
+          :icon-color="viewModel.buttonStyles.style.backgroundColor"
+          :no-margin="true"
           :disabled="!isPaymentOptionSelectionContinueEnabled"
-          :class="{
-            'hover:tw-cursor-pointer': isPaymentOptionSelectionContinueEnabled,
-            'tw-opacity-50': !isPaymentOptionSelectionContinueEnabled,
-          }"
-          @click="onPaymentOptionSelectionContinueClick"
         >
-          <TextWrapper
-            :text-style="viewModel.buttonTextStyle"
-            :text="commonTr(`continue`)"
-            class="tw-select-none"
-          />
-        </button>
+          <button
+            class="tw-w-full tw-py-4 tw-mt-4 tw-block tw-text-center tw-text-base tw-border-0"
+            :style="continueButtonStyle"
+            :disabled="!isPaymentOptionSelectionContinueEnabled"
+            :class="{
+              'hover:tw-cursor-pointer':
+                isPaymentOptionSelectionContinueEnabled,
+            }"
+            @click="onPaymentOptionSelectionContinueClick"
+          >
+            <TextWrapper
+              :text-style="viewModel.buttonTextStyle"
+              :text="commonTr(`continue`)"
+              class="tw-select-none"
+            />
+          </button>
+        </ButtonStyleWrapper>
       </div>
       <!-- End payment option selection state -->
 
@@ -90,17 +99,25 @@
           element="p"
           class="tw-text-center"
         />
-        <button
-          class="tw-block tw-border-0 tw-mt-4 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-full hover:tw-cursor-pointer"
-          :style="continueButtonStyle"
-          @click="onDoneButtonClick"
+        <ButtonStyleWrapper
+          :selected-button-style-id="
+            viewModel.buttonStyles.selectedButtonStyleId
+          "
+          :icon-color="viewModel.buttonStyles.style.backgroundColor"
+          :no-margin="true"
         >
-          <TextWrapper
-            :text-style="viewModel.buttonTextStyle"
-            :text="commonTr(`done`)"
-            class="tw-select-none"
-          />
-        </button>
+          <button
+            class="tw-block tw-border-0 tw-mt-4 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-full hover:tw-cursor-pointer"
+            :style="continueButtonStyle"
+            @click="onDoneButtonClick"
+          >
+            <TextWrapper
+              :text-style="viewModel.buttonTextStyle"
+              :text="commonTr(`done`)"
+              class="tw-select-none"
+            />
+          </button>
+        </ButtonStyleWrapper>
       </div>
     </div>
   </section>
@@ -110,6 +127,7 @@ import { Icon, Loader } from '@designcrowd/fe-shared-lib';
 import RequestPaymentStripe from './RequestPaymentStripe.vue';
 import PaymentMixin from './Payment.mixin.ts';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
+import ButtonStyleWrapper from '../button/ButtonStyleWrapper.vue';
 import { commonTr, paymentTr } from '@src/composables/useTranslate';
 
 export default {
@@ -118,6 +136,7 @@ export default {
     Loader,
     RequestPaymentStripe,
     TextWrapper,
+    ButtonStyleWrapper,
   },
   mixins: [PaymentMixin],
   setup() {

package/src/brand-page/components/payment/RequestPaymentStripe.vue

@@ -96,25 +96,33 @@
       <!-- End Error Message -->
 
       <!-- Start Pay Button -->
-      <button
-        class="tw-block tw-border-0 tw-my-4 tw-py-2 tw-text-base tw-text-center tw-w-full"
-        :class="{
-          'hover:tw-cursor-pointer': isSubmitButtonEnabled,
-          'pay-button-disabled': !isSubmitButtonEnabled,
-        }"
-        :style="payButtonStyle"
-        :value="submitButtonMessage"
+      <!-- payButtonStyle inverts the palette (bg = text colour), so the
+           decoration colour is buttonStyles.style.color, not backgroundColor. -->
+      <ButtonStyleWrapper
+        :selected-button-style-id="props.buttonStyles.selectedButtonStyleId"
+        :icon-color="props.buttonStyles.style.color"
+        :no-margin="true"
         :disabled="!isSubmitButtonEnabled"
-        @click="onSubmitPaymentClick"
       >
-        {{
-          requestPaymentStripeTr('proceedToPayment', {
-            CURRENCY_SYMBOL: currencySymbol,
-            AMOUNT: amount,
-            CURRENCY_CODE: currencyCode,
-          })
-        }}
-      </button>
+        <button
+          class="tw-block tw-border-0 tw-my-4 tw-py-2 tw-text-base tw-text-center tw-w-full"
+          :class="{
+            'hover:tw-cursor-pointer': isSubmitButtonEnabled,
+          }"
+          :style="payButtonStyle"
+          :value="submitButtonMessage"
+          :disabled="!isSubmitButtonEnabled"
+          @click="onSubmitPaymentClick"
+        >
+          {{
+            requestPaymentStripeTr('proceedToPayment', {
+              CURRENCY_SYMBOL: currencySymbol,
+              AMOUNT: amount,
+              CURRENCY_CODE: currencyCode,
+            })
+          }}
+        </button>
+      </ButtonStyleWrapper>
       <!-- End Pay Button -->
 
       <!-- Start T&C -->
@@ -146,6 +154,7 @@ import { Icon, TextInput, Loader } from '@designcrowd/fe-shared-lib';
 import validator from 'validator';
 import IconStripe from '../icon/IconStripe.vue';
 import PaymentShippingAddress from '../shop/PaymentShippingAddress.vue';
+import ButtonStyleWrapper from '../button/ButtonStyleWrapper.vue';
 import { debug, debugError } from '../../../utils/debug.util';
 import * as constants from '../../constants';
 import {
@@ -507,9 +516,4 @@ onMounted(() => {
   @apply tw-text-xs;
   color: #f21b3f;
 }
-
-.pay-button-disabled {
-  opacity: 0.5 !important;
-  pointer-events: none;
-}
 </style>

package/src/brand-page/components/shop/Shop.vue

@@ -55,14 +55,22 @@
         <p v-else class="tw-text-center tw-text-base tw-my-4">
           {{ shopTr(`noProducts`) }}
         </p>
-        <button
+        <ButtonStyleWrapper
           v-if="viewModel.products.length >= 1"
-          class="tw-mt-4 tw-block tw-w-full tw-border-0 tw-py-3 tw-select-none tw-text-base hover:tw-cursor-pointer tw-rounded"
-          :style="buttonStyle"
-          @click="onShowCartModal"
+          :selected-button-style-id="
+            viewModel.buttonStyles.selectedButtonStyleId
+          "
+          :icon-color="viewModel.buttonStyles.style.backgroundColor"
+          :no-margin="true"
         >
-          <TextWrapper :text-style="buttonTextStyle" :text="viewCartText" />
-        </button>
+          <button
+            class="tw-mt-4 tw-block tw-w-full tw-border-0 tw-py-3 tw-select-none tw-text-base hover:tw-cursor-pointer tw-rounded"
+            :style="buttonStyle"
+            @click="onShowCartModal"
+          >
+            <TextWrapper :text-style="buttonTextStyle" :text="viewCartText" />
+          </button>
+        </ButtonStyleWrapper>
       </div>
     </div>
     <div
@@ -124,6 +132,7 @@ import ThumbnailDisplay from './ThumbnailDisplay.vue';
 import FeaturedDisplay from './FeaturedDisplay.vue';
 import ProductDetailModal from './ProductDetailModal.vue';
 import CartModal from './CartModal.vue';
+import ButtonStyleWrapper from '../button/ButtonStyleWrapper.vue';
 import { computed, onMounted, reactive } from 'vue';
 import {
   PAYMENT_OPTION_DISPLAY_TYPES,

package/src/brand-page/models/index.ts

@@ -331,6 +331,7 @@ export interface MailingListContent extends Content {
   buttonText: string;
   titleStyle: TextStyleDeclaration;
   buttonTextStyle: TextStyleDeclaration;
+  backgroundStyle?: BrandPageCssStyle;
 }
 
 export const FORM_FIELD_TYPES = {

package/src/brand-page/models/payment.model.ts

@@ -147,6 +147,7 @@ export interface RequestPaymentContent extends Content {
   descriptionStyle?: TextStyleDeclaration;
   itemTextStyle: TextStyleDeclaration;
   buttonTextStyle?: TextStyleDeclaration;
+  backgroundStyle?: BrandPageCssStyle;
 }
 
 export interface ShopContentConfig extends PaymentConfig {
@@ -191,6 +192,7 @@ export interface SupportMeContent extends Content {
   descriptionStyle: TextStyleDeclaration;
   buttonTextStyle: TextStyleDeclaration;
   itemTextStyle: TextStyleDeclaration;
+  backgroundStyle?: BrandPageCssStyle;
 }
 
 export interface CreateStripePaymentIntentResponse {

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -463,7 +463,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
       },
     },
     "userPromptContentKey": undefined,
-    "v": 18,
+    "v": 19,
   },
   "useOldLogoRenderSize": true,
 }
@@ -916,7 +916,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       },
     },
     "userPromptContentKey": undefined,
-    "v": 18,
+    "v": 19,
   },
   "useOldLogoRenderSize": true,
 }
@@ -1376,7 +1376,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       },
     },
     "userPromptContentKey": undefined,
-    "v": 18,
+    "v": 19,
   },
   "useOldLogoRenderSize": true,
 }

package/src/brand-page/utils/button.util.ts

@@ -37,3 +37,20 @@ export const getBoxShadowValue = (buttonStyles: ButtonStyles): string => {
 
   return boxShadowValue;
 };
+
+// The "decorative" button styles — brushstroke / arrow / torn-paper — whose visual
+// is drawn by ButtonStyleWrapper rather than plain CSS. Their banner-like SVG
+// decoration needs the button to be reasonably wide to render legibly, so narrow
+// (w-fit) hosts should widen when one of these is active (BP-5800).
+export const BUTTON_STYLE_BRUSHSTROKE = 'BUTTON_STYLE_19';
+export const BUTTON_STYLE_ARROW = 'BUTTON_STYLE_20';
+export const BUTTON_STYLE_PAPER = 'BUTTON_STYLE_21';
+
+export const DECORATIVE_BUTTON_STYLE_IDS = [
+  BUTTON_STYLE_BRUSHSTROKE,
+  BUTTON_STYLE_ARROW,
+  BUTTON_STYLE_PAPER,
+];
+
+export const isDecorativeButtonStyle = (styleId?: string): boolean =>
+  !!styleId && DECORATIVE_BUTTON_STYLE_IDS.includes(styleId);