@salutejs/plasma-new-hope 0.88.0-canary.1225.9412763701.0 → 0.88.0-canary.1225.9415530810.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/Sheet/Sheet.stories.tsx +16 -72
  3. package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.stories.tsx +16 -72
  4. package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +16 -72
  5. package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.stories.tsx +16 -72
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/plasma-new-hope",
3
- "version": "0.88.0-canary.1225.9412763701.0",
3
+ "version": "0.88.0-canary.1225.9415530810.0",
4
4
  "description": "Salute Design System blueprint",
5
5
  "main": "cjs/index.js",
6
6
  "module": "es/index.js",
@@ -105,5 +105,5 @@
105
105
  "react-popper": "2.3.0",
106
106
  "storeon": "3.1.5"
107
107
  },
108
- "gitHead": "48a9e9f6950922933955a45abd99a7d5293fdec8"
108
+ "gitHead": "86093e2fb3d74efd3fac10e5463fdb50e9afa497"
109
109
  }
package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx CHANGED
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
2
2
  import type { StoryObj, Meta } from '@storybook/react';
3
3
  import type { ComponentProps } from 'react';
4
4
  import { Body1 } from '@salutejs/plasma-core';
5
+ import styled from 'styled-components';
5
6
 
6
7
  import { Button } from '../Button/Button';
7
8
  import { WithTheme } from '../../../_helpers';
@@ -28,6 +29,10 @@ type StorySheetProps = ComponentProps<typeof Sheet> & {
28
29
  hasFooter: boolean;
29
30
  };
30
31
 
