From 056f2602c2c5af2868e5d94ef3c48a4988a3161b Mon Sep 17 00:00:00 2001 From: Vadim Kudriavtsev Date: Wed, 18 Dec 2024 14:44:55 +0300 Subject: [PATCH] feat(*): Flow component --- ... -- flexhorizontalalignmentcenter.snap.png | Bin 0 -> 5724 bytes ...low -- flexhorizontalalignmentend.snap.png | Bin 0 -> 5675 bytes ...w -- flexhorizontalalignmentstart.snap.png | Bin 0 -> 5674 bytes ...- flexhorizontalarrangementcenter.snap.png | Bin 0 -> 5724 bytes ...w -- flexhorizontalarrangementend.snap.png | Bin 0 -> 5685 bytes ...xhorizontalarrangementspaceAround.snap.png | Bin 0 -> 5730 bytes ...horizontalarrangementspaceBetween.snap.png | Bin 0 -> 5713 bytes ...-- flexhorizontalarrangementstart.snap.png | Bin 0 -> 5710 bytes ...sma-b2c Flow -- flexhorizontalgap.snap.png | Bin 0 -> 5749 bytes ...ow -- flexverticalalignmentcenter.snap.png | Bin 0 -> 5742 bytes ... Flow -- flexverticalalignmentend.snap.png | Bin 0 -> 5638 bytes ...low -- flexverticalalignmentstart.snap.png | Bin 0 -> 5681 bytes ... -- flexverticalarrangementcenter.snap.png | Bin 0 -> 5742 bytes ...low -- flexverticalarrangementend.snap.png | Bin 0 -> 5697 bytes ...lexverticalarrangementspaceAround.snap.png | Bin 0 -> 5708 bytes ...exverticalarrangementspaceBetween.snap.png | Bin 0 -> 5713 bytes ...w -- flexverticalarrangementstart.snap.png | Bin 0 -> 5710 bytes ...lasma-b2c Flow -- flexverticalgap.snap.png | Bin 0 -> 5734 bytes ... -- gridhorizontalalignmentcenter.snap.png | Bin 0 -> 5550 bytes ...low -- gridhorizontalalignmentend.snap.png | Bin 0 -> 5557 bytes ...w -- gridhorizontalalignmentstart.snap.png | Bin 0 -> 5531 bytes ...- gridhorizontalarrangementcenter.snap.png | Bin 0 -> 5550 bytes ...w -- gridhorizontalarrangementend.snap.png | Bin 0 -> 5073 bytes ...dhorizontalarrangementspaceAround.snap.png | Bin 0 -> 4964 bytes ...horizontalarrangementspaceBetween.snap.png | Bin 0 -> 5332 bytes ...-- gridhorizontalarrangementstart.snap.png | Bin 0 -> 5544 bytes ...sma-b2c Flow -- gridhorizontalgap.snap.png | Bin 0 -> 4844 bytes ...ow -- gridverticalalignmentcenter.snap.png | Bin 0 -> 5686 bytes ... Flow -- gridverticalalignmentend.snap.png | Bin 0 -> 5689 bytes ...low -- gridverticalalignmentstart.snap.png | Bin 0 -> 5710 bytes ... -- gridverticalarrangementcenter.snap.png | Bin 0 -> 5686 bytes ...low -- gridverticalarrangementend.snap.png | Bin 0 -> 5705 bytes ...ridverticalarrangementspaceAround.snap.png | Bin 0 -> 5675 bytes ...idverticalarrangementspaceBetween.snap.png | Bin 0 -> 5675 bytes ...w -- gridverticalarrangementstart.snap.png | Bin 0 -> 5700 bytes ...lasma-b2c Flow -- gridverticalgap.snap.png | Bin 0 -> 5688 bytes ... -- flexhorizontalalignmentcenter.snap.png | Bin 0 -> 5521 bytes ...low -- flexhorizontalalignmentend.snap.png | Bin 0 -> 5483 bytes ...w -- flexhorizontalalignmentstart.snap.png | Bin 0 -> 5509 bytes ...- flexhorizontalarrangementcenter.snap.png | Bin 0 -> 5521 bytes ...w -- flexhorizontalarrangementend.snap.png | Bin 0 -> 5478 bytes ...xhorizontalarrangementspaceAround.snap.png | Bin 0 -> 5524 bytes ...horizontalarrangementspaceBetween.snap.png | Bin 0 -> 5527 bytes ...-- flexhorizontalarrangementstart.snap.png | Bin 0 -> 5497 bytes ...sma-web Flow -- flexhorizontalgap.snap.png | Bin 0 -> 5570 bytes ...ow -- flexverticalalignmentcenter.snap.png | Bin 0 -> 5540 bytes ... Flow -- flexverticalalignmentend.snap.png | Bin 0 -> 5431 bytes ...low -- flexverticalalignmentstart.snap.png | Bin 0 -> 5466 bytes ... -- flexverticalarrangementcenter.snap.png | Bin 0 -> 5540 bytes ...low -- flexverticalarrangementend.snap.png | Bin 0 -> 5500 bytes ...lexverticalarrangementspaceAround.snap.png | Bin 0 -> 5515 bytes ...exverticalarrangementspaceBetween.snap.png | Bin 0 -> 5507 bytes ...w -- flexverticalarrangementstart.snap.png | Bin 0 -> 5510 bytes ...lasma-web Flow -- flexverticalgap.snap.png | Bin 0 -> 5532 bytes ... -- gridhorizontalalignmentcenter.snap.png | Bin 0 -> 5375 bytes ...low -- gridhorizontalalignmentend.snap.png | Bin 0 -> 5353 bytes ...w -- gridhorizontalalignmentstart.snap.png | Bin 0 -> 5374 bytes ...- gridhorizontalarrangementcenter.snap.png | Bin 0 -> 5375 bytes ...w -- gridhorizontalarrangementend.snap.png | Bin 0 -> 4855 bytes ...dhorizontalarrangementspaceAround.snap.png | Bin 0 -> 4833 bytes ...horizontalarrangementspaceBetween.snap.png | Bin 0 -> 5157 bytes ...-- gridhorizontalarrangementstart.snap.png | Bin 0 -> 5363 bytes ...sma-web Flow -- gridhorizontalgap.snap.png | Bin 0 -> 4607 bytes ...ow -- gridverticalalignmentcenter.snap.png | Bin 0 -> 5499 bytes ... Flow -- gridverticalalignmentend.snap.png | Bin 0 -> 5488 bytes ...low -- gridverticalalignmentstart.snap.png | Bin 0 -> 5506 bytes ... -- gridverticalarrangementcenter.snap.png | Bin 0 -> 5499 bytes ...low -- gridverticalarrangementend.snap.png | Bin 0 -> 5494 bytes ...ridverticalarrangementspaceAround.snap.png | Bin 0 -> 5468 bytes ...idverticalarrangementspaceBetween.snap.png | Bin 0 -> 5468 bytes ...w -- gridverticalarrangementstart.snap.png | Bin 0 -> 5515 bytes ...lasma-web Flow -- gridverticalgap.snap.png | Bin 0 -> 5497 bytes packages/plasma-asdk/api/plasma-asdk.api.md | 4 +- packages/plasma-b2c/api/plasma-b2c.api.md | 8 +- .../components/Flow/Flow.component-test.tsx | 115 ++++++++++++ .../src/components/Flow/Flow.config.ts | 4 + .../src/components/Flow/Flow.stories.tsx | 114 ++++++++++++ .../plasma-b2c/src/components/Flow/Flow.ts | 7 + .../plasma-b2c/src/components/Flow/index.ts | 1 + packages/plasma-b2c/src/index.ts | 1 + packages/plasma-giga/api/plasma-giga.api.md | 4 + .../src/components/Flow/Flow.config.ts | 4 + .../src/components/Flow/Flow.stories.tsx | 114 ++++++++++++ .../plasma-giga/src/components/Flow/Flow.ts | 7 + .../plasma-giga/src/components/Flow/index.ts | 1 + packages/plasma-giga/src/index.ts | 1 + .../src/components/Flow/Flow.styles.ts | 135 +++++++++++++++ .../src/components/Flow/Flow.tsx | 70 ++++++++ .../src/components/Flow/Flow.types.ts | 35 ++++ .../src/components/Flow/index.ts | 2 + .../plasma_b2c/components/Flow/Flow.config.ts | 4 + .../components/Flow/Flow.stories.tsx | 115 ++++++++++++ .../plasma_b2c/components/Flow/Flow.ts | 8 + .../plasma_web/components/Flow/Flow.config.ts | 4 + .../components/Flow/Flow.stories.tsx | 115 ++++++++++++ .../plasma_web/components/Flow/Flow.ts | 8 + packages/plasma-new-hope/src/index.ts | 2 + packages/plasma-web/api/plasma-web.api.md | 8 +- .../components/Flow/Flow.component-test.tsx | 115 ++++++++++++ .../src/components/Flow/Flow.stories.tsx | 114 ++++++++++++ .../plasma-web/src/components/Flow/Flow.ts | 5 + .../plasma-web/src/components/Flow/index.ts | 1 + packages/plasma-web/src/index.ts | 1 + packages/sdds-cs/api/sdds-cs.api.md | 38 ++-- .../src/components/Flow/Flow.config.ts | 4 + .../src/components/Flow/Flow.stories.tsx | 114 ++++++++++++ packages/sdds-cs/src/components/Flow/Flow.ts | 7 + packages/sdds-cs/src/components/Flow/index.ts | 1 + packages/sdds-cs/src/index.ts | 1 + packages/sdds-dfa/api/sdds-dfa.api.md | 38 ++-- .../src/components/Flow/Flow.config.ts | 4 + .../src/components/Flow/Flow.stories.tsx | 114 ++++++++++++ packages/sdds-dfa/src/components/Flow/Flow.ts | 7 + .../sdds-dfa/src/components/Flow/index.ts | 1 + packages/sdds-dfa/src/index.ts | 1 + .../sdds-finportal/api/sdds-finportal.api.md | 38 ++-- .../src/components/Flow/Flow.config.ts | 4 + .../src/components/Flow/Flow.stories.tsx | 114 ++++++++++++ .../src/components/Flow/Flow.ts | 7 + .../src/components/Flow/index.ts | 1 + packages/sdds-finportal/src/index.ts | 1 + packages/sdds-insol/api/sdds-insol.api.md | 40 +++-- .../src/components/Flow/Flow.config.ts | 4 + .../src/components/Flow/Flow.stories.tsx | 114 ++++++++++++ .../sdds-insol/src/components/Flow/Flow.ts | 7 + .../sdds-insol/src/components/Flow/index.ts | 1 + packages/sdds-insol/src/index.ts | 1 + packages/sdds-serv/api/sdds-serv.api.md | 40 +++-- .../src/components/Flow/Flow.config.ts | 4 + .../src/components/Flow/Flow.stories.tsx | 114 ++++++++++++ .../sdds-serv/src/components/Flow/Flow.ts | 7 + .../sdds-serv/src/components/Flow/index.ts | 1 + packages/sdds-serv/src/index.ts | 1 + .../plasma-b2c-docs/docs/components/Flow.mdx | 163 ++++++++++++++++++ .../plasma-giga-docs/docs/components/Flow.mdx | 163 ++++++++++++++++++ .../plasma-web-docs/docs/components/Chip.mdx | 2 +- .../plasma-web-docs/docs/components/Flow.mdx | 163 ++++++++++++++++++ website/sdds-cs-docs/docs/components/Flow.mdx | 163 ++++++++++++++++++ .../sdds-dfa-docs/docs/components/Flow.mdx | 163 ++++++++++++++++++ .../sdds-insol-docs/docs/components/Flow.mdx | 163 ++++++++++++++++++ 140 files changed, 2842 insertions(+), 94 deletions(-) create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalalignmentcenter.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalalignmentend.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalalignmentstart.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalarrangementcenter.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalarrangementend.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalarrangementspaceAround.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalarrangementspaceBetween.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalarrangementstart.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalgap.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexverticalalignmentcenter.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexverticalalignmentend.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexverticalalignmentstart.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexverticalarrangementcenter.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexverticalarrangementend.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexverticalarrangementspaceAround.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexverticalarrangementspaceBetween.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexverticalarrangementstart.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexverticalgap.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalalignmentcenter.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalalignmentend.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalalignmentstart.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalarrangementcenter.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalarrangementend.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalarrangementspaceAround.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalarrangementspaceBetween.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalarrangementstart.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalgap.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalalignmentcenter.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalalignmentend.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalalignmentstart.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalarrangementcenter.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalarrangementend.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalarrangementspaceAround.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalarrangementspaceBetween.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalarrangementstart.snap.png create mode 100644 cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalgap.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalalignmentcenter.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalalignmentend.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalalignmentstart.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalarrangementcenter.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalarrangementend.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalarrangementspaceAround.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalarrangementspaceBetween.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalarrangementstart.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalgap.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexverticalalignmentcenter.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexverticalalignmentend.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexverticalalignmentstart.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexverticalarrangementcenter.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexverticalarrangementend.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexverticalarrangementspaceAround.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexverticalarrangementspaceBetween.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexverticalarrangementstart.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexverticalgap.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalalignmentcenter.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalalignmentend.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalalignmentstart.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalarrangementcenter.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalarrangementend.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalarrangementspaceAround.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalarrangementspaceBetween.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalarrangementstart.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalgap.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalalignmentcenter.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalalignmentend.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalalignmentstart.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalarrangementcenter.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalarrangementend.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalarrangementspaceAround.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalarrangementspaceBetween.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalarrangementstart.snap.png create mode 100644 cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalgap.snap.png create mode 100644 packages/plasma-b2c/src/components/Flow/Flow.component-test.tsx create mode 100644 packages/plasma-b2c/src/components/Flow/Flow.config.ts create mode 100644 packages/plasma-b2c/src/components/Flow/Flow.stories.tsx create mode 100644 packages/plasma-b2c/src/components/Flow/Flow.ts create mode 100644 packages/plasma-b2c/src/components/Flow/index.ts create mode 100644 packages/plasma-giga/src/components/Flow/Flow.config.ts create mode 100644 packages/plasma-giga/src/components/Flow/Flow.stories.tsx create mode 100644 packages/plasma-giga/src/components/Flow/Flow.ts create mode 100644 packages/plasma-giga/src/components/Flow/index.ts create mode 100644 packages/plasma-new-hope/src/components/Flow/Flow.styles.ts create mode 100644 packages/plasma-new-hope/src/components/Flow/Flow.tsx create mode 100644 packages/plasma-new-hope/src/components/Flow/Flow.types.ts create mode 100644 packages/plasma-new-hope/src/components/Flow/index.ts create mode 100644 packages/plasma-new-hope/src/examples/plasma_b2c/components/Flow/Flow.config.ts create mode 100644 packages/plasma-new-hope/src/examples/plasma_b2c/components/Flow/Flow.stories.tsx create mode 100644 packages/plasma-new-hope/src/examples/plasma_b2c/components/Flow/Flow.ts create mode 100644 packages/plasma-new-hope/src/examples/plasma_web/components/Flow/Flow.config.ts create mode 100644 packages/plasma-new-hope/src/examples/plasma_web/components/Flow/Flow.stories.tsx create mode 100644 packages/plasma-new-hope/src/examples/plasma_web/components/Flow/Flow.ts create mode 100644 packages/plasma-web/src/components/Flow/Flow.component-test.tsx create mode 100644 packages/plasma-web/src/components/Flow/Flow.stories.tsx create mode 100644 packages/plasma-web/src/components/Flow/Flow.ts create mode 100644 packages/plasma-web/src/components/Flow/index.ts create mode 100644 packages/sdds-cs/src/components/Flow/Flow.config.ts create mode 100644 packages/sdds-cs/src/components/Flow/Flow.stories.tsx create mode 100644 packages/sdds-cs/src/components/Flow/Flow.ts create mode 100644 packages/sdds-cs/src/components/Flow/index.ts create mode 100644 packages/sdds-dfa/src/components/Flow/Flow.config.ts create mode 100644 packages/sdds-dfa/src/components/Flow/Flow.stories.tsx create mode 100644 packages/sdds-dfa/src/components/Flow/Flow.ts create mode 100644 packages/sdds-dfa/src/components/Flow/index.ts create mode 100644 packages/sdds-finportal/src/components/Flow/Flow.config.ts create mode 100644 packages/sdds-finportal/src/components/Flow/Flow.stories.tsx create mode 100644 packages/sdds-finportal/src/components/Flow/Flow.ts create mode 100644 packages/sdds-finportal/src/components/Flow/index.ts create mode 100644 packages/sdds-insol/src/components/Flow/Flow.config.ts create mode 100644 packages/sdds-insol/src/components/Flow/Flow.stories.tsx create mode 100644 packages/sdds-insol/src/components/Flow/Flow.ts create mode 100644 packages/sdds-insol/src/components/Flow/index.ts create mode 100644 packages/sdds-serv/src/components/Flow/Flow.config.ts create mode 100644 packages/sdds-serv/src/components/Flow/Flow.stories.tsx create mode 100644 packages/sdds-serv/src/components/Flow/Flow.ts create mode 100644 packages/sdds-serv/src/components/Flow/index.ts create mode 100644 website/plasma-b2c-docs/docs/components/Flow.mdx create mode 100644 website/plasma-giga-docs/docs/components/Flow.mdx create mode 100644 website/plasma-web-docs/docs/components/Flow.mdx create mode 100644 website/sdds-cs-docs/docs/components/Flow.mdx create mode 100644 website/sdds-dfa-docs/docs/components/Flow.mdx create mode 100644 website/sdds-insol-docs/docs/components/Flow.mdx diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalalignmentcenter.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalalignmentcenter.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..049eaf7399897771368758c10d63a26148ba479b GIT binary patch literal 5724 zcmeI0YgkiPy2rPmpdeDqASy`O;uwn{R>W`*Q?+1GXcb8*0lWZV6bK}83Ac!jGH4MI zxk&)2BM1n2fNBhcB*>_Q0HIQd;TEDK5CIbtAcR}a+6>Oq_IS>>^PKt64{PVyYpuQZ zds*xK|8~;9@p3oN+o}gakilV(gU29f)fC*;>VO_@ukb1aZL&Cg@Gm~`t0tQRZkV4> zwvo%0W;lsj>puRZ@zeCd)$6~na72El$2r*)^<(taC-%5E_iXKB%Ffz!8h85O8C~zn z^!iK_Uwdq(WNG>KTi~yEZwPr*e6y?JVC;d5q*e7dRfEYh4%v=oYyz8sCaaX{_0BAr zn=G@pdL7hNqX%^{{;!+YomCd5Lpg=Cf#Oop^p?P;Pd)RhJ-FA+TyHfcKC6r4eP>Rd z8k*Q@YQPqZt)6?yQ0o)NBT9H_v=m1>`+W4D!1UIKrYLb=Mq!;e*IQDm%Pg9IM7AC* zkV2GnuRGoWO|fTO=jr(1o-U828$H7(T@|&wks?06lg3nEc1FEBpTcjw5+{~e({N$& z$yYG=))yhWw1~}FEot!kXWnk%zRnyf3^;RFG##Ur{N{=&Ed;D3xoS6F!!jbN znmadCRNeo!6vPv^G&6;`G*iQB zd;6|PWNbWk0P$FDR8iS(cOu6yW$d_vxJfo2=4+6#I==cLFe*`~`dR)xn0Br=vK?!; z&-tbSpMmtJ4Q?Esju?z}?|sm?oAIMoav1PeQdxE7E5%YFy0}tLK38c;TacEdVSMfw zS_cviODe@&OlU`6#;T#0U2>23Lud=jQT;IQ;&D=L2+J;=t2pVx#ndk(3Y(|F81zY~%k^&U@ zRAkenQZ4WGF4xg*L6m{{BOtki$!A9e1TIq9r7i4C?q}t`Z9fm$Cl^g+Rq-R+acEV> zgRNWF5#0?oNGuTZM}|m?lBDs%pjMC^-3#5vr531x$JVgb13!fh#?VF2B32DgotXRQ zN*2}<`+FneM&3L$)n-d8rqT@u7SerAoIabSPW&7-adgIdr&D%_0bp4@zTiM}-HSubPzq&P%7W527a!QL3J z@uL_a6CLhZ3e?x`lHT#VPrYprx#Wd%UbVf;uJ_wRRg80_6SKU#1qISIb4QU_A8l=I zdT8*sxz>}xVt+}9Fts8|WbKC~y+L0O)ihU7_SQvyJETGH?m)Z7?tGpZ*D|orK7T>> z+)#Y0xq0LgDj>Hq^@pW-ksGTb>gPqmLj2OSFtBYR{IN%1e6%CWbzf1Q3yW-7#-y1Imp)>l^8Z?>2nsWA_{ z@#ky0AlV$Vq-aO%<|>SJtHN^>UT?H#$BY>-8;v%T6lWuGM8Q?B$c9s-GF*am{f6MP zXZNEQ^EmD8Q(B8yu9yaI>&1Uw~%Kl_MndbAZyJe&lW*ZbC${f;1_n} zv1Z>n%P%$V?Vr3tKlP};siMKxPM{EhYYSY63N{Nj4rc&E*HZ7hA#PKg^XX^7d~$Py5==3x{Zzei!MpP}3$qX!xf99deH1ll-;~<<_^@}1}8NbkgT>$Iq)Gz7bnztCmh!MK&Xd#{}e`D}_G5+=I zA>3V~Fg8dVtjrK~x!S$2djFrlM$qo7AJ7|q+=#q%V$e1hFok0Ft}2xOGAzE@3wnG< z(h-#JkDpI+WlVQhG&jp7AmUl)P?2qbDMGl`CG7_clblo$n(rHIyG1m|Rl^tQ36sx~ zW{ASp%F?W;(6do{5bBpWMdvtb)L*#pWpQD=<91_ccfM)lK<#R65va}b z-BZuq>qdtZ;$7fr=r#s4{$a!xfxKpbA)Z-pK;?n-!Te#b`2a{k5z>DcwimMY(1vEz zN%7<5$1hzHJ^B8B#ueQQ`_B`ye$7#jXFudOG{tH=6x))~53|cu-U=S+LlO6}2gj+T zxJQwV7E|Rg^7H^Dy|9F#|J^l8i9B|q6n)}^>ujm_n&rOU2ZNjE`T=f0W8|D`Fr$p& zF@S9@Eb%#qev0S(xs+uc#N5j|7u?cFQ0DgA?qj&Z)kRuoyy~V!nqi2nxE9X!b3_vg zoCIx?uaWY^+rQ-sZALGEJeVoyv9HU*>EdkCSSo&$IT_>`7wQ2S+xPMC)PsPyfT4M2rcNhKkCFaw=4uaLVXi3G6T?Rt8cAk( zr52^2vdx-2Hwv$TKMf;RXD9G^IH{6dxOrjMovK^$RaZ z1;qs&Kd#9sUwR!jgP`awRvUFzph@#Dto)oeKmG_-Ct{-aNKaXLVyf-*kP3UdC9RP( zg-au}8RzkMuMQc{1tBT6=X`D2J>45p^~J3}M{Z#3*=BE2^EfHcml={$ygB((8z=b_ zpRfa$iKnGEn;$d~Ql6!dtRU;H4QKzd;iwlbp~0lDdmS#~omhY!$++A`#7J=;`?u66AmNwH~GMz;-pcAg*G&G2^~cbnieBG z>&6AI9Y}=z+S;l5uewH#m@i37&*Ksu#MXHoT;2Tvx56B)JR`nK^<&dp{uO0ndgi@&(-?dOsUP*lRiZ1@=2xU;SH zb-lX7)ArZRLHx2-VCK?mK(Wy`@%6>_ak#nG+uCz>jpF$A&$V%fEqwS zgdSt1ZS83M7`X^KItSLGFKy!jR77p@&^h;sW)7cLznqx%&K)qUU^O%M=&uxN06rU- z_Blb$M5`&5mwkCc)5yG``C1A-u^3(8!Yf%%@pR9OQPv|;nkwwUOqV3@(9p6k z$&M>5@vrWARmSLiKg)csJ6V-vr#s^fDjz?Q3Ih~AD*C-!_nh!YsVGyZuj?=(zt}NrQn>haandVy`d^h1u*9#FPSJwX z2cWDg*K4lzz03o=gxr+>YS@pmvvphOD3HKqMS?MmPD@O}d00Z&kAP)Q=%_E47RzJL z&6!AB+vB2v_pJ0Kta&d1YYBx*(@}2+;&>S1NzFm{(LFFRJu6AJq%?uVtKS*2j8dw! z*lW7SJ0zeQ$D7YK2NX=kwnz&nW0k{;aigAbL$?F*`xktX5cZq@1v(kb6=`s0sS2ED zT4!K#q4unUOrEazN74WN$Lk;W|NVphkC^-slRx&rf6gAzm`oH*#T-6w(gprCh7KR{ LI#~1N$&3F5#?Yge literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalalignmentend.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalalignmentend.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..e19a0ca11998228fc1b8cac59615ee06d6bf2848 GIT binary patch literal 5675 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 KWaWv=-~1QnAuMqK literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalalignmentstart.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalalignmentstart.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..caad1131926c9091b550aa5f6d2e0635b5cd01af GIT binary patch literal 5674 zcmeI0c~leGp2rIjX<4U-0YuUG8e95d00jiX79XfcqrquKKp>!OE(n-J!kR#BeEm`A%s1F03i^PS5Z7?-qLf-z@#2Sw> za6;O__~W&w9?m5kXxeG^@jkxn+wzD1F;j5q=bQImFFt1N4GNn%-OswUBdEdxITdkE z;fC>Cir%HLlS=OMv-a<3)$jSt;S50YW&xT(iS0@6+ zKG)h%>8Sw}d20eik-t|6%jGqyyzV+ryNtAVD>~k-f1+fmCk~{(N>mHv5f|r}ro==@ zi>b!A^%Clhd5hjai0JIelLJARl?14#T|w4fJIvu|VR8_dYa<>dzk(XT$FmhDg!MAZa~!i?De z_2=x+kqpCuSW6*O&_7bQsXR@mP2SZ~HS9TKfj6-T-n?=x?C^`XvKmt?LV7uSECMLE zAoN&a%u(zOseKcgH1^tRS}(hbnUjkDs#m2Hy~n=@n@;fRn1)hI{6w_|t)0pYaodSc{iHc_p0sYk}z9x{V**G(E1IA(UBJmeek`*Fq>Sn9Do7n;h|8k~X zjieSEI9u=8*;#*U*su{Z|E7{WM;L6H&w`qHHZUJK4}?$?D6Guq!y!BQ@9RUFzXz-I zEpfo9FoIWye^jBQ?CHu`7sejYcXidutLRQ~<`$D^N_x=GC^<2D}dLdAeOq z;QX6*C%q?r)0l+Xvnk0BO8az__)8~Gc6AD@rZx1Q%*yL~o0w!3pGYE|-MWx(X>mUJ z=5w4&kS4S{9lB6SwXeVYx)&f1-q$?zN?-sS`%;$g3K)B+{bc-KShe9-fziyFJLqe^ zzWcLN3~5UNgvyxl$8*uw4g&liT`jpd^GK+4J(LlEvjg}Qm`+&#?23uCHehM^yV4Fr zsH&+=)Yb@U{ci?@9d5*6ZqnhQhc}2;Y4Qx}4gj}@5Qezb+-kGhrw6;*m8z})AXAip zw=J@Q03w{+T4#SQz#};y?}?zu^CHf2aJZx^jY?bDwpo^Lcf>Y!KiD{x(=L#1uwnAt zp;6x@7j+2L>GtiOl>x7uiuk#;#o}Y+=@OSY;z*`uC|mcVZR4RstTtFsUxkGsT{D}I zJ+2=GD>oQi>C=mx%qCqL%geFJI@iRUXg4J_PNgJm+x+Fde%V3n4n$twNG@q!EHHqJ zgnA+_1i>xDTN3nzgl>pfqTtblISlpMAm;TbtEwD8lUk3#E0*siE|B%mXwyrVta0K~ z`@}2@RK4vcH5eBeX8zQs5r2??;5;5fjFyx-8-!kjWfV&0t`tFB*MF77ri&(5jT7$9 zS6SN?K3#R;1n1*Ij7aF#0+YiJrDkkp<&g>tRgSvU*K)uo`V#SDEYxMe`r9eTOgj{h z*$}jJukg;@tJhFLZ5#8|r4X+dE$Iv57$Pq4AT*f#5uUyw75TPpy0~z~f*mB$%$SPG z_H{&Q>T;AoH1`yq6Ww;pbF!KF;xHB4+$dZa7UX({{#b2Mh~sC~Ih)wsgz5)I#ixV4 z#O_L+?9@!ET}p9?$MrcC<`Q7Uc^|3QzSs%t#y|m0wxDe-LHzZbTT76>(2kh6?<4Wv z;@)X(zuBz7s$q)XxZ|tNI*e1myT|c1*kAI`MYSRkyLWxFOhByv_Uqb%)5*MV3eH?N z_I@;`nY7gXz+rkN>eATm-4&HO-j5*gaLcDHk+k=^wjXGwib3+5Wg4UK=Xk+;sJB&) zBOdcZE7BMmtdF2_JI4@Jjn_^Da-*hI)cgYj?by=n=`V`X0EJJ;PBPxzyT*7h`6)?@ zli}CZ9Jz4T0&3IcLgjWqPAgt~xAS5DGp(T43Q4HN6AqEZ<+fc*Q>khSMeJMKCZgH! zU2$2iK-}d2s>HRKf|72h>~9u;2g0(3O-$* zDHQtj{5C-cjO(LOZjwca#HhtxVf`)m7LQ-TT^4$s1OjHvV3RJ>K zv~XVZ%u{L!2Kko>#~`xV(9jx-)_PptLx2T@Pe#<^H_?&HX}pO%nuW}slB-w`11O2| z${k}4iXT3|aCylg#S|M;s7K z&ljoBvn_H%L!_6r@|qXcVu(X<%{aG;ZLu?~=1|6j2E51q$k9eq_U7uqHvYBqMJ_9U zE8rF+?QaAOiF13RG37@x?ILZ?7E+$1#^?_Ox4~oz{X0YD_OzyQixumGK%WE>H+?k*pqId-L;%oV|CbnbbBQIV*++!$Pm)o zJ+=OIa1JD@@1?SA#|N8(Y}DZqLEzX-aFTCCI94&2ij$M87*jK<9`!MnEieBONIH{l zy;uA@k1z247w|#8b-U-{Cvaz0UrjeU|mMu%|{^8U$bkk`9lk$k6PyJf%9ux=6h+P-fVbgp^I%+y3FkH zt6V(6RnJcj_mv-TJTNDJSn^%7K9*A=v+pkWVkyW1%GIESeddSIW)!+@iQ~fIo=d%3 zf_mWn1s0Sy187Z$Q2qVGs9qT!$nN3yR(fMkur`T8ZpO1JRu=fGvE}C;*b`MvQJ!mc zy|9;C{9unC0-3?9DcsN8Yqctv8SWhC76fudEyy1p_(5wDNEc&N8CS@1PFcYcS<&-_ zB^CDgiV81jTk1qfg%W?}yld6Q6FAMuRg+%ug(YPCkbAc(9ess1lu}II;)bv&kQ?4l ztK2mW^~XRD5DFYXesI7y`};#3lC%^pZL^b;1FpRL6gCNxgw`Vjy;wlUJ4}VjEH-TY zLZ!P7a*yoV>8tehkEI*wA~Ou#)Vbs)A>M|dp+6}Pg%SW--VhoJXGhx@n^_Mlzu;rG zna%RkLWogO=70Fr0zte@5;`EM=cnmi>cO=$kL!G+aJ;F*Z4-*z;B*aU7n*^-| z%WssmIj#9d-DJts*;UD><8gOOx0#g>%$8cSDSu{&QRW+JRDWivvpm#Bll}`LXuot` zot^W}Sxb>#4_1eSxvJnEVNmd&q4?R_0zAuiw9dRf9FJBwQ*6Dd3iy|(@O{2+G{ z#o-w-YW$e~`*kYg#k1tSy%Kp-IV~c>@`k*8&oHYAnhMr@G2peLp zTXTax-SdOpyle-A8J)K@)b=sU*uAS;c5fWIR0Bcr{9r`u{yvE$p>a8PS({bLsL|Y9 z8!`N;JWySSur!oL4;0&&;|@GkQ8_TsD(n=m)i^|=*r$=|Wlz=pU*FG^L$*#&%X`#Z z4j8TbY3!x0t$ATkVLpY#pmD%zFU_IRu<5CHB3;-JZMH+^GYAHFj34+(0e2f*(ZQdf zN3>rr@6_p^{hr+-ET3ayzpK_(hrh5zlT781gz>Hi6U7_6Q_4FO(+{zmp!wDN=>6bG ztqiDe&m2m$mp*F`eZkXqnaIcDjQ| z^F!(2>bAAzQaq&wvC5HcjwV=Lg14Zz9%<7v^k}P0Psa(dbcRCcl>g$V-aZC3Z~(8{ zTCFFlElm z7$hgy)xi4fR9s|@NPaYX>z*xho^ru57ezL8cmrUW+zSi;N}v*xujYJg zj{(;m1V{#M{dObQvmu~uSe5%BrXfF?*JfMTxKaj^r(BULVL5&W`*Q?+1GXcb8*0lWZV6bK}83Ac!jGH4MI zxk&)2BM1n2fNBhcB*>_Q0HIQd;TEDK5CIbtAcR}a+6>Oq_IS>>^PKt64{PVyYpuQZ zds*xK|8~;9@p3oN+o}gakilV(gU29f)fC*;>VO_@ukb1aZL&Cg@Gm~`t0tQRZkV4> zwvo%0W;lsj>puRZ@zeCd)$6~na72El$2r*)^<(taC-%5E_iXKB%Ffz!8h85O8C~zn z^!iK_Uwdq(WNG>KTi~yEZwPr*e6y?JVC;d5q*e7dRfEYh4%v=oYyz8sCaaX{_0BAr zn=G@pdL7hNqX%^{{;!+YomCd5Lpg=Cf#Oop^p?P;Pd)RhJ-FA+TyHfcKC6r4eP>Rd z8k*Q@YQPqZt)6?yQ0o)NBT9H_v=m1>`+W4D!1UIKrYLb=Mq!;e*IQDm%Pg9IM7AC* zkV2GnuRGoWO|fTO=jr(1o-U828$H7(T@|&wks?06lg3nEc1FEBpTcjw5+{~e({N$& z$yYG=))yhWw1~}FEot!kXWnk%zRnyf3^;RFG##Ur{N{=&Ed;D3xoS6F!!jbN znmadCRNeo!6vPv^G&6;`G*iQB zd;6|PWNbWk0P$FDR8iS(cOu6yW$d_vxJfo2=4+6#I==cLFe*`~`dR)xn0Br=vK?!; z&-tbSpMmtJ4Q?Esju?z}?|sm?oAIMoav1PeQdxE7E5%YFy0}tLK38c;TacEdVSMfw zS_cviODe@&OlU`6#;T#0U2>23Lud=jQT;IQ;&D=L2+J;=t2pVx#ndk(3Y(|F81zY~%k^&U@ zRAkenQZ4WGF4xg*L6m{{BOtki$!A9e1TIq9r7i4C?q}t`Z9fm$Cl^g+Rq-R+acEV> zgRNWF5#0?oNGuTZM}|m?lBDs%pjMC^-3#5vr531x$JVgb13!fh#?VF2B32DgotXRQ zN*2}<`+FneM&3L$)n-d8rqT@u7SerAoIabSPW&7-adgIdr&D%_0bp4@zTiM}-HSubPzq&P%7W527a!QL3J z@uL_a6CLhZ3e?x`lHT#VPrYprx#Wd%UbVf;uJ_wRRg80_6SKU#1qISIb4QU_A8l=I zdT8*sxz>}xVt+}9Fts8|WbKC~y+L0O)ihU7_SQvyJETGH?m)Z7?tGpZ*D|orK7T>> z+)#Y0xq0LgDj>Hq^@pW-ksGTb>gPqmLj2OSFtBYR{IN%1e6%CWbzf1Q3yW-7#-y1Imp)>l^8Z?>2nsWA_{ z@#ky0AlV$Vq-aO%<|>SJtHN^>UT?H#$BY>-8;v%T6lWuGM8Q?B$c9s-GF*am{f6MP zXZNEQ^EmD8Q(B8yu9yaI>&1Uw~%Kl_MndbAZyJe&lW*ZbC${f;1_n} zv1Z>n%P%$V?Vr3tKlP};siMKxPM{EhYYSY63N{Nj4rc&E*HZ7hA#PKg^XX^7d~$Py5==3x{Zzei!MpP}3$qX!xf99deH1ll-;~<<_^@}1}8NbkgT>$Iq)Gz7bnztCmh!MK&Xd#{}e`D}_G5+=I zA>3V~Fg8dVtjrK~x!S$2djFrlM$qo7AJ7|q+=#q%V$e1hFok0Ft}2xOGAzE@3wnG< z(h-#JkDpI+WlVQhG&jp7AmUl)P?2qbDMGl`CG7_clblo$n(rHIyG1m|Rl^tQ36sx~ zW{ASp%F?W;(6do{5bBpWMdvtb)L*#pWpQD=<91_ccfM)lK<#R65va}b z-BZuq>qdtZ;$7fr=r#s4{$a!xfxKpbA)Z-pK;?n-!Te#b`2a{k5z>DcwimMY(1vEz zN%7<5$1hzHJ^B8B#ueQQ`_B`ye$7#jXFudOG{tH=6x))~53|cu-U=S+LlO6}2gj+T zxJQwV7E|Rg^7H^Dy|9F#|J^l8i9B|q6n)}^>ujm_n&rOU2ZNjE`T=f0W8|D`Fr$p& zF@S9@Eb%#qev0S(xs+uc#N5j|7u?cFQ0DgA?qj&Z)kRuoyy~V!nqi2nxE9X!b3_vg zoCIx?uaWY^+rQ-sZALGEJeVoyv9HU*>EdkCSSo&$IT_>`7wQ2S+xPMC)PsPyfT4M2rcNhKkCFaw=4uaLVXi3G6T?Rt8cAk( zr52^2vdx-2Hwv$TKMf;RXD9G^IH{6dxOrjMovK^$RaZ z1;qs&Kd#9sUwR!jgP`awRvUFzph@#Dto)oeKmG_-Ct{-aNKaXLVyf-*kP3UdC9RP( zg-au}8RzkMuMQc{1tBT6=X`D2J>45p^~J3}M{Z#3*=BE2^EfHcml={$ygB((8z=b_ zpRfa$iKnGEn;$d~Ql6!dtRU;H4QKzd;iwlbp~0lDdmS#~omhY!$++A`#7J=;`?u66AmNwH~GMz;-pcAg*G&G2^~cbnieBG z>&6AI9Y}=z+S;l5uewH#m@i37&*Ksu#MXHoT;2Tvx56B)JR`nK^<&dp{uO0ndgi@&(-?dOsUP*lRiZ1@=2xU;SH zb-lX7)ArZRLHx2-VCK?mK(Wy`@%6>_ak#nG+uCz>jpF$A&$V%fEqwS zgdSt1ZS83M7`X^KItSLGFKy!jR77p@&^h;sW)7cLznqx%&K)qUU^O%M=&uxN06rU- z_Blb$M5`&5mwkCc)5yG``C1A-u^3(8!Yf%%@pR9OQPv|;nkwwUOqV3@(9p6k z$&M>5@vrWARmSLiKg)csJ6V-vr#s^fDjz?Q3Ih~AD*C-!_nh!YsVGyZuj?=(zt}NrQn>haandVy`d^h1u*9#FPSJwX z2cWDg*K4lzz03o=gxr+>YS@pmvvphOD3HKqMS?MmPD@O}d00Z&kAP)Q=%_E47RzJL z&6!AB+vB2v_pJ0Kta&d1YYBx*(@}2+;&>S1NzFm{(LFFRJu6AJq%?uVtKS*2j8dw! z*lW7SJ0zeQ$D7YK2NX=kwnz&nW0k{;aigAbL$?F*`xktX5cZq@1v(kb6=`s0sS2ED zT4!K#q4unUOrEazN74WN$Lk;W|NVphkC^-slRx&rf6gAzm`oH*#T-6w(gprCh7KR{ LI#~1N$&3F5#?Yge literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalarrangementend.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalarrangementend.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..ccf97605ae5558847e7e60300700828fe1510df9 GIT binary patch literal 5685 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 ZQO8bSDmXa<{v8Z+JLLIw=>h+5{|OV`K;!@b literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalarrangementspaceAround.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalarrangementspaceAround.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..dcd42d2000e807b1393275c8af2e6589189992cd GIT binary patch literal 5730 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 T{QKaqV#vv3?nkQ}1F!uJK(-!r literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalarrangementstart.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexhorizontalarrangementstart.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..ceee3ba6a714f74fa62579f9ba64936f01f47dcc GIT binary patch literal 5710 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexverticalalignmentstart.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexverticalalignmentstart.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..415e7a8b5740b378a339614bfe296e5be83b7adb GIT binary patch literal 5681 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 aQuG?R`_{3az`uflg9p&xmwy-V^M3-vzP>;J literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexverticalarrangementcenter.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexverticalarrangementcenter.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..83fe1c913a18055b78c044ac72ba55e6ef33edeb GIT binary patch literal 5742 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 Sd%<7B(8=SdW7S6kuKyLwW6`w$ literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexverticalarrangementspaceAround.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexverticalarrangementspaceAround.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..c3e5e703770e3de17b33829938816b4f2321537e GIT binary patch literal 5708 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexverticalarrangementstart.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flexverticalarrangementstart.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..243e85a2c53397bdc67be37b9b552f69ba857e87 GIT binary patch literal 5710 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 Rz7s>oKlAyt{#f`|{|y!j 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 X{NOJxJvRlvA4A8FqK}ju_W1svDC=J0 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalalignmentcenter.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalalignmentcenter.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..85e2769dedf06e1c03f641bebf2d31b496b0b635 GIT binary patch literal 5550 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalalignmentend.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalalignmentend.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..a51201ad0cb23e8abe6834178d93ba790fe7eb28 GIT binary patch literal 5557 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 Iga7T{0aMDoA^-pY literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalalignmentstart.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalalignmentstart.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..0fe2484a4f88173064eea5decd1890abe7bf84f3 GIT binary patch literal 5531 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalarrangementend.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalarrangementend.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..f02b9fced0d170aafdcf9853326359d870c40901 GIT binary patch literal 5073 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalarrangementspaceAround.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalarrangementspaceAround.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..db965b7c26b0b4284d6b478ba5f8993d74d0d977 GIT binary patch literal 4964 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 YoI5o`C1JpSV4?G8ZNDr17WbF`25g0p0RR91 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalgap.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridhorizontalgap.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..62b47013dd38be69d44f32b04846b32b75f95d67 GIT binary patch literal 4844 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 ZvW~i`k7ukoA+b#L8D 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalalignmentend.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalalignmentend.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..a7818e443c8bae41ee6e008e9a9ed2aa71f50774 GIT binary patch literal 5689 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 S8Q@>SkjG)np{lPVe*7=RLx=bP literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalalignmentstart.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalalignmentstart.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..292f31751cbab5ca3ff8b420264acdeeeca442ec GIT binary patch literal 5710 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalarrangementcenter.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalarrangementcenter.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..5d240456d5c56b87666e052cd318b525e920812b GIT binary patch literal 5686 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalarrangementend.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalarrangementend.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..aff4219ccb607e9c3a449484fe23b89681d75b9d GIT binary patch literal 5705 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalarrangementspaceAround.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalarrangementspaceAround.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..8a19f24f162ec9f338884dbb1521a5ee291285d7 GIT binary patch literal 5675 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalarrangementspaceBetween.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalarrangementspaceBetween.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..1efe9372477a5d9ece53071e3b75488243ba9bd0 GIT binary patch literal 5675 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 F`QK^GsY?I= literal 0 HcmV?d00001 diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalarrangementstart.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- gridverticalarrangementstart.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..590556b29c2eba646b379c9beadc92640f421848 GIT binary patch literal 5700 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 O_kF1E3cm^X=|2J454kS@ literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalarrangementcenter.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalarrangementcenter.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..05f699702e9a2e1b5790af23bacd3290ba343e96 GIT binary patch literal 5521 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalarrangementspaceAround.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalarrangementspaceAround.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..5615cd9617e87022884a8f9b585395f180b9cd52 GIT binary patch literal 5524 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 F{{|X6{X_r& literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalarrangementspaceBetween.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalarrangementspaceBetween.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..d31f05b7d08ca862357c579756a8ab6ee12a3770 GIT binary patch literal 5527 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalarrangementstart.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalarrangementstart.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..a8ce504a8d99d66de02ae237fb0076bf0b5d37e1 GIT binary patch literal 5497 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalgap.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexhorizontalgap.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..45e17f8661845fef58d655cbf26eb6a79aa58f01 GIT binary patch literal 5570 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexverticalalignmentcenter.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexverticalalignmentcenter.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..4c3c206293307a6f2560c84997ce170b02fea404 GIT binary patch literal 5540 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexverticalarrangementcenter.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexverticalarrangementcenter.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..4c3c206293307a6f2560c84997ce170b02fea404 GIT binary patch literal 5540 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 F{{=uu=;ib1wN#Yu}w-*Q=GU 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexverticalarrangementstart.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flexverticalarrangementstart.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..034675d7f84b751d1292a3a70a74f78eb4d4207b GIT binary patch literal 5510 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 OkiD(LnNn-7zyB}qTSSfk literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalalignmentcenter.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalalignmentcenter.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..637c32dc1b3ad2dfad1ce90f84a7f92191a4e0de GIT binary patch literal 5375 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalalignmentend.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalalignmentend.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..4ab3d41ea496ee3662fb0e6e05961f8df478def9 GIT binary patch literal 5353 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 T>AnK4Fd^T40ef3_pZNBl+~@D| literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalalignmentstart.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalalignmentstart.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..56c09c947cca2e883a749394abddc44843877b05 GIT binary patch literal 5374 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 F{|$#_Z(#rc literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalarrangementcenter.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalarrangementcenter.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..637c32dc1b3ad2dfad1ce90f84a7f92191a4e0de GIT binary patch literal 5375 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalarrangementend.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalarrangementend.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..08c66dd0797b652522e8c218fe3a2e7f8d98e12a GIT binary patch literal 4855 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalarrangementspaceAround.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalarrangementspaceAround.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..b11dc02c11e84fbeb36a1577538c95c0dbbd2ce5 GIT binary patch literal 4833 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 U=RWX9AOLuu^!c>zW8_!=1gYkXnE(I) literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalarrangementstart.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalarrangementstart.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..d71680dd42dbbc343808b00f1181df7f722e0211 GIT binary patch literal 5363 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 AxBvhE literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalgap.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridhorizontalgap.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..dc91577aeb3124416d2341b5070788a879160d24 GIT binary patch literal 4607 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalalignmentend.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalalignmentend.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..0c28a6787ca6802983042644e003705f087109e0 GIT binary patch literal 5488 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalalignmentstart.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalalignmentstart.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..a70f21f69e4b8a73de804a03bf1c805681fda516 GIT binary patch literal 5506 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalarrangementend.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalarrangementend.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..dcb4fc1ed0be38c3f962ea81ab4827d964d682cf GIT binary patch literal 5494 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 Xb;+6^_JRLXp#$G~?yGbS{NcX=pMtmY literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalarrangementspaceAround.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalarrangementspaceAround.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..b491906a9ce66b3a96b08f80dfe521c16ec52c9c GIT binary patch literal 5468 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalarrangementspaceBetween.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalarrangementspaceBetween.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..8e5c20d71d9e6e729c6c4b378d91e34f863d78d1 GIT binary patch literal 5468 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 Lc`W~k$CZBr!_+@r literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalgap.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- gridverticalgap.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..00a76ba79849867a2a1e256b48c0596f1f15e81b GIT binary patch literal 5497 zcmeI0d0bQ1w#N@p|94{BaparB1GKfq90U?GV5NH*67J*ho zW>TO)nP-_HLNAdai5P((gn&pwAS99q7?O~866~kme)RtF{<-gu{;_k;+1Y2Gwf9-; z`&;YWy9~EhQPNNX06@j&ALqXY0GYRv_Fp@|p5bxY_W+=F+UEQj$0(VVC(89-qOR$_ z;qVJ0*k5i8sti8xGeHj`UhS6Kee7p=SoY|5xqC0}x48ZHUk+;rr=*)xii^Ly|3bkh zb8k(_%52FuEhtui+x{~H56xSgG!8s*KA7jx)af!f@3#S^Py@91x42)?i=1cjcv~eMVe?A z7j_bJOd0o3BQ--o*BqNXu_NbhRfv(@IO%>9#xLI*zAKz}6NX3RT)N%&*Clx`r2^`{ zg&qZ>ZxDJnigs{twdITs`ual)1eWmpx`|zu67H|&(J|RID>m7NntAj2mR38-<+4V; z<5-P_cP|gvmCpy=$*1m1WPUA^eOymRJBj%ib$wr%t-RNewEJ<3)h===c*Enzdfpu& z!KwX7rmw0i%y{UYLw|5^T4Vc3qSwClA21M??7E|d$cV)OkE@S5y+il!1jk=%Gg2g% zW?9`h0oRFLjMeebys>+|@`;fP%$T^Db4$m}>?xs2q}AzrYD^K=Gd8Sq3+3}rpktZ^ z+Dm~QvPr8`;ZpXLOy3d&KibK+iGqwBZB7u%Q@4^OH^?M9NV{r ziVgXpNwWlCS!Y_!{#w$HyAY(8B)tzenR;cmxMt-RuwF8xQ{Q5x=-%9Lau*KcI4QTI z-)6R0S^bb?AaI%|Z6`u4br|P#V?BFT2oP1Hg2$~UTzY6!AV$!-6*PNsF|o`lR`_j~ zxL0_-&{gbs%49;$u6#rEdW!eXM^D!IVq)2~Na~X=X5LJOI*nf{Q$~*O-B9OE?9x$j zw^7S|+=dKEVBX#wP3Db?Ma%7sOi%T;2l{~fU;5_`a0C?`qI2&Y`Z*IR>-@ER!jV_% z@$75S{H$&$$;0gPw&(f)t4#sAHFqE1KfU@2qUf&D4b;y=-#&@Y5?~l|{1(r+&_cHL zjHt{~Ea#cs+9OhzwWv@BP}4!Zo1NU;x_9*0fhfzNDcWXb>_QMN*MhUzh=VW7Cum2C zzU`0h7!AlysqNjmT!`-H$y(H?=dR=MuzdSz@tp7pM~sr}Mh0wkC3<}*f>${a8yC}! z0VujLMS+mm(P3_%diPNrav6o@=Xidj?EaM+@Kf|}4SZXEWqaBJz@G%sFO3RE4IF2S zOB0o(Z{pG3BVnV@ugiPEDp@kgs_SIt-MHGROS^Pg3eqlKM5d3mfBzPWwP;6Y=mUZ) zzUiioFNdFBPZR|P7IC}sHf1Pv`snlJ)E{)mt}$|F(jdqP z5PZC+gJ%#PD-4Q3Qw1EL_;%Nq5E1voX>yFl7OO#zQ#RpX)Z+{HEu>BPH#JjKfX?#1 zwD;6oPe~=*f*0!SNT51-6Kp)`hn=CPmmUXvQN}D-Un~=lrRl^!oS-~buSV~xPKw!to<5#urJp4R#DzL zll8{NX@bY7a=rik-xn+^jK1UD2r_=nc-}HR{D(Yeff;HzxH5yjCd*RvH^H}aw(R{u z%+EqheqXV=x7_rezI9f2z~i&J%tYJE+G3$F5wW8_-spqC0}H5$B|E71cP4 zOJWD6r>{ddX zznh1RD0{wb1Uf^H?`K%S-liLCs2XeS3@6Vq7=_N=$82p$imYZ2iZPTw8yC&J=fKaa z+f0^0(M;lo)5~etOCUS=yeYm3Y@NidjqEYxyz3F?BU;rdHfrm4Q=9DRy z)e^mMI)Q3p%&SJ47r39Wu*h=mrEBu=LA_b?SYeb`xl_Q*z@#3pM9f|0bxibH;S0qN z0CHd;->iLcP)}Ed)vR>MEuL%7_2KZ#y4Kf1NexqMB_nMjmPS;FUn%Dy{YjQTrqp(_ zy(E*3XV_cj>P9hwA{f^;ZioiS?P8w|`c^tMPXI%O8s>|U2~={82b9}8gC%9#9pd8z zw7im53|jB!jZ9gJq=5tZLU0pL1`U zMIw$U?9w9U(YP~?PG03}XPcm6WsgEEKd}WMGpA_lyl<;YfAb3I@kA&{^jYr62=cka z$v~oqML*iBFL5L{*J>ckKd?di$JjaJ3V4F;i<%p2&+J^U%H*0vUed!xAWz{+L4UWS z*D`o1m^vYh5xFbWFb;TyK}@Ea{yctWq8-XMr~c2AID0X%mC z3?}4}_LcF;>9C)&_LL`0QnY*{g7Tjj;jl~pO2)kIVo88*bKFb(3jh$RKGo`d{QS%( z>%bowuMJ1aF)-FdHv@}gaqNnEA5g3WW1x*vifBP8_T?FI<=bKt=Q;;mWDjf&Dw>1ZV#sMq#%>P1uK;d3n#< zBg)OBxio9|god6f6bV(WQ#r24f_>b~+IlectOps2FS6=(PXaHdH*oC|CLhc=2vRtj zb?*whE$)s&lEV_GC>qJ@j)wi)mdgrV-lyo!<6fqU7M#9Bn*jTT-8I{)mC#Gs zUW9DeNk_xcd)CP^g_EF(KyA{{m*$;)m805JMMW-2PA{cSW___3t6#TnT31R{Ike>*`%6dc~b$V;ozcD&7+C zEc)?% z^sIQM75@dcdcl?xeU9C=JS@kmwU3W6R@d%ee&fMkGAXU(g30!b@R@3C$jlm>_Vo6I zt`h5KB?5Z2pzf(f&xSLX9WQc=7B*OOiLG%LlKRgiP>qcvE*ZwKBb*(a+81p-R$uN+ zR_Cs!Q#C1pYU}qWC)wvwp6F>eCIP_bF4)OK`?cuy?+)?Z?4V4J?^i@fcFO?QLJqE+;7ay~a zitPSdO3H*^&~k;494e?7 zAwc9&u8Zw=^t3a$7b@ zYK^hW?dNS%)Mj%G46bg+Pi#FFu7~peVZJ4itfg>f_R$1*O zdDwU9qt%C(=O0t}+O*Pt4$a%A^$}fNtDhBmpq>ten@EyncLUH!-Wy%j<2iS=pG!?X zht>yDbFo!g7Ur5LVnc~>4z}u9q0;Go1ax}%Rczw$2CH;vsR$#XqPJ5)*V{Uh)XcE2 z%x%C@gO?adEUn!0@`dv0`HswK)N(Mw^x5!-H9j=u4>f*KNH@Ux3usRD(MUPLl}~;1 s__P1h--G_#n?LvF|B(;Oh~>Y8IsMPYQqB & FlowProps & RefAttributes>; + export { FocusProps } // @public (undocumented) @@ -3060,7 +3064,7 @@ onDecrement?: ((value: number) => void) | undefined; } & { segmentation?: "clear" | undefined; inputBackgroundType?: undefined; -} & Omit, "onChange" | "size" | "value"> & RefAttributes) | ({ +} & Omit, "onChange" | "value" | "size"> & RefAttributes) | ({ value?: number | undefined; min?: number | undefined; max?: number | undefined; @@ -3085,7 +3089,7 @@ onDecrement?: ((value: number) => void) | undefined; } & { segmentation?: string | undefined; inputBackgroundType?: string | undefined; -} & Omit, "onChange" | "size" | "value"> & RefAttributes))>; +} & Omit, "onChange" | "value" | "size"> & RefAttributes))>; export { numberInputClasses } diff --git a/packages/plasma-b2c/src/components/Flow/Flow.component-test.tsx b/packages/plasma-b2c/src/components/Flow/Flow.component-test.tsx new file mode 100644 index 0000000000..56ee2ef35c --- /dev/null +++ b/packages/plasma-b2c/src/components/Flow/Flow.component-test.tsx @@ -0,0 +1,115 @@ +import { mount, CypressTestDecorator, getComponent } from '@salutejs/plasma-cy-utils'; +import React from 'react'; +import styled from 'styled-components'; + +const orientations = ['vertical', 'horizontal']; +const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround']; +const alignments = ['start', 'center', 'end']; + +const widths = [100, 32, 171, 74, 179, 55]; +const heights = [10, 50, 45, 33, 14, 55]; + +const itemsCount = widths.length; + +const Item = styled.div` + padding: 0.5rem 1rem; + border-radius: 0.5rem; + background: #aab1e9; + display: flex; + align-items: center; + justify-content: center; +`; + +describe('plasma-b2c: Flow', () => { + const Flow = getComponent('Flow'); + + const Demo: React.FC = (props) => { + return ( + + + {new Array(itemsCount).fill(null).map((width, index) => ( + + {index + 1} + + ))} + + + ); + }; + + orientations.forEach((orientation) => { + arrangements.forEach((arrangement) => { + it(`flex:${orientation}:arrangement:${arrangement}`, () => { + mount(); + + cy.matchImageSnapshot(); + }); + }); + alignments.forEach((alignment) => { + it(`flex:${orientation}:alignment:${alignment}`, () => { + mount(); + + cy.matchImageSnapshot(); + }); + }); + }); + + orientations.forEach((orientation) => { + arrangements.forEach((arrangement) => { + it(`grid:${orientation}:arrangement:${arrangement}`, () => { + mount(); + + cy.matchImageSnapshot(); + }); + }); + alignments.forEach((alignment) => { + it(`grid:${orientation}:alignment:${alignment}`, () => { + mount(); + + cy.matchImageSnapshot(); + }); + }); + }); + + orientations.forEach((orientation) => { + it(`flex:${orientation}:gap`, () => { + mount( + , + ); + + cy.matchImageSnapshot(); + }); + it(`grid:${orientation}:gap`, () => { + mount( + , + ); + + cy.matchImageSnapshot(); + }); + }); +}); diff --git a/packages/plasma-b2c/src/components/Flow/Flow.config.ts b/packages/plasma-b2c/src/components/Flow/Flow.config.ts new file mode 100644 index 0000000000..0c01f86c85 --- /dev/null +++ b/packages/plasma-b2c/src/components/Flow/Flow.config.ts @@ -0,0 +1,4 @@ +export const config = { + defaults: {}, + variations: {}, +}; diff --git a/packages/plasma-b2c/src/components/Flow/Flow.stories.tsx b/packages/plasma-b2c/src/components/Flow/Flow.stories.tsx new file mode 100644 index 0000000000..d0b1568648 --- /dev/null +++ b/packages/plasma-b2c/src/components/Flow/Flow.stories.tsx @@ -0,0 +1,114 @@ +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; +import styled from 'styled-components'; + +import { Flow } from './Flow'; + +const orientations = ['vertical', 'horizontal']; +const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround']; +const alignments = ['start', 'center', 'end']; + +const widths = [100, 32, 171, 74, 179, 55]; +const heights = [10, 50, 45, 33, 14, 55]; + +const Item = styled.div` + padding: 0.5rem 1rem; + border-radius: 0.5rem; + background: #aab1e9; + display: flex; + align-items: center; + justify-content: center; +`; + +const meta: Meta = { + title: 'Layout/Flow', + component: Flow, + decorators: [InSpacingDecorator], + argTypes: { + itemsCount: { + control: { + type: 'number', + }, + }, + height: { + control: { + type: 'text', + }, + if: { arg: 'orientation', eq: 'vertical' }, + }, + orientation: { + options: orientations, + control: { + type: 'select', + }, + }, + arrangement: { + options: arrangements, + control: { + type: 'select', + }, + }, + alignment: { + options: alignments, + control: { + type: 'select', + }, + }, + mainAxisGap: { + control: { + type: 'text', + }, + }, + crossAxisGap: { + control: { + type: 'text', + }, + }, + itemsPerLine: { + control: { + type: 'number', + }, + }, + minColWidth: { + control: { + type: 'text', + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + height: '13rem', + orientation: 'horizontal', + arrangement: 'start', + alignment: 'start', + mainAxisGap: '0', + crossAxisGap: '0', + minColWidth: 'auto', + itemsPerLine: 0, + itemsCount: 6, + }, + render: ({ itemsCount, height, ...args }: ComponentProps) => { + return ( + + {new Array(itemsCount).fill(null).map((width, index) => ( + + {index + 1} + + ))} + + ); + }, +}; diff --git a/packages/plasma-b2c/src/components/Flow/Flow.ts b/packages/plasma-b2c/src/components/Flow/Flow.ts new file mode 100644 index 0000000000..9760d0e23d --- /dev/null +++ b/packages/plasma-b2c/src/components/Flow/Flow.ts @@ -0,0 +1,7 @@ +import { flowConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Flow.config'; + +const mergedConfig = mergeConfig(flowConfig, config); + +export const Flow = component(mergedConfig); diff --git a/packages/plasma-b2c/src/components/Flow/index.ts b/packages/plasma-b2c/src/components/Flow/index.ts new file mode 100644 index 0000000000..fa0a41428c --- /dev/null +++ b/packages/plasma-b2c/src/components/Flow/index.ts @@ -0,0 +1 @@ +export { Flow } from './Flow'; diff --git a/packages/plasma-b2c/src/index.ts b/packages/plasma-b2c/src/index.ts index 7cfd5f0a44..769ea0b409 100644 --- a/packages/plasma-b2c/src/index.ts +++ b/packages/plasma-b2c/src/index.ts @@ -17,6 +17,7 @@ export * from './components/Dropdown'; export * from './components/Drawer'; export * from './components/Editable'; export * from './components/ElasticGrid'; +export * from './components/Flow'; export * from './components/Grid'; export * from './components/Image'; export * from './components/IconButton'; diff --git a/packages/plasma-giga/api/plasma-giga.api.md b/packages/plasma-giga/api/plasma-giga.api.md index 99f86a1d22..dd2a342b1c 100644 --- a/packages/plasma-giga/api/plasma-giga.api.md +++ b/packages/plasma-giga/api/plasma-giga.api.md @@ -109,6 +109,7 @@ import { dsplSBold } from '@salutejs/plasma-themes/tokens'; import { FC } from 'react'; import { FileProcessHandler } from '@salutejs/plasma-new-hope/types/components/Dropzone/Dropzone.types'; import { Filter } from '@salutejs/plasma-new-hope/types/engines/types'; +import { FlowProps } from '@salutejs/plasma-new-hope/styled-components'; import { FormTypeNumber } from '@salutejs/plasma-new-hope/types/types/FormType'; import { FormTypeString } from '@salutejs/plasma-new-hope/types/types/FormType'; import { ForwardRefExoticComponent } from 'react'; @@ -1708,6 +1709,9 @@ xs: PolymorphicClassName; }; }> & Props_2 & RefAttributes>; +// @public (undocumented) +export const Flow: FunctionComponent & FlowProps & RefAttributes>; + // @public (undocumented) export const Grid: FunctionComponent = { + title: 'Layout/Flow', + component: Flow, + decorators: [InSpacingDecorator], + argTypes: { + itemsCount: { + control: { + type: 'number', + }, + }, + height: { + control: { + type: 'text', + }, + if: { arg: 'orientation', eq: 'vertical' }, + }, + orientation: { + options: orientations, + control: { + type: 'select', + }, + }, + arrangement: { + options: arrangements, + control: { + type: 'select', + }, + }, + alignment: { + options: alignments, + control: { + type: 'select', + }, + }, + mainAxisGap: { + control: { + type: 'text', + }, + }, + crossAxisGap: { + control: { + type: 'text', + }, + }, + itemsPerLine: { + control: { + type: 'number', + }, + }, + minColWidth: { + control: { + type: 'text', + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + height: '13rem', + orientation: 'horizontal', + arrangement: 'start', + alignment: 'start', + mainAxisGap: '0', + crossAxisGap: '0', + minColWidth: 'auto', + itemsPerLine: 0, + itemsCount: 6, + }, + render: ({ itemsCount, height, ...args }: ComponentProps) => { + return ( + + {new Array(itemsCount).fill(null).map((width, index) => ( + + {index + 1} + + ))} + + ); + }, +}; diff --git a/packages/plasma-giga/src/components/Flow/Flow.ts b/packages/plasma-giga/src/components/Flow/Flow.ts new file mode 100644 index 0000000000..9760d0e23d --- /dev/null +++ b/packages/plasma-giga/src/components/Flow/Flow.ts @@ -0,0 +1,7 @@ +import { flowConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Flow.config'; + +const mergedConfig = mergeConfig(flowConfig, config); + +export const Flow = component(mergedConfig); diff --git a/packages/plasma-giga/src/components/Flow/index.ts b/packages/plasma-giga/src/components/Flow/index.ts new file mode 100644 index 0000000000..fa0a41428c --- /dev/null +++ b/packages/plasma-giga/src/components/Flow/index.ts @@ -0,0 +1 @@ +export { Flow } from './Flow'; diff --git a/packages/plasma-giga/src/index.ts b/packages/plasma-giga/src/index.ts index 64070499ee..3752db408b 100644 --- a/packages/plasma-giga/src/index.ts +++ b/packages/plasma-giga/src/index.ts @@ -6,6 +6,7 @@ export * from './components/ButtonGroup'; export * from './components/Breadcrumbs'; export * from './components/Divider'; export * from './components/Drawer'; +export * from './components/Flow'; export * from './components/Grid'; export * from './components/Calendar'; export * from './components/Checkbox'; diff --git a/packages/plasma-new-hope/src/components/Flow/Flow.styles.ts b/packages/plasma-new-hope/src/components/Flow/Flow.styles.ts new file mode 100644 index 0000000000..ca6d67a64a --- /dev/null +++ b/packages/plasma-new-hope/src/components/Flow/Flow.styles.ts @@ -0,0 +1,135 @@ +import { css } from '@linaria/core'; + +export const base = css` + display: flex; + flex-direction: row; + flex-wrap: wrap; + + gap: var(--plasma-private-gap); + + border-radius: 0.5rem; + + &.vertical { + flex-direction: column; + } + + &.grid { + display: grid; + + grid-template-columns: repeat(var(--plasma-private-items), auto); + grid-auto-flow: row; + + &.elastic { + grid-template-columns: repeat(auto-fill, minmax(var(--plasma-private-min-width), auto)); + grid-auto-flow: row; + } + + &:not(.vertical) { + &[data-arrangement='start'] { + justify-items: start; + } + + &[data-arrangement='center'] { + justify-items: center; + } + + &[data-arrangement='end'] { + justify-items: end; + } + + &[data-arrangement='spaceBetween'] { + justify-content: space-between; + } + + &[data-arrangement='spaceAround'] { + justify-content: space-around; + } + + &[data-alignment='start'] { + align-items: start; + } + + &[data-alignment='center'] { + align-items: center; + } + + &[data-alignment='end'] { + align-items: end; + } + } + + &.vertical { + grid-template-columns: auto; + grid-template-rows: repeat(var(--plasma-private-items), auto); + grid-auto-flow: column; + + &[data-arrangement='start'] { + align-items: start; + } + + &[data-arrangement='center'] { + align-items: center; + } + + &[data-arrangement='end'] { + align-items: end; + } + + &[data-arrangement='spaceBetween'] { + align-content: space-between; + align-items: normal; + } + + &[data-arrangement='spaceAround'] { + align-content: space-around; + align-items: normal; + } + + &[data-alignment='start'] { + justify-items: start; + } + + &[data-alignment='center'] { + justify-items: center; + } + + &[data-alignment='end'] { + justify-items: end; + } + } + } + + &:not(&.grid) { + &[data-arrangement='start'] { + justify-content: start; + } + + &[data-arrangement='center'] { + justify-content: center; + } + + &[data-arrangement='end'] { + justify-content: end; + } + + &[data-arrangement='spaceBetween'] { + justify-content: space-between; + } + + &[data-arrangement='spaceAround'] { + justify-content: space-around; + } + + &[data-alignment='start'] { + align-items: start; + } + + &[data-alignment='center'] { + align-items: center; + } + + &[data-alignment='end'] { + align-items: end; + } + } +`; diff --git a/packages/plasma-new-hope/src/components/Flow/Flow.tsx b/packages/plasma-new-hope/src/components/Flow/Flow.tsx new file mode 100644 index 0000000000..48d2ca25fa --- /dev/null +++ b/packages/plasma-new-hope/src/components/Flow/Flow.tsx @@ -0,0 +1,70 @@ +import React, { CSSProperties, forwardRef } from 'react'; +import cls from 'classnames'; + +import { RootProps } from '../../engines'; + +import { base } from './Flow.styles'; +import { FlowProps } from './Flow.types'; + +export const flowRoot = (Root: RootProps) => + forwardRef( + ( + { + children, + className, + style, + orientation = 'horizontal', + arrangement, + alignment, + mainAxisGap = '0', + crossAxisGap = '0', + minColWidth = 'auto', + itemsPerLine, + ...rest + }, + ref, + ) => { + const isVertical = orientation === 'vertical'; + const hasMinWidth = Boolean(minColWidth && minColWidth !== 'auto'); + const needGrid = Boolean(Number(itemsPerLine) > 0 || hasMinWidth); + + return ( + + {children} + + ); + }, + ); + +export const flowConfig = { + name: 'Flow', + tag: 'div', + layout: flowRoot, + base, + defaults: {}, + variations: {}, +}; diff --git a/packages/plasma-new-hope/src/components/Flow/Flow.types.ts b/packages/plasma-new-hope/src/components/Flow/Flow.types.ts new file mode 100644 index 0000000000..aab3d8a944 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Flow/Flow.types.ts @@ -0,0 +1,35 @@ +import { CSSProperties, ReactNode } from 'react'; + +export interface FlowProps { + children: ReactNode; + className?: string; + style?: CSSProperties; + orientation?: 'horizontal' | 'vertical'; + /** + * Расположение элементов относительно выбранной ориентации + */ + arrangement?: 'start' | 'center' | 'end' | 'spaceBetween' | 'spaceAround'; + /** + * Выравнивание элементов внутри строк по вертикали при горизонтальной ориентации, + * или внутри столбцов по горизонтали при вертикальной + */ + alignment?: 'start' | 'center' | 'end'; + /** + * Фиксированный отступ между элементами по главной оси + */ + mainAxisGap?: string; + /** + * Фиксированный отступ между элементами по второстепенной оси + */ + crossAxisGap?: string; + /** + * Количество элементов по главной оси в отображении grid, при itemsPerLine > 0, + * иначе используется flex и flex-wrap + */ + itemsPerLine?: number; + /** + * Минимальный размер колонки для эластичной сетки с динамическим количеством растянутых столбцов + * через `repeat(auto-fill, minmax(${minColWidth}, auto))` + */ + minColWidth?: string; +} diff --git a/packages/plasma-new-hope/src/components/Flow/index.ts b/packages/plasma-new-hope/src/components/Flow/index.ts new file mode 100644 index 0000000000..8a210dfdfd --- /dev/null +++ b/packages/plasma-new-hope/src/components/Flow/index.ts @@ -0,0 +1,2 @@ +export { flowRoot, flowConfig } from './Flow'; +export type { FlowProps } from './Flow.types'; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Flow/Flow.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Flow/Flow.config.ts new file mode 100644 index 0000000000..0c01f86c85 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Flow/Flow.config.ts @@ -0,0 +1,4 @@ +export const config = { + defaults: {}, + variations: {}, +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Flow/Flow.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Flow/Flow.stories.tsx new file mode 100644 index 0000000000..6345ad3cf2 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Flow/Flow.stories.tsx @@ -0,0 +1,115 @@ +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import styled from 'styled-components'; + +import { WithTheme } from '../../../_helpers'; + +import { Flow } from './Flow'; + +const orientations = ['vertical', 'horizontal']; +const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround']; +const alignments = ['start', 'center', 'end']; + +const widths = [100, 32, 171, 74, 179, 55]; +const heights = [10, 50, 45, 33, 14, 55]; + +const Item = styled.div` + padding: 0.5rem 1rem; + border-radius: 0.5rem; + background: #aab1e9; + display: flex; + align-items: center; + justify-content: center; +`; + +const meta: Meta = { + title: 'b2c/Layout/Flow', + component: Flow, + decorators: [WithTheme], + argTypes: { + itemsCount: { + control: { + type: 'number', + }, + }, + height: { + control: { + type: 'text', + }, + if: { arg: 'orientation', eq: 'vertical' }, + }, + orientation: { + options: orientations, + control: { + type: 'select', + }, + }, + arrangement: { + options: arrangements, + control: { + type: 'select', + }, + }, + alignment: { + options: alignments, + control: { + type: 'select', + }, + }, + mainAxisGap: { + control: { + type: 'text', + }, + }, + crossAxisGap: { + control: { + type: 'text', + }, + }, + itemsPerLine: { + control: { + type: 'number', + }, + }, + minColWidth: { + control: { + type: 'text', + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + height: '13rem', + orientation: 'horizontal', + arrangement: 'start', + alignment: 'start', + mainAxisGap: '0', + crossAxisGap: '0', + minColWidth: 'auto', + itemsPerLine: 0, + itemsCount: 6, + }, + render: ({ itemsCount, height, ...args }: ComponentProps) => { + return ( + + {new Array(itemsCount).fill(null).map((width, index) => ( + + {index + 1} + + ))} + + ); + }, +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Flow/Flow.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Flow/Flow.ts new file mode 100644 index 0000000000..e5f13d0159 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Flow/Flow.ts @@ -0,0 +1,8 @@ +import { flowConfig } from '../../../../components/Flow'; +import { component, mergeConfig } from '../../../../engines'; + +import { config } from './Flow.config'; + +const mergedConfig = mergeConfig(flowConfig, config); + +export const Flow = component(mergedConfig); diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Flow/Flow.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Flow/Flow.config.ts new file mode 100644 index 0000000000..0c01f86c85 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Flow/Flow.config.ts @@ -0,0 +1,4 @@ +export const config = { + defaults: {}, + variations: {}, +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Flow/Flow.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Flow/Flow.stories.tsx new file mode 100644 index 0000000000..cb009f5127 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Flow/Flow.stories.tsx @@ -0,0 +1,115 @@ +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import styled from 'styled-components'; + +import { WithTheme } from '../../../_helpers'; + +import { Flow } from './Flow'; + +const orientations = ['vertical', 'horizontal']; +const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround']; +const alignments = ['start', 'center', 'end']; + +const widths = [100, 32, 171, 74, 179, 55]; +const heights = [10, 50, 45, 33, 14, 55]; + +const Item = styled.div` + padding: 0.5rem 1rem; + border-radius: 0.5rem; + background: #aab1e9; + display: flex; + align-items: center; + justify-content: center; +`; + +const meta: Meta = { + title: 'web/Layout/Flow', + component: Flow, + decorators: [WithTheme], + argTypes: { + itemsCount: { + control: { + type: 'number', + }, + }, + height: { + control: { + type: 'text', + }, + if: { arg: 'orientation', eq: 'vertical' }, + }, + orientation: { + options: orientations, + control: { + type: 'select', + }, + }, + arrangement: { + options: arrangements, + control: { + type: 'select', + }, + }, + alignment: { + options: alignments, + control: { + type: 'select', + }, + }, + mainAxisGap: { + control: { + type: 'text', + }, + }, + crossAxisGap: { + control: { + type: 'text', + }, + }, + itemsPerLine: { + control: { + type: 'number', + }, + }, + minColWidth: { + control: { + type: 'text', + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + height: '13rem', + orientation: 'horizontal', + arrangement: 'start', + alignment: 'start', + mainAxisGap: '0', + crossAxisGap: '0', + minColWidth: 'auto', + itemsPerLine: 0, + itemsCount: 6, + }, + render: ({ itemsCount, height, ...args }: ComponentProps) => { + return ( + + {new Array(itemsCount).fill(null).map((width, index) => ( + + {index + 1} + + ))} + + ); + }, +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Flow/Flow.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Flow/Flow.ts new file mode 100644 index 0000000000..e5f13d0159 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Flow/Flow.ts @@ -0,0 +1,8 @@ +import { flowConfig } from '../../../../components/Flow'; +import { component, mergeConfig } from '../../../../engines'; + +import { config } from './Flow.config'; + +const mergedConfig = mergeConfig(flowConfig, config); + +export const Flow = component(mergedConfig); diff --git a/packages/plasma-new-hope/src/index.ts b/packages/plasma-new-hope/src/index.ts index 7ae65e3bc8..262f8c6abd 100644 --- a/packages/plasma-new-hope/src/index.ts +++ b/packages/plasma-new-hope/src/index.ts @@ -12,6 +12,7 @@ export * from './components/Breadcrumbs'; export * from './components/Chip'; export * from './components/ChipGroup'; export * from './components/Cell'; +export * from './components/Flow'; export * from './components/Link'; export * from './components/Spinner'; export * from './components/Checkbox'; @@ -44,6 +45,7 @@ export * from './components/SSRProvider'; export * from './components/Combobox'; export * from './components/Indicator'; export * from './components/ButtonBase'; +export * from './components/Flow'; export * from './components/Grid'; export * from './components/Progress'; export * from './components/Select'; diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md index e233cf946d..d5c76b08e0 100644 --- a/packages/plasma-web/api/plasma-web.api.md +++ b/packages/plasma-web/api/plasma-web.api.md @@ -149,6 +149,7 @@ import { extractTextFrom } from '@salutejs/plasma-core'; import { FC } from 'react'; import { FileProcessHandler } from '@salutejs/plasma-new-hope/types/components/Dropzone/Dropzone.types'; import { Filter } from '@salutejs/plasma-new-hope/types/engines/types'; +import { FlowProps } from '@salutejs/plasma-new-hope/styled-components'; import { FocusProps } from '@salutejs/plasma-core'; import { formatCurrency } from '@salutejs/plasma-core'; import { FormTypeNumber } from '@salutejs/plasma-new-hope/types/types/FormType'; @@ -2029,6 +2030,9 @@ xs: PolymorphicClassName; export { extractTextFrom } +// @public (undocumented) +export const Flow: FunctionComponent & FlowProps & RefAttributes>; + export { FocusProps } // @public (undocumented) @@ -3062,7 +3066,7 @@ onDecrement?: ((value: number) => void) | undefined; } & { segmentation?: "clear" | undefined; inputBackgroundType?: undefined; -} & Omit, "onChange" | "size" | "value"> & RefAttributes) | ({ +} & Omit, "onChange" | "value" | "size"> & RefAttributes) | ({ value?: number | undefined; min?: number | undefined; max?: number | undefined; @@ -3087,7 +3091,7 @@ onDecrement?: ((value: number) => void) | undefined; } & { segmentation?: string | undefined; inputBackgroundType?: string | undefined; -} & Omit, "onChange" | "size" | "value"> & RefAttributes))>; +} & Omit, "onChange" | "value" | "size"> & RefAttributes))>; export { numberInputClasses } diff --git a/packages/plasma-web/src/components/Flow/Flow.component-test.tsx b/packages/plasma-web/src/components/Flow/Flow.component-test.tsx new file mode 100644 index 0000000000..b7358ec66f --- /dev/null +++ b/packages/plasma-web/src/components/Flow/Flow.component-test.tsx @@ -0,0 +1,115 @@ +import { mount, CypressTestDecorator, getComponent } from '@salutejs/plasma-cy-utils'; +import React from 'react'; +import styled from 'styled-components'; + +const orientations = ['vertical', 'horizontal']; +const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround']; +const alignments = ['start', 'center', 'end']; + +const widths = [100, 32, 171, 74, 179, 55]; +const heights = [10, 50, 45, 33, 14, 55]; + +const itemsCount = widths.length; + +const Item = styled.div` + padding: 0.5rem 1rem; + border-radius: 0.5rem; + background: #aab1e9; + display: flex; + align-items: center; + justify-content: center; +`; + +describe('plasma-web: Flow', () => { + const Flow = getComponent('Flow'); + + const Demo: React.FC = (props) => { + return ( + + + {new Array(itemsCount).fill(null).map((width, index) => ( + + {index + 1} + + ))} + + + ); + }; + + orientations.forEach((orientation) => { + arrangements.forEach((arrangement) => { + it(`flex:${orientation}:arrangement:${arrangement}`, () => { + mount(); + + cy.matchImageSnapshot(); + }); + }); + alignments.forEach((alignment) => { + it(`flex:${orientation}:alignment:${alignment}`, () => { + mount(); + + cy.matchImageSnapshot(); + }); + }); + }); + + orientations.forEach((orientation) => { + arrangements.forEach((arrangement) => { + it(`grid:${orientation}:arrangement:${arrangement}`, () => { + mount(); + + cy.matchImageSnapshot(); + }); + }); + alignments.forEach((alignment) => { + it(`grid:${orientation}:alignment:${alignment}`, () => { + mount(); + + cy.matchImageSnapshot(); + }); + }); + }); + + orientations.forEach((orientation) => { + it(`flex:${orientation}:gap`, () => { + mount( + , + ); + + cy.matchImageSnapshot(); + }); + it(`grid:${orientation}:gap`, () => { + mount( + , + ); + + cy.matchImageSnapshot(); + }); + }); +}); diff --git a/packages/plasma-web/src/components/Flow/Flow.stories.tsx b/packages/plasma-web/src/components/Flow/Flow.stories.tsx new file mode 100644 index 0000000000..d0b1568648 --- /dev/null +++ b/packages/plasma-web/src/components/Flow/Flow.stories.tsx @@ -0,0 +1,114 @@ +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; +import styled from 'styled-components'; + +import { Flow } from './Flow'; + +const orientations = ['vertical', 'horizontal']; +const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround']; +const alignments = ['start', 'center', 'end']; + +const widths = [100, 32, 171, 74, 179, 55]; +const heights = [10, 50, 45, 33, 14, 55]; + +const Item = styled.div` + padding: 0.5rem 1rem; + border-radius: 0.5rem; + background: #aab1e9; + display: flex; + align-items: center; + justify-content: center; +`; + +const meta: Meta = { + title: 'Layout/Flow', + component: Flow, + decorators: [InSpacingDecorator], + argTypes: { + itemsCount: { + control: { + type: 'number', + }, + }, + height: { + control: { + type: 'text', + }, + if: { arg: 'orientation', eq: 'vertical' }, + }, + orientation: { + options: orientations, + control: { + type: 'select', + }, + }, + arrangement: { + options: arrangements, + control: { + type: 'select', + }, + }, + alignment: { + options: alignments, + control: { + type: 'select', + }, + }, + mainAxisGap: { + control: { + type: 'text', + }, + }, + crossAxisGap: { + control: { + type: 'text', + }, + }, + itemsPerLine: { + control: { + type: 'number', + }, + }, + minColWidth: { + control: { + type: 'text', + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + height: '13rem', + orientation: 'horizontal', + arrangement: 'start', + alignment: 'start', + mainAxisGap: '0', + crossAxisGap: '0', + minColWidth: 'auto', + itemsPerLine: 0, + itemsCount: 6, + }, + render: ({ itemsCount, height, ...args }: ComponentProps) => { + return ( + + {new Array(itemsCount).fill(null).map((width, index) => ( + + {index + 1} + + ))} + + ); + }, +}; diff --git a/packages/plasma-web/src/components/Flow/Flow.ts b/packages/plasma-web/src/components/Flow/Flow.ts new file mode 100644 index 0000000000..b6ece1bdc9 --- /dev/null +++ b/packages/plasma-web/src/components/Flow/Flow.ts @@ -0,0 +1,5 @@ +import { flowConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +const mergedConfig = mergeConfig(flowConfig); + +export const Flow = component(mergedConfig); diff --git a/packages/plasma-web/src/components/Flow/index.ts b/packages/plasma-web/src/components/Flow/index.ts new file mode 100644 index 0000000000..fa0a41428c --- /dev/null +++ b/packages/plasma-web/src/components/Flow/index.ts @@ -0,0 +1 @@ +export { Flow } from './Flow'; diff --git a/packages/plasma-web/src/index.ts b/packages/plasma-web/src/index.ts index 9a9007640b..30ab39462b 100644 --- a/packages/plasma-web/src/index.ts +++ b/packages/plasma-web/src/index.ts @@ -17,6 +17,7 @@ export * from './components/Dropdown'; export * from './components/Drawer'; export * from './components/Editable'; export * from './components/ElasticGrid'; +export * from './components/Flow'; export * from './components/Grid'; export * from './components/Image'; export * from './components/IconButton'; diff --git a/packages/sdds-cs/api/sdds-cs.api.md b/packages/sdds-cs/api/sdds-cs.api.md index 076ba4974c..acf3d6c8d8 100644 --- a/packages/sdds-cs/api/sdds-cs.api.md +++ b/packages/sdds-cs/api/sdds-cs.api.md @@ -109,6 +109,7 @@ import { dsplSBold } from '@salutejs/sdds-themes/tokens'; import { FC } from 'react'; import { FileProcessHandler } from '@salutejs/plasma-new-hope/types/components/Dropzone/Dropzone.types'; import { Filter } from '@salutejs/plasma-new-hope/types/engines/types'; +import { FlowProps } from '@salutejs/plasma-new-hope/styled-components'; import { FormTypeNumber } from '@salutejs/plasma-new-hope/types/types/FormType'; import { FormTypeString } from '@salutejs/plasma-new-hope/types/types/FormType'; import { ForwardRefExoticComponent } from 'react'; @@ -257,7 +258,7 @@ size?: string | undefined; singleActive?: boolean | undefined; defaultActiveEventKey?: number[] | undefined; disabled?: boolean | undefined; -stretching?: "fixed" | "filled" | undefined; +stretching?: "filled" | "fixed" | undefined; onChange?: ((index?: number | undefined, value?: boolean | undefined) => void) | undefined; children?: ReactNode; className?: string | undefined; @@ -290,7 +291,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -313,7 +314,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -339,7 +340,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -363,7 +364,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -390,7 +391,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -416,7 +417,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -439,7 +440,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -466,7 +467,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -1029,7 +1030,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -1050,7 +1051,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -1158,7 +1159,7 @@ contentLeft?: ReactNode; contentRight?: ReactNode; alignContentLeft?: AlignProp | undefined; alignContentRight?: AlignProp | undefined; -stretching?: "auto" | "fixed" | "filled" | undefined; +stretching?: "auto" | "filled" | "fixed" | undefined; content?: ReactNode; description?: string | undefined; } & { @@ -1173,7 +1174,7 @@ contentLeft?: ReactNode; contentRight?: ReactNode; alignContentLeft?: AlignProp | undefined; alignContentRight?: AlignProp | undefined; -stretching?: "auto" | "fixed" | "filled" | undefined; +stretching?: "auto" | "filled" | "fixed" | undefined; content?: ReactNode; description?: string | undefined; } & { @@ -1486,7 +1487,7 @@ export { DrawerHeaderProps } export { DrawerProps } // @public (undocumented) -export const Dropdown: (props: Omit, "size" | "view"> & Pick(props: Omit, "view" | "size"> & Pick | undefined; hoverIndex?: number | undefined; -} & React_2.HTMLAttributes & React_2.RefAttributes, "size" | "view"> & React_2.RefAttributes) => React_2.ReactElement> | null; +} & React_2.HTMLAttributes & React_2.RefAttributes, "view" | "size"> & React_2.RefAttributes) => React_2.ReactElement> | null; // @public (undocumented) export const Dropzone: FunctionComponent & Props_2 & RefAttributes>; +// @public (undocumented) +export const Flow: FunctionComponent & FlowProps & RefAttributes>; + // @public (undocumented) export const Grid: FunctionComponent = { + title: 'Layout/Flow', + component: Flow, + decorators: [InSpacingDecorator], + argTypes: { + itemsCount: { + control: { + type: 'number', + }, + }, + height: { + control: { + type: 'text', + }, + if: { arg: 'orientation', eq: 'vertical' }, + }, + orientation: { + options: orientations, + control: { + type: 'select', + }, + }, + arrangement: { + options: arrangements, + control: { + type: 'select', + }, + }, + alignment: { + options: alignments, + control: { + type: 'select', + }, + }, + mainAxisGap: { + control: { + type: 'text', + }, + }, + crossAxisGap: { + control: { + type: 'text', + }, + }, + itemsPerLine: { + control: { + type: 'number', + }, + }, + minColWidth: { + control: { + type: 'text', + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + height: '13rem', + orientation: 'horizontal', + arrangement: 'start', + alignment: 'start', + mainAxisGap: '0', + crossAxisGap: '0', + minColWidth: 'auto', + itemsPerLine: 0, + itemsCount: 6, + }, + render: ({ itemsCount, height, ...args }: ComponentProps) => { + return ( + + {new Array(itemsCount).fill(null).map((width, index) => ( + + {index + 1} + + ))} + + ); + }, +}; diff --git a/packages/sdds-cs/src/components/Flow/Flow.ts b/packages/sdds-cs/src/components/Flow/Flow.ts new file mode 100644 index 0000000000..9760d0e23d --- /dev/null +++ b/packages/sdds-cs/src/components/Flow/Flow.ts @@ -0,0 +1,7 @@ +import { flowConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Flow.config'; + +const mergedConfig = mergeConfig(flowConfig, config); + +export const Flow = component(mergedConfig); diff --git a/packages/sdds-cs/src/components/Flow/index.ts b/packages/sdds-cs/src/components/Flow/index.ts new file mode 100644 index 0000000000..fa0a41428c --- /dev/null +++ b/packages/sdds-cs/src/components/Flow/index.ts @@ -0,0 +1 @@ +export { Flow } from './Flow'; diff --git a/packages/sdds-cs/src/index.ts b/packages/sdds-cs/src/index.ts index da734a8e17..6e8881cb9b 100644 --- a/packages/sdds-cs/src/index.ts +++ b/packages/sdds-cs/src/index.ts @@ -6,6 +6,7 @@ export * from './components/Button'; export * from './components/ButtonGroup'; export * from './components/Divider'; export * from './components/Drawer'; +export * from './components/Flow'; export * from './components/Grid'; export * from './components/Calendar'; export * from './components/Checkbox'; diff --git a/packages/sdds-dfa/api/sdds-dfa.api.md b/packages/sdds-dfa/api/sdds-dfa.api.md index 84bbfc7776..698f39a994 100644 --- a/packages/sdds-dfa/api/sdds-dfa.api.md +++ b/packages/sdds-dfa/api/sdds-dfa.api.md @@ -105,6 +105,7 @@ import { dsplSBold } from '@salutejs/sdds-themes/tokens'; import type { FC } from 'react'; import { FileProcessHandler } from '@salutejs/plasma-new-hope/types/components/Dropzone/Dropzone.types'; import { Filter } from '@salutejs/plasma-new-hope/types/engines/types'; +import { FlowProps } from '@salutejs/plasma-new-hope/styled-components'; import { FormTypeNumber } from '@salutejs/plasma-new-hope/types/types/FormType'; import { FormTypeString } from '@salutejs/plasma-new-hope/types/types/FormType'; import { ForwardRefExoticComponent } from 'react'; @@ -264,7 +265,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -287,7 +288,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -313,7 +314,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -337,7 +338,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -364,7 +365,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -390,7 +391,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -413,7 +414,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -440,7 +441,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -1035,7 +1036,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -1056,7 +1057,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -1180,7 +1181,7 @@ contentLeft?: ReactNode; contentRight?: ReactNode; alignContentLeft?: AlignProp | undefined; alignContentRight?: AlignProp | undefined; -stretching?: "auto" | "fixed" | "filled" | undefined; +stretching?: "auto" | "filled" | "fixed" | undefined; content?: ReactNode; description?: string | undefined; } & { @@ -1195,7 +1196,7 @@ contentLeft?: ReactNode; contentRight?: ReactNode; alignContentLeft?: AlignProp | undefined; alignContentRight?: AlignProp | undefined; -stretching?: "auto" | "fixed" | "filled" | undefined; +stretching?: "auto" | "filled" | "fixed" | undefined; content?: ReactNode; description?: string | undefined; } & { @@ -1536,7 +1537,7 @@ export { DrawerHeaderProps } export { DrawerProps } // @public (undocumented) -export const Dropdown: (props: Omit, "size" | "view"> & Pick(props: Omit, "view" | "size"> & Pick | undefined; hoverIndex?: number | undefined; -} & React_2.HTMLAttributes & React_2.RefAttributes, "size" | "view"> & React_2.RefAttributes) => React_2.ReactElement> | null; +} & React_2.HTMLAttributes & React_2.RefAttributes, "view" | "size"> & React_2.RefAttributes) => React_2.ReactElement> | null; // @public (undocumented) export const Dropzone: FunctionComponent & Props_2 & RefAttributes>; +// @public (undocumented) +export const Flow: FunctionComponent & FlowProps & RefAttributes>; + // @public (undocumented) export const Grid: FunctionComponent & RefAttributes>; diff --git a/packages/sdds-dfa/src/components/Flow/Flow.config.ts b/packages/sdds-dfa/src/components/Flow/Flow.config.ts new file mode 100644 index 0000000000..0c01f86c85 --- /dev/null +++ b/packages/sdds-dfa/src/components/Flow/Flow.config.ts @@ -0,0 +1,4 @@ +export const config = { + defaults: {}, + variations: {}, +}; diff --git a/packages/sdds-dfa/src/components/Flow/Flow.stories.tsx b/packages/sdds-dfa/src/components/Flow/Flow.stories.tsx new file mode 100644 index 0000000000..d0b1568648 --- /dev/null +++ b/packages/sdds-dfa/src/components/Flow/Flow.stories.tsx @@ -0,0 +1,114 @@ +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; +import styled from 'styled-components'; + +import { Flow } from './Flow'; + +const orientations = ['vertical', 'horizontal']; +const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround']; +const alignments = ['start', 'center', 'end']; + +const widths = [100, 32, 171, 74, 179, 55]; +const heights = [10, 50, 45, 33, 14, 55]; + +const Item = styled.div` + padding: 0.5rem 1rem; + border-radius: 0.5rem; + background: #aab1e9; + display: flex; + align-items: center; + justify-content: center; +`; + +const meta: Meta = { + title: 'Layout/Flow', + component: Flow, + decorators: [InSpacingDecorator], + argTypes: { + itemsCount: { + control: { + type: 'number', + }, + }, + height: { + control: { + type: 'text', + }, + if: { arg: 'orientation', eq: 'vertical' }, + }, + orientation: { + options: orientations, + control: { + type: 'select', + }, + }, + arrangement: { + options: arrangements, + control: { + type: 'select', + }, + }, + alignment: { + options: alignments, + control: { + type: 'select', + }, + }, + mainAxisGap: { + control: { + type: 'text', + }, + }, + crossAxisGap: { + control: { + type: 'text', + }, + }, + itemsPerLine: { + control: { + type: 'number', + }, + }, + minColWidth: { + control: { + type: 'text', + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + height: '13rem', + orientation: 'horizontal', + arrangement: 'start', + alignment: 'start', + mainAxisGap: '0', + crossAxisGap: '0', + minColWidth: 'auto', + itemsPerLine: 0, + itemsCount: 6, + }, + render: ({ itemsCount, height, ...args }: ComponentProps) => { + return ( + + {new Array(itemsCount).fill(null).map((width, index) => ( + + {index + 1} + + ))} + + ); + }, +}; diff --git a/packages/sdds-dfa/src/components/Flow/Flow.ts b/packages/sdds-dfa/src/components/Flow/Flow.ts new file mode 100644 index 0000000000..9760d0e23d --- /dev/null +++ b/packages/sdds-dfa/src/components/Flow/Flow.ts @@ -0,0 +1,7 @@ +import { flowConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Flow.config'; + +const mergedConfig = mergeConfig(flowConfig, config); + +export const Flow = component(mergedConfig); diff --git a/packages/sdds-dfa/src/components/Flow/index.ts b/packages/sdds-dfa/src/components/Flow/index.ts new file mode 100644 index 0000000000..fa0a41428c --- /dev/null +++ b/packages/sdds-dfa/src/components/Flow/index.ts @@ -0,0 +1 @@ +export { Flow } from './Flow'; diff --git a/packages/sdds-dfa/src/index.ts b/packages/sdds-dfa/src/index.ts index 619e0314ce..adb5566c00 100644 --- a/packages/sdds-dfa/src/index.ts +++ b/packages/sdds-dfa/src/index.ts @@ -6,6 +6,7 @@ export * from './components/Breadcrumbs'; export * from './components/ButtonGroup'; export * from './components/Divider'; export * from './components/Drawer'; +export * from './components/Flow'; export * from './components/Grid'; export * from './components/Calendar'; export * from './components/Checkbox'; diff --git a/packages/sdds-finportal/api/sdds-finportal.api.md b/packages/sdds-finportal/api/sdds-finportal.api.md index 05e9ef0290..0a3d64bcfa 100644 --- a/packages/sdds-finportal/api/sdds-finportal.api.md +++ b/packages/sdds-finportal/api/sdds-finportal.api.md @@ -109,6 +109,7 @@ import { dsplSBold } from '@salutejs/sdds-themes/tokens'; import { FC } from 'react'; import { FileProcessHandler } from '@salutejs/plasma-new-hope/types/components/Dropzone/Dropzone.types'; import { Filter } from '@salutejs/plasma-new-hope/types/engines/types'; +import { FlowProps } from '@salutejs/plasma-new-hope/styled-components'; import { FormTypeNumber } from '@salutejs/plasma-new-hope/types/types/FormType'; import { FormTypeString } from '@salutejs/plasma-new-hope/types/types/FormType'; import { ForwardRefExoticComponent } from 'react'; @@ -262,7 +263,7 @@ size?: string | undefined; singleActive?: boolean | undefined; defaultActiveEventKey?: number[] | undefined; disabled?: boolean | undefined; -stretching?: "fixed" | "filled" | undefined; +stretching?: "filled" | "fixed" | undefined; onChange?: ((index?: number | undefined, value?: boolean | undefined) => void) | undefined; children?: ReactNode; className?: string | undefined; @@ -305,7 +306,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -328,7 +329,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -354,7 +355,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -378,7 +379,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -405,7 +406,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -431,7 +432,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -454,7 +455,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -481,7 +482,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -1076,7 +1077,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -1097,7 +1098,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -1229,7 +1230,7 @@ contentLeft?: ReactNode; contentRight?: ReactNode; alignContentLeft?: AlignProp | undefined; alignContentRight?: AlignProp | undefined; -stretching?: "auto" | "fixed" | "filled" | undefined; +stretching?: "auto" | "filled" | "fixed" | undefined; content?: ReactNode; description?: string | undefined; } & { @@ -1244,7 +1245,7 @@ contentLeft?: ReactNode; contentRight?: ReactNode; alignContentLeft?: AlignProp | undefined; alignContentRight?: AlignProp | undefined; -stretching?: "auto" | "fixed" | "filled" | undefined; +stretching?: "auto" | "filled" | "fixed" | undefined; content?: ReactNode; description?: string | undefined; } & { @@ -1587,7 +1588,7 @@ export { DrawerHeaderProps } export { DrawerProps } // @public (undocumented) -export const Dropdown: (props: Omit, "size" | "view"> & Pick(props: Omit, "view" | "size"> & Pick | undefined; hoverIndex?: number | undefined; -} & React_2.HTMLAttributes & React_2.RefAttributes, "size" | "view"> & React_2.RefAttributes) => React_2.ReactElement> | null; +} & React_2.HTMLAttributes & React_2.RefAttributes, "view" | "size"> & React_2.RefAttributes) => React_2.ReactElement> | null; // @public (undocumented) export const Dropzone: FunctionComponent & Props_2 & RefAttributes>; +// @public (undocumented) +export const Flow: FunctionComponent & FlowProps & RefAttributes>; + // @public (undocumented) export const Grid: FunctionComponent = { + title: 'Layout/Flow', + component: Flow, + decorators: [InSpacingDecorator], + argTypes: { + itemsCount: { + control: { + type: 'number', + }, + }, + height: { + control: { + type: 'text', + }, + if: { arg: 'orientation', eq: 'vertical' }, + }, + orientation: { + options: orientations, + control: { + type: 'select', + }, + }, + arrangement: { + options: arrangements, + control: { + type: 'select', + }, + }, + alignment: { + options: alignments, + control: { + type: 'select', + }, + }, + mainAxisGap: { + control: { + type: 'text', + }, + }, + crossAxisGap: { + control: { + type: 'text', + }, + }, + itemsPerLine: { + control: { + type: 'number', + }, + }, + minColWidth: { + control: { + type: 'text', + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + height: '13rem', + orientation: 'horizontal', + arrangement: 'start', + alignment: 'start', + mainAxisGap: '0', + crossAxisGap: '0', + minColWidth: 'auto', + itemsPerLine: 0, + itemsCount: 6, + }, + render: ({ itemsCount, height, ...args }: ComponentProps) => { + return ( + + {new Array(itemsCount).fill(null).map((width, index) => ( + + {index + 1} + + ))} + + ); + }, +}; diff --git a/packages/sdds-finportal/src/components/Flow/Flow.ts b/packages/sdds-finportal/src/components/Flow/Flow.ts new file mode 100644 index 0000000000..9760d0e23d --- /dev/null +++ b/packages/sdds-finportal/src/components/Flow/Flow.ts @@ -0,0 +1,7 @@ +import { flowConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Flow.config'; + +const mergedConfig = mergeConfig(flowConfig, config); + +export const Flow = component(mergedConfig); diff --git a/packages/sdds-finportal/src/components/Flow/index.ts b/packages/sdds-finportal/src/components/Flow/index.ts new file mode 100644 index 0000000000..fa0a41428c --- /dev/null +++ b/packages/sdds-finportal/src/components/Flow/index.ts @@ -0,0 +1 @@ +export { Flow } from './Flow'; diff --git a/packages/sdds-finportal/src/index.ts b/packages/sdds-finportal/src/index.ts index 098cf31adb..6f7731cc8d 100644 --- a/packages/sdds-finportal/src/index.ts +++ b/packages/sdds-finportal/src/index.ts @@ -6,6 +6,7 @@ export * from './components/ButtonGroup'; export * from './components/Breadcrumbs'; export * from './components/Divider'; export * from './components/Drawer'; +export * from './components/Flow'; export * from './components/Grid'; export * from './components/Calendar'; export * from './components/Checkbox'; diff --git a/packages/sdds-insol/api/sdds-insol.api.md b/packages/sdds-insol/api/sdds-insol.api.md index 6d6959c1f9..991484e877 100644 --- a/packages/sdds-insol/api/sdds-insol.api.md +++ b/packages/sdds-insol/api/sdds-insol.api.md @@ -109,6 +109,7 @@ import { dsplSBold } from '@salutejs/sdds-themes/tokens'; import { FC } from 'react'; import { FileProcessHandler } from '@salutejs/plasma-new-hope/types/components/Dropzone/Dropzone.types'; import { Filter } from '@salutejs/plasma-new-hope/types/engines/types'; +import { FlowProps } from '@salutejs/plasma-new-hope/styled-components'; import { FormTypeNumber } from '@salutejs/plasma-new-hope/types/types/FormType'; import { FormTypeString } from '@salutejs/plasma-new-hope/types/types/FormType'; import { ForwardRefExoticComponent } from 'react'; @@ -264,7 +265,7 @@ size?: string | undefined; singleActive?: boolean | undefined; defaultActiveEventKey?: number[] | undefined; disabled?: boolean | undefined; -stretching?: "fixed" | "filled" | undefined; +stretching?: "filled" | "fixed" | undefined; onChange?: ((index?: number | undefined, value?: boolean | undefined) => void) | undefined; children?: ReactNode; className?: string | undefined; @@ -307,7 +308,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -330,7 +331,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -356,7 +357,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -380,7 +381,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -407,7 +408,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -433,7 +434,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -456,7 +457,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -483,7 +484,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -1078,7 +1079,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -1099,7 +1100,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -1231,7 +1232,7 @@ contentLeft?: ReactNode; contentRight?: ReactNode; alignContentLeft?: AlignProp | undefined; alignContentRight?: AlignProp | undefined; -stretching?: "auto" | "fixed" | "filled" | undefined; +stretching?: "auto" | "filled" | "fixed" | undefined; content?: ReactNode; description?: string | undefined; } & { @@ -1246,7 +1247,7 @@ contentLeft?: ReactNode; contentRight?: ReactNode; alignContentLeft?: AlignProp | undefined; alignContentRight?: AlignProp | undefined; -stretching?: "auto" | "fixed" | "filled" | undefined; +stretching?: "auto" | "filled" | "fixed" | undefined; content?: ReactNode; description?: string | undefined; } & { @@ -1589,7 +1590,7 @@ export { DrawerHeaderProps } export { DrawerProps } // @public (undocumented) -export const Dropdown: (props: Omit, "size" | "view"> & Pick(props: Omit, "view" | "size"> & Pick | undefined; hoverIndex?: number | undefined; -} & React_2.HTMLAttributes & React_2.RefAttributes, "size" | "view"> & React_2.RefAttributes) => React_2.ReactElement> | null; +} & React_2.HTMLAttributes & React_2.RefAttributes, "view" | "size"> & React_2.RefAttributes) => React_2.ReactElement> | null; // @public (undocumented) export const Dropzone: FunctionComponent & Props_2 & RefAttributes>; +// @public (undocumented) +export const Flow: FunctionComponent & FlowProps & RefAttributes>; + // @public (undocumented) export const Grid: FunctionComponent & RefAttributes>; diff --git a/packages/sdds-insol/src/components/Flow/Flow.config.ts b/packages/sdds-insol/src/components/Flow/Flow.config.ts new file mode 100644 index 0000000000..0c01f86c85 --- /dev/null +++ b/packages/sdds-insol/src/components/Flow/Flow.config.ts @@ -0,0 +1,4 @@ +export const config = { + defaults: {}, + variations: {}, +}; diff --git a/packages/sdds-insol/src/components/Flow/Flow.stories.tsx b/packages/sdds-insol/src/components/Flow/Flow.stories.tsx new file mode 100644 index 0000000000..d0b1568648 --- /dev/null +++ b/packages/sdds-insol/src/components/Flow/Flow.stories.tsx @@ -0,0 +1,114 @@ +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; +import styled from 'styled-components'; + +import { Flow } from './Flow'; + +const orientations = ['vertical', 'horizontal']; +const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround']; +const alignments = ['start', 'center', 'end']; + +const widths = [100, 32, 171, 74, 179, 55]; +const heights = [10, 50, 45, 33, 14, 55]; + +const Item = styled.div` + padding: 0.5rem 1rem; + border-radius: 0.5rem; + background: #aab1e9; + display: flex; + align-items: center; + justify-content: center; +`; + +const meta: Meta = { + title: 'Layout/Flow', + component: Flow, + decorators: [InSpacingDecorator], + argTypes: { + itemsCount: { + control: { + type: 'number', + }, + }, + height: { + control: { + type: 'text', + }, + if: { arg: 'orientation', eq: 'vertical' }, + }, + orientation: { + options: orientations, + control: { + type: 'select', + }, + }, + arrangement: { + options: arrangements, + control: { + type: 'select', + }, + }, + alignment: { + options: alignments, + control: { + type: 'select', + }, + }, + mainAxisGap: { + control: { + type: 'text', + }, + }, + crossAxisGap: { + control: { + type: 'text', + }, + }, + itemsPerLine: { + control: { + type: 'number', + }, + }, + minColWidth: { + control: { + type: 'text', + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + height: '13rem', + orientation: 'horizontal', + arrangement: 'start', + alignment: 'start', + mainAxisGap: '0', + crossAxisGap: '0', + minColWidth: 'auto', + itemsPerLine: 0, + itemsCount: 6, + }, + render: ({ itemsCount, height, ...args }: ComponentProps) => { + return ( + + {new Array(itemsCount).fill(null).map((width, index) => ( + + {index + 1} + + ))} + + ); + }, +}; diff --git a/packages/sdds-insol/src/components/Flow/Flow.ts b/packages/sdds-insol/src/components/Flow/Flow.ts new file mode 100644 index 0000000000..9760d0e23d --- /dev/null +++ b/packages/sdds-insol/src/components/Flow/Flow.ts @@ -0,0 +1,7 @@ +import { flowConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Flow.config'; + +const mergedConfig = mergeConfig(flowConfig, config); + +export const Flow = component(mergedConfig); diff --git a/packages/sdds-insol/src/components/Flow/index.ts b/packages/sdds-insol/src/components/Flow/index.ts new file mode 100644 index 0000000000..fa0a41428c --- /dev/null +++ b/packages/sdds-insol/src/components/Flow/index.ts @@ -0,0 +1 @@ +export { Flow } from './Flow'; diff --git a/packages/sdds-insol/src/index.ts b/packages/sdds-insol/src/index.ts index 64070499ee..3752db408b 100644 --- a/packages/sdds-insol/src/index.ts +++ b/packages/sdds-insol/src/index.ts @@ -6,6 +6,7 @@ export * from './components/ButtonGroup'; export * from './components/Breadcrumbs'; export * from './components/Divider'; export * from './components/Drawer'; +export * from './components/Flow'; export * from './components/Grid'; export * from './components/Calendar'; export * from './components/Checkbox'; diff --git a/packages/sdds-serv/api/sdds-serv.api.md b/packages/sdds-serv/api/sdds-serv.api.md index eea150632a..fce0c2eba3 100644 --- a/packages/sdds-serv/api/sdds-serv.api.md +++ b/packages/sdds-serv/api/sdds-serv.api.md @@ -109,6 +109,7 @@ import { dsplSBold } from '@salutejs/sdds-themes/tokens'; import { FC } from 'react'; import { FileProcessHandler } from '@salutejs/plasma-new-hope/types/components/Dropzone/Dropzone.types'; import { Filter } from '@salutejs/plasma-new-hope/types/engines/types'; +import { FlowProps } from '@salutejs/plasma-new-hope/styled-components'; import { FormTypeNumber } from '@salutejs/plasma-new-hope/types/types/FormType'; import { FormTypeString } from '@salutejs/plasma-new-hope/types/types/FormType'; import { ForwardRefExoticComponent } from 'react'; @@ -264,7 +265,7 @@ size?: string | undefined; singleActive?: boolean | undefined; defaultActiveEventKey?: number[] | undefined; disabled?: boolean | undefined; -stretching?: "fixed" | "filled" | undefined; +stretching?: "filled" | "fixed" | undefined; onChange?: ((index?: number | undefined, value?: boolean | undefined) => void) | undefined; children?: ReactNode; className?: string | undefined; @@ -307,7 +308,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -330,7 +331,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -356,7 +357,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -380,7 +381,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -407,7 +408,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -433,7 +434,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -456,7 +457,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -483,7 +484,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -1078,7 +1079,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -1099,7 +1100,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("auto" | "fixed" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -1231,7 +1232,7 @@ contentLeft?: ReactNode; contentRight?: ReactNode; alignContentLeft?: AlignProp | undefined; alignContentRight?: AlignProp | undefined; -stretching?: "auto" | "fixed" | "filled" | undefined; +stretching?: "auto" | "filled" | "fixed" | undefined; content?: ReactNode; description?: string | undefined; } & { @@ -1246,7 +1247,7 @@ contentLeft?: ReactNode; contentRight?: ReactNode; alignContentLeft?: AlignProp | undefined; alignContentRight?: AlignProp | undefined; -stretching?: "auto" | "fixed" | "filled" | undefined; +stretching?: "auto" | "filled" | "fixed" | undefined; content?: ReactNode; description?: string | undefined; } & { @@ -1589,7 +1590,7 @@ export { DrawerHeaderProps } export { DrawerProps } // @public (undocumented) -export const Dropdown: (props: Omit, "size" | "view"> & Pick(props: Omit, "view" | "size"> & Pick | undefined; hoverIndex?: number | undefined; -} & React_2.HTMLAttributes & React_2.RefAttributes, "size" | "view"> & React_2.RefAttributes) => React_2.ReactElement> | null; +} & React_2.HTMLAttributes & React_2.RefAttributes, "view" | "size"> & React_2.RefAttributes) => React_2.ReactElement> | null; // @public (undocumented) export const Dropzone: FunctionComponent & Props_2 & RefAttributes>; +// @public (undocumented) +export const Flow: FunctionComponent & FlowProps & RefAttributes>; + // @public (undocumented) export const Grid: FunctionComponent & RefAttributes>; diff --git a/packages/sdds-serv/src/components/Flow/Flow.config.ts b/packages/sdds-serv/src/components/Flow/Flow.config.ts new file mode 100644 index 0000000000..0c01f86c85 --- /dev/null +++ b/packages/sdds-serv/src/components/Flow/Flow.config.ts @@ -0,0 +1,4 @@ +export const config = { + defaults: {}, + variations: {}, +}; diff --git a/packages/sdds-serv/src/components/Flow/Flow.stories.tsx b/packages/sdds-serv/src/components/Flow/Flow.stories.tsx new file mode 100644 index 0000000000..d0b1568648 --- /dev/null +++ b/packages/sdds-serv/src/components/Flow/Flow.stories.tsx @@ -0,0 +1,114 @@ +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; +import styled from 'styled-components'; + +import { Flow } from './Flow'; + +const orientations = ['vertical', 'horizontal']; +const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround']; +const alignments = ['start', 'center', 'end']; + +const widths = [100, 32, 171, 74, 179, 55]; +const heights = [10, 50, 45, 33, 14, 55]; + +const Item = styled.div` + padding: 0.5rem 1rem; + border-radius: 0.5rem; + background: #aab1e9; + display: flex; + align-items: center; + justify-content: center; +`; + +const meta: Meta = { + title: 'Layout/Flow', + component: Flow, + decorators: [InSpacingDecorator], + argTypes: { + itemsCount: { + control: { + type: 'number', + }, + }, + height: { + control: { + type: 'text', + }, + if: { arg: 'orientation', eq: 'vertical' }, + }, + orientation: { + options: orientations, + control: { + type: 'select', + }, + }, + arrangement: { + options: arrangements, + control: { + type: 'select', + }, + }, + alignment: { + options: alignments, + control: { + type: 'select', + }, + }, + mainAxisGap: { + control: { + type: 'text', + }, + }, + crossAxisGap: { + control: { + type: 'text', + }, + }, + itemsPerLine: { + control: { + type: 'number', + }, + }, + minColWidth: { + control: { + type: 'text', + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + height: '13rem', + orientation: 'horizontal', + arrangement: 'start', + alignment: 'start', + mainAxisGap: '0', + crossAxisGap: '0', + minColWidth: 'auto', + itemsPerLine: 0, + itemsCount: 6, + }, + render: ({ itemsCount, height, ...args }: ComponentProps) => { + return ( + + {new Array(itemsCount).fill(null).map((width, index) => ( + + {index + 1} + + ))} + + ); + }, +}; diff --git a/packages/sdds-serv/src/components/Flow/Flow.ts b/packages/sdds-serv/src/components/Flow/Flow.ts new file mode 100644 index 0000000000..9760d0e23d --- /dev/null +++ b/packages/sdds-serv/src/components/Flow/Flow.ts @@ -0,0 +1,7 @@ +import { flowConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Flow.config'; + +const mergedConfig = mergeConfig(flowConfig, config); + +export const Flow = component(mergedConfig); diff --git a/packages/sdds-serv/src/components/Flow/index.ts b/packages/sdds-serv/src/components/Flow/index.ts new file mode 100644 index 0000000000..fa0a41428c --- /dev/null +++ b/packages/sdds-serv/src/components/Flow/index.ts @@ -0,0 +1 @@ +export { Flow } from './Flow'; diff --git a/packages/sdds-serv/src/index.ts b/packages/sdds-serv/src/index.ts index 64070499ee..3752db408b 100644 --- a/packages/sdds-serv/src/index.ts +++ b/packages/sdds-serv/src/index.ts @@ -6,6 +6,7 @@ export * from './components/ButtonGroup'; export * from './components/Breadcrumbs'; export * from './components/Divider'; export * from './components/Drawer'; +export * from './components/Flow'; export * from './components/Grid'; export * from './components/Calendar'; export * from './components/Checkbox'; diff --git a/website/plasma-b2c-docs/docs/components/Flow.mdx b/website/plasma-b2c-docs/docs/components/Flow.mdx new file mode 100644 index 0000000000..b6bfeba4aa --- /dev/null +++ b/website/plasma-b2c-docs/docs/components/Flow.mdx @@ -0,0 +1,163 @@ +--- +id: flow +title: Flow +--- + +import { PropsTable, Description, StorybookLink } from '@site/src/components'; + +# Flow +Универсальный контейнер для упорядоченного размещения вложенных компонентов (например, медиафайлы, карточки или блоки текста). + + +## Flow + + + + +## Использование +По умолчанию компонент `Flow` работает на основе `display: flex` и `flex-wrap: wrap`, +при указании `itemsPerLine` или `minColWidth` компонент переходит на отображение через `grid`. + +## Примеры + +### Горизонтальное отображение с переполнением + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/plasma-b2c'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Вертикальное отображение с переполнением + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/plasma-b2c'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Отображение через Grid +С ограничением количества элементов в строке. + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/plasma-b2c'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Отображение эластичной сетки с переполнением + +Где `minColWidth` задаем минимальную ширину колонки, а далее, на всю ширину контейнера происходит распределение на столбцы. + + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/plasma-b2c'; + +export function App() { + const style = { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + minWidth: '3ch', + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }; + + return ( +
+ + {Array(10) + .fill(0) + .map((_, i) => (
{i}
))} +
+
+ ); +} +``` diff --git a/website/plasma-giga-docs/docs/components/Flow.mdx b/website/plasma-giga-docs/docs/components/Flow.mdx new file mode 100644 index 0000000000..a17628b93f --- /dev/null +++ b/website/plasma-giga-docs/docs/components/Flow.mdx @@ -0,0 +1,163 @@ +--- +id: flow +title: Flow +--- + +import { PropsTable, Description, StorybookLink } from '@site/src/components'; + +# Flow +Универсальный контейнер для упорядоченного размещения вложенных компонентов (например, медиафайлы, карточки или блоки текста). + + +## Flow + + + + +## Использование +По умолчанию компонент `Flow` работает на основе `display: flex` и `flex-wrap: wrap`, +при указании `itemsPerLine` или `minColWidth` компонент переходит на отображение через `grid`. + +## Примеры + +### Горизонтальное отображение с переполнением + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/plasma-giga'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Вертикальное отображение с переполнением + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/plasma-giga'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Отображение через Grid +С ограничением количества элементов в строке. + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/plasma-giga'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Отображение эластичной сетки с переполнением + +Где `minColWidth` задаем минимальную ширину колонки, а далее, на всю ширину контейнера происходит распределение на столбцы. + + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/plasma-giga'; + +export function App() { + const style = { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + minWidth: '3ch', + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }; + + return ( +
+ + {Array(10) + .fill(0) + .map((_, i) => (
{i}
))} +
+
+ ); +} +``` diff --git a/website/plasma-web-docs/docs/components/Chip.mdx b/website/plasma-web-docs/docs/components/Chip.mdx index 16dfaf7843..fd303d6a7c 100644 --- a/website/plasma-web-docs/docs/components/Chip.mdx +++ b/website/plasma-web-docs/docs/components/Chip.mdx @@ -20,7 +20,7 @@ Chips могут отображаться в нескольких размера Свойство `text` можно использовать вместе со свойствами `contentLeft` и `contentRight`. С их помощью можно размещать **иконку** слева или справа от текста. -Так же есть свойство свойство `contentClearButton`, которое позволяет прокинуть кастомную **иконку**. +Так же есть свойство `contentClearButton`, которое позволяет прокинуть кастомную **иконку**. Отключить отображение иконки закрытия можно с помощью свойства `hasClear`. ```tsx live diff --git a/website/plasma-web-docs/docs/components/Flow.mdx b/website/plasma-web-docs/docs/components/Flow.mdx new file mode 100644 index 0000000000..af9c0fc329 --- /dev/null +++ b/website/plasma-web-docs/docs/components/Flow.mdx @@ -0,0 +1,163 @@ +--- +id: flow +title: Flow +--- + +import { PropsTable, Description, StorybookLink } from '@site/src/components'; + +# Flow +Универсальный контейнер для упорядоченного размещения вложенных компонентов (например, медиафайлы, карточки или блоки текста). + + +## Flow + + + + +## Использование +По умолчанию компонент `Flow` работает на основе `display: flex` и `flex-wrap: wrap`, +при указании `itemsPerLine` или `minColWidth` компонент переходит на отображение через `grid`. + +## Примеры + +### Горизонтальное отображение с переполнением + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/plasma-web'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Вертикальное отображение с переполнением + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/plasma-web'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Отображение через Grid +С ограничением количества элементов в строке. + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/plasma-web'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Отображение эластичной сетки с переполнением + +Где `minColWidth` задаем минимальную ширину колонки, а далее, на всю ширину контейнера происходит распределение на столбцы. + + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/plasma-web'; + +export function App() { + const style = { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + minWidth: '3ch', + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }; + + return ( +
+ + {Array(10) + .fill(0) + .map((_, i) => (
{i}
))} +
+
+ ); +} +``` diff --git a/website/sdds-cs-docs/docs/components/Flow.mdx b/website/sdds-cs-docs/docs/components/Flow.mdx new file mode 100644 index 0000000000..7a51405f05 --- /dev/null +++ b/website/sdds-cs-docs/docs/components/Flow.mdx @@ -0,0 +1,163 @@ +--- +id: flow +title: Flow +--- + +import { PropsTable, Description, StorybookLink } from '@site/src/components'; + +# Flow +Универсальный контейнер для упорядоченного размещения вложенных компонентов (например, медиафайлы, карточки или блоки текста). + + +## Flow + + + + +## Использование +По умолчанию компонент `Flow` работает на основе `display: flex` и `flex-wrap: wrap`, +при указании `itemsPerLine` или `minColWidth` компонент переходит на отображение через `grid`. + +## Примеры + +### Горизонтальное отображение с переполнением + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/sdds-cs'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Вертикальное отображение с переполнением + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/sdds-cs'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Отображение через Grid +С ограничением количества элементов в строке. + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/sdds-cs'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Отображение эластичной сетки с переполнением + +Где `minColWidth` задаем минимальную ширину колонки, а далее, на всю ширину контейнера происходит распределение на столбцы. + + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/sdds-cs'; + +export function App() { + const style = { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + minWidth: '3ch', + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }; + + return ( +
+ + {Array(10) + .fill(0) + .map((_, i) => (
{i}
))} +
+
+ ); +} +``` diff --git a/website/sdds-dfa-docs/docs/components/Flow.mdx b/website/sdds-dfa-docs/docs/components/Flow.mdx new file mode 100644 index 0000000000..64e00ea5c2 --- /dev/null +++ b/website/sdds-dfa-docs/docs/components/Flow.mdx @@ -0,0 +1,163 @@ +--- +id: flow +title: Flow +--- + +import { PropsTable, Description, StorybookLink } from '@site/src/components'; + +# Flow +Универсальный контейнер для упорядоченного размещения вложенных компонентов (например, медиафайлы, карточки или блоки текста). + + +## Flow + + + + +## Использование +По умолчанию компонент `Flow` работает на основе `display: flex` и `flex-wrap: wrap`, +при указании `itemsPerLine` или `minColWidth` компонент переходит на отображение через `grid`. + +## Примеры + +### Горизонтальное отображение с переполнением + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/sdds-dfa'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Вертикальное отображение с переполнением + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/sdds-dfa'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Отображение через Grid +С ограничением количества элементов в строке. + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/sdds-dfa'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Отображение эластичной сетки с переполнением + +Где `minColWidth` задаем минимальную ширину колонки, а далее, на всю ширину контейнера происходит распределение на столбцы. + + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/sdds-dfa'; + +export function App() { + const style = { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + minWidth: '3ch', + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }; + + return ( +
+ + {Array(10) + .fill(0) + .map((_, i) => (
{i}
))} +
+
+ ); +} +``` diff --git a/website/sdds-insol-docs/docs/components/Flow.mdx b/website/sdds-insol-docs/docs/components/Flow.mdx new file mode 100644 index 0000000000..f983fc2683 --- /dev/null +++ b/website/sdds-insol-docs/docs/components/Flow.mdx @@ -0,0 +1,163 @@ +--- +id: flow +title: Flow +--- + +import { PropsTable, Description, StorybookLink } from '@site/src/components'; + +# Flow +Универсальный контейнер для упорядоченного размещения вложенных компонентов (например, медиафайлы, карточки или блоки текста). + + +## Flow + + + + +## Использование +По умолчанию компонент `Flow` работает на основе `display: flex` и `flex-wrap: wrap`, +при указании `itemsPerLine` или `minColWidth` компонент переходит на отображение через `grid`. + +## Примеры + +### Горизонтальное отображение с переполнением + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/sdds-insol'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Вертикальное отображение с переполнением + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/sdds-insol'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Отображение через Grid +С ограничением количества элементов в строке. + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/sdds-insol'; + +export function App() { + const numbers = ['one', 'two', 'three', 'four', 'five', 'six']; + + const style = (index) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: `${2 + numbers[index].length}ch`, + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }); + + return ( +
+ + {Array(6) + .fill(0) + .map((_, i) => (
{numbers[i]}
))} +
+
+ ); +} +``` + +### Отображение эластичной сетки с переполнением + +Где `minColWidth` задаем минимальную ширину колонки, а далее, на всю ширину контейнера происходит распределение на столбцы. + + +```tsx live +import React from 'react'; +import { Flow } from '@salutejs/sdds-insol'; + +export function App() { + const style = { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + minWidth: '3ch', + height: '25px', + backgroundColor: '#999', + borderRadius: '10px', + }; + + return ( +
+ + {Array(10) + .fill(0) + .map((_, i) => (
{i}
))} +
+
+ ); +} +```