@salutejs/plasma-new-hope 0.241.0-dev.0 → 0.241.1-canary.1701.12828004221.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/Cell/ui/CellTextbox/CellTextbox.js +9 -4
- package/cjs/components/Cell/ui/CellTextbox/CellTextbox.js.map +1 -1
- package/cjs/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.js +6 -2
- package/cjs/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.js.map +1 -1
- package/cjs/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.js +6 -2
- package/cjs/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.js.map +1 -1
- package/cjs/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.js +10 -4
- package/cjs/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.css +7 -7
- package/cjs/components/Checkbox/Checkbox.js +2 -1
- package/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.js +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/cjs/components/Checkbox/{Checkbox.styles_dmi26u.css → Checkbox.styles_16ay1rj.css} +2 -2
- package/cjs/components/Combobox/ComboboxNew/Combobox.css +7 -7
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.css +7 -7
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.css +7 -7
- package/cjs/components/Pagination/Pagination.css +7 -7
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +7 -7
- package/cjs/components/Radiobox/Radiobox.css +9 -9
- package/cjs/components/Radiobox/Radiobox.js +2 -1
- package/cjs/components/Radiobox/Radiobox.js.map +1 -1
- package/cjs/components/Radiobox/Radiobox.styles.js +1 -1
- package/cjs/components/Radiobox/Radiobox.styles.js.map +1 -1
- package/cjs/components/Radiobox/{Radiobox.styles_520asv.css → Radiobox.styles_vikocp.css} +1 -1
- package/cjs/components/Select/Select.css +7 -7
- package/cjs/components/Select/ui/Inner/Inner.css +7 -7
- package/cjs/components/Select/ui/Inner/ui/Item/Item.css +7 -7
- package/cjs/index.css +9 -9
- package/emotion/cjs/components/Cell/ui/CellTextbox/CellTextbox.js +11 -4
- package/emotion/cjs/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.js +7 -2
- package/emotion/cjs/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.js +7 -2
- package/emotion/cjs/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.js +12 -4
- package/emotion/cjs/components/Checkbox/Checkbox.js +2 -1
- package/emotion/cjs/components/Checkbox/Checkbox.styles.js +7 -15
- package/emotion/cjs/components/Radiobox/Radiobox.js +2 -1
- package/emotion/cjs/components/Radiobox/Radiobox.styles.js +2 -2
- package/emotion/cjs/examples/plasma_b2c/components/Cell/Cell.stories.tsx +3 -3
- package/emotion/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx +23 -8
- package/emotion/cjs/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx +23 -0
- package/emotion/es/components/Cell/ui/CellTextbox/CellTextbox.js +11 -4
- package/emotion/es/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.js +7 -2
- package/emotion/es/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.js +7 -2
- package/emotion/es/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.js +12 -4
- package/emotion/es/components/Checkbox/Checkbox.js +2 -1
- package/emotion/es/components/Checkbox/Checkbox.styles.js +7 -15
- package/emotion/es/components/Radiobox/Radiobox.js +2 -1
- package/emotion/es/components/Radiobox/Radiobox.styles.js +2 -2
- package/emotion/es/examples/plasma_b2c/components/Cell/Cell.stories.tsx +3 -3
- package/emotion/es/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx +23 -8
- package/emotion/es/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx +23 -0
- package/es/components/Cell/ui/CellTextbox/CellTextbox.js +9 -4
- package/es/components/Cell/ui/CellTextbox/CellTextbox.js.map +1 -1
- package/es/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.js +6 -2
- package/es/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.js.map +1 -1
- package/es/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.js +6 -2
- package/es/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.js.map +1 -1
- package/es/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.js +10 -4
- package/es/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.js.map +1 -1
- package/es/components/Checkbox/Checkbox.css +7 -7
- package/es/components/Checkbox/Checkbox.js +2 -1
- package/es/components/Checkbox/Checkbox.js.map +1 -1
- package/es/components/Checkbox/Checkbox.styles.js +1 -1
- package/es/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/es/components/Checkbox/{Checkbox.styles_dmi26u.css → Checkbox.styles_16ay1rj.css} +2 -2
- package/es/components/Combobox/ComboboxNew/Combobox.css +7 -7
- package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.css +7 -7
- package/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.css +7 -7
- package/es/components/Pagination/Pagination.css +7 -7
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +7 -7
- package/es/components/Radiobox/Radiobox.css +9 -9
- package/es/components/Radiobox/Radiobox.js +2 -1
- package/es/components/Radiobox/Radiobox.js.map +1 -1
- package/es/components/Radiobox/Radiobox.styles.js +1 -1
- package/es/components/Radiobox/Radiobox.styles.js.map +1 -1
- package/es/components/Radiobox/{Radiobox.styles_520asv.css → Radiobox.styles_vikocp.css} +1 -1
- package/es/components/Select/Select.css +7 -7
- package/es/components/Select/ui/Inner/Inner.css +7 -7
- package/es/components/Select/ui/Inner/ui/Item/Item.css +7 -7
- package/es/index.css +9 -9
- package/package.json +2 -2
- package/styled-components/cjs/components/Cell/ui/CellTextbox/CellTextbox.js +11 -4
- package/styled-components/cjs/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.js +7 -2
- package/styled-components/cjs/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.js +7 -2
- package/styled-components/cjs/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.js +12 -4
- package/styled-components/cjs/components/Checkbox/Checkbox.js +2 -1
- package/styled-components/cjs/components/Checkbox/Checkbox.styles.js +2 -2
- package/styled-components/cjs/components/Radiobox/Radiobox.js +2 -1
- package/styled-components/cjs/components/Radiobox/Radiobox.styles.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Cell/Cell.stories.tsx +3 -3
- package/styled-components/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx +23 -8
- package/styled-components/cjs/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx +23 -0
- package/styled-components/es/components/Cell/ui/CellTextbox/CellTextbox.js +11 -4
- package/styled-components/es/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.js +7 -2
- package/styled-components/es/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.js +7 -2
- package/styled-components/es/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.js +12 -4
- package/styled-components/es/components/Checkbox/Checkbox.js +2 -1
- package/styled-components/es/components/Checkbox/Checkbox.styles.js +2 -2
- package/styled-components/es/components/Radiobox/Radiobox.js +2 -1
- package/styled-components/es/components/Radiobox/Radiobox.styles.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Cell/Cell.stories.tsx +3 -3
- package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx +23 -8
- package/styled-components/es/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx +23 -0
- package/types/components/Cell/ui/CellTextbox/CellTextbox.d.ts.map +1 -1
- package/types/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.d.ts.map +1 -1
- package/types/components/Checkbox/Checkbox.styles.d.ts.map +1 -1
- package/types/components/Radiobox/Radiobox.styles.d.ts.map +1 -1
package/es/index.css
CHANGED
@@ -109,13 +109,13 @@
|
|
109
109
|
|
110
110
|
.base_hr4zpz_b1y5wkm1__d6390059 .base_hr4zpz_checkboxTrigger__d6390059{position:relative;}.base_hr4zpz_b1y5wkm1__d6390059 .base_hr4zpz_checkboxTrigger__d6390059::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:var(--plasma-checkbox-trigger-border-radius);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_hr4zpz_b1y5wkm1__d6390059 .base_hr4zpz_checkboxTrigger__d6390059.base_hr4zpz_focusVisible__d6390059:focus::before,.base_hr4zpz_b1y5wkm1__d6390059 .base_hr4zpz_checkboxTrigger__d6390059[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.125rem transparent;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added] + label .base_hr4zpz_checkboxTrigger__d6390059{border-color:transparent;position:relative;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added] + label .base_hr4zpz_checkboxTrigger__d6390059::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:var(--plasma-checkbox-trigger-border-radius);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added] + label .base_hr4zpz_checkboxTrigger__d6390059::before{box-shadow:0 0 0 0.125rem var(--plasma-checkbox-focus-color);}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added]:checked + label .base_hr4zpz_checkboxTrigger__d6390059,.base_hr4zpz_b1y5wkm1__d6390059 input[type='checkbox'][data-focus-visible-added]:indeterminate + label .base_hr4zpz_checkboxTrigger__d6390059{position:relative;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added]:checked + label .base_hr4zpz_checkboxTrigger__d6390059::before,.base_hr4zpz_b1y5wkm1__d6390059 input[type='checkbox'][data-focus-visible-added]:indeterminate + label .base_hr4zpz_checkboxTrigger__d6390059::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma-checkbox-trigger-border-radius) + 0.125rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_hr4zpz_b1y5wkm1__d6390059 input[data-focus-visible-added]:checked + label .base_hr4zpz_checkboxTrigger__d6390059::before,.base_hr4zpz_b1y5wkm1__d6390059 input[type='checkbox'][data-focus-visible-added]:indeterminate + label .base_hr4zpz_checkboxTrigger__d6390059::before{box-shadow:0 0 0 0.063rem var(--plasma-checkbox-focus-color);}
|
111
111
|
|
112
|
-
.
|
113
|
-
.
|
114
|
-
.
|
115
|
-
.
|
116
|
-
.
|
117
|
-
.
|
118
|
-
.
|
112
|
+
.Checkbox_styles_16ay1rj_b1udywkg__57f51758{margin:var(--plasma-checkbox-margin);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.Checkbox_styles_16ay1rj_b1udywkg__57f51758 .Checkbox_styles_16ay1rj_singleLine__57f51758{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
113
|
+
.Checkbox_styles_16ay1rj_s165w87d__57f51758{position:absolute;width:1px;height:1px;overflow:hidden;-webkit-clip:rect(0 0 0 0);clip:rect(0 0 0 0);}.Checkbox_styles_16ay1rj_s165w87d__57f51758:focus{outline:0 none;}
|
114
|
+
.Checkbox_styles_16ay1rj_sft3zxv__57f51758{margin:var(--plasma-checkbox-trigger-margin);width:var(--plasma-checkbox-trigger-size);height:var(--plasma-checkbox-trigger-size);border-radius:var(--plasma-checkbox-trigger-border-radius);position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background:var(--plasma-checkbox-trigger-background-color);border:0.125rem solid var(--plasma-checkbox-trigger-border-color);box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}input:not(:indeterminate) + label .Checkbox_styles_16ay1rj_sft3zxv__57f51758 div{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 0.15s ease-in-out;-webkit-transition:transform 0.15s ease-in-out;transition:transform 0.15s ease-in-out;}input:checked + label .Checkbox_styles_16ay1rj_sft3zxv__57f51758 div{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
|
115
|
+
.Checkbox_styles_16ay1rj_s1u3nd7e__57f51758{position:relative;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:inherit;cursor:pointer;}.Checkbox_styles_16ay1rj_s1u3nd7e__57f51758 .Checkbox_styles_16ay1rj_singleLine__57f51758{width:100%;}
|
116
|
+
.Checkbox_styles_16ay1rj_shwv1in__57f51758{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:var(--plasma-checkbox-content-top-offset);margin-left:var(--plasma-checkbox-content-left-offset);}
|
117
|
+
.Checkbox_styles_16ay1rj_s1my1ay__57f51758{font-family:var(--plasma-checkbox-label-font-family);font-size:var(--plasma-checkbox-label-font-size);font-style:var(--plasma-checkbox-label-font-style);font-weight:var(--plasma-checkbox-label-font-weight);-webkit-letter-spacing:var(--plasma-checkbox-label-letter-spacing);-moz-letter-spacing:var(--plasma-checkbox-label-letter-spacing);-ms-letter-spacing:var(--plasma-checkbox-label-letter-spacing);letter-spacing:var(--plasma-checkbox-label-letter-spacing);line-height:var(--plasma-checkbox-label-line-height);}
|
118
|
+
.Checkbox_styles_16ay1rj_s14u8fnn__57f51758{margin-top:var(--plasma-checkbox-description-margin-top);color:var(--plasma-checkbox-description-color);font-family:var(--plasma-checkbox-description-font-family);font-size:var(--plasma-checkbox-description-font-size);font-style:var(--plasma-checkbox-description-font-style);font-weight:var(--plasma-checkbox-description-font-weight);-webkit-letter-spacing:var(--plasma-checkbox-description-letter-spacing);-moz-letter-spacing:var(--plasma-checkbox-description-letter-spacing);-ms-letter-spacing:var(--plasma-checkbox-description-letter-spacing);letter-spacing:var(--plasma-checkbox-description-letter-spacing);line-height:var(--plasma-checkbox-description-line-height);}.Checkbox_styles_16ay1rj_s14u8fnn__57f51758.Checkbox_styles_16ay1rj_onlyDescription__57f51758{margin-top:0;}
|
119
119
|
|
120
120
|
.base_11n1fn3_b1yt66an__50fb7cfc input:checked + label .base_11n1fn3_radioboxTrigger__50fb7cfc{border:none;background:var(--plasma-radiobox-fill-color);border-color:var(--plasma-radiobox-fill-color);}
|
121
121
|
|
@@ -123,8 +123,8 @@
|
|
123
123
|
|
124
124
|
.base_1d7o4za_buxu4te__19288bae .base_1d7o4za_radioboxTrigger__19288bae{position:relative;}.base_1d7o4za_buxu4te__19288bae .base_1d7o4za_radioboxTrigger__19288bae::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:var(--plasma-radiobox-trigger-border-radius);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_1d7o4za_buxu4te__19288bae .base_1d7o4za_radioboxTrigger__19288bae.base_1d7o4za_focusVisible__19288bae:focus::before,.base_1d7o4za_buxu4te__19288bae .base_1d7o4za_radioboxTrigger__19288bae[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.125rem transparent;}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added] + label .base_1d7o4za_radioboxTrigger__19288bae{border-color:transparent;position:relative;}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added] + label .base_1d7o4za_radioboxTrigger__19288bae::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.125rem solid transparent;border-radius:var(--plasma-radiobox-trigger-border-radius);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added] + label .base_1d7o4za_radioboxTrigger__19288bae::before{box-shadow:0 0 0 0.125rem var(--plasma-radiobox-focus-color);}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added]:checked + label .base_1d7o4za_radioboxTrigger__19288bae{position:relative;}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added]:checked + label .base_1d7o4za_radioboxTrigger__19288bae::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma-radiobox-trigger-border-radius) + 0.125rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_1d7o4za_buxu4te__19288bae input[data-focus-visible-added]:checked + label .base_1d7o4za_radioboxTrigger__19288bae::before{box-shadow:0 0 0 0.063rem var(--plasma-radiobox-focus-color);}
|
125
125
|
|
126
|
-
.
|
127
|
-
.
|
126
|
+
.Radiobox_styles_vikocp_s14xglkp__f2b84016{width:var(--plasma-radiobox-ellipse-size);height:var(--plasma-radiobox-ellipse-size);border-radius:var(--plasma-radiobox-ellipse-size);background-color:var(--plasma-radiobox-ellipse-color);-webkit-transition:-webkit-transform 0.3s ease-in-out;-webkit-transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);}input:checked + label .Radiobox_styles_vikocp_s14xglkp__f2b84016{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
|
127
|
+
.Radiobox_styles_vikocp_bdte4ex__f2b84016{--plasma-checkbox-label-font-family:var(--plasma-radiobox-label-font-family);--plasma-checkbox-label-font-size:var(--plasma-radiobox-label-font-size);--plasma-checkbox-label-font-style:var(--plasma-radiobox-label-font-style);--plasma-checkbox-label-font-weight:var(--plasma-radiobox-label-font-weight);--plasma-checkbox-label-letter-spacing:var(--plasma-radiobox-label-letter-spacing);--plasma-checkbox-label-line-height:var(--plasma-radiobox-label-line-height);--plasma-checkbox-description-margin-top:var(--plasma-checkbox-description-margin-top);--plasma-checkbox-description-font-family:var(--plasma-radiobox-description-font-family);--plasma-checkbox-description-font-size:var(--plasma-radiobox-description-font-size);--plasma-checkbox-description-font-style:var(--plasma-radiobox-description-font-style);--plasma-checkbox-description-font-weight:var(--plasma-radiobox-description-font-weight);--plasma-checkbox-description-letter-spacing:var(--plasma-radiobox-description-letter-spacing);--plasma-checkbox-description-line-height:var(--plasma-radiobox-description-line-height);--plasma-checkbox-fill-color:var(--plasma-radiobox-fill-color);--plasma-checkbox-description-color:var(--plasma-radiobox-description-color);--plasma-checkbox-trigger-border-color:var(--plasma-radiobox-trigger-border-color);--plasma-checkbox-trigger-background-color:var(--plasma-radiobox-trigger-background-color);--plasma-checkbox-content-top-offset:var(--plasma-radiobox-content-top-offset);--plasma-checkbox-content-left-offset:var(--plasma-radiobox-content-left-offset);--plasma-checkbox-trigger-size:var(--plasma-radiobox-trigger-size);--plasma-checkbox-trigger-border-radius:var(--plasma-radiobox-trigger-border-radius);--plasma-checkbox-trigger-margin:var(--plasma-radiobox-trigger-margin);margin:var(--plasma-radiobox-margin);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.Radiobox_styles_vikocp_bdte4ex__f2b84016 .Radiobox_styles_vikocp_singleLine__f2b84016{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
128
128
|
|
129
129
|
.Popover_styles_gh4xvw_s1g1xbt5__0bb7cc15{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;position:relative;}
|
130
130
|
.Popover_styles_gh4xvw_s12xwbyh__0bb7cc15{display:inline-block;}.Popover_styles_gh4xvw_s12xwbyh__0bb7cc15.Popover_styles_gh4xvw_popoverTargetAsRef__0bb7cc15{position:absolute;top:0;left:0;width:100%;height:100%;}.Popover_styles_gh4xvw_s12xwbyh__0bb7cc15.Popover_styles_gh4xvw_popoverTargetAsRef__0bb7cc15 .Popover_styles_gh4xvw_s1g1xbt5__0bb7cc15{width:100%;height:100%;display:block;}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.241.
|
3
|
+
"version": "0.241.1-canary.1701.12828004221.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -131,5 +131,5 @@
|
|
131
131
|
"sideEffects": [
|
132
132
|
"*.css"
|
133
133
|
],
|
134
|
-
"gitHead": "
|
134
|
+
"gitHead": "13984cb233e780a5660e89d4ba62dbebfc516695"
|
135
135
|
}
|
@@ -8,18 +8,25 @@ var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"))
|
|
8
8
|
var _CellTextboxLabel = /*#__PURE__*/require("../CellTextboxLabel/CellTextboxLabel");
|
9
9
|
var _CellTextboxTitle = /*#__PURE__*/require("../CellTextboxTitle/CellTextboxTitle");
|
10
10
|
var _CellTextboxSubtitle = /*#__PURE__*/require("../CellTextboxSubtitle/CellTextboxSubtitle");
|
11
|
+
var _utils = /*#__PURE__*/require("../../../../utils");
|
11
12
|
var _CellTextbox = /*#__PURE__*/require("./CellTextbox.styles");
|
13
|
+
var _excluded = ["label", "title", "subtitle", "children", "className"];
|
12
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
15
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
16
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
17
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
13
18
|
var CellTextbox = exports.CellTextbox = function CellTextbox(_ref) {
|
14
19
|
var label = _ref.label,
|
15
20
|
title = _ref.title,
|
16
21
|
subtitle = _ref.subtitle,
|
17
|
-
children = _ref.children
|
22
|
+
children = _ref.children,
|
23
|
+
className = _ref.className,
|
24
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
18
25
|
return (
|
19
26
|
/*#__PURE__*/
|
20
27
|
// TODO: #1548
|
21
|
-
_react["default"].createElement(_CellTextbox.CellTextboxStyled, {
|
22
|
-
className:
|
23
|
-
}, label || title || subtitle ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, label && /*#__PURE__*/_react["default"].createElement(_CellTextboxLabel.CellTextboxLabel, null, label), title && /*#__PURE__*/_react["default"].createElement(_CellTextboxTitle.CellTextboxTitle, null, title), subtitle && /*#__PURE__*/_react["default"].createElement(_CellTextboxSubtitle.CellTextboxSubtitle, null, subtitle)) : children)
|
28
|
+
_react["default"].createElement(_CellTextbox.CellTextboxStyled, _extends({
|
29
|
+
className: (0, _utils.cx)('cell-textbox', className)
|
30
|
+
}, rest), label || title || subtitle ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, label && /*#__PURE__*/_react["default"].createElement(_CellTextboxLabel.CellTextboxLabel, null, label), title && /*#__PURE__*/_react["default"].createElement(_CellTextboxTitle.CellTextboxTitle, null, title), subtitle && /*#__PURE__*/_react["default"].createElement(_CellTextboxSubtitle.CellTextboxSubtitle, null, subtitle)) : children)
|
24
31
|
);
|
25
32
|
};
|
@@ -6,7 +6,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.CellTextboxLabel = void 0;
|
7
7
|
var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
|
8
8
|
var _CellTextboxLabel = /*#__PURE__*/require("./CellTextboxLabel.styles");
|
9
|
+
var _excluded = ["children"];
|
9
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
10
|
-
var
|
11
|
-
|
11
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
12
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
13
|
+
var CellTextboxLabel = exports.CellTextboxLabel = function CellTextboxLabel(_ref) {
|
14
|
+
var children = _ref.children,
|
15
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
16
|
+
return /*#__PURE__*/_react["default"].createElement(_CellTextboxLabel.StyledTextboxLabel, rest, children);
|
12
17
|
};
|
@@ -6,7 +6,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.CellTextboxSubtitle = void 0;
|
7
7
|
var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
|
8
8
|
var _CellTextboxSubtitle = /*#__PURE__*/require("./CellTextboxSubtitle.styles");
|
9
|
+
var _excluded = ["children"];
|
9
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
10
|
-
var
|
11
|
-
|
11
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
12
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
13
|
+
var CellTextboxSubtitle = exports.CellTextboxSubtitle = function CellTextboxSubtitle(_ref) {
|
14
|
+
var children = _ref.children,
|
15
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
16
|
+
return /*#__PURE__*/_react["default"].createElement(_CellTextboxSubtitle.StyledTextboxSubtitle, rest, children);
|
12
17
|
};
|
@@ -5,11 +5,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.CellTextboxTitle = void 0;
|
7
7
|
var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
|
8
|
+
var _utils = /*#__PURE__*/require("../../../../utils");
|
8
9
|
var _CellTextboxTitle = /*#__PURE__*/require("./CellTextboxTitle.styles");
|
10
|
+
var _excluded = ["children", "className"];
|
9
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
10
|
-
var
|
12
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
13
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
14
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
15
|
+
var CellTextboxTitle = exports.CellTextboxTitle = function CellTextboxTitle(_ref) {
|
16
|
+
var children = _ref.children,
|
17
|
+
className = _ref.className,
|
18
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
11
19
|
// TODO: #1548
|
12
|
-
return /*#__PURE__*/_react["default"].createElement(_CellTextboxTitle.StyledTextboxTitle, {
|
13
|
-
className:
|
14
|
-
},
|
20
|
+
return /*#__PURE__*/_react["default"].createElement(_CellTextboxTitle.StyledTextboxTitle, _extends({
|
21
|
+
className: (0, _utils.cx)('cell-textbox-title', className)
|
22
|
+
}, rest), children);
|
15
23
|
};
|
@@ -74,7 +74,8 @@ var checkboxRoot = exports.checkboxRoot = function checkboxRoot(Root) {
|
|
74
74
|
"aria-describedby": uniqDescriptionId,
|
75
75
|
tabIndex: canFocused
|
76
76
|
})), /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledContentWrapper, {
|
77
|
-
htmlFor: checkboxId
|
77
|
+
htmlFor: checkboxId,
|
78
|
+
className: singleLineClass
|
78
79
|
}, /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledTrigger, {
|
79
80
|
className: _Checkbox2.classes.checkboxTrigger
|
80
81
|
}, indeterminate ? _Indeterminate || (_Indeterminate = /*#__PURE__*/_react["default"].createElement(_IconsSvg.Indeterminate, null)) : _Done || (_Done = /*#__PURE__*/_react["default"].createElement(_IconsSvg.Done, null))), hasContent && /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledContent, {
|
@@ -12,7 +12,7 @@ var _templateObject;
|
|
12
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
13
13
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
14
14
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
15
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n margin: var(", ");\n\n ", ";\n\n position: relative;\n align-items: flex-start;\n display: flex;\n
|
15
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n margin: var(", ");\n\n ", ";\n\n position: relative;\n align-items: flex-start;\n display: flex;\n\n .", " {\n ", ";\n }\n"])), _Checkbox.tokens.margin, /*#__PURE__*/(0, _mixins.applyNoUserSelect)(), _Checkbox.classes.singleLine, /*#__PURE__*/(0, _mixins.applyEllipsis)());
|
16
16
|
var StyledInput = exports.StyledInput = /*#__PURE__*/_styledComponents["default"].input.withConfig({
|
17
17
|
componentId: "plasma-new-hope__sc-tydhc1-0"
|
18
18
|
})(["position:absolute;&:focus{outline:0 none;}width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);"]);
|
@@ -21,7 +21,7 @@ var StyledTrigger = exports.StyledTrigger = /*#__PURE__*/_styledComponents["defa
|
|
21
21
|
})(["margin:var(", ");width:var(", ");height:var(", ");border-radius:var(", ");position:relative;display:flex;align-items:center;justify-content:center;background:var(", ");border:0.125rem solid var(", ");box-sizing:border-box;flex-shrink:0;flex-grow:0;input:not(:indeterminate) + label & div{transform:scale(0);transition:transform 0.15s ease-in-out;}input:checked + label & div{transform:scale(1);}"], _Checkbox.tokens.triggerMargin, _Checkbox.tokens.triggerSize, _Checkbox.tokens.triggerSize, _Checkbox.tokens.triggerBorderRadius, _Checkbox.tokens.triggerBackgroundColor, _Checkbox.tokens.triggerBorderColor);
|
22
22
|
var StyledContentWrapper = exports.StyledContentWrapper = /*#__PURE__*/_styledComponents["default"].label.withConfig({
|
23
23
|
componentId: "plasma-new-hope__sc-tydhc1-2"
|
24
|
-
})(["position:relative;align-items:flex-start;display:flex;width:
|
24
|
+
})(["position:relative;align-items:flex-start;display:flex;width:inherit;cursor:pointer;.", "{width:100%;}"], _Checkbox.classes.singleLine);
|
25
25
|
var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
26
26
|
componentId: "plasma-new-hope__sc-tydhc1-3"
|
27
27
|
})(["display:flex;flex-direction:column;margin-top:var(", ");margin-left:var(", ");"], _Checkbox.tokens.contentTopOffset, _Checkbox.tokens.contentLeftOffset);
|
@@ -66,7 +66,8 @@ var radioboxRoot = exports.radioboxRoot = function radioboxRoot(Root) {
|
|
66
66
|
"aria-describedby": uniqDescriptionId,
|
67
67
|
tabIndex: canFocused
|
68
68
|
})), /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledContentWrapper, {
|
69
|
-
htmlFor: radioboxId
|
69
|
+
htmlFor: radioboxId,
|
70
|
+
className: singleLineClass
|
70
71
|
}, /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledTrigger, {
|
71
72
|
className: _Radiobox2.classes.radioboxTrigger
|
72
73
|
}, _StyledEllipse || (_StyledEllipse = /*#__PURE__*/_react["default"].createElement(_Radiobox.StyledEllipse, null))), hasContent && /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledContent, {
|
@@ -16,4 +16,4 @@ var mappingOverride = /*#__PURE__*/"\n ".concat(_Checkbox.checkboxTokens.labe
|
|
16
16
|
var StyledEllipse = exports.StyledEllipse = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
17
17
|
componentId: "plasma-new-hope__sc-rqiilp-0"
|
18
18
|
})(["width:var(", ");height:var(", ");border-radius:var(", ");background-color:var(", ");transition:transform 0.3s ease-in-out;transform:scale(0);input:checked + label &{transform:scale(1);}"], _Radiobox.tokens.ellipseSize, _Radiobox.tokens.ellipseSize, _Radiobox.tokens.ellipseSize, _Radiobox.tokens.ellipseColor);
|
19
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", ";margin:var(", ");", ";position:relative;align-items:flex-start;display:flex
|
19
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", ";margin:var(", ");", ";position:relative;align-items:flex-start;display:flex;.", "{", ";}"], mappingOverride, _Radiobox.tokens.margin, /*#__PURE__*/(0, _mixins.applyNoUserSelect)(), _Radiobox.classes.singleLine, /*#__PURE__*/(0, _mixins.applyEllipsis)());
|
@@ -118,10 +118,10 @@ export const WithContentTextboxCustom: Story = {
|
|
118
118
|
}
|
119
119
|
contentRight={!args.disableRightContent && <ChevronRight color="inherit" size="xs" />}
|
120
120
|
>
|
121
|
-
<
|
122
|
-
<
|
121
|
+
<CellTextbox>
|
122
|
+
<CellTextboxTitle>Title</CellTextboxTitle>
|
123
123
|
<MyStyledText>My styled Text</MyStyledText>
|
124
|
-
</
|
124
|
+
</CellTextbox>
|
125
125
|
</Cell>
|
126
126
|
);
|
127
127
|
},
|
@@ -98,14 +98,6 @@ const StoryDefault = (props: CheckboxProps) => {
|
|
98
98
|
<>
|
99
99
|
<Checkbox {...props} />
|
100
100
|
<Checkbox name="item.name" value="item.value" label="Label" description="Description" {...props} />
|
101
|
-
<Checkbox
|
102
|
-
name="item.name"
|
103
|
-
value="item.value"
|
104
|
-
singleLine
|
105
|
-
label="Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
|
106
|
-
description="Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
|
107
|
-
{...props}
|
108
|
-
/>
|
109
101
|
</>
|
110
102
|
);
|
111
103
|
};
|
@@ -114,6 +106,29 @@ export const Default: StoryObj<CheckboxProps> = {
|
|
114
106
|
render: (args) => <StoryDefault {...args} />,
|
115
107
|
};
|
116
108
|
|
109
|
+
const StoryLong = (props: CheckboxProps) => {
|
110
|
+
const { width, ...otherProps } = props;
|
111
|
+
return (
|
112
|
+
<div style={{ width }}>
|
113
|
+
<Checkbox {...otherProps} />
|
114
|
+
</div>
|
115
|
+
);
|
116
|
+
};
|
117
|
+
|
118
|
+
export const LongText: StoryObj<CheckboxProps> = {
|
119
|
+
args: {
|
120
|
+
name: 'item.name',
|
121
|
+
value: 'item.value',
|
122
|
+
label:
|
123
|
+
'Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger',
|
124
|
+
description:
|
125
|
+
'Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger',
|
126
|
+
singleLine: true,
|
127
|
+
width: '300px',
|
128
|
+
},
|
129
|
+
render: (args) => <StoryLong {...args} />,
|
130
|
+
};
|
131
|
+
|
117
132
|
const StoryComplex = (props: CheckboxProps) => {
|
118
133
|
const [values, setValues] = useState({
|
119
134
|
russian: true,
|
@@ -114,6 +114,29 @@ export const Default: StoryObj<CheckboxProps> = {
|
|
114
114
|
render: (args) => <StoryDefault {...args} />,
|
115
115
|
};
|
116
116
|
|
117
|
+
const StoryLong = (props: CheckboxProps) => {
|
118
|
+
const { width, ...otherProps } = props;
|
119
|
+
return (
|
120
|
+
<div style={{ width }}>
|
121
|
+
<Checkbox {...otherProps} />
|
122
|
+
</div>
|
123
|
+
);
|
124
|
+
};
|
125
|
+
|
126
|
+
export const LongText: StoryObj<CheckboxProps> = {
|
127
|
+
args: {
|
128
|
+
name: 'item.name',
|
129
|
+
value: 'item.value',
|
130
|
+
label:
|
131
|
+
'Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger',
|
132
|
+
description:
|
133
|
+
'Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger',
|
134
|
+
singleLine: true,
|
135
|
+
width: '300px',
|
136
|
+
},
|
137
|
+
render: (args) => <StoryLong {...args} />,
|
138
|
+
};
|
139
|
+
|
117
140
|
const StoryComplex = (props: CheckboxProps) => {
|
118
141
|
const [values, setValues] = useState({
|
119
142
|
russian: true,
|
@@ -1,18 +1,25 @@
|
|
1
|
+
var _excluded = ["label", "title", "subtitle", "children", "className"];
|
2
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
4
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
1
5
|
import React from 'react';
|
2
6
|
import { CellTextboxLabel } from '../CellTextboxLabel/CellTextboxLabel';
|
3
7
|
import { CellTextboxTitle } from '../CellTextboxTitle/CellTextboxTitle';
|
4
8
|
import { CellTextboxSubtitle } from '../CellTextboxSubtitle/CellTextboxSubtitle';
|
9
|
+
import { cx } from '../../../../utils';
|
5
10
|
import { CellTextboxStyled } from './CellTextbox.styles';
|
6
11
|
export var CellTextbox = function CellTextbox(_ref) {
|
7
12
|
var label = _ref.label,
|
8
13
|
title = _ref.title,
|
9
14
|
subtitle = _ref.subtitle,
|
10
|
-
children = _ref.children
|
15
|
+
children = _ref.children,
|
16
|
+
className = _ref.className,
|
17
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
11
18
|
return (
|
12
19
|
/*#__PURE__*/
|
13
20
|
// TODO: #1548
|
14
|
-
React.createElement(CellTextboxStyled, {
|
15
|
-
className:
|
16
|
-
}, label || title || subtitle ? /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(CellTextboxLabel, null, label), title && /*#__PURE__*/React.createElement(CellTextboxTitle, null, title), subtitle && /*#__PURE__*/React.createElement(CellTextboxSubtitle, null, subtitle)) : children)
|
21
|
+
React.createElement(CellTextboxStyled, _extends({
|
22
|
+
className: cx('cell-textbox', className)
|
23
|
+
}, rest), label || title || subtitle ? /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(CellTextboxLabel, null, label), title && /*#__PURE__*/React.createElement(CellTextboxTitle, null, title), subtitle && /*#__PURE__*/React.createElement(CellTextboxSubtitle, null, subtitle)) : children)
|
17
24
|
);
|
18
25
|
};
|
@@ -1,5 +1,10 @@
|
|
1
|
+
var _excluded = ["children"];
|
2
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
3
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
1
4
|
import React from 'react';
|
2
5
|
import { StyledTextboxLabel } from './CellTextboxLabel.styles';
|
3
|
-
export var CellTextboxLabel = function CellTextboxLabel(
|
4
|
-
|
6
|
+
export var CellTextboxLabel = function CellTextboxLabel(_ref) {
|
7
|
+
var children = _ref.children,
|
8
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
9
|
+
return /*#__PURE__*/React.createElement(StyledTextboxLabel, rest, children);
|
5
10
|
};
|
@@ -1,5 +1,10 @@
|
|
1
|
+
var _excluded = ["children"];
|
2
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
3
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
1
4
|
import React from 'react';
|
2
5
|
import { StyledTextboxSubtitle } from './CellTextboxSubtitle.styles';
|
3
|
-
export var CellTextboxSubtitle = function CellTextboxSubtitle(
|
4
|
-
|
6
|
+
export var CellTextboxSubtitle = function CellTextboxSubtitle(_ref) {
|
7
|
+
var children = _ref.children,
|
8
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
9
|
+
return /*#__PURE__*/React.createElement(StyledTextboxSubtitle, rest, children);
|
5
10
|
};
|
@@ -1,8 +1,16 @@
|
|
1
|
+
var _excluded = ["children", "className"];
|
2
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
4
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
1
5
|
import React from 'react';
|
6
|
+
import { cx } from '../../../../utils';
|
2
7
|
import { StyledTextboxTitle } from './CellTextboxTitle.styles';
|
3
|
-
export var CellTextboxTitle = function CellTextboxTitle(
|
8
|
+
export var CellTextboxTitle = function CellTextboxTitle(_ref) {
|
9
|
+
var children = _ref.children,
|
10
|
+
className = _ref.className,
|
11
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
4
12
|
// TODO: #1548
|
5
|
-
return /*#__PURE__*/React.createElement(StyledTextboxTitle, {
|
6
|
-
className:
|
7
|
-
},
|
13
|
+
return /*#__PURE__*/React.createElement(StyledTextboxTitle, _extends({
|
14
|
+
className: cx('cell-textbox-title', className)
|
15
|
+
}, rest), children);
|
8
16
|
};
|
@@ -65,7 +65,8 @@ export var checkboxRoot = function checkboxRoot(Root) {
|
|
65
65
|
"aria-describedby": uniqDescriptionId,
|
66
66
|
tabIndex: canFocused
|
67
67
|
})), /*#__PURE__*/React.createElement(StyledContentWrapper, {
|
68
|
-
htmlFor: checkboxId
|
68
|
+
htmlFor: checkboxId,
|
69
|
+
className: singleLineClass
|
69
70
|
}, /*#__PURE__*/React.createElement(StyledTrigger, {
|
70
71
|
className: classes.checkboxTrigger
|
71
72
|
}, indeterminate ? _Indeterminate || (_Indeterminate = /*#__PURE__*/React.createElement(Indeterminate, null)) : _Done || (_Done = /*#__PURE__*/React.createElement(Done, null))), hasContent && /*#__PURE__*/React.createElement(StyledContent, {
|
@@ -4,7 +4,7 @@ import { css } from 'styled-components';
|
|
4
4
|
import styled from 'styled-components';
|
5
5
|
import { applyEllipsis, applyNoUserSelect } from '../../mixins';
|
6
6
|
import { classes, tokens } from './Checkbox.tokens';
|
7
|
-
export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n margin: var(", ");\n\n ", ";\n\n position: relative;\n align-items: flex-start;\n display: flex;\n
|
7
|
+
export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n margin: var(", ");\n\n ", ";\n\n position: relative;\n align-items: flex-start;\n display: flex;\n\n .", " {\n ", ";\n }\n"])), tokens.margin, /*#__PURE__*/applyNoUserSelect(), classes.singleLine, /*#__PURE__*/applyEllipsis());
|
8
8
|
export var StyledInput = /*#__PURE__*/styled.input.withConfig({
|
9
9
|
componentId: "plasma-new-hope__sc-tydhc1-0"
|
10
10
|
})(["position:absolute;&:focus{outline:0 none;}width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);"]);
|
@@ -13,7 +13,7 @@ export var StyledTrigger = /*#__PURE__*/styled.div.withConfig({
|
|
13
13
|
})(["margin:var(", ");width:var(", ");height:var(", ");border-radius:var(", ");position:relative;display:flex;align-items:center;justify-content:center;background:var(", ");border:0.125rem solid var(", ");box-sizing:border-box;flex-shrink:0;flex-grow:0;input:not(:indeterminate) + label & div{transform:scale(0);transition:transform 0.15s ease-in-out;}input:checked + label & div{transform:scale(1);}"], tokens.triggerMargin, tokens.triggerSize, tokens.triggerSize, tokens.triggerBorderRadius, tokens.triggerBackgroundColor, tokens.triggerBorderColor);
|
14
14
|
export var StyledContentWrapper = /*#__PURE__*/styled.label.withConfig({
|
15
15
|
componentId: "plasma-new-hope__sc-tydhc1-2"
|
16
|
-
})(["position:relative;align-items:flex-start;display:flex;width:
|
16
|
+
})(["position:relative;align-items:flex-start;display:flex;width:inherit;cursor:pointer;.", "{width:100%;}"], classes.singleLine);
|
17
17
|
export var StyledContent = /*#__PURE__*/styled.div.withConfig({
|
18
18
|
componentId: "plasma-new-hope__sc-tydhc1-3"
|
19
19
|
})(["display:flex;flex-direction:column;margin-top:var(", ");margin-left:var(", ");"], tokens.contentTopOffset, tokens.contentLeftOffset);
|
@@ -57,7 +57,8 @@ export var radioboxRoot = function radioboxRoot(Root) {
|
|
57
57
|
"aria-describedby": uniqDescriptionId,
|
58
58
|
tabIndex: canFocused
|
59
59
|
})), /*#__PURE__*/React.createElement(StyledContentWrapper, {
|
60
|
-
htmlFor: radioboxId
|
60
|
+
htmlFor: radioboxId,
|
61
|
+
className: singleLineClass
|
61
62
|
}, /*#__PURE__*/React.createElement(StyledTrigger, {
|
62
63
|
className: classes.radioboxTrigger
|
63
64
|
}, _StyledEllipse || (_StyledEllipse = /*#__PURE__*/React.createElement(StyledEllipse, null))), hasContent && /*#__PURE__*/React.createElement(StyledContent, {
|
@@ -9,4 +9,4 @@ var mappingOverride = /*#__PURE__*/"\n ".concat(checkboxTokens.labelFontFamil
|
|
9
9
|
export var StyledEllipse = /*#__PURE__*/styled.div.withConfig({
|
10
10
|
componentId: "plasma-new-hope__sc-rqiilp-0"
|
11
11
|
})(["width:var(", ");height:var(", ");border-radius:var(", ");background-color:var(", ");transition:transform 0.3s ease-in-out;transform:scale(0);input:checked + label &{transform:scale(1);}"], tokens.ellipseSize, tokens.ellipseSize, tokens.ellipseSize, tokens.ellipseColor);
|
12
|
-
export var base = /*#__PURE__*/css(["", ";margin:var(", ");", ";position:relative;align-items:flex-start;display:flex
|
12
|
+
export var base = /*#__PURE__*/css(["", ";margin:var(", ");", ";position:relative;align-items:flex-start;display:flex;.", "{", ";}"], mappingOverride, tokens.margin, /*#__PURE__*/applyNoUserSelect(), classes.singleLine, /*#__PURE__*/applyEllipsis());
|
@@ -118,10 +118,10 @@ export const WithContentTextboxCustom: Story = {
|
|
118
118
|
}
|
119
119
|
contentRight={!args.disableRightContent && <ChevronRight color="inherit" size="xs" />}
|
120
120
|
>
|
121
|
-
<
|
122
|
-
<
|
121
|
+
<CellTextbox>
|
122
|
+
<CellTextboxTitle>Title</CellTextboxTitle>
|
123
123
|
<MyStyledText>My styled Text</MyStyledText>
|
124
|
-
</
|
124
|
+
</CellTextbox>
|
125
125
|
</Cell>
|
126
126
|
);
|
127
127
|
},
|
@@ -98,14 +98,6 @@ const StoryDefault = (props: CheckboxProps) => {
|
|
98
98
|
<>
|
99
99
|
<Checkbox {...props} />
|
100
100
|
<Checkbox name="item.name" value="item.value" label="Label" description="Description" {...props} />
|
101
|
-
<Checkbox
|
102
|
-
name="item.name"
|
103
|
-
value="item.value"
|
104
|
-
singleLine
|
105
|
-
label="Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
|
106
|
-
description="Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
|
107
|
-
{...props}
|
108
|
-
/>
|
109
101
|
</>
|
110
102
|
);
|
111
103
|
};
|
@@ -114,6 +106,29 @@ export const Default: StoryObj<CheckboxProps> = {
|
|
114
106
|
render: (args) => <StoryDefault {...args} />,
|
115
107
|
};
|
116
108
|
|
109
|
+
const StoryLong = (props: CheckboxProps) => {
|
110
|
+
const { width, ...otherProps } = props;
|
111
|
+
return (
|
112
|
+
<div style={{ width }}>
|
113
|
+
<Checkbox {...otherProps} />
|
114
|
+
</div>
|
115
|
+
);
|
116
|
+
};
|
117
|
+
|
118
|
+
export const LongText: StoryObj<CheckboxProps> = {
|
119
|
+
args: {
|
120
|
+
name: 'item.name',
|
121
|
+
value: 'item.value',
|
122
|
+
label:
|
123
|
+
'Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger',
|
124
|
+
description:
|
125
|
+
'Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger',
|
126
|
+
singleLine: true,
|
127
|
+
width: '300px',
|
128
|
+
},
|
129
|
+
render: (args) => <StoryLong {...args} />,
|
130
|
+
};
|
131
|
+
|
117
132
|
const StoryComplex = (props: CheckboxProps) => {
|
118
133
|
const [values, setValues] = useState({
|
119
134
|
russian: true,
|
@@ -114,6 +114,29 @@ export const Default: StoryObj<CheckboxProps> = {
|
|
114
114
|
render: (args) => <StoryDefault {...args} />,
|
115
115
|
};
|
116
116
|
|
117
|
+
const StoryLong = (props: CheckboxProps) => {
|
118
|
+
const { width, ...otherProps } = props;
|
119
|
+
return (
|
120
|
+
<div style={{ width }}>
|
121
|
+
<Checkbox {...otherProps} />
|
122
|
+
</div>
|
123
|
+
);
|
124
|
+
};
|
125
|
+
|
126
|
+
export const LongText: StoryObj<CheckboxProps> = {
|
127
|
+
args: {
|
128
|
+
name: 'item.name',
|
129
|
+
value: 'item.value',
|
130
|
+
label:
|
131
|
+
'Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger',
|
132
|
+
description:
|
133
|
+
'Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger',
|
134
|
+
singleLine: true,
|
135
|
+
width: '300px',
|
136
|
+
},
|
137
|
+
render: (args) => <StoryLong {...args} />,
|
138
|
+
};
|
139
|
+
|
117
140
|
const StoryComplex = (props: CheckboxProps) => {
|
118
141
|
const [values, setValues] = useState({
|
119
142
|
russian: true,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CellTextbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/Cell/ui/CellTextbox/CellTextbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;
|
1
|
+
{"version":3,"file":"CellTextbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/Cell/ui/CellTextbox/CellTextbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQ9C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,gBAAgB,CAsBnF,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CellTextboxTitle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;
|
1
|
+
{"version":3,"file":"CellTextboxTitle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM9C,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,cAAc,CAAC,CAOrE,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.styles.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,IAAI,
|
1
|
+
{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.styles.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,IAAI,0CAYhB,CAAC;AAEF,eAAO,MAAM,WAAW,8KAYvB,CAAC;AAEF,eAAO,MAAM,aAAa,qKA2BzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,8KAUhC,CAAC;AAEF,eAAO,MAAM,aAAa,qKAMzB,CAAC;AAEF,eAAO,MAAM,WAAW,uKAOvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAc7B,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Radiobox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Radiobox/Radiobox.styles.ts"],"names":[],"mappings":";AAoCA,eAAO,MAAM,aAAa,qKAYzB,CAAC;AAEF,eAAO,MAAM,IAAI,
|
1
|
+
{"version":3,"file":"Radiobox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Radiobox/Radiobox.styles.ts"],"names":[],"mappings":";AAoCA,eAAO,MAAM,aAAa,qKAYzB,CAAC;AAEF,eAAO,MAAM,IAAI,0CAchB,CAAC"}
|