@salutejs/sdds-serv 0.314.0-canary.1741.15775036215.0 → 0.314.0-canary.1973.15677961605.0

package/emotion/es/components/CodeInput/CodeInput.config.js

@@ -0,0 +1,22 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css, codeInputTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'l'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-secondary);\n                ", ": var(--text-negative);\n\n                ", ": var(--text-primary);\n                ", ": var(--text-negative);\n                ", ": var(--outline-accent);\n            "])), tokens.captionColor, tokens.captionColorError, tokens.codeColor, tokens.codeColorError, tokens.borderColorFocus)
+    },
+    size: {
+      l: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 2.5rem;\n                ", ": 0.75rem;\n\n                ", ": 0.75rem;\n\n                ", ": var(--plasma-typo-dspl-l-font-family);\n                ", ": var(--plasma-typo-dspl-l-font-style);\n                ", ": var(--plasma-typo-dspl-l-bold-font-weight);\n                ", ": var(--plasma-typo-dspl-l-letter-spacing);\n\n                ", ": 8rem;\n                ", ": 8rem;\n\n                ", ": 7rem;\n                ", ": 7rem;\n\n                ", ": 5.5rem;\n                ", ": 5.75rem;\n\n                ", ": var(--plasma-typo-h3-font-family);\n                ", ": var(--plasma-typo-h3-font-size);\n                ", ": var(--plasma-typo-h3-font-style);\n                ", ": var(--plasma-typo-h3-font-weight);\n                ", ": var(--plasma-typo-h3-letter-spacing);\n                ", ": var(--plasma-typo-h3-line-height);\n\n                ", ": 5rem;\n                ", ": 8rem;\n\n                ", ": 4.5rem;\n                ", ": 7rem;\n\n                ", ": 3.5rem;\n                ", ": 5.75rem;\n\n                ", ": 0.125rem;\n                ", ": 1.5rem;\n            "])), tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.largeFontSize, tokens.largeLineHeight, tokens.mediumFontSize, tokens.mediumLineHeight, tokens.smallFontSize, tokens.smallLineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.largeCodeItemWidth, tokens.largeCodeItemHeight, tokens.mediumCodeItemWidth, tokens.mediumCodeItemHeight, tokens.smallCodeItemWidth, tokens.smallCodeItemHeight, tokens.codeItemCircleBorderWidth, tokens.codeItemCircleSize),
+      m: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.75rem;\n                ", ": 0.5rem;\n\n                ", ": 0.75rem;\n\n                ", ": var(--plasma-typo-dspl-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-bold-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n\n                ", ": 5.5rem;\n                ", ": 5.75rem;\n\n                ", ": 4.5rem;\n                ", ": 4.75rem;\n\n                ", ": 3.5rem;\n                ", ": 3.75rem;\n\n                ", ": var(--plasma-typo-h4-font-family);\n                ", ": var(--plasma-typo-h4-font-size);\n                ", ": var(--plasma-typo-h4-font-style);\n                ", ": var(--plasma-typo-h4-font-weight);\n                ", ": var(--plasma-typo-h4-letter-spacing);\n                ", ": var(--plasma-typo-h4-line-height);\n\n                ", ": 3.5rem;\n                ", ": 5.75rem;\n\n                ", ": 3rem;\n                ", ": 4.75rem;\n\n                ", ": 2.25rem;\n                ", ": 3.75rem;\n\n                ", ": 0.094rem;\n                ", ": 1rem;\n            "])), tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.largeFontSize, tokens.largeLineHeight, tokens.mediumFontSize, tokens.mediumLineHeight, tokens.smallFontSize, tokens.smallLineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.largeCodeItemWidth, tokens.largeCodeItemHeight, tokens.mediumCodeItemWidth, tokens.mediumCodeItemHeight, tokens.smallCodeItemWidth, tokens.smallCodeItemHeight, tokens.codeItemCircleBorderWidth, tokens.codeItemCircleSize),
+      s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.5rem;\n                ", ": 0.25rem;\n\n                ", ": 0.5rem;\n\n                ", ": var(--plasma-typo-dspl-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-bold-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n\n                ", ": 4rem;\n                ", ": 4.25rem;\n\n                ", ": 3rem;\n                ", ": 3.25rem;\n\n                ", ": 2.5rem;\n                ", ": 2.75rem;\n\n                ", ": var(--plasma-typo-h5-font-family);\n                ", ": var(--plasma-typo-h5-font-size);\n                ", ": var(--plasma-typo-h5-font-style);\n                ", ": var(--plasma-typo-h5-font-weight);\n                ", ": var(--plasma-typo-h5-letter-spacing);\n                ", ": var(--plasma-typo-h5-line-height);\n\n                ", ": 2.5rem;\n                ", ": 4.25rem;\n\n                ", ": 2rem;\n                ", ": 3.25rem;\n\n                ", ": 1.625rem;\n                ", ": 2.75rem;\n\n                ", ": 0.063rem;\n                ", ": 0.75rem;\n            "])), tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.largeFontSize, tokens.largeLineHeight, tokens.mediumFontSize, tokens.mediumLineHeight, tokens.smallFontSize, tokens.smallLineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.largeCodeItemWidth, tokens.largeCodeItemHeight, tokens.mediumCodeItemWidth, tokens.mediumCodeItemHeight, tokens.smallCodeItemWidth, tokens.smallCodeItemHeight, tokens.codeItemCircleBorderWidth, tokens.codeItemCircleSize)
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.4;\n            "])), tokens.disabledOpacity)
+    }
+  }
+};

