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

package/lib/src/brand-page-maker/constants/config-settings-constant.js

@@ -4,7 +4,7 @@ import * as uuid from 'uuid';
 import { colorConvertor, backgroundColorConvertor, borderColorConvertor, displayStyleConvertor, galleryTypeConvertor, imageAspectRatioConvertor, textAlignmentOptionsConvertor, videoContentStateConvertor, fillColorConvertor, bannerAlignDisplayStyleConvertor, aboutDisplayStyleConvertor, dividerStyleConvertor, shapeSizeOptionsConvertor, buttonLinkStyleConvertor, textSizeValueConvertor, textColumnStyleConvertor, contactLayoutStyleConvertor, paymentLinkDisplayStyleConvertor, shopDisplayConvertor, shopAspectRatioConvertor, } from '../convertors';
 import { ALIGN_CENTERED, DISPLAY_STYLE_COLLAPSED, DISPLAY_STYLE_PREVIEW, } from '@brand-page';
 import { imageFieldVisibilityAssessor, imageOptionVisibilityAssessor, imageGalleryFieldVisibilityAssessor, cardFillVisibilityAssessor, mediaSectionItemsFieldTypeAssessor, dividerToggleFieldVisibilityAssessor, shapeSectionItemsFieldTypeAssessor, colorReplacementVisibilityTypeAssessor, colorReplacementProfileVisibilityTypeAssessor, colorReplacementIconVisibilityTypeAssessor, imagesSectionCardStyleVisibilityAssessor, contactCardDisplayTypeVisibilityAssessor, imageUrlVisibilityAssessor, displayTypeVisibilityAssessor, logoFieldVisibilityAssessor, shapesSectionCardStyleVisibilityAssessor, shopImageOptionVisibilityAssessor, shopItemColorVisibility, personalisationOverrideVisibility, } from '../assessors';
-import { logoBackgroundColorDefaultGetter, paymentFillColorFieldDefaultGetter, paymentTextAndBorderColorFieldDefaultGetter, shopBorderColorFieldDefaultGetter, shopFillColorFieldDefaultGetter, textColorFieldDefaultGetter, } from '../default-getters';
+import { contactFormBackgroundColorDefaultGetter, logoBackgroundColorDefaultGetter, paymentFillColorFieldDefaultGetter, paymentTextAndBorderColorFieldDefaultGetter, shopBorderColorFieldDefaultGetter, shopFillColorFieldDefaultGetter, textColorFieldDefaultGetter, } from '../default-getters';
 import { socialLinksIconDisplayStyleConvertor } from '../convertors/social-links-icon-display-style.convertor';
 import { getTextMediaOptionsConverterByMediaType } from '../convertors/text-image-display-style.convertor';
 import { testimonialDisplayStyleConvertor } from '../convertors/testimonial-display-style-convertor';
