@designcrowd/library.brand-page 6.0.21 → 6.0.22

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.js

@@ -171,6 +171,11 @@ export default defineComponent({
             return this.field.showToggle;
         },
         disableTransparent() {
+            // Supports a function of brandPageType (like variant/min/maxLength) so a
+            // field can disable transparent only on some website types.
+            if (typeof this.field.disableTransparent === 'function') {
+                return this.field.disableTransparent(this.brandPageType);
+            }
             return this.field.disableTransparent || false;
         },
         plainTextValue() {

package/lib/src/shared/content-settings/models.d.ts

@@ -71,6 +71,7 @@ export type FieldGroup = ContentSettingsFieldGroup & {
 export interface CreateInitialContentOptions {
     userState: UserState;
     brandPageType: BrandPageType;
+    buttonFillColor?: string;
 }
 export interface AddContentOption<TContent> {
     type: ContentType;

package/lib/src/shared/content-settings/store/content-settings-store.js

@@ -5,6 +5,7 @@ import { UI_EVENT_SOURCES } from '../../models';
 import { CONTENT_SETTINGS_DISPLAY_MODES, ITEM_CATEGORIES, ITEM_CATEGORY_NAMES, } from '@brand-page-maker/models';
 import { useUiStore, useBrandPageMakerUserStore, useBrandPageMakerStore, useVideoStore, } from '@brand-page-maker/stores';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
+import { useUiStyleSettingsStore } from '@shared/style-settings/store';
 import { useUiSideBarStore } from '../../side-bar/store';
 import { createDefaultContentItemGroupState, createDefaultContentItemState, } from '../../navigation-style-settings/store';
 import { adminValidatorsDict, dummyValidator, validatorDict, } from '@brand-page-maker/validators';
@@ -358,6 +359,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
         addItemByType({ type, index, }) {
             const userStore = useBrandPageMakerUserStore();
             const brandPageMakerStore = useBrandPageMakerStore();
+            const styleSettingsStore = useUiStyleSettingsStore();
             const option = this.addContentOptions.find((o) => o.type === type);
             if (!option) {
                 console.error(`Unable to locate add content option type for '${type}'`);
@@ -366,6 +368,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
             const content = option.createInitialContent({
                 userState: userStore.$state,
                 brandPageType: brandPageMakerStore.brandPageType,
+                buttonFillColor: styleSettingsStore.buttonFillColor,
             });
             const settingsConfig = CONTENT_SETTINGS_CONFIGS()[content.type];
             const fields = Object.keys(content)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.0.21",
+  "version": "6.0.22",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -71,7 +71,7 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "1.6.0",
-    "@designcrowd/fe-shared-lib": "2.0.0",
+    "@designcrowd/fe-shared-lib": "2.0.7",
     "@pinia/nuxt": "0.11.3",
     "@storybook/react": "9.0.4",
     "@tiptap/extension-bubble-menu": "^2.14.0",

package/src/brand-page/components/button/ButtonStyleWrapper.vue

@@ -3,8 +3,14 @@
     class="bp-style-wrapper"
     :class="{
       'bp-button-arrow': isArrowIcon,
-      'tw-flex tw-justify-center tw-w-full': isBrushStrokeIcon,
-      'tw-relative tw-mb-6': isPaperIcon,
+      'tw-flex tw-justify-center': isBrushStrokeIcon,
+      'bp-button-shape': isPaperIcon,
+      'tw-mb-6': isPaperIcon && !noMargin,
+      'bp-style-wrapper--no-margin': isDecorative && noMargin,
+      'tw-mt-4': isDecorative && noMargin,
+      'tw-opacity-50': disabled,
+      'tw-w-full': isDecorative && fullWidth,
+      'tw-w-fit': isDecorative && !fullWidth,
     }"
   >
     <template v-if="isBrushStrokeIcon">
@@ -25,21 +31,20 @@
       />
     </template>
     <template v-else-if="isPaperIcon">
+      <!-- Torn-paper: the fe-shared button-paper icon, stretched to the button box
+           (preserveAspectRatio none), sits behind the transparent button as its
+           shape. Inert (pointer-events:none) inset layer, so it fills exactly,
+           doesn't inflate the button's size, and doesn't capture clicks
+           (BP-5882/BP-5883). -->
       <IconV2
-        name="button-paper-top"
-        view-box="41 0 120 16"
-        size="auto"
-        class="tw-absolute tw-w-full bp-button-paper-top"
-        :style="paperIconStyle"
+        name="button-paper"
+        view-box="0 0 94 28"
+        size="full"
+        preserve-aspect-ratio="none"
+        class="bp-icon-shape"
+        :style="{ color: iconColor }"
       />
       <slot :inner-class="'tw-px-5'" />
-      <IconV2
-        name="button-paper-bottom"
-        view-box="41 0 120 16"
-        size="auto"
-        class="tw-absolute tw-w-full bp-button-paper-bottom"
-        :style="paperIconStyle"
-      />
     </template>
     <template v-else>
       <slot :inner-class="'tw-px-5'" />
@@ -50,25 +55,54 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { Icon as IconV2 } from '@designcrowd/fe-shared-lib';
+import {
+  BUTTON_STYLE_ARROW,
+  BUTTON_STYLE_BRUSHSTROKE,
+  BUTTON_STYLE_PAPER,
+  isDecorativeButtonStyle,
+} from '../../utils/button.util';
 
-const props = defineProps<{
-  selectedButtonStyleId?: string;
-  iconColor?: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    selectedButtonStyleId?: string;
+    iconColor?: string;
+    // Mirror the host button's width so the decoration matches its box.
+    // Defaults to true to preserve the original (full-width link) behaviour.
+    fullWidth?: boolean;
+    // Set by submit buttons (contact form, payment, mailing list, shop). Makes a
+    // decorative button sit flush at the container's bottom edge: drops the paper
+    // style's bottom margin, zeroes the host button's own margins (which would
+    // otherwise shift it out of sync with its wrapper-anchored decoration), and
+    // moves the top gap onto the wrapper. Standalone buttons keep it off (BP-5800).
+    noMargin?: boolean;
+    // Dims the whole wrapper to 50% when the host button is disabled — for every
+    // style, so disabled reads consistently. (Decorative styles were previously
+    // exempt to avoid a muddy tone with the old absolute-overlay rendering; the
+    // torn-paper mask removed that rendering, so decorative buttons now fade like
+    // the rest. BP-5882/BP-5883.)
+    disabled?: boolean;
+  }>(),
+  {
+    selectedButtonStyleId: undefined,
+    iconColor: undefined,
+    fullWidth: true,
+    noMargin: false,
+    disabled: false,
+  },
+);
 
 const isPaperIcon = computed(
-  () => props.selectedButtonStyleId === 'BUTTON_STYLE_21',
+  () => props.selectedButtonStyleId === BUTTON_STYLE_PAPER,
 );
 const isArrowIcon = computed(
-  () => props.selectedButtonStyleId === 'BUTTON_STYLE_20',
+  () => props.selectedButtonStyleId === BUTTON_STYLE_ARROW,
 );
 const isBrushStrokeIcon = computed(
-  () => props.selectedButtonStyleId === 'BUTTON_STYLE_19',
+  () => props.selectedButtonStyleId === BUTTON_STYLE_BRUSHSTROKE,
+);
+const isDecorative = computed(() =>
+  isDecorativeButtonStyle(props.selectedButtonStyleId),
 );
-
-const paperIconStyle = computed(() => ({
-  '--icon-color': props.iconColor,
-}));
 
 const brushLeftStyle = computed(() => ({
   '--icon-color': props.iconColor,
@@ -86,37 +120,71 @@ const brushRightStyle = computed(() => ({
 </script>
 
 <style scoped>
-.bp-button-paper-top {
-  @apply tw-translate-y-[-10%] tw-text-[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 :deep(button) {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-.bp-button-paper-bottom {
-  @apply tw-translate-y-[-4%] tw-text-[var(--icon-color)];
-}
-
-.bp-button-paper-top :deep(svg),
-.bp-button-paper-bottom :deep(svg) {
-  width: 100%;
-  height: auto;
+/* Brushstroke: flanking brush-end icons are transformed over the button's
+   left/right edges, so they must not capture clicks (BP-5882). */
+.bp-icon-brush-left,
+.bp-icon-brush-right {
+  pointer-events: none;
 }
-
 .bp-icon-brush-left :deep(svg) {
   transform: translateX(-99%);
   width: auto;
 }
-
 .bp-icon-brush-right :deep(svg) {
   width: auto;
 }
 
-.bp-button-arrow,
-.device-wrapper--mobile .bp-button-arrow {
-  clip-path: polygon(5% 100%, 0% 50%, 5% 0%, 95% 0%, 100% 50%, 95% 100%);
+/* Torn-paper: the button-paper icon sits BEHIND the button as its shape. The
+   wrapper is the positioning context; the icon is an inert inset layer that fills
+   the button box exactly (inset:0 + preserveAspectRatio none) without inflating
+   its size or capturing clicks (BP-5882/BP-5883). The button's own fill is made
+   transparent so the icon's colour shows through. */
+.bp-button-shape {
+  position: relative;
+}
+.bp-icon-shape {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.bp-button-shape :deep(button),
+.bp-button-shape :deep(a) {
+  position: relative; /* sit above the inert background */
+  /* !important to override the host button's inline background-color. */
+  background-color: transparent !important;
+}
+/* button-paper ships hardcoded fill="black"; recolour to the button's fill. CSS
+   fill overrides the presentation attribute; clip-path rects are geometric so
+   recolouring them is harmless. */
+.bp-icon-shape :deep(path),
+.bp-icon-shape :deep(rect) {
+  fill: currentColor;
 }
 
-@media (min-width: 767px) {
-  .bp-button-arrow {
-    clip-path: polygon(3% 100%, 0% 50%, 3% 0%, 97% 0%, 100% 50%, 97% 100%);
-  }
+.bp-button-arrow,
+.device-wrapper--mobile .bp-button-arrow {
+  /* 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%
+  );
 }
 </style>

package/src/brand-page/components/button/ButtonStyleWrapper.vue.test.ts

@@ -0,0 +1,167 @@
+import { shallowMount } from '@vue/test-utils';
+import ButtonStyleWrapper from './ButtonStyleWrapper.vue';
+
+// The three decorative styles that ONLY render via this wrapper (BP-5546).
+const BRUSHSTROKE = 'BUTTON_STYLE_19';
+const ARROW = 'BUTTON_STYLE_20';
+const PAPER = 'BUTTON_STYLE_21';
+
+const HOST_SLOT = '<button class="host-button">Send</button>';
+
+const mountWrapper = (props: Record<string, unknown> = {}) =>
+  shallowMount(ButtonStyleWrapper, {
+    props,
+    slots: { default: HOST_SLOT },
+  });
+
+describe('ButtonStyleWrapper', () => {
+  describe('renders the host button (slot) for every style', () => {
+    test.each([
+      ['no style', undefined],
+      ['plain css style', 'BUTTON_STYLE_1'],
+      ['brushstroke', BRUSHSTROKE],
+      ['arrow', ARROW],
+      ['paper', PAPER],
+    ])('%s', (_label, selectedButtonStyleId) => {
+      const wrapper = mountWrapper({ selectedButtonStyleId });
+
+      expect(wrapper.find('button.host-button').exists()).toBe(true);
+    });
+  });
+
+  describe('decorative styles draw their SVG decoration', () => {
+    test('brushstroke (19) renders flanking brush ends', () => {
+      const wrapper = mountWrapper({ selectedButtonStyleId: BRUSHSTROKE });
+
+      expect(wrapper.classes()).toEqual(
+        expect.arrayContaining(['tw-flex', 'tw-justify-center']),
+      );
+      expect(wrapper.find('.bp-icon-brush-left').exists()).toBe(true);
+      expect(wrapper.find('.bp-icon-brush-right').exists()).toBe(true);
+    });
+
+    test('arrow (20) clips the button into a chevron', () => {
+      const wrapper = mountWrapper({ selectedButtonStyleId: ARROW });
+
+      expect(wrapper.classes()).toContain('bp-button-arrow');
+    });
+
+    test('paper (21) renders the torn button-paper icon behind the button', () => {
+      const wrapper = mountWrapper({ selectedButtonStyleId: PAPER });
+
+      // Icon shape behind the button — not absolute overlay elements (BP-5882/5883).
+      expect(wrapper.classes()).toEqual(
+        expect.arrayContaining(['bp-button-shape', 'tw-mb-6']),
+      );
+      expect(wrapper.find('.bp-button-paper-top').exists()).toBe(false);
+      expect(wrapper.find('.bp-button-paper-bottom').exists()).toBe(false);
+      // The torn shape is the fe-shared button-paper icon, stretched to the button.
+      const shape = wrapper.find('.bp-icon-shape');
+
+      expect(shape.exists()).toBe(true);
+      expect(shape.attributes('name')).toBe('button-paper');
+    });
+  });
+
+  describe('submit buttons render decorative styles flush (BP-5800)', () => {
+    test.each([BRUSHSTROKE, ARROW, PAPER])(
+      '%s gets the no-margin class + wrapper top margin when noMargin is set',
+      (selectedButtonStyleId) => {
+        const wrapper = mountWrapper({ selectedButtonStyleId, noMargin: true });
+
+        // The top gap moves onto the wrapper so the decoration stays synced;
+        // the CSS zeroes the host button's own margins.
+        expect(wrapper.classes()).toContain('bp-style-wrapper--no-margin');
+        expect(wrapper.classes()).toContain('tw-mt-4');
+      },
+    );
+
+    test('paper drops its bottom margin when noMargin is set', () => {
+      const wrapper = mountWrapper({
+        selectedButtonStyleId: PAPER,
+        noMargin: true,
+      });
+
+      expect(wrapper.classes()).not.toContain('tw-mb-6');
+    });
+
+    test('non-decorative styles never get the no-margin class', () => {
+      const wrapper = mountWrapper({
+        selectedButtonStyleId: 'BUTTON_STYLE_1',
+        noMargin: true,
+      });
+
+      expect(wrapper.classes()).not.toContain('bp-style-wrapper--no-margin');
+    });
+  });
+
+  describe('disabled dimming (BP-5800)', () => {
+    test('dims non-decorative buttons when disabled', () => {
+      const wrapper = mountWrapper({
+        selectedButtonStyleId: 'BUTTON_STYLE_1',
+        disabled: true,
+      });
+
+      expect(wrapper.classes()).toContain('tw-opacity-50');
+    });
+
+    test.each([BRUSHSTROKE, ARROW, PAPER])(
+      'dims decorative style %s when disabled (consistent with other styles)',
+      (selectedButtonStyleId) => {
+        const wrapper = mountWrapper({ selectedButtonStyleId, disabled: true });
+
+        expect(wrapper.classes()).toContain('tw-opacity-50');
+      },
+    );
+
+    test('is not dimmed by default', () => {
+      const wrapper = mountWrapper({ selectedButtonStyleId: 'BUTTON_STYLE_1' });
+
+      expect(wrapper.classes()).not.toContain('tw-opacity-50');
+    });
+  });
+
+  describe('non-decorative styles are a layout no-op', () => {
+    test.each([
+      ['no style', undefined],
+      ['css style', 'BUTTON_STYLE_1'],
+    ])(
+      '%s adds no decoration and no width class',
+      (_label, selectedButtonStyleId) => {
+        const wrapper = mountWrapper({ selectedButtonStyleId });
+
+        expect(wrapper.classes()).not.toContain('bp-button-arrow');
+        expect(wrapper.find('.bp-icon-brush-left').exists()).toBe(false);
+        expect(wrapper.find('.bp-button-paper-top').exists()).toBe(false);
+        // Width-neutral: must not force the host's width either way.
+        expect(wrapper.classes()).not.toContain('tw-w-full');
+        expect(wrapper.classes()).not.toContain('tw-w-fit');
+      },
+    );
+  });
+
+  describe('width is preserved via the fullWidth prop', () => {
+    test.each([BRUSHSTROKE, ARROW, PAPER])(
+      '%s stretches full-width when fullWidth (default)',
+      (selectedButtonStyleId) => {
+        const wrapper = mountWrapper({ selectedButtonStyleId });
+
+        expect(wrapper.classes()).toContain('tw-w-full');
+        expect(wrapper.classes()).not.toContain('tw-w-fit');
+      },
+    );
+
+    test.each([BRUSHSTROKE, ARROW, PAPER])(
+      '%s shrinks to the host box when fullWidth is false',
+      (selectedButtonStyleId) => {
+        const wrapper = mountWrapper({
+          selectedButtonStyleId,
+          fullWidth: false,
+        });
+
+        expect(wrapper.classes()).toContain('tw-w-fit');
+        expect(wrapper.classes()).not.toContain('tw-w-full');
+      },
+    );
+  });
+});

package/src/brand-page/components/collapsible/Collapsible.mixin.ts

@@ -28,6 +28,11 @@ export default defineComponent({
       required: false,
       default: undefined,
     },
+    backgroundStyle: {
+      type: Object as PropType<BrandPageCssStyle>,
+      required: false,
+      default: undefined,
+    },
     context: {
       type: Object as PropType<BrandPageContext>,
       required: true,
@@ -45,10 +50,18 @@ export default defineComponent({
         containerStyle.borderRadius = '26px';
       }
 
-      if (this.cardStyle) {
+      // Guarded on backgroundColor so an empty {} never blanks the container
+      // (BP/BC contact-form card colour defaults to the button fill).
+      if (this.cardStyle?.backgroundColor) {
         containerStyle.backgroundColor = this.cardStyle.backgroundColor;
       }
 
+      // Own background colour decouples the container from the button fill (BP-5800).
+      // Guarded on backgroundColor so an empty {} never blanks the container.
+      if (this.backgroundStyle?.backgroundColor) {
+        containerStyle.backgroundColor = this.backgroundStyle.backgroundColor;
+      }
+
       return containerStyle;
     },
     arrowStyle(): BrandPageCssStyle {

package/src/brand-page/components/contact-form/ContactForm.mixin.test.ts

@@ -25,6 +25,24 @@ describe('ContactForm disclosureColor', () => {
     expect(color).not.toBe('#ff0000');
   });
 
+  test('brand.page / brand.contact anchor to the card colour when set', () => {
+    const color = disclosureColor({
+      context: { isBrandSite: false },
+      hasCard: false,
+      isDividedContent: false,
+      hasBgColor: false,
+      viewModel: {
+        cardStyle: { backgroundColor: '#101010' }, // dark card colour
+        buttonStyles: { style: { backgroundColor: '#f5f0e6' } }, // light fill
+        titleStyle: { color: '#ff0000' },
+      },
+    });
+
+    // Anchored to the dark card colour → a lighter colour, not the title red.
+    expect(color).toBeDefined();
+    expect(color).not.toBe('#ff0000');
+  });
+
   test('brandSite card layout anchors to the card background', () => {
     const color = disclosureColor({
       context: { isBrandSite: true },

package/src/brand-page/components/contact-form/ContactForm.mixin.ts

@@ -13,6 +13,7 @@ import {
   getNameValidationError,
   getPhoneValidationError,
 } from '@brand-page/utils';
+import { isDecorativeButtonStyle } from '../../utils/button.util';
 import brandPageClient from '../../clients/brand-page.client';
 import { isEmail } from '../../../utils/validator.util';
 import {
@@ -78,6 +79,15 @@ export default defineComponent({
     submitError: undefined as string | undefined,
   }),
   computed: {
+    // Decorative styles (brushstroke/arrow/paper) render a shape that needs width
+    // to read — at pure w-fit the arrow chevron collapses. Give the submit button a
+    // ~200px min-width so the decoration looks intentional without going full-width.
+    isDecorativeSubmitStyle(): boolean {
+      return isDecorativeButtonStyle(
+        this.viewModel.buttonStyles?.selectedButtonStyleId,
+      );
+    },
+
     submitButtonStyle(): BrandPageCssStyle {
       const buttonStyle = { ...this.viewModel.buttonStyles?.style };
       const buttonTextStyle = {
@@ -214,8 +224,8 @@ export default defineComponent({
       // differs by website type:
       // - brandSite: the card style (card + divided layouts) or the section
       //   background (other layouts).
-      // - brand.page / brand.contact: there's no section background, so the
-      //   coloured surface is the global button fill.
+      // - brand.page / brand.contact: the container is the collapsible, whose
+      //   colour is the card colour (defaulting to the global button fill).
       // Falls back to the title colour when there's no solid colour to anchor to.
       const style = this.context.isBrandSite
         ? this.hasCard || this.isDividedContent
@@ -223,7 +233,9 @@ export default defineComponent({
           : this.hasBgColor
             ? this.viewModel.backgroundStyle
             : undefined
-        : this.viewModel.buttonStyles?.style;
+        : this.viewModel.cardStyle?.backgroundColor
+          ? this.viewModel.cardStyle
+          : this.viewModel.buttonStyles?.style;
 
       return (
         mutedTextForBackground(backgroundColorFromStyle(style)) ??