@designcrowd/library.brand-page 6.2.11 → 6.2.12

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

@@ -45,11 +45,6 @@ import { useUiPageSettingsStore } from '../../page-settings/store';
 import { PAGE_SECTIONS } from '../../page-settings/models';
 import { availableButtonStyleConfigs } from '@brand-page-maker/models';
 import { buttonStylePresetCss } from '../button-style-preset';
-import {
-  TRIGGER_TYPE,
-  UPGRADE_CTA_LOCATIONS,
-  useEventTracker,
-} from '@brand-page-maker/composables/useEventTracker';
 
 export interface StyleSettingsState {
   availableButtonStyleConfigs: ButtonStyleConfig[];
@@ -187,17 +182,8 @@ export const useUiStyleSettingsStore = defineStore('uiStyleSettings', {
       });
     },
 
-    _setTextFontFamily(payload: { fontFamily: FontFamilyKey }) {
-      this.$patch((state) => {
-        state.textStyles.textFontFamily = payload.fontFamily;
-      });
-    },
-
     _setTextStyles(payload: Partial<TextStyles>): void {
       this.$patch((state) => {
-        state.textStyles.textFontFamily =
-          payload.textFontFamily || state.textStyles.textFontFamily;
-
         state.textStyles.textStyleOptions =
           payload.textStyleOptions || state.textStyles.textStyleOptions;
       });
@@ -354,33 +340,6 @@ export const useUiStyleSettingsStore = defineStore('uiStyleSettings', {
 
       onStyleChanged();
     },
-
-    async setTextFontFamily(payload: { fontFamily: FontFamilyKey }) {
-      const uiStore = useUiStore();
-      const eventTracker = useEventTracker();
-
-      const fontFamilyConfig = this.availableTextFontFamilyOptions.find(
-        (x) => x.key === payload.fontFamily,
-      );
-
-      if (!fontFamilyConfig) {
-        return;
-      }
-
-      if (fontFamilyConfig.isLocked) {
-        eventTracker.setUpsellBridgeState({
-          cta_location: UPGRADE_CTA_LOCATIONS.ADD_CONTENT,
-          trigger_type: TRIGGER_TYPE.AUTOMATIC,
-          content_type: 'font',
-        });
-
-        await uiStore.showUpgradeModalAndSaveAsync();
-
-        return;
-      }
-
-      await this._setTextFontFamily(payload);
-    },
   },
   getters: {
     availableTextFontFamilyOptions(): StyleTextFontFamilyOption[] {
@@ -420,19 +379,14 @@ export const useUiStyleSettingsStore = defineStore('uiStyleSettings', {
       return getColorFromCSSShadow(this.buttonStyles.style.boxShadow);
     },
 
-    // The page base coat, now the paragraphs global style.
-    defaultTextColor(): string | undefined {
-      return this.textStyles.textStyleOptions.paragraphs?.style?.color;
-    },
+    // BP-5969 (ADR-0020): the `defaultTextColor` getter is gone — there is no site-wide
+    // default text colour any more (no base coat, roles carry none). Its only consumer,
+    // the Color Matches panel, no longer feeds one in.
 
     selectedButtonStyleConfig(): ButtonStyleConfig | undefined {
       return this.availableButtonStyleConfigs.find(
         (s) => s.id === this.buttonStyles.selectedButtonStyleId,
       );
     },
-
-    selectedTextFontFamily(): FontFamilyKey {
-      return this.textStyles.textFontFamily;
-    },
   },
 });

package/src/shared/style-settings/text-style-size-order.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, test } from 'vitest';
+import {
+  TextStyles,
+  type CanonicalTextStyleType,
+  type TextStyleOptions,
+} from '@brand-page';
+import { hasTextStyleSizeOrderIssue } from './text-style-size-order';
+
+const withSizes = (
+  sizes: Partial<Record<CanonicalTextStyleType, string>>,
+): TextStyleOptions => {
+  const options = new TextStyles().textStyleOptions;
+
+  for (const [type, fontSize] of Object.entries(sizes)) {
+    options[type as CanonicalTextStyleType].style.fontSize = fontSize;
+  }
+
+  return options;
+};
+
+describe('hasTextStyleSizeOrderIssue', () => {
+  test('the default role sizes are in order', () => {
+    expect(hasTextStyleSizeOrderIssue(withSizes({}))).toBe(false);
+  });
+
+  test('a heading larger than the heading above it is an issue', () => {
+    // Heading 3 at 90px, above Heading 2's default 84px.
+    expect(hasTextStyleSizeOrderIssue(withSizes({ heading3: '5.625em' }))).toBe(
+      true,
+    );
+  });
+
+  test('the last heading larger than the one above it is an issue', () => {
+    // Heading 6 at 24px, above Heading 5's default 23px.
+    expect(hasTextStyleSizeOrderIssue(withSizes({ heading6: '1.5em' }))).toBe(
+      true,
+    );
+  });
+
+  test('a paragraph larger than the paragraph above it is an issue', () => {
+    // Paragraph 2 at 64px, above Paragraph 1's default 22px.
+    expect(hasTextStyleSizeOrderIssue(withSizes({ paragraph2: '4em' }))).toBe(
+      true,
+    );
+  });
+
+  test('equal sizes are not an issue', () => {
+    // Heading 5 at 35px, the same as Heading 4's default.
+    expect(
+      hasTextStyleSizeOrderIssue(withSizes({ heading5: '2.1875em' })),
+    ).toBe(false);
+  });
+
+  test('sizes that show as the same px are not an issue', () => {
+    // 5.2em is 83.2px and shows as 84px, the same as Heading 3 at 5.25em.
+    expect(
+      hasTextStyleSizeOrderIssue(
+        withSizes({ heading2: '5.2em', heading3: '5.25em' }),
+      ),
+    ).toBe(false);
+  });
+
+  test('a paragraph is never compared with a heading', () => {
+    // Paragraph 1 at 64px, far above Heading 6's default 16px.
+    expect(hasTextStyleSizeOrderIssue(withSizes({ paragraph1: '4em' }))).toBe(
+      false,
+    );
+  });
+
+  test('Button text is never compared', () => {
+    // Button text at 128px, the slider's maximum.
+    expect(hasTextStyleSizeOrderIssue(withSizes({ button: '8em' }))).toBe(
+      false,
+    );
+  });
+});

