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

package/src/sections/__tests__/notification-banner-section.test.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+// Mock ThemeBlock (default export) so we only assert this section's own logic.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string; type: string } }) => (
+    <div data-testid="tb" data-id={block.id} data-type={block.type} />
+  )
+}));
+
+import NotificationBannerSection from '../notification-banner-section';
+import type { Section } from '../../theme-section';
+import * as utils from '../../utils';
+
+const makeSection = (overrides: Partial<Section> = {}): Section =>
+  ({
+    id: 'sec-1',
+    type: 'notification-banner',
+    blocks: [],
+    styles: {},
+    properties: {},
+    ...overrides
+  } as unknown as Section);
+
+describe('NotificationBannerSection', () => {
+  it('renders the dismiss button by default (dismissible defaults to true)', () => {
+    render(<NotificationBannerSection section={makeSection()} />);
+    expect(
+      screen.getByRole('button', { name: 'Dismiss notification' })
+    ).toBeInTheDocument();
+  });
+
+  it('hides the dismiss button when dismissible property is false', () => {
+    const section = makeSection({
+      properties: { dismissible: false } as unknown as Section['properties']
+    });
+    render(<NotificationBannerSection section={section} />);
+    expect(
+      screen.queryByRole('button', { name: 'Dismiss notification' })
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders nothing after close when not in designer mode', () => {
+    const { container } = render(
+      <NotificationBannerSection section={makeSection()} />
+    );
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Dismiss notification' })
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('keeps the banner mounted with opacity-50 after close in designer mode', () => {
+    const { container } = render(
+      <NotificationBannerSection section={makeSection()} isDesigner />
+    );
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Dismiss notification' })
+    );
+    const root = container.firstElementChild as HTMLElement;
+    expect(root).not.toBeNull();
+    expect(root).toHaveClass('opacity-50');
+  });
+
+  it('splits an icon block from content blocks and renders both via ThemeBlock', () => {
+    const section = makeSection({
+      blocks: [
+        { id: 'icon-1', type: 'icon' },
+        { id: 'text-1', type: 'text' },
+        { id: 'btn-1', type: 'button' }
+      ] as unknown as Section['blocks']
+    });
+    render(<NotificationBannerSection section={section} />);
+
+    const blocks = screen.getAllByTestId('tb');
+    // icon block + 2 content blocks = 3 total
+    expect(blocks).toHaveLength(3);
+
+    // The icon block is wrapped in the fixed 56x56 icon container.
+    const icon = blocks.find(b => b.getAttribute('data-id') === 'icon-1')!;
+    const iconWrapper = icon.parentElement as HTMLElement;
+    expect(iconWrapper).toHaveStyle({ width: '56px', height: '56px' });
+
+    // Content blocks live in the flex-1 container, not the icon wrapper.
+    const content = blocks.filter(b => b.getAttribute('data-id') !== 'icon-1');
+    expect(content).toHaveLength(2);
+    content.forEach(c => expect(c.parentElement).not.toBe(iconWrapper));
+  });
+
+  it('renders only content blocks (no icon wrapper) when there is no icon block', () => {
+    const section = makeSection({
+      blocks: [
+        { id: 'text-1', type: 'text' },
+        { id: 'text-2', type: 'text' }
+      ] as unknown as Section['blocks']
+    });
+    render(<NotificationBannerSection section={section} />);
+    expect(screen.getAllByTestId('tb')).toHaveLength(2);
+  });
+
+  // NOTE: jsdom's CSSOM (cssstyle) does not support linear-gradient values, so
+  // the `background` shorthand set inline is silently dropped and cannot be read
+  // back from the DOM. We assert the gradient resolution inputs via the util
+  // instead, which is what actually drives the gradient string.
+  it('resolves the gradient endpoints from style defaults when unset', () => {
+    const spy = jest.spyOn(utils, 'getResponsiveValue');
+    render(<NotificationBannerSection section={makeSection()} />);
+
+    expect(spy).toHaveBeenCalledWith(undefined, 'desktop', '#a8e063');
+    expect(spy).toHaveBeenCalledWith(undefined, 'desktop', '#d4fc79');
+    spy.mockRestore();
+  });
+
+  it('feeds configured gradient style values through to the resolver', () => {
+    const spy = jest.spyOn(utils, 'getResponsiveValue');
+    const section = makeSection({
+      styles: {
+        'background-gradient-start': '#111111',
+        'background-gradient-end': '#222222'
+      } as unknown as Section['styles']
+    });
+    render(<NotificationBannerSection section={section} />);
+
+    expect(spy).toHaveBeenCalledWith('#111111', 'desktop', '#a8e063');
+    expect(spy).toHaveBeenCalledWith('#222222', 'desktop', '#d4fc79');
+    spy.mockRestore();
+  });
+
+  it('applies the default border radius and numeric padding defaults', () => {
+    const { container } = render(
+      <NotificationBannerSection section={makeSection()} />
+    );
+    const root = container.firstElementChild as HTMLElement;
+    expect(root).toHaveStyle({
+      borderRadius: '16px',
+      paddingTop: '20px',
+      paddingRight: '24px',
+      paddingBottom: '20px',
+      paddingLeft: '24px',
+      gap: '16px'
+    });
+  });
+});

package/src/sections/__tests__/section-wrapper.test.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import SectionWrapper from '../section-wrapper';
+import type { Section } from '../../theme-section';
+
+jest.mock('../../components/action-toolbar', () => ({
+  __esModule: true,
+  default: ({ label }: { label?: string }) => (
+    <div data-testid="action-toolbar">{label}</div>
+  )
+}));
+
+const makeSection = (overrides: Partial<Section> = {}): Section => ({
+  id: 'sec-1',
+  type: 'generic-section',
+  name: 'name',
+  label: 'My Section',
+  properties: {},
+  styles: {},
+  blocks: [],
+  order: 0,
+  hidden: false,
+  ...overrides
+});
+
+const renderWrapper = (props: Partial<React.ComponentProps<typeof SectionWrapper>> = {}) =>
+  render(
+    <SectionWrapper
+      section={props.section ?? makeSection()}
+      placeholderId="ph-1"
+      {...props}
+    >
+      <span>child content</span>
+    </SectionWrapper>
+  );
+
+const getSection = (container: HTMLElement, id = 'sec-1') =>
+  container.querySelector(`[data-section-id="${id}"]`) as HTMLElement;
+
+describe('SectionWrapper', () => {
+  it('always renders data-section-id', () => {
+    const { container } = renderWrapper({ section: makeSection({ id: 'abc' }) });
+    const el = getSection(container, 'abc');
+    expect(el).toBeInTheDocument();
+    expect(el.tagName).toBe('SECTION');
+  });
+
+  it('renders children inside the wrapper', () => {
+    renderWrapper();
+    expect(screen.getByText('child content')).toBeInTheDocument();
+  });
+
+  describe('newsletter data-* attributes', () => {
+    it('omits newsletter attributes for non-newsletter sections', () => {
+      const { container } = renderWrapper({
+        section: makeSection({
+          type: 'generic-section',
+          properties: {
+            'api-endpoint': '/api/sub',
+            'success-message': 'ok',
+            'error-message': 'fail'
+          }
+        })
+      });
+      const el = getSection(container);
+      expect(el).not.toHaveAttribute('data-newsletter-signup');
+      expect(el).not.toHaveAttribute('data-newsletter-endpoint');
+      expect(el).not.toHaveAttribute('data-newsletter-success-message');
+      expect(el).not.toHaveAttribute('data-newsletter-error-message');
+    });
+
+    it('sets newsletter-signup="true" and populated attrs for newsletter sections', () => {
+      const { container } = renderWrapper({
+        section: makeSection({
+          type: 'newsletter-signup-banner',
+          properties: {
+            'api-endpoint': '/api/sub',
+            'success-message': 'Subscribed!',
+            'error-message': 'Oops'
+          }
+        })
+      });
+      const el = getSection(container);
+      expect(el).toHaveAttribute('data-newsletter-signup', 'true');
+      expect(el).toHaveAttribute('data-newsletter-endpoint', '/api/sub');
+      expect(el).toHaveAttribute('data-newsletter-success-message', 'Subscribed!');
+      expect(el).toHaveAttribute('data-newsletter-error-message', 'Oops');
+    });
+
+    it('endpoint attribute is present (empty) but success/error omitted when empty', () => {
+      const { container } = renderWrapper({
+        section: makeSection({
+          type: 'newsletter-signup-banner',
+          properties: {}
+        })
+      });
+      const el = getSection(container);
+      // signup flag and endpoint render unconditionally for newsletter sections
+      expect(el).toHaveAttribute('data-newsletter-signup', 'true');
+      expect(el).toHaveAttribute('data-newsletter-endpoint', '');
+      // success/error are gated on non-empty values
+      expect(el).not.toHaveAttribute('data-newsletter-success-message');
+      expect(el).not.toHaveAttribute('data-newsletter-error-message');
+    });
+
+    it('reads responsive object properties via desktop/mobile fallback', () => {
+      const { container } = renderWrapper({
+        section: makeSection({
+          type: 'newsletter-signup-banner',
+          properties: {
+            'api-endpoint': { mobile: '/api/m' },
+            'success-message': { desktop: 'desk-success', mobile: 'mob-success' }
+          }
+        })
+      });
+      const el = getSection(container);
+      expect(el).toHaveAttribute('data-newsletter-endpoint', '/api/m');
+      expect(el).toHaveAttribute('data-newsletter-success-message', 'desk-success');
+    });
+  });
+
+  describe('hidden / display style', () => {
+    it('applies display:none when isDesigner and section.hidden', () => {
+      const { container } = renderWrapper({
+        isDesigner: true,
+        section: makeSection({ hidden: true })
+      });
+      expect(getSection(container).style.display).toBe('none');
+    });
+
+    it('does not hide when hidden but not in designer mode', () => {
+      const { container } = renderWrapper({
+        isDesigner: false,
+        section: makeSection({ hidden: true })
+      });
+      expect(getSection(container).style.display).toBe('');
+    });
+
+    it('does not hide when designer but not hidden', () => {
+      const { container } = renderWrapper({
+        isDesigner: true,
+        section: makeSection({ hidden: false })
+      });
+      expect(getSection(container).style.display).toBe('');
+    });
+  });
+
+  describe('ActionToolbar gating', () => {
+    it('renders ActionToolbar only when isDesigner && isSelected', () => {
+      renderWrapper({ isDesigner: true, isSelected: true });
+      expect(screen.getByTestId('action-toolbar')).toBeInTheDocument();
+    });
+
+    it('omits ActionToolbar when isDesigner but not selected', () => {
+      renderWrapper({ isDesigner: true, isSelected: false });
+      expect(screen.queryByTestId('action-toolbar')).not.toBeInTheDocument();
+    });
+
+    it('omits ActionToolbar when selected but not designer', () => {
+      renderWrapper({ isDesigner: false, isSelected: true });
+      expect(screen.queryByTestId('action-toolbar')).not.toBeInTheDocument();
+    });
+  });
+});

package/src/sections/__tests__/stats-counter-section.test.tsx

@@ -0,0 +1,245 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+// Stub the recursive ThemeBlock (default export) with a countable marker that
+// also surfaces the (possibly animated) block value so we can assert injection.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string; value: unknown } }) => (
+    <div data-testid="tb" data-id={block.id}>
+      {typeof block.value === 'string'
+        ? block.value
+        : JSON.stringify(block.value)}
+    </div>
+  )
+}));
+
+import StatsCounterSection from '../stats-counter-section';
+
+const valueBlock = (
+  id: string,
+  text: string,
+  over: Record<string, unknown> = {}
+) =>
+  ({
+    id,
+    type: 'text',
+    label: 'Value',
+    value: text,
+    properties: { statsRole: 'value' },
+    styles: {},
+    order: 0,
+    hidden: false,
+    ...over
+  } as any);
+
+const section = (over: Record<string, unknown> = {}) =>
+  ({
+    id: 'sec',
+    type: 'stats-counter',
+    name: 'stats',
+    label: 'stats',
+    properties: {},
+    styles: {},
+    blocks: [],
+    order: 0,
+    hidden: false,
+    ...over
+  } as any);
+
+const root = (container: HTMLElement) =>
+  container.querySelector('.stats-counter-section') as HTMLElement;
+
+const markerById = (container: HTMLElement, id: string) =>
+  container.querySelector(`[data-testid="tb"][data-id="${id}"]`) as HTMLElement;
+
+describe('StatsCounterSection — max-width matrix', () => {
+  it('narrow -> max-w-4xl + mx-auto', () => {
+    const { container } = render(
+      <StatsCounterSection
+        section={section({ styles: { 'max-width': 'narrow' } })}
+      />
+    );
+    const el = root(container);
+    expect(el).toHaveClass('max-w-4xl');
+    expect(el).toHaveClass('mx-auto');
+  });
+
+  it('normal -> max-w-7xl + mx-auto', () => {
+    const { container } = render(
+      <StatsCounterSection
+        section={section({ styles: { 'max-width': 'normal' } })}
+      />
+    );
+    const el = root(container);
+    expect(el).toHaveClass('max-w-7xl');
+    expect(el).toHaveClass('mx-auto');
+  });
+
+  it('defaults to normal (max-w-7xl) when max-width is unset', () => {
+    const { container } = render(<StatsCounterSection section={section()} />);
+    const el = root(container);
+    expect(el).toHaveClass('max-w-7xl');
+    expect(el).toHaveClass('mx-auto');
+  });
+
+  it('none -> no max-width class and no mx-auto', () => {
+    const { container } = render(
+      <StatsCounterSection
+        section={section({ styles: { 'max-width': 'none' } })}
+      />
+    );
+    const el = root(container);
+    expect(el).not.toHaveClass('max-w-4xl');
+    expect(el).not.toHaveClass('max-w-7xl');
+    expect(el).not.toHaveClass('mx-auto');
+  });
+
+  it('full -> no max-width class and no mx-auto', () => {
+    const { container } = render(
+      <StatsCounterSection
+        section={section({ styles: { 'max-width': 'full' } })}
+      />
+    );
+    const el = root(container);
+    expect(el).not.toHaveClass('max-w-4xl');
+    expect(el).not.toHaveClass('max-w-7xl');
+    expect(el).not.toHaveClass('mx-auto');
+  });
+
+  it('resolves responsive max-width per breakpoint', () => {
+    const { container } = render(
+      <StatsCounterSection
+        section={section({
+          styles: { 'max-width': { desktop: 'narrow', mobile: 'none' } }
+        })}
+        currentBreakpoint="mobile"
+      />
+    );
+    const el = root(container);
+    expect(el).not.toHaveClass('max-w-4xl');
+    expect(el).not.toHaveClass('mx-auto');
+  });
+});
+
+describe('StatsCounterSection — countUpEnabled=false shows final value immediately', () => {
+  // count-up-enabled=false skips rAF entirely: the effect synchronously sets
+  // the values at progress=1, so the final formatted numbers are injected.
+  const renderFinal = () =>
+    render(
+      <StatsCounterSection
+        section={section({
+          properties: { 'count-up-enabled': false },
+          blocks: [
+            valueBlock('grp', '1,234'),
+            valueBlock('dec', '12.50'),
+            valueBlock('plain', '98'),
+            valueBlock('neg', '-5')
+          ]
+        })}
+      />
+    );
+
+  it('keeps grouping separators (useGrouping from comma token)', () => {
+    const { container } = renderFinal();
+    // formatAnimatedNumber uses toLocaleString() with NO explicit locale, so the
+    // grouping separator is host-locale dependent (not necessarily a comma).
+    expect(markerById(container, 'grp')).toHaveTextContent(
+      (1234).toLocaleString()
+    );
+  });
+
+  it('preserves decimal places parsed from the text', () => {
+    const { container } = renderFinal();
+    expect(markerById(container, 'dec')).toHaveTextContent('12.50');
+  });
+
+  it('renders plain integers without separators', () => {
+    const { container } = renderFinal();
+    expect(markerById(container, 'plain')).toHaveTextContent('98');
+  });
+
+  it('handles negative target values', () => {
+    const { container } = renderFinal();
+    expect(markerById(container, 'neg')).toHaveTextContent('-5');
+  });
+});
+
+describe('StatsCounterSection — getCounterTargetFromText / target detection', () => {
+  it('leaves non-numeric value blocks untouched (no target collected)', () => {
+    const { container } = render(
+      <StatsCounterSection
+        section={section({
+          properties: { 'count-up-enabled': false },
+          blocks: [valueBlock('txt', 'No number here')]
+        })}
+      />
+    );
+    expect(markerById(container, 'txt')).toHaveTextContent('No number here');
+  });
+
+  it('detects counter value blocks by label="Value" without statsRole', () => {
+    const { container } = render(
+      <StatsCounterSection
+        section={section({
+          properties: { 'count-up-enabled': false },
+          blocks: [
+            valueBlock('lbl', '7,000', { properties: {}, label: 'Value' })
+          ]
+        })}
+      />
+    );
+    expect(markerById(container, 'lbl')).toHaveTextContent(
+      (7000).toLocaleString()
+    );
+  });
+
+  it('does not treat non-value text blocks as counter targets', () => {
+    const { container } = render(
+      <StatsCounterSection
+        section={section({
+          properties: { 'count-up-enabled': false },
+          blocks: [
+            valueBlock('caption', '500', {
+              label: 'Caption',
+              properties: {}
+            })
+          ]
+        })}
+      />
+    );
+    // Not a target -> value left exactly as authored.
+    expect(markerById(container, 'caption')).toHaveTextContent('500');
+  });
+});
+
+describe('StatsCounterSection — block visibility', () => {
+  it('drops hidden blocks in production', () => {
+    const { container } = render(
+      <StatsCounterSection
+        section={section({
+          properties: { 'count-up-enabled': false },
+          blocks: [
+            valueBlock('shown', '10', { hidden: false }),
+            valueBlock('gone', '20', { hidden: true })
+          ]
+        })}
+      />
+    );
+    expect(markerById(container, 'shown')).toBeInTheDocument();
+    expect(markerById(container, 'gone')).not.toBeInTheDocument();
+  });
+
+  it('keeps hidden blocks in the designer', () => {
+    const { container } = render(
+      <StatsCounterSection
+        isDesigner
+        section={section({
+          properties: { 'count-up-enabled': false },
+          blocks: [valueBlock('gone', '20', { hidden: true })]
+        })}
+      />
+    );
+    expect(markerById(container, 'gone')).toBeInTheDocument();
+  });
+});

