@akinon/pz-theme 2.0.64-rc.0 → 2.0.65-beta.0

package/CHANGELOG.md

@@ -1,36 +1,20 @@
 # @akinon/pz-theme
 
-## 2.0.64-rc.0
-
-### Patch Changes
-
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [2fea4143]
-- 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 [e9598c71]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a63]
-- Updated dependencies [e18836b20]
-  - @akinon/next@2.0.64-rc.0
-  - @akinon/theme-contract@2.0.64-rc.0
+## 2.0.65-beta.0
+
+### Patch Changes
+
+- Updated dependencies [cbbbfd75]
+  - @akinon/next@2.0.65-beta.0
+  - @akinon/theme-contract@2.0.65-beta.0
+
+## 2.0.64
+
+### Patch Changes
+
+- d0687da: ZERO-4814: Add modal width units, backdrop paint and account-button guest modal trigger
+  - @akinon/next@2.0.64
+  - @akinon/theme-contract@2.0.64
 
 ## 2.0.63
 

package/package.json

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

package/src/blocks/__tests__/account-button-block.test.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import AccountButtonBlock from '../account-button-block';
+import { __resetOverlayBusForTests } from '../../overlays/overlay-bus';
+
+/**
+ * The account button is the session fork of the header: a guest gets the way
+ * IN (login page, or a composed login modal opened in place), a signed-in
+ * shopper gets their account. The modal branch must never leak to the
+ * signed-in side — that is the whole reason it is this block's own property
+ * rather than the shared, unconditional On Click action.
+ */
+
+let mockSessionStatus = 'unauthenticated';
+
+jest.mock('next-auth/react', () => ({
+  useSession: () => ({ data: null, status: mockSessionStatus }),
+  signIn: () => {},
+  signOut: () => {}
+}));
+
+const renderBlock = (
+  properties: Record<string, unknown> = {},
+  extra: Record<string, unknown> = {}
+) =>
+  render(
+    <AccountButtonBlock
+      {...({
+        block: {
+          id: 'account',
+          type: 'account-button',
+          label: 'Account',
+          properties,
+          styles: {},
+          order: 0,
+          hidden: false
+        },
+        placeholderId: 'header',
+        sectionId: 's1',
+        isDesigner: false,
+        ...extra
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any)}
+    />
+  );
+
+const link = (container: HTMLElement) =>
+  container.querySelector('[data-account-button]') as HTMLAnchorElement;
+
+beforeEach(() => {
+  mockSessionStatus = 'unauthenticated';
+  __resetOverlayBusForTests();
+});
+
+describe('AccountButtonBlock', () => {
+  it('sends a guest to the login page by default', () => {
+    const { container } = renderBlock();
+
+    expect(link(container).getAttribute('href')).toBe('/auth');
+    expect(link(container).getAttribute('data-auth-state')).toBe('guest');
+    expect(link(container).getAttribute('aria-haspopup')).toBeNull();
+  });
+
+  it('sends a signed-in shopper to their account', () => {
+    mockSessionStatus = 'authenticated';
+    const { container } = renderBlock();
+
+    expect(link(container).getAttribute('href')).toBe('/account');
+    expect(link(container).getAttribute('data-auth-state')).toBe(
+      'authenticated'
+    );
+  });
+
+  it('opens the configured modal for a guest instead of navigating', () => {
+    const { container } = renderBlock({
+      guestClick: 'open-modal',
+      guestModalId: 'm-login'
+    });
+
+    // Announced as a dialog trigger, with the login page kept as the
+    // no-JavaScript fallback on the anchor itself.
+    expect(link(container).getAttribute('aria-haspopup')).toBe('dialog');
+    expect(link(container).getAttribute('aria-expanded')).toBe('false');
+    expect(link(container).getAttribute('href')).toBe('/auth');
+
+    const click = fireEvent.click(link(container));
+
+    // The navigation is cancelled and the overlay bus now holds the modal
+    // open — aria-expanded tracks the bus, so it is the end-to-end proof.
+    expect(click).toBe(false);
+    expect(link(container).getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('never offers the modal to a signed-in shopper', () => {
+    mockSessionStatus = 'authenticated';
+    const { container } = renderBlock({
+      guestClick: 'open-modal',
+      guestModalId: 'm-login'
+    });
+
+    expect(link(container).getAttribute('href')).toBe('/account');
+    expect(link(container).getAttribute('aria-haspopup')).toBeNull();
+  });
+
+  it('stays inert in the designer, where a click means selection', () => {
+    const { container } = renderBlock(
+      { guestClick: 'open-modal', guestModalId: 'm-login' },
+      { isDesigner: true }
+    );
+
+    fireEvent.click(link(container));
+
+    expect(link(container).getAttribute('aria-expanded')).toBe('false');
+  });
+});

package/src/blocks/account-button-block.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import NextLink from 'next/link';
 import { useSession } from 'next-auth/react';
 import { getResponsiveValue, partAttrs } from '../utils';
+import useBlockAction from '../hooks/use-block-action';
 import { BlockRendererProps } from './block-renderer-registry';
 import { readToggle } from './product-block-utils';
 
@@ -22,8 +23,17 @@ const clampNumber = (
  * Functional chrome block: session-aware account entry point. Renders a
  * login link for guests and an account link for authenticated users; the
  * editor owns placement, labels, icon and styling.
- * Properties: accountHref, loginHref, accountLabel, loginLabel, showLabel,
- * showIcon, iconSize, gap, labelPosition, ariaLabel.
+ *
+ * A guest click can also open a composed modal instead of navigating
+ * (`guestClick: 'open-modal'` + `guestModalId`) — the login form arrives in
+ * place, while a signed-in shopper keeps going straight to their account.
+ * That branch is THIS block's, not the shared On Click action, because the
+ * shared action is unconditional: pointed at a login modal it would open it
+ * for the signed-in shopper too, who has nothing to log in to. The Login URL
+ * stays on the anchor as the no-JavaScript fallback.
+ *
+ * Properties: accountHref, loginHref, guestClick, guestModalId, accountLabel,
+ * loginLabel, showLabel, showIcon, iconSize, gap, labelPosition, ariaLabel.
  * Parts: link, icon, label. The signed-in state stays readable from custom
  * CSS through the block's own `data-auth-state` attribute.
  */
@@ -46,6 +56,25 @@ const AccountButtonBlock = ({
   const label = isAuthenticated
     ? prop('accountLabel', 'Account')
     : prop('loginLabel', 'Login');
+
+  const guestModalId = prop('guestModalId', '');
+  const guestOpensModal =
+    !isAuthenticated &&
+    prop('guestClick', 'navigate') === 'open-modal' &&
+    Boolean(guestModalId);
+  // Routed through the shared action hook so a guest trigger behaves exactly
+  // like every other modal trigger: inert in the designer, announced as a
+  // dialog trigger, aria-expanded tracking the bus. The synthetic properties
+  // make the hook act only on the guest branch.
+  const guestModalAction = useBlockAction(
+    {
+      properties: {
+        actionType: guestOpensModal ? 'open-modal' : 'none',
+        actionTarget: guestModalId
+      }
+    },
+    { currentBreakpoint, isDesigner }
+  );
   const showLabel =
     getResponsiveValue(
       block.properties?.showLabel,
@@ -94,10 +123,17 @@ const AccountButtonBlock = ({
       data-auth-state={isAuthenticated ? 'authenticated' : 'guest'}
       {...partAttrs('link')}
       aria-label={ariaLabel || label}
+      {...guestModalAction.ariaProps}
       // Navigating inside the designer iframe would drop the author out of the
       // page they are editing.
       onClick={(event) => {
-        if (isDesigner) event.preventDefault();
+        if (isDesigner) {
+          event.preventDefault();
+          return;
+        }
+        // Prevents the navigation itself when it fires — a trigger that also
+        // navigated would race its own modal.
+        guestModalAction.onClick?.(event);
       }}
       style={{
         display: 'inline-flex',