package/emotion/es/components/CodeInput/CodeInput.js

@@ -0,0 +1,9 @@
+import { codeInputConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
+import { config } from './CodeInput.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(codeInputConfig, config);
+var CodeInputComponent = /*#__PURE__*/component(mergedConfig);
+
+/**
+ * CodeInput
+ */
+export var CodeInput = CodeInputComponent;

package/emotion/es/components/CodeInput/CodeInput.stories.tsx

@@ -0,0 +1,114 @@
+import React, { ComponentProps, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { InSpacingDecorator, disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
+
+import { config } from './CodeInput.config';
+
+import { CodeInput } from '.';
+
+const onChange = action('onChange');
+const onFullCodeEnter = action('onFullCodeEnter');
+
+const { views, sizes } = getConfigVariations(config);
+const codeLengths = [4, 5, 6];
+const captionAlignVariants = ['left', 'center'];
+const itemErrorBehaviorVariants = ['remove-symbol', 'keep', 'forbid-enter'];
+const codeErrorBehaviorVariants = ['remove-code', 'keep'];
+
+const meta: Meta<typeof CodeInput> = {
+    title: 'Data Entry/CodeInput',
+    component: CodeInput,
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        captionAlign: {
+            options: captionAlignVariants,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        codeLength: {
+            options: codeLengths,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        itemErrorBehavior: {
+            options: itemErrorBehaviorVariants,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        codeErrorBehavior: {
+            options: codeErrorBehaviorVariants,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        width: {
+            control: 'text',
+        },
+        caption: {
+            control: 'text',
+        },
+        ...disableProps([
+            'setIsError',
+            'onChange',
+            'value',
+            'placeholder',
+            'onChange',
+            'onFullCodeEnter',
+            'allowedSymbols',
+        ]),
+    },
+    parameters: {
+        controls: {
+            exclude: ['view'],
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof CodeInput>;
+
+const StoryDefault = (args: StoryPropsDefault) => {
+    const [value, setValue] = useState('');
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+        onChange(newValue);
+    };
+
+    return <CodeInput {...args} value={value} onChange={handleChange} onFullCodeEnter={onFullCodeEnter} />;
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        view: 'default',
+        size: 'm',
+        codeLength: 6,
+        caption: 'Caption',
+        captionAlign: 'center',
+        width: '',
+        isError: false,
+        itemErrorBehavior: 'remove-symbol',
+        codeErrorBehavior: 'remove-code',
+        autoFocus: true,
+        disabled: false,
+        hidden: false,
+    },
+    render: StoryDefault,
+};

package/emotion/es/components/CodeInput/index.js

@@ -0,0 +1 @@
+export { CodeInput } from './CodeInput';