@salutejs/plasma-new-hope 0.76.6-dev.0 → 0.76.7-dev.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/Radiobox/Radiobox.stories.tsx +37 -43
  3. package/styled-components/cjs/examples/plasma_web/components/Radiobox/Radiobox.stories.tsx +37 -43
  4. package/styled-components/es/examples/plasma_b2c/components/Radiobox/Radiobox.stories.tsx +37 -43
  5. package/styled-components/es/examples/plasma_web/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.6-dev.0",
3
+ "version": "0.76.7-dev.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": "e8d4b0b3eb74ad49bf595ab4dcf358dcc5dbee7c"
105
+ "gitHead": "e0859bb1f35737257262def2ccd5b8debc456e09"
106
106
  }
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/cjs/examples/plasma_web/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/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_web/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
  };