diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-rapgap.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-rapgap.snap.png new file mode 100644 index 0000000000..c374f5e715 Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-rapgap.snap.png differ diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wrapalignmentcenter.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wrapalignmentcenter.snap.png new file mode 100644 index 0000000000..e1509665eb Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wrapalignmentcenter.snap.png differ diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wrapalignmentend.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wrapalignmentend.snap.png new file mode 100644 index 0000000000..69590981fb Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wrapalignmentend.snap.png differ diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wrapalignmentstart.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wrapalignmentstart.snap.png new file mode 100644 index 0000000000..dcc44f45a0 Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wrapalignmentstart.snap.png differ diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wraparrangementcenter.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wraparrangementcenter.snap.png new file mode 100644 index 0000000000..e1509665eb Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wraparrangementcenter.snap.png differ diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wraparrangementend.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wraparrangementend.snap.png new file mode 100644 index 0000000000..0723b17aad Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wraparrangementend.snap.png differ diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wraparrangementspaceAround.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wraparrangementspaceAround.snap.png new file mode 100644 index 0000000000..656a2f177b Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wraparrangementspaceAround.snap.png differ diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wraparrangementspaceBetween.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wraparrangementspaceBetween.snap.png new file mode 100644 index 0000000000..ed91a2f656 Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wraparrangementspaceBetween.snap.png differ diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wraparrangementstart.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wraparrangementstart.snap.png new file mode 100644 index 0000000000..3d49fd7e2e Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- flex-wraparrangementstart.snap.png differ diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesalignmentcenter.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesalignmentcenter.snap.png new file mode 100644 index 0000000000..8f4cf0e6d3 Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesalignmentcenter.snap.png differ diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesalignmentend.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesalignmentend.snap.png new file mode 100644 index 0000000000..84713a2459 Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesalignmentend.snap.png differ diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesalignmentstart.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesalignmentstart.snap.png new file mode 100644 index 0000000000..89a55cb804 Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesalignmentstart.snap.png differ diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesarrangementcenter.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesarrangementcenter.snap.png new file mode 100644 index 0000000000..8f4cf0e6d3 Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesarrangementcenter.snap.png differ diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesarrangementend.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesarrangementend.snap.png new file mode 100644 index 0000000000..c9f6ded12d Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesarrangementend.snap.png differ diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesarrangementspaceAround.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesarrangementspaceAround.snap.png new file mode 100644 index 0000000000..2fcf089e2d Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesarrangementspaceAround.snap.png differ diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesarrangementspaceBetween.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesarrangementspaceBetween.snap.png new file mode 100644 index 0000000000..e1bef2947b Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesarrangementspaceBetween.snap.png differ diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesarrangementstart.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesarrangementstart.snap.png new file mode 100644 index 0000000000..b87631b37f Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesarrangementstart.snap.png differ diff --git a/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesgap.snap.png b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesgap.snap.png new file mode 100644 index 0000000000..d0e0e56474 Binary files /dev/null and b/cypress/snapshots/b2c/components/Flow/Flow.component-test.tsx/plasma-b2c Flow -- linesgap.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-rapgap.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-rapgap.snap.png new file mode 100644 index 0000000000..135be4c5be Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-rapgap.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wrapalignmentcenter.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wrapalignmentcenter.snap.png new file mode 100644 index 0000000000..fe8033b603 Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wrapalignmentcenter.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wrapalignmentend.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wrapalignmentend.snap.png new file mode 100644 index 0000000000..549f066ef4 Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wrapalignmentend.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wrapalignmentstart.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wrapalignmentstart.snap.png new file mode 100644 index 0000000000..f90ba2360e Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wrapalignmentstart.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wraparrangementcenter.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wraparrangementcenter.snap.png new file mode 100644 index 0000000000..fe8033b603 Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wraparrangementcenter.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wraparrangementend.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wraparrangementend.snap.png new file mode 100644 index 0000000000..635f9e869b Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wraparrangementend.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wraparrangementspaceAround.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wraparrangementspaceAround.snap.png new file mode 100644 index 0000000000..d0e39d5bb4 Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wraparrangementspaceAround.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wraparrangementspaceBetween.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wraparrangementspaceBetween.snap.png new file mode 100644 index 0000000000..5f271e7e7b Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wraparrangementspaceBetween.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wraparrangementstart.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wraparrangementstart.snap.png new file mode 100644 index 0000000000..27c7e2c9fc Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- flex-wraparrangementstart.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesalignmentcenter.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesalignmentcenter.snap.png new file mode 100644 index 0000000000..cc07b9a344 Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesalignmentcenter.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesalignmentend.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesalignmentend.snap.png new file mode 100644 index 0000000000..5c987af938 Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesalignmentend.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesalignmentstart.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesalignmentstart.snap.png new file mode 100644 index 0000000000..3845381475 Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesalignmentstart.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesarrangementcenter.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesarrangementcenter.snap.png new file mode 100644 index 0000000000..cc07b9a344 Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesarrangementcenter.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesarrangementend.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesarrangementend.snap.png new file mode 100644 index 0000000000..9cca3c59a7 Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesarrangementend.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesarrangementspaceAround.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesarrangementspaceAround.snap.png new file mode 100644 index 0000000000..da06ba4a76 Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesarrangementspaceAround.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesarrangementspaceBetween.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesarrangementspaceBetween.snap.png new file mode 100644 index 0000000000..57f96998e0 Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesarrangementspaceBetween.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesarrangementstart.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesarrangementstart.snap.png new file mode 100644 index 0000000000..62620ffd0d Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesarrangementstart.snap.png differ diff --git a/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesgap.snap.png b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesgap.snap.png new file mode 100644 index 0000000000..7b465ed463 Binary files /dev/null and b/cypress/snapshots/web/components/Flow/Flow.component-test.tsx/plasma-web Flow -- linesgap.snap.png differ diff --git a/packages/plasma-asdk/api/plasma-asdk.api.md b/packages/plasma-asdk/api/plasma-asdk.api.md index 4d2f3c0764..773712f045 100644 --- a/packages/plasma-asdk/api/plasma-asdk.api.md +++ b/packages/plasma-asdk/api/plasma-asdk.api.md @@ -157,7 +157,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("fixed" | "auto" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; @@ -178,7 +178,7 @@ contentPlacing?: ("default" | "relaxed") | undefined; isLoading?: boolean | undefined; loader?: ReactNode; stretch?: boolean | undefined; -stretching?: ("fixed" | "auto" | "filled") | undefined; +stretching?: ("auto" | "filled" | "fixed") | undefined; square?: boolean | undefined; focused?: boolean | undefined; disabled?: boolean | undefined; diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md index 063d82b893..e9147e1006 100644 --- a/packages/plasma-b2c/api/plasma-b2c.api.md +++ b/packages/plasma-b2c/api/plasma-b2c.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'; @@ -167,8 +168,9 @@ import { ImageProps } from '@salutejs/plasma-new-hope/styled-components'; import { ImgHTMLAttributes } from 'react'; import { IndicatorProps } from '@salutejs/plasma-new-hope/styled-components'; import { InputHTMLAttributes } from '@salutejs/plasma-core'; -import { InputHTMLAttributes as InputHTMLAttributes_2 } from '@salutejs/plasma-new-hope/styled-components'; -import { InputHTMLAttributes as InputHTMLAttributes_3 } from 'react'; +import { InputHTMLAttributes as InputHTMLAttributes_2 } from '@salutejs/plasma-hope'; +import { InputHTMLAttributes as InputHTMLAttributes_3 } from '@salutejs/plasma-new-hope/styled-components'; +import { InputHTMLAttributes as InputHTMLAttributes_4 } from 'react'; import type { ItemOption } from '@salutejs/plasma-new-hope'; import { JSXElementConstructor } from 'react'; import { KeyboardEvent as KeyboardEvent_2 } from 'react'; @@ -713,7 +715,7 @@ onSearch?: ((value: string, event?: KeyboardEvent_2 | undefine chipType?: undefined; chipView?: undefined; chipValidator?: undefined; -}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ +}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ titleCaption?: ReactNode; leftHelper?: ReactNode; contentLeft?: ReactElement> | undefined; @@ -745,7 +747,7 @@ chipView?: string | undefined; chipValidator?: ((value: string) => { view?: string | undefined; }) | undefined; -}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ +}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ titleCaption?: ReactNode; leftHelper?: ReactNode; contentLeft?: ReactElement> | undefined; @@ -775,7 +777,7 @@ onSearch?: ((value: string, event?: KeyboardEvent_2 | undefine chipType?: undefined; chipView?: undefined; chipValidator?: undefined; -}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ +}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ titleCaption?: ReactNode; leftHelper?: ReactNode; contentLeft?: ReactElement> | undefined; @@ -807,7 +809,7 @@ chipView?: string | undefined; chipValidator?: ((value: string) => { view?: string | undefined; }) | undefined; -}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ +}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ titleCaption?: ReactNode; leftHelper?: ReactNode; contentLeft?: ReactElement> | undefined; @@ -837,7 +839,7 @@ onSearch?: ((value: string, event?: KeyboardEvent_2 | undefine chipType?: undefined; chipView?: undefined; chipValidator?: undefined; -}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ +}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ titleCaption?: ReactNode; leftHelper?: ReactNode; contentLeft?: ReactElement> | undefined; @@ -869,7 +871,7 @@ chipView?: string | undefined; chipValidator?: ((value: string) => { view?: string | undefined; }) | undefined; -}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ +}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ titleCaption?: ReactNode; leftHelper?: ReactNode; contentLeft?: ReactElement> | undefined; @@ -899,7 +901,7 @@ onSearch?: ((value: string, event?: KeyboardEvent_2 | undefine chipType?: undefined; chipView?: undefined; chipValidator?: undefined; -}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ +}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ titleCaption?: ReactNode; leftHelper?: ReactNode; contentLeft?: ReactElement> | undefined; @@ -931,7 +933,7 @@ chipView?: string | undefined; chipValidator?: ((value: string) => { view?: string | undefined; }) | undefined; -}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes))>; +}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes))>; // @public (undocumented) export const Avatar: FunctionComponent) => void) | undefined; validator?: ((files: File[]) => ValidatorReturnType) | undefined; onDrop?: FileProcessHandler | undefined; onChoseFiles?: FileProcessHandler | undefined; -} & InputHTMLAttributes_3 & RefAttributes>; +} & InputHTMLAttributes_4 & RefAttributes>; export { dropzoneClasses } @@ -2029,6 +2031,11 @@ xs: PolymorphicClassName; export { extractTextFrom } +// @public (undocumented) +export const Flow: FunctionComponent & FlowProps & { +minColWidth?: string | undefined; +} & RefAttributes>; + export { FocusProps } // @public (undocumented) @@ -2408,7 +2415,7 @@ onSearch?: ((value: string, event?: KeyboardEvent_2 | undefine chipType?: undefined; chipView?: undefined; chipValidator?: undefined; -} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit { view?: string | undefined; }) | undefined; -} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit | undefine chipType?: undefined; chipView?: undefined; chipValidator?: undefined; -} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit { view?: string | undefined; }) | undefined; -} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit | undefine chipType?: undefined; chipView?: undefined; chipValidator?: undefined; -} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit { view?: string | undefined; }) | undefined; -} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit | undefine chipType?: undefined; chipView?: undefined; chipValidator?: undefined; -} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit { view?: string | undefined; }) | undefined; -} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref">) & RefAttributes>; +} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref">) & RefAttributes>; export { MaxLinesProps } @@ -3093,7 +3100,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; @@ -3118,7 +3125,7 @@ onDecrement?: ((value: number) => void) | undefined; } & { segmentation?: string | undefined; inputBackgroundType?: string | undefined; -} & Omit, "onChange" | "size" | "value"> & RefAttributes))>; +} & Omit, "onChange" | "value" | "size"> & RefAttributes))>; export { numberInputClasses } @@ -3286,7 +3293,7 @@ true: PolymorphicClassName; focused: { true: PolymorphicClassName; }; -}> & Filter, "size"> & Omit & RefAttributes>; +}> & Filter, "size"> & Omit & RefAttributes>; // Warning: (ae-forgotten-export) The symbol "RadioboxComponent" needs to be exported by the entry point index.d.ts // 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..625763dfca --- /dev/null +++ b/packages/plasma-b2c/src/components/Flow/Flow.component-test.tsx @@ -0,0 +1,153 @@ +import { mount, CypressTestDecorator, getComponent } from '@salutejs/plasma-cy-utils'; +import React from 'react'; +import styled from 'styled-components'; + +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 FlowCustom = styled(Flow)` + background: var(--surface-transparent-primary); + border-radius: 0.5rem; + `; + + const Demo: React.FC = (props) => { + return ( + + + {new Array(itemsCount).fill(null).map((width, index) => ( + + {index + 1} + + ))} + + + ); + }; + + arrangements.forEach((arrangement) => { + it(`flex-wrap:arrangement:${arrangement}`, () => { + mount( + <> + + + , + ); + + cy.matchImageSnapshot(); + }); + }); + alignments.forEach((alignment) => { + it(`flex-wrap:alignment:${alignment}`, () => { + mount( + <> + + + , + ); + + cy.matchImageSnapshot(); + }); + }); + + arrangements.forEach((arrangement) => { + it(`lines:arrangement:${arrangement}`, () => { + mount( + <> + + + , + ); + + cy.matchImageSnapshot(); + }); + }); + alignments.forEach((alignment) => { + it(`lines:alignment:${alignment}`, () => { + mount( + <> + + + , + ); + + cy.matchImageSnapshot(); + }); + }); + + it('flex-rap:gap', () => { + mount( + <> + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('lines: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 fe271f11e0..090e894d4f 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 57bcde8e0a..27ac788683 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'; @@ -1710,6 +1711,11 @@ xs: PolymorphicClassName; }; }> & Props_2 & RefAttributes>; +// @public (undocumented) +export const Flow: FunctionComponent & FlowProps & { +minColWidth?: string | undefined; +} & 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 f05deb0e4a..5ff428c4d3 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/package-lock.json b/packages/plasma-new-hope/package-lock.json index 43e046f916..f28114a645 100644 --- a/packages/plasma-new-hope/package-lock.json +++ b/packages/plasma-new-hope/package-lock.json @@ -21,6 +21,7 @@ "classnames": "2.5.1", "dayjs": "1.11.11", "focus-visible": "5.2.0", + "lodash.chunk": "4.2.0", "lodash.throttle": "4.1.1", "rc-tree": "5.11.0", "react-draggable": "4.4.3", @@ -53,6 +54,7 @@ "@storybook/react-vite": "7.6.17", "@storybook/theming": "^7.6.17", "@types/lodash": "^4.14.191", + "@types/lodash.chunk": "4.2.9", "@types/lodash.throttle": "4.1.6", "@types/node": "15.14.9", "@types/react": "18.0.28", @@ -6276,6 +6278,15 @@ "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==", "dev": true }, + "node_modules/@types/lodash.chunk": { + "version": "4.2.9", + "resolved": "https://registry.npmjs.org/@types/lodash.chunk/-/lodash.chunk-4.2.9.tgz", + "integrity": "sha512-Z9VtFUSnmT0No/QymqfG9AGbfOA4O5qB/uyP89xeZBqDAsKsB4gQFTqt7d0pHjbsTwtQ4yZObQVHuKlSOhIJ5Q==", + "dev": true, + "dependencies": { + "@types/lodash": "*" + } + }, "node_modules/@types/lodash.throttle": { "version": "4.1.6", "resolved": "https://registry.npmjs.org/@types/lodash.throttle/-/lodash.throttle-4.1.6.tgz", @@ -10690,6 +10701,11 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, + "node_modules/lodash.chunk": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.chunk/-/lodash.chunk-4.2.0.tgz", + "integrity": "sha512-ZzydJKfUHJwHa+hF5X66zLFCBrWn5GeF28OHEr4WVWtNDXlQ/IjWKPBiikqKo2ne0+v6JgCgJ0GzJp8k8bHC7w==" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -19277,6 +19293,15 @@ "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==", "dev": true }, + "@types/lodash.chunk": { + "version": "4.2.9", + "resolved": "https://registry.npmjs.org/@types/lodash.chunk/-/lodash.chunk-4.2.9.tgz", + "integrity": "sha512-Z9VtFUSnmT0No/QymqfG9AGbfOA4O5qB/uyP89xeZBqDAsKsB4gQFTqt7d0pHjbsTwtQ4yZObQVHuKlSOhIJ5Q==", + "dev": true, + "requires": { + "@types/lodash": "*" + } + }, "@types/lodash.throttle": { "version": "4.1.6", "resolved": "https://registry.npmjs.org/@types/lodash.throttle/-/lodash.throttle-4.1.6.tgz", @@ -22609,6 +22634,11 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, + "lodash.chunk": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.chunk/-/lodash.chunk-4.2.0.tgz", + "integrity": "sha512-ZzydJKfUHJwHa+hF5X66zLFCBrWn5GeF28OHEr4WVWtNDXlQ/IjWKPBiikqKo2ne0+v6JgCgJ0GzJp8k8bHC7w==" + }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", diff --git a/packages/plasma-new-hope/package.json b/packages/plasma-new-hope/package.json index 29be588ef7..b85ee87892 100644 --- a/packages/plasma-new-hope/package.json +++ b/packages/plasma-new-hope/package.json @@ -106,6 +106,7 @@ "@storybook/react-vite": "7.6.17", "@storybook/theming": "^7.6.17", "@types/lodash": "^4.14.191", + "@types/lodash.chunk": "4.2.9", "@types/lodash.throttle": "4.1.6", "@types/node": "15.14.9", "@types/react": "18.0.28", @@ -137,6 +138,7 @@ "classnames": "2.5.1", "dayjs": "1.11.11", "focus-visible": "5.2.0", + "lodash.chunk": "4.2.0", "lodash.throttle": "4.1.1", "rc-tree": "5.11.0", "react-draggable": "4.4.3", 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..8e70a5f594 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Flow/Flow.styles.ts @@ -0,0 +1,188 @@ +import { css } from '@linaria/core'; +import { styled } from '@linaria/react'; + +export const base = css` + display: flex; + flex-direction: row; + flex-wrap: wrap; + + gap: var(--plasma-private-gap); + + &.hasChunks { + flex-wrap: nowrap; + flex-direction: column; + + &.vertical { + flex-direction: row; + } + } + + &.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-content: start; + } + + &[data-alignment='center'] { + align-content: center; + } + + &[data-alignment='end'] { + align-content: end; + } + } +`; + +export const Line = styled.div` + display: flex; + flex: 1; + width: 100%; + + gap: var(--plasma-private-gap); + + &.vertical { + flex-direction: column; + height: 100%; + } + + &[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..64cca61211 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Flow/Flow.tsx @@ -0,0 +1,120 @@ +import React, { CSSProperties, forwardRef } from 'react'; +import cls from 'classnames'; +import chunk from 'lodash.chunk'; + +import { RootProps } from '../../engines'; + +import { base, Line } from './Flow.styles'; +import { FlowProps } from './Flow.types'; + +type TempFlowTypes = FlowProps & { + /** + * Минимальный размер колонки для эластичной сетки с динамическим количеством растянутых столбцов + * через `repeat(auto-fill, minmax(${minColWidth}, auto))` + */ + minColWidth?: string; +}; + +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); + + let innerMainAxisGap = + typeof mainAxisGap === 'number' || !Number.isNaN(+mainAxisGap) ? `${mainAxisGap || 0}px` : mainAxisGap; + const innerCrossAxisGap = + typeof crossAxisGap === 'number' || !Number.isNaN(+crossAxisGap) + ? `${crossAxisGap || 0}px` + : crossAxisGap; + + if (arrangement === 'spaceBetween' || arrangement === 'spaceAround') { + innerMainAxisGap = '0'; + } + + const hasChunks = Number(itemsPerLine) > 0; + const chunks: React.ReactNode[] = hasChunks ? chunk(React.Children.toArray(children), itemsPerLine) : []; + + const gap = isVertical + ? `${innerMainAxisGap} ${innerCrossAxisGap}` + : `${innerCrossAxisGap} ${innerMainAxisGap}`; + + const wrapperGap = isVertical ? `0 ${innerCrossAxisGap}` : `${innerCrossAxisGap} 0`; + const lineGap = isVertical ? `${innerMainAxisGap} 0` : `0 ${innerMainAxisGap}`; + + return ( + + {hasChunks && + chunks.map((chunkNode) => ( + + {chunkNode} + + ))} + {!hasChunks && 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..52c22ea080 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Flow/Flow.types.ts @@ -0,0 +1,30 @@ +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?: number | string; + /** + * Фиксированный отступ между элементами по второстепенной оси + */ + crossAxisGap?: number | string; + /** + * Количество элементов по главной оси в отображении grid, при itemsPerLine > 0, + * иначе используется flex и flex-wrap + */ + itemsPerLine?: number; +} 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..1d18b3f7fa --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Flow/Flow.stories.tsx @@ -0,0 +1,134 @@ +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import styled from 'styled-components'; +import { disableProps } from '@salutejs/plasma-sb-utils'; + +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 FlowCustom = styled(Flow)` + background: var(--surface-transparent-primary); + border-radius: 0.5rem; +`; + +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', + }, + }, + containerWidth: { + control: { + type: 'text', + }, + // if: { + // arg: 'orientation', + // eq: 'vertical', + // }, + }, + containerHeight: { + 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: 'text', + }, + }, + minColWidth: { + control: { + type: 'text', + }, + }, + ...disableProps(['minColWidth']), + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + containerWidth: '450px', + containerHeight: '200px', + orientation: 'horizontal', + arrangement: 'start', + alignment: 'start', + mainAxisGap: '10', + crossAxisGap: '10', + itemsPerLine: '', + itemsCount: 6, + }, + render: ({ itemsCount, containerWidth, containerHeight, ...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 d00d4cdfaa..4d28e4fe42 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 372e771422..494a2b7c5a 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'; @@ -167,8 +168,9 @@ import { ImageProps } from '@salutejs/plasma-new-hope/styled-components'; import { ImgHTMLAttributes } from 'react'; import { IndicatorProps } from '@salutejs/plasma-new-hope/styled-components'; import { InputHTMLAttributes } from '@salutejs/plasma-core'; -import { InputHTMLAttributes as InputHTMLAttributes_2 } from '@salutejs/plasma-new-hope/styled-components'; -import { InputHTMLAttributes as InputHTMLAttributes_3 } from 'react'; +import { InputHTMLAttributes as InputHTMLAttributes_2 } from '@salutejs/plasma-hope'; +import { InputHTMLAttributes as InputHTMLAttributes_3 } from '@salutejs/plasma-new-hope/styled-components'; +import { InputHTMLAttributes as InputHTMLAttributes_4 } from 'react'; import type { ItemOption } from '@salutejs/plasma-new-hope'; import { JSXElementConstructor } from 'react'; import { KeyboardEvent as KeyboardEvent_2 } from 'react'; @@ -713,7 +715,7 @@ onSearch?: ((value: string, event?: KeyboardEvent_2 | undefine chipType?: undefined; chipView?: undefined; chipValidator?: undefined; -}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ +}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ titleCaption?: ReactNode; leftHelper?: ReactNode; contentLeft?: ReactElement> | undefined; @@ -745,7 +747,7 @@ chipView?: string | undefined; chipValidator?: ((value: string) => { view?: string | undefined; }) | undefined; -}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ +}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ titleCaption?: ReactNode; leftHelper?: ReactNode; contentLeft?: ReactElement> | undefined; @@ -775,7 +777,7 @@ onSearch?: ((value: string, event?: KeyboardEvent_2 | undefine chipType?: undefined; chipView?: undefined; chipValidator?: undefined; -}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ +}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ titleCaption?: ReactNode; leftHelper?: ReactNode; contentLeft?: ReactElement> | undefined; @@ -807,7 +809,7 @@ chipView?: string | undefined; chipValidator?: ((value: string) => { view?: string | undefined; }) | undefined; -}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ +}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ titleCaption?: ReactNode; leftHelper?: ReactNode; contentLeft?: ReactElement> | undefined; @@ -837,7 +839,7 @@ onSearch?: ((value: string, event?: KeyboardEvent_2 | undefine chipType?: undefined; chipView?: undefined; chipValidator?: undefined; -}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ +}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ titleCaption?: ReactNode; leftHelper?: ReactNode; contentLeft?: ReactElement> | undefined; @@ -869,7 +871,7 @@ chipView?: string | undefined; chipValidator?: ((value: string) => { view?: string | undefined; }) | undefined; -}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ +}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ titleCaption?: ReactNode; leftHelper?: ReactNode; contentLeft?: ReactElement> | undefined; @@ -899,7 +901,7 @@ onSearch?: ((value: string, event?: KeyboardEvent_2 | undefine chipType?: undefined; chipView?: undefined; chipValidator?: undefined; -}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ +}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes) | (BaseProps & Omit<{ titleCaption?: ReactNode; leftHelper?: ReactNode; contentLeft?: ReactElement> | undefined; @@ -931,7 +933,7 @@ chipView?: string | undefined; chipValidator?: ((value: string) => { view?: string | undefined; }) | undefined; -}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes))>; +}, "labelPlacement" | "enumerationType" | "chipType" | "chipView" | "chips" | "onChangeChips" | "chipValidator"> & Omit, "size" | "required"> & RefAttributes))>; // @public (undocumented) export const Avatar: FunctionComponent) => void) | undefined; validator?: ((files: File[]) => ValidatorReturnType) | undefined; onDrop?: FileProcessHandler | undefined; onChoseFiles?: FileProcessHandler | undefined; -} & InputHTMLAttributes_3 & RefAttributes>; +} & InputHTMLAttributes_4 & RefAttributes>; export { dropzoneClasses } @@ -2031,6 +2033,11 @@ xs: PolymorphicClassName; export { extractTextFrom } +// @public (undocumented) +export const Flow: FunctionComponent & FlowProps & { +minColWidth?: string | undefined; +} & RefAttributes>; + export { FocusProps } // @public (undocumented) @@ -2410,7 +2417,7 @@ onSearch?: ((value: string, event?: KeyboardEvent_2 | undefine chipType?: undefined; chipView?: undefined; chipValidator?: undefined; -} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit { view?: string | undefined; }) | undefined; -} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit | undefine chipType?: undefined; chipView?: undefined; chipValidator?: undefined; -} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit { view?: string | undefined; }) | undefined; -} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit | undefine chipType?: undefined; chipView?: undefined; chipValidator?: undefined; -} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit { view?: string | undefined; }) | undefined; -} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit | undefine chipType?: undefined; chipView?: undefined; chipValidator?: undefined; -} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit, "size" | "required"> & RefAttributes & MaskProps, "ref"> | Omit { view?: string | undefined; }) | undefined; -} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref">) & RefAttributes>; +} & Omit, "size" | "required"> & RefAttributes & MaskProps, "ref">) & RefAttributes>; export { MaxLinesProps } @@ -3095,7 +3102,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; @@ -3120,7 +3127,7 @@ onDecrement?: ((value: number) => void) | undefined; } & { segmentation?: string | undefined; inputBackgroundType?: string | undefined; -} & Omit, "onChange" | "size" | "value"> & RefAttributes))>; +} & Omit, "onChange" | "value" | "size"> & RefAttributes))>; export { numberInputClasses } @@ -3288,7 +3295,7 @@ true: PolymorphicClassName; focused: { true: PolymorphicClassName; }; -}> & Filter, "size"> & Omit & RefAttributes>; +}> & Filter, "size"> & Omit & RefAttributes>; // Warning: (ae-forgotten-export) The symbol "RadioboxComponent" needs to be exported by the entry point index.d.ts // 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..9b7bd92747 --- /dev/null +++ b/packages/plasma-web/src/components/Flow/Flow.component-test.tsx @@ -0,0 +1,153 @@ +import { mount, CypressTestDecorator, getComponent } from '@salutejs/plasma-cy-utils'; +import React from 'react'; +import styled from 'styled-components'; + +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 FlowCustom = styled(Flow)` + background: var(--surface-transparent-primary); + border-radius: 0.5rem; + `; + + const Demo: React.FC = (props) => { + return ( + + + {new Array(itemsCount).fill(null).map((width, index) => ( + + {index + 1} + + ))} + + + ); + }; + + arrangements.forEach((arrangement) => { + it(`flex-wrap:arrangement:${arrangement}`, () => { + mount( + <> + + + , + ); + + cy.matchImageSnapshot(); + }); + }); + alignments.forEach((alignment) => { + it(`flex-wrap:alignment:${alignment}`, () => { + mount( + <> + + + , + ); + + cy.matchImageSnapshot(); + }); + }); + + arrangements.forEach((arrangement) => { + it(`lines:arrangement:${arrangement}`, () => { + mount( + <> + + + , + ); + + cy.matchImageSnapshot(); + }); + }); + alignments.forEach((alignment) => { + it(`lines:alignment:${alignment}`, () => { + mount( + <> + + + , + ); + + cy.matchImageSnapshot(); + }); + }); + + it('flex-rap:gap', () => { + mount( + <> + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('lines: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 0cd22e8684..23b34adbff 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..a954e5baa3 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 & { +minColWidth?: string | undefined; +} & 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 2f3fc61d6a..bcdf684ce9 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 { 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'; @@ -271,7 +272,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; @@ -294,7 +295,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; @@ -320,7 +321,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; @@ -344,7 +345,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; @@ -371,7 +372,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; @@ -397,7 +398,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; @@ -420,7 +421,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; @@ -447,7 +448,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; @@ -1042,7 +1043,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; @@ -1063,7 +1064,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; @@ -1187,7 +1188,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; } & { @@ -1202,7 +1203,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; } & { @@ -1543,7 +1544,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 & { +minColWidth?: string | undefined; +} & 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 a794d141d5..74e8122ca4 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 cab398fd01..5c8a2882a2 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'; @@ -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 & { +minColWidth?: string | undefined; +} & 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 1fd42b6244..3d729995c6 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 be2927521f..fd7b970f69 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'; @@ -266,7 +267,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; @@ -309,7 +310,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; @@ -332,7 +333,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; @@ -358,7 +359,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; @@ -382,7 +383,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; @@ -409,7 +410,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; @@ -435,7 +436,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; @@ -458,7 +459,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; @@ -485,7 +486,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; @@ -1080,7 +1081,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; @@ -1101,7 +1102,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; @@ -1233,7 +1234,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; } & { @@ -1248,7 +1249,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; } & { @@ -1591,7 +1592,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 & { +minColWidth?: string | undefined; +} & 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 f05deb0e4a..5ff428c4d3 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 af462f00ba..aa8912dba9 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'; @@ -266,7 +267,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; @@ -309,7 +310,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; @@ -332,7 +333,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; @@ -358,7 +359,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; @@ -382,7 +383,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; @@ -409,7 +410,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; @@ -435,7 +436,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; @@ -458,7 +459,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; @@ -485,7 +486,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; @@ -1080,7 +1081,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; @@ -1101,7 +1102,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; @@ -1233,7 +1234,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; } & { @@ -1248,7 +1249,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; } & { @@ -1591,7 +1592,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 & { +minColWidth?: string | undefined; +} & 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 f05deb0e4a..5ff428c4d3 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}
))} + +
+ ); +} +```