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

package/CHANGELOG.md

@@ -1,38 +1,13 @@
 # @akinon/pz-theme
 
-## 2.0.100-rc.0
-
-### Patch Changes
-
-- Updated dependencies [86187b1c]
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [2fea41430]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f49]
-- Updated dependencies [57d7eb305]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [9db81a714]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d06]
-- Updated dependencies [4ac7b2a1e]
-- Updated dependencies [e9598c71d]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6c]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a631]
-- Updated dependencies [e18836b20]
-- Updated dependencies [b1111d7b]
-  - @akinon/next@2.0.100-rc.0
-  - @akinon/theme-contract@2.0.100-rc.0
+## 2.0.100
+
+### Patch Changes
+
+- dabdde88: ZERO-5014: Add the collapsible block — any stack of composed children clamped to a line budget behind a fading read-more trigger, with the whole composition kept in the server HTML.
+- 6a8255c1: ZERO-5015: Let the image block serve a different image per device — optional tablet and phone uploads are emitted as `<picture><source media>` so the browser picks before any JS runs, while a block with no override keeps rendering exactly the `<img>` it renders today.
+  - @akinon/next@2.0.100
+  - @akinon/theme-contract@2.0.100
 
 ## 2.0.99
 

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.100-rc.0",
+  "version": "2.0.100",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.100-rc.0",
+    "@akinon/next": "2.0.100",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.100-rc.0",
+    "@akinon/theme-contract": "2.0.100",
     "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.100-rc.0",
+    "@akinon/next": "2.0.100",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/__tests__/registry-parity.test.ts

