@akinon/pz-theme 2.0.149-beta.0 → 2.0.149-rc.0

package/CHANGELOG.md

@@ -1,13 +1,40 @@
 # @akinon/pz-theme
 
-## 2.0.149-beta.0
-
-### Patch Changes
-
-- 99eb4f1: ZERO-5221: hide slider block arrows at the widths they are turned off
-- Updated dependencies [cbbbfd757]
-  - @akinon/next@2.0.149-beta.0
-  - @akinon/theme-contract@2.0.149-beta.0
+## 2.0.149-rc.0
+
+### Patch Changes
+
+- Updated dependencies [86187b1c2]
+- 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 [b1111d7b1]
+- Updated dependencies [1595d458e]
+- Updated dependencies [dca128112]
+  - @akinon/next@2.0.149-rc.0
+  - @akinon/theme-contract@2.0.149-rc.0
 
 ## 2.0.148
 

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

package/src/blocks/slider-block.tsx

@@ -15,7 +15,6 @@ import {
 } from '../utils';
 import {
   DESKTOP_MIN_WIDTH,
-  TABLET_MIN_WIDTH,
   isNarrowBreakpoint,
   setAtAnyBreakpoint
 } from '../utils/breakpoints';
@@ -326,30 +325,13 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
   const canOverflow = visibleCount > 1;
   const renderArrows = arrowsAnywhere && canOverflow;
 
-  const arrowBands = {
-    desktop: carouselResponsive.desktop,
-    tablet: {
-      breakpoint: { max: DESKTOP_MIN_WIDTH - 1, min: TABLET_MIN_WIDTH },
-      items: mobileItems
-    },
-    mobile: {
-      breakpoint: { max: TABLET_MIN_WIDTH - 1, min: 0 },
-      items: mobileItems
-    }
-  };
-  const arrowOwnerId = carouselSsrScopeId(block.styleSourceId || block.id);
-  const arrowCss =
-    isDesigner || !arrowOwnerId
-      ? ''
-      : buildCarouselArrowCss(
-          carouselSsrScopeId(block.id) || '',
-          arrowBands,
-          (band) =>
-            getResponsiveValue(arrowsConfigured, band, true) === true &&
-            visibleCount >
-              Number(arrowBands[band as keyof typeof arrowBands]?.items || 1),
-          `[data-block-id="${arrowOwnerId}"]`
-        );
+  const arrowCss = buildCarouselArrowCss(
+    carouselSsrScopeId(block.id) || '',
+    carouselResponsive,
+    (band) =>
+      getResponsiveValue(arrowsConfigured, band, true) === true &&
+      visibleCount > Number(carouselResponsive?.[band]?.items || 1)
+  );
 
   const showDots = getResponsiveValue(
     getConfigEntry('show-dots'),
@@ -1158,7 +1140,6 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
          * section arrows in `utils/slider-arrows.tsx` already carry this.
          */
         data-block-id={iconBlock?.id}
-        data-slider-arrow=""
         onClick={onActivate}
         className={arrowPlacementClass(
           plateStyle,
@@ -1419,7 +1400,8 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
           })}
         </Carousel>
 
