@akinon/pz-theme 2.0.164-rc.1 → 2.0.164

package/CHANGELOG.md

@@ -1,63 +1,13 @@
 # @akinon/pz-theme
 
-## 2.0.164-rc.1
-
-### Patch Changes
-
-- Updated dependencies [8853822c]
-  - @akinon/next@2.0.164-rc.1
-  - @akinon/theme-contract@2.0.164-rc.1
-
-## 2.0.164-rc.0
-
-### Patch Changes
-
-- 8e040731e: ZERO-5235: let brands hang actions on order detail lines
-- c761b9fd: ZERO-5296: fall back to the storefront default language in the text block
-- 17a598dae: ZERO-5296: report the storefront default language to the editor
-- 3b05a407d: ZERO-5232: allow richtext settings on custom blocks
-- Updated dependencies [86187b1c2]
-- Updated dependencies [08390a87]
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [4c3465ae]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [549da545]
-- Updated dependencies [2fea41430]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [d635d345]
-- Updated dependencies [bfafa3f49]
-- Updated dependencies [d860c917]
-- Updated dependencies [ac6cada1]
-- Updated dependencies [e90c0e02]
-- Updated dependencies [dc7f9ca5]
-- Updated dependencies [57d7eb305]
-- Updated dependencies [0145dc3f]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [92086b29]
-- Updated dependencies [227b7408]
-- Updated dependencies [9db81a714]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d06]
-- Updated dependencies [4ac7b2a1e]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6c]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a631]
-- Updated dependencies [e18836b20]
-- Updated dependencies [b1111d7b1]
-- Updated dependencies [1595d458e]
-- Updated dependencies [dca128112]
-- Updated dependencies [9a7b0937]
-  - @akinon/next@2.0.164-rc.0
-  - @akinon/theme-contract@2.0.164-rc.0
+## 2.0.164
+
+### Patch Changes
+
+- 64548e48: ZERO-5483: Render the redesigned theme settings on the storefront. The theme's colour roles (`linkColor`, `headingColor`, `textColor`, `footerBackgroundColor`, `borderColor`), custom colours and the typography styles managed by the new settings page are published as `--theme-*` variables (server `<style>` and live in the designer, with deleted keys removed) and, only for keys that are set, as low-specificity defaults inside text-block rich text and the composed footer, so a theme that never touches the new settings renders as before. `pageUpEnabled` turns on a back-to-top button mounted by `ThemeModals` (also exported as `ThemePageUp`; icon from `pageUpIcon`, else the theme's `up-arrow` icon, rendered as an image; lifted above fixed bottom bars and floating buttons in its corner, or by `--pz-bottom-overlay-offset`). Breadcrumb blocks without their own separator use `breadcrumbSeparator`; the social icons list can opt into the theme's `socialNetworks` with `useThemeSocialNetworks`, and `x` draws the X mark. `@akinon/theme-contract` types the new settings keys and typography fields. projectzeronext's stock header uses the theme's `logo`, `brandName` and `logoWidthDesktop`/`logoWidthMobile`, and the root layout adds the theme's `favicon` next to the PWA icons.
+- Updated dependencies [64548e48]
+  - @akinon/theme-contract@2.0.164
+  - @akinon/next@2.0.164
 
 ## 2.0.163
 

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.164-rc.1",
+  "version": "2.0.164",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.164-rc.1",
+    "@akinon/next": "2.0.164",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.164-rc.1",
+    "@akinon/theme-contract": "2.0.164",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "react-multi-carousel": "2.8.4",
@@ -21,7 +21,7 @@
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.164-rc.1",
+    "@akinon/next": "2.0.164",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/__tests__/editor-locale-bridge.test.tsx

@@ -28,7 +28,6 @@ const SETTINGS_LOCALES = [
 const mockLocalization = {
   locale: 'tr',
   locales: SETTINGS_LOCALES as Array<Record<string, unknown>>,
-  defaultLocaleValue: 'tr',
   setLocale: jest.fn()
 };
 
@@ -107,7 +106,6 @@ beforeEach(() => {
   postMessage.mockClear();
   mockLocalization.locale = 'tr';
   mockLocalization.locales = SETTINGS_LOCALES;
-  mockLocalization.defaultLocaleValue = 'tr';
   mockLocalization.setLocale = jest.fn();
   delete (window as { __iframeReadySent?: boolean }).__iframeReadySent;
 });
@@ -146,8 +144,7 @@ describe('inside the editor', () => {
             { value: 'en', label: 'English' },
             { value: 'tr', label: 'Türkçe' },
             { value: 'de', label: 'de' }
-          ],
-          defaultLocale: 'tr'
+          ]
         }
       })
     ]);
