@salutejs/plasma-new-hope 0.88.0-canary.1225.9347054103.0 → 0.88.0-canary.1225.9412763701.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (72) hide show
  1. package/cjs/components/Sheet/Sheet.css +9 -5
  2. package/cjs/components/Sheet/Sheet.js +30 -9
  3. package/cjs/components/Sheet/Sheet.js.map +1 -1
  4. package/cjs/components/Sheet/Sheet.styles.js +81 -16
  5. package/cjs/components/Sheet/Sheet.styles.js.map +1 -1
  6. package/cjs/components/Sheet/{Sheet.styles_1bm46e7.css → Sheet.styles_kdjr5m.css} +5 -3
  7. package/cjs/components/Sheet/Sheet.tokens.js +2 -1
  8. package/cjs/components/Sheet/Sheet.tokens.js.map +1 -1
  9. package/cjs/components/Sheet/utils/handleTransition.js +2 -3
  10. package/cjs/components/Sheet/utils/handleTransition.js.map +1 -1
  11. package/cjs/components/Sheet/utils/index.js +8 -0
  12. package/cjs/components/Sheet/utils/index.js.map +1 -0
  13. package/cjs/index.css +7 -5
  14. package/es/components/Sheet/Sheet.css +9 -5
  15. package/es/components/Sheet/Sheet.js +32 -11
  16. package/es/components/Sheet/Sheet.js.map +1 -1
  17. package/es/components/Sheet/Sheet.styles.js +79 -16
  18. package/es/components/Sheet/Sheet.styles.js.map +1 -1
  19. package/es/components/Sheet/{Sheet.styles_1bm46e7.css → Sheet.styles_kdjr5m.css} +5 -3
  20. package/es/components/Sheet/Sheet.tokens.js +2 -1
  21. package/es/components/Sheet/Sheet.tokens.js.map +1 -1
  22. package/es/components/Sheet/utils/handleTransition.js +2 -3
  23. package/es/components/Sheet/utils/handleTransition.js.map +1 -1
  24. package/es/components/Sheet/utils/index.js +4 -0
  25. package/es/components/Sheet/utils/index.js.map +1 -0
  26. package/es/index.css +7 -5
  27. package/package.json +2 -2
  28. package/styled-components/cjs/components/Sheet/Sheet.js +30 -8
  29. package/styled-components/cjs/components/Sheet/Sheet.styles.js +36 -9
  30. package/styled-components/cjs/components/Sheet/Sheet.tokens.js +2 -1
  31. package/styled-components/cjs/components/Sheet/hooks/index.js +0 -7
  32. package/styled-components/cjs/components/Sheet/utils/handleTransition.js +2 -3
  33. package/styled-components/cjs/components/Sheet/utils/index.js +3 -1
  34. package/styled-components/cjs/components/Sheet/variations/_view/tokens.json +4 -1
  35. package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.config.js +1 -1
  36. package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +170 -12
  37. package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.config.js +1 -1
  38. package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.stories.tsx +162 -11
  39. package/styled-components/es/components/Sheet/Sheet.js +33 -11
  40. package/styled-components/es/components/Sheet/Sheet.styles.js +35 -8
  41. package/styled-components/es/components/Sheet/Sheet.tokens.js +2 -1
  42. package/styled-components/es/components/Sheet/hooks/index.js +0 -1
  43. package/styled-components/es/components/Sheet/utils/handleTransition.js +2 -3
  44. package/styled-components/es/components/Sheet/utils/index.js +2 -1
  45. package/styled-components/es/components/Sheet/variations/_view/tokens.json +4 -1
  46. package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.config.js +1 -1
  47. package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +170 -12
  48. package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.config.js +1 -1
  49. package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.stories.tsx +162 -11
  50. package/types/components/Sheet/Sheet.d.ts +1 -0
  51. package/types/components/Sheet/Sheet.d.ts.map +1 -1
  52. package/types/components/Sheet/Sheet.styles.d.ts +12 -8
  53. package/types/components/Sheet/Sheet.styles.d.ts.map +1 -1
  54. package/types/components/Sheet/Sheet.tokens.d.ts +2 -1
  55. package/types/components/Sheet/Sheet.tokens.d.ts.map +1 -1
  56. package/types/components/Sheet/Sheet.types.d.ts +25 -7
  57. package/types/components/Sheet/Sheet.types.d.ts.map +1 -1
  58. package/types/components/Sheet/hooks/index.d.ts +0 -1
  59. package/types/components/Sheet/hooks/index.d.ts.map +1 -1
  60. package/types/components/Sheet/utils/handleTransition.d.ts.map +1 -1
  61. package/types/components/Sheet/utils/index.d.ts +1 -0
  62. package/types/components/Sheet/utils/index.d.ts.map +1 -1
  63. package/types/examples/plasma_b2c/components/Sheet/Sheet.config.d.ts.map +1 -1
  64. package/types/examples/plasma_web/components/Sheet/Sheet.config.d.ts.map +1 -1
  65. package/cjs/components/Sheet/hooks/useThemeContext.js +0 -17
  66. package/cjs/components/Sheet/hooks/useThemeContext.js.map +0 -1
  67. package/es/components/Sheet/hooks/useThemeContext.js +0 -13
  68. package/es/components/Sheet/hooks/useThemeContext.js.map +0 -1
  69. package/styled-components/cjs/components/Sheet/hooks/useThemeContext.js +0 -15
  70. package/styled-components/es/components/Sheet/hooks/useThemeContext.js +0 -9
  71. package/types/components/Sheet/hooks/useThemeContext.d.ts +0 -7
  72. package/types/components/Sheet/hooks/useThemeContext.d.ts.map +0 -1
