@akinon/pz-theme 2.0.96-beta.0 → 2.0.96

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.96-beta.0
+## 2.0.96
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd757]
-  - @akinon/next@2.0.96-beta.0
-  - @akinon/theme-contract@2.0.96-beta.0
+- 956fe4ea: ZERO-5007: Write renderers for the block types the picker offers but pz-theme cannot draw
+  - @akinon/next@2.0.96
+  - @akinon/theme-contract@2.0.96
 
 ## 2.0.95
 

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.96-beta.0",
+  "version": "2.0.96",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.96-beta.0",
+    "@akinon/next": "2.0.96",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.96-beta.0",
+    "@akinon/theme-contract": "2.0.96",
     "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.96-beta.0",
+    "@akinon/next": "2.0.96",
     "@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

@@ -34,28 +34,24 @@ const EXPECTED_BLOCK_TYPES = [
   'applied-filters',
   'auth-consent',
   'auth-error',
-  'auth-flow',
   'auth-field',
+  'auth-flow',
   'auth-form',
   'auth-step',
   'auth-step-title',
-  // The confirmation as a placeable block, the success twin of 'auth-error':
-  // the two forms that have a success state publish their message and this
-  // draws it where the design put it. See `auth/form-success-context.tsx`.
   'auth-success',
   'basket-items',
   'basket-summary',
   'button',
-  // The security check commerce escalates to, placed inside an auth form.
   'captcha',
-  // The screen the password-reset mail lands on.
-  'reset-password',
+  'carousel-item',
   'change-password-form',
   'checkout-flow-outlet',
   'checkout-steps',
   'checkout-steps-outlet',
   'checkout-summary',
   'checkout-summary-outlet',
+  'container',
   'countdown',
   'counter',
   'coupon-list',
@@ -68,14 +64,15 @@ const EXPECTED_BLOCK_TYPES = [
   'favorite-button',
   'favourites-grid',
   'forgot-password',
-  // One screen of a composed form — the confirmation, the refusal, the busy
-  // moment — as a container the form draws when it is on that screen. See
-  // `auth/form-state-context.tsx`.
   'form-state',
   'group',
   'hamburger-menu',
   'hotspot',
+  'hover-showcase-item',
   'icon',
+  'icon-button',
+  'icon-group',
+  'icon-group-colored',
   'image',
   'image-gallery',
   'input',
@@ -111,19 +108,22 @@ const EXPECTED_BLOCK_TYPES = [
   'product-title',
   'profile-form',
   'register-form',
+  'reset-password',
   'search-box',
   'share',
   'size-guide',
   'slider',
+  'social-icons-list',
   'social-links',
   'sort-select',
   'stock-status',
   'store-locator',
   'tab',
   'text',
+  'value-props-list',
   'variant-selector',
   'video',
-  'wishlist-button'
+  'wishlist-button',
 ];
 
 const EXPECTED_SECTION_TYPES = [

package/src/blocks/__tests__/carousel-item-block.test.tsx

@@ -0,0 +1,346 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+// Stub the recursive child renderer so the slide's children are countable
+// without pulling in every block type.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <div data-testid="tb" data-id={block.id} />
+  )
+}));
+
+import CarouselItemBlock from '../carousel-item-block';
+
+/**
+ * The block exactly as `getDefaultCarouselItemBlockValue()` seeds it in
+ * pz-dynamic-widget: both properties bucketed per breakpoint, `url` seeded to
+ * `#`, and one image child.
+ */
+const seededSlide = (over: Record<string, unknown> = {}) => ({
+  id: 'slide',
+  type: 'carousel-item',
+  label: 'Carousel Item',
+  value: '',
+  properties: {
+    url: { desktop: '#', mobile: '#' },
+    target: { desktop: '_self', mobile: '_self' }
+  },
+  styles: {},
+  blocks: [
+    {
+      id: 'img',
+      type: 'image',
+      label: 'Carousel Image',
+      value: '',
+      properties: {
+        alt: { desktop: 'Carousel Image', mobile: 'Carousel Image' },
+        loadingStrategy: 'eager',
+        priority: 'high'
+      },
+      styles: {
+        width: { desktop: '100%', mobile: '100%' },
+        height: { desktop: '400px', mobile: '300px' },
+        'object-fit': { desktop: 'cover', mobile: 'cover' }
+      }
+    }
+  ],
+  ...over
+});
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: seededSlide(),
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    currentBreakpoint: 'desktop',
+    ...over
+  } as any);
+
+const anchor = (container: HTMLElement) =>
+  container.querySelector('a') as HTMLAnchorElement | null;
+
+const markers = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('[data-testid="tb"]'));
+
+describe('CarouselItemBlock — the stored slide', () => {
+  it('draws the seeded image child', () => {
+    const { container } = render(<CarouselItemBlock {...props()} />);
+    expect(markers(container)).toHaveLength(1);
+    expect(markers(container)[0]).toHaveAttribute('data-id', 'img');
+  });
+
+  it('draws NO anchor for the seeded "#" url — a fresh slide is not a link', () => {
+    const { container } = render(<CarouselItemBlock {...props()} />);
+    expect(anchor(container)).toBeNull();
+  });
+
+  it('draws no anchor for an empty or whitespace url either', () => {
+    const block = seededSlide({ properties: { url: '   ' } });
+    const { container } = render(<CarouselItemBlock {...props({ block })} />);
+    expect(anchor(container)).toBeNull();
+    expect(markers(container)).toHaveLength(1);
+  });
+
+  it('wraps the slide in an anchor once a real url is authored', () => {
+    const block = seededSlide({
+      properties: { url: '/campaigns/summer-sale', target: '_self' }
+    });
+    const { container } = render(<CarouselItemBlock {...props({ block })} />);
+    expect(anchor(container)).toHaveAttribute('href', '/campaigns/summer-sale');
+    expect(markers(container)).toHaveLength(1);
+  });
+
+  it('treats a real in-page target as a destination (only the bare hash is the seed)', () => {
+    const block = seededSlide({ properties: { url: '#size-guide' } });
+    const { container } = render(<CarouselItemBlock {...props({ block })} />);
+    expect(anchor(container)).toHaveAttribute('href', '#size-guide');
+  });
+});
+
+describe('CarouselItemBlock — per-breakpoint properties', () => {
+  it('reads the mobile url from the bucketed value the descriptor seeds', () => {
+    const block = seededSlide({
+      properties: {
+        url: { desktop: '/desktop-campaign', mobile: '/mobile-campaign' }
+      }
+    });
+    const { container } = render(
+      <CarouselItemBlock {...props({ block, currentBreakpoint: 'mobile' })} />
+    );
+    expect(anchor(container)).toHaveAttribute('href', '/mobile-campaign');
+  });
+
+  it('reads the desktop url on the desktop breakpoint', () => {
+    const block = seededSlide({
+      properties: {
+        url: { desktop: '/desktop-campaign', mobile: '/mobile-campaign' }
+      }
+    });
+    const { container } = render(<CarouselItemBlock {...props({ block })} />);
+    expect(anchor(container)).toHaveAttribute('href', '/desktop-campaign');
+  });
+
+  it('opens a bucketed mobile-only "_blank" in a new tab', () => {
+    const block = seededSlide({
+      properties: {
+        url: '/campaigns/lookbook',
+        target: { desktop: '_self', mobile: '_blank' }
+      }
+    });
+    const { container } = render(
+      <CarouselItemBlock {...props({ block, currentBreakpoint: 'mobile' })} />
+    );
+    expect(anchor(container)).toHaveAttribute('target', '_blank');
+  });
+});
+
+describe('CarouselItemBlock — rel', () => {
+  it('adds the security pair on _blank', () => {
+    const block = seededSlide({
+      properties: { url: 'https://example.com/lookbook', target: '_blank' }
+    });
+    const { container } = render(<CarouselItemBlock {...props({ block })} />);
+    expect(anchor(container)).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('emits no rel at all on _self', () => {
+    const block = seededSlide({
+      properties: { url: '/campaigns/summer-sale', target: '_self' }
+    });
+    const { container } = render(<CarouselItemBlock {...props({ block })} />);
+    expect(anchor(container)?.hasAttribute('rel')).toBe(false);
+  });
+
+  /**
+   * The descriptor declares `url` and `target` and nothing else, so a `rel`
+   * key can only be junk left by a hand-edited composition. Reading it (the way
+   * the link block reads its own declared one) would let that junk reach the
+   * anchor.
+   */
+  it('ignores a rel property, which this block type does not declare', () => {
+    const block = seededSlide({
+      properties: {
+        url: '/campaigns/summer-sale',
+        target: '_self',
+        rel: 'me nofollow'
+      }
+    });
+    const { container } = render(<CarouselItemBlock {...props({ block })} />);
+    expect(anchor(container)?.hasAttribute('rel')).toBe(false);
+  });
+
+  it('falls back to _self when the stored target is not one of the two options', () => {
+    const block = seededSlide({
+      properties: { url: '/campaigns/summer-sale', target: 'new-window' }
+    });
+    const { container } = render(<CarouselItemBlock {...props({ block })} />);
+    expect(anchor(container)).toHaveAttribute('target', '_self');
+    expect(anchor(container)?.hasAttribute('rel')).toBe(false);
+  });
+});
+
+describe('CarouselItemBlock — merchant input on its way to href', () => {
+  it.each([
+    ['javascript:alert(1)'],
+    ['JavaScript:alert(1)'],
+    ['java\tscript:alert(1)'],
+    ['vbscript:msgbox(1)'],
+    ['data:text/html,<script>alert(1)</script>']
+  ])('never turns %s into a link', (url) => {
+    const block = seededSlide({ properties: { url } });
+    const { container } = render(<CarouselItemBlock {...props({ block })} />);
+    expect(anchor(container)).toBeNull();
+    // The slide itself is still drawn — a bad url costs the link, not the art.
+    expect(markers(container)).toHaveLength(1);
+  });
+});
+
+describe('CarouselItemBlock — who owns the click', () => {
+  /**
+   * The wrapper fires an authored action and cancels this navigation on the
+   * way up (`with-designer-features.tsx` + `use-block-action.ts`), which only
+   * works while the renderer leaves the live click untouched. A
+   * `preventDefault` or `stopPropagation` here would either kill every slide
+   * link or hide the click from the central action wiring.
+   */
+  it('leaves a live click for the wrapper: not prevented, still bubbling', () => {
+    const seen: MouseEvent[] = [];
+    const block = seededSlide({
+      properties: { url: '/campaigns/summer-sale' }
+    });
+    const { container } = render(
+      <div onClick={(event) => seen.push(event.nativeEvent)}>
+        <CarouselItemBlock {...props({ block })} />
+      </div>
+    );
+
+    fireEvent.click(anchor(container) as HTMLAnchorElement);
+
+    expect(seen).toHaveLength(1);
+    expect(seen[0].defaultPrevented).toBe(false);
+  });
+
+  it('neutralises the link on the canvas but still lets the click reach the wrapper', () => {
+    const seen: MouseEvent[] = [];
+    const block = seededSlide({
+      properties: { url: '/campaigns/summer-sale', target: '_blank' }
+    });
+    const { container } = render(
+      <div onClick={(event) => seen.push(event.nativeEvent)}>
+        <CarouselItemBlock {...props({ block, isDesigner: true })} />
+      </div>
+    );
+
+    const link = anchor(container) as HTMLAnchorElement;
+    expect(link).toHaveAttribute('href', '#');
+    // A _blank slide would otherwise open the campaign in a second tab from
+    // inside the editor.
+    expect(link.hasAttribute('target')).toBe(false);
+
+    fireEvent.click(link);
+
+    expect(seen).toHaveLength(1);
+    expect(seen[0].defaultPrevented).toBe(true);
+  });
+});
+
+describe('CarouselItemBlock — layout ownership', () => {
+  /**
+   * `collectBlockCSS` emits the merchant's styles onto the `[data-block-id]`
+   * wrapper. Inlining them here would apply them twice and outrank the media
+   * queries the same sheet emits.
+   */
+  it('inlines none of the authored styles', () => {
+    const block = seededSlide({
+      properties: { url: '/campaigns/summer-sale' },
+      styles: {
+        display: { desktop: 'grid', mobile: 'block' },
+        gap: { desktop: '24px' },
+        'background-color': { desktop: '#111111' }
+      }
+    });
+    const { container } = render(<CarouselItemBlock {...props({ block })} />);
+    expect(anchor(container)?.hasAttribute('style')).toBe(false);
+  });
+
+  it('gives the anchor display:contents so the wrapper layout reaches the children', () => {
+    const block = seededSlide({
+      properties: { url: '/campaigns/summer-sale' }
+    });
+    const { container } = render(<CarouselItemBlock {...props({ block })} />);
+    expect(anchor(container)).toHaveClass('contents');
+  });
+
+  it('stamps no part attributes — the descriptor declares none', () => {
+    const block = seededSlide({
+      properties: { url: '/campaigns/summer-sale' }
+    });
+    const { container } = render(<CarouselItemBlock {...props({ block })} />);
+    expect(container.querySelector('[data-part]')).toBeNull();
+  });
+});
+
+describe('CarouselItemBlock — children', () => {
+  it('drops hidden children on the storefront and keeps them on the canvas', () => {
+    const block = seededSlide({
+      properties: { url: '/campaigns/summer-sale' },
+      blocks: [
+        { id: 'img', type: 'image', label: 'img', order: 1 },
+        {
+          id: 'caption',
+          type: 'text',
+          label: 'caption',
+          order: 0,
+          hidden: true
+        }
+      ]
+    });
+
+    const live = render(<CarouselItemBlock {...props({ block })} />);
+    expect(
+      markers(live.container).map((m) => m.getAttribute('data-id'))
+    ).toEqual(['img']);
+
+    const canvas = render(
+      <CarouselItemBlock {...props({ block, isDesigner: true })} />
+    );
+    expect(
+      markers(canvas.container).map((m) => m.getAttribute('data-id'))
+    ).toEqual(['caption', 'img']);
+  });
+});
+
+describe('CarouselItemBlock — empty', () => {
+  it('shows the designer placeholder when the slide has no blocks', () => {
+    const block = seededSlide({ blocks: [] });
+    const { container } = render(
+      <CarouselItemBlock {...props({ block, isDesigner: true })} />
+    );
+    expect(container.textContent).toContain('Carousel item (drop blocks here)');
+    expect(
+      container.querySelector('[data-carousel-item-placeholder]')
+    ).toBeInTheDocument();
+  });
+
+  it('renders nothing at all on the storefront when the slide is empty', () => {
+    const block = seededSlide({ blocks: [] });
+    const { container } = render(<CarouselItemBlock {...props({ block })} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  /**
+   * A slide whose only child is hidden is empty on the storefront. Drawing the
+   * anchor anyway would leave an empty link in the carousel track — a focus
+   * stop on nothing, still counted by the dots.
+   */
+  it('draws no empty anchor when every child is hidden', () => {
+    const block = seededSlide({
+      properties: { url: '/campaigns/summer-sale' },
+      blocks: [{ id: 'img', type: 'image', label: 'img', hidden: true }]
+    });
+    const { container } = render(<CarouselItemBlock {...props({ block })} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+});

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

@@ -0,0 +1,149 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+// Stub the recursive ThemeBlock (default export) with a countable marker, the
+// way group-block.test.tsx does — a container's whole job is which children it
+// hands to ThemeBlock, not what those children draw.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <div data-testid="tb" data-id={block.id} />
+  )
+}));
+
+import ContainerBlock from '../container-block';
+
+const child = (id: string, order = 0, hidden = false) => ({
+  id,
+  type: 'text',
+  label: id,
+  value: '',
+  properties: {},
+  styles: {},
+  order,
+  hidden
+});
+
+/**
+ * A container as the editor actually stores one: no properties at all, and the
+ * curated box styles the descriptor seeds through `getDefaultValue`, bucketed
+ * per breakpoint with a couple of authored values on top.
+ */
+const storedBlock = (over: Record<string, unknown> = {}) => ({
+  id: 'blk-top-row',
+  type: 'container',
+  label: 'Top row',
+  value: '',
+  properties: {},
+  styles: {
+    'background-color': { desktop: '#111827', mobile: '#000000' },
+    'padding-top': { desktop: '16px' },
+    'padding-bottom': { desktop: '16px' },
+    'padding-left': { desktop: '24px' },
+    'padding-right': { desktop: '24px' },
+    'border-width': { desktop: '1px' },
+    'border-color': { desktop: '#e5e7eb' },
+    'border-radius': { desktop: '8px' }
+  },
+  order: 0,
+  hidden: false,
+  blocks: [child('logo', 0), child('search', 1), child('basket', 2)],
+  ...over
+});
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: storedBlock(),
+    placeholderId: 'header',
+    sectionId: 'sec-1',
+    isDesigner: false,
+    ...over
+  } as any);
+
+const markers = (host: HTMLElement) =>
+  Array.from(host.querySelectorAll('[data-testid="tb"]'));
+
+describe('ContainerBlock — children', () => {
+  it('draws the children of a realistic stored container, in order', () => {
+    const { container } = render(<ContainerBlock {...props()} />);
+    expect(markers(container).map((m) => m.getAttribute('data-id'))).toEqual([
+      'logo',
+      'search',
+      'basket'
+    ]);
+  });
+
+  it('drops hidden children on the storefront and keeps them on the canvas', () => {
+    const block = storedBlock({
+      blocks: [child('logo', 0), child('promo', 1, true)]
+    });
+
+    const live = render(<ContainerBlock {...props({ block })} />);
+    expect(markers(live.container)).toHaveLength(1);
+
+    const canvas = render(
+      <ContainerBlock {...props({ block, isDesigner: true })} />
+    );
+    expect(markers(canvas.container)).toHaveLength(2);
+  });
+});
+
+describe('ContainerBlock — empty', () => {
+  it('shows the designer placeholder when there is nothing inside', () => {
+    const block = storedBlock({ blocks: [] });
+    const { container } = render(
+      <ContainerBlock {...props({ block, isDesigner: true })} />
+    );
+    expect(container.textContent).toContain('Container (drop blocks here)');
+    expect(
+      container.querySelector('[data-container-placeholder]')
+    ).toBeInTheDocument();
+  });
+
+  it('shows nothing to a shopper when there is nothing inside', () => {
+    const block = storedBlock({ blocks: [] });
+    const { container } = render(<ContainerBlock {...props({ block })} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('shows nothing to a shopper when every child is hidden', () => {
+    const block = storedBlock({ blocks: [child('promo', 0, true)] });
+    const { container } = render(<ContainerBlock {...props({ block })} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('survives a container stored without a blocks array at all', () => {
+    const block = storedBlock({ blocks: undefined });
+    const { container } = render(<ContainerBlock {...props({ block })} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+});
+
+describe('ContainerBlock — contract: it is not a box', () => {
+  /*
+   * The reason the type exists is that the merchant's background and padding
+   * paint on the `[data-block-id]` wrapper. A box added here would be a second
+   * box inside that one and would swallow an authored `display: flex` — every
+   * child would become one flex item. These two pin that it draws none.
+   */
+  it('adds no element of its own — the children are the wrapper content', () => {
+    const { container } = render(<ContainerBlock {...props()} />);
+    expect(Array.from(container.children)).toEqual(markers(container));
+  });
+
+  it('inlines nothing from block.styles, authored keys and junk keys alike', () => {
+    const block = storedBlock({
+      styles: {
+        ...storedBlock().styles,
+        display: { desktop: 'flex' },
+        gap: { desktop: '32px' },
+        // A descriptor's made-up key: the CSS generator has no whitelist, so a
+        // renderer reaching into styles would happily inline this too.
+        'container-title-font-size': { desktop: '18px' }
+      }
+    });
+    const { container } = render(<ContainerBlock {...props({ block })} />);
+    expect(container.querySelector('[style]')).toBeNull();
+    expect(container.querySelector('[class]')).toBeNull();
+  });
+});