package/src/shared/style-settings/text-style-size-order.ts

@@ -0,0 +1,28 @@
+import type { CanonicalTextStyleType, TextStyleOptions } from '@brand-page';
+import { textSizeValueConvertor } from '@brand-page-maker/convertors';
+
+// A role is only compared with the one above it in its own group. Button text has no
+// group: it has nothing above or below it.
+const SIZE_ORDER_GROUPS: readonly (readonly CanonicalTextStyleType[])[] = [
+  ['heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6'],
+  ['paragraph1', 'paragraph2', 'paragraph3'],
+];
+
+// The px the role card shows, so two sizes that read the same never count as out of order.
+const roleSizePx = (
+  options: TextStyleOptions,
+  type: CanonicalTextStyleType,
+): number => Number(textSizeValueConvertor.convert(options[type]?.style));
+
+// Equal sizes are allowed: a group can tell two roles apart by weight alone.
+export const hasTextStyleSizeOrderIssue = (
+  options: TextStyleOptions,
+): boolean =>
+  SIZE_ORDER_GROUPS.some((types) =>
+    types
+      .slice(1)
+      .some(
+        (type, index) =>
+          roleSizePx(options, type) > roleSizePx(options, types[index]),
+      ),
+  );

package/src/shared/template-settings/components/TemplatesSettings.vue

@@ -32,6 +32,7 @@
             v-for="template in templates"
             :key="`template-${template.id}`"
             :data-id="template.id"
+            data-test-tag="template-card"
           >
             <slot
               name="template-preview"
@@ -52,6 +53,7 @@
             :label="templateSettingsTr(`loadMoreTemplatesButtonText`)"
             variant="outline"
             size="small-wide"
+            data-attribute="data-test-load-more-templates"
             :classes="{
               'tw-opacity-50 tw-pointer-events-none': !isLoadMoreBtnEnabled,
             }"
@@ -100,6 +102,7 @@
             v-for="template in templates"
             :key="`template-${template.id}`"
             :data-id="template.id"
+            data-test-tag="template-card"
           >
             <slot
               name="template-preview"
@@ -120,6 +123,7 @@
             :label="templateSettingsTr(`loadMoreTemplatesButtonText`)"
             variant="outline"
             size="small-wide"
