@salutejs/plasma-new-hope 0.88.0-canary.1225.9348142616.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 (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 +142 -40
  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 +134 -39
  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 +142 -40
  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 +134 -39
  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
@@ -7,15 +7,42 @@ export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
7
7
  export var StyledContentWrapper = /*#__PURE__*/styled.div.withConfig({
8
8
  componentId: "plasma-new-hope__sc-1pj79gq-1"
9
9
  })(["position:absolute;left:0;bottom:0;width:100%;max-height:100%;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;transition:", ";&.", "{transform:translateY(100%);}"], /*#__PURE__*/handleTransition('transform 0.5s'), /*#__PURE__*/String(classes.isClosed));
10
- export var StyledOverlay = /*#__PURE__*/styled.div.withConfig({
10
+ export var StyledSheetHandle = /*#__PURE__*/styled.div.withConfig({
11
11
  componentId: "plasma-new-hope__sc-1pj79gq-2"
12
- })(["position:absolute;top:0;left:0;width:100%;height:100%;background-color:", ";"], function (_ref) {
13
- var withOverlay = _ref.withOverlay;
14
- return withOverlay ? "var(".concat(tokens.overlayBackgroundColor, ")") : 'transparent';
15
- });
12
+ })(["width:4rem;padding:1.75rem 0;margin:-1.5rem 0;opacity:0.65;align-self:center;&::before{content:'';display:block;border-radius:0.625rem;background-color:var(", ");height:0.25rem;}"], tokens.handleColor);
16
13
  export var StyledSheetContent = /*#__PURE__*/styled.div.withConfig({
17
14
  componentId: "plasma-new-hope__sc-1pj79gq-3"
18
- })(["border-radius:1.5rem 1.5rem 0 0;background-color:var(", ");padding:1rem;max-height:100%;overflow:auto;overscroll-behavior:contain;&::-webkit-scrollbar{display:none;}"], tokens.contentBackgroundColor);
19
- export var StyledSheetHandle = /*#__PURE__*/styled.div.withConfig({
15
+ })(["border-radius:1.5rem 1.5rem 0 0;background-color:var(", ");padding-left:1rem;padding-right:1rem;padding-top:", ";padding-bottom:", ";max-height:100%;overflow:auto;overscroll-behavior:contain;&::-webkit-scrollbar{display:none;}"], tokens.contentBackgroundColor, function (_ref) {
16
+ var hasHeader = _ref.hasHeader;
17
+ return hasHeader ? 'unset' : '1rem';
18
+ }, function (_ref2) {
19
+ var hasFooter = _ref2.hasFooter;
20
+ return hasFooter ? 'unset' : '1rem';
21
+ });
22
+ export var StyledSheetHeader = /*#__PURE__*/styled.div.withConfig({
20
23
  componentId: "plasma-new-hope__sc-1pj79gq-4"
21
- })(["width:4rem;padding:1.75rem 0;margin:-1.5rem 0;opacity:0.65;align-self:center;&::before{content:'';display:block;border-radius:0.625rem;background-color:var(", ");height:0.25rem;}"], tokens.handleColor);
24
+ })(["width:100%;z-index:1;padding-top:1rem;position:", ";top:", ";background-color:", ";"], function (_ref3) {
25
+ var isHeaderFixed = _ref3.isHeaderFixed;
26
+ return isHeaderFixed ? 'sticky' : 'static';
27
+ }, function (_ref4) {
28
+ var isHeaderFixed = _ref4.isHeaderFixed;
29
+ return isHeaderFixed ? '0' : 'unset';
30
+ }, function (_ref5) {
31
+ var isHeaderFixed = _ref5.isHeaderFixed;
32
+ return isHeaderFixed ? "var(".concat(tokens.contentBackgroundColor, ")") : 'transparent';
33
+ });
34
+ export var StyledSheetBody = /*#__PURE__*/styled.div.withConfig({
35
+ componentId: "plasma-new-hope__sc-1pj79gq-5"
36
+ })([""]);
37
+ export var StyledSheetFooter = /*#__PURE__*/styled.div.withConfig({
38
+ componentId: "plasma-new-hope__sc-1pj79gq-6"
39
+ })(["width:100%;z-index:1;padding-bottom:1rem;position:", ";bottom:", ";background-color:", ";"], function (_ref6) {
40
+ var isFooterFixed = _ref6.isFooterFixed;
41
+ return isFooterFixed ? 'sticky' : 'static';
42
+ }, function (_ref7) {
43
+ var isFooterFixed = _ref7.isFooterFixed;
44
+ return isFooterFixed ? '0' : 'unset';
45
+ }, function (_ref8) {
46
+ var isFooterFixed = _ref8.isFooterFixed;
47
+ return isFooterFixed ? "var(".concat(tokens.contentBackgroundColor, ")") : 'transparent';
48
+ });
@@ -2,7 +2,8 @@ export var classes = {
2
2
  isClosed: 'is-closed'
3
3
  };
