@salutejs/plasma-new-hope 0.327.0-canary.1973.15733948288.0 → 0.327.0-canary.2010.15678347777.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/CodeField/CodeField.js +16 -15
- package/cjs/components/CodeField/CodeField.js.map +1 -1
- package/cjs/components/Tour/Tour.css +4 -0
- package/cjs/components/Tour/Tour.js +224 -0
- package/cjs/components/Tour/Tour.js.map +1 -0
- package/cjs/components/Tour/Tour.styles.js +51 -0
- package/cjs/components/Tour/Tour.styles.js.map +1 -0
- package/cjs/components/Tour/Tour.styles_1ks2isn.css +4 -0
- package/cjs/components/Tour/Tour.tokens.js +21 -0
- package/cjs/components/Tour/Tour.tokens.js.map +1 -0
- package/cjs/components/Tour/utils/index.js +19 -0
- package/cjs/components/Tour/utils/index.js.map +1 -0
- package/cjs/components/{CodeInput/variations/_disabled → Tour/variatoins/_size}/base.js +2 -2
- package/cjs/components/Tour/variatoins/_size/base.js.map +1 -0
- package/cjs/components/Tour/variatoins/_size/base_x642ct.css +1 -0
- package/cjs/components/{CodeInput/variations/_size → Tour/variatoins/_view}/base.js +2 -2
- package/cjs/components/Tour/variatoins/_view/base.js.map +1 -0
- package/cjs/components/Tour/variatoins/_view/base_x642ct.css +1 -0
- package/cjs/index.css +5 -15
- package/cjs/index.js +6 -12
- package/cjs/index.js.map +1 -1
- package/cjs/utils/constants.js +0 -12
- package/cjs/utils/constants.js.map +1 -1
- package/cjs/utils/index.js.map +1 -1
- package/emotion/cjs/components/CodeField/CodeField.js +16 -14
- package/emotion/cjs/components/Tour/Tour.js +233 -0
- package/emotion/cjs/components/Tour/Tour.styles.js +48 -0
- package/emotion/cjs/components/Tour/Tour.tokens.js +19 -0
- package/emotion/cjs/components/Tour/index.js +31 -0
- package/emotion/cjs/components/Tour/utils/index.js +18 -0
- package/emotion/cjs/components/Tour/variatoins/_size/base.js +8 -0
- package/emotion/cjs/components/Tour/variatoins/_view/base.js +8 -0
- package/emotion/cjs/examples/plasma_b2c/components/CodeField/CodeField.config.js +6 -6
- package/emotion/cjs/examples/plasma_b2c/components/Tour/Tour.config.js +22 -0
- package/emotion/cjs/examples/plasma_b2c/components/Tour/Tour.js +11 -0
- package/emotion/cjs/examples/plasma_b2c/components/Tour/Tour.stories.tsx +250 -0
- package/emotion/cjs/examples/plasma_web/components/CodeField/CodeField.config.js +6 -6
- package/emotion/cjs/examples/plasma_web/components/Tour/Tour.config.js +22 -0
- package/emotion/cjs/examples/plasma_web/components/Tour/Tour.js +11 -0
- package/emotion/cjs/examples/plasma_web/components/Tour/Tour.stories.tsx +242 -0
- package/emotion/cjs/hooks/index.js +1 -8
- package/emotion/cjs/index.js +8 -8
- package/emotion/cjs/utils/constants.js +2 -8
- package/emotion/cjs/utils/index.js +0 -12
- package/emotion/es/components/CodeField/CodeField.js +17 -16
- package/emotion/es/components/Tour/Tour.js +226 -0
- package/emotion/es/components/Tour/Tour.styles.js +41 -0
- package/emotion/es/components/Tour/Tour.tokens.js +13 -0
- package/emotion/es/components/Tour/index.js +2 -0
- package/emotion/es/components/Tour/utils/index.js +12 -0
- package/emotion/es/components/Tour/variatoins/_size/base.js +2 -0
- package/emotion/es/components/Tour/variatoins/_view/base.js +2 -0
- package/emotion/es/examples/plasma_b2c/components/CodeField/CodeField.config.js +6 -6
- package/emotion/es/examples/plasma_b2c/components/Tour/Tour.config.js +16 -0
- package/emotion/es/examples/plasma_b2c/components/Tour/Tour.js +5 -0
- package/emotion/es/examples/plasma_b2c/components/Tour/Tour.stories.tsx +250 -0
- package/emotion/es/examples/plasma_web/components/CodeField/CodeField.config.js +6 -6
- package/emotion/es/examples/plasma_web/components/Tour/Tour.config.js +16 -0
- package/emotion/es/examples/plasma_web/components/Tour/Tour.js +5 -0
- package/emotion/es/examples/plasma_web/components/Tour/Tour.stories.tsx +242 -0
- package/emotion/es/hooks/index.js +1 -2
- package/emotion/es/index.js +2 -2
- package/emotion/es/utils/constants.js +1 -7
- package/emotion/es/utils/index.js +0 -1
- package/es/components/CodeField/CodeField.js +17 -16
- package/es/components/CodeField/CodeField.js.map +1 -1
- package/es/components/Tour/Tour.css +4 -0
- package/es/components/Tour/Tour.js +215 -0
- package/es/components/Tour/Tour.js.map +1 -0
- package/es/components/Tour/Tour.styles.js +44 -0
- package/es/components/Tour/Tour.styles.js.map +1 -0
- package/es/components/Tour/Tour.styles_1ks2isn.css +4 -0
- package/es/components/Tour/Tour.tokens.js +16 -0
- package/es/components/Tour/Tour.tokens.js.map +1 -0
- package/es/components/Tour/utils/index.js +15 -0
- package/es/components/Tour/utils/index.js.map +1 -0
- package/es/components/{CodeInput/variations/_view → Tour/variatoins/_size}/base.js +2 -2
- package/es/components/Tour/variatoins/_size/base.js.map +1 -0
- package/es/components/Tour/variatoins/_size/base_x642ct.css +1 -0
- package/es/components/{CodeInput/variations/_size → Tour/variatoins/_view}/base.js +2 -2
- package/es/components/Tour/variatoins/_view/base.js.map +1 -0
- package/es/components/Tour/variatoins/_view/base_x642ct.css +1 -0
- package/es/index.css +5 -15
- package/es/index.js +2 -4
- package/es/index.js.map +1 -1
- package/es/utils/constants.js +1 -7
- package/es/utils/constants.js.map +1 -1
- package/es/utils/index.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/CodeField/CodeField.js +16 -14
- package/styled-components/cjs/components/Tour/Tour.js +233 -0
- package/styled-components/cjs/components/Tour/Tour.styles.js +27 -0
- package/styled-components/cjs/components/Tour/Tour.tokens.js +19 -0
- package/styled-components/cjs/components/Tour/index.js +31 -0
- package/styled-components/cjs/components/Tour/utils/index.js +18 -0
- package/styled-components/cjs/components/{CodeInput/variations/_disabled → Tour/variatoins/_size}/base.js +1 -2
- package/styled-components/cjs/components/Tour/variatoins/_size/tokens.json +1 -0
- package/styled-components/cjs/components/Tour/variatoins/_view/base.js +8 -0
- package/styled-components/cjs/components/Tour/variatoins/_view/tokens.json +1 -0
- package/styled-components/cjs/examples/plasma_b2c/components/CodeField/CodeField.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Tour/Tour.config.js +22 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Tour/Tour.js +11 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Tour/Tour.stories.tsx +250 -0
- package/styled-components/cjs/examples/plasma_web/components/CodeField/CodeField.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Tour/Tour.config.js +22 -0
- package/styled-components/cjs/examples/plasma_web/components/Tour/Tour.js +11 -0
- package/styled-components/cjs/examples/plasma_web/components/Tour/Tour.stories.tsx +242 -0
- package/styled-components/cjs/hooks/index.js +1 -8
- package/styled-components/cjs/index.js +8 -8
- package/styled-components/cjs/utils/constants.js +2 -8
- package/styled-components/cjs/utils/index.js +0 -12
- package/styled-components/es/components/CodeField/CodeField.js +17 -16
- package/styled-components/es/components/Tour/Tour.js +226 -0
- package/styled-components/es/components/Tour/Tour.styles.js +20 -0
- package/styled-components/es/components/Tour/Tour.tokens.js +13 -0
- package/styled-components/es/components/Tour/index.js +2 -0
- package/styled-components/es/components/Tour/utils/index.js +12 -0
- package/styled-components/es/components/Tour/variatoins/_size/base.js +2 -0
- package/styled-components/es/components/Tour/variatoins/_size/tokens.json +1 -0
- package/styled-components/es/components/Tour/variatoins/_view/base.js +2 -0
- package/styled-components/es/components/Tour/variatoins/_view/tokens.json +1 -0
- package/styled-components/es/examples/plasma_b2c/components/CodeField/CodeField.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Tour/Tour.config.js +16 -0
- package/styled-components/es/examples/plasma_b2c/components/Tour/Tour.js +5 -0
- package/styled-components/es/examples/plasma_b2c/components/Tour/Tour.stories.tsx +250 -0
- package/styled-components/es/examples/plasma_web/components/CodeField/CodeField.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Tour/Tour.config.js +16 -0
- package/styled-components/es/examples/plasma_web/components/Tour/Tour.js +5 -0
- package/styled-components/es/examples/plasma_web/components/Tour/Tour.stories.tsx +242 -0
- package/styled-components/es/hooks/index.js +1 -2
- package/styled-components/es/index.js +2 -2
- package/styled-components/es/utils/constants.js +1 -7
- package/styled-components/es/utils/index.js +0 -1
- package/types/components/CodeField/CodeField.d.ts.map +1 -1
- package/types/components/Tour/Tour.d.ts +23 -0
- package/types/components/Tour/Tour.d.ts.map +1 -0
- package/types/components/Tour/Tour.styles.d.ts +9 -0
- package/types/components/Tour/Tour.styles.d.ts.map +1 -0
- package/types/components/Tour/Tour.tokens.d.ts +14 -0
- package/types/components/Tour/Tour.tokens.d.ts.map +1 -0
- package/types/components/Tour/Tour.types.d.ts +78 -0
- package/types/components/Tour/Tour.types.d.ts.map +1 -0
- package/types/components/Tour/index.d.ts +4 -0
- package/types/components/Tour/index.d.ts.map +1 -0
- package/types/components/Tour/utils/index.d.ts +2 -0
- package/types/components/Tour/utils/index.d.ts.map +1 -0
- package/types/components/Tour/variatoins/_size/base.d.ts.map +1 -0
- package/types/components/Tour/variatoins/_view/base.d.ts.map +1 -0
- package/types/hooks/index.d.ts +0 -1
- package/types/hooks/index.d.ts.map +1 -1
- package/types/index.d.ts +1 -1
- package/types/index.d.ts.map +1 -1
- package/types/utils/constants.d.ts +0 -6
- package/types/utils/constants.d.ts.map +1 -1
- package/types/utils/index.d.ts +0 -1
- package/types/utils/index.d.ts.map +1 -1
- package/cjs/components/CodeInput/CodeInput.css +0 -14
- package/cjs/components/CodeInput/CodeInput.js +0 -299
- package/cjs/components/CodeInput/CodeInput.js.map +0 -1
- package/cjs/components/CodeInput/CodeInput.styles.js +0 -78
- package/cjs/components/CodeInput/CodeInput.styles.js.map +0 -1
- package/cjs/components/CodeInput/CodeInput.styles_3w98lu.css +0 -8
- package/cjs/components/CodeInput/CodeInput.tokens.js +0 -72
- package/cjs/components/CodeInput/CodeInput.tokens.js.map +0 -1
- package/cjs/components/CodeInput/utils/handleCodeError.js +0 -55
- package/cjs/components/CodeInput/utils/handleCodeError.js.map +0 -1
- package/cjs/components/CodeInput/utils/handleItemError.js +0 -42
- package/cjs/components/CodeInput/utils/handleItemError.js.map +0 -1
- package/cjs/components/CodeInput/variations/_disabled/base.js.map +0 -1
- package/cjs/components/CodeInput/variations/_disabled/base_vkh53h.css +0 -1
- package/cjs/components/CodeInput/variations/_size/base.js.map +0 -1
- package/cjs/components/CodeInput/variations/_size/base_h42a8b.css +0 -1
- package/cjs/components/CodeInput/variations/_view/base.js +0 -9
- package/cjs/components/CodeInput/variations/_view/base.js.map +0 -1
- package/cjs/components/CodeInput/variations/_view/base_17gj0wr.css +0 -1
- package/cjs/hooks/useCodeHook.js +0 -34
- package/cjs/hooks/useCodeHook.js.map +0 -1
- package/cjs/utils/initialValuesHelper.js +0 -33
- package/cjs/utils/initialValuesHelper.js.map +0 -1
- package/emotion/cjs/components/CodeInput/CodeInput.js +0 -307
- package/emotion/cjs/components/CodeInput/CodeInput.styles.js +0 -76
- package/emotion/cjs/components/CodeInput/CodeInput.tokens.js +0 -76
- package/emotion/cjs/components/CodeInput/index.js +0 -31
- package/emotion/cjs/components/CodeInput/utils/handleCodeError.js +0 -58
- package/emotion/cjs/components/CodeInput/utils/handleItemError.js +0 -40
- package/emotion/cjs/components/CodeInput/utils/index.js +0 -38
- package/emotion/cjs/components/CodeInput/variations/_disabled/base.js +0 -9
- package/emotion/cjs/components/CodeInput/variations/_disabled/tokens.json +0 -4
- package/emotion/cjs/components/CodeInput/variations/_size/base.js +0 -25
- package/emotion/cjs/components/CodeInput/variations/_size/tokens.json +0 -19
- package/emotion/cjs/components/CodeInput/variations/_view/base.js +0 -16
- package/emotion/cjs/examples/plasma_b2c/components/CodeInput/CodeInput.config.js +0 -27
- package/emotion/cjs/examples/plasma_b2c/components/CodeInput/CodeInput.js +0 -11
- package/emotion/cjs/examples/plasma_b2c/components/CodeInput/CodeInput.stories.tsx +0 -100
- package/emotion/cjs/examples/plasma_web/components/CodeInput/CodeInput.config.js +0 -27
- package/emotion/cjs/examples/plasma_web/components/CodeInput/CodeInput.js +0 -11
- package/emotion/cjs/examples/plasma_web/components/CodeInput/CodeInput.stories.tsx +0 -100
- package/emotion/cjs/hooks/useCodeHook.js +0 -32
- package/emotion/cjs/utils/initialValuesHelper.js +0 -30
- package/emotion/es/components/CodeInput/CodeInput.js +0 -299
- package/emotion/es/components/CodeInput/CodeInput.styles.js +0 -69
- package/emotion/es/components/CodeInput/CodeInput.tokens.js +0 -70
- package/emotion/es/components/CodeInput/index.js +0 -2
- package/emotion/es/components/CodeInput/utils/handleCodeError.js +0 -52
- package/emotion/es/components/CodeInput/utils/handleItemError.js +0 -34
- package/emotion/es/components/CodeInput/utils/index.js +0 -3
- package/emotion/es/components/CodeInput/variations/_disabled/base.js +0 -3
- package/emotion/es/components/CodeInput/variations/_disabled/tokens.json +0 -4
- package/emotion/es/components/CodeInput/variations/_size/base.js +0 -19
- package/emotion/es/components/CodeInput/variations/_size/tokens.json +0 -19
- package/emotion/es/components/CodeInput/variations/_view/base.js +0 -10
- package/emotion/es/examples/plasma_b2c/components/CodeInput/CodeInput.config.js +0 -21
- package/emotion/es/examples/plasma_b2c/components/CodeInput/CodeInput.js +0 -5
- package/emotion/es/examples/plasma_b2c/components/CodeInput/CodeInput.stories.tsx +0 -100
- package/emotion/es/examples/plasma_web/components/CodeInput/CodeInput.config.js +0 -21
- package/emotion/es/examples/plasma_web/components/CodeInput/CodeInput.js +0 -5
- package/emotion/es/examples/plasma_web/components/CodeInput/CodeInput.stories.tsx +0 -100
- package/emotion/es/hooks/useCodeHook.js +0 -26
- package/emotion/es/utils/initialValuesHelper.js +0 -24
- package/es/components/CodeInput/CodeInput.css +0 -14
- package/es/components/CodeInput/CodeInput.js +0 -289
- package/es/components/CodeInput/CodeInput.js.map +0 -1
- package/es/components/CodeInput/CodeInput.styles.js +0 -67
- package/es/components/CodeInput/CodeInput.styles.js.map +0 -1
- package/es/components/CodeInput/CodeInput.styles_3w98lu.css +0 -8
- package/es/components/CodeInput/CodeInput.tokens.js +0 -67
- package/es/components/CodeInput/CodeInput.tokens.js.map +0 -1
- package/es/components/CodeInput/utils/handleCodeError.js +0 -51
- package/es/components/CodeInput/utils/handleCodeError.js.map +0 -1
- package/es/components/CodeInput/utils/handleItemError.js +0 -38
- package/es/components/CodeInput/utils/handleItemError.js.map +0 -1
- package/es/components/CodeInput/variations/_disabled/base.js +0 -5
- package/es/components/CodeInput/variations/_disabled/base.js.map +0 -1
- package/es/components/CodeInput/variations/_disabled/base_vkh53h.css +0 -1
- package/es/components/CodeInput/variations/_size/base.js.map +0 -1
- package/es/components/CodeInput/variations/_size/base_h42a8b.css +0 -1
- package/es/components/CodeInput/variations/_view/base.js.map +0 -1
- package/es/components/CodeInput/variations/_view/base_17gj0wr.css +0 -1
- package/es/hooks/useCodeHook.js +0 -30
- package/es/hooks/useCodeHook.js.map +0 -1
- package/es/utils/initialValuesHelper.js +0 -27
- package/es/utils/initialValuesHelper.js.map +0 -1
- package/styled-components/cjs/components/CodeInput/CodeInput.js +0 -307
- package/styled-components/cjs/components/CodeInput/CodeInput.styles.js +0 -47
- package/styled-components/cjs/components/CodeInput/CodeInput.tokens.js +0 -76
- package/styled-components/cjs/components/CodeInput/index.js +0 -31
- package/styled-components/cjs/components/CodeInput/utils/handleCodeError.js +0 -58
- package/styled-components/cjs/components/CodeInput/utils/handleItemError.js +0 -40
- package/styled-components/cjs/components/CodeInput/utils/index.js +0 -38
- package/styled-components/cjs/components/CodeInput/variations/_disabled/tokens.json +0 -4
- package/styled-components/cjs/components/CodeInput/variations/_size/base.js +0 -25
- package/styled-components/cjs/components/CodeInput/variations/_size/tokens.json +0 -19
- package/styled-components/cjs/components/CodeInput/variations/_view/base.js +0 -16
- package/styled-components/cjs/examples/plasma_b2c/components/CodeInput/CodeInput.config.js +0 -27
- package/styled-components/cjs/examples/plasma_b2c/components/CodeInput/CodeInput.js +0 -11
- package/styled-components/cjs/examples/plasma_b2c/components/CodeInput/CodeInput.stories.tsx +0 -100
- package/styled-components/cjs/examples/plasma_web/components/CodeInput/CodeInput.config.js +0 -27
- package/styled-components/cjs/examples/plasma_web/components/CodeInput/CodeInput.js +0 -11
- package/styled-components/cjs/examples/plasma_web/components/CodeInput/CodeInput.stories.tsx +0 -100
- package/styled-components/cjs/hooks/useCodeHook.js +0 -32
- package/styled-components/cjs/utils/initialValuesHelper.js +0 -30
- package/styled-components/es/components/CodeInput/CodeInput.js +0 -299
- package/styled-components/es/components/CodeInput/CodeInput.styles.js +0 -39
- package/styled-components/es/components/CodeInput/CodeInput.tokens.js +0 -70
- package/styled-components/es/components/CodeInput/index.js +0 -2
- package/styled-components/es/components/CodeInput/utils/handleCodeError.js +0 -52
- package/styled-components/es/components/CodeInput/utils/handleItemError.js +0 -34
- package/styled-components/es/components/CodeInput/utils/index.js +0 -3
- package/styled-components/es/components/CodeInput/variations/_disabled/base.js +0 -3
- package/styled-components/es/components/CodeInput/variations/_disabled/tokens.json +0 -4
- package/styled-components/es/components/CodeInput/variations/_size/base.js +0 -19
- package/styled-components/es/components/CodeInput/variations/_size/tokens.json +0 -19
- package/styled-components/es/components/CodeInput/variations/_view/base.js +0 -10
- package/styled-components/es/examples/plasma_b2c/components/CodeInput/CodeInput.config.js +0 -21
- package/styled-components/es/examples/plasma_b2c/components/CodeInput/CodeInput.js +0 -5
- package/styled-components/es/examples/plasma_b2c/components/CodeInput/CodeInput.stories.tsx +0 -100
- package/styled-components/es/examples/plasma_web/components/CodeInput/CodeInput.config.js +0 -21
- package/styled-components/es/examples/plasma_web/components/CodeInput/CodeInput.js +0 -5
- package/styled-components/es/examples/plasma_web/components/CodeInput/CodeInput.stories.tsx +0 -100
- package/styled-components/es/hooks/useCodeHook.js +0 -26
- package/styled-components/es/utils/initialValuesHelper.js +0 -24
- package/types/components/CodeInput/CodeInput.d.ts +0 -65
- package/types/components/CodeInput/CodeInput.d.ts.map +0 -1
- package/types/components/CodeInput/CodeInput.styles.d.ts +0 -16
- package/types/components/CodeInput/CodeInput.styles.d.ts.map +0 -1
- package/types/components/CodeInput/CodeInput.tokens.d.ts +0 -72
- package/types/components/CodeInput/CodeInput.tokens.d.ts.map +0 -1
- package/types/components/CodeInput/CodeInput.types.d.ts +0 -92
- package/types/components/CodeInput/CodeInput.types.d.ts.map +0 -1
- package/types/components/CodeInput/index.d.ts +0 -3
- package/types/components/CodeInput/index.d.ts.map +0 -1
- package/types/components/CodeInput/utils/handleCodeError.d.ts +0 -15
- package/types/components/CodeInput/utils/handleCodeError.d.ts.map +0 -1
- package/types/components/CodeInput/utils/handleItemError.d.ts +0 -14
- package/types/components/CodeInput/utils/handleItemError.d.ts.map +0 -1
- package/types/components/CodeInput/utils/index.d.ts +0 -4
- package/types/components/CodeInput/utils/index.d.ts.map +0 -1
- package/types/components/CodeInput/variations/_disabled/base.d.ts.map +0 -1
- package/types/components/CodeInput/variations/_size/base.d.ts.map +0 -1
- package/types/components/CodeInput/variations/_view/base.d.ts +0 -2
- package/types/components/CodeInput/variations/_view/base.d.ts.map +0 -1
- package/types/hooks/useCodeHook.d.ts +0 -13
- package/types/hooks/useCodeHook.d.ts.map +0 -1
- package/types/utils/initialValuesHelper.d.ts +0 -4
- package/types/utils/initialValuesHelper.d.ts.map +0 -1
- /package/emotion/cjs/components/{CodeInput/CodeInput.types.js → Tour/Tour.types.js} +0 -0
- /package/emotion/cjs/components/{CodeInput/variations/_view → Tour/variatoins/_size}/tokens.json +0 -0
- /package/emotion/{es/components/CodeInput/variations → cjs/components/Tour/variatoins}/_view/tokens.json +0 -0
- /package/emotion/es/components/{CodeInput/CodeInput.types.js → Tour/Tour.types.js} +0 -0
- /package/{styled-components/cjs/components/CodeInput/variations/_view → emotion/es/components/Tour/variatoins/_size}/tokens.json +0 -0
- /package/{styled-components/es/components/CodeInput/variations → emotion/es/components/Tour/variatoins}/_view/tokens.json +0 -0
- /package/styled-components/cjs/components/{CodeInput/CodeInput.types.js → Tour/Tour.types.js} +0 -0
- /package/styled-components/es/components/{CodeInput/CodeInput.types.js → Tour/Tour.types.js} +0 -0
- /package/types/components/{CodeInput/variations/_disabled → Tour/variatoins/_size}/base.d.ts +0 -0
- /package/types/components/{CodeInput/variations/_size → Tour/variatoins/_view}/base.d.ts +0 -0
@@ -1,19 +0,0 @@
|
|
1
|
-
[
|
2
|
-
"--plasma-codeinput-caption-gap",
|
3
|
-
"--plasma-codeinput-code-item-gap",
|
4
|
-
"--plasma-codeinput-separator-width",
|
5
|
-
"--plasma-codeinput-item-width",
|
6
|
-
"--plasma-codeinput-item-height",
|
7
|
-
"--plasma-codeinput-font-family",
|
8
|
-
"--plasma-codeinput-font-style",
|
9
|
-
"--plasma-codeinput-font-size",
|
10
|
-
"--plasma-codeinput-font-weight",
|
11
|
-
"--plasma-codeinput-letter-spacing",
|
12
|
-
"--plasma-codeinput-line-height",
|
13
|
-
"--plasma-codeinput-caption-font-family",
|
14
|
-
"--plasma-codeinput-caption-font-style",
|
15
|
-
"--plasma-codeinput-caption-font-size",
|
16
|
-
"--plasma-codeinput-caption-font-weight",
|
17
|
-
"--plasma-codeinput-caption-letter-spacing",
|
18
|
-
"--plasma-codeinput-caption-line-height"
|
19
|
-
]
|
@@ -1,16 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.base = void 0;
|
7
|
-
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
-
var _CodeInput = /*#__PURE__*/require("../../CodeInput.styles");
|
9
|
-
var _CodeInput2 = /*#__PURE__*/require("../../CodeInput.tokens");
|
10
|
-
var _mixins = /*#__PURE__*/require("../../../../mixins");
|
11
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{color:var(", ");&.", "{color:var(", ");}}", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}", "{border:var(", ") solid var(", ");background-color:'transparent';&.", "{background-color:var(", ");}&.", "{animation:shakingError 0.3s forwards;}&.", "{background-color:var(", ");border:var(", ") solid var(", ");}&:focus-visible{outline:none;}&[data-focus-visible-added]{", " border:none;position:absolute;}}&:hover{.", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}&:focus-within{", ":focus-within{box-shadow:inset 0 0 0 var(", ") var(", ");}}&& .", "{animation:shakingError 0.3s forwards;}&& .", "{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}", "{border:var(", ") solid var(", ");&.", "{background-color:var(", ");}}&:focus-within{", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}&.", "{", "{animation:fadeError 0.3s forwards;}}}&& .", "{animation:shakingError 0.3s forwards;}&& .", ",&& .", ":focus-within{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");&.", "{animation:shakingError 0.3s forwards fadeError 0.3s forwards;}}@keyframes shakingError{14%{transform:translateX(-0.125rem);}28%{transform:translateX(0.125rem);}42%{transform:translateX(-0.125rem);}57%{transform:translateX(0.125rem);}71%{transform:translateX(-0.125rem);}85%{transform:translateX(0.125rem);}100%{transform:translateX(-0.125rem);}}@keyframes fadeError{50%{color:var(", ");}100%{color:transparent;}}"], _CodeInput.CaptionWrapper, _CodeInput2.tokens.captionColor, _CodeInput2.classes.captionError, _CodeInput2.tokens.captionColorError, _CodeInput.ItemInput, _CodeInput2.tokens.codeColor, _CodeInput2.tokens.backgroundColor, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderColor, _CodeInput.ItemCircle, _CodeInput2.tokens.codeItemCircleBorderWidth, _CodeInput2.tokens.codeColor, _CodeInput2.classes.itemCirlceFilled, _CodeInput2.tokens.codeColor, _CodeInput2.classes.itemCircleErrorAnimation, _CodeInput2.classes.itemCircleError, _CodeInput2.tokens.codeColorError, _CodeInput2.tokens.codeItemCircleBorderWidth, _CodeInput2.tokens.codeColorError, /*#__PURE__*/(0, _mixins.addFocus)({
|
12
|
-
outlineOffset: '-0.125rem',
|
13
|
-
outlineSize: '0.125rem',
|
14
|
-
outlineRadius: '1rem',
|
15
|
-
outlineColor: /*#__PURE__*/"var(".concat(_CodeInput2.tokens.borderColorFocus, ")")
|
16
|
-
}), _CodeInput2.classes.hoverEnabled, _CodeInput2.tokens.backgroundColorHover, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderColorHover, _CodeInput.ItemInput, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderColorFocus, _CodeInput2.classes.codeErrorAnimation, _CodeInput2.classes.codeError, _CodeInput.ItemInput, _CodeInput2.tokens.codeColorError, _CodeInput2.tokens.backgroundErrorColor, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderErrorColor, _CodeInput.ItemCircle, _CodeInput2.tokens.codeItemCircleBorderWidth, _CodeInput2.tokens.codeColorError, _CodeInput2.classes.itemCirlceFilled, _CodeInput2.tokens.codeColorError, _CodeInput.ItemInput, _CodeInput2.tokens.backgroundErrorColor, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderErrorColor, _CodeInput2.classes.codeErrorFade, _CodeInput.ItemInput, _CodeInput2.classes.itemErrorAnimation, _CodeInput2.classes.itemError, _CodeInput2.classes.itemError, _CodeInput2.tokens.codeColorError, _CodeInput2.tokens.backgroundErrorColor, _CodeInput2.tokens.borderWidth, _CodeInput2.tokens.borderErrorColor, _CodeInput2.classes.codeErrorFade, _CodeInput2.tokens.codeColorError);
|
@@ -1,27 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.config = void 0;
|
7
|
-
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
-
var _CodeInput = /*#__PURE__*/require("../../../../components/CodeInput");
|
9
|
-
var config = exports.config = {
|
10
|
-
defaults: {
|
11
|
-
view: 'default',
|
12
|
-
size: 'l'
|
13
|
-
},
|
14
|
-
variations: {
|
15
|
-
view: {
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ":var(--outline-accent);"], _CodeInput.codeInputTokens.captionColor, _CodeInput.codeInputTokens.captionColorError, _CodeInput.codeInputTokens.codeColor, _CodeInput.codeInputTokens.codeColorError, _CodeInput.codeInputTokens.borderColorFocus)
|
17
|
-
},
|
18
|
-
size: {
|
19
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.75rem;", ":0.75rem;", ":var(--plasma-typo-dspl-l-font-family);", ":var(--plasma-typo-dspl-l-font-style);", ":var(--plasma-typo-dspl-l-bold-font-weight);", ":var(--plasma-typo-dspl-l-letter-spacing);", ":8rem;", ":8rem;", ":7rem;", ":7rem;", ":5.5rem;", ":5.75rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);", ":5rem;", ":8rem;", ":4.5rem;", ":7rem;", ":3.5rem;", ":5.75rem;", ":0.125rem;", ":1.5rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeFontSize, _CodeInput.codeInputTokens.largeLineHeight, _CodeInput.codeInputTokens.mediumFontSize, _CodeInput.codeInputTokens.mediumLineHeight, _CodeInput.codeInputTokens.smallFontSize, _CodeInput.codeInputTokens.smallLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeCodeItemWidth, _CodeInput.codeInputTokens.largeCodeItemHeight, _CodeInput.codeInputTokens.mediumCodeItemWidth, _CodeInput.codeInputTokens.mediumCodeItemHeight, _CodeInput.codeInputTokens.smallCodeItemWidth, _CodeInput.codeInputTokens.smallCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize),
|
20
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":var(--plasma-typo-dspl-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":5.5rem;", ":5.75rem;", ":4.5rem;", ":4.75rem;", ":3.5rem;", ":3.75rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":3.5rem;", ":5.75rem;", ":3rem;", ":4.75rem;", ":2.25rem;", ":3.75rem;", ":0.094rem;", ":1rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeFontSize, _CodeInput.codeInputTokens.largeLineHeight, _CodeInput.codeInputTokens.mediumFontSize, _CodeInput.codeInputTokens.mediumLineHeight, _CodeInput.codeInputTokens.smallFontSize, _CodeInput.codeInputTokens.smallLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeCodeItemWidth, _CodeInput.codeInputTokens.largeCodeItemHeight, _CodeInput.codeInputTokens.mediumCodeItemWidth, _CodeInput.codeInputTokens.mediumCodeItemHeight, _CodeInput.codeInputTokens.smallCodeItemWidth, _CodeInput.codeInputTokens.smallCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize),
|
21
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.25rem;", ":0.5rem;", ":var(--plasma-typo-dspl-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":4rem;", ":4.25rem;", ":3rem;", ":3.25rem;", ":2.5rem;", ":2.75rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);", ":2.5rem;", ":4.25rem;", ":2rem;", ":3.25rem;", ":1.625rem;", ":2.75rem;", ":0.063rem;", ":0.75rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeFontSize, _CodeInput.codeInputTokens.largeLineHeight, _CodeInput.codeInputTokens.mediumFontSize, _CodeInput.codeInputTokens.mediumLineHeight, _CodeInput.codeInputTokens.smallFontSize, _CodeInput.codeInputTokens.smallLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeCodeItemWidth, _CodeInput.codeInputTokens.largeCodeItemHeight, _CodeInput.codeInputTokens.mediumCodeItemWidth, _CodeInput.codeInputTokens.mediumCodeItemHeight, _CodeInput.codeInputTokens.smallCodeItemWidth, _CodeInput.codeInputTokens.smallCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize)
|
22
|
-
},
|
23
|
-
disabled: {
|
24
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _CodeInput.codeInputTokens.disabledOpacity)
|
25
|
-
}
|
26
|
-
}
|
27
|
-
};
|
@@ -1,11 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.CodeInput = void 0;
|
7
|
-
var _CodeInput = /*#__PURE__*/require("../../../../components/CodeInput");
|
8
|
-
var _engines = /*#__PURE__*/require("../../../../engines");
|
9
|
-
var _CodeInput2 = /*#__PURE__*/require("./CodeInput.config");
|
10
|
-
var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_CodeInput.codeInputConfig, _CodeInput2.config);
|
11
|
-
var CodeInput = exports.CodeInput = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
package/styled-components/cjs/examples/plasma_b2c/components/CodeInput/CodeInput.stories.tsx
DELETED
@@ -1,100 +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 { getConfigVariations } from '@salutejs/plasma-sb-utils';
|
5
|
-
|
6
|
-
import { WithTheme } from '../../../_helpers';
|
7
|
-
|
8
|
-
import { CodeInput } from './CodeInput';
|
9
|
-
import { config } from './CodeInput.config';
|
10
|
-
|
11
|
-
const onChange = action('onChange');
|
12
|
-
const onFullCodeEnter = action('onFullCodeEnter');
|
13
|
-
|
14
|
-
const { views, sizes } = getConfigVariations(config);
|
15
|
-
const codeLengths = [4, 5, 6];
|
16
|
-
const captionAlignVariants = ['left', 'center'];
|
17
|
-
const itemErrorBehaviorVariants = ['remove-symbol', 'keep', 'forbid-enter'];
|
18
|
-
const codeErrorBehaviorVariants = ['remove-code', 'keep'];
|
19
|
-
|
20
|
-
const meta: Meta<typeof CodeInput> = {
|
21
|
-
title: 'b2c/Data Entry/CodeInput',
|
22
|
-
component: CodeInput,
|
23
|
-
decorators: [WithTheme],
|
24
|
-
argTypes: {
|
25
|
-
view: {
|
26
|
-
options: views,
|
27
|
-
control: {
|
28
|
-
type: 'select',
|
29
|
-
},
|
30
|
-
},
|
31
|
-
size: {
|
32
|
-
options: sizes,
|
33
|
-
control: {
|
34
|
-
type: 'inline-radio',
|
35
|
-
},
|
36
|
-
},
|
37
|
-
captionAlign: {
|
38
|
-
options: captionAlignVariants,
|
39
|
-
control: {
|
40
|
-
type: 'inline-radio',
|
41
|
-
},
|
42
|
-
},
|
43
|
-
codeLength: {
|
44
|
-
options: codeLengths,
|
45
|
-
control: {
|
46
|
-
type: 'inline-radio',
|
47
|
-
},
|
48
|
-
},
|
49
|
-
itemErrorBehavior: {
|
50
|
-
options: itemErrorBehaviorVariants,
|
51
|
-
control: {
|
52
|
-
type: 'inline-radio',
|
53
|
-
},
|
54
|
-
},
|
55
|
-
codeErrorBehavior: {
|
56
|
-
options: codeErrorBehaviorVariants,
|
57
|
-
control: {
|
58
|
-
type: 'inline-radio',
|
59
|
-
},
|
60
|
-
},
|
61
|
-
},
|
62
|
-
parameters: {
|
63
|
-
controls: {
|
64
|
-
exclude: ['view'],
|
65
|
-
},
|
66
|
-
},
|
67
|
-
};
|
68
|
-
|
69
|
-
export default meta;
|
70
|
-
|
71
|
-
type StoryPropsDefault = ComponentProps<typeof CodeInput>;
|
72
|
-
|
73
|
-
const StoryDefault = (args: StoryPropsDefault) => {
|
74
|
-
const [value, setValue] = useState('');
|
75
|
-
|
76
|
-
const handleChange = (newValue: string) => {
|
77
|
-
setValue(newValue);
|
78
|
-
onChange(newValue);
|
79
|
-
};
|
80
|
-
|
81
|
-
return <CodeInput {...args} value={value} onChange={handleChange} onFullCodeEnter={onFullCodeEnter} />;
|
82
|
-
};
|
83
|
-
|
84
|
-
export const Default: StoryObj<StoryPropsDefault> = {
|
85
|
-
args: {
|
86
|
-
view: 'default',
|
87
|
-
size: 'm',
|
88
|
-
codeLength: 6,
|
89
|
-
caption: 'Caption',
|
90
|
-
captionAlign: 'center',
|
91
|
-
width: '',
|
92
|
-
isError: false,
|
93
|
-
itemErrorBehavior: 'remove-symbol',
|
94
|
-
codeErrorBehavior: 'remove-code',
|
95
|
-
autoFocus: true,
|
96
|
-
disabled: false,
|
97
|
-
hidden: false,
|
98
|
-
},
|
99
|
-
render: StoryDefault,
|
100
|
-
};
|
@@ -1,27 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.config = void 0;
|
7
|
-
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
-
var _CodeInput = /*#__PURE__*/require("../../../../components/CodeInput");
|
9
|
-
var config = exports.config = {
|
10
|
-
defaults: {
|
11
|
-
view: 'default',
|
12
|
-
size: 'l'
|
13
|
-
},
|
14
|
-
variations: {
|
15
|
-
view: {
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ":var(--outline-accent);"], _CodeInput.codeInputTokens.captionColor, _CodeInput.codeInputTokens.captionColorError, _CodeInput.codeInputTokens.codeColor, _CodeInput.codeInputTokens.codeColorError, _CodeInput.codeInputTokens.borderColorFocus)
|
17
|
-
},
|
18
|
-
size: {
|
19
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.5rem;", ":0.75rem;", ":0.75rem;", ":var(--plasma-typo-dspl-l-font-family);", ":var(--plasma-typo-dspl-l-font-style);", ":var(--plasma-typo-dspl-l-bold-font-weight);", ":var(--plasma-typo-dspl-l-letter-spacing);", ":8rem;", ":8rem;", ":7rem;", ":7rem;", ":5.5rem;", ":5.75rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);", ":5rem;", ":8rem;", ":4.5rem;", ":7rem;", ":3.5rem;", ":5.75rem;", ":0.125rem;", ":1.5rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeFontSize, _CodeInput.codeInputTokens.largeLineHeight, _CodeInput.codeInputTokens.mediumFontSize, _CodeInput.codeInputTokens.mediumLineHeight, _CodeInput.codeInputTokens.smallFontSize, _CodeInput.codeInputTokens.smallLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeCodeItemWidth, _CodeInput.codeInputTokens.largeCodeItemHeight, _CodeInput.codeInputTokens.mediumCodeItemWidth, _CodeInput.codeInputTokens.mediumCodeItemHeight, _CodeInput.codeInputTokens.smallCodeItemWidth, _CodeInput.codeInputTokens.smallCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize),
|
20
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":var(--plasma-typo-dspl-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":5.5rem;", ":5.75rem;", ":4.5rem;", ":4.75rem;", ":3.5rem;", ":3.75rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":3.5rem;", ":5.75rem;", ":3rem;", ":4.75rem;", ":2.25rem;", ":3.75rem;", ":0.094rem;", ":1rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeFontSize, _CodeInput.codeInputTokens.largeLineHeight, _CodeInput.codeInputTokens.mediumFontSize, _CodeInput.codeInputTokens.mediumLineHeight, _CodeInput.codeInputTokens.smallFontSize, _CodeInput.codeInputTokens.smallLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeCodeItemWidth, _CodeInput.codeInputTokens.largeCodeItemHeight, _CodeInput.codeInputTokens.mediumCodeItemWidth, _CodeInput.codeInputTokens.mediumCodeItemHeight, _CodeInput.codeInputTokens.smallCodeItemWidth, _CodeInput.codeInputTokens.smallCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize),
|
21
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":0.25rem;", ":0.5rem;", ":var(--plasma-typo-dspl-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":4rem;", ":4.25rem;", ":3rem;", ":3.25rem;", ":2.5rem;", ":2.75rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);", ":2.5rem;", ":4.25rem;", ":2rem;", ":3.25rem;", ":1.625rem;", ":2.75rem;", ":0.063rem;", ":0.75rem;"], _CodeInput.codeInputTokens.captionGap, _CodeInput.codeInputTokens.codeItemsGap, _CodeInput.codeInputTokens.separatorWidth, _CodeInput.codeInputTokens.fontFamily, _CodeInput.codeInputTokens.fontStyle, _CodeInput.codeInputTokens.fontWeight, _CodeInput.codeInputTokens.letterSpacing, _CodeInput.codeInputTokens.largeFontSize, _CodeInput.codeInputTokens.largeLineHeight, _CodeInput.codeInputTokens.mediumFontSize, _CodeInput.codeInputTokens.mediumLineHeight, _CodeInput.codeInputTokens.smallFontSize, _CodeInput.codeInputTokens.smallLineHeight, _CodeInput.codeInputTokens.captionFontFamily, _CodeInput.codeInputTokens.captionFontSize, _CodeInput.codeInputTokens.captionFontStyle, _CodeInput.codeInputTokens.captionFontWeight, _CodeInput.codeInputTokens.captionLetterSpacing, _CodeInput.codeInputTokens.captionLineHeight, _CodeInput.codeInputTokens.largeCodeItemWidth, _CodeInput.codeInputTokens.largeCodeItemHeight, _CodeInput.codeInputTokens.mediumCodeItemWidth, _CodeInput.codeInputTokens.mediumCodeItemHeight, _CodeInput.codeInputTokens.smallCodeItemWidth, _CodeInput.codeInputTokens.smallCodeItemHeight, _CodeInput.codeInputTokens.codeItemCircleBorderWidth, _CodeInput.codeInputTokens.codeItemCircleSize)
|
22
|
-
},
|
23
|
-
disabled: {
|
24
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _CodeInput.codeInputTokens.disabledOpacity)
|
25
|
-
}
|
26
|
-
}
|
27
|
-
};
|
@@ -1,11 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.CodeInput = void 0;
|
7
|
-
var _CodeInput = /*#__PURE__*/require("../../../../components/CodeInput");
|
8
|
-
var _engines = /*#__PURE__*/require("../../../../engines");
|
9
|
-
var _CodeInput2 = /*#__PURE__*/require("./CodeInput.config");
|
10
|
-
var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_CodeInput.codeInputConfig, _CodeInput2.config);
|
11
|
-
var CodeInput = exports.CodeInput = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
package/styled-components/cjs/examples/plasma_web/components/CodeInput/CodeInput.stories.tsx
DELETED
@@ -1,100 +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 { getConfigVariations } from '@salutejs/plasma-sb-utils';
|
5
|
-
|
6
|
-
import { WithTheme } from '../../../_helpers';
|
7
|
-
|
8
|
-
import { CodeInput } from './CodeInput';
|
9
|
-
import { config } from './CodeInput.config';
|
10
|
-
|
11
|
-
const onChange = action('onChange');
|
12
|
-
const onFullCodeEnter = action('onFullCodeEnter');
|
13
|
-
|
14
|
-
const { views, sizes } = getConfigVariations(config);
|
15
|
-
const codeLengths = [4, 5, 6];
|
16
|
-
const captionAlignVariants = ['left', 'center'];
|
17
|
-
const itemErrorBehaviorVariants = ['remove-symbol', 'keep', 'forbid-enter'];
|
18
|
-
const codeErrorBehaviorVariants = ['remove-code', 'keep'];
|
19
|
-
|
20
|
-
const meta: Meta<typeof CodeInput> = {
|
21
|
-
title: 'web/Data Entry/CodeInput',
|
22
|
-
component: CodeInput,
|
23
|
-
decorators: [WithTheme],
|
24
|
-
argTypes: {
|
25
|
-
view: {
|
26
|
-
options: views,
|
27
|
-
control: {
|
28
|
-
type: 'select',
|
29
|
-
},
|
30
|
-
},
|
31
|
-
size: {
|
32
|
-
options: sizes,
|
33
|
-
control: {
|
34
|
-
type: 'inline-radio',
|
35
|
-
},
|
36
|
-
},
|
37
|
-
captionAlign: {
|
38
|
-
options: captionAlignVariants,
|
39
|
-
control: {
|
40
|
-
type: 'inline-radio',
|
41
|
-
},
|
42
|
-
},
|
43
|
-
codeLength: {
|
44
|
-
options: codeLengths,
|
45
|
-
control: {
|
46
|
-
type: 'inline-radio',
|
47
|
-
},
|
48
|
-
},
|
49
|
-
itemErrorBehavior: {
|
50
|
-
options: itemErrorBehaviorVariants,
|
51
|
-
control: {
|
52
|
-
type: 'inline-radio',
|
53
|
-
},
|
54
|
-
},
|
55
|
-
codeErrorBehavior: {
|
56
|
-
options: codeErrorBehaviorVariants,
|
57
|
-
control: {
|
58
|
-
type: 'inline-radio',
|
59
|
-
},
|
60
|
-
},
|
61
|
-
},
|
62
|
-
parameters: {
|
63
|
-
controls: {
|
64
|
-
exclude: ['view'],
|
65
|
-
},
|
66
|
-
},
|
67
|
-
};
|
68
|
-
|
69
|
-
export default meta;
|
70
|
-
|
71
|
-
type StoryPropsDefault = ComponentProps<typeof CodeInput>;
|
72
|
-
|
73
|
-
const StoryDefault = (args: StoryPropsDefault) => {
|
74
|
-
const [value, setValue] = useState('');
|
75
|
-
|
76
|
-
const handleChange = (newValue: string) => {
|
77
|
-
setValue(newValue);
|
78
|
-
onChange(newValue);
|
79
|
-
};
|
80
|
-
|
81
|
-
return <CodeInput {...args} value={value} onChange={handleChange} onFullCodeEnter={onFullCodeEnter} />;
|
82
|
-
};
|
83
|
-
|
84
|
-
export const Default: StoryObj<StoryPropsDefault> = {
|
85
|
-
args: {
|
86
|
-
view: 'default',
|
87
|
-
size: 'm',
|
88
|
-
codeLength: 6,
|
89
|
-
caption: 'Caption',
|
90
|
-
captionAlign: 'center',
|
91
|
-
width: '',
|
92
|
-
isError: false,
|
93
|
-
itemErrorBehavior: 'remove-symbol',
|
94
|
-
codeErrorBehavior: 'remove-code',
|
95
|
-
autoFocus: true,
|
96
|
-
disabled: false,
|
97
|
-
hidden: false,
|
98
|
-
},
|
99
|
-
render: StoryDefault,
|
100
|
-
};
|
@@ -1,32 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.useCodeHook = void 0;
|
7
|
-
var _react = /*#__PURE__*/require("react");
|
8
|
-
var _ = /*#__PURE__*/require(".");
|
9
|
-
var useCodeHook = exports.useCodeHook = function useCodeHook(_ref) {
|
10
|
-
var inputRefs = _ref.inputRefs,
|
11
|
-
codeLength = _ref.codeLength,
|
12
|
-
disabled = _ref.disabled,
|
13
|
-
autoFocus = _ref.autoFocus,
|
14
|
-
originalValue = _ref.originalValue,
|
15
|
-
getLastActiveIndex = _ref.getLastActiveIndex,
|
16
|
-
handleFullCodeEnter = _ref.handleFullCodeEnter;
|
17
|
-
(0, _react.useEffect)(function () {
|
18
|
-
inputRefs.current = inputRefs.current.slice(0, codeLength);
|
19
|
-
}, [codeLength]);
|
20
|
-
(0, _react.useEffect)(function () {
|
21
|
-
if (autoFocus && !disabled) {
|
22
|
-
var _inputRefs$current$la;
|
23
|
-
var lastActiveIndex = getLastActiveIndex();
|
24
|
-
(_inputRefs$current$la = inputRefs.current[lastActiveIndex]) === null || _inputRefs$current$la === void 0 || _inputRefs$current$la.focus();
|
25
|
-
}
|
26
|
-
}, [autoFocus]);
|
27
|
-
(0, _.useDidMountEffect)(function () {
|
28
|
-
if (handleFullCodeEnter && originalValue.length === codeLength) {
|
29
|
-
handleFullCodeEnter(originalValue);
|
30
|
-
}
|
31
|
-
}, [originalValue, handleFullCodeEnter]);
|
32
|
-
};
|
@@ -1,30 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.getPlaceholderValue = exports.getFieldPattern = exports.getCodeValue = void 0;
|
7
|
-
var getFieldPattern = exports.getFieldPattern = function getFieldPattern(allowedSymbols) {
|
8
|
-
if (!allowedSymbols) {
|
9
|
-
return null;
|
10
|
-
}
|
11
|
-
if (typeof allowedSymbols === 'string') {
|
12
|
-
return new RegExp(allowedSymbols, 'g');
|
13
|
-
}
|
14
|
-
return allowedSymbols;
|
15
|
-
};
|
16
|
-
var getCodeValue = exports.getCodeValue = function getCodeValue(codeLength, value) {
|
17
|
-
if (!value.length) {
|
18
|
-
return new Array(codeLength).fill('');
|
19
|
-
}
|
20
|
-
return value.slice(0, codeLength).split('');
|
21
|
-
};
|
22
|
-
var getPlaceholderValue = exports.getPlaceholderValue = function getPlaceholderValue(codeLength, placeholder) {
|
23
|
-
if (!placeholder || typeof placeholder !== 'string') {
|
24
|
-
return null;
|
25
|
-
}
|
26
|
-
if (placeholder.length === 1) {
|
27
|
-
return Array(codeLength).fill(placeholder);
|
28
|
-
}
|
29
|
-
return placeholder.slice(0, codeLength).split('');
|
30
|
-
};
|