@@ -1463,6 +1463,16 @@ export const MAILING_LIST_CONTENT_SETTINGS_CONFIG = () => ({
         titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
         buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
         ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
+        backgroundStyle: {
+            type: 'color',
+            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+            defaultValue: {},
+            isInline: true,
+            showToggle: false,
+            title: contentSettingsTr(`backgroundColorTitle`),
+            valueConvertor: backgroundColorConvertor,
+            defaultGetter: paymentFillColorFieldDefaultGetter,
+        },
     },
     isEnabled: true,
     isLocked: false,
@@ -1634,6 +1644,16 @@ export const REQUEST_PAYMENT_CONTENT_SETTINGS_CONFIG = () => ({
             label: contentSettingsTr(`buttonTextStyleLabel`),
         },
         ...PADDING_CONTROL_FIELDS(REQUEST_PAYMENT_GROUPS.style),
+        backgroundStyle: {
+            type: 'color',
+            groupId: REQUEST_PAYMENT_GROUPS.style,
+            defaultValue: {},
+            isInline: true,
+            showToggle: false,
+            title: contentSettingsTr(`backgroundColorTitle`),
+            valueConvertor: backgroundColorConvertor,
+            defaultGetter: paymentFillColorFieldDefaultGetter,
+        },
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -1699,6 +1719,16 @@ export const SUPPORT_ME_CONTENT_SETTINGS_CONFIG = () => ({
         },
         buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
         ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
+        backgroundStyle: {
+            type: 'color',
+            groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+            defaultValue: {},
+            isInline: true,
+            showToggle: false,
+            title: contentSettingsTr(`backgroundColorTitle`),
+            valueConvertor: backgroundColorConvertor,
+            defaultGetter: paymentFillColorFieldDefaultGetter,
+        },
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -1847,6 +1877,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
             showToggle: false,
             title: contentSettingsTr(`backgroundColorTitle`),
             valueConvertor: backgroundColorConvertor,
+            defaultGetter: contactFormBackgroundColorDefaultGetter,
         },
     },
     isEnabled: true,

package/lib/src/brand-page-maker/default-getters/contact-form-background-color.default-getter.d.ts

@@ -0,0 +1,8 @@
+import type { DefaultGetter } from '../models';
+/**
+ * Contact-form "Background color" default (BP-5800). On brand-page/brand-contact the
+ * collapsible container takes the button fill, so default the picker to it. On
+ * brand-site the field is the section background behind the card (its own "Card color"),
+ * which stays transparent — so no default there.
+ */
+export declare const contactFormBackgroundColorDefaultGetter: DefaultGetter<BrandPageCssStyle>;

package/lib/src/brand-page-maker/default-getters/contact-form-background-color.default-getter.js

@@ -0,0 +1,16 @@
+import { RGBAtoHex } from '@utils/helpers';
+import { BRAND_PAGE_TYPES } from '@brand-page';
+/**
+ * Contact-form "Background color" default (BP-5800). On brand-page/brand-contact the
+ * collapsible container takes the button fill, so default the picker to it. On
+ * brand-site the field is the section background behind the card (its own "Card color"),
+ * which stays transparent — so no default there.
+ */
+export const contactFormBackgroundColorDefaultGetter = (brandPage) => {
+    if (brandPage.brandPageType === BRAND_PAGE_TYPES.brandSite) {
+        return {};
+    }
+    return {
+        backgroundColor: RGBAtoHex(brandPage.styles.buttonStyles.style.backgroundColor),
+    };
+};

package/lib/src/brand-page-maker/default-getters/index.d.ts

@@ -2,3 +2,4 @@ export * from './text-color.default-getter';
 export * from './payment-fill-color.default-getter';
 export * from './payment-text-and-border-color.default-getter';
 export * from './logo-background-fill.default-getter';
+export * from './contact-form-background-color.default-getter';

package/lib/src/brand-page-maker/default-getters/index.js

@@ -2,3 +2,4 @@ export * from './text-color.default-getter';
 export * from './payment-fill-color.default-getter';
 export * from './payment-text-and-border-color.default-getter';
 export * from './logo-background-fill.default-getter';
+export * from './contact-form-background-color.default-getter';

package/lib/src/brand-page-maker/models/button-styles-config.js

@@ -352,7 +352,11 @@ export const availableButtonStyleConfigs = [
         iconName: 'button-brushstroke',
         iconViewBox: '0 0 60 20',
         options: ['buttonFillColor', 'buttonIconColor'],
-        brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+        brandPageType: [
+            BRAND_PAGE_TYPES.default,
+            BRAND_PAGE_TYPES.brandContact,
+            BRAND_PAGE_TYPES.brandSite,
+        ],
     },
     {
         id: 'BUTTON_STYLE_20',
@@ -369,7 +373,11 @@ export const availableButtonStyleConfigs = [
         iconName: 'button-arrow',
         iconViewBox: '0 0 60 20',
         options: ['buttonFillColor', 'buttonIconColor'],
-        brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+        brandPageType: [
+            BRAND_PAGE_TYPES.default,
+            BRAND_PAGE_TYPES.brandContact,
+            BRAND_PAGE_TYPES.brandSite,
+        ],
     },
     {
         id: 'BUTTON_STYLE_21',
@@ -386,6 +394,10 @@ export const availableButtonStyleConfigs = [
         iconName: 'button-paper',
         iconViewBox: '0 0 60 20',
         options: ['buttonFillColor', 'buttonIconColor'],
-        brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+        brandPageType: [
+            BRAND_PAGE_TYPES.default,
+            BRAND_PAGE_TYPES.brandContact,
+            BRAND_PAGE_TYPES.brandSite,
+        ],
     },
 ];

package/lib/src/brand-page-maker/models/content-settings.js

@@ -232,6 +232,7 @@ export const createInitialMailingListContent = (options) => {
             textStyleType: TEXT_STYLE_TYPES.buttons,
             textAlign: 'center',
         },
+        backgroundStyle: {},
     };
 };
 export const createInitialRequestPaymentContent = (options) => {
@@ -274,6 +275,7 @@ export const createInitialRequestPaymentContent = (options) => {
             textStyleType: TEXT_STYLE_TYPES.buttons,
             textAlign: 'center',
         },
+        backgroundStyle: {},
     };
 };
 export const createInitialShopContent = (options) => {
@@ -365,6 +367,7 @@ export const createInitialSupportMeContent = (options) => {
             textStyleType: TEXT_STYLE_TYPES.buttons,
             textAlign: 'center',
         },
+        backgroundStyle: {},
     };
 };
 export const createInitialContactFormContent = (options) => {

package/lib/src/css/library.brand-page-brandCrowd.min.css

@@ -1100,6 +1100,9 @@ a.maker-anchor {
 .tw-min-w-8 {
     min-width: 2rem
 }
+.tw-min-w-\[120px\] {
+    min-width: 120px
+}
 .tw-min-w-\[310px\] {
     min-width: 310px
 }
@@ -1442,16 +1445,6 @@ a.maker-anchor {
     -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
             transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
-.tw-translate-y-\[-10\%\] {
-    --tw-translate-y: -10%;
-    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
-.tw-translate-y-\[-4\%\] {
-    --tw-translate-y: -4%;
-    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
 .tw-translate-y-px {
     --tw-translate-y: 1px;
     -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3025,9 +3018,6 @@ a.maker-anchor {
 .tw-leading-tight {
     line-height: 1.25
 }
-.tw-text-\[var\(--icon-color\)\] {
-    color: var(--icon-color)
-}
 .tw-text-black {
     --tw-text-opacity: 1;
     color: rgb(0 0 0 / var(--tw-text-opacity))
@@ -5662,39 +5652,56 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   max-height: 45vh;
 }
 
-.bp-button-paper-top[data-v-604db8c6] {
-  --tw-translate-y: -10%;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  color: var(--icon-color);
+/* Decorative styles on submit buttons render flush at the bottom. Zero the host
+   button's own margins: its decoration is positioned relative to the WRAPPER, so a
+   margin on the button itself shifts it out of alignment with the decoration. The
+   top gap is instead applied to the wrapper (tw-mt-4 above) so the whole decorated
+   unit moves together and stays flush at the container's bottom edge (BP-5800). */
+.bp-style-wrapper--no-margin[data-v-c2533ae5] button {
+  margin-top: 0;
+  margin-bottom: 0;
 }
-.bp-button-paper-bottom[data-v-604db8c6] {
-  --tw-translate-y: -4%;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  color: var(--icon-color);
+
+/* The brushstroke ends are transformed over the button's left/right edges, so
+   they must not capture clicks (BP-5882). */
+.bp-icon-brush-left[data-v-c2533ae5],
+.bp-icon-brush-right[data-v-c2533ae5] {
+  pointer-events: none;
 }
-.bp-button-paper-top[data-v-604db8c6] svg,
-.bp-button-paper-bottom[data-v-604db8c6] svg {
-  width: 100%;
-  height: auto;
+
+/* Torn-paper: clip the button itself to a torn silhouette via a CSS alpha mask
+   (the button keeps its own fill). The mask stretches to the button box, so the
+   torn shape always matches the button — it can't overhang neighbours, stretch
+   past the button, or block clicks the way the old absolute overlay did
+   (BP-5882/BP-5883). */
+.bp-button-paper[data-v-c2533ae5] button,
+.bp-button-paper[data-v-c2533ae5] a {
+  -webkit-mask: var(--paper-mask) no-repeat center / 100% 100%;
+  mask: var(--paper-mask) no-repeat center / 100% 100%;
+  -webkit-mask-mode: alpha;
+  mask-mode: alpha;
 }
-.bp-icon-brush-left[data-v-604db8c6] svg {
+.bp-icon-brush-left[data-v-c2533ae5] svg {
   -webkit-transform: translateX(-99%);
           transform: translateX(-99%);
   width: auto;
 }
-.bp-icon-brush-right[data-v-604db8c6] svg {
+.bp-icon-brush-right[data-v-c2533ae5] svg {
   width: auto;
 }
-.bp-button-arrow[data-v-604db8c6],
-.device-wrapper--mobile .bp-button-arrow[data-v-604db8c6] {
-  clip-path: polygon(5% 100%, 0% 50%, 5% 0%, 95% 0%, 100% 50%, 95% 100%);
-}
-@media (min-width: 767px) {
-.bp-button-arrow[data-v-604db8c6] {
-    clip-path: polygon(3% 100%, 0% 50%, 3% 0%, 97% 0%, 100% 50%, 97% 100%);
-}
+.bp-button-arrow[data-v-c2533ae5],
+.device-wrapper--mobile .bp-button-arrow[data-v-c2533ae5] {
+  /* Fixed-px arrowhead (not %) so the chevron is equally sharp at any button
+     width — a %-based point collapses on narrow buttons (e.g. the 120px contact
+     form submit) and only reads as an arrow on wide ones. */
+  clip-path: polygon(
+    12px 100%,
+    0 50%,
+    12px 0,
+    calc(100% - 12px) 0,
+    100% 50%,
+    calc(100% - 12px) 100%
+  );
 }
 
 .empty-para[data-v-c90cc6bc] p:empty::after {
@@ -5808,7 +5815,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   text-decoration: underline;
 }
 
-.form-error[data-v-49b27af8] {
+.form-error[data-v-ef964594] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f
@@ -6063,14 +6070,10 @@ select[data-v-14e7c7c7] {
   background-position: right 12px center;
 }
 
-.form-error[data-v-7731d899] {
+.form-error[data-v-0cc4cbbd] {
   font-size: 0.75rem;
   line-height: 1rem;
-  color: #f21b3f;
-}
-.pay-button-disabled[data-v-7731d899] {
-  opacity: 0.5 !important;
-  pointer-events: none;
+  color: #f21b3f
 }
 
 /* TODO: review CSS setup, scoped CSS will not work in slot */
@@ -6166,53 +6169,53 @@ select[data-v-14e7c7c7] {
   width: 100%;
 }
 
-.form-error[data-v-d0a8cdec] {
+.form-error[data-v-a6dab4ce] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.contact-container[data-v-d0a8cdec] {
+.contact-container[data-v-a6dab4ce] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c-text-padding[data-v-d0a8cdec] {
+.c-text-padding[data-v-a6dab4ce] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.device-wrapper--mobile .c-divided-container[data-v-d0a8cdec] {
+.device-wrapper--mobile .c-divided-container[data-v-a6dab4ce] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.device-wrapper--mobile .c-divided-container-reverse[data-v-d0a8cdec] {
+.device-wrapper--mobile .c-divided-container-reverse[data-v-a6dab4ce] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
 }
 @media (max-width: 767px) {
-.c-button-full[data-v-d0a8cdec] {
+.c-button-full[data-v-a6dab4ce] {
     width: 100%;
 }
-.c-col-span-2[data-v-d0a8cdec] {
+.c-col-span-2[data-v-a6dab4ce] {
     grid-column: span 2 / span 2;
 }
-.c-mobile-padding[data-v-d0a8cdec] {
+.c-mobile-padding[data-v-a6dab4ce] {
     padding: 1rem;
 }
-.c-text-padding[data-v-d0a8cdec] {
+.c-text-padding[data-v-a6dab4ce] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.c-divided-container[data-v-d0a8cdec] {
+.c-divided-container[data-v-a6dab4ce] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-divided-container-reverse[data-v-d0a8cdec] {
+.c-divided-container-reverse[data-v-a6dab4ce] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6220,16 +6223,16 @@ select[data-v-14e7c7c7] {
 }
 }
 @media (min-width: 767px) {
-.c-aspect-square[data-v-d0a8cdec] {
+.c-aspect-square[data-v-a6dab4ce] {
     aspect-ratio: 1 / 1;
 }
-.c-divided-container[data-v-d0a8cdec] {
+.c-divided-container[data-v-a6dab4ce] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c-divided-container-reverse[data-v-d0a8cdec] {
+.c-divided-container-reverse[data-v-a6dab4ce] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
@@ -6861,44 +6864,44 @@ select[data-v-14e7c7c7] {
   color: #f21b3f;
 }
 
-.inner-container[data-v-24954146] {
+.inner-container[data-v-c359b5e7] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.outer-container[data-v-24954146] {
+.outer-container[data-v-c359b5e7] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.modal-cart[data-v-24954146] .cart-image {
+.modal-cart[data-v-c359b5e7] .cart-image {
   width: 3rem;
 }
-.modal-cart[data-v-24954146] .cart-option {
+.modal-cart[data-v-c359b5e7] .cart-option {
   width: 100%;
 }
-.success-bar-container[data-v-24954146] .tw-bg-success-500 {
+.success-bar-container[data-v-c359b5e7] .tw-bg-success-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(36 168 16 / var(--tw-bg-opacity));
 }
 @media (min-width: 640px) {
-.modal-product-detail[data-v-24954146] .modal {
+.modal-product-detail[data-v-c359b5e7] .modal {
     min-width: 100vh;
 }
-.modal-cart[data-v-24954146] .modal {
+.modal-cart[data-v-c359b5e7] .modal {
     min-width: 90vh;
     max-height: 90vh;
 }
-.modal-cart[data-v-24954146] .cart-image {
+.modal-cart[data-v-c359b5e7] .cart-image {
     width: 8rem;
 }
-.modal-cart[data-v-24954146] .cart-option {
+.modal-cart[data-v-c359b5e7] .cart-option {
     width: 75%;
 }
-.success-bar[data-v-24954146] {
+.success-bar[data-v-c359b5e7] {
     width: 50%;
 }
 }
 @media (max-width: 640px) {
-.success-bar[data-v-24954146] {
+.success-bar[data-v-c359b5e7] {
     width: 91.666667%;
 }
 }