@@ -1,3 +1,2 @@
1
- export { useThemeContext } from './useThemeContext';
2
1
  export { useSheetSwipe } from './useSheetSwipe';
3
2
  export { useSheet } from './useSheet';
@@ -1,7 +1,6 @@
1
1
  export var handleTransition = function handleTransition(transition) {
2
2
  return function (props) {
3
- var lowPerformance = props.theme.lowPerformance,
4
- withTransition = props.withTransition;
5
- return !withTransition || lowPerformance ? 'unset' : transition;
3
+ var withTransition = props.withTransition;
4
+ return !withTransition ? 'unset' : transition;
6
5
  };
7
6
  };
@@ -1 +1,2 @@
1
- export { handleTransition } from './handleTransition';
1
+ export { handleTransition } from './handleTransition';
2
+ export var DEFAULT_Z_INDEX = '0';
@@ -1,3 +1,6 @@
1
1
  [
2
- "--plasma-sheet-overlay-background-color, --plasma-sheet-content-background-color, --plasma-sheet-handle-background-color"
2
+ "--plasma-sheet-overlay-color",
3
+ "--plasma-sheet-overlay-with-blur-color",
4
+ "--plasma-sheet-content-background-color",
5
+ "--plasma-sheet-handle-background-color"
3
6
  ]
@@ -6,7 +6,7 @@ export var config = {
6
6
  },
7
7
  variations: {
8
8
  view: {
9
- "default": /*#__PURE__*/css(["", ":var(--surface-solid-card);", ":var(--overlay-soft);", ":var(--text-primary);"], sheetTokens.contentBackgroundColor, sheetTokens.overlayBackgroundColor, sheetTokens.handleColor)
9
+ "default": /*#__PURE__*/css(["", ":var(--overlay-soft);", ":var(--overlay-blur);", ":var(--surface-solid-card);", ":var(--surface-solid-tertiary);"], sheetTokens.sheetOverlayColor, sheetTokens.sheetOverlayWithBlurColor, sheetTokens.contentBackgroundColor, sheetTokens.handleColor)
10
10
  }
11
11
  }
12
12
  };
@@ -11,14 +11,33 @@ import { Sheet } from './Sheet';
11
11
  const meta: Meta<typeof Sheet> = {
12
12
  title: 'plasma_b2c/Sheet',
13
13
  decorators: [WithTheme],
14
- parameters: { viewport: { defaultViewport: '860' } },
14
+ args: {
15
+ withBlur: false,
16
+ withOverlay: true,
17
+ withTransition: true,
18
+ hasHandle: true,
19
+ isHeaderFixed: false,
20
+ isFooterFixed: false,
21
+ },
15
22
  };
16
23
 
17
24
  export default meta;
18
25
 
19
- type StorySheetProps = ComponentProps<typeof Sheet>;
26
+ type StorySheetProps = ComponentProps<typeof Sheet> & {
27
+ hasHeader: boolean;
28
+ hasFooter: boolean;
29
+ };
20
30
 
