@salutejs/plasma-new-hope 0.72.0-canary.1160.8617165473.0 → 0.72.0-canary.1161.8613087402.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Cell/Cell.js +0 -2
- package/cjs/components/Cell/Cell.js.map +1 -1
- package/cjs/components/Combobox/Combobox.css +10 -10
- package/cjs/components/Combobox/Combobox.styles.js +5 -5
- package/cjs/components/Combobox/Combobox.styles.js.map +1 -1
- package/cjs/components/Combobox/{Combobox.styles_17ei5vn.css → Combobox.styles_dw6hnk.css} +1 -1
- package/cjs/components/Combobox/ui/ComboboxDivider/ComboboxDivider.css +4 -4
- package/cjs/components/Combobox/ui/ComboboxFooter/ComboboxFooter.css +4 -4
- package/cjs/components/Combobox/ui/ComboboxGroup/ComboboxGroup.css +4 -4
- package/cjs/components/Combobox/ui/ComboboxHeader/ComboboxHeader.css +4 -4
- package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.css +4 -4
- package/cjs/components/Dropdown/Dropdown.css +4 -4
- package/cjs/components/Dropdown/Dropdown.js +0 -1
- package/cjs/components/Dropdown/Dropdown.js.map +1 -1
- package/cjs/components/Pagination/Pagination.css +4 -4
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +4 -4
- package/cjs/components/Popover/Popover.css +4 -4
- package/cjs/components/Popover/Popover.js +33 -43
- package/cjs/components/Popover/Popover.js.map +1 -1
- package/cjs/components/Popover/Popover.styles.js +1 -1
- package/cjs/components/Popover/Popover.styles.js.map +1 -1
- package/{es/components/Popover/Popover.styles_1rk9t6z.css → cjs/components/Popover/Popover.styles_1ggb66y.css} +1 -1
- package/cjs/components/Select/Select.css +4 -4
- package/cjs/components/Select/ui/SelectDivider/SelectDivider.css +23 -0
- package/cjs/components/Select/ui/SelectDivider/SelectDivider.js +40 -0
- package/cjs/components/Select/ui/SelectDivider/SelectDivider.js.map +1 -0
- package/cjs/components/Select/ui/SelectDivider/SelectDivider.styles.js +12 -0
- package/cjs/components/Select/ui/SelectDivider/SelectDivider.styles.js.map +1 -0
- package/cjs/components/Select/ui/SelectDivider/SelectDivider.styles_673hj6.css +1 -0
- package/cjs/components/{TextField/variations/_view → Select/ui/SelectDivider/variations/_size}/base.js +2 -2
- package/cjs/components/Select/ui/SelectDivider/variations/_size/base.js.map +1 -0
- package/cjs/components/{TextField/variations/_read-only → Select/ui/SelectDivider/variations/_view}/base.js +2 -2
- package/cjs/components/Select/ui/SelectDivider/variations/_view/base.js.map +1 -0
- package/cjs/components/Select/ui/SelectFooter/SelectFooter.css +23 -0
- package/cjs/components/Select/ui/SelectFooter/SelectFooter.js +40 -0
- package/cjs/components/Select/ui/SelectFooter/SelectFooter.js.map +1 -0
- package/cjs/components/Select/ui/SelectFooter/SelectFooter.styles.js +12 -0
- package/cjs/components/Select/ui/SelectFooter/SelectFooter.styles.js.map +1 -0
- package/cjs/components/Select/ui/SelectFooter/SelectFooter.styles_11hk6tt.css +1 -0
- package/cjs/components/{TextField → Select/ui/SelectFooter}/variations/_size/base.js +2 -2
- package/cjs/components/Select/ui/SelectFooter/variations/_size/base.js.map +1 -0
- package/cjs/components/Select/ui/SelectFooter/variations/_size/base_x642ct.css +1 -0
- package/cjs/components/Select/ui/SelectFooter/variations/_view/base.js +9 -0
- package/cjs/components/Select/ui/SelectFooter/variations/_view/base.js.map +1 -0
- package/cjs/components/Select/ui/SelectFooter/variations/_view/base_x642ct.css +1 -0
- package/cjs/components/Select/ui/SelectGroup/SelectGroup.css +23 -0
- package/cjs/components/Select/ui/SelectGroup/SelectGroup.js +40 -0
- package/cjs/components/Select/ui/SelectGroup/SelectGroup.js.map +1 -0
- package/cjs/components/Select/ui/SelectGroup/SelectGroup.styles.js +12 -0
- package/cjs/components/Select/ui/SelectGroup/SelectGroup.styles.js.map +1 -0
- package/cjs/components/Select/ui/SelectGroup/SelectGroup.styles_mktu7e.css +1 -0
- package/cjs/components/Select/ui/SelectGroup/variations/_size/base.js +9 -0
- package/cjs/components/Select/ui/SelectGroup/variations/_size/base.js.map +1 -0
- package/cjs/components/Select/ui/SelectGroup/variations/_size/base_x642ct.css +1 -0
- package/cjs/components/Select/ui/SelectGroup/variations/_view/base.js +9 -0
- package/cjs/components/Select/ui/SelectGroup/variations/_view/base.js.map +1 -0
- package/cjs/components/Select/ui/SelectGroup/variations/_view/base_x642ct.css +1 -0
- package/cjs/components/Select/ui/SelectHeader/SelectHeader.css +23 -0
- package/cjs/components/Select/ui/SelectHeader/SelectHeader.js +40 -0
- package/cjs/components/Select/ui/SelectHeader/SelectHeader.js.map +1 -0
- package/cjs/components/Select/ui/SelectHeader/SelectHeader.styles.js +12 -0
- package/cjs/components/Select/ui/SelectHeader/SelectHeader.styles.js.map +1 -0
- package/cjs/components/Select/ui/SelectHeader/SelectHeader.styles_24gqog.css +1 -0
- package/cjs/components/Select/ui/SelectHeader/variations/_size/base.js +9 -0
- package/cjs/components/Select/ui/SelectHeader/variations/_size/base.js.map +1 -0
- package/cjs/components/Select/ui/SelectHeader/variations/_size/base_x642ct.css +1 -0
- package/cjs/components/Select/ui/SelectHeader/variations/_view/base.js +9 -0
- package/cjs/components/Select/ui/SelectHeader/variations/_view/base.js.map +1 -0
- package/cjs/components/Select/ui/SelectHeader/variations/_view/base_x642ct.css +1 -0
- package/cjs/components/Select/ui/SelectItem/SelectItem.css +4 -4
- package/cjs/components/Select/ui/SelectTarget/SelectTarget.js +2 -1
- package/cjs/components/Select/ui/SelectTarget/SelectTarget.js.map +1 -1
- package/cjs/components/TextField/TextField.js +40 -166
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/components/TextField/TextField.styles.js +11 -27
- package/cjs/components/TextField/TextField.styles.js.map +1 -1
- package/cjs/components/TextField/TextField.styles_2qw1n8.css +5 -0
- package/cjs/components/TextField/TextField.tokens.js +20 -68
- package/cjs/components/TextField/TextField.tokens.js.map +1 -1
- package/cjs/components/TextField/TextField_1lzb2r1.css +1 -0
- package/cjs/components/TextField/{variations/_disabled → _disabled}/base.js +2 -2
- package/cjs/components/TextField/_disabled/base.js.map +1 -0
- package/cjs/components/TextField/_disabled/base_so3w81.css +1 -0
- package/cjs/components/TextField/{variations/_label-placement → _label-placement}/base.js +1 -1
- package/cjs/components/TextField/_label-placement/base.js.map +1 -0
- package/cjs/components/TextField/_label-placement/base_x642ct.css +1 -0
- package/cjs/components/TextField/{variations/_label-placement → _label-placement}/inner.js +2 -2
- package/cjs/components/TextField/_label-placement/inner.js.map +1 -0
- package/cjs/components/TextField/_label-placement/inner_1tyuicp.css +1 -0
- package/cjs/components/TextField/{variations/_label-placement → _label-placement}/outer.js +2 -2
- package/cjs/components/TextField/_label-placement/outer.js.map +1 -0
- package/cjs/components/TextField/_label-placement/outer_19ekaek.css +1 -0
- package/cjs/components/TextField/_size/base.js +9 -0
- package/cjs/components/TextField/_size/base.js.map +1 -0
- package/cjs/components/TextField/_size/base_b5smyu.css +1 -0
- package/cjs/components/TextField/_view/base.js +9 -0
- package/cjs/components/TextField/_view/base.js.map +1 -0
- package/cjs/components/TextField/_view/base_5bqzed.css +1 -0
- package/cjs/index.css +42 -49
- package/cjs/index.js +41 -6
- package/cjs/index.js.map +1 -1
- package/cjs/utils/index.js +13 -1
- package/cjs/utils/index.js.map +1 -1
- package/cjs/utils/react.js +12 -2
- package/cjs/utils/react.js.map +1 -1
- package/es/components/Cell/Cell.js +0 -2
- package/es/components/Cell/Cell.js.map +1 -1
- package/es/components/Combobox/Combobox.css +10 -10
- package/es/components/Combobox/Combobox.styles.js +5 -5
- package/es/components/Combobox/Combobox.styles.js.map +1 -1
- package/es/components/Combobox/{Combobox.styles_17ei5vn.css → Combobox.styles_dw6hnk.css} +1 -1
- package/es/components/Combobox/ui/ComboboxDivider/ComboboxDivider.css +4 -4
- package/es/components/Combobox/ui/ComboboxFooter/ComboboxFooter.css +4 -4
- package/es/components/Combobox/ui/ComboboxGroup/ComboboxGroup.css +4 -4
- package/es/components/Combobox/ui/ComboboxHeader/ComboboxHeader.css +4 -4
- package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.css +4 -4
- package/es/components/Dropdown/Dropdown.css +4 -4
- package/es/components/Dropdown/Dropdown.js +0 -1
- package/es/components/Dropdown/Dropdown.js.map +1 -1
- package/es/components/Pagination/Pagination.css +4 -4
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +4 -4
- package/es/components/Popover/Popover.css +4 -4
- package/es/components/Popover/Popover.js +33 -43
- package/es/components/Popover/Popover.js.map +1 -1
- package/es/components/Popover/Popover.styles.js +1 -1
- package/es/components/Popover/Popover.styles.js.map +1 -1
- package/{cjs/components/Popover/Popover.styles_1rk9t6z.css → es/components/Popover/Popover.styles_1ggb66y.css} +1 -1
- package/es/components/Select/Select.css +4 -4
- package/es/components/Select/ui/SelectDivider/SelectDivider.css +23 -0
- package/es/components/Select/ui/SelectDivider/SelectDivider.js +35 -0
- package/es/components/Select/ui/SelectDivider/SelectDivider.js.map +1 -0
- package/es/components/Select/ui/SelectDivider/SelectDivider.styles.js +7 -0
- package/es/components/Select/ui/SelectDivider/SelectDivider.styles.js.map +1 -0
- package/es/components/Select/ui/SelectDivider/SelectDivider.styles_673hj6.css +1 -0
- package/es/components/{TextField/variations/_view → Select/ui/SelectDivider/variations/_size}/base.js +2 -2
- package/es/components/Select/ui/SelectDivider/variations/_size/base.js.map +1 -0
- package/es/components/Select/ui/SelectDivider/variations/_size/base_x642ct.css +1 -0
- package/es/components/Select/ui/SelectDivider/variations/_view/base.js +5 -0
- package/es/components/Select/ui/SelectDivider/variations/_view/base.js.map +1 -0
- package/es/components/Select/ui/SelectDivider/variations/_view/base_x642ct.css +1 -0
- package/es/components/Select/ui/SelectFooter/SelectFooter.css +23 -0
- package/es/components/Select/ui/SelectFooter/SelectFooter.js +35 -0
- package/es/components/Select/ui/SelectFooter/SelectFooter.js.map +1 -0
- package/es/components/Select/ui/SelectFooter/SelectFooter.styles.js +7 -0
- package/es/components/Select/ui/SelectFooter/SelectFooter.styles.js.map +1 -0
- package/es/components/Select/ui/SelectFooter/SelectFooter.styles_11hk6tt.css +1 -0
- package/es/components/Select/ui/SelectFooter/variations/_size/base.js +5 -0
- package/es/components/Select/ui/SelectFooter/variations/_size/base.js.map +1 -0
- package/es/components/Select/ui/SelectFooter/variations/_size/base_x642ct.css +1 -0
- package/es/components/Select/ui/SelectFooter/variations/_view/base.js +5 -0
- package/es/components/Select/ui/SelectFooter/variations/_view/base.js.map +1 -0
- package/es/components/Select/ui/SelectFooter/variations/_view/base_x642ct.css +1 -0
- package/es/components/Select/ui/SelectGroup/SelectGroup.css +23 -0
- package/es/components/Select/ui/SelectGroup/SelectGroup.js +35 -0
- package/es/components/Select/ui/SelectGroup/SelectGroup.js.map +1 -0
- package/es/components/Select/ui/SelectGroup/SelectGroup.styles.js +7 -0
- package/es/components/Select/ui/SelectGroup/SelectGroup.styles.js.map +1 -0
- package/es/components/Select/ui/SelectGroup/SelectGroup.styles_mktu7e.css +1 -0
- package/es/components/Select/ui/SelectGroup/variations/_size/base.js +5 -0
- package/es/components/Select/ui/SelectGroup/variations/_size/base.js.map +1 -0
- package/es/components/Select/ui/SelectGroup/variations/_size/base_x642ct.css +1 -0
- package/es/components/Select/ui/SelectGroup/variations/_view/base.js +5 -0
- package/es/components/Select/ui/SelectGroup/variations/_view/base.js.map +1 -0
- package/es/components/Select/ui/SelectGroup/variations/_view/base_x642ct.css +1 -0
- package/es/components/Select/ui/SelectHeader/SelectHeader.css +23 -0
- package/es/components/Select/ui/SelectHeader/SelectHeader.js +35 -0
- package/es/components/Select/ui/SelectHeader/SelectHeader.js.map +1 -0
- package/es/components/Select/ui/SelectHeader/SelectHeader.styles.js +7 -0
- package/es/components/Select/ui/SelectHeader/SelectHeader.styles.js.map +1 -0
- package/es/components/Select/ui/SelectHeader/SelectHeader.styles_24gqog.css +1 -0
- package/es/components/Select/ui/SelectHeader/variations/_size/base.js +5 -0
- package/es/components/Select/ui/SelectHeader/variations/_size/base.js.map +1 -0
- package/es/components/Select/ui/SelectHeader/variations/_size/base_x642ct.css +1 -0
- package/es/components/Select/ui/SelectHeader/variations/_view/base.js +5 -0
- package/es/components/Select/ui/SelectHeader/variations/_view/base.js.map +1 -0
- package/es/components/Select/ui/SelectHeader/variations/_view/base_x642ct.css +1 -0
- package/es/components/Select/ui/SelectItem/SelectItem.css +4 -4
- package/es/components/Select/ui/SelectTarget/SelectTarget.js +2 -1
- package/es/components/Select/ui/SelectTarget/SelectTarget.js.map +1 -1
- package/es/components/TextField/TextField.js +44 -169
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/components/TextField/TextField.styles.js +12 -25
- package/es/components/TextField/TextField.styles.js.map +1 -1
- package/es/components/TextField/TextField.styles_2qw1n8.css +5 -0
- package/es/components/TextField/TextField.tokens.js +21 -68
- package/es/components/TextField/TextField.tokens.js.map +1 -1
- package/es/components/TextField/TextField_1lzb2r1.css +1 -0
- package/es/components/TextField/_disabled/base.js +5 -0
- package/es/components/TextField/_disabled/base.js.map +1 -0
- package/es/components/TextField/_disabled/base_so3w81.css +1 -0
- package/es/components/TextField/{variations/_label-placement → _label-placement}/base.js +1 -1
- package/es/components/TextField/_label-placement/base.js.map +1 -0
- package/es/components/TextField/_label-placement/base_x642ct.css +1 -0
- package/es/components/TextField/_label-placement/inner.js +5 -0
- package/es/components/TextField/_label-placement/inner.js.map +1 -0
- package/es/components/TextField/_label-placement/inner_1tyuicp.css +1 -0
- package/es/components/TextField/_label-placement/outer.js +5 -0
- package/es/components/TextField/_label-placement/outer.js.map +1 -0
- package/es/components/TextField/_label-placement/outer_19ekaek.css +1 -0
- package/es/components/TextField/_size/base.js +5 -0
- package/es/components/TextField/_size/base.js.map +1 -0
- package/es/components/TextField/_size/base_b5smyu.css +1 -0
- package/es/components/TextField/_view/base.js +5 -0
- package/es/components/TextField/_view/base.js.map +1 -0
- package/es/components/TextField/_view/base_5bqzed.css +1 -0
- package/es/index.css +42 -49
- package/es/index.js +15 -2
- package/es/index.js.map +1 -1
- package/es/utils/index.js +11 -2
- package/es/utils/index.js.map +1 -1
- package/es/utils/react.js +9 -2
- package/es/utils/react.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Cell/Cell.js +0 -2
- package/styled-components/cjs/components/Combobox/Combobox.styles.js +1 -1
- package/styled-components/cjs/components/Dropdown/Dropdown.js +0 -1
- package/styled-components/cjs/components/Popover/Popover.js +33 -43
- package/styled-components/cjs/components/Popover/Popover.styles.js +1 -1
- package/styled-components/cjs/components/Select/ui/SelectTarget/SelectTarget.js +2 -1
- package/styled-components/cjs/components/TextField/TextField.js +43 -173
- package/styled-components/cjs/components/TextField/TextField.styles.js +10 -18
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +0 -24
- package/styled-components/cjs/components/TextField/TextField.tokens.js +21 -68
- package/styled-components/cjs/components/TextField/_disabled/base.js +9 -0
- package/styled-components/cjs/components/TextField/_label-placement/inner.js +10 -0
- package/styled-components/cjs/components/TextField/{variations/_label-placement → _label-placement}/outer.js +3 -3
- package/styled-components/cjs/components/TextField/_size/base.js +10 -0
- package/styled-components/cjs/components/TextField/_view/base.js +10 -0
- package/styled-components/cjs/components/TextField/index.js +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Popover/Popover.stories.tsx +0 -7
- package/styled-components/cjs/index.js +22 -0
- package/styled-components/es/components/Cell/Cell.js +0 -2
- package/styled-components/es/components/Combobox/Combobox.styles.js +1 -1
- package/styled-components/es/components/Dropdown/Dropdown.js +0 -1
- package/styled-components/es/components/Popover/Popover.js +33 -43
- package/styled-components/es/components/Popover/Popover.styles.js +1 -1
- package/styled-components/es/components/Select/ui/SelectTarget/SelectTarget.js +2 -1
- package/styled-components/es/components/TextField/TextField.js +47 -177
- package/styled-components/es/components/TextField/TextField.styles.js +9 -17
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +0 -24
- package/styled-components/es/components/TextField/TextField.tokens.js +20 -67
- package/styled-components/es/components/TextField/_disabled/base.js +3 -0
- package/styled-components/es/components/TextField/_label-placement/inner.js +4 -0
- package/styled-components/es/components/TextField/_label-placement/outer.js +4 -0
- package/styled-components/es/components/TextField/_size/base.js +4 -0
- package/styled-components/es/components/TextField/_view/base.js +4 -0
- package/styled-components/es/components/TextField/index.js +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Popover/Popover.stories.tsx +0 -7
- package/styled-components/es/index.js +2 -0
- package/types/components/Cell/Cell.d.ts.map +1 -1
- package/types/components/Combobox/Combobox.styles.d.ts +2 -8
- package/types/components/Combobox/Combobox.styles.d.ts.map +1 -1
- package/types/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/types/components/Dropdown/Dropdown.styles.d.ts +1 -7
- package/types/components/Dropdown/Dropdown.styles.d.ts.map +1 -1
- package/types/components/Popover/Popover.d.ts +2 -2
- package/types/components/Popover/Popover.d.ts.map +1 -1
- package/types/components/Popover/Popover.styles.d.ts.map +1 -1
- package/types/components/Popover/Popover.types.d.ts +12 -19
- package/types/components/Popover/Popover.types.d.ts.map +1 -1
- package/types/components/Select/Select.styles.d.ts +2 -8
- package/types/components/Select/Select.styles.d.ts.map +1 -1
- package/types/components/Select/ui/SelectTarget/SelectTarget.d.ts.map +1 -1
- package/types/components/TextField/TextField.d.ts +3 -8
- package/types/components/TextField/TextField.d.ts.map +1 -1
- package/types/components/TextField/TextField.styles.d.ts +3 -6
- package/types/components/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/TextField/TextField.tokens.d.ts +8 -57
- package/types/components/TextField/TextField.tokens.d.ts.map +1 -1
- package/types/components/TextField/TextField.types.d.ts +6 -71
- package/types/components/TextField/TextField.types.d.ts.map +1 -1
- package/types/components/TextField/_disabled/base.d.ts.map +1 -0
- package/types/components/TextField/_label-placement/base.d.ts.map +1 -0
- package/types/components/TextField/_label-placement/index.d.ts.map +1 -0
- package/types/components/TextField/_label-placement/inner.d.ts.map +1 -0
- package/types/components/TextField/_label-placement/outer.d.ts.map +1 -0
- package/types/components/TextField/_size/base.d.ts.map +1 -0
- package/types/components/TextField/_view/base.d.ts.map +1 -0
- package/types/components/TextField/index.d.ts +2 -3
- package/types/components/TextField/index.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Popover/Popover.d.ts +1 -7
- package/types/examples/plasma_b2c/components/Popover/Popover.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Popover/Popover.d.ts +1 -7
- package/types/examples/plasma_web/components/Popover/Popover.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Popover/Popover.d.ts +1 -7
- package/types/examples/sds_engineer/components/Popover/Popover.d.ts.map +1 -1
- package/types/index.d.ts +2 -0
- package/types/index.d.ts.map +1 -1
- package/cjs/components/TextField/TextField.styles_1b1mddp.css +0 -8
- package/cjs/components/TextField/TextField_wctd2m.css +0 -1
- package/cjs/components/TextField/hooks/useKeyNavigation.js +0 -132
- package/cjs/components/TextField/hooks/useKeyNavigation.js.map +0 -1
- package/cjs/components/TextField/ui/TextFieldChip/TextFieldChip.css +0 -19
- package/cjs/components/TextField/ui/TextFieldChip/TextFieldChip.js +0 -38
- package/cjs/components/TextField/ui/TextFieldChip/TextFieldChip.js.map +0 -1
- package/cjs/components/TextField/ui/TextFieldChip/TextFieldChip.styles.js +0 -26
- package/cjs/components/TextField/ui/TextFieldChip/TextFieldChip.styles.js.map +0 -1
- package/cjs/components/TextField/ui/TextFieldChip/TextFieldChip.styles_1y8n7la.css +0 -1
- package/cjs/components/TextField/variations/_disabled/base.js.map +0 -1
- package/cjs/components/TextField/variations/_disabled/base_1tnjoy9.css +0 -1
- package/cjs/components/TextField/variations/_label-placement/base.js.map +0 -1
- package/cjs/components/TextField/variations/_label-placement/inner.js.map +0 -1
- package/cjs/components/TextField/variations/_label-placement/inner_gqlcj2.css +0 -1
- package/cjs/components/TextField/variations/_label-placement/outer.js.map +0 -1
- package/cjs/components/TextField/variations/_label-placement/outer_is41nj.css +0 -1
- package/cjs/components/TextField/variations/_read-only/base.js.map +0 -1
- package/cjs/components/TextField/variations/_read-only/base_134hshp.css +0 -1
- package/cjs/components/TextField/variations/_size/base.js.map +0 -1
- package/cjs/components/TextField/variations/_size/base_1khzr9t.css +0 -1
- package/cjs/components/TextField/variations/_view/base.js.map +0 -1
- package/cjs/components/TextField/variations/_view/base_1qd77x6.css +0 -1
- package/es/components/TextField/TextField.styles_1b1mddp.css +0 -8
- package/es/components/TextField/TextField_wctd2m.css +0 -1
- package/es/components/TextField/hooks/useKeyNavigation.js +0 -127
- package/es/components/TextField/hooks/useKeyNavigation.js.map +0 -1
- package/es/components/TextField/ui/TextFieldChip/TextFieldChip.css +0 -19
- package/es/components/TextField/ui/TextFieldChip/TextFieldChip.js +0 -34
- package/es/components/TextField/ui/TextFieldChip/TextFieldChip.js.map +0 -1
- package/es/components/TextField/ui/TextFieldChip/TextFieldChip.styles.js +0 -22
- package/es/components/TextField/ui/TextFieldChip/TextFieldChip.styles.js.map +0 -1
- package/es/components/TextField/ui/TextFieldChip/TextFieldChip.styles_1y8n7la.css +0 -1
- package/es/components/TextField/variations/_disabled/base.js +0 -5
- package/es/components/TextField/variations/_disabled/base.js.map +0 -1
- package/es/components/TextField/variations/_disabled/base_1tnjoy9.css +0 -1
- package/es/components/TextField/variations/_label-placement/base.js.map +0 -1
- package/es/components/TextField/variations/_label-placement/inner.js +0 -5
- package/es/components/TextField/variations/_label-placement/inner.js.map +0 -1
- package/es/components/TextField/variations/_label-placement/inner_gqlcj2.css +0 -1
- package/es/components/TextField/variations/_label-placement/outer.js +0 -5
- package/es/components/TextField/variations/_label-placement/outer.js.map +0 -1
- package/es/components/TextField/variations/_label-placement/outer_is41nj.css +0 -1
- package/es/components/TextField/variations/_read-only/base.js +0 -5
- package/es/components/TextField/variations/_read-only/base.js.map +0 -1
- package/es/components/TextField/variations/_read-only/base_134hshp.css +0 -1
- package/es/components/TextField/variations/_size/base.js +0 -5
- package/es/components/TextField/variations/_size/base.js.map +0 -1
- package/es/components/TextField/variations/_size/base_1khzr9t.css +0 -1
- package/es/components/TextField/variations/_view/base.js.map +0 -1
- package/es/components/TextField/variations/_view/base_1qd77x6.css +0 -1
- package/styled-components/cjs/components/TextField/hooks/index.js +0 -12
- package/styled-components/cjs/components/TextField/hooks/useKeyNavigation.js +0 -138
- package/styled-components/cjs/components/TextField/ui/TextFieldChip/TextFieldChip.js +0 -39
- package/styled-components/cjs/components/TextField/ui/TextFieldChip/TextFieldChip.styles.js +0 -25
- package/styled-components/cjs/components/TextField/ui/TextFieldChip/TextFieldChip.types.js +0 -5
- package/styled-components/cjs/components/TextField/ui/index.js +0 -12
- package/styled-components/cjs/components/TextField/variations/_disabled/base.js +0 -10
- package/styled-components/cjs/components/TextField/variations/_label-placement/inner.js +0 -10
- package/styled-components/cjs/components/TextField/variations/_read-only/base.js +0 -10
- package/styled-components/cjs/components/TextField/variations/_read-only/tokens.json +0 -1
- package/styled-components/cjs/components/TextField/variations/_size/base.js +0 -10
- package/styled-components/cjs/components/TextField/variations/_view/base.js +0 -10
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +0 -43
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.js +0 -11
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +0 -181
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.config.js +0 -40
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.js +0 -11
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -181
- package/styled-components/cjs/examples/sds_engineer/components/TextField/TextField.config.js +0 -43
- package/styled-components/cjs/examples/sds_engineer/components/TextField/TextField.js +0 -11
- package/styled-components/cjs/examples/sds_engineer/components/TextField/TextField.stories.tsx +0 -181
- package/styled-components/es/components/TextField/hooks/index.js +0 -1
- package/styled-components/es/components/TextField/hooks/useKeyNavigation.js +0 -132
- package/styled-components/es/components/TextField/ui/TextFieldChip/TextFieldChip.js +0 -30
- package/styled-components/es/components/TextField/ui/TextFieldChip/TextFieldChip.styles.js +0 -19
- package/styled-components/es/components/TextField/ui/TextFieldChip/TextFieldChip.types.js +0 -1
- package/styled-components/es/components/TextField/ui/index.js +0 -1
- package/styled-components/es/components/TextField/variations/_disabled/base.js +0 -4
- package/styled-components/es/components/TextField/variations/_label-placement/inner.js +0 -4
- package/styled-components/es/components/TextField/variations/_label-placement/outer.js +0 -4
- package/styled-components/es/components/TextField/variations/_read-only/base.js +0 -4
- package/styled-components/es/components/TextField/variations/_read-only/tokens.json +0 -1
- package/styled-components/es/components/TextField/variations/_size/base.js +0 -4
- package/styled-components/es/components/TextField/variations/_view/base.js +0 -4
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +0 -37
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.js +0 -5
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +0 -181
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js +0 -34
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.js +0 -5
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -181
- package/styled-components/es/examples/sds_engineer/components/TextField/TextField.config.js +0 -37
- package/styled-components/es/examples/sds_engineer/components/TextField/TextField.js +0 -5
- package/styled-components/es/examples/sds_engineer/components/TextField/TextField.stories.tsx +0 -181
- package/types/components/TextField/hooks/index.d.ts +0 -2
- package/types/components/TextField/hooks/index.d.ts.map +0 -1
- package/types/components/TextField/hooks/useKeyNavigation.d.ts +0 -17
- package/types/components/TextField/hooks/useKeyNavigation.d.ts.map +0 -1
- package/types/components/TextField/ui/TextFieldChip/TextFieldChip.d.ts +0 -7
- package/types/components/TextField/ui/TextFieldChip/TextFieldChip.d.ts.map +0 -1
- package/types/components/TextField/ui/TextFieldChip/TextFieldChip.styles.d.ts +0 -3
- package/types/components/TextField/ui/TextFieldChip/TextFieldChip.styles.d.ts.map +0 -1
- package/types/components/TextField/ui/TextFieldChip/TextFieldChip.types.d.ts +0 -37
- package/types/components/TextField/ui/TextFieldChip/TextFieldChip.types.d.ts.map +0 -1
- package/types/components/TextField/ui/index.d.ts +0 -2
- package/types/components/TextField/ui/index.d.ts.map +0 -1
- package/types/components/TextField/variations/_disabled/base.d.ts.map +0 -1
- package/types/components/TextField/variations/_label-placement/base.d.ts.map +0 -1
- package/types/components/TextField/variations/_label-placement/index.d.ts.map +0 -1
- package/types/components/TextField/variations/_label-placement/inner.d.ts.map +0 -1
- package/types/components/TextField/variations/_label-placement/outer.d.ts.map +0 -1
- package/types/components/TextField/variations/_read-only/base.d.ts.map +0 -1
- package/types/components/TextField/variations/_size/base.d.ts.map +0 -1
- package/types/components/TextField/variations/_view/base.d.ts +0 -2
- package/types/components/TextField/variations/_view/base.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/TextField/TextField.config.d.ts +0 -32
- package/types/examples/plasma_b2c/components/TextField/TextField.config.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +0 -60
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +0 -1
- package/types/examples/plasma_web/components/TextField/TextField.config.d.ts +0 -32
- package/types/examples/plasma_web/components/TextField/TextField.config.d.ts.map +0 -1
- package/types/examples/plasma_web/components/TextField/TextField.d.ts +0 -60
- package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +0 -1
- package/types/examples/sds_engineer/components/TextField/TextField.config.d.ts +0 -32
- package/types/examples/sds_engineer/components/TextField/TextField.config.d.ts.map +0 -1
- package/types/examples/sds_engineer/components/TextField/TextField.d.ts +0 -60
- package/types/examples/sds_engineer/components/TextField/TextField.d.ts.map +0 -1
- /package/cjs/components/{TextField/variations/_label-placement → Select/ui/SelectDivider/variations/_size}/base_x642ct.css +0 -0
- /package/{es/components/TextField/variations/_label-placement → cjs/components/Select/ui/SelectDivider/variations/_view}/base_x642ct.css +0 -0
- /package/styled-components/cjs/components/TextField/{variations/_disabled → _disabled}/tokens.json +0 -0
- /package/styled-components/cjs/components/TextField/{variations/_label-placement → _label-placement}/base.js +0 -0
- /package/styled-components/cjs/components/TextField/{variations/_label-placement → _label-placement}/index.js +0 -0
- /package/styled-components/cjs/components/TextField/{variations/_size → _size}/tokens.json +0 -0
- /package/styled-components/cjs/components/TextField/{variations/_view → _view}/tokens.json +0 -0
- /package/styled-components/es/components/TextField/{variations/_disabled → _disabled}/tokens.json +0 -0
- /package/styled-components/es/components/TextField/{variations/_label-placement → _label-placement}/base.js +0 -0
- /package/styled-components/es/components/TextField/{variations/_label-placement → _label-placement}/index.js +0 -0
- /package/styled-components/es/components/TextField/{variations/_size → _size}/tokens.json +0 -0
- /package/styled-components/es/components/TextField/{variations/_view → _view}/tokens.json +0 -0
- /package/types/components/TextField/{variations/_disabled → _disabled}/base.d.ts +0 -0
- /package/types/components/TextField/{variations/_label-placement → _label-placement}/base.d.ts +0 -0
- /package/types/components/TextField/{variations/_label-placement → _label-placement}/index.d.ts +0 -0
- /package/types/components/TextField/{variations/_label-placement → _label-placement}/inner.d.ts +0 -0
- /package/types/components/TextField/{variations/_label-placement → _label-placement}/outer.d.ts +0 -0
- /package/types/components/TextField/{variations/_read-only → _size}/base.d.ts +0 -0
- /package/types/components/TextField/{variations/_size → _view}/base.d.ts +0 -0
@@ -1,4 +0,0 @@
|
|
1
|
-
import { css } from 'styled-components';
|
2
|
-
import { tokens } from '../../TextField.tokens';
|
3
|
-
import { Input } from '../../TextField.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["&[disabled]{opacity:var(", ");cursor:not-allowed;", "{cursor:not-allowed;min-width:unset;}}"], tokens.disabledOpacity, Input);
|
@@ -1,4 +0,0 @@
|
|
1
|
-
import { css } from 'styled-components';
|
2
|
-
import { Input, Label } from '../../TextField.styles';
|
3
|
-
import { tokens } from '../../TextField.tokens';
|
4
|
-
export var labelPlacement_inner = /*#__PURE__*/css(["", "{padding:var(", ");}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}"], Input, tokens.contentLabelInnerPadding, Input, Label, Input, Label, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Input, Input, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.height);
|
@@ -1,4 +0,0 @@
|
|
1
|
-
import { css } from 'styled-components';
|
2
|
-
import { Label } from '../../TextField.styles';
|
3
|
-
import { tokens } from '../../TextField.tokens';
|
4
|
-
export var labelPlacement_outer = /*#__PURE__*/css(["", "{display:block;margin-bottom:var(", ");color:var(", ");}"], Label, tokens.labelOffset, tokens.labelColor);
|
@@ -1,4 +0,0 @@
|
|
1
|
-
import { css } from 'styled-components';
|
2
|
-
import { tokens } from '../../TextField.tokens';
|
3
|
-
import { Input, InputWrapper, Label, LeftHelper } from '../../TextField.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["&[readonly]{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}", ":hover{background-color:var(", ");}", "::placeholder{color:var(", ");}", "{color:var(", ");cursor:default;min-width:unset;}", "{color:var(", ");}", "{color:var(", ");}}"], InputWrapper, tokens.colorReadOnly, /*#__PURE__*/String(tokens.backgroundColorReadOnly), /*#__PURE__*/String(tokens.borderWidth), /*#__PURE__*/String(tokens.borderColorReadOnly), InputWrapper, tokens.backgroundColorReadOnly, Input, tokens.placeholderColorReadOnly, Input, tokens.colorReadOnly, LeftHelper, tokens.leftHelperColorReadOnly, Label, tokens.labelColorReadOnly);
|
@@ -1 +0,0 @@
|
|
1
|
-
[]
|
@@ -1,4 +0,0 @@
|
|
1
|
-
import { css } from 'styled-components';
|
2
|
-
import { classes, tokens } from '../../TextField.tokens';
|
3
|
-
import { Input, InputWrapper, Label, LeftHelper } from '../../TextField.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{height:var(", ");border-radius:var(", ");padding:var(", ");&.", "{padding-top:var(", ");padding-bottom:var(", ");}&.", "{padding-left:var(", ");}&.", "{padding-right:var(", ");}}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{margin-top:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], Input, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, InputWrapper, tokens.height, tokens.borderRadius, tokens.padding, classes.hasChips, tokens.paddingWithChips, tokens.paddingWithChips, classes.hasEmptyContentLeft, tokens.paddingWithChips, classes.hasEmptyContentRight, tokens.paddingWithChips, Label, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, LeftHelper, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight);
|
@@ -1,4 +0,0 @@
|
|
1
|
-
import { css } from 'styled-components';
|
2
|
-
import { tokens } from '../../TextField.tokens';
|
3
|
-
import { Input, InputWrapper, LeftHelper } from '../../TextField.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["", "{--plasma_private-textfield-border-color:var(", ");--plasma_private-textfield-bg-color:var(", ");color:var(", ");background-color:var(--plasma_private-textfield-bg-color);box-shadow:inset 0 0 0 var(", ") var(--plasma_private-textfield-border-color);caret-color:var(", ");transition:background-color 0.1s ease-in,color 0.1s ease-in,box-shadow 0.1s ease-in;}", ":hover{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", ":focus-within{--plasma_private-textfield-border-color:var(", ",var(", "));--plasma_private-textfield-bg-color:var( ", ",var(", ") );}", "::placeholder{color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}"], InputWrapper, /*#__PURE__*/String(tokens.borderColor), /*#__PURE__*/String(tokens.backgroundColor), tokens.color, tokens.borderWidth, tokens.caretColor, InputWrapper, tokens.borderColorHover, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorHover, /*#__PURE__*/String(tokens.backgroundColor), InputWrapper, tokens.borderColorFocus, /*#__PURE__*/String(tokens.borderColor), tokens.backgroundColorFocus, /*#__PURE__*/String(tokens.backgroundColor), Input, tokens.placeholderColor, Input, tokens.color, LeftHelper, tokens.leftHelperColor);
|
@@ -1,37 +0,0 @@
|
|
1
|
-
import { css } from 'styled-components';
|
2
|
-
import { textFieldTokens as tokens, textField_labelPlacement_inner as labelPlacement_inner, textField_labelPlacement_outer as labelPlacement_outer } from '../../../../components/TextField';
|
3
|
-
export var config = {
|
4
|
-
defaults: {
|
5
|
-
view: 'default',
|
6
|
-
size: 'l',
|
7
|
-
labelPlacement: 'outer'
|
8
|
-
},
|
9
|
-
variations: {
|
10
|
-
view: {
|
11
|
-
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
|
12
|
-
// TODO заменить --surface-transparent-positive на корректный токен
|
13
|
-
positive: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
|
14
|
-
// // TODO заменить --surface-transparent-warning на корректный токен
|
15
|
-
warning: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
|
16
|
-
// // TODO заменить --surface-transparent-negative на корректный токен
|
17
|
-
negative: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor)
|
18
|
-
},
|
19
|
-
size: {
|
20
|
-
l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
|
21
|
-
m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
|
22
|
-
s: /*#__PURE__*/css(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
|
23
|
-
xs: /*#__PURE__*/css(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight)
|
24
|
-
},
|
25
|
-
labelPlacement: {
|
26
|
-
inner: [labelPlacement_inner, /*#__PURE__*/css(["&.", "{", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--plasma-colors-secondary)));", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);}"], labelPlacement_inner, tokens.placeholderColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight)],
|
27
|
-
outer: [labelPlacement_outer, /*#__PURE__*/css(["&.", "{}"], labelPlacement_outer)]
|
28
|
-
},
|
29
|
-
disabled: {
|
30
|
-
"true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
|
31
|
-
},
|
32
|
-
// TODO заменить --surface-transparent-primary на корректный токен
|
33
|
-
readOnly: {
|
34
|
-
"true": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);"], tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.labelColorReadOnly)
|
35
|
-
}
|
36
|
-
}
|
37
|
-
};
|
@@ -1,5 +0,0 @@
|
|
1
|
-
import { component, mergeConfig } from '../../../../engines';
|
2
|
-
import { textFieldConfig } from '../../../../components/TextField';
|
3
|
-
import { config } from './TextField.config';
|
4
|
-
var mergedConfig = /*#__PURE__*/mergeConfig(textFieldConfig, config);
|
5
|
-
export var TextField = /*#__PURE__*/component(mergedConfig);
|
@@ -1,181 +0,0 @@
|
|
1
|
-
import React, { ComponentProps, useState } from 'react';
|
2
|
-
import type { StoryObj, Meta } from '@storybook/react';
|
3
|
-
import { action } from '@storybook/addon-actions';
|
4
|
-
import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
|
5
|
-
|
6
|
-
import { WithTheme } from '../../../_helpers';
|
7
|
-
|
8
|
-
import { TextField } from './TextField';
|
9
|
-
|
10
|
-
const onChange = action('onChange');
|
11
|
-
const onFocus = action('onFocus');
|
12
|
-
const onBlur = action('onBlur');
|
13
|
-
const onSearch = action('onSearch');
|
14
|
-
const onChipsChange = action('onChipsChange');
|
15
|
-
|
16
|
-
const sizes = ['l', 'm', 's', 'xs'];
|
17
|
-
const views = ['default', 'positive', 'warning', 'negative'];
|
18
|
-
const labelPlacements = ['outer', 'inner'];
|
19
|
-
|
20
|
-
const meta: Meta<typeof TextField> = {
|
21
|
-
title: 'plasma_b2c/TextField',
|
22
|
-
component: TextField,
|
23
|
-
decorators: [WithTheme],
|
24
|
-
argTypes: {
|
25
|
-
view: {
|
26
|
-
options: views,
|
27
|
-
control: {
|
28
|
-
type: 'select',
|
29
|
-
},
|
30
|
-
},
|
31
|
-
maxLength: {
|
32
|
-
control: {
|
33
|
-
type: 'number',
|
34
|
-
},
|
35
|
-
},
|
36
|
-
labelPlacement: {
|
37
|
-
options: labelPlacements,
|
38
|
-
control: {
|
39
|
-
type: 'inline-radio',
|
40
|
-
},
|
41
|
-
},
|
42
|
-
size: {
|
43
|
-
options: sizes,
|
44
|
-
control: {
|
45
|
-
type: 'inline-radio',
|
46
|
-
},
|
47
|
-
},
|
48
|
-
},
|
49
|
-
};
|
50
|
-
|
51
|
-
export default meta;
|
52
|
-
|
53
|
-
type StoryPropsDefault = Omit<
|
54
|
-
ComponentProps<typeof TextField>,
|
55
|
-
| 'helperBlock'
|
56
|
-
| 'contentLeft'
|
57
|
-
| 'htmlSize'
|
58
|
-
| 'contentRight'
|
59
|
-
| 'type'
|
60
|
-
| 'name'
|
61
|
-
| 'onFocus'
|
62
|
-
| 'onBlur'
|
63
|
-
| 'onChange'
|
64
|
-
| 'value'
|
65
|
-
| 'checked'
|
66
|
-
| 'maxLength'
|
67
|
-
| 'minLength'
|
68
|
-
| 'required'
|
69
|
-
| 'enumerationType'
|
70
|
-
| 'chips'
|
71
|
-
| 'onChangeChips'
|
72
|
-
> & {
|
73
|
-
'storybook:contentLeft': boolean;
|
74
|
-
'storybook:contentRight': boolean;
|
75
|
-
};
|
76
|
-
|
77
|
-
const StoryDemo = ({
|
78
|
-
'storybook:contentLeft': enableContentLeft,
|
79
|
-
'storybook:contentRight': enableContentRight,
|
80
|
-
view,
|
81
|
-
...rest
|
82
|
-
}: StoryPropsDefault) => {
|
83
|
-
const [text, setText] = useState('Значение поля');
|
84
|
-
|
85
|
-
const iconSize = rest.size === 'xs' ? 'xs' : 's';
|
86
|
-
|
87
|
-
return (
|
88
|
-
<TextField
|
89
|
-
{...rest}
|
90
|
-
enumerationType="plain"
|
91
|
-
value={text}
|
92
|
-
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
|
93
|
-
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
|
94
|
-
view={view}
|
95
|
-
onChange={(e) => {
|
96
|
-
setText(e.target.value);
|
97
|
-
onChange(e.target.value);
|
98
|
-
}}
|
99
|
-
onFocus={onFocus}
|
100
|
-
onBlur={onBlur}
|
101
|
-
onSearch={onSearch}
|
102
|
-
/>
|
103
|
-
);
|
104
|
-
};
|
105
|
-
|
106
|
-
export const Default: StoryObj<StoryPropsDefault> = {
|
107
|
-
args: {
|
108
|
-
id: 'example-text-field',
|
109
|
-
size: 'l',
|
110
|
-
view: 'default',
|
111
|
-
label: 'Лейбл',
|
112
|
-
labelPlacement: 'outer',
|
113
|
-
placeholder: 'Заполните поле',
|
114
|
-
leftHelper: 'Подсказка к полю',
|
115
|
-
disabled: false,
|
116
|
-
readOnly: false,
|
117
|
-
'storybook:contentLeft': true,
|
118
|
-
'storybook:contentRight': true,
|
119
|
-
},
|
120
|
-
render: (args) => <StoryDemo {...args} />,
|
121
|
-
};
|
122
|
-
|
123
|
-
type StoryPropsChips = Omit<
|
124
|
-
ComponentProps<typeof TextField>,
|
125
|
-
| 'helperBlock'
|
126
|
-
| 'contentLeft'
|
127
|
-
| 'htmlSize'
|
128
|
-
| 'contentRight'
|
129
|
-
| 'type'
|
130
|
-
| 'name'
|
131
|
-
| 'onFocus'
|
132
|
-
| 'onBlur'
|
133
|
-
| 'onChange'
|
134
|
-
| 'onSearch'
|
135
|
-
| 'value'
|
136
|
-
| 'checked'
|
137
|
-
| 'maxLength'
|
138
|
-
| 'minLength'
|
139
|
-
| 'required'
|
140
|
-
| 'enumerationType'
|
141
|
-
> & {
|
142
|
-
'storybook:contentLeft': boolean;
|
143
|
-
'storybook:contentRight': boolean;
|
144
|
-
};
|
145
|
-
|
146
|
-
const StoryChips = ({
|
147
|
-
'storybook:contentLeft': enableContentLeft,
|
148
|
-
'storybook:contentRight': enableContentRight,
|
149
|
-
view,
|
150
|
-
...rest
|
151
|
-
}: StoryPropsChips) => {
|
152
|
-
const [text, setText] = useState('Значение поля');
|
153
|
-
|
154
|
-
const iconSize = rest.size === 'xs' ? 'xs' : 's';
|
155
|
-
|
156
|
-
return (
|
157
|
-
<TextField
|
158
|
-
{...rest}
|
159
|
-
enumerationType="chip"
|
160
|
-
value={text}
|
161
|
-
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
|
162
|
-
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
|
163
|
-
view={view}
|
164
|
-
onChange={(e) => {
|
165
|
-
setText(e.target.value);
|
166
|
-
onChange(e.target.value);
|
167
|
-
}}
|
168
|
-
onFocus={onFocus}
|
169
|
-
onBlur={onBlur}
|
170
|
-
onChangeChips={onChipsChange}
|
171
|
-
/>
|
172
|
-
);
|
173
|
-
};
|
174
|
-
|
175
|
-
export const Chips: StoryObj<StoryPropsChips> = {
|
176
|
-
args: {
|
177
|
-
...Default.args,
|
178
|
-
chips: ['1 value', '2 value', '3 value', '4 value'],
|
179
|
-
},
|
180
|
-
render: (args) => <StoryChips {...args} />,
|
181
|
-
};
|
@@ -1,34 +0,0 @@
|
|
1
|
-
import { css } from 'styled-components';
|
2
|
-
import { textFieldTokens as tokens, textField_labelPlacement_inner as labelPlacement_inner, textField_labelPlacement_outer as labelPlacement_outer } from '../../../../components/TextField';
|
3
|
-
export var config = {
|
4
|
-
defaults: {
|
5
|
-
view: 'default',
|
6
|
-
size: 'l',
|
7
|
-
labelPlacement: 'outer'
|
8
|
-
},
|
9
|
-
variations: {
|
10
|
-
view: {
|
11
|
-
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-tertiary);", ":var(--plasma-colors-secondary);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
|
12
|
-
positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
|
13
|
-
warning: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
|
14
|
-
negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor)
|
15
|
-
},
|
16
|
-
size: {
|
17
|
-
l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
|
18
|
-
m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":0.0625rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
|
19
|
-
s: /*#__PURE__*/css(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":0.0625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
|
20
|
-
xs: /*#__PURE__*/css(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":0.0625rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight)
|
21
|
-
},
|
22
|
-
labelPlacement: {
|
23
|
-
inner: [labelPlacement_inner, /*#__PURE__*/css(["&.", "{", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--plasma-colors-secondary)));", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);}"], labelPlacement_inner, tokens.placeholderColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight)],
|
24
|
-
outer: [labelPlacement_outer, /*#__PURE__*/css(["&.", "{}"], labelPlacement_outer)]
|
25
|
-
},
|
26
|
-
disabled: {
|
27
|
-
"true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
|
28
|
-
},
|
29
|
-
// TODO заменить --surface-transparent-primary на корректный токен
|
30
|
-
readOnly: {
|
31
|
-
"true": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);"], tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.borderColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.labelColorReadOnly)
|
32
|
-
}
|
33
|
-
}
|
34
|
-
};
|
@@ -1,5 +0,0 @@
|
|
1
|
-
import { component, mergeConfig } from '../../../../engines';
|
2
|
-
import { textFieldConfig } from '../../../../components/TextField';
|
3
|
-
import { config } from './TextField.config';
|
4
|
-
var mergedConfig = /*#__PURE__*/mergeConfig(textFieldConfig, config);
|
5
|
-
export var TextField = /*#__PURE__*/component(mergedConfig);
|
@@ -1,181 +0,0 @@
|
|
1
|
-
import React, { ComponentProps, useState } from 'react';
|
2
|
-
import type { StoryObj, Meta } from '@storybook/react';
|
3
|
-
import { action } from '@storybook/addon-actions';
|
4
|
-
import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
|
5
|
-
|
6
|
-
import { WithTheme } from '../../../_helpers';
|
7
|
-
|
8
|
-
import { TextField } from './TextField';
|
9
|
-
|
10
|
-
const onChange = action('onChange');
|
11
|
-
const onFocus = action('onFocus');
|
12
|
-
const onBlur = action('onBlur');
|
13
|
-
const onSearch = action('onSearch');
|
14
|
-
const onChipsChange = action('onChipsChange');
|
15
|
-
|
16
|
-
const sizes = ['l', 'm', 's', 'xs'];
|
17
|
-
const views = ['default', 'positive', 'warning', 'negative'];
|
18
|
-
const labelPlacements = ['outer', 'inner'];
|
19
|
-
|
20
|
-
const meta: Meta<typeof TextField> = {
|
21
|
-
title: 'plasma_web/TextField',
|
22
|
-
component: TextField,
|
23
|
-
decorators: [WithTheme],
|
24
|
-
argTypes: {
|
25
|
-
view: {
|
26
|
-
options: views,
|
27
|
-
control: {
|
28
|
-
type: 'select',
|
29
|
-
},
|
30
|
-
},
|
31
|
-
maxLength: {
|
32
|
-
control: {
|
33
|
-
type: 'number',
|
34
|
-
},
|
35
|
-
},
|
36
|
-
labelPlacement: {
|
37
|
-
options: labelPlacements,
|
38
|
-
control: {
|
39
|
-
type: 'inline-radio',
|
40
|
-
},
|
41
|
-
},
|
42
|
-
size: {
|
43
|
-
options: sizes,
|
44
|
-
control: {
|
45
|
-
type: 'inline-radio',
|
46
|
-
},
|
47
|
-
},
|
48
|
-
},
|
49
|
-
};
|
50
|
-
|
51
|
-
export default meta;
|
52
|
-
|
53
|
-
type StoryPropsDefault = Omit<
|
54
|
-
ComponentProps<typeof TextField>,
|
55
|
-
| 'helperBlock'
|
56
|
-
| 'contentLeft'
|
57
|
-
| 'htmlSize'
|
58
|
-
| 'contentRight'
|
59
|
-
| 'type'
|
60
|
-
| 'name'
|
61
|
-
| 'onFocus'
|
62
|
-
| 'onBlur'
|
63
|
-
| 'onChange'
|
64
|
-
| 'value'
|
65
|
-
| 'checked'
|
66
|
-
| 'maxLength'
|
67
|
-
| 'minLength'
|
68
|
-
| 'required'
|
69
|
-
| 'enumerationType'
|
70
|
-
| 'chips'
|
71
|
-
| 'onChangeChips'
|
72
|
-
> & {
|
73
|
-
'storybook:contentLeft': boolean;
|
74
|
-
'storybook:contentRight': boolean;
|
75
|
-
};
|
76
|
-
|
77
|
-
const StoryDemo = ({
|
78
|
-
'storybook:contentLeft': enableContentLeft,
|
79
|
-
'storybook:contentRight': enableContentRight,
|
80
|
-
view,
|
81
|
-
...rest
|
82
|
-
}: StoryPropsDefault) => {
|
83
|
-
const [text, setText] = useState('Значение поля');
|
84
|
-
|
85
|
-
const iconSize = rest.size === 'xs' ? 'xs' : 's';
|
86
|
-
|
87
|
-
return (
|
88
|
-
<TextField
|
89
|
-
{...rest}
|
90
|
-
enumerationType="plain"
|
91
|
-
value={text}
|
92
|
-
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
|
93
|
-
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
|
94
|
-
view={view}
|
95
|
-
onChange={(e) => {
|
96
|
-
setText(e.target.value);
|
97
|
-
onChange(e.target.value);
|
98
|
-
}}
|
99
|
-
onFocus={onFocus}
|
100
|
-
onBlur={onBlur}
|
101
|
-
onSearch={onSearch}
|
102
|
-
/>
|
103
|
-
);
|
104
|
-
};
|
105
|
-
|
106
|
-
export const Default: StoryObj<StoryPropsDefault> = {
|
107
|
-
args: {
|
108
|
-
id: 'example-text-field',
|
109
|
-
size: 'l',
|
110
|
-
view: 'default',
|
111
|
-
label: 'Лейбл',
|
112
|
-
labelPlacement: 'outer',
|
113
|
-
placeholder: 'Заполните поле',
|
114
|
-
leftHelper: 'Подсказка к полю',
|
115
|
-
disabled: false,
|
116
|
-
readOnly: false,
|
117
|
-
'storybook:contentLeft': true,
|
118
|
-
'storybook:contentRight': true,
|
119
|
-
},
|
120
|
-
render: (args) => <StoryDemo {...args} />,
|
121
|
-
};
|
122
|
-
|
123
|
-
type StoryPropsChips = Omit<
|
124
|
-
ComponentProps<typeof TextField>,
|
125
|
-
| 'helperBlock'
|
126
|
-
| 'contentLeft'
|
127
|
-
| 'htmlSize'
|
128
|
-
| 'contentRight'
|
129
|
-
| 'type'
|
130
|
-
| 'name'
|
131
|
-
| 'onFocus'
|
132
|
-
| 'onBlur'
|
133
|
-
| 'onChange'
|
134
|
-
| 'onSearch'
|
135
|
-
| 'value'
|
136
|
-
| 'checked'
|
137
|
-
| 'maxLength'
|
138
|
-
| 'minLength'
|
139
|
-
| 'required'
|
140
|
-
| 'enumerationType'
|
141
|
-
> & {
|
142
|
-
'storybook:contentLeft': boolean;
|
143
|
-
'storybook:contentRight': boolean;
|
144
|
-
};
|
145
|
-
|
146
|
-
const StoryChips = ({
|
147
|
-
'storybook:contentLeft': enableContentLeft,
|
148
|
-
'storybook:contentRight': enableContentRight,
|
149
|
-
view,
|
150
|
-
...rest
|
151
|
-
}: StoryPropsChips) => {
|
152
|
-
const [text, setText] = useState('Значение поля');
|
153
|
-
|
154
|
-
const iconSize = rest.size === 'xs' ? 'xs' : 's';
|
155
|
-
|
156
|
-
return (
|
157
|
-
<TextField
|
158
|
-
{...rest}
|
159
|
-
enumerationType="chip"
|
160
|
-
value={text}
|
161
|
-
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
|
162
|
-
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
|
163
|
-
view={view}
|
164
|
-
onChange={(e) => {
|
165
|
-
setText(e.target.value);
|
166
|
-
onChange(e.target.value);
|
167
|
-
}}
|
168
|
-
onFocus={onFocus}
|
169
|
-
onBlur={onBlur}
|
170
|
-
onChangeChips={onChipsChange}
|
171
|
-
/>
|
172
|
-
);
|
173
|
-
};
|
174
|
-
|
175
|
-
export const Chips: StoryObj<StoryPropsChips> = {
|
176
|
-
args: {
|
177
|
-
...Default.args,
|
178
|
-
chips: ['1 value', '2 value', '3 value', '4 value'],
|
179
|
-
},
|
180
|
-
render: (args) => <StoryChips {...args} />,
|
181
|
-
};
|
@@ -1,37 +0,0 @@
|
|
1
|
-
import { css } from 'styled-components';
|
2
|
-
import { textFieldTokens as tokens, textField_labelPlacement_inner as labelPlacement_inner, textField_labelPlacement_outer as labelPlacement_outer } from '../../../../components/TextField';
|
3
|
-
export var config = {
|
4
|
-
defaults: {
|
5
|
-
view: 'default',
|
6
|
-
size: 'l',
|
7
|
-
labelPlacement: 'outer'
|
8
|
-
},
|
9
|
-
variations: {
|
10
|
-
view: {
|
11
|
-
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
|
12
|
-
// TODO заменить --surface-transparent-positive на корректный токен
|
13
|
-
positive: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
|
14
|
-
// // TODO заменить --surface-transparent-warning на корректный токен
|
15
|
-
warning: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
|
16
|
-
// // TODO заменить --surface-transparent-negative на корректный токен
|
17
|
-
negative: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor)
|
18
|
-
},
|
19
|
-
size: {
|
20
|
-
l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
|
21
|
-
m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
|
22
|
-
s: /*#__PURE__*/css(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
|
23
|
-
xs: /*#__PURE__*/css(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight)
|
24
|
-
},
|
25
|
-
labelPlacement: {
|
26
|
-
inner: [labelPlacement_inner, /*#__PURE__*/css(["&.", "{", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--plasma-colors-secondary)));", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);}"], labelPlacement_inner, tokens.placeholderColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight)],
|
27
|
-
outer: [labelPlacement_outer, /*#__PURE__*/css(["&.", "{}"], labelPlacement_outer)]
|
28
|
-
},
|
29
|
-
disabled: {
|
30
|
-
"true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
|
31
|
-
},
|
32
|
-
// TODO заменить --surface-transparent-primary на корректный токен
|
33
|
-
readOnly: {
|
34
|
-
"true": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);"], tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.labelColorReadOnly)
|
35
|
-
}
|
36
|
-
}
|
37
|
-
};
|