@akinon/pz-theme 2.0.103-rc.0 → 2.0.103

package/src/utils/__tests__/property-switches.test.tsx

@@ -0,0 +1,250 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import ThemeBlock, { type Block } from '../../theme-block';
+import type { Section } from '../../theme-section';
+import {
+  applyPropertySwitchesToSections,
+  HOVER_REVEAL_CSS,
+  HOVER_SCOPE_ATTRIBUTE,
+  readSwitch,
+  REVEAL_ON_HOVER_ATTRIBUTE
+} from '../property-switches';
+
+/**
+ * ZERO-4829 — the Product Card's badge, discount chip, favourite and colour
+ * swatches are switched from booleans on the card's root. A child names the
+ * switch it answers to; the nearest enclosing block that defines that switch
+ * decides, and a switch nobody defined leaves the child as it was.
+ */
+const block = (
+  id: string,
+  properties: Record<string, unknown> = {},
+  blocks: Block[] = [],
+  type = 'group'
+): Block => ({
+  id,
+  type,
+  label: id,
+  value: type === 'text' ? id : undefined,
+  properties: { tag: 'div', ...properties },
+  styles: {},
+  order: 0,
+  hidden: false,
+  blocks
+});
+
+const section = (
+  blocks: Block[],
+  properties: Record<string, unknown> = {}
+): Section => ({
+  id: 's1',
+  type: 'custom',
+  name: 's1',
+  label: 'S1',
+  order: 0,
+  hidden: false,
+  properties,
+  styles: {},
+  blocks
+});
+
+const ids = (blocks: Block[] | undefined): string[] =>
+  (blocks || []).map((entry) => entry.id);
+
+const find = (blocks: Block[] | undefined, id: string): Block | undefined => {
+  for (const entry of blocks || []) {
+    if (entry.id === id) return entry;
+    const nested = find(entry.blocks, id);
+    if (nested) return nested;
+  }
+  return undefined;
+};
+
+describe('readSwitch', () => {
+  it('reads booleans, the strings a select stores, and per-breakpoint objects', () => {
+    expect(readSwitch(true)).toBe(true);
+    expect(readSwitch('false')).toBe(false);
+    expect(readSwitch({ desktop: true })).toBe(true);
+    expect(readSwitch({ desktop: true, mobile: false }, 'mobile')).toBe(false);
+    // A tablet with nothing authored reads the mobile value, as the CSS does.
+    expect(readSwitch({ desktop: true, mobile: false }, 'tablet')).toBe(false);
+  });
+
+  it('is undefined for nothing, so an undefined switch does not decide', () => {
+    expect(readSwitch(undefined)).toBeUndefined();
+    expect(readSwitch('')).toBeUndefined();
+    expect(readSwitch(null)).toBeUndefined();
+    expect(readSwitch('maybe')).toBeUndefined();
+  });
+});
+
+describe('visibleWhenProperty', () => {
+  const card = (switches: Record<string, unknown>) =>
+    block('card', switches, [
+      block('caption', {}, [
+        block('badge', { visibleWhenProperty: 'showBadge' }, [], 'text'),
+        block('name', {}, [], 'text')
+      ])
+    ]);
+
+  it('drops the child when the nearest definer has the switch off', () => {
+    const [result] = applyPropertySwitchesToSections([
+      section([card({ showBadge: false })])
+    ]);
+    expect(ids(find(result.blocks, 'caption')?.blocks)).toEqual(['name']);
+  });
+
+  it('keeps the child when the switch is on, or when nobody defined it', () => {
+    const [on] = applyPropertySwitchesToSections([
+      section([card({ showBadge: true })])
+    ]);
+    expect(ids(find(on.blocks, 'caption')?.blocks)).toEqual(['badge', 'name']);
+
+    const [undefinedSwitch] = applyPropertySwitchesToSections([
+      section([card({})])
+    ]);
+    expect(ids(find(undefinedSwitch.blocks, 'caption')?.blocks)).toEqual([
+      'badge',
+      'name'
+    ]);
+  });
+
+  it('the nearest definer wins over an outer one', () => {
+    const outer = block('outer', { showBadge: true }, [
+      card({ showBadge: false })
+    ]);
+    const [result] = applyPropertySwitchesToSections([section([outer])]);
+    expect(ids(find(result.blocks, 'caption')?.blocks)).toEqual(['name']);
+  });
+
+  it('a section property can drive a switch too', () => {
+    const [result] = applyPropertySwitchesToSections([
+      section([card({})], { showBadge: false })
+    ]);
+    expect(ids(find(result.blocks, 'caption')?.blocks)).toEqual(['name']);
+  });
+
+  it('reads the switch at the rendered breakpoint', () => {
+    const [desktop] = applyPropertySwitchesToSections(
+      [section([card({ showBadge: { desktop: true, mobile: false } })])],
+      'desktop'
+    );
+    const [mobile] = applyPropertySwitchesToSections(
+      [section([card({ showBadge: { desktop: true, mobile: false } })])],
+      'mobile'
+    );
+    expect(ids(find(desktop.blocks, 'caption')?.blocks)).toEqual([
+      'badge',
+      'name'
+    ]);
+    expect(ids(find(mobile.blocks, 'caption')?.blocks)).toEqual(['name']);
+  });
+
+  it('leaves untouched trees untouched', () => {
+    const input = section([block('plain', {}, [block('child')])]);
+    const [result] = applyPropertySwitchesToSections([input]);
+    expect(result.blocks).toEqual(input.blocks);
+    expect('hoverScope' in result.blocks[0]).toBe(false);
+  });
+});
+
+describe('hoverRevealWhenProperty', () => {
+  const card = (switches: Record<string, unknown>) =>
+    block('card', switches, [
+      block('media', {}, [
+        block(
+          'favourite',
+          {
+            visibleWhenProperty: 'showFavourite',
+            hoverRevealWhenProperty: 'favouriteOnHover'
+          },
+          [],
+          'icon'
+        )
+      ])
+    ]);
+
+  it('marks the child and the block that defines the switch when it is on', () => {
+    const [result] = applyPropertySwitchesToSections([
+      section([card({ favouriteOnHover: true })])
+    ]);
+    expect(find(result.blocks, 'favourite')?.revealOnHover).toBe(true);
+    expect(find(result.blocks, 'card')?.hoverScope).toBe(true);
+    // The group in between is not the scope: hovering the caption reveals too.
+    expect(find(result.blocks, 'media')?.hoverScope).toBeUndefined();
+  });
+
+  it('marks nothing when the switch is off or undefined — the child just shows', () => {
+    for (const switches of [{ favouriteOnHover: false }, {}]) {
+      const [result] = applyPropertySwitchesToSections([
+        section([card(switches)])
+      ]);
+      expect(find(result.blocks, 'favourite')?.revealOnHover).toBeUndefined();
+      expect(find(result.blocks, 'card')?.hoverScope).toBeUndefined();
+    }
+  });
+
+  it('a section is not a hover scope, so a section-defined switch alone keeps the child visible', () => {
+    const [result] = applyPropertySwitchesToSections([
+      section([card({})], { favouriteOnHover: true })
+    ]);
+    expect(find(result.blocks, 'favourite')?.revealOnHover).toBeUndefined();
+  });
+
+  it('a block that declares itself the hover scope is hovered, wherever the switch was defined', () => {
+    // The section (or a grid) says "on hover"; the card root says "hover ME".
+    const [fromSection] = applyPropertySwitchesToSections([
+      section([card({ hoverScope: true })], { favouriteOnHover: true })
+    ]);
+    expect(find(fromSection.blocks, 'favourite')?.revealOnHover).toBe(true);
+    expect(find(fromSection.blocks, 'card')?.hoverScope).toBe(true);
+
+    // An outer block defines the switch, the card in it is still the scope.
+    const grid = block('grid', { favouriteOnHover: true }, [
+      card({ hoverScope: true })
+    ]);
+    const [fromGrid] = applyPropertySwitchesToSections([section([grid])]);
+    expect(find(fromGrid.blocks, 'card')?.hoverScope).toBe(true);
+    expect(find(fromGrid.blocks, 'grid')?.hoverScope).toBeUndefined();
+
+    // A card that says nothing inherits; a card that says Hide overrides.
+    const [inherit] = applyPropertySwitchesToSections([
+      section([card({ hoverScope: true })], { showFavourite: false })
+    ]);
+    expect(find(inherit.blocks, 'favourite')).toBeUndefined();
+  });
+
+  it('the wrapper writes both marks as data attributes', () => {
+    const [result] = applyPropertySwitchesToSections([
+      section([card({ favouriteOnHover: true })])
+    ]);
+    const { container } = render(
+      <ThemeBlock
+        block={result.blocks[0]}
+        placeholderId="p"
+        sectionId="s1"
+        isDesigner={false}
+      />
+    );
+
+    const scope = container.querySelector(`[${HOVER_SCOPE_ATTRIBUTE}]`);
+    const revealed = container.querySelector(`[${REVEAL_ON_HOVER_ATTRIBUTE}]`);
+    expect(scope?.getAttribute('data-block-id')).toBe('card');
+    expect(revealed?.getAttribute('data-block-id')).toBe('favourite');
+    expect(scope?.contains(revealed as Node)).toBe(true);
+  });
+
+  it('the CSS hides the child until its scope is hovered or focused, on hovering desktops only', () => {
+    expect(HOVER_REVEAL_CSS).toContain('@media (min-width: 1024px) and (hover: hover)');
+    expect(HOVER_REVEAL_CSS).toContain(
+      `[${HOVER_SCOPE_ATTRIBUTE}] [${REVEAL_ON_HOVER_ATTRIBUTE}]{opacity:0`
+    );
+    expect(HOVER_REVEAL_CSS).toContain(
+      `[${HOVER_SCOPE_ATTRIBUTE}]:hover [${REVEAL_ON_HOVER_ATTRIBUTE}]`
+    );
+    expect(HOVER_REVEAL_CSS).toContain(
+      `[${HOVER_SCOPE_ATTRIBUTE}]:focus-within [${REVEAL_ON_HOVER_ATTRIBUTE}]`
+    );
+  });
+});