4
4
  export var tokens = {
5
- overlayBackgroundColor: '--plasma-sheet-overlay-background-color',
5
+ sheetOverlayColor: '--plasma-sheet-overlay-color',
6
+ sheetOverlayWithBlurColor: '--plasma-sheet-overlay-with-blur-color',
6
7
  contentBackgroundColor: '--plasma-sheet-content-background-color',
7
8
  handleColor: '--plasma-sheet-handle-background-color'
8
9
  };
@@ -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
  };
@@ -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';
@@ -11,14 +12,37 @@ import { Sheet } from './Sheet';
11
12
  const meta: Meta<typeof Sheet> = {
12
13
  title: 'plasma_b2c/Sheet',
13
14
  decorators: [WithTheme],
14
- parameters: { viewport: { defaultViewport: '860' } },
15
+ args: {
16
+ withBlur: false,
17
+ withOverlay: true,
18
+ withTransition: true,
19
+ hasHandle: true,
20
+ isHeaderFixed: false,
21
+ isFooterFixed: false,
22
+ },
15
23
  };
16
24
 
17
25
  export default meta;
18
26
 
19
- type StorySheetProps = ComponentProps<typeof Sheet>;
27
+ type StorySheetProps = ComponentProps<typeof Sheet> & {
28
+ hasHeader: boolean;
29
+ hasFooter: boolean;
30
+ };
31
+
32
+ const StyledBody = styled(Body1)`
33
+ padding-bottom: 300px;
34
+ `;
20
35
 
