@salutejs/plasma-new-hope 0.194.0-canary.1565.11870784206.0 → 0.194.0-canary.1568.11891833298.0

package/styled-components/cjs/components/TextField/TextField.template-doc.mdx

@@ -5,9 +5,6 @@ title: TextField
 
 import { PropsTable, Description } from '@site/src/components';
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 # TextField
 <Description name="TextField" />
 <PropsTable name="TextField" exclude={['$isFocused']} />
@@ -201,330 +198,3 @@ export function App() {
     );
 }
 ```
-
-### Валидация
-Поддерживается валидация почты и пароля:
-
-<Tabs>
-    <TabItem value="email" label="Email" default>
-        Свойства доступные при валидации почты:
-        ```tsx
-        type ValidationProps = {
-            /*
-            * Тип валидации
-            */
-            validationType: 'email';
-            /*
-            * Опции валидации
-            */
-            options?: EmailValidationOptions;
-            /*
-            * Функция, вызываемая при валидации значения.
-            * Вызывается при событии onBlur и по нажатию Enter, когда фокус на поле ввода
-            */
-            onValidate?: (args: OnValidateArgs) => void;
-        }
-        ```
-        Свойство `options` имеет следующий вид:
-        ```tsx
-        type EmailValidationOptions = {
-            /*
-            * Пользовательское регулярное выражение, для проверки почты на валидность
-            */
-            customEmailRegex?: {
-                value?: RegExp;
-                errorMessage?: string;
-            };
-            /*
-            * Минимальная длина почты
-            */
-            minLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Максимальная длина почты
-            */
-            maxLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Минимальная длина хоста (часть почты до `@`)
-            */
-            minHostLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Максимальная длина хоста (часть почты до `@`)
-            */
-            maxHostLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Минимальная длина домена (часть почты от `@` до `.` перед доменной зоной)
-            */
-            minDomainLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Максимальная длина домена (часть почты от `@` до `.` перед доменной зоной)
-            */
-            maxDomainLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Минимальная длина доменной зоны (часть почты от `.`; например `ru`, `com`...)
-            */
-            minZoneLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Максимальная длина доменной зоны (часть почты от `.`; например `ru`, `com`...)
-            */
-            maxZoneLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Список разрешенных доменов (например `['mail.ru', 'yahoo.ru', 'gmail.com']`)
-            */
-            whitelistDomains?: {
-                value?: string[];
-                errorMessage?: string;
-            };
-            /*
-            * Список запрещенных доменов (например `['org.biz', 'expressmail.com']`)
-            */
-            blacklistDomains?: {
-                value?: string[];
-                errorMessage?: string;
-            };
-        };
-        ```
-
-        ```tsx live
-        import React, { useState } from 'react';
-        import { TextField } from '@salutejs/{{ package }}';
-
-        export function App() {
-            const options = {
-                minLength: {
-                    value: 7,
-                    errorMessage: 'Почта слишком короткая',
-                },
-                maxLength: {
-                    value: 30,
-                    errorMessage: 'Почта слишком длинная',
-                },
-                minHostLength: {
-                    value: 2,
-                    errorMessage: 'Хост слишком короткий',
-                },
-                maxHostLength: {
-                    value: 12,
-                    errorMessage: 'Хост слишком длинный',
-                },
-                minDomainLength: {
-                    value: 3,
-                    errorMessage: 'Домен слишком короткий',
-                },
-                maxDomainLength: {
-                    value: 6,
-                    errorMessage: 'Домен слишком длинный',
-                },
-                minZoneLength: {
-                    value: 2,
-                    errorMessage: 'Доменная зона слишком короткая',
-                },
-                maxZoneLength: {
-                    value: 5,
-                    errorMessage: 'Доменная зона слишком длинная',
-                },
-                whitelistDomains: {
-                    value: ['plasma.ru', 'gmail.com', 'mail.ru'],
-                    errorMessage: 'Домен не разрешен',
-                },
-                blacklistDomains: {
-                    value: ['hah.ah', 'heh.eh'],
-                    errorMessage: 'Домен запрещен',
-                },
-            };
-
-            const [error, setError] = useState('');
-
-            const handleOnChange = () => {
-                setError('');
-            };
-
-            const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
-                setError(errorMessage || '');
-            };
-
-            return (
-                <div>
-                    <TextField
-                        label="Валидация почты"
-                        placeholder="Заполните поле"
-                        validationType="email"
-                        options={options}
-                        view={error ? 'negative' : 'default}
-                        helperText={error || 'Валидация почты'}
-                        onChange={handleOnChange}
-                        onValidate={handleOnValidate}
-                    />
-                </div>
-            );
-        }
-        ```
-    </TabItem>
-
-    <TabItem value="password" label="Password" default>
-        Свойства доступные при валидации пароля:
-        ```tsx
-        type ValidationProps = {
-            /*
-            * Тип валидации
-            */
-            validationType: 'password';
-            /*
-            * Опции валидации
-            */
-            options?: PasswordValidationOptions;
-            /*
-            * Состояние сокрытия оригинального пароля
-            */
-            passwordHidden?: boolean;
-            /*
-            * Функция, вызываемая при валидации значения.
-            * Вызывается при событии onBlur и по нажатию Enter, когда фокус на поле ввода
-            */
-            onValidate?: (args: OnValidateArgs) => void;
-        }
-        ```
-        Свойство `options` имеет следующий вид:
-        ```tsx
-        type PasswordValidationOptions = {
-            /*
-            * Минимальная длина пароля
-            */
-            minLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Максимальная длина пароля
-            */
-            maxLength?: {
-                value?: number;
-                errorMessage?: string;
-            };
-            /*
-            * Должны ли быть буквы верхнего регистра в пароле
-            */
-            includeUppercase?: {
-                value?: boolean;
-                errorMessage?: string;
-            };
-            /*
-            * Должны ли быть буквы нижнего регистра в пароле
-            */
-            includeLowercase?: {
-                value?: boolean;
-                errorMessage?: string;
-            };
-            /*
-            * Должны ли быть цифры в пароле
-            */
-            includeDigits?: {
-                value?: boolean;
-                errorMessage?: string;
-            };
-            /*
-            * Должны ли быть специальные символы в пароле
-            */
-            includeSpecialSymbols?: {
-                value?: boolean;
-                errorMessage?: string;
-            };
-        };
-        ```
-
-        ```tsx live
-        import React, { useState } from 'react';
-        import { TextField, IconButton } from '@salutejs/{{ package }}';
-        import { IconEyeFill, IconEyeClosedFill } from '@salutejs/plasma-icons';
-
-        export function App() {
-            const options = {
-                minLength: {
-                    value: 5,
-                    errorMessage: 'Пароль слишком короткий',
-                },
-                maxLength: {
-                    value: 20,
-                    errorMessage: 'Пароль слишком длинный',
-                },
-                includeUppercase: {
-                    value: true,
-                    errorMessage: 'Пароль должен содержать хотя бы одну заглавную букву',
-                },
-                includeLowercase: {
-                    value: true,
-                    errorMessage: 'Пароль должен содержать хотя бы одну строчную букву',
-                },
-                includeDigits: {
-                    value: true,
-                    errorMessage: 'Пароль должен содержать хотя бы одну цифру',
-                },
-                includeSpecialSymbols: {
-                    value: true,
-                    errorMessage: 'Пароль должен содержать хотя бы один специальный символ',
-                },
-            };
-
-            const [error, setError] = useState('');
-            const [hidden, setHidden] = useState(false);
-
-            const handleOnChange = () => {
-                setError('');
-            };
-
-            const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
-                setError(errorMessage || '');
-            };
-
-            const toggleShowPassword = () => setHidden(!hidden);
-
-            const HideButton = () => (
-                <IconButton size="s" view="clear" onClick={toggleShowPassword}>
-                    {hidden ? <IconEyeClosedFill size="xs" color="inherit" /> : <IconEyeFill size="xs" color="inherit" />}
-                </IconButton>
-            )
-
-            return (
-                <div>
-                    <TextField
-                        label="Валидация пароля"
-                        placeholder="Заполните поле"
-                        validationType="password"
-                        options={options}
-                        view={error ? 'negative' : 'default'}
-                        leftHelper={error || 'Валидация пароля'}
-                        onChange={handleOnChange}
-                        onValidate={handleOnValidate}
-                        passwordHidden={hidden}
-                        contentLeft={<HideButton />}
-                    />
-                </div>
-            );
-        }
-        ```
-    </TabItem>
-</Tabs>
-

package/styled-components/cjs/components/TextField/hooks/index.js

@@ -9,11 +9,4 @@ Object.defineProperty(exports, "useKeyNavigation", {
     return _useKeyNavigation.useKeyNavigation;
   }
 });
-Object.defineProperty(exports, "useValidation", {
-  enumerable: true,
-  get: function get() {
-    return _useValidation.useValidation;
-  }
-});
-var _useKeyNavigation = /*#__PURE__*/require("./useKeyNavigation");
-var _useValidation = /*#__PURE__*/require("./useValidation");
+var _useKeyNavigation = /*#__PURE__*/require("./useKeyNavigation");

package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.config.js

@@ -25,7 +25,7 @@ var config = exports.config = {
       s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":0rem;", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.trackBorderWidth, _Switch.switchTokens.thumbBackgroundColorOff, _Switch.switchTokens.thumbBackgroundColorOn, _Switch.switchTokens.thumbBoxShadow)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)

package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.js

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Switch = void 0;
+exports.SwitchOutline = exports.Switch = void 0;
 var _Switch = /*#__PURE__*/require("../../../../components/Switch");
 var _engines = /*#__PURE__*/require("../../../../engines");
 var _Switch2 = /*#__PURE__*/require("./Switch.config");
+var _SwitchOutline = /*#__PURE__*/require("./Switch.outline.config");
 var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Switch.switchConfig, _Switch2.config);
-var Switch = exports.Switch = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var Switch = exports.Switch = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var mergedOutlineConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Switch.switchConfig, _SwitchOutline.config);
+var SwitchOutline = exports.SwitchOutline = /*#__PURE__*/(0, _engines.component)(mergedOutlineConfig);

package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.outline.config.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Switch = /*#__PURE__*/require("../../../../components/Switch");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm',
+    toggleSize: 'l',
+    labelPosition: 'before',
+    focused: 'true'
+  },
+  variations: {
+    size: {
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset)
+    },
+    toggleSize: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.375rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":0.875rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale)
+    },
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":0.0625rem;", ":var(--outline-secondary);", ":var(--outline-secondary-hover);", ":var(--outline-accent);", ":var(--outline-accent-hover);", ":var(--text-tertiary);", ":var(--text-accent);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBorderWidth, _Switch.switchTokens.trackBorderColorOff, _Switch.switchTokens.trackBorderColorOffHover, _Switch.switchTokens.trackBorderColorOn, _Switch.switchTokens.trackBorderColorOnHover, _Switch.switchTokens.thumbBackgroundColorOff, _Switch.switchTokens.thumbBackgroundColorOn, _Switch.switchTokens.thumbBoxShadow)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);"], _Switch.switchTokens.trackFocusColor)
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.stories.tsx

@@ -9,7 +9,7 @@ import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 
 import { config } from './Switch.config';
-import { Switch } from './Switch';
+import { Switch, SwitchOutline } from './Switch';
 
 type SwitchProps = ComponentProps<typeof Switch>;
 
@@ -72,3 +72,35 @@ export const Default: StoryObj<SwitchProps> = {
     },
     render: (args) => <StoryDefault {...args} />,
 };
+
+const StoryOutline = (args: SwitchProps) => {
+    const value = 'yes';
+    const name = 'agree';
+    const [checked, setChecked] = useState(true);
+
+    return (
+        <StyledWrapper>
+            <SwitchOutline
+                value={value}
+                name={name}
+                checked={checked}
+                onChange={(event) => {
+                    setChecked(event.target.checked);
+                    onChange(event);
+                }}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                {...args}
+            />
+        </StyledWrapper>
+    );
+};
+
+export const Outline: StoryObj<SwitchProps> = {
+    args: {
+        size: 'm',
+        toggleSize: 'l',
+        disabled: false,
+    },
+    render: (args) => <StoryOutline {...args} />,
+};