@@ -51,6 +51,7 @@ const EXPECTED_BLOCK_TYPES = [
   'checkout-steps-outlet',
   'checkout-summary',
   'checkout-summary-outlet',
+  'collapsible',
   'container',
   'countdown',
   'counter',

package/src/blocks/__tests__/collapsible-block.test.tsx

@@ -0,0 +1,521 @@
+/**
+ * The collapsible block: what it emits, and the two things that would silently
+ * destroy it.
+ *
+ * The first is SEO. The whole point of this block is that the clipped half is
+ * present in the server HTML, so there is a `renderToString` test that asserts
+ * every child marker survives the collapsed render. A refactor that reaches for
+ * `{isExpanded && …}` passes every interaction test in this file and fails that
+ * one.
+ *
+ * The second is the clamp mechanism. `-webkit-line-clamp` and
+ * `overflow: hidden` both LOOK correct in a browser and are both wrong here
+ * (they cannot count lines across block children, and a hidden box scrolls the
+ * visible lines away when a clipped link takes focus), so the emitted sheet is
+ * asserted for `1lh`, for `overflow:clip`, and for the `hidden` fallback that
+ * has to precede it.
+ */
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { renderToString } from 'react-dom/server';
+
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: any) => <div data-testid="tb" data-id={block.id} />
+}));
+
+import CollapsibleBlock, {
+  COLLAPSIBLE_FALLBACK_LABELS
+} from '../collapsible-block';
+
+const child = (id: string, over: Record<string, unknown> = {}) => ({
+  id,
+  type: 'text',
+  label: `child ${id}`,
+  hidden: false,
+  order: 0,
+  properties: {},
+  styles: {},
+  ...over
+});
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: {
+      id: 'col-1',
+      type: 'collapsible',
+      label: 'Collapsible',
+      properties: {},
+      styles: {},
+      blocks: [child('a'), child('b', { order: 1 })]
+    },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    currentBreakpoint: 'desktop',
+    ...over
+  }) as any;
+
+const withProperties = (
+  properties: Record<string, unknown>,
+  over: Record<string, unknown> = {}
+) =>
+  props({
+    block: {
+      ...props().block,
+      properties
+    },
+    ...over
+  });
+
+const sheet = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('style'))
+    .map((el) => el.textContent || '')
+    .join('');
+
+describe('CollapsibleBlock', () => {
+  describe('the hidden half is never unmounted', () => {
+    it('ships every child in the collapsed server render', () => {
+      const html = renderToString(<CollapsibleBlock {...props()} />);
+
+      expect(html).toContain('data-id="a"');
+      expect(html).toContain('data-id="b"');
+      expect(html).toContain('aria-expanded="false"');
+    });
+
+    it('keeps the same children mounted across a toggle', () => {
+      render(<CollapsibleBlock {...props()} />);
+
+      expect(screen.getAllByTestId('tb')).toHaveLength(2);
+      fireEvent.click(screen.getByRole('button'));
+      expect(screen.getAllByTestId('tb')).toHaveLength(2);
+      fireEvent.click(screen.getByRole('button'));
+      expect(screen.getAllByTestId('tb')).toHaveLength(2);
+    });
+  });
+
+  describe('the clamp', () => {
+    it('clips in line units with the em fallback ahead of it', () => {
+      const { container } = render(<CollapsibleBlock {...props()} />);
+      const css = sheet(container);
+
+      expect(css).toContain(
+        'max-height:calc(var(--pz-collapse-lines) * 1.5em)'
+      );
+      expect(css).toContain('max-height:calc(var(--pz-collapse-lines) * 1lh)');
+      expect(css.indexOf('1.5em')).toBeLessThan(css.indexOf('1lh'));
+      expect(css).not.toContain('-webkit-line-clamp');
+    });
+
+    it('clips rather than hides, so a focused child cannot scroll the visible lines away', () => {
+      const { container } = render(<CollapsibleBlock {...props()} />);
+      const css = sheet(container);
+
+      expect(css).toContain('overflow:hidden;overflow:clip');
+    });
+
+    it('reads the collapsed and fade heights per breakpoint on the storefront', () => {
+      const { container } = render(
+        <CollapsibleBlock
+          {...withProperties({
+            collapsedLines: { desktop: 10, tablet: 7, mobile: 5 },
+            fadeLines: { desktop: 4, mobile: 2 }
+          })}
+        />
+      );
+      const css = sheet(container);
+
+      expect(css).toContain('--pz-collapse-lines:10');
+      expect(css).toContain(
+        '@media (max-width:1023px){[data-pz-collapsible="col-1"]{--pz-collapse-lines:5'
+      );
+      expect(css).toContain('--pz-collapse-lines:7');
+    });
+
+    it('resolves one band in the designer, because the canvas frame would answer a media query', () => {
+      const { container } = render(
+        <CollapsibleBlock
+          {...withProperties(
+            { collapsedLines: { desktop: 10, mobile: 5 } },
+            { isDesigner: true, currentBreakpoint: 'mobile' }
+          )}
+        />
+      );
+      const css = sheet(container);
+
+      expect(css).toContain('--pz-collapse-lines:5');
+      expect(css).not.toContain('@media (max-width');
+    });
+
+    it('clamps a stored line count that would emit an invalid declaration', () => {
+      const { container } = render(
+        <CollapsibleBlock
+          {...withProperties({ collapsedLines: { desktop: -4 } })}
+        />
+      );
+
+      expect(sheet(container)).toContain('--pz-collapse-lines:2');
+    });
+
+    it('drops the clamp and the trigger entirely while the designer has it open', () => {
+      const { container } = render(
+        <CollapsibleBlock {...props({ isDesigner: true })} />
+      );
+
+      expect(container.querySelector('[data-designer-open]')).toHaveAttribute(
+        'data-designer-open',
+        'true'
+      );
+      expect(sheet(container)).toContain(
+        '[data-pz-collapsible="col-1"][data-designer-open="true"] [data-part="clip"]{max-height:none;overflow:visible'
+      );
+    });
+  });
+
+  describe('the fade', () => {
+    it('masks the text by default, so it is correct over any section background', () => {
+      const { container } = render(<CollapsibleBlock {...props()} />);
+      const css = sheet(container);
+
+      expect(css).toContain('-webkit-mask-image:linear-gradient(');
+      expect(css).toContain('mask-image:linear-gradient(');
+      expect(container.querySelector('[data-part="fade"]')).toBeNull();
+    });
+
+    it('paints an authored colour band instead when asked', () => {
+      const { container } = render(
+        <CollapsibleBlock
+          {...withProperties({
+            fadeStyle: { desktop: 'color' },
+            fadeColor: { desktop: '#101010' }
+          })}
+        />
+      );
+
+      expect(sheet(container)).not.toContain('mask-image:linear-gradient(');
+      const fade = container.querySelector('[data-part="fade"]');
+      expect(fade).toBeInTheDocument();
+      expect(fade).toHaveAttribute('aria-hidden', 'true');
+      expect(sheet(container)).toContain(
+        'background-image:linear-gradient(to bottom,transparent,var(--pz-collapse-fade-color'
+      );
+    });
+
+    /**
+     * The authored colour reaches CSS as a custom property VALUE, never as a
+     * substring of the sheet — which is what stops a crafted colour from
+     * closing the rule and writing its own.
+     */
+    it('hands the authored colour to the sheet as a variable, not as text', () => {
+      const { container } = render(
+        <CollapsibleBlock
+          {...withProperties({
+            fadeStyle: { desktop: 'color' },
+            fadeColor: { desktop: '#101010' }
+          })}
+        />
+      );
+
+      expect(
+        container.querySelector('[data-pz-collapsible]')?.getAttribute('style')
+      ).toContain('--pz-collapse-fade-color: #101010');
+      expect(sheet(container)).not.toContain('#101010');
+    });
+
+    it('falls back to the theme background when the colour is not authored', () => {
+      const { container } = render(
+        <CollapsibleBlock
+          {...withProperties({ fadeStyle: { desktop: 'color' } })}
+        />
+      );
+
+      expect(sheet(container)).toContain('var(--theme-background,#fff)');
+      expect(
+        container.querySelector('[data-pz-collapsible]')?.getAttribute('style')
+      ).not.toContain('--pz-collapse-fade-color');
+    });
+  });
+
+  describe('the trigger', () => {
+    it('is a real button wired to the panel it controls', () => {
+      const { container } = render(<CollapsibleBlock {...props()} />);
+      const toggle = screen.getByRole('button');
+
+      expect(toggle).toHaveAttribute('type', 'button');
+      expect(toggle).toHaveAttribute('aria-expanded', 'false');
+      expect(toggle.getAttribute('aria-controls')).toBe(
+        container.querySelector('[data-part="content"]')?.getAttribute('id')
+      );
+      expect(toggle.getAttribute('aria-controls')).toBeTruthy();
+    });
+
+    it('swaps the caption and marks itself open', () => {
+      render(<CollapsibleBlock {...props()} />);
+      const toggle = screen.getByRole('button');
+
+      expect(toggle).toHaveTextContent(COLLAPSIBLE_FALLBACK_LABELS.more);
+
+      fireEvent.click(toggle);
+
+      expect(toggle).toHaveAttribute('aria-expanded', 'true');
+      expect(toggle).toHaveAttribute('data-state', 'open');
+      expect(toggle).toHaveTextContent(COLLAPSIBLE_FALLBACK_LABELS.less);
+    });
+
+    it('prefers the authored captions over the fallback constant', () => {
+      render(
+        <CollapsibleBlock
+          {...withProperties({ moreLabel: 'Daha Fazla', lessLabel: 'Daha Az' })}
+        />
+      );
+      const toggle = screen.getByRole('button');
+
+      expect(toggle).toHaveTextContent('Daha Fazla');
+      fireEvent.click(toggle);
+      expect(toggle).toHaveTextContent('Daha Az');
+    });
+
+    it('reads a locale map caption at the active locale', () => {
+      render(
+        <CollapsibleBlock
+          {...withProperties({
+            moreLabel: { 'en-us': 'Read more', 'tr-tr': 'Devamını Gör' }
+          })}
+        />
+      );
+
+      expect(screen.getByRole('button')).toHaveTextContent('Read more');
+    });
+
+    it('carries an icon the stylesheet can rotate, hidden from assistive tech', () => {
+      const { container } = render(<CollapsibleBlock {...props()} />);
+
+      expect(
+        container.querySelector('[data-part="toggle-icon"]')
+      ).toHaveAttribute('aria-hidden', 'true');
+      expect(sheet(container)).toContain(
+        '[data-part="toggle"][data-state~="open"] [data-part="toggle-icon"]{transform:rotate(180deg)}'
+      );
+    });
+
+    it('can be dropped', () => {
+      const { container } = render(
+        <CollapsibleBlock
+          {...withProperties({ showToggleIcon: { desktop: false } })}
+        />
+      );
+
+      expect(container.querySelector('[data-part="toggle-icon"]')).toBeNull();
+    });
+
+    it('is aligned with a margin, so it works on the flex box it is', () => {
+      const { container } = render(
+        <CollapsibleBlock
+          {...withProperties({ toggleAlign: { desktop: 'center' } })}
+        />
+      );
+
+      expect(
+        container.querySelector('[data-part="toggle"]')?.getAttribute('style')
+      ).toContain('margin: 0px auto');
+    });
+  });
+
+  describe('reaching the clipped half', () => {
+    it('opens when a child inside the clipped region takes focus', () => {
+      const { container } = render(<CollapsibleBlock {...props()} />);
+      const viewport = container.querySelector(
+        '[data-part="viewport"]'
+      ) as HTMLElement;
+
+      fireEvent.focus(viewport, { bubbles: true });
+
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-expanded',
+        'true'
+      );
+    });
+
+    it('leaves it shut when the merchant turned that off', () => {
+      const { container } = render(
+        <CollapsibleBlock
+          {...withProperties({ expandOnFocus: { desktop: false } })}
+        />
+      );
+      const viewport = container.querySelector(
+        '[data-part="viewport"]'
+      ) as HTMLElement;
+
+      fireEvent.focus(viewport, { bubbles: true });
+
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-expanded',
+        'false'
+      );
+    });
+
+    it('does not open when the trigger itself takes focus', () => {
+      render(<CollapsibleBlock {...props()} />);
+
+      fireEvent.focus(screen.getByRole('button'), { bubbles: true });
+
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-expanded',
+        'false'
+      );
+    });
+  });
+
+  describe('degrading', () => {
+    /**
+     * The server render is where this matters: the affordance is only ever
+     * taken AWAY by the observer, so a long article — what the block exists
+     * for — never shifts on hydration. (In jsdom the observer then measures a
+     * zero-height content box and removes it, which is the next assertion.)
+     */
+    it('starts overflowing in the server render, so a long article never shifts', () => {
+      expect(renderToString(<CollapsibleBlock {...props()} />)).toContain(
+        'data-overflowing="true"'
+      );
+    });
+
+    it('hides the trigger once the content is measured as fitting', () => {
+      const { container } = render(<CollapsibleBlock {...props()} />);
+
+      expect(container.querySelector('[data-overflowing]')).toHaveAttribute(
+        'data-overflowing',
+        'false'
+      );
+      expect(sheet(container)).toContain(
+        '[data-pz-collapsible="col-1"][data-overflowing="false"] [data-part="toggle"]{display:none}'
+      );
+    });
+
+    it('unclips itself with JS off', () => {
+      const { container } = render(<CollapsibleBlock {...props()} />);
+      const noscript = container.querySelector('noscript');
+
+      expect(noscript?.innerHTML).toContain('max-height:none');
+      expect(noscript?.innerHTML).toContain(
+        '[data-part="toggle"]{display:none}'
+      );
+    });
+
+    it('stops animating for a reduced-motion visitor', () => {
+      const { container } = render(<CollapsibleBlock {...props()} />);
+
+      expect(sheet(container)).toContain(
+        '@media (prefers-reduced-motion:reduce)'
+      );
+    });
+
+    it('opens on its own when the merchant asked for it', () => {
+      render(
+        <CollapsibleBlock
+          {...withProperties({ defaultExpanded: { desktop: true } })}
+        />
+      );
+
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-expanded',
+        'true'
+      );
+    });
+  });
+
+  describe('composing', () => {
+    it('renders children in order and drops hidden ones on the storefront', () => {
+      render(
+        <CollapsibleBlock
+          {...props({
+            block: {
+              ...props().block,
+              blocks: [
+                child('second', { order: 2 }),
+                child('first', { order: 1 }),
+                child('gone', { order: 3, hidden: true })
+              ]
+            }
+          })}
+        />
+      );
+
+      expect(
+        screen.getAllByTestId('tb').map((el) => el.getAttribute('data-id'))
+      ).toEqual(['first', 'second']);
+    });
+
+    it('keeps hidden children selectable on the canvas', () => {
+      render(
+        <CollapsibleBlock
+          {...props({
+            isDesigner: true,
+            block: {
+              ...props().block,
+              blocks: [
+                child('shown'),
+                child('gone', { order: 1, hidden: true })
+              ]
+            }
+          })}
+        />
+      );
+
+      expect(screen.getAllByTestId('tb')).toHaveLength(2);
+    });
+
+    it('says what it is missing on the canvas and renders nothing on the storefront', () => {
+      const empty = { ...props().block, blocks: [] };
+
+      const { container } = render(
+        <CollapsibleBlock {...props({ block: empty, isDesigner: true })} />
+      );
+      expect(
+        container.querySelector('[data-part="empty"]')
+      ).toBeInTheDocument();
+
+      const live = render(<CollapsibleBlock {...props({ block: empty })} />);
+      expect(live.container.querySelector('[data-part="empty"]')).toBeNull();
+      expect(live.container.querySelector('[data-part="toggle"]')).toBeNull();
+    });
+  });
+
+  describe('every part the editor can style is emitted', () => {
+    it.each([
+      'viewport',
+      'clip',
+      'content',
+      'toggle',
+      'toggle-label',
+      'toggle-icon'
+    ])('draws %s', (part) => {
+      const { container } = render(<CollapsibleBlock {...props()} />);
+      expect(
+        container.querySelector(`[data-part="${part}"]`)
+      ).toBeInTheDocument();
+    });
+
+    it('draws fade and empty in the states that have them', () => {
+      const colour = render(
+        <CollapsibleBlock
+          {...withProperties({ fadeStyle: { desktop: 'color' } })}
+        />
+      );
+      expect(
+        colour.container.querySelector('[data-part="fade"]')
+      ).toBeInTheDocument();
+
+      const bare = render(
+        <CollapsibleBlock
+          {...props({
+            block: { ...props().block, blocks: [] },
+            isDesigner: true
+          })}
+        />
+      );
+      expect(
+        bare.container.querySelector('[data-part="empty"]')
+      ).toBeInTheDocument();
+    });
+  });
+});