@@ -157,34 +154,6 @@ describe('inside the editor', () => {
     expect(targetOrigin).toBe(EDITOR_ORIGIN);
   });
 
-  it('posts the languages before the document reports ready', () => {
-    // The editor holds every per-language write until IFRAME_READY and takes
-    // "ready without languages" to mean they are never coming, so the order
-    // of the two frames is part of the contract.
-    render(placeholder('header'));
-
-    const types = postMessage.mock.calls.map(([message]) => message?.type);
-    expect(types).toContain('LOCALE_UPDATE');
-    expect(types).toContain('IFRAME_READY');
-    expect(types.indexOf('LOCALE_UPDATE')).toBeLessThan(
-      types.indexOf('IFRAME_READY')
-    );
-  });
-
-  it("posts the brand's default language, whichever it is", () => {
-    // The editor's per-language text controls take the plain-string form to
-    // mean this language; left to guess, the editor assumed English.
-    mockLocalization.defaultLocaleValue = 'de';
-
-    render(<EditorLocaleBridge />);
-
-    expect(localeFrames()).toEqual([
-      expect.objectContaining({
-        data: expect.objectContaining({ locale: 'tr', defaultLocale: 'de' })
-      })
-    ]);
-  });
-
   it("follows the editor's switch exactly once, with several placeholders mounted", () => {
     render(
       <>

package/src/__tests__/theme-settings-defaults.test.tsx

@@ -0,0 +1,395 @@
+import React from 'react';
+import { act, fireEvent, render } from '@testing-library/react';
+// The Node build: the path a storefront actually server-renders through.
+import { renderToStaticMarkup } from 'react-dom/server.node';
+
+import ThemePlaceholderWrapper, {
+  buildThemeElementDefaultsCss
+} from '../theme-placeholder-wrapper';
+import { __resetEditorBridgeForTests } from '../editor-bridge';
+import { HOVER_REVEAL_CSS } from '../utils/property-switches';
+import type { Section } from '../theme-section';
+
+/**
+ * The redesigned Web Theme Settings reach the storefront as
+ * `:root` variables plus rich-text element defaults, painted from the
+ * placeholder wrapper's server `<style>` and kept live by `injectThemeColors`.
+ *
+ * Three promises are pinned here:
+ *  1. A theme saved by the old settings page renders byte-identically: the
+ *     same `<style>` and not one `data-pz-*` attribute.
+ *  2. Once a key is set, the defaults reach plain rich text and nothing that
+ *     authored its own colour or typography (a white-on-dark hero keeps its
+ *     white headings; a text block with its own size is not retypeset).
+ *  3. The editor's LOAD_THEME / UPDATE_THEME keep both the `<style>` and the
+ *     inline variables in step, removing what was deleted — but never the
+ *     legacy colour variables.
+ */
+
+const EDITOR_ORIGIN = 'http://localhost:5174';
+
+const LEGACY_SETTINGS = {
+  primaryColor: '#000000',
+  secondaryColor: '#E95151',
+  color3: '#1F2937',
+  color4: '#CBCBCB',
+  backgroundColor: '#FFFFFF',
+  breadcrumbSeparator: '>',
+  typography: [
+    {
+      key: 'heading01',
+      fontFamily: 'Jost',
+      fontWeight: '500',
+      fontSize: 34,
+      color: '#FFF',
+      styles: []
+    },
+    {
+      key: 'body',
+      fontFamily: 'Jost',
+      fontWeight: '400',
+      fontSize: 12,
+      color: '#FFF',
+      styles: []
+    }
+  ]
+};
+
+/** The <style> the wrapper emitted for LEGACY_SETTINGS before the theme settings redesign. */
+const LEGACY_STYLE =
+  ':root{--theme-background:#FFFFFF}body{background-color:#FFFFFF}' +
+  ':root{--theme-font-heading01:Jost;--theme-font-body:Jost}' +
+  HOVER_REVEAL_CSS;
+
+const managed = (key: string, extra: Record<string, unknown> = {}) => ({
+  key,
+  fontFamily: 'Jost',
+  fontWeight: '600',
+  fontSize: 32,
+  lineHeight: 40,
+  letterSpacing: 0,
+  textTransform: 'none',
+  color: '#111111',
+  styles: [],
+  ...extra
+});
+
+const NEW_SETTINGS = {
+  ...LEGACY_SETTINGS,
+  linkColor: '#4482FF',
+  headingColor: '#222222',
+  textColor: '#555555',
+  borderColor: '#E2E2E2',
+  footerBackgroundColor: '#F4F4F4',
+  customColors: [{ id: 'custom-lx1', name: 'Kampanya', value: '#B0272C' }],
+  typography: [
+    managed('heading01'),
+    managed('body', { fontWeight: '400', fontSize: 14, lineHeight: 22 }),
+    managed('custom-lx2', { fontFamily: 'Lora', custom: true })
+  ]
+};
+
+const text = (id: string, value: string, styles = {}) => ({
+  id,
+  type: 'text',
+  label: id,
+  order: 0,
+  hidden: false,
+  properties: {},
+  styles,
+  value,
+  blocks: []
+});
+
+const SECTIONS = [
+  {
+    id: 'hero',
+    type: 'generic-section',
+    name: 'hero',
+    label: 'Hero',
+    order: 0,
+    hidden: false,
+    properties: {},
+    // White on dark: its rich text must keep inheriting the white.
+    styles: {
+      color: { desktop: '#ffffff' },
+      'background-color': { desktop: '#000000' }
+    },
+    blocks: [
+      text(
+        'hero-text',
+        '<h1 id="hero-h1">Big</h1><p id="hero-p">On <a id="hero-a" href="/x">dark</a></p>'
+      )
+    ]
+  },
+  {
+    id: 'body',
+    type: 'generic-section',
+    name: 'body',
+    label: 'Body',
+    order: 1,
+    hidden: false,
+    properties: {},
+    styles: {},
+    blocks: [
+      text(
+        'plain-text',
+        '<h2 id="plain-h2">Title</h2><p id="plain-p">Para <a id="plain-a" href="/y">link</a></p><ul><li id="plain-li">One</li></ul><hr id="plain-hr">'
+      ),
+      {
+        ...text('sized-text', '<p id="sized-p">Sized</p>', {
+          'font-size': { mobile: '18px' }
+        }),
+        order: 1
+      },
+      {
+        id: 'coloured-group',
+        type: 'group',
+        label: 'Group',
+        order: 2,
+        hidden: false,
+        properties: {},
+        styles: { color: { desktop: '#ff0000' } },
+        blocks: [text('inner-text', '<p id="inner-p">Red</p>')]
+      }
+    ]
+  }
+] as unknown as Section[];
+
+const wrapper = (
+  settings: Record<string, unknown> | null,
+  slug = 'theme-homepage-body'
+) => (
+  <ThemePlaceholderWrapper
+    slug={slug}
+    initialSections={SECTIONS}
+    initialPlaceholderId={slug}
+    isDesignMode={false}
+    initialThemeSettings={settings}
+  />
+);
+
+const ssrDocument = (element: React.ReactElement) =>
+  new DOMParser().parseFromString(renderToStaticMarkup(element), 'text/html');
+
+/** `selector{declarations}` pairs of a flat stylesheet (no nested blocks). */
+const rulesOf = (css: string) =>
+  css
+    .split('}')
+    .filter(Boolean)
+    .map((rule) => {
+      const [selector, declarations] = rule.split('{');
+      return { selector, declarations };
+    });
+
+/**
+ * What a rule with this declaration matches: element ids, and `root:<block>`
+ * for a text block's rich-text root.
+ */
+const matchedBy = (doc: Document, css: string, declaration: string) => {
+  const rule = rulesOf(css).find((r) => r.declarations.includes(declaration));
+  if (!rule) throw new Error(`no rule with ${declaration}`);
+  return Array.from(doc.querySelectorAll(rule.selector))
+    .map((el) =>
+      el.hasAttribute('data-pz-rich-text')
+        ? `root:${el.parentElement?.getAttribute('data-block-id')}`
+        : el.id
+    )
+    .sort();
+};
+
+describe('a theme saved by the old settings page', () => {
+  it('server-renders the same <style> as before and no new attribute', () => {
+    const html = renderToStaticMarkup(wrapper(LEGACY_SETTINGS));
+    const firstStyle = html.match(/^<style>(.*?)<\/style>/)?.[1];
+
+    expect(firstStyle).toBe(LEGACY_STYLE);
+    expect(html).not.toContain('data-pz-');
+    expect(html).not.toContain('--theme-link');
+  });
+
+  it('gains no attribute on the client either', () => {
+    const { container, unmount } = render(wrapper(LEGACY_SETTINGS));
+    expect(container.querySelector('[data-pz-rich-text]')).toBeNull();
+    expect(container.querySelector('[data-pz-own-color]')).toBeNull();
+    expect(container.querySelector('[data-pz-own-type]')).toBeNull();
+    unmount();
+  });
+});
+
+describe('a theme that sets the new keys', () => {
+  const doc = () => ssrDocument(wrapper(NEW_SETTINGS));
+  const css = buildThemeElementDefaultsCss(NEW_SETTINGS);
+
+  it('emits the variables and the rules with the markup', () => {
+    const style = doc().querySelector('style')?.textContent ?? '';
+
+    expect(style).toContain(
+      ':root{--theme-link:#4482FF;--theme-heading:#222222;--theme-text:#555555;--theme-footer-background:#F4F4F4;--theme-border:#E2E2E2;--theme-custom-lx1:#B0272C;'
+    );
+    expect(style).toContain('--theme-line-height-custom-lx2:40px');
+    expect(style).toContain(css);
+    // Unchanged, and still ahead of the new rules.
+    expect(style.indexOf('--theme-font-body:Jost')).toBeLessThan(
+      style.indexOf('--theme-link')
+    );
+  });
+
+  it('marks every text root, and only the elements that authored values', () => {
+    const page = doc();
+    const ids = (selector: string) =>
+      Array.from(page.querySelectorAll(selector))
+        .map(
+          (el) =>
+            el.getAttribute('data-block-id') ??
+            el.getAttribute('data-section-id')
+        )
+        .sort();
+
+    expect(
+      page.querySelectorAll('[data-part="root"][data-pz-rich-text]')
+    ).toHaveLength(4);
+    expect(ids('[data-pz-own-color]')).toEqual(['coloured-group', 'hero']);
+    expect(ids('[data-pz-own-type]')).toEqual(['sized-text']);
+  });
+
+  it('colours plain rich text and leaves inherited colours alone', () => {
+    const page = doc();
+
+    // Not the hero (white section) nor the red group's text, which inherit.
+    expect(matchedBy(page, css, 'color:var(--theme-text)')).toEqual([
+      'plain-li',
+      'plain-p',
+      'root:plain-text',
+      'root:sized-text',
+      'sized-p'
+    ]);
+    expect(matchedBy(page, css, 'color:var(--theme-heading)')).toEqual([
+      'plain-h2'
+    ]);
+    expect(matchedBy(page, css, 'color:var(--theme-link)')).toEqual([
+      'plain-a'
+    ]);
+    expect(matchedBy(page, css, 'border-color:var(--theme-border)')).toEqual([
+      'plain-hr'
+    ]);
+  });
+
+  it('retypesets plain rich text and leaves authored typography alone', () => {
+    const page = doc();
+
+    // The hero only owns its colour: its h1 still takes heading01.
+    expect(
+      matchedBy(page, css, 'line-height:var(--theme-line-height-heading01)')
+    ).toEqual(['hero-h1']);
+    // Body: every rich-text root and p, except inside the sized text block.
+    expect(
+      matchedBy(page, css, 'line-height:var(--theme-line-height-body)')
+    ).toEqual([
+      'hero-p',
+      'inner-p',
+      'plain-p',
+      'root:hero-text',
+      'root:inner-text',
+      'root:plain-text'
+    ]);
+    // A custom style publishes variables only.
+    expect(css).not.toContain('custom-lx2');
+  });
+
+  it('paints only the composed footer placeholder', () => {
+    const footer = ssrDocument(wrapper(NEW_SETTINGS, 'footer'));
+    const body = doc();
+    const footerCss = buildThemeElementDefaultsCss({
+      footerBackgroundColor: '#F4F4F4'
+    });
+
+    expect(
+      footer.querySelectorAll(rulesOf(footerCss)[0].selector)
+    ).toHaveLength(1);
+    expect(body.querySelectorAll(rulesOf(footerCss)[0].selector)).toHaveLength(
+      0
+    );
+  });
+});
+
+describe('the editor canvas', () => {
+  const root = document.documentElement;
+  const inline = (name: string) => root.style.getPropertyValue(name);
+  const styleText = (container: HTMLElement) =>
+    Array.from(container.querySelectorAll('style'))
+      .map((style) => style.textContent ?? '')
+      .join('');
+
+  const postFromEditor = (type: string, settings: Record<string, unknown>) =>
+    act(() => {
+      fireEvent(
+        window,
+        new MessageEvent('message', {
+          origin: EDITOR_ORIGIN,
+          data: { type, data: { theme: { settings } } }
+        })
+      );
+    });
+
+  beforeEach(() => {
+    __resetEditorBridgeForTests();
+    root.removeAttribute('style');
+  });
+
+  it('keeps the <style> and the inline variables in step, removing what was deleted', () => {
+    const { container, unmount } = render(wrapper(NEW_SETTINGS));
+
+    expect(inline('--theme-link')).toBe('#4482FF');
+    expect(inline('--theme-custom-lx1')).toBe('#B0272C');
+    expect(inline('--theme-font-custom-lx2')).toBe('Lora');
+    expect(inline('--theme-line-height-custom-lx2')).toBe('40px');
+    expect(inline('--theme-primary')).toBe('#000000');
+
+    postFromEditor('LOAD_THEME', { ...NEW_SETTINGS, linkColor: '#00AA00' });
+    expect(inline('--theme-link')).toBe('#00AA00');
+    expect(styleText(container)).toContain('--theme-link:#00AA00');
+    expect(container.querySelector('[data-pz-rich-text]')).not.toBeNull();
+
+    // The merchant hid the link role, deleted the custom colour and the
+    // custom style, and the primary colour is not in this message at all.
+    const removed = ['linkColor', 'customColors', 'primaryColor'];
+    const rest = Object.fromEntries(
+      Object.entries(NEW_SETTINGS).filter(([key]) => !removed.includes(key))
+    );
+    postFromEditor('UPDATE_THEME', {
+      ...rest,
+      typography: NEW_SETTINGS.typography.filter(
+        (variant) => variant.key !== 'custom-lx2'
+      )
+    });
+
+    expect(inline('--theme-link')).toBe('');
+    expect(inline('--theme-custom-lx1')).toBe('');
+    expect(inline('--theme-font-custom-lx2')).toBe('');
+    expect(inline('--theme-line-height-custom-lx2')).toBe('');
+    expect(styleText(container)).not.toContain('--theme-link');
+    expect(styleText(container)).not.toContain('custom-lx');
+    // Still set: the roles that remain, and the legacy colours, always.
+    expect(inline('--theme-text')).toBe('#555555');
+    expect(inline('--theme-line-height-body')).toBe('22px');
+    expect(inline('--theme-primary')).toBe('#000000');
+    unmount();
+  });
+
+  it('drops every marker once the last text default is removed', () => {
+    const { container, unmount } = render(wrapper(NEW_SETTINGS));
+    expect(container.querySelector('[data-pz-own-color]')).not.toBeNull();
+
+    postFromEditor('UPDATE_THEME', LEGACY_SETTINGS);
+
+    expect(container.querySelector('[data-pz-rich-text]')).toBeNull();
+    expect(container.querySelector('[data-pz-own-color]')).toBeNull();
+    expect(container.querySelector('[data-pz-own-type]')).toBeNull();
+    expect(inline('--theme-text')).toBe('');
+    expect(inline('--theme-line-height-heading01')).toBe('');
+    // Legacy family variables are still the old loop's to write.
+    expect(inline('--theme-font-body')).toBe('Jost');
+    unmount();
+  });
+});