+            data-attribute="data-test-load-more-templates"
             :classes="{
               'tw-opacity-50 tw-pointer-events-none': !isLoadMoreBtnEnabled,
             }"

package/src/shared/text-role-typography.util.ts

@@ -0,0 +1,277 @@
+/**
+ * MIGRATION-22 SNAPSHOT DEPENDENCY: its normalisation and RTE lift use `composeTextDecoration`,
+ * `NEUTRAL_TYPOGRAPHY_VALUE`, `TEXT_STYLE_CASCADE_PROPS` and `roleVarRef`. After migration-22
+ * releases, pin their v22 behaviour in the migration before changing them.
+ */
+export const ROLE_VAR_ATTRS = [
+  {
+    markAttr: 'fontFamily',
+    cssProp: 'font-family',
+    varName: '--role-font-family',
+  },
+  { markAttr: 'fontSize', cssProp: 'font-size', varName: '--role-font-size' },
+  {
+    markAttr: 'lineHeight',
+    cssProp: 'line-height',
+    varName: '--role-line-height',
+  },
+  {
+    markAttr: 'letterSpacing',
+    cssProp: 'letter-spacing',
+    varName: '--role-letter-spacing',
+  },
+  {
+    markAttr: 'fontWeight',
+    cssProp: 'font-weight',
+    varName: '--role-font-weight',
+  },
+  {
+    markAttr: 'fontStyle',
+    cssProp: 'font-style',
+    varName: '--role-font-style',
+  },
+  {
+    markAttr: 'textDecoration',
+    cssProp: 'text-decoration',
+    varName: '--role-text-decoration',
+  },
+] as const;
+
+export type RoleVarMarkAttr = (typeof ROLE_VAR_ATTRS)[number]['markAttr'];
+
+export const TEXT_STYLE_CASCADE_PROPS = [
+  'fontFamily',
+  'fontSize',
+  'fontWeight',
+  'fontStyle',
+  'letterSpacing',
+  'lineHeight',
+  'textDecoration',
+] as const;
+
+export type CascadeTypographyProp = (typeof TEXT_STYLE_CASCADE_PROPS)[number];
+
+/** A copy of a style without typography; colour, alignment and other metadata stay. */
+export const omitTypography = <T extends object>(
+  style: T,
+): Omit<T, CascadeTypographyProp> => {
+  const rest = { ...style } as Record<string, unknown>;
+
+  for (const prop of TEXT_STYLE_CASCADE_PROPS) delete rest[prop];
+
+  return rest as Omit<T, CascadeTypographyProp>;
+};
+
+/**
+ * `omitTypography` as a patch, for the stores that deep-merge a write: an unset value replaces the
+ * block's own and their role normalisation then drops the key.
+ */
+export const CLEARED_TYPOGRAPHY = Object.freeze(
+  Object.fromEntries(TEXT_STYLE_CASCADE_PROPS.map((prop) => [prop, undefined])),
+) as Readonly<Record<CascadeTypographyProp, undefined>>;
+
+/** Only the typography a style sets itself. */
+export const pickTypography = (
+  style: Partial<Record<CascadeTypographyProp, string>>,
+): Partial<Record<CascadeTypographyProp, string>> => {
+  const typography: Partial<Record<CascadeTypographyProp, string>> = {};
+
+  for (const prop of TEXT_STYLE_CASCADE_PROPS) {
+    if (style[prop] !== undefined) typography[prop] = style[prop];
+  }
+
+  return typography;
+};
+
+export const textRoleClassName = (type: string): string =>
+  `bp-text-role-${type}`;
+
+const ROLE_VAR_BY_ATTR = new Map<string, (typeof ROLE_VAR_ATTRS)[number]>(
+  ROLE_VAR_ATTRS.map((attr) => [attr.markAttr, attr]),
+);
+
+export const roleVarRef = (markAttr: string): string | undefined => {
+  const attr = ROLE_VAR_BY_ATTR.get(markAttr);
+
+  return attr ? `var(${attr.varName})` : undefined;
+};
+
+export const NEUTRAL_TYPOGRAPHY_VALUE: Partial<
+  Record<RoleVarMarkAttr, string>
+> = {
+  fontWeight: 'normal',
+  fontStyle: 'normal',
+  textDecoration: 'none',
+  letterSpacing: 'normal',
+};
+
+const TEXT_DECORATION_FLAGS = [
+  'underline',
+  'line-through',
+  'overline',
+] as const;
+const RTE_TEXT_DECORATION_CLASS_PREFIX = 'bp-rte-text-decoration-';
+
+const canonicalTextDecoration = (
+  value: string | undefined,
+): string | undefined => {
+  if (!value) return undefined;
+
+  const flags = value.trim().toLowerCase().split(/\s+/).filter(Boolean);
+
+  if (flags.length === 1 && flags[0] === 'none') return 'none';
+
+  if (
+    flags.length === 0 ||
+    flags.includes('none') ||
+    flags.some(
+      (flag) => !(TEXT_DECORATION_FLAGS as readonly string[]).includes(flag),
+    )
+  ) {
+    return undefined;
+  }
+
+  return (
+    TEXT_DECORATION_FLAGS.filter((flag) => flags.includes(flag)).join(' ') ||
+    undefined
+  );
+};
+
+type TextDecorationState = {
+  clearsRole: boolean;
+  value: string;
+};
+
+const textDecorationState = (
+  value: string | undefined,
+): TextDecorationState | undefined => {
+  const trimmed = value?.trim().toLowerCase();
+
+  if (!trimmed) return undefined;
+
+  if (trimmed === 'none') return { clearsRole: true, value: 'none' };
+
+  if (trimmed.startsWith('none ')) {
+    const resetValue = canonicalTextDecoration(trimmed.slice('none '.length));
+
+    return resetValue && resetValue !== 'none'
+      ? { clearsRole: true, value: resetValue }
+      : undefined;
+  }
+
+  const normalValue = canonicalTextDecoration(trimmed);
+
+  return normalValue ? { clearsRole: false, value: normalValue } : undefined;
+};
+
+/**
+ * Whether a local decoration explicitly clears its role's lines before adding its own. The reset
+ * marker qualifies the run's own lines, so with no literal (absent, or the role ref) it means nothing.
+ */
+export const textDecorationClearsRole = (
+  value: string | undefined,
+  resetMarker = false,
+): boolean => {
+  const state = textDecorationState(value);
+
+  return state !== undefined && (resetMarker || state.clearsRole);
+};
+
+/**
+ * A run's own decoration in the form every compare reads: a reset run's lines become `none <lines>`
+ * ("clear the role, then draw these"). A read form only — writes store the marker instead.
+ */
+export const localTextDecoration = (
+  value: string | undefined,
+  resetMarker = false,
+): string | undefined => {
+  const state = textDecorationState(value);
+
+  return state && resetMarker && !state.clearsRole
+    ? `none ${state.value}`
+    : value;
+};
+
+export const textDecorationFlags = (value: string | undefined): Set<string> => {
+  const state = textDecorationState(value);
+
+  return new Set(state?.value === 'none' ? [] : state?.value.split(' '));
+};
+
+export const textDecorationValue = (flags: Iterable<string>): string => {
+  const selected = new Set(flags);
+  const value = TEXT_DECORATION_FLAGS.filter((flag) => selected.has(flag)).join(
+    ' ',
+  );
+
+  return value || 'none';
+};
+
+export const composeTextDecoration = (
+  roleValue: string | undefined,
+  localValue: string | undefined,
+  clearsRole = false,
+): string | undefined => {
+  const local =
+    localValue === 'var(--role-text-decoration)'
+      ? undefined
+      : textDecorationState(localValue);
+
+  if (local && (clearsRole || local.clearsRole)) return local.value;
+
+  const role = canonicalTextDecoration(roleValue);
+  const flags = new Set<string>();
+
+  if (role && role !== 'none')
+    role.split(' ').forEach((flag) => flags.add(flag));
+
+  if (local?.value && local.value !== 'none') {
+    local.value.split(' ').forEach((flag) => flags.add(flag));
+  }
+
+  const composed = TEXT_DECORATION_FLAGS.filter((flag) => flags.has(flag)).join(
+    ' ',
+  );
+
+  return composed || (role || local ? 'none' : undefined);
+};
+
+export const rteTextDecorationClassName = (
+  value: string | undefined,
+  clearsRole = false,
+): string | undefined => {
+  if (value === 'var(--role-text-decoration)')
+    return `${RTE_TEXT_DECORATION_CLASS_PREFIX}inherit`;
+
+  const state = textDecorationState(value);
+
+  return state
+    ? `${RTE_TEXT_DECORATION_CLASS_PREFIX}${
+        (clearsRole || state.clearsRole) && state.value !== 'none'
+          ? 'reset-'
+          : ''
+      }${state.value
+        .replaceAll('line-through', 'linethrough')
+        .replaceAll(' ', '-')}`
+    : undefined;
+};
+
+export const runTypographyFillValue = (
+  attr: RoleVarMarkAttr,
+  roleStyle: Partial<Record<RoleVarMarkAttr, string>> | undefined,
+  styleObj: Partial<Record<RoleVarMarkAttr, string>> | undefined,
+): string | undefined => {
+  const roleValue = roleStyle?.[attr];
+  const blockValue = styleObj?.[attr];
+  const neutral = NEUTRAL_TYPOGRAPHY_VALUE[attr];
+  const hasRole = roleValue != null && roleValue !== '';
+  const hasBlock = blockValue != null && blockValue !== '';
+
+  if (roleStyle == null) return hasBlock ? blockValue : undefined;
+
+  const effectiveRole = hasRole ? roleValue : neutral;
+
+  if (hasBlock && blockValue !== effectiveRole) return blockValue;
+
+  return hasRole || neutral != null ? roleVarRef(attr) : undefined;
+};