32
+ const StyledBody = styled(Body1)`
33
+ padding-bottom: 300px;
34
+ `;
35
+
31
36
  const StoryDefault = ({
32
37
  withOverlay,
33
38
  withTransition,
@@ -53,11 +58,7 @@ const StoryDefault = ({
53
58
  contentHeader={
54
59
  hasHeader ? (
55
60
  <div>
56
- <h3>
57
- Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
58
- porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
59
- nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
60
- </h3>
61
+ <h4>header</h4>
61
62
  </div>
62
63
  ) : undefined
63
64
  }
@@ -65,43 +66,13 @@ const StoryDefault = ({
65
66
  contentFooter={
66
67
  hasFooter ? (
67
68
  <div>
68
- <p>
69
- Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
70
- laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
71
- dicta rem quae vel illum ea fugit molestiae dolorem?
72
- </p>
73
- <Button>Кнопка в футере</Button>
69
+ <p>footer</p>
74
70
  </div>
75
71
  ) : undefined
76
72
  }
77
73
  isFooterFixed={isFooterFixed}
78
74
  >
79
- <p>Вложенные кнопки</p>
80
- <div
81
- style={{
82
- height: '75px',
83
- overflow: 'scroll',
84
- display: 'flex',
85
- flexDirection: 'column',
86
- gap: '1rem',
87
- }}
88
- >
89
- <Button>Кнопка 1</Button>
90
- <Button>Кнопка 2</Button>
91
- <Button>Кнопка 3</Button>
92
- <Button>Кнопка 4</Button>
93
- <Button>Кнопка 5</Button>
94
- <Button>Кнопка 6</Button>
95
- <Button>Кнопка 7</Button>
96
- <Button>Кнопка 8</Button>
97
- </div>
98
- <Body1>
99
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
100
- consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
101
- fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
102
- placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
103
- dolorem labore quaerat vero maxime ab ipsa nihil.
104
- </Body1>
75
+ <StyledBody>body</StyledBody>
105
76
  </Sheet>
106
77
  </>
107
78
  );
@@ -122,13 +93,13 @@ const StoryWithoutOverlay = () => {
122
93
  <>
123
94
  <Button onClick={() => setIsOpen(true)}>Открыть</Button>
124
95
  <Sheet isOpen={isOpen} withOverlay={false} onClose={() => setIsOpen(false)}>
125
- <Body1>
96
+ <StyledBody>
126
97
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
127
98
  consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
128
99
  fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
129
100
  placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
130
101
  dolorem labore quaerat vero maxime ab ipsa nihil.
131
- </Body1>
102
+ </StyledBody>
132
103
  </Sheet>
133
104
  </>
134
105
  );
@@ -163,11 +134,7 @@ const StoryWithScroll = ({
163
134
  contentHeader={
164
135
  hasHeader ? (
165
136
  <div>
166
- <h3>
167
- Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
168
- porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
169
- nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
170
- </h3>
137
+ <h4>header</h4>
171
138
  </div>
172
139
  ) : undefined
173
140
  }
@@ -175,12 +142,7 @@ const StoryWithScroll = ({
175
142
  contentFooter={
176
143
  hasFooter ? (
177
144
  <div>
178
- <p>
179
- Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
180
- laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
181
- dicta rem quae vel illum ea fugit molestiae dolorem?
182
- </p>
183
- <Button>Кнопка в футере</Button>
145
+ <p>footer</p>
184
146
  </div>
185
147
  ) : undefined
186
148
  }
@@ -242,11 +204,7 @@ const StoryWithInsideScroll = ({
242
204
  contentHeader={
243
205
  hasHeader ? (
244
206
  <div>
245
- <h3>
246
- Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
247
- porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
248
- nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
249
- </h3>
207
+ <h4>header</h4>
250
208
  </div>
251
209
  ) : undefined
252
210
  }
@@ -254,12 +212,7 @@ const StoryWithInsideScroll = ({
254
212
  contentFooter={
255
213
  hasFooter ? (
256
214
  <div>
257
- <p>
258
- Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
259
- laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
260
- dicta rem quae vel illum ea fugit molestiae dolorem?
261
- </p>
262
- <Button>Кнопка в футере</Button>
215
+ <p>footer</p>
263
216
  </div>
264
217
  ) : undefined
265
218
  }
@@ -323,11 +276,7 @@ const StoryWithDoubleScroll = ({
323
276
  contentHeader={
324
277
  hasHeader ? (
325
278
  <div>
326
- <h3>
327
- Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
328
- porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
329
- nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
330
- </h3>
279
+ <h4>header</h4>
331
280
  </div>
332
281
  ) : undefined
333
282
  }
@@ -335,12 +284,7 @@ const StoryWithDoubleScroll = ({
335
284
  contentFooter={
336
285
  hasFooter ? (
337
286
  <div>
338
- <p>
339
- Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
340
- laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
341
- dicta rem quae vel illum ea fugit molestiae dolorem?
342
- </p>
343
- <Button>Кнопка в футере</Button>
287
+ <p>footer</p>
344
288
  </div>
345
289
  ) : undefined
346
290
  }
package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.stories.tsx CHANGED
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
2
2
  import type { StoryObj, Meta } from '@storybook/react';
3
3
  import type { ComponentProps } from 'react';
4
4
  import { Body1 } from '@salutejs/plasma-core';
5
+ import styled from 'styled-components';
5
6
 
6
7
  import { Button } from '../Button/Button';
7
8
  import { WithTheme } from '../../../_helpers';
@@ -21,6 +22,10 @@ type StorySheetProps = ComponentProps<typeof Sheet> & {
21
22
  hasFooter: boolean;
22
23
  };
23
24
 
25
+ const StyledBody = styled(Body1)`
26
+ padding-bottom: 300px;
27
+ `;
28
+
24
29
  const StoryDefault = ({
25
30
  withOverlay,
26
31
  withTransition,
@@ -46,11 +51,7 @@ const StoryDefault = ({
46
51
  contentHeader={
47
52
  hasHeader ? (
48
53
  <div>
49
- <h3>
50
- Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
51
- porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
52
- nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
53
- </h3>
54
+ <h4>header</h4>
54
55
  </div>
55
56
  ) : undefined
56
57
  }
@@ -58,43 +59,13 @@ const StoryDefault = ({
58
59
  contentFooter={
59
60
  hasFooter ? (
60
61
  <div>
61
- <p>
62
- Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
63
- laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
64
- dicta rem quae vel illum ea fugit molestiae dolorem?
65
- </p>
66
- <Button>Кнопка в футере</Button>
62
+ <p>footer</p>
67
63
  </div>
68
64
  ) : undefined
69
65
  }
70
66
  isFooterFixed={isFooterFixed}
71
67
  >
72
- <p>Вложенные кнопки</p>
73
- <div
74
- style={{
75
- height: '75px',
76
- overflow: 'scroll',
77
- display: 'flex',
78
- flexDirection: 'column',
79
- gap: '1rem',
80
- }}
81
- >
82
- <Button>Кнопка 1</Button>
83
- <Button>Кнопка 2</Button>
84
- <Button>Кнопка 3</Button>
85
- <Button>Кнопка 4</Button>
86
- <Button>Кнопка 5</Button>
87
- <Button>Кнопка 6</Button>
88
- <Button>Кнопка 7</Button>
89
- <Button>Кнопка 8</Button>
90
- </div>
91
- <Body1>
92
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
93
- consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
94
- fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
95
- placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
96
- dolorem labore quaerat vero maxime ab ipsa nihil.
97
- </Body1>
68
+ <StyledBody>body</StyledBody>
98
69
  </Sheet>
99
70
  </>
100
71
  );
@@ -115,13 +86,13 @@ const StoryWithoutOverlay = () => {
115
86
  <>
116
87
  <Button onClick={() => setIsOpen(true)}>Открыть</Button>
117
88
  <Sheet isOpen={isOpen} withOverlay={false} onClose={() => setIsOpen(false)}>
118
- <Body1>
89
+ <StyledBody>
119
90
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
120
91
  consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
121
92
  fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
122
93
  placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
123
94
  dolorem labore quaerat vero maxime ab ipsa nihil.
124
- </Body1>
95
+ </StyledBody>
125
96
  </Sheet>
126
97
  </>
127
98
  );
@@ -156,11 +127,7 @@ const StoryWithScroll = ({
156
127
  contentHeader={
157
128
  hasHeader ? (
158
129
  <div>
159
- <h3>
160
- Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
161
- porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
162
- nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
163
- </h3>
130
+ <h4>header</h4>
164
131
  </div>
165
132
  ) : undefined
166
133
  }
@@ -168,12 +135,7 @@ const StoryWithScroll = ({
168
135
  contentFooter={
169
136
  hasFooter ? (
170
137
  <div>
171
- <p>
172
- Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
173
- laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
174
- dicta rem quae vel illum ea fugit molestiae dolorem?
175
- </p>
176
- <Button>Кнопка в футере</Button>
138
+ <p>footer</p>
177
139
  </div>
178
140
  ) : undefined
179
141
  }
@@ -235,11 +197,7 @@ const StoryWithInsideScroll = ({
235
197
  contentHeader={
236
198
  hasHeader ? (
237
199
  <div>
238
- <h3>
239
- Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
240
- porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
241
- nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
242
- </h3>
200
+ <h4>header</h4>
243
201
  </div>
244
202
  ) : undefined
245
203
  }
@@ -247,12 +205,7 @@ const StoryWithInsideScroll = ({
247
205
  contentFooter={
248
206
  hasFooter ? (
249
207
  <div>
250
- <p>
251
- Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
252
- laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
253
- dicta rem quae vel illum ea fugit molestiae dolorem?
254
- </p>
255
- <Button>Кнопка в футере</Button>
208
+ <p>footer</p>
256
209
  </div>
257
210
  ) : undefined
258
211
  }
@@ -316,11 +269,7 @@ const StoryWithDoubleScroll = ({
316
269
  contentHeader={
317
270
  hasHeader ? (
318
271
  <div>
319
- <h3>
320
- Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
321
- porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
322
- nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
323
- </h3>
272
+ <h4>header</h4>
324
273
  </div>
325
274
  ) : undefined
326
275
  }
@@ -328,12 +277,7 @@ const StoryWithDoubleScroll = ({
328
277
  contentFooter={
329
278
  hasFooter ? (
330
279
  <div>
331
- <p>
332
- Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
333
- laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
334
- dicta rem quae vel illum ea fugit molestiae dolorem?
335
- </p>
336
- <Button>Кнопка в футере</Button>
280
+ <p>footer</p>
337
281
  </div>
338
282
  ) : undefined
339
283
  }
package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx CHANGED
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
2
2
  import type { StoryObj, Meta } from '@storybook/react';
3
3
  import type { ComponentProps } from 'react';
4
4
  import { Body1 } from '@salutejs/plasma-core';
5
+ import styled from 'styled-components';
5
6
 
6
7
  import { Button } from '../Button/Button';
7
8
  import { WithTheme } from '../../../_helpers';
@@ -28,6 +29,10 @@ type StorySheetProps = ComponentProps<typeof Sheet> & {
28
29
  hasFooter: boolean;
29
30
  };
30
31
 
32
+ const StyledBody = styled(Body1)`
33
+ padding-bottom: 300px;
34
+ `;
35
+
31
36
  const StoryDefault = ({
32
37
  withOverlay,
33
38
  withTransition,
@@ -53,11 +58,7 @@ const StoryDefault = ({
53
58
  contentHeader={
54
59
  hasHeader ? (
55
60
  <div>
56
- <h3>
57
- Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
58
- porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
59
- nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
60
- </h3>
61
+ <h4>header</h4>
61
62
  </div>
62
63
  ) : undefined
63
64
  }
@@ -65,43 +66,13 @@ const StoryDefault = ({
65
66
  contentFooter={
66
67
  hasFooter ? (
67
68
  <div>
68
- <p>
69
- Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
70
- laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
71
- dicta rem quae vel illum ea fugit molestiae dolorem?
72
- </p>
73
- <Button>Кнопка в футере</Button>
69
+ <p>footer</p>
74
70
  </div>
75
71
  ) : undefined
76
72
  }
77
73
  isFooterFixed={isFooterFixed}
78
74
  >
79
- <p>Вложенные кнопки</p>
80
- <div
81
- style={{
82
- height: '75px',
83
- overflow: 'scroll',
84
- display: 'flex',
85
- flexDirection: 'column',
86
- gap: '1rem',
87
- }}
88
- >
89
- <Button>Кнопка 1</Button>
90
- <Button>Кнопка 2</Button>
91
- <Button>Кнопка 3</Button>
92
- <Button>Кнопка 4</Button>
93
- <Button>Кнопка 5</Button>
94
- <Button>Кнопка 6</Button>
95
- <Button>Кнопка 7</Button>
96
- <Button>Кнопка 8</Button>
97
- </div>
98
- <Body1>
99
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
100
- consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
101
- fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
102
- placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
103
- dolorem labore quaerat vero maxime ab ipsa nihil.
104
- </Body1>
75
+ <StyledBody>body</StyledBody>
105
76
  </Sheet>
106
77
  </>
107
78
  );
@@ -122,13 +93,13 @@ const StoryWithoutOverlay = () => {
122
93
  <>
123
94
  <Button onClick={() => setIsOpen(true)}>Открыть</Button>
124
95
  <Sheet isOpen={isOpen} withOverlay={false} onClose={() => setIsOpen(false)}>
125
- <Body1>
96
+ <StyledBody>
126
97
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
127
98
  consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
128
99
  fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
129
100
  placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
130
101
  dolorem labore quaerat vero maxime ab ipsa nihil.
131
- </Body1>
102
+ </StyledBody>
132
103
  </Sheet>
133
104
  </>
134
105
  );
@@ -163,11 +134,7 @@ const StoryWithScroll = ({
163
134
  contentHeader={
164
135
  hasHeader ? (
165
136
  <div>
166
- <h3>
167
- Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
168
- porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
169
- nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
170
- </h3>
137
+ <h4>header</h4>
171
138
  </div>
172
139
  ) : undefined
173
140
  }
@@ -175,12 +142,7 @@ const StoryWithScroll = ({
175
142
  contentFooter={
176
143
  hasFooter ? (
177
144
  <div>
178
- <p>
179
- Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
180
- laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
181
- dicta rem quae vel illum ea fugit molestiae dolorem?
182
- </p>
183
- <Button>Кнопка в футере</Button>
145
+ <p>footer</p>
184
146
  </div>
185
147
  ) : undefined
186
148
  }
@@ -242,11 +204,7 @@ const StoryWithInsideScroll = ({
242
204
  contentHeader={
243
205
  hasHeader ? (
244
206
  <div>
245
- <h3>
246
- Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
247
- porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
248
- nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
249
- </h3>
207
+ <h4>header</h4>
250
208
  </div>
251
209
  ) : undefined
252
210
  }
@@ -254,12 +212,7 @@ const StoryWithInsideScroll = ({
254
212
  contentFooter={
255
213
  hasFooter ? (
256
214
  <div>
257
- <p>
258
- Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
259
- laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
260
- dicta rem quae vel illum ea fugit molestiae dolorem?
261
- </p>
262
- <Button>Кнопка в футере</Button>
215
+ <p>footer</p>
263
216
  </div>
264
217
  ) : undefined
265
218
  }
@@ -323,11 +276,7 @@ const StoryWithDoubleScroll = ({
323
276
  contentHeader={
324
277
  hasHeader ? (
325
278
  <div>
326
- <h3>
327
- Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
328
- porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
329
- nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
330
- </h3>
279
+ <h4>header</h4>
331
280
  </div>
332
281
  ) : undefined
333
282
  }
@@ -335,12 +284,7 @@ const StoryWithDoubleScroll = ({
335
284
  contentFooter={
336
285
  hasFooter ? (
337
286
  <div>
338
- <p>
339
- Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
340
- laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
341
- dicta rem quae vel illum ea fugit molestiae dolorem?
342
- </p>
343
- <Button>Кнопка в футере</Button>
287
+ <p>footer</p>
344
288
  </div>
345
289
  ) : undefined
346
290
  }
package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.stories.tsx CHANGED
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
2
2
  import type { StoryObj, Meta } from '@storybook/react';
3
3
  import type { ComponentProps } from 'react';
4
4
  import { Body1 } from '@salutejs/plasma-core';
5
+ import styled from 'styled-components';
5
6
 
6
7
  import { Button } from '../Button/Button';
7
8
  import { WithTheme } from '../../../_helpers';
@@ -21,6 +22,10 @@ type StorySheetProps = ComponentProps<typeof Sheet> & {
21
22
  hasFooter: boolean;
22
23
  };
23
24
 
25
+ const StyledBody = styled(Body1)`
26
+ padding-bottom: 300px;
27
+ `;
28
+
24
29
  const StoryDefault = ({
25
30
  withOverlay,
26
31
  withTransition,
@@ -46,11 +51,7 @@ const StoryDefault = ({
46
51
  contentHeader={
47
52
  hasHeader ? (
48
53
  <div>
49
- <h3>
50
- Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
51
- porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
52
- nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
53
- </h3>
54
+ <h4>header</h4>
54
55
  </div>
55
56
  ) : undefined
56
57
  }
@@ -58,43 +59,13 @@ const StoryDefault = ({
58
59
  contentFooter={
59
60
  hasFooter ? (
60
61
  <div>
61
- <p>
62
- Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
63
- laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
64
- dicta rem quae vel illum ea fugit molestiae dolorem?
65
- </p>
66
- <Button>Кнопка в футере</Button>
62
+ <p>footer</p>
67
63
  </div>
68
64
  ) : undefined
69
65
  }
70
66
  isFooterFixed={isFooterFixed}
71
67
  >
72
- <p>Вложенные кнопки</p>
73
- <div
74
- style={{
75
- height: '75px',
76
- overflow: 'scroll',
77
- display: 'flex',
78
- flexDirection: 'column',
79
- gap: '1rem',
80
- }}
81
- >
82
- <Button>Кнопка 1</Button>
83
- <Button>Кнопка 2</Button>
84
- <Button>Кнопка 3</Button>
85
- <Button>Кнопка 4</Button>
86
- <Button>Кнопка 5</Button>
87
- <Button>Кнопка 6</Button>
88
- <Button>Кнопка 7</Button>
89
- <Button>Кнопка 8</Button>
90
- </div>
91
- <Body1>
92
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
93
- consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
94
- fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
95
- placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
96
- dolorem labore quaerat vero maxime ab ipsa nihil.
97
- </Body1>
68
+ <StyledBody>body</StyledBody>
98
69
  </Sheet>
99
70
  </>
100
71
  );
@@ -115,13 +86,13 @@ const StoryWithoutOverlay = () => {
115
86
  <>
116
87
  <Button onClick={() => setIsOpen(true)}>Открыть</Button>
117
88
  <Sheet isOpen={isOpen} withOverlay={false} onClose={() => setIsOpen(false)}>
118
- <Body1>
89
+ <StyledBody>
119
90
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
120
91
  consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
121
92
  fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
122
93
  placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
123
94
  dolorem labore quaerat vero maxime ab ipsa nihil.
124
- </Body1>
95
+ </StyledBody>
125
96
  </Sheet>
126
97
  </>
127
98
  );
@@ -156,11 +127,7 @@ const StoryWithScroll = ({
156
127
  contentHeader={
157
128
  hasHeader ? (
158
129
  <div>
159
- <h3>
160
- Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
161
- porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
162
- nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
163
- </h3>
130
+ <h4>header</h4>
164
131
  </div>
165
132
  ) : undefined
166
133
  }
@@ -168,12 +135,7 @@ const StoryWithScroll = ({
168
135
  contentFooter={
169
136
  hasFooter ? (
170
137
  <div>
171
- <p>
172
- Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
173
- laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
174
- dicta rem quae vel illum ea fugit molestiae dolorem?
175
- </p>
176
- <Button>Кнопка в футере</Button>
138
+ <p>footer</p>
177
139
  </div>
178
140
  ) : undefined
179
141
  }
@@ -235,11 +197,7 @@ const StoryWithInsideScroll = ({
235
197
  contentHeader={
236
198
  hasHeader ? (
237
199
  <div>
238
- <h3>
239
- Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
240
- porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
241
- nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
242
- </h3>
200
+ <h4>header</h4>
243
201
  </div>
244
202
  ) : undefined
245
203
  }
@@ -247,12 +205,7 @@ const StoryWithInsideScroll = ({
247
205
  contentFooter={
248
206
  hasFooter ? (
249
207
  <div>
250
- <p>
251
- Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
252
- laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
253
- dicta rem quae vel illum ea fugit molestiae dolorem?
254
- </p>
255
- <Button>Кнопка в футере</Button>
208
+ <p>footer</p>
256
209
  </div>
257
210
  ) : undefined
258
211
  }
@@ -316,11 +269,7 @@ const StoryWithDoubleScroll = ({
316
269
  contentHeader={
317
270
  hasHeader ? (
318
271
  <div>
319
- <h3>
320
- Заголовок: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae
321
- porro laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima
322
- nesciunt dicta rem quae vel illum ea fugit molestiae dolorem?
323
- </h3>
272
+ <h4>header</h4>
324
273
  </div>
325
274
  ) : undefined
326
275
  }
@@ -328,12 +277,7 @@ const StoryWithDoubleScroll = ({
328
277
  contentFooter={
329
278
  hasFooter ? (
330
279
  <div>
331
- <p>
332
- Футер: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro
333
- laboriosam consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt
334
- dicta rem quae vel illum ea fugit molestiae dolorem?
335
- </p>
336
- <Button>Кнопка в футере</Button>
280
+ <p>footer</p>
337
281
  </div>
338
282
  ) : undefined
339
283
  }