package/src/utils/index.ts

@@ -86,6 +86,51 @@ const THEME_CSS_VARIABLE_MAP: Record<string, string> = {
 
 const CSS_VAR_REGEX = /var\((--[\w-]+)(?:,\s*([^)]+))?\)/g;
 
+/**
+ * `--theme-font-<variant>` — the family of one of the theme's typography
+ * variants (`heading01`, `heading02`, `subheading`, `body`), so a template can
+ * say "the theme's body face" without naming a brand's font.
+ *
+ * Resolved from the settings on both the server and the client, like the
+ * colour variables above. Reading it off the document instead (the
+ * `getComputedCssVariable` path) would answer only in the browser, and the
+ * fallback the server printed would then disagree with what hydration wrote.
+ */
+const THEME_FONT_VARIABLE_PREFIX = '--theme-font-';
+
+export const readThemeTypographyFont = (
+  themeSettings: ThemeSettings | undefined,
+  variantKey: string
+): string | undefined => {
+  const variants = themeSettings?.typography;
+  if (!Array.isArray(variants)) return undefined;
+
+  const variant = variants.find(
+    (entry) =>
+      entry &&
+      typeof entry === 'object' &&
+      (entry as { key?: unknown }).key === variantKey
+  ) as { fontFamily?: unknown } | undefined;
+  const family = variant?.fontFamily;
+
+  return typeof family === 'string' &&
+    family.trim() &&
+    family.trim() !== 'inherit'
+    ? family.trim()
+    : undefined;
+};
+
+const resolveThemeFontVariable = (
+  variableName: string,
+  themeSettings: ThemeSettings | undefined
+): string | undefined =>
+  variableName.startsWith(THEME_FONT_VARIABLE_PREFIX)
+    ? readThemeTypographyFont(
+        themeSettings,
+        variableName.slice(THEME_FONT_VARIABLE_PREFIX.length)
+      )
+    : undefined;
+
 const stripQuotes = (value: string) => value.replace(/^['"]|['"]$/g, '').trim();
 
 const getComputedCssVariable = (variableName: string): string | null => {
@@ -193,8 +238,8 @@ export const colorToRgba = (color: string, alpha: number): string | null => {
       rawAuthored === undefined
         ? 1
         : rawAuthored.endsWith('%')
-        ? Number(rawAuthored.slice(0, -1)) / 100
-        : Number(rawAuthored);
+          ? Number(rawAuthored.slice(0, -1)) / 100
+          : Number(rawAuthored);
     const effective = Number.isNaN(authored) ? alpha : authored * alpha;
     return `rgba(${r}, ${g}, ${b}, ${effective})`;
   }
@@ -230,10 +275,17 @@ export const resolveThemeCssVariables = (
       const themeColor = mappedKey
         ? (themeSettings?.[mappedKey] as string | undefined)
         : undefined;
+      const themeFont = resolveThemeFontVariable(variableName, themeSettings);
       const computedValue = getComputedCssVariable(variableName);
       const fallback = fallbackValue ? stripQuotes(fallbackValue) : undefined;
 
-      return themeColor || computedValue || fallback || `var(${variableName})`;
+      return (
+        themeColor ||
+        themeFont ||
+        computedValue ||
+        fallback ||
+        `var(${variableName})`
+      );
     }
   );
 };