@salutejs/plasma-new-hope 0.76.5-dev.0 → 0.76.6-canary.1188.8780100396.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. package/package.json +2 -2
  2. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +27 -11
  3. package/styled-components/cjs/examples/plasma_b2c/components/Radiobox/Radiobox.stories.tsx +37 -43
  4. package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +27 -11
  5. package/styled-components/es/examples/plasma_b2c/components/Radiobox/Radiobox.stories.tsx +37 -43
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/plasma-new-hope",
3
- "version": "0.76.5-dev.0",
3
+ "version": "0.76.6-canary.1188.8780100396.0",
4
4
  "description": "Salute Design System blueprint",
5
5
  "main": "cjs/index.js",
6
6
  "module": "es/index.js",
@@ -102,5 +102,5 @@
102
102
  "react-popper": "2.3.0",
103
103
  "storeon": "3.1.5"
104
104
  },
105
- "gitHead": "a63b0cd5aa399a71362366be5537123fcced9506"
105
+ "gitHead": "0ff503f5d5c700fbf01c442321924793568bd3d4"
106
106
  }
package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx CHANGED
@@ -1,6 +1,9 @@
1
- import { ComponentProps } from 'react';
1
+ import * as React from 'react';
2
+ import type { ComponentProps } from 'react';
2
3
  import type { StoryObj, Meta } from '@storybook/react';
4
+ import { disableProps } from '@salutejs/plasma-sb-utils';
3
5
 
6
+ import { IconMic } from '../../../../components/_Icon';
4
7
  import { buttonConfig } from '../../../../components/Button';
5
8
  import { mergeConfig } from '../../../../engines';
6
9
  import { WithTheme, argTypesFromConfig } from '../../../_helpers';