package/src/sections/__tests__/tabs-section.test.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+// ThemeBlock is rendered for every leaf block (non-tab blocks, tab header
+// children, and active tab content children). Mock it to expose each block id.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id?: string } }) => (
+    <div data-testid="tb" data-id={block?.id} />
+  )
+}));
+
+import TabsSection from '../tabs-section';
+import type { Section } from '../../theme-section';
+
+type AnyBlock = Record<string, any>;
+
+const tab = (id: string, headerChildId: string, contentChildId: string): AnyBlock => ({
+  id,
+  type: 'tab',
+  label: `tab-${id}`,
+  blocks: [
+    {
+      id: `${id}-header`,
+      label: 'Tab Header',
+      blocks: [{ id: headerChildId, type: 'text' }]
+    },
+    {
+      id: `${id}-content`,
+      label: 'Tab Content',
+      blocks: [{ id: contentChildId, type: 'text' }]
+    }
+  ]
+});
+
+const makeSection = (blocks: AnyBlock[]): Section =>
+  ({
+    id: 'section-1',
+    type: 'tabs',
+    name: 'Tabs',
+    label: 'Tabs',
+    properties: {},
+    styles: {},
+    blocks,
+    order: 0,
+    hidden: false
+  } as unknown as Section);
+
+const idsRendered = () =>
+  screen.queryAllByTestId('tb').map((el) => el.getAttribute('data-id'));
+
+describe('TabsSection', () => {
+  it('renders the "No tabs available" placeholder when there are no tab blocks', () => {
+    render(<TabsSection section={makeSection([])} />);
+
+    expect(screen.getByText('No tabs available')).toBeInTheDocument();
+    expect(screen.queryAllByTestId('tb')).toHaveLength(0);
+  });
+
+  it('renders non-tab blocks but not the tab wrapper blocks (tab vs non-tab split)', () => {
+    const section = makeSection([
+      { id: 'nt-1', type: 'header', blocks: [] },
+      tab('t1', 't1-h', 't1-c'),
+      tab('t2', 't2-h', 't2-c')
+    ]);
+
+    render(<TabsSection section={section} />);
+
+    const ids = idsRendered();
+    // Non-tab block is rendered directly.
+    expect(ids).toContain('nt-1');
+    // Both tab headers' children render.
+    expect(ids).toContain('t1-h');
+    expect(ids).toContain('t2-h');
+    // The tab wrapper blocks themselves are not rendered via ThemeBlock
+    // (only in designer mode).
+    expect(ids).not.toContain('t1');
+    expect(ids).not.toContain('t2');
+  });
+
+  it('defaults to the first tab and switches active content on header click', () => {
+    const section = makeSection([
+      tab('t1', 't1-h', 't1-c'),
+      tab('t2', 't2-h', 't2-c')
+    ]);
+
+    render(<TabsSection section={section} />);
+
+    // Default active index 0 -> only first tab content child rendered.
+    expect(idsRendered()).toContain('t1-c');
+    expect(idsRendered()).not.toContain('t2-c');
+
+    // Click the second tab header child; the click bubbles up to the header
+    // onClick div that calls setActiveTabIndex.
+    fireEvent.click(document.querySelector('[data-id="t2-h"]') as Element);
+
+    expect(idsRendered()).toContain('t2-c');
+    expect(idsRendered()).not.toContain('t1-c');
+  });
+
+  it('shows only the active tab content, never both at once', () => {
+    const section = makeSection([
+      tab('t1', 't1-h', 't1-c'),
+      tab('t2', 't2-h', 't2-c'),
+      tab('t3', 't3-h', 't3-c')
+    ]);
+
+    render(<TabsSection section={section} />);
+
+    const contentIds = ['t1-c', 't2-c', 't3-c'];
+    const shown = () => contentIds.filter((id) => idsRendered().includes(id));
+
+    expect(shown()).toEqual(['t1-c']);
+  });
+});

package/src/sections/coupon-banner-section.tsx

@@ -295,11 +295,8 @@ const CouponBannerSection: React.FC<CouponBannerSectionProps> = ({
     rawSectionBorderRadius === undefined || rawSectionBorderRadius === null
       ? '0px'
       : String(rawSectionBorderRadius);
-  const parsedSectionBorderRadius = Number.parseFloat(normalizedSectionBorderRadius);
   const sectionBorderRadius = resolveThemeCssVariables(
-    Number.isFinite(parsedSectionBorderRadius) && parsedSectionBorderRadius === 12
-      ? '0px'
-      : normalizedSectionBorderRadius,
+    normalizedSectionBorderRadius,
     themeSettings
   );
 

package/src/theme-block.tsx

@@ -57,7 +57,9 @@ export default function ThemeBlock({
   const BlockRenderer = blockRendererRegistry.getRenderer(block.type);
 
   if (!BlockRenderer) {
-    return <div>Unknown block type: {block.type}</div>;
+    // Surface unknown types to authors in the designer, but never leak debug
+    // text to end users in production.
+    return isDesigner ? <div>Unknown block type: {block.type}</div> : null;
   }
 
   if (