package/src/utils/minify-brand-page-metadata.test.ts

@@ -151,7 +151,10 @@ describe('minifyBrandPageMetadata — palette resolution', () => {
       brandPageType: 'default',
       styles: {
         colors,
-        textStyles: { style: { color: 'var(--palette-0)' } },
+        // BP-5969 (R22): `textStyles.style` — the retired site-wide default text colour — is
+        // dropped from the outbound payload entirely (not merely palette-resolved), so it is NOT
+        // a fixture for this describe block any more; `backgroundStyles`/`buttonStyles` (live,
+        // non-retired style objects) carry the palette-resolution coverage instead.
         backgroundStyles: {
           style: { background: 'var(--palette-custom-abc)' },
         },
@@ -176,7 +179,6 @@ describe('minifyBrandPageMetadata — palette resolution', () => {
   test('resolves role refs, custom refs and a box-shadow ref to their values', () => {
     const styles = minifyBrandPageMetadata(model()).styles as any;
 
-    expect(styles.textStyles.style.color).toBe('#d1a151');
     expect(styles.backgroundStyles.style.background).toBe('#7b3f9c');
     expect(styles.buttonStyles.style.backgroundColor).toBe('#330a0a');
     expect(styles.buttonStyles.style.boxShadow).toBe('0 2px 4px #d1a151');
@@ -192,21 +194,21 @@ describe('minifyBrandPageMetadata — palette resolution', () => {
   test('an unresolvable id is left untouched, never emptied', () => {
     // An empty string would read as "no colour" and could be written back as one.
     const styles = minifyBrandPageMetadata(
-      model({ textStyles: { style: { color: 'var(--palette-9)' } } }),
+      model({
+        backgroundStyles: { style: { background: 'var(--palette-9)' } },
+      }),
     ).styles as any;
 
-    expect(styles.textStyles.style.color).toBe('var(--palette-9)');
+    expect(styles.backgroundStyles.style.background).toBe('var(--palette-9)');
   });
 
   test('literals and `transparent` pass through unchanged', () => {
     const styles = minifyBrandPageMetadata(
       model({
-        textStyles: { style: { color: '#123456' } },
         backgroundStyles: { style: { background: 'transparent' } },
       }),
     ).styles as any;
 
-    expect(styles.textStyles.style.color).toBe('#123456');
     expect(styles.backgroundStyles.style.background).toBe('transparent');
   });
 
@@ -220,7 +222,6 @@ describe('minifyBrandPageMetadata — palette resolution', () => {
 
     minifyBrandPageMetadata(sut);
 
-    expect((sut.styles as any).textStyles.style.color).toBe('var(--palette-0)');
     expect((sut.styles as any).buttonStyles.style.boxShadow).toBe(
       '0 2px 4px var(--palette-0)',
     );
@@ -228,6 +229,41 @@ describe('minifyBrandPageMetadata — palette resolution', () => {
   });
 });
 
+// The deployed pipeline still reads legacy keys and the root colour for contrast repair. Keep them
+// in the minified compatibility payload until service.ai-pipelines #664 is deployed.
+describe('minifyBrandPageMetadata — textStyles keeps pipeline compatibility', () => {
+  test('includes all 14 roles and the root colour without mutating the source model', () => {
+    const model = new BrandPageModel({ ...BRAND_SITE, pages: [] });
+    const textStyles = model.styles.textStyles as unknown as Record<
+      string,
+      unknown
+    >;
+
+    // Simulate a migrated-but-not-yet-stripped site: the legacy `style` colour still on the
+    // instance (`TextStyles`' constructor carries it through for `migration-21` to consume).
+    textStyles.style = { color: '#123456' };
+
+    const minified = minifyBrandPageMetadata(model);
+    const outStyles = minified.styles.textStyles.textStyleOptions as Record<
+      string,
+      unknown
+    >;
+
+    expect(Object.keys(outStyles)).toHaveLength(14);
+    expect(outStyles.titles).toBeDefined();
+    expect(outStyles.paragraphs).toBeDefined();
+    expect(
+      (minified.styles.textStyles as unknown as Record<string, unknown>).style,
+    ).toEqual({ color: '#123456' });
+
+    // The source model is untouched — migration still has every legacy option and the colour.
+    expect(Object.keys(model.styles.textStyles.textStyleOptions)).toHaveLength(
+      14,
+    );
+    expect(textStyles.style).toEqual({ color: '#123456' });
+  });
+});
+
 /**
  * BP-6081: the AI reads colours as values and floors text against the band it
  * sits on. The footer shipped with no colours at all and a text section's band
@@ -334,3 +370,62 @@ describe('minifyBrandPageMetadata — bands the AI must see (BP-6081)', () => {
     });
   });
 });
+
+// The nav keeps only its overrides once it links a role, so a font equal to its role's isn't
+// stored; the AI still has to see the font the nav draws.
+describe('minifyBrandPageMetadata — nav font resolves against its role', () => {
+  test('a nav on Paragraph 1 with no font of its own reports Paragraph 1’s font', () => {
+    const model = new BrandPageModel({ ...BRAND_SITE, pages: [] });
+
+    model.styles.textStyles.textStyleOptions.paragraph1.style.fontFamily =
+      'Oswald';
+    model.pageHeaderDesktop.navigation.defaultButtonStyle = {
+      textStyleType: 'paragraph1',
+      fontSize: '1em',
+    };
+
+    const minified = minifyBrandPageMetadata(model);
+
+    expect(
+      minified.pageHeaderDesktop?.navigation?.defaultButtonStyle?.fontFamily,
+    ).toBe('Oswald');
+  });
+
+  test('a nav whose role has no font either reports the page root’s Lato, not a stale site font', () => {
+    const model = new BrandPageModel({ ...BRAND_SITE, pages: [] });
+
+    (model.styles.textStyles as unknown as Record<string, unknown>)[
+      'textFontFamily'
+    ] = 'oswald';
+    delete (
+      model.styles.textStyles.textStyleOptions.paragraph1.style as {
+        fontFamily?: string;
+      }
+    ).fontFamily;
+    model.pageHeaderDesktop.navigation.defaultButtonStyle = {
+      textStyleType: 'paragraph1',
+    };
+
+    const minified = minifyBrandPageMetadata(model);
+
+    expect(
+      minified.pageHeaderDesktop?.navigation?.defaultButtonStyle?.fontFamily,
+    ).toBe('Lato');
+    expect(minified.styles.textStyles).not.toHaveProperty('textFontFamily');
+  });
+
+  test('a nav font of its own is reported as is', () => {
+    const model = new BrandPageModel({ ...BRAND_SITE, pages: [] });
+
+    model.pageHeaderDesktop.navigation.defaultButtonStyle = {
+      textStyleType: 'paragraph1',
+      fontFamily: 'Georgia',
+    };
+
+    const minified = minifyBrandPageMetadata(model);
+
+    expect(
+      minified.pageHeaderDesktop?.navigation?.defaultButtonStyle?.fontFamily,
+    ).toBe('Georgia');
+  });
+});