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

package/CHANGELOG.md

@@ -1,40 +1,20 @@
 # @akinon/pz-theme
 
-## 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.150-beta.0
+
+### Patch Changes
+
+- Updated dependencies [cbbbfd757]
+  - @akinon/next@2.0.150-beta.0
+  - @akinon/theme-contract@2.0.150-beta.0
+
+## 2.0.149
+
+### Patch Changes
+
+- 99eb4f1: ZERO-5221: hide slider block arrows at the widths they are turned off
+  - @akinon/next@2.0.149
+  - @akinon/theme-contract@2.0.149
 
 ## 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-rc.0",
+  "version": "2.0.150-beta.0",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.149-rc.0",
+    "@akinon/next": "2.0.150-beta.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.149-rc.0",
+    "@akinon/theme-contract": "2.0.150-beta.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-rc.0",
+    "@akinon/next": "2.0.150-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__/slider-block-arrow-visibility.test.tsx

@@ -0,0 +1,223 @@
+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/blocks/slider-block.tsx

@@ -15,6 +15,7 @@ import {
 } from '../utils';
 import {
   DESKTOP_MIN_WIDTH,
+  TABLET_MIN_WIDTH,
   isNarrowBreakpoint,
   setAtAnyBreakpoint
 } from '../utils/breakpoints';
@@ -325,13 +326,30 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
   const canOverflow = visibleCount > 1;
   const renderArrows = arrowsAnywhere && canOverflow;
 
-  const arrowCss = buildCarouselArrowCss(
-    carouselSsrScopeId(block.id) || '',
-    carouselResponsive,
-    (band) =>
-      getResponsiveValue(arrowsConfigured, band, true) === true &&
-      visibleCount > Number(carouselResponsive?.[band]?.items || 1)
-  );
+  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 showDots = getResponsiveValue(
     getConfigEntry('show-dots'),
@@ -1140,6 +1158,7 @@ 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,
@@ -1400,8 +1419,7 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
           })}
         </Carousel>
 
-        {(isDesigner || arrowsOutside) &&
-        showArrows &&
+        {(isDesigner ? showArrows : arrowsOutside && arrowsAnywhere) &&
         sortedBlocks.length > 0 &&
         leftArrowIconBlock &&
         rightArrowIconBlock ? (

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

@@ -0,0 +1,113 @@
+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);
+  });
+});