From 798642a711e4304e326fcbc9a6d8659b7d8d0e4a Mon Sep 17 00:00:00 2001 From: Petr Krotov Date: Thu, 6 Nov 2025 14:50:18 +0300 Subject: [PATCH 1/3] chore(ToggleArrow): add new stories and update description --- src/components/ToggleArrow/README.md | 27 +++++++ .../ToggleArrow/__stories__/ToggleArrow.mdx | 17 ++--- .../__stories__/ToggleArrow.stories.tsx | 66 ++++++++++++++-- .../__tests__/ToggleArrow.visual.test.tsx | 76 +++++++++++++++++++ .../ToggleArrow/__tests__/helpers.ts | 16 ++++ 5 files changed, 188 insertions(+), 14 deletions(-) create mode 100644 src/components/ToggleArrow/README.md create mode 100644 src/components/ToggleArrow/__tests__/ToggleArrow.visual.test.tsx create mode 100644 src/components/ToggleArrow/__tests__/helpers.ts diff --git a/src/components/ToggleArrow/README.md b/src/components/ToggleArrow/README.md new file mode 100644 index 000000000..3645afcc5 --- /dev/null +++ b/src/components/ToggleArrow/README.md @@ -0,0 +1,27 @@ +# ToggleArrow + +`type: "toggle-arrow"` + +The **ToggleArrow** component is a small, animated arrow icon used for collapsible sections, navigation panels, and accordions. + +--- + +## 🔧 Props + +| Prop | Type | Default | Description | +| ----------- | ---------------------------- | -------------- | --------------------------------------------- | +| `type` | `'horizontal' \| 'vertical'` | `'horizontal'` | Orientation of the arrow. | +| `iconType` | `'default' \| 'navigation'` | `'default'` | Visual icon variant. | +| `open` | `boolean` | `false` | Whether the arrow is in open (rotated) state. | +| `size` | `number` | `16` | Icon size in pixels. | +| `thin` | `boolean` | `false` | Thinner stroke style. | +| `slow` | `boolean` | `false` | Slower transition animation. | +| `className` | `string` | — | Optional custom CSS class. | + +--- + +## 🧩 Example + +```tsx + +``` diff --git a/src/components/ToggleArrow/__stories__/ToggleArrow.mdx b/src/components/ToggleArrow/__stories__/ToggleArrow.mdx index f50949268..bd86c3e8a 100644 --- a/src/components/ToggleArrow/__stories__/ToggleArrow.mdx +++ b/src/components/ToggleArrow/__stories__/ToggleArrow.mdx @@ -1,5 +1,4 @@ import {Meta} from '@storybook/blocks'; - import {StoryTemplate} from '../../../demo/StoryTemplate.mdx'; import * as ToggleArrowStories from './ToggleArrow.stories.tsx'; @@ -8,22 +7,22 @@ import * as ToggleArrowStories from './ToggleArrow.stories.tsx'; ## Usage -For a detailed usage guide of the ToggleArrow component, see [ToggleArrow Usage](https://github.com/gravity-ui/page-constructor/blob/main/memory-bank/usage/toggleArrow.md). +For a detailed usage guide of the **ToggleArrow** component, see [ToggleArrow Usage](https://github.com/gravity-ui/page-constructor/blob/main/memory-bank/usage/toggleArrow.md). ## Parameters -`type?: 'horizontal' | 'vertical'` — Arrow orientation (default: 'horizontal') +`type?: 'horizontal' | 'vertical'` — Arrow orientation (default: `'horizontal'`) -`iconType?: 'default' | 'navigation'` — Icon variant (default: 'default') +`iconType?: 'default' | 'navigation'` — Icon variant (default: `'default'`) -`open?: boolean` — Boolean indicating if the toggle is in open state (default: false) +`open?: boolean` — Indicates whether the toggle is in an open state (default: `false`) -`size?: number` — Icon size in pixels (default: 16) +`size?: number` — Icon size in pixels (default: `16`) -`thin?: boolean` — Boolean for thinner stroke width (default: false) +`thin?: boolean` — Enables a thinner stroke width (default: `false`) -`slow?: boolean` — Boolean for slower animation duration (default: false) +`slow?: boolean` — Slows down animation (default: `false`) -`className?: string` — Optional CSS class name +`className?: string` — Optional CSS class name for the wrapper diff --git a/src/components/ToggleArrow/__stories__/ToggleArrow.stories.tsx b/src/components/ToggleArrow/__stories__/ToggleArrow.stories.tsx index ff709470b..456bca22c 100644 --- a/src/components/ToggleArrow/__stories__/ToggleArrow.stories.tsx +++ b/src/components/ToggleArrow/__stories__/ToggleArrow.stories.tsx @@ -5,14 +5,70 @@ import ToggleArrow, {ToggleArrowProps} from '../ToggleArrow'; import data from './data.json'; export default { - component: ToggleArrow, title: 'Components/ToggleArrow', -} as Meta; + component: ToggleArrow, + parameters: { + layout: 'centered', + controls: {expanded: true}, + }, + argTypes: { + type: {control: 'inline-radio', options: ['horizontal', 'vertical']}, + iconType: {control: 'inline-radio', options: ['default', 'navigation']}, + open: {control: 'boolean'}, + thin: {control: 'boolean'}, + slow: {control: 'boolean'}, + size: {control: 'number'}, + className: {control: 'text'}, + }, +} as Meta; -const DefaultTemplate: StoryFn = (args) => ; +const Template: StoryFn = (args) => ; -export const Horizontal = DefaultTemplate.bind({}); -export const Vertical = DefaultTemplate.bind({}); +export const Default = Template.bind({}); +export const Horizontal = Template.bind({}); +export const Vertical = Template.bind({}); +export const OpenHorizontal = Template.bind({}); +export const OpenVertical = Template.bind({}); +export const Thin = Template.bind({}); +export const Slow = Template.bind({}); +export const ThinSlow = Template.bind({}); +export const NavigationIcon = Template.bind({}); +export const AllVariants = Template.bind({}); +Default.args = {type: 'horizontal', iconType: 'default', size: 24}; Horizontal.args = data.horizontal.content as ToggleArrowProps; Vertical.args = data.vertical.content as ToggleArrowProps; +OpenHorizontal.args = {type: 'horizontal', open: true, size: 24}; +OpenVertical.args = {type: 'vertical', open: true, size: 24}; +Thin.args = {type: 'horizontal', thin: true, size: 24}; +Slow.args = {type: 'horizontal', slow: true, size: 24}; +ThinSlow.args = {type: 'horizontal', thin: true, slow: true, size: 24}; +NavigationIcon.args = {type: 'horizontal', iconType: 'navigation', size: 30}; + +AllVariants.args = {}; +AllVariants.decorators = [ + () => ( +
+ + + + + + + + + + + + +
+ ), +]; diff --git a/src/components/ToggleArrow/__tests__/ToggleArrow.visual.test.tsx b/src/components/ToggleArrow/__tests__/ToggleArrow.visual.test.tsx new file mode 100644 index 000000000..a837362a8 --- /dev/null +++ b/src/components/ToggleArrow/__tests__/ToggleArrow.visual.test.tsx @@ -0,0 +1,76 @@ +import {test} from '../../../../playwright/core/index'; + +import { + AllVariants, + Default, + Horizontal, + NavigationIcon, + OpenHorizontal, + OpenVertical, + Slow, + Thin, + ThinSlow, + Vertical, +} from './helpers'; + +test.describe('ToggleArrow', () => { + test('render ', async ({mount, expectScreenshot, defaultDelay}) => { + await mount(); + await defaultDelay(); + await expectScreenshot({skipTheme: 'dark'}); + }); + + test('render ', async ({mount, expectScreenshot, defaultDelay}) => { + await mount(); + await defaultDelay(); + await expectScreenshot({skipTheme: 'dark'}); + }); + + test('render ', async ({mount, expectScreenshot, defaultDelay}) => { + await mount(); + await defaultDelay(); + await expectScreenshot({skipTheme: 'dark'}); + }); + + test('render ', async ({mount, expectScreenshot, defaultDelay}) => { + await mount(); + await defaultDelay(); + await expectScreenshot({skipTheme: 'dark'}); + }); + + test('render ', async ({mount, expectScreenshot, defaultDelay}) => { + await mount(); + await defaultDelay(); + await expectScreenshot({skipTheme: 'dark'}); + }); + + test('render ', async ({mount, expectScreenshot, defaultDelay}) => { + await mount(); + await defaultDelay(); + await expectScreenshot({skipTheme: 'dark'}); + }); + + test('render ', async ({mount, expectScreenshot, defaultDelay}) => { + await mount(); + await defaultDelay(); + await expectScreenshot({skipTheme: 'dark'}); + }); + + test('render ', async ({mount, expectScreenshot, defaultDelay}) => { + await mount(); + await defaultDelay(); + await expectScreenshot({skipTheme: 'dark'}); + }); + + test('render ', async ({mount, expectScreenshot, defaultDelay}) => { + await mount(); + await defaultDelay(); + await expectScreenshot({skipTheme: 'dark'}); + }); + + test('render ', async ({mount, expectScreenshot, defaultDelay}) => { + await mount(); + await defaultDelay(); + await expectScreenshot({skipTheme: 'dark'}); + }); +}); diff --git a/src/components/ToggleArrow/__tests__/helpers.ts b/src/components/ToggleArrow/__tests__/helpers.ts new file mode 100644 index 000000000..cebb469d2 --- /dev/null +++ b/src/components/ToggleArrow/__tests__/helpers.ts @@ -0,0 +1,16 @@ +import {composeStories} from '@storybook/react'; + +import * as ToggleArrowStories from '../__stories__/ToggleArrow.stories'; + +export const { + Default, + Horizontal, + Vertical, + OpenHorizontal, + OpenVertical, + Thin, + Slow, + ThinSlow, + NavigationIcon, + AllVariants, +} = composeStories(ToggleArrowStories) as Record>; From 24dae6db2871ccc361bbeaad17d73d7f474a3c19 Mon Sep 17 00:00:00 2001 From: Petr Krotov Date: Thu, 6 Nov 2025 15:08:01 +0300 Subject: [PATCH 2/3] feat: add screenshots --- ...w-render-AllVariants-light-chromium-linux.png | Bin 0 -> 1609 bytes ...row-render-AllVariants-light-webkit-linux.png | Bin 0 -> 3284 bytes ...Arrow-render-Default-light-chromium-linux.png | Bin 0 -> 408 bytes ...leArrow-render-Default-light-webkit-linux.png | Bin 0 -> 730 bytes ...ow-render-Horizontal-light-chromium-linux.png | Bin 0 -> 411 bytes ...rrow-render-Horizontal-light-webkit-linux.png | Bin 0 -> 724 bytes ...ender-NavigationIcon-light-chromium-linux.png | Bin 0 -> 411 bytes ...-render-NavigationIcon-light-webkit-linux.png | Bin 0 -> 724 bytes ...ender-OpenHorizontal-light-chromium-linux.png | Bin 0 -> 408 bytes ...-render-OpenHorizontal-light-webkit-linux.png | Bin 0 -> 787 bytes ...-render-OpenVertical-light-chromium-linux.png | Bin 0 -> 381 bytes ...ow-render-OpenVertical-light-webkit-linux.png | Bin 0 -> 792 bytes ...gleArrow-render-Slow-light-chromium-linux.png | Bin 0 -> 408 bytes ...oggleArrow-render-Slow-light-webkit-linux.png | Bin 0 -> 730 bytes ...gleArrow-render-Thin-light-chromium-linux.png | Bin 0 -> 324 bytes ...oggleArrow-render-Thin-light-webkit-linux.png | Bin 0 -> 682 bytes ...rrow-render-ThinSlow-light-chromium-linux.png | Bin 0 -> 324 bytes ...eArrow-render-ThinSlow-light-webkit-linux.png | Bin 0 -> 682 bytes ...rrow-render-Vertical-light-chromium-linux.png | Bin 0 -> 548 bytes ...eArrow-render-Vertical-light-webkit-linux.png | Bin 0 -> 871 bytes 20 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-AllVariants-light-chromium-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-AllVariants-light-webkit-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Default-light-chromium-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Default-light-webkit-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Horizontal-light-chromium-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Horizontal-light-webkit-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-NavigationIcon-light-chromium-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-NavigationIcon-light-webkit-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-OpenHorizontal-light-chromium-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-OpenHorizontal-light-webkit-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-OpenVertical-light-chromium-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-OpenVertical-light-webkit-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Slow-light-chromium-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Slow-light-webkit-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Thin-light-chromium-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Thin-light-webkit-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-ThinSlow-light-chromium-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-ThinSlow-light-webkit-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Vertical-light-chromium-linux.png create mode 100644 src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Vertical-light-webkit-linux.png diff --git a/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-AllVariants-light-chromium-linux.png b/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-AllVariants-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..699e96b7165eecd856fde199c192bdf7b866e1ba GIT binary patch literal 1609 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 Fe*z;`s%roM literal 0 HcmV?d00001 diff --git a/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Default-light-chromium-linux.png b/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Default-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..0ced0100410666abd69406f4a091a23bbbdec98a GIT binary patch literal 408 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1SD0tpLGH$#^NA%Cx&(BWL^T7%;UXYOJlIBp_owMbyuGlNt1+VP0 zPF<>$J?{8_CjUEzdRLYmf{b}C4bp-S+%T9A#Mf*+CK2$_TA;CV-sw$iR%OY!yZp7* zKO!GpIgkIagG-`>nXmBijo-z@CvaXVm2FcLw0yqh+67AomPHy_x4#tycs-N}@cwgo z;rnVAf!Z2f*=IKo)zP*MWzsdvp1GC?5%iR%wj`a`Uf{FP_xO@uo|1<6tO2PZJ T9E|dSLCxUl>gTe~DWM4f+J&UC literal 0 HcmV?d00001 diff --git a/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Default-light-webkit-linux.png b/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Default-light-webkit-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..4b3399c4527eacda3217f48eba1e1823fb739a69 GIT binary patch literal 730 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1SEZ8zRdwrY)RhkE)4%caKYZ?lNlJ8`aNA7 zLn`LHy<^??C_upNVG>W8yGuvIUWt!FDr;J<7jfvYA9=$TEpD~p$}7o$)yzj;uKMZU z^5)4ZyZGobhv#+sXFvMotpA|ipP_)ML6~6K>hX zhTV7bjAq8H53f>Oe^T;5-uBz?zlVmNeg0X3Z63p|m)rLrme|4g!|Lxg2{t>1Ag}4C zpMI({@$?eN2o6>q-(ejk6;zpC!!k5eztEbNExM6o7T>>P-{+cVYzO|Cbr{wbe>dHt!DVbc|GeR{ z{5ZKo|EC0<+SC(wG`omXK-2$x!vtDICVE=A!_K8^X|eh>`$k}5W$<+Mb6Mw<&;$Uv C4=CjT literal 0 HcmV?d00001 diff --git a/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Horizontal-light-chromium-linux.png b/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Horizontal-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..2328009c26232157976314cbea9a7c72f3938996 GIT binary patch literal 411 zcmeAS@N?(olHy`uVBq!ia0vp^ZXnFT1SJ3YlwJl>jKx9jP7LeL$-D%zLp@y_LoyoQ z-c(%IVjytr*ksJS4)1h zN}YPWFaLAw-z#+tzow`ts(N~O3I$DSL1pR%^%x#IvE^rRz0B-oQ?}(AA2acNJm;~* z#|zzm+Fsb4FO)fL)be2Oa@mh}-fz;`V*Rale(}C_ulL&YEzXV3)_psr{e|bT8Ho~h zp}+Sjhw3cZrKK0-DyqD4TG#Xt*Q0)iRtudQH^pU*5~nZokH!Bc|2kL7cNhX;QX%eM`a zKgh)eiSh%DZto7c*t}!bmwW938SXaj|EI0l`t;HbOZIOCcRQyix7p;Y{%Q`l{ktEB fpBL(@{AD&@^XjnM^Mr6K4$LsDm9%qVRxVyONZ@?zG6*jH2JrpN+Otk&K^Z9z6 zz0bVn&$|<|cYC4C)PL{qO_x*HtLM?s#G*knqNDvvl(h_>x4&U_{dBnp>07V$9e?~~ z@9nqKWYe~Jn7>?n;b+ad;`s(1@~z8WSr|^Rq>Fv|b)@4zg8Onbc(&I5FfT zXU`HNzZ{jT1&5SZHcV!obZ4&5gp{{WnpNV}wN++X?NmH@@uYxfncqB*Peq$tCrzAe zJSk?*nTaV6pY*Hj3+7ZgICqso=bIxDeSg;GZNEMFvby$+(_tJhSI0hG`L=BL&75a* zp8pPYe8jbqLnz8abixa#P3}ellguZzPw1JL)AFS2iHeH1im~EP#h;ufc}@m-_<5{z z+T>^?Hi>=G_6a-_-n6>7uToGk2@+H+ocM}^vn#~Q!(~a9(;-Ds5h3oC%O*H@q_(;^ zuF_HAx-@yKYqetFgto+r9|uZUfvhhlR(4EK>0RNsJox_i+WXtDO`DgxFG2qe|6v2& zyWu;XCoKU+@br0#dpSP)uZo$#z{(jwGvb2%ZsC-;tsY;d1CuF(r>mdKI;Vst0PyV| A5&!@I literal 0 HcmV?d00001 diff --git a/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-NavigationIcon-light-chromium-linux.png b/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-NavigationIcon-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..2328009c26232157976314cbea9a7c72f3938996 GIT binary patch literal 411 zcmeAS@N?(olHy`uVBq!ia0vp^ZXnFT1SJ3YlwJl>jKx9jP7LeL$-D%zLp@y_LoyoQ z-c(%IVjytr*ksJS4)1h zN}YPWFaLAw-z#+tzow`ts(N~O3I$DSL1pR%^%x#IvE^rRz0B-oQ?}(AA2acNJm;~* z#|zzm+Fsb4FO)fL)be2Oa@mh}-fz;`V*Rale(}C_ulL&YEzXV3)_psr{e|bT8Ho~h zp}+Sjhw3cZrKK0-DyqD4TG#Xt*Q0)iRtudQH^pU*5~nZokH!Bc|2kL7cNhX;QX%eM`a zKgh)eiSh%DZto7c*t}!bmwW938SXaj|EI0l`t;HbOZIOCcRQyix7p;Y{%Q`l{ktEB fpBL(@{AD&@^XjnM^Mr6K4$LsDm9%qVRxVyONZ@?zG6*jH2JrpN+Otk&K^Z9z6 zz0bVn&$|<|cYC4C)PL{qO_x*HtLM?s#G*knqNDvvl(h_>x4&U_{dBnp>07V$9e?~~ z@9nqKWYe~Jn7>?n;b+ad;`s(1@~z8WSr|^Rq>Fv|b)@4zg8Onbc(&I5FfT zXU`HNzZ{jT1&5SZHcV!obZ4&5gp{{WnpNV}wN++X?NmH@@uYxfncqB*Peq$tCrzAe zJSk?*nTaV6pY*Hj3+7ZgICqso=bIxDeSg;GZNEMFvby$+(_tJhSI0hG`L=BL&75a* zp8pPYe8jbqLnz8abixa#P3}ellguZzPw1JL)AFS2iHeH1im~EP#h;ufc}@m-_<5{z z+T>^?Hi>=G_6a-_-n6>7uToGk2@+H+ocM}^vn#~Q!(~a9(;-Ds5h3oC%O*H@q_(;^ zuF_HAx-@yKYqetFgto+r9|uZUfvhhlR(4EK>0RNsJox_i+WXtDO`DgxFG2qe|6v2& zyWu;XCoKU+@br0#dpSP)uZo$#z{(jwGvb2%ZsC-;tsY;d1CuF(r>mdKI;Vst0PyV| A5&!@I literal 0 HcmV?d00001 diff --git a/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-OpenHorizontal-light-chromium-linux.png b/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-OpenHorizontal-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..5c022c21ca982d49144a8fb41c33946c11978fed GIT binary patch literal 408 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1SD0tpLGH$#^NA%Cx&(BWL^T z*SvL`&gslq40rO(P0Ad%d6Jo)~2hH0l&8wzEZedSp`oHUreEHn1{z2*F@Gv+Tn z{Lnypl1k?7vaM0A5gH;42c8z)d|MVM5*jL+@oNJE!}HIUU5iY759&oJ^@@85c@3K-N3p00i_>zopr0B=>VZ~y=R literal 0 HcmV?d00001 diff --git a/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-OpenHorizontal-light-webkit-linux.png b/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-OpenHorizontal-light-webkit-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..51f72979464f3726fef4b07997191bf244487bdb GIT binary patch literal 787 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1SEZ8zRdwrY)RhkE)4%caKYZ?lNlJ8PI$UF zhE&XXd)Ls<$Wfx@M&?vJ<0#y zS6=Z|oBjUo%~a=yH?y{K6-IsG{PUiN!I4}Vw9;*H;P%^Z%Xa^*`~Uav-x*7Tyv)tbE4Lm$emr>Y zLr&4{%*P&oOffoXfByOBg9#rV*IqC=3sm>|b@sonPoFM5P#X}|@bzW7eclGcziSS# zv9daV|6 zU4HrH(W6Hu&#RPDSvwv}g_!@Kb;YL+|hz1-iiIrQfL zLr>-(&fOaI)zAJEzks0T(%rjv&z0BK*Vk8mwA%Un`SWxAo?k!z-a?e6WAE>T%Z zt>aMhu`b|ZaJh3WW72An#joZuzW$Vcc}ftFy^7hz<=?bryMF)MwTt-=W2hbTKOs7% bgbn`kiE|U2B)I*6shq*n)z4*}Q$iB}xbjU* literal 0 HcmV?d00001 diff --git a/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-OpenVertical-light-chromium-linux.png b/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-OpenVertical-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..4c95ae8056020610d9bee91ca9763e6805833ea7 GIT binary patch literal 381 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1SD0tpLGH$#^NA%Cx&(BWL^T<=AJH&AsLNt zZyK&@b`WWO_>uFQQxtdk)6nnBAIu6VkV$nYV11Qe-%o3>2+e(- zS+~>v3)6i!1}mluf(?BPB`gb+8Dtq>a5%U_g&K~}DL%Jzfie@*oMI&wd$5y>Ry=lv}wi!$LXDnN}?sfKW6W_}wdwD`bTMaar z@A>x`KKoi#8hhR3?A-@t|vY;_IHxm}ife_QUf)XI7Hd6gDb^G&?=pILr;{e9Wv zfiB-_|5tpUUE=qkvO4+9Uzu&W+FeesWl9*17al46^XKh7Ue8G`flG{T&GFJbt)z6= zz@~o9`)a|+>!I1}Zdo^U*+0YKBZw#Oo@f5Y*qZEixBlc^ZD4pZc)I$ztaD0e0ssu{ BpgaHo literal 0 HcmV?d00001 diff --git a/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-OpenVertical-light-webkit-linux.png b/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-OpenVertical-light-webkit-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..92cb81475e4af3a723b08b140077b984894cf813 GIT binary patch literal 792 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1SEZ8zRdwrY)RhkE)4%caKYZ?lNlJ8&U(5y zhE&XXd&k#L$x+7PW094Tdg9|lt)1G3ns~n#w8mGko`1luSS2oYM4<0MUv`42aYI`R>V9Q~$5;es`~8LyTT?;on8#8{Ts=s58uAC}2832gXz0fN80b)4phx zX(c!Otf{N6t}ZP6`0tn`ygyR<3Ht`4 zzY+V`W-``T{f$`0X33Z{qfW=YxjE)vVRq!S@bK`(7hlY;znQgl-n@BPTW{4zTz&U+ zBl9ES=Vq7r6?@zk_ssJ(zQHKH?r+#?QKuiTR_lCod}W<*c{r$ufW`mug!nNV=m*k&POE^Bt9b@6}GzeYh6K6(WG-r(y(_!7&3^8@dDmWl{aEp*Fy(aoysur0UX)nn z=jUI3`Q`D0vuDqK{aR|8y>?Y*c_t&fw|l=d#Wzp$Pz7_(%8v literal 0 HcmV?d00001 diff --git a/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Slow-light-chromium-linux.png b/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Slow-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..0ced0100410666abd69406f4a091a23bbbdec98a GIT binary patch literal 408 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1SD0tpLGH$#^NA%Cx&(BWL^T7%;UXYOJlIBp_owMbyuGlNt1+VP0 zPF<>$J?{8_CjUEzdRLYmf{b}C4bp-S+%T9A#Mf*+CK2$_TA;CV-sw$iR%OY!yZp7* zKO!GpIgkIagG-`>nXmBijo-z@CvaXVm2FcLw0yqh+67AomPHy_x4#tycs-N}@cwgo z;rnVAf!Z2f*=IKo)zP*MWzsdvp1GC?5%iR%wj`a`Uf{FP_xO@uo|1<6tO2PZJ T9E|dSLCxUl>gTe~DWM4f+J&UC literal 0 HcmV?d00001 diff --git a/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Slow-light-webkit-linux.png b/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Slow-light-webkit-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..4b3399c4527eacda3217f48eba1e1823fb739a69 GIT binary patch literal 730 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1SEZ8zRdwrY)RhkE)4%caKYZ?lNlJ8`aNA7 zLn`LHy<^??C_upNVG>W8yGuvIUWt!FDr;J<7jfvYA9=$TEpD~p$}7o$)yzj;uKMZU z^5)4ZyZGobhv#+sXFvMotpA|ipP_)ML6~6K>hX zhTV7bjAq8H53f>Oe^T;5-uBz?zlVmNeg0X3Z63p|m)rLrme|4g!|Lxg2{t>1Ag}4C zpMI({@$?eN2o6>q-(ejk6;zpC!!k5eztEbNExM6o7T>>P-{+cVYzO|Cbr{wbe>dHt!DVbc|GeR{ z{5ZKo|EC0<+SC(wG`omXK-2$x!vtDICVE=A!_K8^X|eh>`$k}5W$<+Mb6Mw<&;$Uv C4=CjT literal 0 HcmV?d00001 diff --git a/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Thin-light-chromium-linux.png b/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Thin-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..e91c5e1b2e842fb35aa4c9aec2f5d288ee1ca1f8 GIT binary patch literal 324 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1SD0tpLGH$#^NA%Cx&(BWL^R}|2$nBLoyoQ z-nhuwY#`G5@C5^(!W~zZ=LU~zytWDLDdh2#|8?#9w>!=c|1cl?pcVu(^7EF< zr+8_mwe2`!eZ@8*ZRwOLLcjL2?CDJAxv@N;f$^V&tF+QLMq}%~#qWQoMxOip=k23H z>6->T6H2A`MZLB;f7vAV`q$4#AMQU;d;j$=yYtMq1U4{y`4Zu9;ERL9nJ*d#s(&>! z3w$uK>U+HJ{fn24%P(&D;&u$#X~?eqU44Mts!Hwqp^oj6z>r|@boFyt=akR{08+J$ A!vFvP literal 0 HcmV?d00001 diff --git a/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Thin-light-webkit-linux.png b/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Thin-light-webkit-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..a90dc6bf11e224884c688029a6263d6575c6280b GIT binary patch literal 682 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1SEZ8zRdwrY)RhkE)4%caKYZ?lNlJ8;yqm) zLn`LHy|Z!cqX2={hs8HVYcFt|*y6w&lE~ih;=mV&CwUWOgdVks)xTJJ{%hvV z&+cVr^UnL_IIi4!s!;a@@xoclmSuWre#xj0m0<8(I^}HIi?`ZV4qx7Cn>aMR)z)+9d#kPCFzcxDpN7laiu_uu#4b^m?lHvN??zxO(? u{W{rx!=7lHh7{Gx36In06;o^tznLqhelF{r5}E)`Vh(Ho literal 0 HcmV?d00001 diff --git a/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-ThinSlow-light-chromium-linux.png b/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-ThinSlow-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..e91c5e1b2e842fb35aa4c9aec2f5d288ee1ca1f8 GIT binary patch literal 324 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1SD0tpLGH$#^NA%Cx&(BWL^R}|2$nBLoyoQ z-nhuwY#`G5@C5^(!W~zZ=LU~zytWDLDdh2#|8?#9w>!=c|1cl?pcVu(^7EF< zr+8_mwe2`!eZ@8*ZRwOLLcjL2?CDJAxv@N;f$^V&tF+QLMq}%~#qWQoMxOip=k23H z>6->T6H2A`MZLB;f7vAV`q$4#AMQU;d;j$=yYtMq1U4{y`4Zu9;ERL9nJ*d#s(&>! z3w$uK>U+HJ{fn24%P(&D;&u$#X~?eqU44Mts!Hwqp^oj6z>r|@boFyt=akR{08+J$ A!vFvP literal 0 HcmV?d00001 diff --git a/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-ThinSlow-light-webkit-linux.png b/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-ThinSlow-light-webkit-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..a90dc6bf11e224884c688029a6263d6575c6280b GIT binary patch literal 682 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1SEZ8zRdwrY)RhkE)4%caKYZ?lNlJ8;yqm) zLn`LHy|Z!cqX2={hs8HVYcFt|*y6w&lE~ih;=mV&CwUWOgdVks)xTJJ{%hvV z&+cVr^UnL_IIi4!s!;a@@xoclmSuWre#xj0m0<8(I^}HIi?`ZV4qx7Cn>aMR)z)+9d#kPCFzcxDpN7laiu_uu#4b^m?lHvN??zxO(? u{W{rx!=7lHh7{Gx36In06;o^tznLqhelF{r5}E)`Vh(Ho literal 0 HcmV?d00001 diff --git a/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Vertical-light-chromium-linux.png b/src/components/ToggleArrow/__snapshots__/ToggleArrow.visual.test.tsx-snapshots/ToggleArrow-render-Vertical-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..e3d8120dc365a41308abc4c7c1eba89bbac94eee GIT binary patch literal 548 zcmeAS@N?(olHy`uVBq!ia0vp^ZXnFT1SJ3YlwJl>jKx9jP7LeL$-D%z?|Hg7hGaCp zy}7aLkb%U3j~Qz>`(M0z)K}vw-@fJtizai;?b>|QcZsvE=)y(L@y?D1Z|)Z|f9ui7IZ5=I&N{JnKmD-1_VL z-k*-Xz3um3yDMH=4bLsk7auR|JHA*(ve#|%%{RHXigr%%^mPN}p-{`5z%A}sD z4>UWENL1U+pS29g><>x%QqAe?a!6pJfr|={AXesI=S$+&X8A{^rcBxljCKZ3S3j3^ HP6Y&>+$ey>~4o+Kfs zkPn=9p3gaHDf;9P&q@8ycO4F2E3x7|z1x2OU&c4TU6@pa6ecosvUsRCC@~6gPVi_L z2%#y~mu}yVW{h4FdCg<;$tN#fy!i5E%TC=@t6qKot*@_tHg{v=vYp?4{krx3`|i7W z+i%-iT4pA7Z{ECl%fEvM4}Sh!EF7J)#K-?qijk$A-M(GBy!>D9y7!|JsQ=F&8{2*R z_SxCkocU(+wBw7T#@5K?l?y}8`Q22k)tqu`%H{NhA=`kQyZ7(kzjH@tSJd^d2?i1A ze-9>nSQ_x^+qZ8oUuMqzI$OhfN!jk&%F3NUOJA@aepvAIb4cjb0*jcEtyi;RV`8@4 zetT6cf8Co2N=fDA!k-I4dt z?R9l*ZK{|Q1Z43GF2AF5&(o{aYVOnhhtEx~vux#J71#V%`K}Ns@oLBHtu^l!0$CqC zy>w?*f6+AO?ib;H7RMNz7sl!F@#IRCg&Gg$nZ*B^_xsd&v24C=|D}OBhr!d;&t;ucLK6VNQ*2rQ literal 0 HcmV?d00001 From 98da325f97ba12ee3b0b2a659ece01938ea2b49a Mon Sep 17 00:00:00 2001 From: Petr Krotov Date: Sun, 16 Nov 2025 13:43:54 +0300 Subject: [PATCH 3/3] chore(ToggleArrow): update arg types after code review --- .../__stories__/ToggleArrow.stories.tsx | 39 ++++++++----------- .../__tests__/ToggleArrow.visual.test.tsx | 15 ++++--- .../ToggleArrow/__tests__/helpers.ts | 16 -------- 3 files changed, 26 insertions(+), 44 deletions(-) delete mode 100644 src/components/ToggleArrow/__tests__/helpers.ts diff --git a/src/components/ToggleArrow/__stories__/ToggleArrow.stories.tsx b/src/components/ToggleArrow/__stories__/ToggleArrow.stories.tsx index 456bca22c..6abcffd09 100644 --- a/src/components/ToggleArrow/__stories__/ToggleArrow.stories.tsx +++ b/src/components/ToggleArrow/__stories__/ToggleArrow.stories.tsx @@ -1,5 +1,7 @@ -import {Meta, StoryFn} from '@storybook/react'; +import {Meta, StoryFn, StoryObj} from '@storybook/react'; +import {blockTransform} from '../../../../.storybook/utils'; +import {CustomBlock} from '../../../models'; import ToggleArrow, {ToggleArrowProps} from '../ToggleArrow'; import data from './data.json'; @@ -11,29 +13,22 @@ export default { layout: 'centered', controls: {expanded: true}, }, - argTypes: { - type: {control: 'inline-radio', options: ['horizontal', 'vertical']}, - iconType: {control: 'inline-radio', options: ['default', 'navigation']}, - open: {control: 'boolean'}, - thin: {control: 'boolean'}, - slow: {control: 'boolean'}, - size: {control: 'number'}, - className: {control: 'text'}, - }, -} as Meta; +} as Meta; -const Template: StoryFn = (args) => ; +const Template: StoryFn = (args) => ( + +); -export const Default = Template.bind({}); -export const Horizontal = Template.bind({}); -export const Vertical = Template.bind({}); -export const OpenHorizontal = Template.bind({}); -export const OpenVertical = Template.bind({}); -export const Thin = Template.bind({}); -export const Slow = Template.bind({}); -export const ThinSlow = Template.bind({}); -export const NavigationIcon = Template.bind({}); -export const AllVariants = Template.bind({}); +export const Default: StoryObj = Template.bind({}); +export const Horizontal: StoryObj = Template.bind({}); +export const Vertical: StoryObj = Template.bind({}); +export const OpenHorizontal: StoryObj = Template.bind({}); +export const OpenVertical: StoryObj = Template.bind({}); +export const Thin: StoryObj = Template.bind({}); +export const Slow: StoryObj = Template.bind({}); +export const ThinSlow: StoryObj = Template.bind({}); +export const NavigationIcon: StoryObj = Template.bind({}); +export const AllVariants: StoryObj = Template.bind({}); Default.args = {type: 'horizontal', iconType: 'default', size: 24}; Horizontal.args = data.horizontal.content as ToggleArrowProps; diff --git a/src/components/ToggleArrow/__tests__/ToggleArrow.visual.test.tsx b/src/components/ToggleArrow/__tests__/ToggleArrow.visual.test.tsx index a837362a8..c6c0af77a 100644 --- a/src/components/ToggleArrow/__tests__/ToggleArrow.visual.test.tsx +++ b/src/components/ToggleArrow/__tests__/ToggleArrow.visual.test.tsx @@ -1,17 +1,20 @@ +import {composeStories} from '@storybook/react'; + import {test} from '../../../../playwright/core/index'; +import * as ToggleArrowStories from '../__stories__/ToggleArrow.stories'; -import { - AllVariants, +const { Default, Horizontal, - NavigationIcon, + Vertical, OpenHorizontal, OpenVertical, - Slow, Thin, + Slow, ThinSlow, - Vertical, -} from './helpers'; + NavigationIcon, + AllVariants, +} = composeStories(ToggleArrowStories); test.describe('ToggleArrow', () => { test('render ', async ({mount, expectScreenshot, defaultDelay}) => { diff --git a/src/components/ToggleArrow/__tests__/helpers.ts b/src/components/ToggleArrow/__tests__/helpers.ts deleted file mode 100644 index cebb469d2..000000000 --- a/src/components/ToggleArrow/__tests__/helpers.ts +++ /dev/null @@ -1,16 +0,0 @@ -import {composeStories} from '@storybook/react'; - -import * as ToggleArrowStories from '../__stories__/ToggleArrow.stories'; - -export const { - Default, - Horizontal, - Vertical, - OpenHorizontal, - OpenVertical, - Thin, - Slow, - ThinSlow, - NavigationIcon, - AllVariants, -} = composeStories(ToggleArrowStories) as Record>;