21
- const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
31
+ const StoryDefault = ({
32
+ withOverlay,
33
+ withTransition,
34
+ hasFooter,
35
+ isFooterFixed,
36
+ hasHeader,
37
+ isHeaderFixed,
38
+ hasHandle,
39
+ withBlur,
40
+ }: StorySheetProps) => {
22
41
  const [isOpen, setIsOpen] = useState(false);
23
42
 
24
43
  return (
@@ -29,6 +48,33 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
29
48
  withOverlay={withOverlay}
30
49
  withTransition={withTransition}
31
50
  onClose={() => setIsOpen(false)}
51
+ hasHandle={hasHandle}
52
+ withBlur={withBlur}
53
+ contentHeader={
54
+ hasHeader ? (
55
+ <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
+ </div>
62
+ ) : undefined
63
+ }
64
+ isHeaderFixed={isHeaderFixed}
65
+ contentFooter={
66
+ hasFooter ? (
67
+ <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>
74
+ </div>
75
+ ) : undefined
76
+ }
77
+ isFooterFixed={isFooterFixed}
32
78
  >
33
79
  <p>Вложенные кнопки</p>
34
80
  <div
@@ -63,8 +109,8 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
63
109
 
64
110
  export const Default: StoryObj<StorySheetProps> = {
65
111
  args: {
66
- withOverlay: true,
67
- withTransition: true,
112
+ hasHeader: true,
113
+ hasFooter: true,
68
114
  },
69
115
  render: (args) => <StoryDefault {...args} />,
70
116
  };
@@ -92,7 +138,16 @@ export const WithoutOverlay: StoryObj = {
92
138
  render: () => <StoryWithoutOverlay />,
93
139
  };
94
140
 
95
- const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
141
+ const StoryWithScroll = ({
142
+ withOverlay,
143
+ withTransition,
144
+ hasFooter,
145
+ isFooterFixed,
146
+ hasHeader,
147
+ isHeaderFixed,
148
+ hasHandle,
149
+ withBlur,
150
+ }: StorySheetProps) => {
96
151
  const [isOpen, setIsOpen] = useState(false);
97
152
 
98
153
  return (
@@ -103,6 +158,33 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
103
158
  withOverlay={withOverlay}
104
159
  withTransition={withTransition}
105
160
  onClose={() => setIsOpen(false)}
161
+ hasHandle={hasHandle}
162
+ withBlur={withBlur}
163
+ contentHeader={
164
+ hasHeader ? (
165
+ <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>
171
+ </div>
172
+ ) : undefined
173
+ }
174
+ isHeaderFixed={isHeaderFixed}
175
+ contentFooter={
176
+ hasFooter ? (
177
+ <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>
184
+ </div>
185
+ ) : undefined
186
+ }
187
+ isFooterFixed={isFooterFixed}
106
188
  >
107
189
  <Body1>
108
190
  <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -128,10 +210,23 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
128
210
  };
129
211
 
130
212
  export const WithScroll: StoryObj<StorySheetProps> = {
213
+ args: {
214
+ hasHeader: true,
215
+ hasFooter: true,
216
+ },
131
217
  render: (args) => <StoryWithScroll {...args} />,
132
218
  };
133
219
 
134
- const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
220
+ const StoryWithInsideScroll = ({
221
+ withOverlay,
222
+ withTransition,
223
+ hasFooter,
224
+ isFooterFixed,
225
+ hasHeader,
226
+ isHeaderFixed,
227
+ hasHandle,
228
+ withBlur,
229
+ }: StorySheetProps) => {
135
230
  const [isOpen, setIsOpen] = useState(false);
136
231
 
137
232
  return (
@@ -142,6 +237,33 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
142
237
  withOverlay={withOverlay}
143
238
  withTransition={withTransition}
144
239
  onClose={() => setIsOpen(false)}
240
+ hasHandle={hasHandle}
241
+ withBlur={withBlur}
242
+ contentHeader={
243
+ hasHeader ? (
244
+ <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>
250
+ </div>
251
+ ) : undefined
252
+ }
253
+ isHeaderFixed={isHeaderFixed}
254
+ contentFooter={
255
+ hasFooter ? (
256
+ <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>
263
+ </div>
264
+ ) : undefined
265
+ }
266
+ isFooterFixed={isFooterFixed}
145
267
  >
146
268
  <p>Вложенные кнопки</p>
147
269
  <div
@@ -170,13 +292,22 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
170
292
 
171
293
  export const WithInsideScroll: StoryObj<StorySheetProps> = {
172
294
  args: {
173
- withOverlay: true,
174
- withTransition: true,
295
+ hasHeader: true,
296
+ hasFooter: true,
175
297
  },
176
298
  render: (args) => <StoryWithInsideScroll {...args} />,
177
299
  };
178
300
 
179
- const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
301
+ const StoryWithDoubleScroll = ({
302
+ withOverlay,
303
+ withTransition,
304
+ hasFooter,
305
+ isFooterFixed,
306
+ hasHeader,
307
+ isHeaderFixed,
308
+ hasHandle,
309
+ withBlur,
310
+ }: StorySheetProps) => {
180
311
  const [isOpen, setIsOpen] = useState(false);
181
312
 
182
313
  return (
@@ -187,6 +318,33 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
187
318
  withOverlay={withOverlay}
188
319
  withTransition={withTransition}
189
320
  onClose={() => setIsOpen(false)}
321
+ hasHandle={hasHandle}
322
+ withBlur={withBlur}
323
+ contentHeader={
324
+ hasHeader ? (
325
+ <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>
331
+ </div>
332
+ ) : undefined
333
+ }
334
+ isHeaderFixed={isHeaderFixed}
335
+ contentFooter={
336
+ hasFooter ? (
337
+ <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>
344
+ </div>
345
+ ) : undefined
346
+ }
347
+ isFooterFixed={isFooterFixed}
190
348
  >
191
349
  <Body1>
192
350
  <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -232,8 +390,8 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
232
390
 
233
391
  export const WithDoubleScroll: StoryObj<StorySheetProps> = {
234
392
  args: {
235
- withOverlay: true,
236
- withTransition: true,
393
+ hasHeader: true,
394
+ hasFooter: true,
237
395
  },
238
396
  render: (args) => <StoryWithDoubleScroll {...args} />,
239
397
  };
@@ -6,7 +6,7 @@ export var config = {
6
6
  },
7
7
  variations: {
8
8
  view: {
9
- "default": /*#__PURE__*/css(["", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-overlay);", ":var(--plasma-colors-white);"], sheetTokens.contentBackgroundColor, sheetTokens.overlayBackgroundColor, sheetTokens.handleColor)
9
+ "default": /*#__PURE__*/css(["", ":var(--overlay-soft);", ":var(--overlay-blur);", ":var(--surface-solid-card);", ":var(--surface-solid-tertiary);"], sheetTokens.sheetOverlayColor, sheetTokens.sheetOverlayWithBlurColor, sheetTokens.contentBackgroundColor, sheetTokens.handleColor)
10
10
  }
11
11
  }
12
12
  };
@@ -16,9 +16,21 @@ const meta: Meta<typeof Sheet> = {
16
16
 
17
17
  export default meta;
18
18
 
19
- type StorySheetProps = ComponentProps<typeof Sheet>;
19
+ type StorySheetProps = ComponentProps<typeof Sheet> & {
20
+ hasHeader: boolean;
21
+ hasFooter: boolean;
22
+ };
20
23
 
21
- const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
24
+ const StoryDefault = ({
25
+ withOverlay,
26
+ withTransition,
27
+ hasFooter,
28
+ isFooterFixed,
29
+ hasHeader,
30
+ isHeaderFixed,
31
+ hasHandle,
32
+ withBlur,
33
+ }: StorySheetProps) => {
22
34
  const [isOpen, setIsOpen] = useState(false);
23
35
 
24
36
  return (
@@ -29,6 +41,33 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
29
41
  withOverlay={withOverlay}
30
42
  withTransition={withTransition}
31
43
  onClose={() => setIsOpen(false)}
44
+ hasHandle={hasHandle}
45
+ withBlur={withBlur}
46
+ contentHeader={
47
+ hasHeader ? (
48
+ <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
+ </div>
55
+ ) : undefined
56
+ }
57
+ isHeaderFixed={isHeaderFixed}
58
+ contentFooter={
59
+ hasFooter ? (
60
+ <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>
67
+ </div>
68
+ ) : undefined
69
+ }
70
+ isFooterFixed={isFooterFixed}
32
71
  >
33
72
  <p>Вложенные кнопки</p>
34
73
  <div
@@ -63,8 +102,8 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
63
102
 
64
103
  export const Default: StoryObj<StorySheetProps> = {
65
104
  args: {
66
- withOverlay: true,
67
- withTransition: true,
105
+ hasHeader: true,
106
+ hasFooter: true,
68
107
  },
69
108
  render: (args) => <StoryDefault {...args} />,
70
109
  };
@@ -92,7 +131,16 @@ export const WithoutOverlay: StoryObj = {
92
131
  render: () => <StoryWithoutOverlay />,
93
132
  };
94
133
 
95
- const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
134
+ const StoryWithScroll = ({
135
+ withOverlay,
136
+ withTransition,
137
+ hasFooter,
138
+ isFooterFixed,
139
+ hasHeader,
140
+ isHeaderFixed,
141
+ hasHandle,
142
+ withBlur,
143
+ }: StorySheetProps) => {
96
144
  const [isOpen, setIsOpen] = useState(false);
97
145
 
98
146
  return (
@@ -103,6 +151,33 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
103
151
  withOverlay={withOverlay}
104
152
  withTransition={withTransition}
105
153
  onClose={() => setIsOpen(false)}
154
+ hasHandle={hasHandle}
155
+ withBlur={withBlur}
156
+ contentHeader={
157
+ hasHeader ? (
158
+ <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>
164
+ </div>
165
+ ) : undefined
166
+ }
167
+ isHeaderFixed={isHeaderFixed}
168
+ contentFooter={
169
+ hasFooter ? (
170
+ <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>
177
+ </div>
178
+ ) : undefined
179
+ }
180
+ isFooterFixed={isFooterFixed}
106
181
  >
107
182
  <Body1>
108
183
  <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -128,10 +203,23 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
128
203
  };
129
204
 
130
205
  export const WithScroll: StoryObj<StorySheetProps> = {
206
+ args: {
207
+ hasHeader: true,
208
+ hasFooter: true,
209
+ },
131
210
  render: (args) => <StoryWithScroll {...args} />,
132
211
  };
133
212
 
134
- const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
213
+ const StoryWithInsideScroll = ({
214
+ withOverlay,
215
+ withTransition,
216
+ hasFooter,
217
+ isFooterFixed,
218
+ hasHeader,
219
+ isHeaderFixed,
220
+ hasHandle,
221
+ withBlur,
222
+ }: StorySheetProps) => {
135
223
  const [isOpen, setIsOpen] = useState(false);
136
224
 
137
225
  return (
@@ -142,6 +230,33 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
142
230
  withOverlay={withOverlay}
143
231
  withTransition={withTransition}
144
232
  onClose={() => setIsOpen(false)}
233
+ hasHandle={hasHandle}
234
+ withBlur={withBlur}
235
+ contentHeader={
236
+ hasHeader ? (
237
+ <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>
243
+ </div>
244
+ ) : undefined
245
+ }
246
+ isHeaderFixed={isHeaderFixed}
247
+ contentFooter={
248
+ hasFooter ? (
249
+ <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>
256
+ </div>
257
+ ) : undefined
258
+ }
259
+ isFooterFixed={isFooterFixed}
145
260
  >
146
261
  <p>Вложенные кнопки</p>
147
262
  <div
@@ -170,13 +285,22 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
170
285
 
171
286
  export const WithInsideScroll: StoryObj<StorySheetProps> = {
172
287
  args: {
173
- withOverlay: true,
174
- withTransition: true,
288
+ hasHeader: true,
289
+ hasFooter: true,
175
290
  },
176
291
  render: (args) => <StoryWithInsideScroll {...args} />,
177
292
  };
178
293
 
179
- const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
294
+ const StoryWithDoubleScroll = ({
295
+ withOverlay,
296
+ withTransition,
297
+ hasFooter,
298
+ isFooterFixed,
299
+ hasHeader,
300
+ isHeaderFixed,
301
+ hasHandle,
302
+ withBlur,
303
+ }: StorySheetProps) => {
180
304
  const [isOpen, setIsOpen] = useState(false);
181
305
 
182
306
  return (
@@ -187,6 +311,33 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
187
311
  withOverlay={withOverlay}
188
312
  withTransition={withTransition}
189
313
  onClose={() => setIsOpen(false)}
314
+ hasHandle={hasHandle}
315
+ withBlur={withBlur}
316
+ contentHeader={
317
+ hasHeader ? (
318
+ <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>
324
+ </div>
325
+ ) : undefined
326
+ }
327
+ isHeaderFixed={isHeaderFixed}
328
+ contentFooter={
329
+ hasFooter ? (
330
+ <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>
337
+ </div>
338
+ ) : undefined
339
+ }
340
+ isFooterFixed={isFooterFixed}
190
341
  >
191
342
  <Body1>
192
343
  <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -232,8 +383,8 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
232
383
 
233
384
  export const WithDoubleScroll: StoryObj<StorySheetProps> = {
234
385
  args: {
235
- withOverlay: true,
236
- withTransition: true,
386
+ hasHeader: true,
387
+ hasFooter: true,
237
388
  },
238
389
  render: (args) => <StoryWithDoubleScroll {...args} />,
239
390
  };
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import { RootProps } from '../../engines';
3
3
  import { SheetProps } from './Sheet.types';
4
4
  /**
5
+ * Sheet
5
6
  * Открывает окно-шторку поверх основного экрана.
6
7
  */
7
8
  export declare const sheetRoot: (Root: RootProps<HTMLDivElement, SheetProps>) => React.ForwardRefExoticComponent<SheetProps & React.RefAttributes<HTMLDivElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAY3C;;GAEG;AAEH,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,UAAU,CAAC,sFAkDhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBApDQ,UAAU,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;CAiEpE,CAAC"}
1
+ {"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAe3C;;;GAGG;AAEH,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,UAAU,CAAC,sFAuEhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBAzEQ,UAAU,cAAc,EAAE,UAAU,CAAC;;;;;;;;;;CAsFpE,CAAC"}
@@ -1,13 +1,17 @@
1
1
  /// <reference types="react" />
2
- export declare const StyledWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<import("./Sheet.types").SheetProps, "isOpen" | "withTransition"> & {
3
- theme: import("./Sheet.types").ThemeProviderContext;
2
+ import { CommonProps } from './Sheet.types';
3
+ export declare const StyledWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & CommonProps>;
4
+ export declare const StyledContentWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & CommonProps>;
5
+ export declare const StyledSheetHandle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
6
+ export declare const StyledSheetContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
7
+ hasHeader?: boolean | undefined;
8
+ hasFooter?: boolean | undefined;
4
9
  }>;
5
- export declare const StyledContentWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<import("./Sheet.types").SheetProps, "isOpen" | "withTransition"> & {
6
- theme: import("./Sheet.types").ThemeProviderContext;
10
+ export declare const StyledSheetHeader: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
11
+ isHeaderFixed?: boolean | undefined;
7
12
  }>;
8
- export declare const StyledOverlay: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
9
- withOverlay: boolean;
13
+ export declare const StyledSheetBody: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
14
+ export declare const StyledSheetFooter: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
15
+ isFooterFixed?: boolean | undefined;
10
16
  }>;
11
- export declare const StyledSheetContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
12
- export declare const StyledSheetHandle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
13
17
  //# sourceMappingURL=Sheet.styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Sheet.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,aAAa;;EAczB,CAAC;AAEF,eAAO,MAAM,oBAAoB;;EAiBhC,CAAC;AAEF,eAAO,MAAM,aAAa;iBAA6B,OAAO;EAQ7D,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAY9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAc7B,CAAC"}
1
+ {"version":3,"file":"Sheet.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,eAAO,MAAM,aAAa,0JAczB,CAAC;AAEF,eAAO,MAAM,oBAAoB,0JAiBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAc7B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;EAe9B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;EAQ7B,CAAC;AAEF,eAAO,MAAM,eAAe,qKAAe,CAAC;AAE5C,eAAO,MAAM,iBAAiB;;EAQ7B,CAAC"}
@@ -2,7 +2,8 @@ export declare const classes: {
2
2
  isClosed: string;
3
3
  };
4
4
  export declare const tokens: {
5
- overlayBackgroundColor: string;
5
+ sheetOverlayColor: string;
6
+ sheetOverlayWithBlurColor: string;
6
7
  contentBackgroundColor: string;
7
8
  handleColor: string;
8
9
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Sheet.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAMlB,CAAC"}
1
+ {"version":3,"file":"Sheet.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CAOlB,CAAC"}