-        {(isDesigner ? showArrows : arrowsOutside && arrowsAnywhere) &&
+        {(isDesigner || arrowsOutside) &&
+        showArrows &&
         sortedBlocks.length > 0 &&
         leftArrowIconBlock &&
         rightArrowIconBlock ? (

package/src/blocks/__tests__/slider-block-arrow-visibility.test.tsx

@@ -1,223 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-jest.mock('react-multi-carousel', () => ({
-  __esModule: true,
-  default: (carouselProps: any) => (
-    <div data-testid="carousel" className={carouselProps.containerClass}>
-      {carouselProps.customLeftArrow}
-      {carouselProps.children}
-      {carouselProps.customRightArrow}
-    </div>
-  )
-}));
-
-jest.mock('../../theme-block', () => ({
-  __esModule: true,
-  default: ({ block }: { block: { id: string } }) => (
-    <div data-testid="tb" data-id={block.id} />
-  )
-}));
-
-import SliderBlock from '../slider-block';
-
-const child = (id: string, over: Record<string, unknown> = {}): any => ({
-  id,
-  type: 'text',
-  label: id,
-  value: '',
-  properties: {},
-  styles: {},
-  order: 0,
-  hidden: false,
-  ...over
-});
-
-const slides = (count: number) =>
-  Array.from({ length: count }, (_unused, index) =>
-    child(`slide-${index}`, { order: index })
-  );
-
-const arrowIcon = (label: string, styles: Record<string, unknown> = {}) =>
-  child(label, { type: 'icon', label, value: { url: '/a.svg' }, styles });
-
-const sliderBlock = (
-  showArrows: unknown,
-  arrowStyles: Record<string, unknown> = {},
-  over: Record<string, unknown> = {}
-): any => ({
-  id: 'slider-1',
-  type: 'slider',
-  label: 'slider',
-  value: '',
-  properties: {
-    'show-arrows': showArrows,
-    'items-per-slide': { desktop: 1, mobile: 1 }
-  },
-  styles: {},
-  order: 0,
-  hidden: false,
-  blocks: [
-    arrowIcon('Left Arrow Icon', arrowStyles),
-    ...slides(3),
-    arrowIcon('Right Arrow Icon', arrowStyles)
-  ],
-  ...over
-});
-
-const renderOnStorefront = (block: any, isDesigner = false) =>
-  render(
-    <div data-block-id={block.styleSourceId || block.id}>
-      <SliderBlock
-        {...({
-          block,
-          placeholderId: 'home-body',
-          sectionId: 'section-1',
-          isDesigner
-        } as any)}
-      />
-    </div>
-  );
-
-const arrowRules = (container: HTMLElement) =>
-  Array.from(container.querySelectorAll('style'))
-    .map((style) => style.textContent || '')
-    .filter((css) => css.includes('[data-slider-arrow]'));
-
-const hiddenRulesOf = (css: string) =>
-  Array.from(
-    css.matchAll(/(@media[^{]+)\{([^{]+)\{display:none !important;\}\}/g)
-  ).map((match) => ({ query: match[1], selectors: match[2] }));
-
-const hiddenSelectorsOf = (css: string) =>
-  hiddenRulesOf(css).map((rule) => rule.selectors);
-
-describe('slider block arrows at the widths they are turned off', () => {
-  it('marks every arrow the block draws inside the track', () => {
-    const { container } = renderOnStorefront(
-      sliderBlock({ desktop: true, mobile: false })
-    );
-
-    expect(container.querySelectorAll('[data-slider-arrow]')).toHaveLength(2);
-  });
-
-  it('hides below desktop when only mobile is off, and the rules reach both arrows', () => {
-    const { container } = renderOnStorefront(
-      sliderBlock({ desktop: true, mobile: false })
-    );
-    const [css] = arrowRules(container);
-    const rules = hiddenRulesOf(css);
-
-    expect(rules.map((rule) => rule.query)).toEqual([
-      '@media (min-width:768px) and (max-width:1023px)',
-      '@media (max-width:767px)'
-    ]);
-    rules.forEach((rule) => {
-      expect(container.querySelectorAll(rule.selectors)).toHaveLength(2);
-    });
-  });
-
-  it('honours a tablet value of its own', () => {
-    const { container } = renderOnStorefront(
-      sliderBlock({ desktop: true, tablet: false, mobile: true })
-    );
-    const rules = hiddenRulesOf(arrowRules(container)[0]);
-
-    expect(rules.map((rule) => rule.query)).toEqual([
-      '@media (min-width:768px) and (max-width:1023px)'
-    ]);
-    expect(container.querySelectorAll(rules[0].selectors)).toHaveLength(2);
-  });
-
-  it('keeps the tablet on when only the phone is turned off', () => {
-    const { container } = renderOnStorefront(
-      sliderBlock({ desktop: true, tablet: true, mobile: false })
-    );
-    const rules = hiddenRulesOf(arrowRules(container)[0]);
-
-    expect(rules.map((rule) => rule.query)).toEqual([
-      '@media (max-width:767px)'
-    ]);
-  });
-
-  it('reaches arrows placed outside the track just the same', () => {
-    const { container } = renderOnStorefront(
-      sliderBlock({ desktop: true, mobile: false }, { top: '0px' })
-    );
-    const [css] = arrowRules(container);
-    const [selectors] = hiddenSelectorsOf(css);
-
-    expect(
-      container.querySelector('[data-testid="carousel"] [data-slider-arrow]')
-    ).toBeNull();
-    expect(container.querySelectorAll(selectors)).toHaveLength(2);
-  });
-
-  it('hides the desktop band instead when that is the one turned off', () => {
-    const { container } = renderOnStorefront(
-      sliderBlock({ desktop: false, mobile: true })
-    );
-    const rules = hiddenRulesOf(arrowRules(container)[0]);
-
-    expect(rules.map((rule) => rule.query)).toEqual([
-      '@media (min-width:1024px) and (max-width:4000px)'
-    ]);
-    expect(container.querySelectorAll(rules[0].selectors)).toHaveLength(2);
-  });
-
-  it('ships arrows placed outside the track even when the desktop band is off', () => {
-    const { container } = renderOnStorefront(
-      sliderBlock({ desktop: false, mobile: true }, { top: '0px' })
-    );
-    const [css] = arrowRules(container);
-
-    expect(container.querySelectorAll('[data-slider-arrow]')).toHaveLength(2);
-    expect(css).toContain('(min-width:');
-    expect(container.querySelectorAll(hiddenSelectorsOf(css)[0])).toHaveLength(
-      2
-    );
-  });
-
-  it('draws no arrows at all when they are off at every width', () => {
-    const { container } = renderOnStorefront(
-      sliderBlock({ desktop: false, mobile: false }, { top: '0px' })
-    );
-
-    expect(container.querySelectorAll('[data-slider-arrow]')).toHaveLength(0);
-  });
-
-  it('writes no hiding rule while the arrows are on everywhere', () => {
-    const { container } = renderOnStorefront(sliderBlock(true));
-
-    expect(arrowRules(container)).toHaveLength(0);
-    expect(container.querySelectorAll('[data-slider-arrow]')).toHaveLength(2);
-  });
-
-  it('follows the wrapper of a row clone, which carries the template id', () => {
-    const { container } = renderOnStorefront(
-      sliderBlock(
-        { desktop: true, mobile: false },
-        {},
-        {
-          id: 'slider-1-row-2',
-          styleSourceId: 'slider-1'
-        }
-      )
-    );
-    const [css] = arrowRules(container);
-
-    expect(css).toContain('[data-block-id="slider-1"] [data-slider-arrow]');
-    expect(container.querySelectorAll(hiddenSelectorsOf(css)[0])).toHaveLength(
-      2
-    );
-  });
-
-  it('leaves the designer canvas to resolve the breakpoint itself', () => {
-    const { container } = renderOnStorefront(
-      sliderBlock({ desktop: true, mobile: false }),
-      true
-    );
-
-    expect(arrowRules(container)).toHaveLength(0);
-  });
-});

package/src/sections/__tests__/posts-slider-arrow-visibility.test.tsx

@@ -1,113 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-jest.mock('../../theme-block', () => ({
-  __esModule: true,
-  default: ({ block }: { block: { id: string } }) => (
-    <div data-testid="slide" data-id={block.id} />
-  )
-}));
-
-jest.mock('react-multi-carousel', () => ({
-  __esModule: true,
-  default: ({
-    children,
-    customLeftArrow,
-    customRightArrow
-  }: {
-    children?: React.ReactNode;
-    customLeftArrow?: React.ReactNode;
-    customRightArrow?: React.ReactNode;
-  }) => (
-    <div data-testid="carousel">
-      {customLeftArrow}
-      {customRightArrow}
-      {children}
-    </div>
-  )
-}));
-
-import PostsSliderSection from '../posts-slider-section';
-import {
-  LEFT_ARROW_ICON_LABEL,
-  RIGHT_ARROW_ICON_LABEL
-} from '../../utils/slider-arrows';
-
-const slide = (id: string) => ({
-  id,
-  type: 'group',
-  label: id,
-  styles: {},
-  order: 0,
-  blocks: []
-});
-
-const arrow = (label: string) => ({
-  id: `arrow-${label === LEFT_ARROW_ICON_LABEL ? 'left' : 'right'}`,
-  type: 'icon',
-  label,
-  value: { url: '', alt: label },
-  properties: {},
-  styles: {},
-  order: 9
-});
-
-const renderSection = (showArrows: unknown) =>
-  render(
-    <section data-section-id="sec">
-      <PostsSliderSection
-        {...({
-          section: {
-            id: 'sec',
-            type: 'flash-deals-slider',
-            label: 'sec',
-            properties: { 'items-per-slide': 1, 'show-arrows': showArrows },
-            styles: {},
-            blocks: [
-              arrow(LEFT_ARROW_ICON_LABEL),
-              slide('a'),
-              slide('b'),
-              arrow(RIGHT_ARROW_ICON_LABEL)
-            ]
-          },
-          currentBreakpoint: 'desktop',
-          placeholderId: 'ph',
-          isDesigner: false,
-          selectedBlockId: null
-        } as any)}
-      />
-    </section>
-  );
-
-const arrowRules = (container: HTMLElement) =>
-  Array.from(container.querySelectorAll('style'))
-    .map((style) => style.textContent || '')
-    .filter((css) => css.includes('[data-slider-arrow]'));
-
-const hiddenSelectorsOf = (css: string) =>
-  Array.from(
-    css.matchAll(/@media[^{]+\{([^{]+)\{display:none !important;\}\}/g)
-  ).map((match) => match[1]);
-
-describe('posts slider arrows at the widths they are turned off', () => {
-  it('hides only below desktop, and every rule reaches both arrows', () => {
-    const { container } = renderSection({ desktop: true, mobile: false });
-    const [css] = arrowRules(container);
-
-    const selectors = hiddenSelectorsOf(css);
-
-    expect(css).toBeDefined();
-    expect(selectors.length).toBeGreaterThan(0);
-    expect(css).not.toMatch(/@media \(min-width:\d+px\)\{/);
-    selectors.forEach((selector) => {
-      expect(container.querySelectorAll(selector)).toHaveLength(2);
-    });
-  });
-
-  it('writes no hiding rule while the arrows are on everywhere', () => {
-    const { container } = renderSection(true);
-
-    expect(arrowRules(container)).toHaveLength(0);
-    expect(container.querySelectorAll('[data-slider-arrow]')).toHaveLength(2);
-  });
-});