@salutejs/plasma-new-hope 0.194.0-canary.1565.11870784206.0 → 0.194.0-canary.1568.11891833298.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Switch/Switch.css +2 -2
- package/cjs/components/Switch/Switch.tokens.js +7 -1
- package/cjs/components/Switch/Switch.tokens.js.map +1 -1
- package/cjs/components/Switch/_toggleSize/base.js +1 -1
- package/cjs/components/Switch/_toggleSize/base.js.map +1 -1
- package/cjs/components/Switch/_toggleSize/base_1d0b3t4.css +1 -0
- package/cjs/components/Switch/_view/base.js +1 -1
- package/cjs/components/Switch/_view/base.js.map +1 -1
- package/cjs/components/Switch/_view/base_15atbyp.css +1 -0
- package/cjs/components/TextField/TextField.js +3 -27
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/index.css +2 -2
- package/cjs/utils/constants.js +0 -4
- package/cjs/utils/constants.js.map +1 -1
- package/emotion/cjs/components/Card/Card.api.mdx +184 -0
- package/emotion/cjs/components/Switch/Switch.tokens.js +7 -1
- package/emotion/cjs/components/Switch/_toggleSize/base.js +1 -1
- package/emotion/cjs/components/Switch/_view/base.js +1 -1
- package/emotion/cjs/components/TextField/TextField.js +4 -27
- package/emotion/cjs/components/TextField/TextField.template-doc.mdx +0 -330
- package/emotion/cjs/components/TextField/hooks/index.js +1 -8
- package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +8 -8
- package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.js +5 -2
- package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.outline.config.js +37 -0
- package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.stories.tsx +33 -1
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +1 -253
- package/emotion/cjs/examples/plasma_web/components/Switch/Switch.config.js +8 -8
- package/emotion/cjs/examples/plasma_web/components/Switch/Switch.js +5 -2
- package/emotion/cjs/examples/plasma_web/components/Switch/Switch.outline.config.js +37 -0
- package/emotion/cjs/examples/plasma_web/components/Switch/Switch.stories.tsx +33 -1
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -252
- package/emotion/cjs/utils/constants.js +2 -4
- package/emotion/es/components/Card/Card.api.mdx +184 -0
- package/emotion/es/components/Switch/Switch.tokens.js +7 -1
- package/emotion/es/components/Switch/_toggleSize/base.js +1 -1
- package/emotion/es/components/Switch/_view/base.js +1 -1
- package/emotion/es/components/TextField/TextField.js +5 -28
- package/emotion/es/components/TextField/TextField.template-doc.mdx +0 -330
- package/emotion/es/components/TextField/hooks/index.js +1 -2
- package/emotion/es/examples/plasma_b2c/components/Switch/Switch.config.js +8 -8
- package/emotion/es/examples/plasma_b2c/components/Switch/Switch.js +4 -1
- package/emotion/es/examples/plasma_b2c/components/Switch/Switch.outline.config.js +31 -0
- package/emotion/es/examples/plasma_b2c/components/Switch/Switch.stories.tsx +33 -1
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +1 -253
- package/emotion/es/examples/plasma_web/components/Switch/Switch.config.js +8 -8
- package/emotion/es/examples/plasma_web/components/Switch/Switch.js +4 -1
- package/emotion/es/examples/plasma_web/components/Switch/Switch.outline.config.js +31 -0
- package/emotion/es/examples/plasma_web/components/Switch/Switch.stories.tsx +33 -1
- package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -252
- package/emotion/es/utils/constants.js +1 -3
- package/es/components/Switch/Switch.css +2 -2
- package/es/components/Switch/Switch.tokens.js +7 -1
- package/es/components/Switch/Switch.tokens.js.map +1 -1
- package/es/components/Switch/_toggleSize/base.js +1 -1
- package/es/components/Switch/_toggleSize/base.js.map +1 -1
- package/es/components/Switch/_toggleSize/base_1d0b3t4.css +1 -0
- package/es/components/Switch/_view/base.js +1 -1
- package/es/components/Switch/_view/base.js.map +1 -1
- package/es/components/Switch/_view/base_15atbyp.css +1 -0
- package/es/components/TextField/TextField.js +3 -27
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/index.css +2 -2
- package/es/utils/constants.js +1 -3
- package/es/utils/constants.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Card/Card.api.mdx +184 -0
- package/styled-components/cjs/components/Switch/Switch.tokens.js +7 -1
- package/styled-components/cjs/components/Switch/_toggleSize/base.js +1 -1
- package/styled-components/cjs/components/Switch/_view/base.js +1 -1
- package/styled-components/cjs/components/TextField/TextField.js +3 -26
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +0 -330
- package/styled-components/cjs/components/TextField/hooks/index.js +1 -8
- package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.js +5 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.outline.config.js +37 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.stories.tsx +33 -1
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +1 -253
- package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.js +5 -2
- package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.outline.config.js +37 -0
- package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.stories.tsx +33 -1
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -252
- package/styled-components/cjs/utils/constants.js +2 -4
- package/styled-components/es/components/Card/Card.api.mdx +184 -0
- package/styled-components/es/components/Switch/Switch.tokens.js +7 -1
- package/styled-components/es/components/Switch/_toggleSize/base.js +1 -1
- package/styled-components/es/components/Switch/_view/base.js +1 -1
- package/styled-components/es/components/TextField/TextField.js +4 -27
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +0 -330
- package/styled-components/es/components/TextField/hooks/index.js +1 -2
- package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.js +4 -1
- package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.outline.config.js +31 -0
- package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.stories.tsx +33 -1
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +1 -253
- package/styled-components/es/examples/plasma_web/components/Switch/Switch.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Switch/Switch.js +4 -1
- package/styled-components/es/examples/plasma_web/components/Switch/Switch.outline.config.js +31 -0
- package/styled-components/es/examples/plasma_web/components/Switch/Switch.stories.tsx +33 -1
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +0 -252
- package/styled-components/es/utils/constants.js +1 -3
- package/types/components/Autocomplete/Autocomplete.types.d.ts +2 -2
- package/types/components/Autocomplete/Autocomplete.types.d.ts.map +1 -1
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts +92 -1676
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/ui/Target/Target.styles.d.ts +92 -1676
- package/types/components/Combobox/ComboboxNew/ui/Target/Target.styles.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts +92 -1676
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map +1 -1
- package/types/components/Range/Range.styles.d.ts +92 -1676
- package/types/components/Range/Range.styles.d.ts.map +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.styles.d.ts +92 -1676
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.styles.d.ts.map +1 -1
- package/types/components/Slider/components/Double/Double.styles.d.ts +92 -1676
- package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -1
- package/types/components/Switch/Switch.tokens.d.ts +7 -1
- package/types/components/Switch/Switch.tokens.d.ts.map +1 -1
- package/types/components/Switch/_toggleSize/base.d.ts.map +1 -1
- package/types/components/Switch/_view/base.d.ts.map +1 -1
- package/types/components/TextField/TextField.d.ts.map +1 -1
- package/types/components/TextField/TextField.types.d.ts +1 -51
- package/types/components/TextField/TextField.types.d.ts.map +1 -1
- package/types/components/TextField/hooks/index.d.ts +0 -1
- package/types/components/TextField/hooks/index.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Autocomplete/Autocomplete.d.ts +2 -64
- package/types/examples/plasma_b2c/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Mask/Mask.d.ts +92 -2732
- package/types/examples/plasma_b2c/components/Mask/Mask.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Switch/Switch.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Switch/Switch.d.ts +20 -0
- package/types/examples/plasma_b2c/components/Switch/Switch.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Switch/Switch.outline.config.d.ts +30 -0
- package/types/examples/plasma_b2c/components/Switch/Switch.outline.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +92 -1676
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Autocomplete/Autocomplete.d.ts +2 -64
- package/types/examples/plasma_web/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Mask/Mask.d.ts +92 -2732
- package/types/examples/plasma_web/components/Mask/Mask.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Switch/Switch.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Switch/Switch.d.ts +20 -0
- package/types/examples/plasma_web/components/Switch/Switch.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Switch/Switch.outline.config.d.ts +30 -0
- package/types/examples/plasma_web/components/Switch/Switch.outline.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/TextField/TextField.d.ts +92 -1676
- package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
- package/types/utils/constants.d.ts +0 -2
- package/types/utils/constants.d.ts.map +1 -1
- package/cjs/components/Switch/_toggleSize/base_6i0904.css +0 -1
- package/cjs/components/Switch/_view/base_yxkf3s.css +0 -1
- package/cjs/components/TextField/hooks/useValidation.js +0 -273
- package/cjs/components/TextField/hooks/useValidation.js.map +0 -1
- package/emotion/cjs/components/TextField/hooks/useValidation.js +0 -276
- package/emotion/es/components/TextField/hooks/useValidation.js +0 -270
- package/es/components/Switch/_toggleSize/base_6i0904.css +0 -1
- package/es/components/Switch/_view/base_yxkf3s.css +0 -1
- package/es/components/TextField/hooks/useValidation.js +0 -269
- package/es/components/TextField/hooks/useValidation.js.map +0 -1
- package/styled-components/cjs/components/TextField/hooks/useValidation.js +0 -276
- package/styled-components/es/components/TextField/hooks/useValidation.js +0 -270
- package/types/components/TextField/hooks/useValidation.d.ts +0 -7
- package/types/components/TextField/hooks/useValidation.d.ts.map +0 -1
@@ -9,7 +9,7 @@ import { mergeConfig } from '../../../../engines';
|
|
9
9
|
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
10
10
|
|
11
11
|
import { config } from './Switch.config';
|
12
|
-
import { Switch } from './Switch';
|
12
|
+
import { Switch, SwitchOutline } from './Switch';
|
13
13
|
|
14
14
|
type SwitchProps = ComponentProps<typeof Switch>;
|
15
15
|
|
@@ -72,3 +72,35 @@ export const Default: StoryObj<SwitchProps> = {
|
|
72
72
|
},
|
73
73
|
render: (args) => <StoryDefault {...args} />,
|
74
74
|
};
|
75
|
+
|
76
|
+
const StoryOutline = (args: SwitchProps) => {
|
77
|
+
const value = 'yes';
|
78
|
+
const name = 'agree';
|
79
|
+
const [checked, setChecked] = useState(true);
|
80
|
+
|
81
|
+
return (
|
82
|
+
<StyledWrapper>
|
83
|
+
<SwitchOutline
|
84
|
+
value={value}
|
85
|
+
name={name}
|
86
|
+
checked={checked}
|
87
|
+
onChange={(event) => {
|
88
|
+
setChecked(event.target.checked);
|
89
|
+
onChange(event);
|
90
|
+
}}
|
91
|
+
onFocus={onFocus}
|
92
|
+
onBlur={onBlur}
|
93
|
+
{...args}
|
94
|
+
/>
|
95
|
+
</StyledWrapper>
|
96
|
+
);
|
97
|
+
};
|
98
|
+
|
99
|
+
export const Outline: StoryObj<SwitchProps> = {
|
100
|
+
args: {
|
101
|
+
size: 'm',
|
102
|
+
toggleSize: 'l',
|
103
|
+
disabled: false,
|
104
|
+
},
|
105
|
+
render: (args) => <StoryOutline {...args} />,
|
106
|
+
};
|
@@ -291,255 +291,3 @@ export const Chips: StoryObj<StoryPropsChips> = {
|
|
291
291
|
},
|
292
292
|
render: (args) => <StoryChips {...args} />,
|
293
293
|
};
|
294
|
-
|
295
|
-
type StoryEmailValidationProps = StoryPropsDefault & {
|
296
|
-
minLengthValue?: number;
|
297
|
-
minLengthErrorMessage?: string;
|
298
|
-
maxLengthValue?: number;
|
299
|
-
maxLengthErrorMessage?: string;
|
300
|
-
minHostLengthValue?: number;
|
301
|
-
minHostLengthErrorMessage?: string;
|
302
|
-
maxHostLengthValue?: number;
|
303
|
-
maxHostLengthErrorMessage?: string;
|
304
|
-
minDomainLengthValue?: number;
|
305
|
-
minDomainLengthErrorMessage?: string;
|
306
|
-
maxDomainLengthValue?: number;
|
307
|
-
maxDomainLengthErrorMessage?: string;
|
308
|
-
minZoneLengthValue?: number;
|
309
|
-
minZoneLengthErrorMessage?: string;
|
310
|
-
maxZoneLengthValue?: number;
|
311
|
-
maxZoneLengthErrorMessage?: string;
|
312
|
-
whitelistDomainsValue?: string;
|
313
|
-
whitelistDomainsErrorMessage?: string;
|
314
|
-
blacklistDomainsValue?: string;
|
315
|
-
blacklistDomainsErrorMessage?: string;
|
316
|
-
};
|
317
|
-
|
318
|
-
const StoryEmailValidation = ({
|
319
|
-
minLengthValue,
|
320
|
-
minLengthErrorMessage,
|
321
|
-
maxLengthValue,
|
322
|
-
maxLengthErrorMessage,
|
323
|
-
minHostLengthValue,
|
324
|
-
minHostLengthErrorMessage,
|
325
|
-
maxHostLengthValue,
|
326
|
-
maxHostLengthErrorMessage,
|
327
|
-
minDomainLengthValue,
|
328
|
-
minDomainLengthErrorMessage,
|
329
|
-
maxDomainLengthValue,
|
330
|
-
maxDomainLengthErrorMessage,
|
331
|
-
minZoneLengthValue,
|
332
|
-
minZoneLengthErrorMessage,
|
333
|
-
maxZoneLengthValue,
|
334
|
-
maxZoneLengthErrorMessage,
|
335
|
-
whitelistDomainsValue,
|
336
|
-
whitelistDomainsErrorMessage,
|
337
|
-
blacklistDomainsValue,
|
338
|
-
blacklistDomainsErrorMessage,
|
339
|
-
...rest
|
340
|
-
}: StoryEmailValidationProps) => {
|
341
|
-
const [error, setError] = useState('');
|
342
|
-
|
343
|
-
const validationOptions = {
|
344
|
-
minLength: {
|
345
|
-
value: minLengthValue || undefined,
|
346
|
-
errorMessage: minLengthErrorMessage || 'Почта слишком короткая',
|
347
|
-
},
|
348
|
-
maxLength: {
|
349
|
-
value: maxLengthValue || undefined,
|
350
|
-
errorMessage: maxLengthErrorMessage || 'Почта слишком длинная',
|
351
|
-
},
|
352
|
-
minHostLength: {
|
353
|
-
value: minHostLengthValue || undefined,
|
354
|
-
errorMessage: minHostLengthErrorMessage || 'Хост слишком короткий',
|
355
|
-
},
|
356
|
-
maxHostLength: {
|
357
|
-
value: maxHostLengthValue || undefined,
|
358
|
-
errorMessage: maxHostLengthErrorMessage || 'Хост слишком длинный',
|
359
|
-
},
|
360
|
-
minDomainLength: {
|
361
|
-
value: minDomainLengthValue || undefined,
|
362
|
-
errorMessage: minDomainLengthErrorMessage || 'Домен слишком короткий',
|
363
|
-
},
|
364
|
-
maxDomainLength: {
|
365
|
-
value: maxDomainLengthValue || undefined,
|
366
|
-
errorMessage: maxDomainLengthErrorMessage || 'Домен слишком длинный',
|
367
|
-
},
|
368
|
-
minZoneLength: {
|
369
|
-
value: minZoneLengthValue || undefined,
|
370
|
-
errorMessage: minZoneLengthErrorMessage || 'Доменная зона слишком короткая',
|
371
|
-
},
|
372
|
-
maxZoneLength: {
|
373
|
-
value: maxZoneLengthValue || undefined,
|
374
|
-
errorMessage: maxZoneLengthErrorMessage || 'Доменная зона слишком длинная',
|
375
|
-
},
|
376
|
-
whitelistDomains: {
|
377
|
-
value: whitelistDomainsValue?.split(',') || undefined,
|
378
|
-
errorMessage: whitelistDomainsErrorMessage || 'Домен не разрешен',
|
379
|
-
},
|
380
|
-
blacklistDomains: {
|
381
|
-
value: blacklistDomainsValue?.split(',') || undefined,
|
382
|
-
errorMessage: blacklistDomainsErrorMessage || 'Домен запрещен',
|
383
|
-
},
|
384
|
-
};
|
385
|
-
|
386
|
-
const handleOnChange = () => {
|
387
|
-
setError('');
|
388
|
-
};
|
389
|
-
|
390
|
-
const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
|
391
|
-
setError(errorMessage || '');
|
392
|
-
};
|
393
|
-
|
394
|
-
return (
|
395
|
-
<TextField
|
396
|
-
label="Валидация почты"
|
397
|
-
validationType="email"
|
398
|
-
options={validationOptions}
|
399
|
-
size="l"
|
400
|
-
view={error ? 'negative' : 'default'}
|
401
|
-
leftHelper={error || 'Валидация почты'}
|
402
|
-
onChange={handleOnChange}
|
403
|
-
onValidate={handleOnValidate}
|
404
|
-
{...rest}
|
405
|
-
/>
|
406
|
-
);
|
407
|
-
};
|
408
|
-
|
409
|
-
export const EmailValidation: StoryObj<StoryEmailValidationProps> = {
|
410
|
-
argTypes: {
|
411
|
-
...disableProps(['view', 'size', 'maxLength', 'required', 'requiredPlacement', 'optional']),
|
412
|
-
},
|
413
|
-
args: {
|
414
|
-
labelPlacement: 'outer',
|
415
|
-
placeholder: 'Заполните поле',
|
416
|
-
minLengthValue: 5,
|
417
|
-
minLengthErrorMessage: 'Почта слишком короткая',
|
418
|
-
maxLengthValue: 25,
|
419
|
-
maxLengthErrorMessage: 'Почта слишком длинная',
|
420
|
-
minHostLengthValue: 1,
|
421
|
-
minHostLengthErrorMessage: 'Хост слишком короткий',
|
422
|
-
maxHostLengthValue: 12,
|
423
|
-
maxHostLengthErrorMessage: 'Хост слишком длинный',
|
424
|
-
minDomainLengthValue: 1,
|
425
|
-
minDomainLengthErrorMessage: 'Домен слишком короткий',
|
426
|
-
maxDomainLengthValue: 6,
|
427
|
-
maxDomainLengthErrorMessage: 'Домен слишком длинный',
|
428
|
-
minZoneLengthValue: 1,
|
429
|
-
minZoneLengthErrorMessage: 'Доменная зона слишком короткая',
|
430
|
-
maxZoneLengthValue: 5,
|
431
|
-
maxZoneLengthErrorMessage: 'Доменная зона слишком длинная',
|
432
|
-
whitelistDomainsValue: 'gmail.com,yandex.ru,mail.ru,mail.com',
|
433
|
-
whitelistDomainsErrorMessage: 'Домен не разрешен',
|
434
|
-
blacklistDomainsValue: 'heh.org,hah.ha',
|
435
|
-
blacklistDomainsErrorMessage: 'Домен запрещен',
|
436
|
-
},
|
437
|
-
render: (args) => <StoryEmailValidation {...args} />,
|
438
|
-
};
|
439
|
-
|
440
|
-
type StoryPasswordValidationProps = StoryPropsDefault & {
|
441
|
-
minLengthValue?: number;
|
442
|
-
minLengthErrorMessage?: string;
|
443
|
-
maxLengthValue?: number;
|
444
|
-
maxLengthErrorMessage?: string;
|
445
|
-
includeUppercase?: boolean;
|
446
|
-
includeUppercaseErrorMessage?: string;
|
447
|
-
includeLowercase?: boolean;
|
448
|
-
includeLowercaseErrorMessage?: string;
|
449
|
-
includeDigits?: boolean;
|
450
|
-
includeDigitsErrorMessage?: string;
|
451
|
-
includeSpecialSymbols?: boolean;
|
452
|
-
includeSpecialSymbolsErrorMessage?: string;
|
453
|
-
};
|
454
|
-
|
455
|
-
const StoryPasswordValidation = ({
|
456
|
-
minLengthValue,
|
457
|
-
minLengthErrorMessage,
|
458
|
-
maxLengthValue,
|
459
|
-
maxLengthErrorMessage,
|
460
|
-
includeUppercase,
|
461
|
-
includeUppercaseErrorMessage,
|
462
|
-
includeLowercase,
|
463
|
-
includeLowercaseErrorMessage,
|
464
|
-
includeDigits,
|
465
|
-
includeDigitsErrorMessage,
|
466
|
-
includeSpecialSymbols,
|
467
|
-
includeSpecialSymbolsErrorMessage,
|
468
|
-
...rest
|
469
|
-
}: StoryPasswordValidationProps) => {
|
470
|
-
const [error, setError] = useState('');
|
471
|
-
|
472
|
-
const validationOptions = {
|
473
|
-
minLength: {
|
474
|
-
value: minLengthValue || undefined,
|
475
|
-
errorMessage: minLengthErrorMessage || 'Пароль слишком короткий',
|
476
|
-
},
|
477
|
-
maxLength: {
|
478
|
-
value: maxLengthValue || undefined,
|
479
|
-
errorMessage: maxLengthErrorMessage || 'Пароль слишком длинный',
|
480
|
-
},
|
481
|
-
includeUppercase: {
|
482
|
-
value: includeUppercase,
|
483
|
-
errorMessage: includeUppercaseErrorMessage || 'Пароль должен содержать хотя бы одну заглавную букву',
|
484
|
-
},
|
485
|
-
includeLowercase: {
|
486
|
-
value: includeLowercase,
|
487
|
-
errorMessage: includeLowercaseErrorMessage || 'Пароль должен содержать хотя бы одну строчную букву',
|
488
|
-
},
|
489
|
-
includeDigits: {
|
490
|
-
value: includeDigits,
|
491
|
-
errorMessage: includeDigitsErrorMessage || 'Пароль должен содержать хотя бы одну цифру',
|
492
|
-
},
|
493
|
-
includeSpecialSymbols: {
|
494
|
-
value: includeSpecialSymbols,
|
495
|
-
errorMessage:
|
496
|
-
includeSpecialSymbolsErrorMessage || 'Пароль должен содержать хотя бы один специальный символ',
|
497
|
-
},
|
498
|
-
};
|
499
|
-
|
500
|
-
const handleOnChange = () => {
|
501
|
-
setError('');
|
502
|
-
};
|
503
|
-
|
504
|
-
const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
|
505
|
-
setError(errorMessage || '');
|
506
|
-
};
|
507
|
-
|
508
|
-
return (
|
509
|
-
<TextField
|
510
|
-
label="Валидация пароля"
|
511
|
-
validationType="password"
|
512
|
-
options={validationOptions}
|
513
|
-
size="l"
|
514
|
-
view={error ? 'negative' : 'default'}
|
515
|
-
leftHelper={error || 'Валидация пароля'}
|
516
|
-
onChange={handleOnChange}
|
517
|
-
onValidate={handleOnValidate}
|
518
|
-
{...rest}
|
519
|
-
/>
|
520
|
-
);
|
521
|
-
};
|
522
|
-
|
523
|
-
export const PasswordValidation: StoryObj<StoryPasswordValidationProps> = {
|
524
|
-
argTypes: {
|
525
|
-
...disableProps(['view', 'size', 'maxLength', 'required', 'requiredPlacement', 'optional']),
|
526
|
-
},
|
527
|
-
args: {
|
528
|
-
labelPlacement: 'outer',
|
529
|
-
placeholder: 'Заполните поле',
|
530
|
-
passwordHidden: false,
|
531
|
-
minLengthValue: 5,
|
532
|
-
minLengthErrorMessage: 'Пароль слишком короткий',
|
533
|
-
maxLengthValue: 25,
|
534
|
-
maxLengthErrorMessage: 'Пароль слишком длинный',
|
535
|
-
includeUppercase: true,
|
536
|
-
includeUppercaseErrorMessage: 'Пароль должен содержать хотя бы одну заглавную букву',
|
537
|
-
includeLowercase: true,
|
538
|
-
includeLowercaseErrorMessage: 'Пароль должен содержать хотя бы одну строчную букву',
|
539
|
-
includeDigits: true,
|
540
|
-
includeDigitsErrorMessage: 'Пароль должен содержать хотя бы одну цифру',
|
541
|
-
includeSpecialSymbols: true,
|
542
|
-
includeSpecialSymbolsErrorMessage: 'Пароль должен содержать хотя бы один специальный символ',
|
543
|
-
},
|
544
|
-
render: (args) => <StoryPasswordValidation {...args} />,
|
545
|
-
};
|
@@ -1,8 +1,8 @@
|
|
1
1
|
.base_1tcl212_bm1v11h__e2c572a3 .base_1tcl212_s10fscgc__e2c572a3{font-family:var(--plasma-switch-font-family);font-style:var(--plasma-switch-font-style);font-weight:var(--plasma-switch-font-weight);-webkit-letter-spacing:var(--plasma-switch-letter-spacing);-moz-letter-spacing:var(--plasma-switch-letter-spacing);-ms-letter-spacing:var(--plasma-switch-letter-spacing);letter-spacing:var(--plasma-switch-letter-spacing);line-height:var(--plasma-switch-line-height);font-size:var(--plasma-switch-font-size);}.base_1tcl212_bm1v11h__e2c572a3 .base_1tcl212_sdjnckq__e2c572a3{font-family:var(--plasma-switch-description-font-family);font-style:var(--plasma-switch-description-font-style);font-weight:var(--plasma-switch-description-font-weight);-webkit-letter-spacing:var(--plasma-switch-description-letter-spacing);-moz-letter-spacing:var(--plasma-switch-description-letter-spacing);-ms-letter-spacing:var(--plasma-switch-description-letter-spacing);letter-spacing:var(--plasma-switch-description-letter-spacing);line-height:var(--plasma-switch-description-line-height);font-size:var(--plasma-switch-description-font-size);}.base_1tcl212_bm1v11h__e2c572a3 .base_1tcl212_s1ilr5eq__e2c572a3{margin:var(--plasma_private-switch__label-offset,0);}
|
2
2
|
|
3
|
-
.
|
3
|
+
.base_1d0b3t4_b1wld3h3__ac2a0bcf .base_1d0b3t4_s2cs3kf__ac2a0bcf{box-sizing:border-box;-webkit-flex:0 0 var(--plasma-switch__track-width);-ms-flex:0 0 var(--plasma-switch__track-width);flex:0 0 var(--plasma-switch__track-width);border-style:solid;border-width:var(--plasma-switch__track-border);border-radius:var(--plasma-switch__track-border-radius);width:var(--plasma-switch__track-width);height:var(--plasma-switch__track-height);}.base_1d0b3t4_b1wld3h3__ac2a0bcf .base_1d0b3t4_s2cs3kf__ac2a0bcf::after{width:var(--plasma-switch__thumb-size);height:var(--plasma-switch__thumb-size);border-radius:var(--plasma-switch__thumb-border-radius);margin:auto var(--plasma-switch__thumb-offset);}.base_1d0b3t4_b1wld3h3__ac2a0bcf:active:not([disabled]) .base_1d0b3t4_s2cs3kf__ac2a0bcf::after{width:calc(var(--plasma-switch__thumb-size) * var(--plasma-switch__thumb-scale,1));}
|
4
4
|
|
5
|
-
.
|
5
|
+
.base_15atbyp_b1g0jmh3__64acd499 .base_15atbyp_s2cs3kf__64acd499{background-color:var(--plasma-switch__track_checked_false-bg-color);border-color:var(--plasma-switch__track-checked_false-border-color);}.base_15atbyp_b1g0jmh3__64acd499 .base_15atbyp_ssthlx1__64acd499:not([disabled]) ~ .base_15atbyp_s2cs3kf__64acd499:hover{background-color:var(--plasma-switch__track_checked_false_hovered_true-bg-color,var(--plasma-switch__track_checked_false-bg-color));border-color:var(--plasma-switch__track-checked_false_hovered_true-border-color,var(--plasma-switch__track-checked_false-border-color));}.base_15atbyp_b1g0jmh3__64acd499 .base_15atbyp_ssthlx1__64acd499:checked ~ .base_15atbyp_s2cs3kf__64acd499{background-color:var(--plasma-switch__track_checked_true-bg-color);border-color:var(--plasma-switch__track-checked_true-border-color);}.base_15atbyp_b1g0jmh3__64acd499 .base_15atbyp_ssthlx1__64acd499:checked:not([disabled]) ~ .base_15atbyp_s2cs3kf__64acd499:hover{background-color:var(--plasma-switch__track_checked_true_hovered_true-bg-color,var(--plasma-switch__track_checked_true-bg-color));border-color:var(--plasma-switch__track-checked_true_hovered_true-border-color,var(--plasma-switch__track-checked_true-border-color));}.base_15atbyp_b1g0jmh3__64acd499 .base_15atbyp_s2cs3kf__64acd499::after{background-color:var(--plasma-switch__thumb-checked_false-bg-color);box-shadow:var(--plasma-switch__thumb-box-shadow);}.base_15atbyp_b1g0jmh3__64acd499 .base_15atbyp_ssthlx1__64acd499:checked ~ .base_15atbyp_s2cs3kf__64acd499::after{background-color:var(--plasma-switch__thumb_checked_true-bg-color);box-shadow:var(--plasma-switch__thumb-box-shadow_checked_true,var(--plasma-switch__thumb-box-shadow));}.base_15atbyp_b1g0jmh3__64acd499 .base_15atbyp_s1ilr5eq__64acd499{color:var(--plasma-switch__label-color);}.base_15atbyp_b1g0jmh3__64acd499 .base_15atbyp_sdjnckq__64acd499{color:var(--plasma-switch__description-color);}
|
6
6
|
|
7
7
|
.base_sz3n0x_bvwxj2r__a36bed54 .base_sz3n0x_s2cs3kf__a36bed54::before{content:'';position:absolute;inset:-0.125rem;display:block;box-sizing:content-box;border-radius:calc(0.125rem + var(--plasma-switch__track-border-radius));border:0.125rem solid transparent;pointer-events:none;-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;}.base_sz3n0x_bvwxj2r__a36bed54 .base_sz3n0x_ssthlx1__a36bed54.base_sz3n0x_focusVisible__a36bed54 ~ .base_sz3n0x_s2cs3kf__a36bed54::before{box-shadow:0 0 0 0.125rem var(--plasma-switch__track-focus-color);}
|
8
8
|
|
@@ -23,6 +23,11 @@ var tokens = {
|
|
23
23
|
verticalGap: '--plasma-switch-vertical-gap',
|
24
24
|
trackWidth: '--plasma-switch__track-width',
|
25
25
|
trackHeight: '--plasma-switch__track-height',
|
26
|
+
trackBorderWidth: '--plasma-switch__track-border',
|
27
|
+
trackBorderColorOn: '--plasma-switch__track-checked_true-border-color',
|
28
|
+
trackBorderColorOnHover: '--plasma-switch__track-checked_true_hovered_true-border-color',
|
29
|
+
trackBorderColorOff: '--plasma-switch__track-checked_false-border-color',
|
30
|
+
trackBorderColorOffHover: '--plasma-switch__track-checked_false_hovered_true-border-color',
|
26
31
|
trackBorderRadius: '--plasma-switch__track-border-radius',
|
27
32
|
// NOTE: could be intersection with checked
|
28
33
|
trackBackgroundColorOn: '--plasma-switch__track_checked_true-bg-color',
|
@@ -34,7 +39,8 @@ var tokens = {
|
|
34
39
|
thumbOffset: '--plasma-switch__thumb-offset',
|
35
40
|
thumbBorderRadius: '--plasma-switch__thumb-border-radius',
|
36
41
|
thumbPressScale: '--plasma-switch__thumb-scale',
|
37
|
-
|
42
|
+
thumbBackgroundColorOn: '--plasma-switch__thumb_checked_true-bg-color',
|
43
|
+
thumbBackgroundColorOff: '--plasma-switch__thumb-checked_false-bg-color',
|
38
44
|
thumbBoxShadow: '--plasma-switch__thumb-box-shadow',
|
39
45
|
thumbBoxShadowOn: '--plasma-switch__thumb-box-shadow_checked_true',
|
40
46
|
labelOffsetPrivate: '--plasma_private-switch__label-offset'
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Switch.tokens.js","sources":["../../../src/components/Switch/Switch.tokens.ts"],"sourcesContent":["export const tokens = {\n fontFamily: '--plasma-switch-font-family',\n fontStyle: '--plasma-switch-font-style',\n fontSize: '--plasma-switch-font-size',\n fontWeight: '--plasma-switch-font-weight',\n letterSpacing: '--plasma-switch-letter-spacing',\n lineHeight: '--plasma-switch-line-height',\n\n /* Токены description */\n descriptionFontFamily: '--plasma-switch-description-font-family',\n descriptionFontStyle: '--plasma-switch-description-font-style',\n descriptionFontSize: '--plasma-switch-description-font-size',\n descriptionFontWeight: '--plasma-switch-description-font-weight',\n descriptionLetterSpacing: '--plasma-switch-description-letter-spacing',\n descriptionLineHeight: '--plasma-switch-description-line-height',\n\n /* Цвет подписи */\n labelColor: '--plasma-switch__label-color',\n labelOffset: '--plasma-switch__label-offset',\n\n /* Цвет описания */\n descriptionColor: '--plasma-switch__description-color',\n descriptionOffset: '--plasma-switch__description-offset',\n\n /** Прозрачность для всего компонента в состоянии disabled */\n disabledOpacity: '--plasma-switch-disabled-opacity',\n\n verticalGap: '--plasma-switch-vertical-gap',\n trackWidth: '--plasma-switch__track-width',\n trackHeight: '--plasma-switch__track-height',\n trackBorderRadius: '--plasma-switch__track-border-radius',\n // NOTE: could be intersection with checked\n trackBackgroundColorOn: '--plasma-switch__track_checked_true-bg-color',\n trackBackgroundColorOnHover: '--plasma-switch__track_checked_true_hovered_true-bg-color',\n trackBackgroundColorOff: '--plasma-switch__track_checked_false-bg-color',\n trackBackgroundColorOffHover: '--plasma-switch__track_checked_false_hovered_true-bg-color',\n\n trackFocusColor: '--plasma-switch__track-focus-color',\n\n thumbSize: '--plasma-switch__thumb-size',\n thumbOffset: '--plasma-switch__thumb-offset',\n thumbBorderRadius: '--plasma-switch__thumb-border-radius',\n\n thumbPressScale: '--plasma-switch__thumb-scale',\n\n
|
1
|
+
{"version":3,"file":"Switch.tokens.js","sources":["../../../src/components/Switch/Switch.tokens.ts"],"sourcesContent":["export const tokens = {\n fontFamily: '--plasma-switch-font-family',\n fontStyle: '--plasma-switch-font-style',\n fontSize: '--plasma-switch-font-size',\n fontWeight: '--plasma-switch-font-weight',\n letterSpacing: '--plasma-switch-letter-spacing',\n lineHeight: '--plasma-switch-line-height',\n\n /* Токены description */\n descriptionFontFamily: '--plasma-switch-description-font-family',\n descriptionFontStyle: '--plasma-switch-description-font-style',\n descriptionFontSize: '--plasma-switch-description-font-size',\n descriptionFontWeight: '--plasma-switch-description-font-weight',\n descriptionLetterSpacing: '--plasma-switch-description-letter-spacing',\n descriptionLineHeight: '--plasma-switch-description-line-height',\n\n /* Цвет подписи */\n labelColor: '--plasma-switch__label-color',\n labelOffset: '--plasma-switch__label-offset',\n\n /* Цвет описания */\n descriptionColor: '--plasma-switch__description-color',\n descriptionOffset: '--plasma-switch__description-offset',\n\n /** Прозрачность для всего компонента в состоянии disabled */\n disabledOpacity: '--plasma-switch-disabled-opacity',\n\n verticalGap: '--plasma-switch-vertical-gap',\n trackWidth: '--plasma-switch__track-width',\n trackHeight: '--plasma-switch__track-height',\n trackBorderWidth: '--plasma-switch__track-border',\n trackBorderColorOn: '--plasma-switch__track-checked_true-border-color',\n trackBorderColorOnHover: '--plasma-switch__track-checked_true_hovered_true-border-color',\n trackBorderColorOff: '--plasma-switch__track-checked_false-border-color',\n trackBorderColorOffHover: '--plasma-switch__track-checked_false_hovered_true-border-color',\n\n trackBorderRadius: '--plasma-switch__track-border-radius',\n // NOTE: could be intersection with checked\n trackBackgroundColorOn: '--plasma-switch__track_checked_true-bg-color',\n trackBackgroundColorOnHover: '--plasma-switch__track_checked_true_hovered_true-bg-color',\n trackBackgroundColorOff: '--plasma-switch__track_checked_false-bg-color',\n trackBackgroundColorOffHover: '--plasma-switch__track_checked_false_hovered_true-bg-color',\n\n trackFocusColor: '--plasma-switch__track-focus-color',\n\n thumbSize: '--plasma-switch__thumb-size',\n thumbOffset: '--plasma-switch__thumb-offset',\n thumbBorderRadius: '--plasma-switch__thumb-border-radius',\n\n thumbPressScale: '--plasma-switch__thumb-scale',\n\n thumbBackgroundColorOn: '--plasma-switch__thumb_checked_true-bg-color',\n thumbBackgroundColorOff: '--plasma-switch__thumb-checked_false-bg-color',\n thumbBoxShadow: '--plasma-switch__thumb-box-shadow',\n thumbBoxShadowOn: '--plasma-switch__thumb-box-shadow_checked_true',\n\n labelOffsetPrivate: '--plasma_private-switch__label-offset',\n};\n\nexport const classes = {\n beforeSwitchLabelPosition: 'switch-label-position-before',\n afterSwitchLabelPosition: 'switch-label-position-after',\n};\n"],"names":["tokens","fontFamily","fontStyle","fontSize","fontWeight","letterSpacing","lineHeight","descriptionFontFamily","descriptionFontStyle","descriptionFontSize","descriptionFontWeight","descriptionLetterSpacing","descriptionLineHeight","labelColor","labelOffset","descriptionColor","descriptionOffset","disabledOpacity","verticalGap","trackWidth","trackHeight","trackBorderWidth","trackBorderColorOn","trackBorderColorOnHover","trackBorderColorOff","trackBorderColorOffHover","trackBorderRadius","trackBackgroundColorOn","trackBackgroundColorOnHover","trackBackgroundColorOff","trackBackgroundColorOffHover","trackFocusColor","thumbSize","thumbOffset","thumbBorderRadius","thumbPressScale","thumbBackgroundColorOn","thumbBackgroundColorOff","thumbBoxShadow","thumbBoxShadowOn","labelOffsetPrivate","classes","beforeSwitchLabelPosition","afterSwitchLabelPosition"],"mappings":"AAAO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,6BAA6B;AACzCC,EAAAA,SAAS,EAAE,4BAA4B;AACvCC,EAAAA,QAAQ,EAAE,2BAA2B;AACrCC,EAAAA,UAAU,EAAE,6BAA6B;AACzCC,EAAAA,aAAa,EAAE,gCAAgC;AAC/CC,EAAAA,UAAU,EAAE,6BAA6B;AAEzC;AACAC,EAAAA,qBAAqB,EAAE,yCAAyC;AAChEC,EAAAA,oBAAoB,EAAE,wCAAwC;AAC9DC,EAAAA,mBAAmB,EAAE,uCAAuC;AAC5DC,EAAAA,qBAAqB,EAAE,yCAAyC;AAChEC,EAAAA,wBAAwB,EAAE,4CAA4C;AACtEC,EAAAA,qBAAqB,EAAE,yCAAyC;AAEhE;AACAC,EAAAA,UAAU,EAAE,8BAA8B;AAC1CC,EAAAA,WAAW,EAAE,+BAA+B;AAE5C;AACAC,EAAAA,gBAAgB,EAAE,oCAAoC;AACtDC,EAAAA,iBAAiB,EAAE,qCAAqC;AAExD;AACAC,EAAAA,eAAe,EAAE,kCAAkC;AAEnDC,EAAAA,WAAW,EAAE,8BAA8B;AAC3CC,EAAAA,UAAU,EAAE,8BAA8B;AAC1CC,EAAAA,WAAW,EAAE,+BAA+B;AAC5CC,EAAAA,gBAAgB,EAAE,+BAA+B;AACjDC,EAAAA,kBAAkB,EAAE,kDAAkD;AACtEC,EAAAA,uBAAuB,EAAE,+DAA+D;AACxFC,EAAAA,mBAAmB,EAAE,mDAAmD;AACxEC,EAAAA,wBAAwB,EAAE,gEAAgE;AAE1FC,EAAAA,iBAAiB,EAAE,sCAAsC;AACzD;AACAC,EAAAA,sBAAsB,EAAE,8CAA8C;AACtEC,EAAAA,2BAA2B,EAAE,2DAA2D;AACxFC,EAAAA,uBAAuB,EAAE,+CAA+C;AACxEC,EAAAA,4BAA4B,EAAE,4DAA4D;AAE1FC,EAAAA,eAAe,EAAE,oCAAoC;AAErDC,EAAAA,SAAS,EAAE,6BAA6B;AACxCC,EAAAA,WAAW,EAAE,+BAA+B;AAC5CC,EAAAA,iBAAiB,EAAE,sCAAsC;AAEzDC,EAAAA,eAAe,EAAE,8BAA8B;AAE/CC,EAAAA,sBAAsB,EAAE,8CAA8C;AACtEC,EAAAA,uBAAuB,EAAE,+CAA+C;AACxEC,EAAAA,cAAc,EAAE,mCAAmC;AACnDC,EAAAA,gBAAgB,EAAE,gDAAgD;AAElEC,EAAAA,kBAAkB,EAAE,uCAAA;AACxB,EAAC;AAEM,IAAMC,OAAO,GAAG;AACnBC,EAAAA,yBAAyB,EAAE,8BAA8B;AACzDC,EAAAA,wBAAwB,EAAE,6BAAA;AAC9B;;;;"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"base.js","sources":["../../../../src/components/Switch/_toggleSize/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../Switch.tokens';\nimport { StyledTrigger } from '../Switch.styles';\n\nexport const base = css`\n ${StyledTrigger} {\n flex: 0 0 var(${tokens.trackWidth});\n width: var(${tokens.
|
1
|
+
{"version":3,"file":"base.js","sources":["../../../../src/components/Switch/_toggleSize/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../Switch.tokens';\nimport { StyledTrigger } from '../Switch.styles';\n\nexport const base = css`\n ${StyledTrigger} {\n box-sizing: border-box;\n flex: 0 0 var(${tokens.trackWidth});\n\n border-style: solid;\n border-width: var(${tokens.trackBorderWidth});\n border-radius: var(${tokens.trackBorderRadius});\n\n width: var(${tokens.trackWidth});\n height: var(${tokens.trackHeight});\n\n &::after {\n width: var(${tokens.thumbSize});\n height: var(${tokens.thumbSize});\n border-radius: var(${tokens.thumbBorderRadius});\n margin: auto var(${tokens.thumbOffset});\n }\n }\n\n :active:not([disabled]) ${StyledTrigger}::after {\n width: calc(var(${tokens.thumbSize}) * var(${tokens.thumbPressScale}, 1));\n }\n`;\n"],"names":["base"],"mappings":"AAKO,IAAMA,IAAI,GAuBhB;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
.b1wld3h3 .s2cs3kf{box-sizing:border-box;-webkit-flex:0 0 var(--plasma-switch__track-width);-ms-flex:0 0 var(--plasma-switch__track-width);flex:0 0 var(--plasma-switch__track-width);border-style:solid;border-width:var(--plasma-switch__track-border);border-radius:var(--plasma-switch__track-border-radius);width:var(--plasma-switch__track-width);height:var(--plasma-switch__track-height);}.b1wld3h3 .s2cs3kf::after{width:var(--plasma-switch__thumb-size);height:var(--plasma-switch__thumb-size);border-radius:var(--plasma-switch__thumb-border-radius);margin:auto var(--plasma-switch__thumb-offset);}.b1wld3h3:active:not([disabled]) .s2cs3kf::after{width:calc(var(--plasma-switch__thumb-size) * var(--plasma-switch__thumb-scale,1));}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"base.js","sources":["../../../../src/components/Switch/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../Switch.tokens';\nimport { StyledTrigger, StyledInput, StyledLabel, StyledDescription } from '../Switch.styles';\n\nexport const base = css`\n ${StyledTrigger} {\n background-color: var(${tokens.trackBackgroundColorOff});\n }\n\n ${StyledInput}:not([disabled]) ~ ${StyledTrigger}:hover {\n background-color: var(${tokens.trackBackgroundColorOffHover}, var(${tokens.trackBackgroundColorOff}));\n }\n\n ${StyledInput}:checked ~ ${StyledTrigger} {\n background-color: var(${tokens.trackBackgroundColorOn});\n }\n\n ${StyledInput}:checked:not([disabled]) ~ ${StyledTrigger}:hover {\n background-color: var(${tokens.trackBackgroundColorOnHover}, var(${tokens.trackBackgroundColorOn}));\n }\n\n ${StyledTrigger}::after {\n background-color: var(${tokens.
|
1
|
+
{"version":3,"file":"base.js","sources":["../../../../src/components/Switch/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../Switch.tokens';\nimport { StyledTrigger, StyledInput, StyledLabel, StyledDescription } from '../Switch.styles';\n\nexport const base = css`\n ${StyledTrigger} {\n background-color: var(${tokens.trackBackgroundColorOff});\n border-color: var(${tokens.trackBorderColorOff});\n }\n\n ${StyledInput}:not([disabled]) ~ ${StyledTrigger}:hover {\n background-color: var(${tokens.trackBackgroundColorOffHover}, var(${tokens.trackBackgroundColorOff}));\n border-color: var(${tokens.trackBorderColorOffHover}, var(${tokens.trackBorderColorOff}));\n }\n\n ${StyledInput}:checked ~ ${StyledTrigger} {\n background-color: var(${tokens.trackBackgroundColorOn});\n border-color: var(${tokens.trackBorderColorOn});\n }\n\n ${StyledInput}:checked:not([disabled]) ~ ${StyledTrigger}:hover {\n background-color: var(${tokens.trackBackgroundColorOnHover}, var(${tokens.trackBackgroundColorOn}));\n border-color: var(${tokens.trackBorderColorOnHover}, var(${tokens.trackBorderColorOn}));\n }\n\n ${StyledTrigger}::after {\n background-color: var(${tokens.thumbBackgroundColorOff});\n box-shadow: var(${tokens.thumbBoxShadow});\n }\n\n ${StyledInput}:checked ~ ${StyledTrigger}::after {\n background-color: var(${tokens.thumbBackgroundColorOn});\n box-shadow: var(${tokens.thumbBoxShadowOn}, var(${tokens.thumbBoxShadow}));\n }\n\n ${StyledLabel} {\n color: var(${tokens.labelColor});\n }\n\n ${StyledDescription} {\n color: var(${tokens.descriptionColor});\n }\n`;\n"],"names":["base"],"mappings":"AAKO,IAAMA,IAAI,GAsChB;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
.b1g0jmh3 .s2cs3kf{background-color:var(--plasma-switch__track_checked_false-bg-color);border-color:var(--plasma-switch__track-checked_false-border-color);}.b1g0jmh3 .ssthlx1:not([disabled]) ~ .s2cs3kf:hover{background-color:var(--plasma-switch__track_checked_false_hovered_true-bg-color,var(--plasma-switch__track_checked_false-bg-color));border-color:var(--plasma-switch__track-checked_false_hovered_true-border-color,var(--plasma-switch__track-checked_false-border-color));}.b1g0jmh3 .ssthlx1:checked ~ .s2cs3kf{background-color:var(--plasma-switch__track_checked_true-bg-color);border-color:var(--plasma-switch__track-checked_true-border-color);}.b1g0jmh3 .ssthlx1:checked:not([disabled]) ~ .s2cs3kf:hover{background-color:var(--plasma-switch__track_checked_true_hovered_true-bg-color,var(--plasma-switch__track_checked_true-bg-color));border-color:var(--plasma-switch__track-checked_true_hovered_true-border-color,var(--plasma-switch__track-checked_true-border-color));}.b1g0jmh3 .s2cs3kf::after{background-color:var(--plasma-switch__thumb-checked_false-bg-color);box-shadow:var(--plasma-switch__thumb-box-shadow);}.b1g0jmh3 .ssthlx1:checked ~ .s2cs3kf::after{background-color:var(--plasma-switch__thumb_checked_true-bg-color);box-shadow:var(--plasma-switch__thumb-box-shadow_checked_true,var(--plasma-switch__thumb-box-shadow));}.b1g0jmh3 .s1ilr5eq{color:var(--plasma-switch__label-color);}.b1g0jmh3 .sdjnckq{color:var(--plasma-switch__description-color);}
|
@@ -15,11 +15,10 @@ import { OuterLabelWrapper, StyledIndicatorWrapper, Label, StyledHintWrapper, St
|
|
15
15
|
import { classes } from './TextField.tokens.js';
|
16
16
|
import { HintComponent } from './ui/Hint/Hint.js';
|
17
17
|
import { useOutsideClick } from '../../hooks/useOutsideClick.js';
|
18
|
-
import { useValidation } from './hooks/useValidation.js';
|
19
18
|
import { useKeyNavigation } from './hooks/useKeyNavigation.js';
|
20
19
|
import { TextFieldChip } from './ui/TextFieldChip/TextFieldChip.js';
|
21
20
|
|
22
|
-
var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "titleCaption", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "view", "size", "readOnly", "disabled", "required", "clear", "optional", "hasDivider", "value", "chips", "
|
21
|
+
var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "titleCaption", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "view", "size", "readOnly", "disabled", "required", "clear", "optional", "hasDivider", "value", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
|
23
22
|
var optionalText = 'optional';
|
24
23
|
var base = "bpunezx";
|
25
24
|
var HINT_DEFAULT_OFFSET = [0, 0];
|
@@ -71,12 +70,7 @@ var textFieldRoot = function textFieldRoot(Root) {
|
|
71
70
|
hasDivider = _ref.hasDivider,
|
72
71
|
outerValue = _ref.value,
|
73
72
|
values = _ref.chips,
|
74
|
-
validationType = _ref.validationType,
|
75
|
-
options = _ref.options,
|
76
|
-
passwordHidden = _ref.passwordHidden,
|
77
|
-
onValidate = _ref.onValidate,
|
78
73
|
onChange = _ref.onChange,
|
79
|
-
onBlur = _ref.onBlur,
|
80
74
|
onChangeChips = _ref.onChangeChips,
|
81
75
|
onSearch = _ref.onSearch,
|
82
76
|
onKeyDown = _ref.onKeyDown,
|
@@ -126,7 +120,6 @@ var textFieldRoot = function textFieldRoot(Root) {
|
|
126
120
|
var hasValueClass = hasValue ? classes.hasValue : undefined;
|
127
121
|
var wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? classes.hasEmptyContentLeft : undefined;
|
128
122
|
var wrapperWithoutRightContent = !contentRight && isChipsVisible ? classes.hasEmptyContentRight : undefined;
|
129
|
-
var isPasswordHidden = validationType === 'password' && passwordHidden;
|
130
123
|
var hintRef = useOutsideClick(function () {
|
131
124
|
setIsHintVisible(false);
|
132
125
|
});
|
@@ -169,13 +162,6 @@ var textFieldRoot = function textFieldRoot(Root) {
|
|
169
162
|
setChips(newChips);
|
170
163
|
onChangeChips === null || onChangeChips === void 0 || onChangeChips(newValues);
|
171
164
|
};
|
172
|
-
var _useValidation = useValidation({
|
173
|
-
validationType: validationType,
|
174
|
-
options: options,
|
175
|
-
onValidate: onValidate
|
176
|
-
}),
|
177
|
-
handleValidationBlur = _useValidation.handleValidationBlur,
|
178
|
-
handleValidationKeyDown = _useValidation.handleValidationKeyDown;
|
179
165
|
var _useKeyNavigation = useKeyNavigation({
|
180
166
|
controlledRefs: controlledRefs,
|
181
167
|
disabled: disabled,
|
@@ -205,12 +191,6 @@ var textFieldRoot = function textFieldRoot(Root) {
|
|
205
191
|
});
|
206
192
|
inputRef.current.focus();
|
207
193
|
};
|
208
|
-
var handleInputBlur = function handleInputBlur(event) {
|
209
|
-
if (onBlur) {
|
210
|
-
onBlur(event);
|
211
|
-
}
|
212
|
-
handleValidationBlur(event);
|
213
|
-
};
|
214
194
|
var getRef = function getRef(element, index) {
|
215
195
|
if (element && chipsRefs !== null && chipsRefs !== void 0 && chipsRefs.current) {
|
216
196
|
chipsRefs.current[index] = element;
|
@@ -218,7 +198,6 @@ var textFieldRoot = function textFieldRoot(Root) {
|
|
218
198
|
};
|
219
199
|
var handleOnKeyDown = function handleOnKeyDown(event) {
|
220
200
|
handleInputKeydown(event);
|
221
|
-
handleValidationKeyDown(event);
|
222
201
|
if (onKeyDown) {
|
223
202
|
onKeyDown(event);
|
224
203
|
}
|
@@ -352,11 +331,8 @@ var textFieldRoot = function textFieldRoot(Root) {
|
|
352
331
|
readOnly: !disabled && readOnly,
|
353
332
|
onInput: handleInput,
|
354
333
|
onChange: handleChange,
|
355
|
-
onKeyDown: handleOnKeyDown
|
356
|
-
|
357
|
-
}, rest, isPasswordHidden && {
|
358
|
-
type: 'password'
|
359
|
-
})), hasInnerLabel && /*#__PURE__*/React.createElement(Label, {
|
334
|
+
onKeyDown: handleOnKeyDown
|
335
|
+
}, rest)), hasInnerLabel && /*#__PURE__*/React.createElement(Label, {
|
360
336
|
id: labelId,
|
361
337
|
htmlFor: innerId
|
362
338
|
}, innerLabelValue, optionalTextNode), placeholderShown && !hasValue && /*#__PURE__*/React.createElement(InputPlaceholder, null, innerPlaceholderValue, hasPlaceholderOptional && optionalTextNode)), textAfter && /*#__PURE__*/React.createElement(StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
|