21
- const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
36
+ const StoryDefault = ({
37
+ withOverlay,
38
+ withTransition,
39
+ hasFooter,
40
+ isFooterFixed,
41
+ hasHeader,
42
+ isHeaderFixed,
43
+ hasHandle,
44
+ withBlur,
45
+ }: StorySheetProps) => {
22
46
  const [isOpen, setIsOpen] = useState(false);
23
47
 
24
48
  return (
@@ -29,33 +53,26 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
29
53
  withOverlay={withOverlay}
30
54
  withTransition={withTransition}
31
55
  onClose={() => setIsOpen(false)}
56
+ hasHandle={hasHandle}
57
+ withBlur={withBlur}
58
+ contentHeader={
59
+ hasHeader ? (
60
+ <div>
61
+ <h4>header</h4>
62
+ </div>
63
+ ) : undefined
64
+ }
65
+ isHeaderFixed={isHeaderFixed}
66
+ contentFooter={
67
+ hasFooter ? (
68
+ <div>
69
+ <p>footer</p>
70
+ </div>
71
+ ) : undefined
72
+ }
73
+ isFooterFixed={isFooterFixed}
32
74
  >
33
- <p>Вложенные кнопки</p>
34
- <div
35
- style={{
36
- height: '75px',
37
- overflow: 'scroll',
38
- display: 'flex',
39
- flexDirection: 'column',
40
- gap: '1rem',
41
- }}
42
- >
43
- <Button>Кнопка 1</Button>
44
- <Button>Кнопка 2</Button>
45
- <Button>Кнопка 3</Button>
46
- <Button>Кнопка 4</Button>
47
- <Button>Кнопка 5</Button>
48
- <Button>Кнопка 6</Button>
49
- <Button>Кнопка 7</Button>
50
- <Button>Кнопка 8</Button>
51
- </div>
52
- <Body1>
53
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
54
- consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
55
- fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
56
- placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
57
- dolorem labore quaerat vero maxime ab ipsa nihil.
58
- </Body1>
75
+ <StyledBody>body</StyledBody>
59
76
  </Sheet>
60
77
  </>
61
78
  );
@@ -63,8 +80,8 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
63
80
 
64
81
  export const Default: StoryObj<StorySheetProps> = {
65
82
  args: {
66
- withOverlay: true,
67
- withTransition: true,
83
+ hasHeader: true,
84
+ hasFooter: true,
68
85
  },
69
86
  render: (args) => <StoryDefault {...args} />,
70
87
  };
@@ -76,13 +93,13 @@ const StoryWithoutOverlay = () => {
76
93
  <>
77
94
  <Button onClick={() => setIsOpen(true)}>Открыть</Button>
78
95
  <Sheet isOpen={isOpen} withOverlay={false} onClose={() => setIsOpen(false)}>
79
- <Body1>
96
+ <StyledBody>
80
97
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
81
98
  consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
82
99
  fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
83
100
  placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
84
101
  dolorem labore quaerat vero maxime ab ipsa nihil.
85
- </Body1>
102
+ </StyledBody>
86
103
  </Sheet>
87
104
  </>
88
105
  );
@@ -92,7 +109,16 @@ export const WithoutOverlay: StoryObj = {
92
109
  render: () => <StoryWithoutOverlay />,
93
110
  };
94
111
 
95
- const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
112
+ const StoryWithScroll = ({
113
+ withOverlay,
114
+ withTransition,
115
+ hasFooter,
116
+ isFooterFixed,
117
+ hasHeader,
118
+ isHeaderFixed,
119
+ hasHandle,
120
+ withBlur,
121
+ }: StorySheetProps) => {
96
122
  const [isOpen, setIsOpen] = useState(false);
97
123
 
98
124
  return (
@@ -103,6 +129,24 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
103
129
  withOverlay={withOverlay}
104
130
  withTransition={withTransition}
105
131
  onClose={() => setIsOpen(false)}
132
+ hasHandle={hasHandle}
133
+ withBlur={withBlur}
134
+ contentHeader={
135
+ hasHeader ? (
136
+ <div>
137
+ <h4>header</h4>
138
+ </div>
139
+ ) : undefined
140
+ }
141
+ isHeaderFixed={isHeaderFixed}
142
+ contentFooter={
143
+ hasFooter ? (
144
+ <div>
145
+ <p>footer</p>
146
+ </div>
147
+ ) : undefined
148
+ }
149
+ isFooterFixed={isFooterFixed}
106
150
  >
107
151
  <Body1>
108
152
  <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -128,10 +172,23 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
128
172
  };
129
173
 
130
174
  export const WithScroll: StoryObj<StorySheetProps> = {
175
+ args: {
176
+ hasHeader: true,
177
+ hasFooter: true,
178
+ },
131
179
  render: (args) => <StoryWithScroll {...args} />,
132
180
  };
133
181
 
134
- const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
182
+ const StoryWithInsideScroll = ({
183
+ withOverlay,
184
+ withTransition,
185
+ hasFooter,
186
+ isFooterFixed,
187
+ hasHeader,
188
+ isHeaderFixed,
189
+ hasHandle,
190
+ withBlur,
191
+ }: StorySheetProps) => {
135
192
  const [isOpen, setIsOpen] = useState(false);
136
193
 
137
194
  return (
@@ -142,6 +199,24 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
142
199
  withOverlay={withOverlay}
143
200
  withTransition={withTransition}
144
201
  onClose={() => setIsOpen(false)}
202
+ hasHandle={hasHandle}
203
+ withBlur={withBlur}
204
+ contentHeader={
205
+ hasHeader ? (
206
+ <div>
207
+ <h4>header</h4>
208
+ </div>
209
+ ) : undefined
210
+ }
211
+ isHeaderFixed={isHeaderFixed}
212
+ contentFooter={
213
+ hasFooter ? (
214
+ <div>
215
+ <p>footer</p>
216
+ </div>
217
+ ) : undefined
218
+ }
219
+ isFooterFixed={isFooterFixed}
145
220
  >
146
221
  <p>Вложенные кнопки</p>
147
222
  <div
@@ -170,13 +245,22 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
170
245
 
171
246
  export const WithInsideScroll: StoryObj<StorySheetProps> = {
172
247
  args: {
173
- withOverlay: true,
174
- withTransition: true,
248
+ hasHeader: true,
249
+ hasFooter: true,
175
250
  },
176
251
  render: (args) => <StoryWithInsideScroll {...args} />,
177
252
  };
178
253
 
179
- const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
254
+ const StoryWithDoubleScroll = ({
255
+ withOverlay,
256
+ withTransition,
257
+ hasFooter,
258
+ isFooterFixed,
259
+ hasHeader,
260
+ isHeaderFixed,
261
+ hasHandle,
262
+ withBlur,
263
+ }: StorySheetProps) => {
180
264
  const [isOpen, setIsOpen] = useState(false);
181
265
 
182
266
  return (
@@ -187,6 +271,24 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
187
271
  withOverlay={withOverlay}
188
272
  withTransition={withTransition}
189
273
  onClose={() => setIsOpen(false)}
274
+ hasHandle={hasHandle}
275
+ withBlur={withBlur}
276
+ contentHeader={
277
+ hasHeader ? (
278
+ <div>
279
+ <h4>header</h4>
280
+ </div>
281
+ ) : undefined
282
+ }
283
+ isHeaderFixed={isHeaderFixed}
284
+ contentFooter={
285
+ hasFooter ? (
286
+ <div>
287
+ <p>footer</p>
288
+ </div>
289
+ ) : undefined
290
+ }
291
+ isFooterFixed={isFooterFixed}
190
292
  >
191
293
  <Body1>
192
294
  <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -232,8 +334,8 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
232
334
 
233
335
  export const WithDoubleScroll: StoryObj<StorySheetProps> = {
234
336
  args: {
235
- withOverlay: true,
236
- withTransition: true,
337
+ hasHeader: true,
338
+ hasFooter: true,
237
339
  },
238
340
  render: (args) => <StoryWithDoubleScroll {...args} />,
239
341
  };
@@ -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
  };
@@ -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';
@@ -16,9 +17,25 @@ const meta: Meta<typeof Sheet> = {
16
17
 
17
18
  export default meta;
18
19
 
19
- type StorySheetProps = ComponentProps<typeof Sheet>;
20
+ type StorySheetProps = ComponentProps<typeof Sheet> & {
21
+ hasHeader: boolean;
22
+ hasFooter: boolean;
23
+ };
24
+
25
+ const StyledBody = styled(Body1)`
26
+ padding-bottom: 300px;
27
+ `;
20
28
 
21
- const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
29
+ const StoryDefault = ({
30
+ withOverlay,
31
+ withTransition,
32
+ hasFooter,
33
+ isFooterFixed,
34
+ hasHeader,
35
+ isHeaderFixed,
36
+ hasHandle,
37
+ withBlur,
38
+ }: StorySheetProps) => {
22
39
  const [isOpen, setIsOpen] = useState(false);
23
40
 
24
41
  return (
@@ -29,33 +46,26 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
29
46
  withOverlay={withOverlay}
30
47
  withTransition={withTransition}
31
48
  onClose={() => setIsOpen(false)}
49
+ hasHandle={hasHandle}
50
+ withBlur={withBlur}
51
+ contentHeader={
52
+ hasHeader ? (
53
+ <div>
54
+ <h4>header</h4>
55
+ </div>
56
+ ) : undefined
57
+ }
58
+ isHeaderFixed={isHeaderFixed}
59
+ contentFooter={
60
+ hasFooter ? (
61
+ <div>
62
+ <p>footer</p>
63
+ </div>
64
+ ) : undefined
65
+ }
66
+ isFooterFixed={isFooterFixed}
32
67
  >
33
- <p>Вложенные кнопки</p>
34
- <div
35
- style={{
36
- height: '75px',
37
- overflow: 'scroll',
38
- display: 'flex',
39
- flexDirection: 'column',
40
- gap: '1rem',
41
- }}
42
- >
43
- <Button>Кнопка 1</Button>
44
- <Button>Кнопка 2</Button>
45
- <Button>Кнопка 3</Button>
46
- <Button>Кнопка 4</Button>
47
- <Button>Кнопка 5</Button>
48
- <Button>Кнопка 6</Button>
49
- <Button>Кнопка 7</Button>
50
- <Button>Кнопка 8</Button>
51
- </div>
52
- <Body1>
53
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
54
- consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
55
- fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
56
- placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
57
- dolorem labore quaerat vero maxime ab ipsa nihil.
58
- </Body1>
68
+ <StyledBody>body</StyledBody>
59
69
  </Sheet>
60
70
  </>
61
71
  );
@@ -63,8 +73,8 @@ const StoryDefault = ({ withOverlay, withTransition }: StorySheetProps) => {
63
73
 
64
74
  export const Default: StoryObj<StorySheetProps> = {
65
75
  args: {
66
- withOverlay: true,
67
- withTransition: true,
76
+ hasHeader: true,
77
+ hasFooter: true,
68
78
  },
69
79
  render: (args) => <StoryDefault {...args} />,
70
80
  };
@@ -76,13 +86,13 @@ const StoryWithoutOverlay = () => {
76
86
  <>
77
87
  <Button onClick={() => setIsOpen(true)}>Открыть</Button>
78
88
  <Sheet isOpen={isOpen} withOverlay={false} onClose={() => setIsOpen(false)}>
79
- <Body1>
89
+ <StyledBody>
80
90
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
81
91
  consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
82
92
  fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
83
93
  placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
84
94
  dolorem labore quaerat vero maxime ab ipsa nihil.
85
- </Body1>
95
+ </StyledBody>
86
96
  </Sheet>
87
97
  </>
88
98
  );
@@ -92,7 +102,16 @@ export const WithoutOverlay: StoryObj = {
92
102
  render: () => <StoryWithoutOverlay />,
93
103
  };
94
104
 
95
- const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
105
+ const StoryWithScroll = ({
106
+ withOverlay,
107
+ withTransition,
108
+ hasFooter,
109
+ isFooterFixed,
110
+ hasHeader,
111
+ isHeaderFixed,
112
+ hasHandle,
113
+ withBlur,
114
+ }: StorySheetProps) => {
96
115
  const [isOpen, setIsOpen] = useState(false);
97
116
 
98
117
  return (
@@ -103,6 +122,24 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
103
122
  withOverlay={withOverlay}
104
123
  withTransition={withTransition}
105
124
  onClose={() => setIsOpen(false)}
125
+ hasHandle={hasHandle}
126
+ withBlur={withBlur}
127
+ contentHeader={
128
+ hasHeader ? (
129
+ <div>
130
+ <h4>header</h4>
131
+ </div>
132
+ ) : undefined
133
+ }
134
+ isHeaderFixed={isHeaderFixed}
135
+ contentFooter={
136
+ hasFooter ? (
137
+ <div>
138
+ <p>footer</p>
139
+ </div>
140
+ ) : undefined
141
+ }
142
+ isFooterFixed={isFooterFixed}
106
143
  >
107
144
  <Body1>
108
145
  <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -128,10 +165,23 @@ const StoryWithScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
128
165
  };
129
166
 
130
167
  export const WithScroll: StoryObj<StorySheetProps> = {
168
+ args: {
169
+ hasHeader: true,
170
+ hasFooter: true,
171
+ },
131
172
  render: (args) => <StoryWithScroll {...args} />,
132
173
  };
133
174
 
134
- const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
175
+ const StoryWithInsideScroll = ({
176
+ withOverlay,
177
+ withTransition,
178
+ hasFooter,
179
+ isFooterFixed,
180
+ hasHeader,
181
+ isHeaderFixed,
182
+ hasHandle,
183
+ withBlur,
184
+ }: StorySheetProps) => {
135
185
  const [isOpen, setIsOpen] = useState(false);
136
186
 
137
187
  return (
@@ -142,6 +192,24 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
142
192
  withOverlay={withOverlay}
143
193
  withTransition={withTransition}
144
194
  onClose={() => setIsOpen(false)}
195
+ hasHandle={hasHandle}
196
+ withBlur={withBlur}
197
+ contentHeader={
198
+ hasHeader ? (
199
+ <div>
200
+ <h4>header</h4>
201
+ </div>
202
+ ) : undefined
203
+ }
204
+ isHeaderFixed={isHeaderFixed}
205
+ contentFooter={
206
+ hasFooter ? (
207
+ <div>
208
+ <p>footer</p>
209
+ </div>
210
+ ) : undefined
211
+ }
212
+ isFooterFixed={isFooterFixed}
145
213
  >
146
214
  <p>Вложенные кнопки</p>
147
215
  <div
@@ -170,13 +238,22 @@ const StoryWithInsideScroll = ({ withOverlay, withTransition }: StorySheetProps)
170
238
 
171
239
  export const WithInsideScroll: StoryObj<StorySheetProps> = {
172
240
  args: {
173
- withOverlay: true,
174
- withTransition: true,
241
+ hasHeader: true,
242
+ hasFooter: true,
175
243
  },
176
244
  render: (args) => <StoryWithInsideScroll {...args} />,
177
245
  };
178
246
 
179
- const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps) => {
247
+ const StoryWithDoubleScroll = ({
248
+ withOverlay,
249
+ withTransition,
250
+ hasFooter,
251
+ isFooterFixed,
252
+ hasHeader,
253
+ isHeaderFixed,
254
+ hasHandle,
255
+ withBlur,
256
+ }: StorySheetProps) => {
180
257
  const [isOpen, setIsOpen] = useState(false);
181
258
 
182
259
  return (
@@ -187,6 +264,24 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
187
264
  withOverlay={withOverlay}
188
265
  withTransition={withTransition}
189
266
  onClose={() => setIsOpen(false)}
267
+ hasHandle={hasHandle}
268
+ withBlur={withBlur}
269
+ contentHeader={
270
+ hasHeader ? (
271
+ <div>
272
+ <h4>header</h4>
273
+ </div>
274
+ ) : undefined
275
+ }
276
+ isHeaderFixed={isHeaderFixed}
277
+ contentFooter={
278
+ hasFooter ? (
279
+ <div>
280
+ <p>footer</p>
281
+ </div>
282
+ ) : undefined
283
+ }
284
+ isFooterFixed={isFooterFixed}
190
285
  >
191
286
  <Body1>
192
287
  <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
@@ -232,8 +327,8 @@ const StoryWithDoubleScroll = ({ withOverlay, withTransition }: StorySheetProps)
232
327
 
233
328
  export const WithDoubleScroll: StoryObj<StorySheetProps> = {
234
329
  args: {
235
- withOverlay: true,
236
- withTransition: true,
330
+ hasHeader: true,
331
+ hasFooter: true,
237
332
  },
238
333
  render: (args) => <StoryWithDoubleScroll {...args} />,
239
334
  };
@@ -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"}