@@ -12,6 +15,16 @@ const meta: Meta<typeof Button> = {
12
15
  title: 'plasma_b2c/Button',
13
16
  decorators: [WithTheme],
14
17
  component: Button,
18
+ args: {
19
+ text: 'Hello',
20
+ view: 'default',
21
+ size: 'm',
22
+ disabled: false,
23
+ focused: true,
24
+ square: false,
25
+ stretching: 'auto',
26
+ isLoading: false,
27
+ },
15
28
  argTypes: {
16
29
  ...argTypesFromConfig(mergeConfig(buttonConfig, config)),
17
30
  pin: {
@@ -41,15 +54,18 @@ const meta: Meta<typeof Button> = {
41
54
 
42
55
  export default meta;
43
56
 
44
- export const Default: StoryObj<ComponentProps<typeof Button>> = {
45
- args: {
46
- children: 'Hello',
47
- view: 'default',
48
- size: 'm',
49
- disabled: false,
50
- focused: true,
51
- square: false,
52
- stretching: 'auto',
53
- isLoading: false,
57
+ export const Default: StoryObj<ComponentProps<typeof Button>> = {};
58
+
59
+ export const AccessibilityWithChildren: StoryObj<ComponentProps<typeof Button>> = {
60
+ argTypes: { ...disableProps(['text']) },
61
+ render: (props: ComponentProps<typeof Button>) => {
62
+ const args = { ...props, text: undefined };
63
+
64
+ return (
65
+ <Button {...args}>
66
+ <IconMic color="inherit" />
67
+ <span>Включить микрофон</span>
68
+ </Button>
69
+ );
54
70
  },
55
71
  };
package/styled-components/cjs/examples/plasma_b2c/components/Radiobox/Radiobox.stories.tsx CHANGED
@@ -51,61 +51,56 @@ const items = [
51
51
  { langName, value: 'elixir', label: 'Elixir', disabled: true },
52
52
  ];
53
53
 
54
- const StoryDefault = (props: RadioboxProps) => {
54
+ const StoryDefault = ({ label, description, name, ...props }: RadioboxProps) => {
55
55
  const value = 0;
56
56
  const [checked, setChecked] = useState(true);
57
57
 
58
58
  return (
59
- <>
60
- <Radiobox
61
- name="item.name"
62
- value={value}
63
- singleLine
64
- label="Label"
65
- description="Description"
66
- checked={checked}
67
- onChange={(event) => {
68
- event.persist();
69
-
70
- setChecked(event.target.checked);
71
- onChange(event);
72
- }}
73
- onFocus={onFocus}
74
- onBlur={onBlur}
75
- {...props}
76
- />
77
- <Radiobox
78
- name="item.name"
79
- value={value}
80
- singleLine
81
- label="Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
82
- description="Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
83
- checked={checked}
84
- onChange={(event) => {
85
- event.persist();
86
-
87
- setChecked(event.target.checked);
88
- onChange(event);
89
- }}
90
- onFocus={onFocus}
91
- onBlur={onBlur}
92
- {...props}
93
- />
94
- </>
59
+ <Radiobox
60
+ name={name}
61
+ value={value}
62
+ singleLine
63
+ label={label}
64
+ description={description}
65
+ checked={checked}
66
+ onChange={(event) => {
67
+ event.persist();
68
+
69
+ setChecked(event.target.checked);
70
+ onChange(event);
71
+ }}
72
+ onFocus={onFocus}
73
+ onBlur={onBlur}
74
+ {...props}
75
+ />
95
76
  );
96
77
  };
97
78
 
98
79
  export const Default: StoryObj<RadioboxProps> = {
80
+ args: {
81
+ label: 'Это label',
82
+ description: 'Это описание',
83
+ name: 'default',
84
+ },
85
+ render: (args) => <StoryDefault {...args} />,
86
+ };
87
+
88
+ export const LongText: StoryObj<RadioboxProps> = {
89
+ args: {
90
+ label: 'Ооооооооооооооооооооочень длинный label',
91
+ description: 'Ооооооооооооооооооооочень длинный description',
92
+ name: 'long',
93
+ },
99
94
  render: (args) => <StoryDefault {...args} />,
100
95
  };
101
96
 
102
- const StoryComplex = (props: RadioboxProps) => {
97
+ const StoryRadioGroup = () => {
103
98
  const [value, setValue] = useState('c');
104
99
 
105
100
  return (
106
- <RadioGroup>
101
+ <RadioGroup aria-labelledby="radiogroup-title-id">
107
102
  <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
108
- Radiogroup Title
103
+ Выберите язык программирования для изучения.
109
104
  </div>
110
105
  {items.map((item) => (
111
106
  <Radiobox
@@ -122,13 +117,12 @@ const StoryComplex = (props: RadioboxProps) => {
122
117
  }}
123
118
  onFocus={onFocus}
124
119
  onBlur={onBlur}
125
- {...props}
126
120
  />
127
121
  ))}
128
122
  </RadioGroup>
129
123
  );
130
124
  };
131
125
 
132
- export const Complex: StoryObj<RadioboxProps> = {
133
- render: (args) => <StoryComplex {...args} />,
126
+ export const ExampleRadioGroup: StoryObj<RadioboxProps> = {
127
+ render: () => <StoryRadioGroup />,
134
128
  };
package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx CHANGED
@@ -1,6 +1,9 @@
1
- import { ComponentProps } from 'react';
1
+ import * as React from 'react';
2
+ import type { ComponentProps } from 'react';
2
3
  import type { StoryObj, Meta } from '@storybook/react';
4
+ import { disableProps } from '@salutejs/plasma-sb-utils';
3
5
 
6
+ import { IconMic } from '../../../../components/_Icon';
4
7
  import { buttonConfig } from '../../../../components/Button';
5
8
  import { mergeConfig } from '../../../../engines';
6
9
  import { WithTheme, argTypesFromConfig } from '../../../_helpers';
@@ -12,6 +15,16 @@ const meta: Meta<typeof Button> = {
12
15
  title: 'plasma_b2c/Button',
13
16
  decorators: [WithTheme],
14
17
  component: Button,
18
+ args: {
19
+ text: 'Hello',
20
+ view: 'default',
21
+ size: 'm',
22
+ disabled: false,
23
+ focused: true,
24
+ square: false,
25
+ stretching: 'auto',
26
+ isLoading: false,
27
+ },
15
28
  argTypes: {
16
29
  ...argTypesFromConfig(mergeConfig(buttonConfig, config)),
17
30
  pin: {
@@ -41,15 +54,18 @@ const meta: Meta<typeof Button> = {
41
54
 
42
55
  export default meta;
43
56
 
44
- export const Default: StoryObj<ComponentProps<typeof Button>> = {
45
- args: {
46
- children: 'Hello',
47
- view: 'default',
48
- size: 'm',
49
- disabled: false,
50
- focused: true,
51
- square: false,
52
- stretching: 'auto',
53
- isLoading: false,
57
+ export const Default: StoryObj<ComponentProps<typeof Button>> = {};
58
+
59
+ export const AccessibilityWithChildren: StoryObj<ComponentProps<typeof Button>> = {
60
+ argTypes: { ...disableProps(['text']) },
61
+ render: (props: ComponentProps<typeof Button>) => {
62
+ const args = { ...props, text: undefined };
63
+
64
+ return (
65
+ <Button {...args}>
66
+ <IconMic color="inherit" />
67
+ <span>Включить микрофон</span>
68
+ </Button>
69
+ );
54
70
  },
55
71
  };
package/styled-components/es/examples/plasma_b2c/components/Radiobox/Radiobox.stories.tsx CHANGED
@@ -51,61 +51,56 @@ const items = [
51
51
  { langName, value: 'elixir', label: 'Elixir', disabled: true },
52
52
  ];
53
53
 
54
- const StoryDefault = (props: RadioboxProps) => {
54
+ const StoryDefault = ({ label, description, name, ...props }: RadioboxProps) => {
55
55
  const value = 0;
56
56
  const [checked, setChecked] = useState(true);
57
57
 
58
58
  return (
59
- <>
60
- <Radiobox
61
- name="item.name"
62
- value={value}
63
- singleLine
64
- label="Label"
65
- description="Description"
66
- checked={checked}
67
- onChange={(event) => {
68
- event.persist();
69
-
70
- setChecked(event.target.checked);
71
- onChange(event);
72
- }}
73
- onFocus={onFocus}
74
- onBlur={onBlur}
75
- {...props}
76
- />
77
- <Radiobox
78
- name="item.name"
79
- value={value}
80
- singleLine
81
- label="Label looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
82
- description="Description looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger"
83
- checked={checked}
84
- onChange={(event) => {
85
- event.persist();
86
-
87
- setChecked(event.target.checked);
88
- onChange(event);
89
- }}
90
- onFocus={onFocus}
91
- onBlur={onBlur}
92
- {...props}
93
- />
94
- </>
59
+ <Radiobox
60
+ name={name}
61
+ value={value}
62
+ singleLine
63
+ label={label}
64
+ description={description}
65
+ checked={checked}
66
+ onChange={(event) => {
67
+ event.persist();
68
+
69
+ setChecked(event.target.checked);
70
+ onChange(event);
71
+ }}
72
+ onFocus={onFocus}
73
+ onBlur={onBlur}
74
+ {...props}
75
+ />
95
76
  );
96
77
  };
97
78
 
98
79
  export const Default: StoryObj<RadioboxProps> = {
80
+ args: {
81
+ label: 'Это label',
82
+ description: 'Это описание',
83
+ name: 'default',
84
+ },
85
+ render: (args) => <StoryDefault {...args} />,
86
+ };
87
+
88
+ export const LongText: StoryObj<RadioboxProps> = {
89
+ args: {
90
+ label: 'Ооооооооооооооооооооочень длинный label',
91
+ description: 'Ооооооооооооооооооооочень длинный description',
92
+ name: 'long',
93
+ },
99
94
  render: (args) => <StoryDefault {...args} />,
100
95
  };
101
96
 
102
- const StoryComplex = (props: RadioboxProps) => {
97
+ const StoryRadioGroup = () => {
103
98
  const [value, setValue] = useState('c');
104
99
 
105
100
  return (
106
- <RadioGroup>
101
+ <RadioGroup aria-labelledby="radiogroup-title-id">
107
102
  <div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
108
- Radiogroup Title
103
+ Выберите язык программирования для изучения.
109
104
  </div>
110
105
  {items.map((item) => (
111
106
  <Radiobox
@@ -122,13 +117,12 @@ const StoryComplex = (props: RadioboxProps) => {
122
117
  }}
123
118
  onFocus={onFocus}
124
119
  onBlur={onBlur}
125
- {...props}
126
120
  />
127
121
  ))}
128
122
  </RadioGroup>
129
123
  );
130
124
  };
131
125
 
132
- export const Complex: StoryObj<RadioboxProps> = {
133
- render: (args) => <StoryComplex {...args} />,
126
+ export const ExampleRadioGroup: StoryObj<RadioboxProps> = {
127
+ render: () => <StoryRadioGroup />,
134
128
  };