@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/shared/navigation-style-settings/store/index.ts

@@ -3,6 +3,7 @@ import type {
   ViewportsType,
   NavigationDisplayType,
   TextStyleDeclaration,
+  TextStyleOptions,
 } from '@brand-page';
 import {
   NAVIGATION_DISPLAY,
@@ -10,6 +11,12 @@ import {
   getDefaultSubNavBackgroundColor,
 } from '@brand-page';
 import { getNavThemeByTextStyle } from '@brand-page/utils/color.util';
+import { isCanonicalTextStyleType } from '@brand-page/utils/text-role-reconnect.util';
+import {
+  normalizeTextStyleAgainstRole,
+  omitTypography,
+  pickTypography,
+} from '@brand-page/utils/text-style.util';
 import type {
   NavigationStyleConfig,
   NavigationStyleConfigOption,
@@ -20,11 +27,11 @@ import {
 } from '@brand-page-maker/models/navigation-style-configs';
 import { assertUnreachable } from '../../../helpers/ts.helper';
 import { defineStore } from 'pinia';
+import cloneDeep from 'lodash.clonedeep';
 import type {
   ContentSettingsItemGroupState,
   ContentSettingsItemState,
 } from '../../content-settings/models';
-import { useUiStyleSettingsStore } from '../../style-settings/store';
 import { useUiColorPaletteStore } from '../../color-palette/store';
 import type { PageSection } from '../../page-settings/models';
 import { PAGE_SECTIONS } from '../../page-settings/models';
@@ -81,7 +88,13 @@ export const useUiNavigationStyleSettingsStore = defineStore(
           'availableNavigationStyleConfigs' | 'navigationStyleTypeConfigs'
         >;
       }): void {
-        this.$patch(Object.assign(newState));
+        // Replace each navigation whole: an object-form $patch deep-merges, so a key the new
+        // navigation leaves out (a role-linked link's typography) would survive from the old state.
+        this.$patch((state) => {
+          state.navigation[PAGE_SECTIONS.header] = cloneDeep(
+            newState.navigation[PAGE_SECTIONS.header],
+          );
+        });
       },
 
       setNavigationOrder({
@@ -101,19 +114,28 @@ export const useUiNavigationStyleSettingsStore = defineStore(
         section,
         style,
         viewport,
+        ownsTypography = false,
       }: {
         displayType: NavigationDisplayType;
         section: PageSection;
         style: BrandPageCssStyle;
         viewport: ViewportsType;
+        ownsTypography?: boolean;
       }): void {
+        // A text-style write carries the whole typography, so a prop it leaves out (a Reset, a
+        // role pick) must not survive from the old style and keep overriding the role.
+        const base = (current: TextStyleDeclaration) =>
+          ownsTypography ? omitTypography(current) : current;
+
         if (displayType.includes('hamburger')) {
           this.navigation[section][
             viewport
           ].hamburgerMenuStyle.defaultButtonStyle = Object.assign(
             {},
-            this.navigation[section][viewport].hamburgerMenuStyle
-              .defaultButtonStyle,
+            base(
+              this.navigation[section][viewport].hamburgerMenuStyle
+                .defaultButtonStyle,
+            ),
             style,
           );
 
@@ -122,7 +144,7 @@ export const useUiNavigationStyleSettingsStore = defineStore(
 
         this.navigation[section][viewport].defaultButtonStyle = Object.assign(
           {},
-          this.navigation[section][viewport].defaultButtonStyle,
+          base(this.navigation[section][viewport].defaultButtonStyle),
           style,
         );
       },
@@ -236,18 +258,22 @@ export const useUiNavigationStyleSettingsStore = defineStore(
         section,
         displayType,
         viewport,
+        headerBackgroundColor,
+        pageBackgroundColor,
       }: {
         section: PageSection;
         displayType: NavigationDisplayType;
         viewport: ViewportsType;
+        headerBackgroundColor?: string;
+        pageBackgroundColor?: string;
       }): void {
-        const uiStyleStore = useUiStyleSettingsStore();
         const paletteStore = useUiColorPaletteStore();
 
         this.navigation[section][viewport].displayType = displayType;
 
-        const currentTextStyleType =
-          this.navigation[section][viewport].defaultButtonStyle.textStyleType;
+        const currentStyle =
+          this.navigation[section][viewport].defaultButtonStyle;
+        const currentTextStyleType = currentStyle.textStyleType;
 
         const config = this.availableNavigationStyleConfigs.find(
           (c) => c.displayType === displayType,
@@ -257,21 +283,26 @@ export const useUiNavigationStyleSettingsStore = defineStore(
           throw new Error('No config for display type');
         }
 
-        // Nav theme derives from the paragraphs text-style colour; the contrasting
-        // selected-text role is resolved against the live palette.
+        // BP-5969 (ADR-0022): the header nav themes off the LOGO, not the page's button
+        // styling — `getNavThemeByTextStyle` picks the first brand role legible on the header
+        // background (logo text, else logo background, else a neutral) and its contrasting pair.
         const theme = getNavThemeByTextStyle(
-          {
-            color:
-              uiStyleStore.textStyles.textStyleOptions.paragraphs?.style?.color,
-          },
+          headerBackgroundColor,
           paletteStore.colors,
+          pageBackgroundColor,
         );
 
         // TODO - use constant instead of "hamburger"
         if (!displayType.includes('hamburger')) {
           this._setButtonStyles({
             section,
-            defaultButtonStyle: config.defaultButtonStyle,
+            // A layout sets the tab shape; a role-linked nav keeps its role and its own overrides.
+            defaultButtonStyle: isCanonicalTextStyleType(currentTextStyleType)
+              ? {
+                  ...omitTypography(config.defaultButtonStyle),
+                  ...pickTypography(currentStyle),
+                }
+              : config.defaultButtonStyle,
             selectedButtonStyle: config.selectedButtonStyle,
             iconStyle: config.iconStyle,
             viewport,
@@ -345,6 +376,24 @@ export const useUiNavigationStyleSettingsStore = defineStore(
         }
       },
 
+      renormalizeTextStylesForRole(
+        type: string,
+        textStyleOptions: TextStyleOptions | undefined,
+      ): void {
+        for (const viewport of [VIEWPORTS.desktop, VIEWPORTS.mobile] as const) {
+          const navigation = this.navigation[PAGE_SECTIONS.header][viewport];
+
+          for (const menu of [navigation, navigation.hamburgerMenuStyle]) {
+            if (menu.defaultButtonStyle?.textStyleType !== type) continue;
+
+            menu.defaultButtonStyle = normalizeTextStyleAgainstRole(
+              menu.defaultButtonStyle,
+              textStyleOptions,
+            );
+          }
+        }
+      },
+
       setNavigationStyleOptionValue({
         section,
         option,
@@ -385,6 +434,7 @@ export const useUiNavigationStyleSettingsStore = defineStore(
               section,
               style: value,
               viewport,
+              ownsTypography: true,
             });
             break;
           case 'selectedBackgroundColor':

package/src/shared/page-settings/components/header-settings-panel/HeaderSettingsPanel.vue

@@ -41,6 +41,7 @@
       <div v-if="!isBrandSite">
         <div
           v-if="showNavigationBelowLogoOption"
+          data-test-navigation-below-logo-toggle
           class="tw-my-4 tw-flex tw-items-center tw-justify-between tw-cursor-pointer"
         >
           <div class="tw-flex tw-items-center">
@@ -140,6 +141,7 @@
         <LogoSizeSlider
           :value="logoImageHeight"
           :viewport="viewport"
+          slider-value-input-id="logo-size-value-input"
           @on-change="onLogoSizeChanged"
         />
       </div>

package/src/shared/page-settings/components/page-settings/PageElement.vue

@@ -30,6 +30,7 @@
           :model-value="pageTitle"
           :placeholder="pageSettingsTr('pageTitlePlaceholder')"
           size="sm"
+          :attrs="{ 'data-test-tag': 'page-title-input' }"
           @update:model-value="pageTitleInput(pageId, $event)"
         />
       </div>

package/src/shared/page-settings/components/page-settings-section-styles/HeaderButtonSettings.test.ts

@@ -12,7 +12,7 @@ import type { ContentPage } from '../../models';
 // Explicit stub: the auto-stub misses mixin-declared props, so props('value') would be undefined.
 const TextStyleFieldStub = {
   name: 'TextStyleField',
-  props: ['value'],
+  props: ['value', 'containerDefaultColor'],
   template: '<div />',
 };
 
@@ -172,17 +172,57 @@ describe('HeaderButtonSettings', () => {
     expect(wrapper.emitted('on-change')).toEqual([[{ text: 'Book now' }]]);
   });
 
-  // Unset text style must show the renderer's Buttons default, not None/blank.
-  test('an unset text style presents the Buttons-linked default', () => {
+  // Unset text style must show the renderer's Button text default, not None/blank.
+  test('an unset text style presents the Button text default', () => {
     const wrapper = mountPanel(enabled);
 
     expect(
       wrapper.findComponent({ name: 'TextStyleField' }).props('value'),
     ).toEqual({
-      textStyleType: 'buttons',
+      textStyleType: 'button',
     });
   });
 
+  test('an untouched button displays the site button fill and text colours without storing overrides', () => {
+    useUiStyleSettingsStore().$patch(($state) => {
+      $state.buttonStyles.style.backgroundColor = 'var(--palette-2)';
+      $state.buttonStyles.style.color = 'var(--palette-0)';
+    });
+    const wrapper = mountPanel(enabled);
+
+    expect(
+      (
+        wrapper.findComponent(
+          '[data-test-header-button-fill-color]',
+        ) as unknown as { props(name: string): unknown }
+      ).props('value'),
+    ).toBe('var(--palette-2)');
+    expect(
+      wrapper
+        .findComponent({ name: 'TextStyleField' })
+        .props('containerDefaultColor'),
+    ).toBe('var(--palette-0)');
+    expect(
+      wrapper.findComponent({ name: 'TextStyleField' }).props('value'),
+    ).toEqual({ textStyleType: 'button' });
+    expect(wrapper.emitted('on-change')).toBeUndefined();
+  });
+
+  test('a saved fillColor beats the site button fill in the swatch', () => {
+    useUiStyleSettingsStore().$patch(($state) => {
+      $state.buttonStyles.style.backgroundColor = 'var(--palette-2)';
+    });
+    const wrapper = mountPanel({ ...enabled, fillColor: 'var(--palette-5)' });
+
+    expect(
+      (
+        wrapper.findComponent(
+          '[data-test-header-button-fill-color]',
+        ) as unknown as { props(name: string): unknown }
+      ).props('value'),
+    ).toBe('var(--palette-5)');
+  });
+
   test('an authored text style is passed through untouched', () => {
     const wrapper = mountPanel({
       ...enabled,

package/src/shared/page-settings/components/page-settings-section-styles/HeaderButtonSettings.vue

@@ -78,6 +78,7 @@
       :is-admin-maker="isAdminMaker"
       :logo-theme="logoTheme"
       :value="buttonTextStyle"
+      :container-default-color="buttonTextColor"
       :show-text-alignment-options="false"
       @update:model-value="onTextStyleChange"
     />
@@ -87,7 +88,7 @@
       data-test-header-button-fill-color
       name="fillColor"
       :label="tr('pageSettingsSection.buttonFillColor')"
-      :value="fillColor"
+      :value="effectiveFillColor"
       :is-admin-maker="isAdminMaker"
       :logo-theme="logoTheme"
       :disable-transparent="true"
@@ -172,12 +173,20 @@ const text = computed((): string => props.value?.text || '');
 const trimmedLabel = computed((): string => text.value.trim());
 const url = computed((): string => props.value?.url || '');
 const buttonPageId = computed((): string => props.value?.buttonPageId || '');
-const fillColor = computed((): string => props.value?.fillColor || '');
+// An untouched CTA renders with the site's button style. Surface that effective colour in
+// the maker without writing it into `headerButton` until the customer picks a new one.
+const effectiveFillColor = computed(
+  (): string =>
+    props.value?.fillColor || styleSettingsStore.buttonFillColor || '',
+);
+const buttonTextColor = computed(
+  (): string => styleSettingsStore.buttonStyles.style.color || '',
+);
 const borderColor = computed((): string => props.value?.borderColor || '');
 const buttonTextStyle = computed(
-  // When unset, show the same Buttons-style default the site actually renders with.
+  // When unset, show the same Button text default the site actually renders with.
   (): TextStyleDeclaration =>
-    props.value?.buttonTextStyle ?? { textStyleType: TEXT_STYLE_TYPES.buttons },
+    props.value?.buttonTextStyle ?? { textStyleType: TEXT_STYLE_TYPES.button },
 );
 const buttonLinkType = computed(
   (): ButtonLinkType => props.value?.buttonLinkType || BUTTON_LINK_TYPE.url,

package/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.navigation.test.ts

@@ -0,0 +1,89 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { NAVIGATION_DISPLAY, VIEWPORTS } from '@brand-page';
+import { PAGE_SECTIONS } from '@shared/page-settings/models';
+import { useUiBackgroundSettingsStore } from '@shared/background-settings/store';
+import { useUiColorPaletteStore } from '@shared/color-palette/store';
+import { useUiNavigationStyleSettingsStore } from '@shared/navigation-style-settings/store';
+import { useUiPageSettingsStore } from '@shared/page-settings/store';
+import mixin from './PageSettingsSectionStyles.mixin';
+
+const { handleHeaderNavigationDisplayTypeChange } = (
+  mixin as unknown as {
+    methods: {
+      handleHeaderNavigationDisplayTypeChange(
+        this: unknown,
+        displayType: string,
+      ): void;
+    };
+  }
+).methods;
+
+describe('PageSettingsSectionStyles.mixin menu-style colour anchor', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  const setup = (headerBackgroundColor?: string) => {
+    const pageSettingsStore = useUiPageSettingsStore();
+    const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
+    const backgroundSettingsStore = useUiBackgroundSettingsStore();
+
+    useUiColorPaletteStore().setColors([
+      { id: 'palette-0', value: '#7abd2d', type: 'palette' },
+      { id: 'palette-1', value: '#130e34', type: 'palette' },
+      { id: 'palette-2', value: '#455538', type: 'palette' },
+      { id: 'palette-3', value: '#ecedff', type: 'palette' },
+    ]);
+    backgroundSettingsStore.setBackgroundStyle({
+      backgroundStyle: { background: 'var(--palette-0)' },
+    });
+
+    const header =
+      pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.desktop];
+
+    header.backgroundStyle = headerBackgroundColor
+      ? { backgroundColor: headerBackgroundColor, backgroundOpacity: 100 }
+      : { backgroundOpacity: 100 };
+
+    return {
+      pageSettingsStore,
+      navigationStyleSettingsStore,
+      backgroundSettingsStore,
+      header,
+    };
+  };
+
+  test.each([undefined, 'transparent'])(
+    'uses the page behind a %s header when changing menu style',
+    (headerBackgroundColor) => {
+      const context = setup(headerBackgroundColor);
+
+      handleHeaderNavigationDisplayTypeChange.call(
+        { ...context, viewport: VIEWPORTS.desktop },
+        NAVIGATION_DISPLAY.TAB_1,
+      );
+
+      expect(
+        context.navigationStyleSettingsStore.navigation[PAGE_SECTIONS.header][
+          VIEWPORTS.desktop
+        ].defaultButtonStyle.color,
+      ).toBe('var(--palette-1)');
+    },
+  );
+
+  test('keeps an opaque header as the colour anchor', () => {
+    const context = setup('#ffffff');
+
+    handleHeaderNavigationDisplayTypeChange.call(
+      { ...context, viewport: VIEWPORTS.desktop },
+      NAVIGATION_DISPLAY.TAB_1,
+    );
+
+    expect(
+      context.navigationStyleSettingsStore.navigation[PAGE_SECTIONS.header][
+        VIEWPORTS.desktop
+      ].defaultButtonStyle.color,
+    ).toBe('var(--palette-0)');
+  });
+});

package/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.text-style.test.ts

@@ -0,0 +1,91 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { VIEWPORTS } from '@brand-page';
+import type { TextStyleDeclaration } from '@brand-page';
+import { omitTypography } from '@brand-page/utils/text-style.util';
+import { PAGE_SECTIONS } from '@shared/page-settings/models';
+import { useUiPageSettingsStore } from '@shared/page-settings/store';
+import mixin from './PageSettingsSectionStyles.mixin';
+
+// The footer's text-style field sends the copyright's whole text style; tested against a
+// hand-built context wired to the real store.
+const { setTextStyleOption } = (
+  mixin as unknown as {
+    methods: {
+      setTextStyleOption(
+        this: unknown,
+        propName: string,
+        payload: { value: TextStyleDeclaration },
+      ): void;
+    };
+  }
+).methods;
+
+describe('PageSettingsSectionStyles.mixin setTextStyleOption', () => {
+  let pageSettingsStore: ReturnType<typeof useUiPageSettingsStore>;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    pageSettingsStore = useUiPageSettingsStore();
+  });
+
+  const footer = () =>
+    pageSettingsStore.sections[PAGE_SECTIONS.footer][VIEWPORTS.desktop];
+
+  const write = (value: TextStyleDeclaration) =>
+    setTextStyleOption.call(
+      {
+        pageSettingsStore,
+        sections: pageSettingsStore.sections,
+        sectionName: PAGE_SECTIONS.footer,
+        viewport: VIEWPORTS.desktop,
+      },
+      'copyrightStyle',
+      { value },
+    );
+
+  test('Reset on the copyright clears its override and keeps its colour and alignment', () => {
+    footer().copyrightStyle = {
+      textStyleType: 'paragraph1',
+      fontFamily: 'Oswald',
+      fontSize: '2em',
+      color: '#123456',
+      textAlign: 'center',
+    };
+
+    write(omitTypography(footer().copyrightStyle));
+
+    expect(footer().copyrightStyle).toEqual({
+      textStyleType: 'paragraph1',
+      color: '#123456',
+      textAlign: 'center',
+    });
+  });
+
+  test('a write replaces the typography and keeps the rest of the old style', () => {
+    footer().copyrightStyle = {
+      textStyleType: 'paragraph1',
+      fontFamily: 'Oswald',
+      color: '#123456',
+    };
+
+    write({ textStyleType: 'paragraph2', fontSize: '2em' });
+
+    expect(footer().copyrightStyle).toEqual({
+      textStyleType: 'paragraph2',
+      fontSize: '2em',
+      color: '#123456',
+    });
+  });
+
+  test('the other viewport is left alone', () => {
+    const mobile = () =>
+      pageSettingsStore.sections[PAGE_SECTIONS.footer][VIEWPORTS.mobile];
+
+    mobile().copyrightStyle = { textStyleType: 'paragraph1', fontSize: '2em' };
+
+    write({ textStyleType: 'paragraph1' });
+
+    expect(mobile().copyrightStyle.fontSize).toBe('2em');
+  });
+});

package/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.ts

@@ -43,10 +43,12 @@ import type {
 } from '../../../content-settings/models';
 import { UI_DEVICE_MODES, UI_EVENT_SOURCES } from '../../../models';
 import { isTransparentColour } from '@brand-page/utils/color.util';
+import { omitTypography } from '@brand-page/utils/text-style.util';
 
 import type { PageSettingsStateSectionStyles } from '../../store';
 import { useUiPageSettingsStore } from '../../store';
 import { useUiNavigationStyleSettingsStore } from '../../../navigation-style-settings/store';
+import { useUiBackgroundSettingsStore } from '../../../background-settings/store';
 import { useUiStyleSettingsStore } from '../../../style-settings/store';
 import { useUiContentSettingsStore } from '../../../content-settings/store';
 import {
@@ -115,6 +117,7 @@ export default defineComponent({
     const pageSettingsStore = useUiPageSettingsStore();
     const styleSettingsStore = useUiStyleSettingsStore();
     const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
+    const backgroundSettingsStore = useUiBackgroundSettingsStore();
     const contentSettingsStore = useUiContentSettingsStore();
     const uiStore = useUiStore();
     const containerStore = useBrandPageContainerStore();
@@ -132,6 +135,7 @@ export default defineComponent({
       pageSettingsStore,
       styleSettingsStore,
       navigationStyleSettingsStore,
+      backgroundSettingsStore,
       contentSettingsStore,
       uiStore,
       containerStore,
@@ -403,6 +407,9 @@ export default defineComponent({
         section: PAGE_SECTIONS.header,
         displayType: displayType,
         viewport: this.viewport,
+        headerBackgroundColor: this.header.backgroundStyle?.backgroundColor,
+        pageBackgroundColor:
+          this.backgroundSettingsStore.backgroundStyles.style.background,
       });
     },
     handleHeaderNavigationTypeChange(navigationType: NavigationType): void {
@@ -536,11 +543,16 @@ export default defineComponent({
       propName: keyof PageSettingsStateSectionStyles,
       value: UpdateItemValuePayload<BrandPageCssStyle>,
     ) {
+      const current = this.sections[this.sectionName][this.viewport][
+        propName
+      ] as BrandPageCssStyle | undefined;
+
+      // The field sends the whole typography, so a prop it leaves out (a Reset, a role pick)
+      // must not survive from the old style and keep overriding the role.
       this.pageSettingsStore.setPageSettingsSectionValue({
         sectionName: this.sectionName,
         propName,
-        value: value.value,
-        merge: true,
+        value: { ...omitTypography(current ?? {}), ...value.value },
         viewport: this.viewport,
       });
     },

package/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.vue

@@ -17,6 +17,7 @@
   <div
     v-for="(styleOption, idx) in styleOptions"
     :key="`page-settings-style-settings-${sectionName}-${idx}`"
+    :data-test-section-style-option="styleOption"
   >
     <div v-if="styleOption === PAGE_SECTION_STYLE_OPTIONS.logo" class="tw-mb-6">
       <LogoSelection
@@ -38,6 +39,7 @@
         <LogoSizeSlider
           :value="logoImageHeight"
           :viewport="viewport"
+          slider-value-input-id="logo-size-value-input"
           @on-change="onLogoSizeChanged"
         />
       </div>

package/src/shared/page-settings/store/page-settings-store.text-style.test.ts

@@ -0,0 +1,84 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { BUTTON_LINK_TYPE, VIEWPORTS } from '@brand-page';
+import type { TextStyleOptions } from '@brand-page';
+import { PAGE_SECTIONS } from '../models';
+import { useUiPageSettingsStore } from './index';
+
+// "Apply changes to all" renormalises every text on the role; header and footer text lives here.
+describe('page settings store — renormalizeTextStylesForRole', () => {
+  const roles = {
+    paragraph1: { style: { fontFamily: 'Anton', fontSize: '1.5em' } },
+    button: { style: { fontFamily: 'Oswald', fontSize: '1em' } },
+  } as unknown as TextStyleOptions;
+
+  let store: ReturnType<typeof useUiPageSettingsStore>;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    store = useUiPageSettingsStore();
+  });
+
+  const footer = (
+    viewport: typeof VIEWPORTS.desktop | typeof VIEWPORTS.mobile,
+  ) => store.sections[PAGE_SECTIONS.footer][viewport];
+  const header = (
+    viewport: typeof VIEWPORTS.desktop | typeof VIEWPORTS.mobile,
+  ) => store.sections[PAGE_SECTIONS.header][viewport];
+
+  test('drops a now role-equal copyright override on both viewports and keeps a different one', () => {
+    footer(VIEWPORTS.desktop).copyrightStyle = {
+      textStyleType: 'paragraph1',
+      fontFamily: 'Anton',
+      fontSize: '2em',
+      color: '#123456',
+    };
+    footer(VIEWPORTS.mobile).copyrightStyle = {
+      textStyleType: 'paragraph1',
+      fontFamily: 'Anton',
+    };
+
+    store.renormalizeTextStylesForRole('paragraph1', roles);
+
+    expect(footer(VIEWPORTS.desktop).copyrightStyle).toEqual({
+      textStyleType: 'paragraph1',
+      fontSize: '2em',
+      color: '#123456',
+    });
+    expect(footer(VIEWPORTS.mobile).copyrightStyle).toEqual({
+      textStyleType: 'paragraph1',
+    });
+  });
+
+  test('drops a now role-equal header button override and keeps the rest of the button', () => {
+    header(VIEWPORTS.desktop).headerButton = {
+      isVisible: true,
+      text: 'Book now',
+      buttonLinkType: BUTTON_LINK_TYPE.url,
+      fillColor: '#654321',
+      buttonTextStyle: { textStyleType: 'button', fontFamily: 'Oswald' },
+    };
+
+    store.renormalizeTextStylesForRole('button', roles);
+
+    expect(header(VIEWPORTS.desktop).headerButton).toEqual({
+      isVisible: true,
+      text: 'Book now',
+      buttonLinkType: BUTTON_LINK_TYPE.url,
+      fillColor: '#654321',
+      buttonTextStyle: { textStyleType: 'button' },
+    });
+  });
+
+  test('leaves text on another role, and a header with no button, untouched', () => {
+    footer(VIEWPORTS.desktop).copyrightStyle = {
+      textStyleType: 'paragraph2',
+      fontFamily: 'Anton',
+    };
+
+    store.renormalizeTextStylesForRole('paragraph1', roles);
+
+    expect(footer(VIEWPORTS.desktop).copyrightStyle.fontFamily).toBe('Anton');
+    expect(header(VIEWPORTS.desktop).headerButton).toBeUndefined();
+  });
+});