@salutejs/plasma-new-hope 0.88.0-canary.1225.9412763701.0 → 0.88.0-canary.1225.9418004112.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Sheet/Sheet.css +6 -6
- package/cjs/components/Sheet/Sheet.styles.js +1 -1
- package/cjs/components/Sheet/Sheet.styles.js.map +1 -1
- package/cjs/components/Sheet/{Sheet.styles_kdjr5m.css → Sheet.styles_1g0zo91.css} +1 -1
- package/cjs/index.css +6 -6
- package/es/components/Sheet/Sheet.css +6 -6
- package/es/components/Sheet/Sheet.styles.js +1 -1
- package/es/components/Sheet/Sheet.styles.js.map +1 -1
- package/es/components/Sheet/{Sheet.styles_kdjr5m.css → Sheet.styles_1g0zo91.css} +1 -1
- package/es/index.css +6 -6
- package/package.json +2 -2
- package/styled-components/cjs/components/Sheet/Sheet.styles.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +16 -72
- package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.stories.tsx +16 -72
- package/styled-components/es/components/Sheet/Sheet.styles.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +16 -72
- package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.stories.tsx +16 -72
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
.Overlay_styles_cxej3y_s1afr8la__70d4dd9a{position:fixed;inset:0;z-index:var(--s1afr8la-0);--plasma_private-overlay-background-color:var(--s1afr8la-1);--plasma_private-overlay-backdrop-filter:var(--s1afr8la-2);background:var(--s1afr8la-3);-webkit-backdrop-filter:var(--s1afr8la-4);backdrop-filter:var(--s1afr8la-4);cursor:var(--s1afr8la-5);}
|
|
2
2
|
|
|
3
|
-
.
|
|
4
|
-
.
|
|
5
|
-
.
|
|
6
|
-
.
|
|
7
|
-
.
|
|
3
|
+
.Sheet_styles_1g0zo91_sah7qw3__7dc8b2ed{position:fixed;top:0;bottom:0;left:0;right:0;opacity:1;-webkit-transition:var(--sah7qw3-0);transition:var(--sah7qw3-0);z-index:1000;}.Sheet_styles_1g0zo91_sah7qw3__7dc8b2ed.Sheet_styles_1g0zo91_isClosed__7dc8b2ed{opacity:0;visibility:hidden;}
|
|
4
|
+
.Sheet_styles_1g0zo91_shg69gz__7dc8b2ed{position:absolute;left:0;bottom:0;width:100%;max-height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-transition:var(--shg69gz-0);transition:var(--shg69gz-0);}.Sheet_styles_1g0zo91_shg69gz__7dc8b2ed.Sheet_styles_1g0zo91_isClosed__7dc8b2ed{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);}
|
|
5
|
+
.Sheet_styles_1g0zo91_s1cdpbaw__7dc8b2ed{width:3rem;padding:1.75rem 0;margin:-1.5rem 0;opacity:0.65;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}.Sheet_styles_1g0zo91_s1cdpbaw__7dc8b2ed::before{content:'';display:block;border-radius:0.625rem;background-color:var(--plasma-sheet-handle-background-color);height:0.25rem;}
|
|
6
|
+
.Sheet_styles_1g0zo91_sjx120m__7dc8b2ed{border-radius:1.5rem 1.5rem 0 0;background-color:var(--plasma-sheet-content-background-color);padding-left:1rem;padding-right:1rem;padding-top:var(--sjx120m-0);padding-bottom:var(--sjx120m-1);max-height:100%;overflow:auto;overscroll-behavior:contain;}.Sheet_styles_1g0zo91_sjx120m__7dc8b2ed::-webkit-scrollbar{display:none;}
|
|
7
|
+
.Sheet_styles_1g0zo91_s1f8rwx6__7dc8b2ed{width:100%;z-index:1;padding-top:1rem;position:var(--s1f8rwx6-0);top:var(--s1f8rwx6-1);background-color:var(--s1f8rwx6-2);}
|
|
8
8
|
|
|
9
|
-
.
|
|
9
|
+
.Sheet_styles_1g0zo91_s1jdcq0t__7dc8b2ed{width:100%;z-index:1;padding-bottom:1rem;position:var(--s1jdcq0t-0);bottom:var(--s1jdcq0t-1);background-color:var(--s1jdcq0t-2);}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sheet.styles.js","sources":["../../../src/components/Sheet/Sheet.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { tokens, classes } from './Sheet.tokens';\nimport { CommonProps } from './Sheet.types';\nimport { handleTransition } from './utils/handleTransition';\n\nexport const StyledWrapper = styled.div<CommonProps>`\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 1;\n transition: ${handleTransition('all 0.5s 0.1s')};\n z-index: 1000;\n\n &.${String(classes.isClosed)} {\n opacity: 0;\n visibility: hidden;\n }\n`;\n\nexport const StyledContentWrapper = styled.div<CommonProps>`\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n max-height: 100%;\n z-index: 1;\n\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n\n transition: ${handleTransition('transform 0.5s')};\n\n &.${String(classes.isClosed)} {\n transform: translateY(100%);\n }\n`;\n\nexport const StyledSheetHandle = styled.div`\n width:
|
|
1
|
+
{"version":3,"file":"Sheet.styles.js","sources":["../../../src/components/Sheet/Sheet.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { tokens, classes } from './Sheet.tokens';\nimport { CommonProps } from './Sheet.types';\nimport { handleTransition } from './utils/handleTransition';\n\nexport const StyledWrapper = styled.div<CommonProps>`\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 1;\n transition: ${handleTransition('all 0.5s 0.1s')};\n z-index: 1000;\n\n &.${String(classes.isClosed)} {\n opacity: 0;\n visibility: hidden;\n }\n`;\n\nexport const StyledContentWrapper = styled.div<CommonProps>`\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n max-height: 100%;\n z-index: 1;\n\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n\n transition: ${handleTransition('transform 0.5s')};\n\n &.${String(classes.isClosed)} {\n transform: translateY(100%);\n }\n`;\n\nexport const StyledSheetHandle = styled.div`\n width: 3rem;\n padding: 1.75rem 0;\n margin: -1.5rem 0;\n opacity: 0.65;\n align-self: center;\n\n &::before {\n content: '';\n display: block;\n border-radius: 0.625rem;\n background-color: var(${tokens.handleColor});\n height: 0.25rem;\n }\n`;\n\nexport const StyledSheetContent = styled.div<{ hasHeader?: boolean; hasFooter?: boolean }>`\n border-radius: 1.5rem 1.5rem 0 0;\n background-color: var(${tokens.contentBackgroundColor});\n padding-left: 1rem;\n padding-right: 1rem;\n padding-top: ${({ hasHeader }) => (hasHeader ? 'unset' : '1rem')};\n padding-bottom: ${({ hasFooter }) => (hasFooter ? 'unset' : '1rem')};\n\n max-height: 100%;\n overflow: auto;\n overscroll-behavior: contain;\n\n &::-webkit-scrollbar {\n display: none;\n }\n`;\n\nexport const StyledSheetHeader = styled.div<{ isHeaderFixed?: boolean }>`\n width: 100%;\n z-index: 1;\n padding-top: 1rem;\n position: ${({ isHeaderFixed }) => (isHeaderFixed ? 'sticky' : 'static')};\n top: ${({ isHeaderFixed }) => (isHeaderFixed ? '0' : 'unset')};\n background-color: ${({ isHeaderFixed }) =>\n isHeaderFixed ? `var(${tokens.contentBackgroundColor})` : 'transparent'};\n`;\n\nexport const StyledSheetBody = styled.div``;\n\nexport const StyledSheetFooter = styled.div<{ isFooterFixed?: boolean }>`\n width: 100%;\n z-index: 1;\n padding-bottom: 1rem;\n position: ${({ isFooterFixed }) => (isFooterFixed ? 'sticky' : 'static')};\n bottom: ${({ isFooterFixed }) => (isFooterFixed ? '0' : 'unset')};\n background-color: ${({ isFooterFixed }) =>\n isFooterFixed ? `var(${tokens.contentBackgroundColor})` : 'transparent'};\n`;\n"],"names":["_exp","handleTransition","StyledWrapper","styled","name","class","propsAsIs","vars","_exp3","StyledContentWrapper","StyledSheetHandle","_exp7","_ref","hasHeader","_exp8","_ref2","hasFooter","StyledSheetContent","_exp9","_ref3","isHeaderFixed","_exp10","_ref4","_exp11","_ref5","concat","tokens","contentBackgroundColor","StyledSheetHeader","StyledSheetBody","_exp12","_ref6","isFooterFixed","_exp13","_ref7","_exp14","_ref8","StyledSheetFooter"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.sah7qw3{position:fixed;top:0;bottom:0;left:0;right:0;opacity:1;-webkit-transition:var(--sah7qw3-0);transition:var(--sah7qw3-0);z-index:1000;}.sah7qw3.is-closed{opacity:0;visibility:hidden;}
|
|
2
2
|
.shg69gz{position:absolute;left:0;bottom:0;width:100%;max-height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-transition:var(--shg69gz-0);transition:var(--shg69gz-0);}.shg69gz.is-closed{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);}
|
|
3
|
-
.s1cdpbaw{width:
|
|
3
|
+
.s1cdpbaw{width:3rem;padding:1.75rem 0;margin:-1.5rem 0;opacity:0.65;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}.s1cdpbaw::before{content:'';display:block;border-radius:0.625rem;background-color:var(--plasma-sheet-handle-background-color);height:0.25rem;}
|
|
4
4
|
.sjx120m{border-radius:1.5rem 1.5rem 0 0;background-color:var(--plasma-sheet-content-background-color);padding-left:1rem;padding-right:1rem;padding-top:var(--sjx120m-0);padding-bottom:var(--sjx120m-1);max-height:100%;overflow:auto;overscroll-behavior:contain;}.sjx120m::-webkit-scrollbar{display:none;}
|
|
5
5
|
.s1f8rwx6{width:100%;z-index:1;padding-top:1rem;position:var(--s1f8rwx6-0);top:var(--s1f8rwx6-1);background-color:var(--s1f8rwx6-2);}
|
|
6
6
|
|
package/cjs/index.css
CHANGED
|
@@ -538,13 +538,13 @@
|
|
|
538
538
|
|
|
539
539
|
.ToolbarDivider_styles_1ypqhb1_mcdkovg__81732880{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;--plasma-divider-background:var(--plasma-toolbar-divider-color);--plasma-divider-border-radius:var(--plasma-toolbar-divider-border-radius);}
|
|
540
540
|
|
|
541
|
-
.
|
|
542
|
-
.
|
|
543
|
-
.
|
|
544
|
-
.
|
|
545
|
-
.
|
|
541
|
+
.Sheet_styles_1g0zo91_sah7qw3__7dc8b2ed{position:fixed;top:0;bottom:0;left:0;right:0;opacity:1;-webkit-transition:var(--sah7qw3-0);transition:var(--sah7qw3-0);z-index:1000;}.Sheet_styles_1g0zo91_sah7qw3__7dc8b2ed.Sheet_styles_1g0zo91_isClosed__7dc8b2ed{opacity:0;visibility:hidden;}
|
|
542
|
+
.Sheet_styles_1g0zo91_shg69gz__7dc8b2ed{position:absolute;left:0;bottom:0;width:100%;max-height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-transition:var(--shg69gz-0);transition:var(--shg69gz-0);}.Sheet_styles_1g0zo91_shg69gz__7dc8b2ed.Sheet_styles_1g0zo91_isClosed__7dc8b2ed{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);}
|
|
543
|
+
.Sheet_styles_1g0zo91_s1cdpbaw__7dc8b2ed{width:3rem;padding:1.75rem 0;margin:-1.5rem 0;opacity:0.65;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}.Sheet_styles_1g0zo91_s1cdpbaw__7dc8b2ed::before{content:'';display:block;border-radius:0.625rem;background-color:var(--plasma-sheet-handle-background-color);height:0.25rem;}
|
|
544
|
+
.Sheet_styles_1g0zo91_sjx120m__7dc8b2ed{border-radius:1.5rem 1.5rem 0 0;background-color:var(--plasma-sheet-content-background-color);padding-left:1rem;padding-right:1rem;padding-top:var(--sjx120m-0);padding-bottom:var(--sjx120m-1);max-height:100%;overflow:auto;overscroll-behavior:contain;}.Sheet_styles_1g0zo91_sjx120m__7dc8b2ed::-webkit-scrollbar{display:none;}
|
|
545
|
+
.Sheet_styles_1g0zo91_s1f8rwx6__7dc8b2ed{width:100%;z-index:1;padding-top:1rem;position:var(--s1f8rwx6-0);top:var(--s1f8rwx6-1);background-color:var(--s1f8rwx6-2);}
|
|
546
546
|
|
|
547
|
-
.
|
|
547
|
+
.Sheet_styles_1g0zo91_s1jdcq0t__7dc8b2ed{width:100%;z-index:1;padding-bottom:1rem;position:var(--s1jdcq0t-0);bottom:var(--s1jdcq0t-1);background-color:var(--s1jdcq0t-2);}
|
|
548
548
|
|
|
549
549
|
.SliderBase_styles_7is2ll_s33crq1__0c0959e2{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:var(--plasma-slider-height);}
|
|
550
550
|
.SliderBase_styles_7is2ll_rnaoqfb__0c0959e2{height:100%;}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
.Overlay_styles_cxej3y_s1afr8la__70d4dd9a{position:fixed;inset:0;z-index:var(--s1afr8la-0);--plasma_private-overlay-background-color:var(--s1afr8la-1);--plasma_private-overlay-backdrop-filter:var(--s1afr8la-2);background:var(--s1afr8la-3);-webkit-backdrop-filter:var(--s1afr8la-4);backdrop-filter:var(--s1afr8la-4);cursor:var(--s1afr8la-5);}
|
|
2
2
|
|
|
3
|
-
.
|
|
4
|
-
.
|
|
5
|
-
.
|
|
6
|
-
.
|
|
7
|
-
.
|
|
3
|
+
.Sheet_styles_1g0zo91_sah7qw3__7dc8b2ed{position:fixed;top:0;bottom:0;left:0;right:0;opacity:1;-webkit-transition:var(--sah7qw3-0);transition:var(--sah7qw3-0);z-index:1000;}.Sheet_styles_1g0zo91_sah7qw3__7dc8b2ed.Sheet_styles_1g0zo91_isClosed__7dc8b2ed{opacity:0;visibility:hidden;}
|
|
4
|
+
.Sheet_styles_1g0zo91_shg69gz__7dc8b2ed{position:absolute;left:0;bottom:0;width:100%;max-height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-transition:var(--shg69gz-0);transition:var(--shg69gz-0);}.Sheet_styles_1g0zo91_shg69gz__7dc8b2ed.Sheet_styles_1g0zo91_isClosed__7dc8b2ed{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);}
|
|
5
|
+
.Sheet_styles_1g0zo91_s1cdpbaw__7dc8b2ed{width:3rem;padding:1.75rem 0;margin:-1.5rem 0;opacity:0.65;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}.Sheet_styles_1g0zo91_s1cdpbaw__7dc8b2ed::before{content:'';display:block;border-radius:0.625rem;background-color:var(--plasma-sheet-handle-background-color);height:0.25rem;}
|
|
6
|
+
.Sheet_styles_1g0zo91_sjx120m__7dc8b2ed{border-radius:1.5rem 1.5rem 0 0;background-color:var(--plasma-sheet-content-background-color);padding-left:1rem;padding-right:1rem;padding-top:var(--sjx120m-0);padding-bottom:var(--sjx120m-1);max-height:100%;overflow:auto;overscroll-behavior:contain;}.Sheet_styles_1g0zo91_sjx120m__7dc8b2ed::-webkit-scrollbar{display:none;}
|
|
7
|
+
.Sheet_styles_1g0zo91_s1f8rwx6__7dc8b2ed{width:100%;z-index:1;padding-top:1rem;position:var(--s1f8rwx6-0);top:var(--s1f8rwx6-1);background-color:var(--s1f8rwx6-2);}
|
|
8
8
|
|
|
9
|
-
.
|
|
9
|
+
.Sheet_styles_1g0zo91_s1jdcq0t__7dc8b2ed{width:100%;z-index:1;padding-bottom:1rem;position:var(--s1jdcq0t-0);bottom:var(--s1jdcq0t-1);background-color:var(--s1jdcq0t-2);}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sheet.styles.js","sources":["../../../src/components/Sheet/Sheet.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { tokens, classes } from './Sheet.tokens';\nimport { CommonProps } from './Sheet.types';\nimport { handleTransition } from './utils/handleTransition';\n\nexport const StyledWrapper = styled.div<CommonProps>`\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 1;\n transition: ${handleTransition('all 0.5s 0.1s')};\n z-index: 1000;\n\n &.${String(classes.isClosed)} {\n opacity: 0;\n visibility: hidden;\n }\n`;\n\nexport const StyledContentWrapper = styled.div<CommonProps>`\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n max-height: 100%;\n z-index: 1;\n\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n\n transition: ${handleTransition('transform 0.5s')};\n\n &.${String(classes.isClosed)} {\n transform: translateY(100%);\n }\n`;\n\nexport const StyledSheetHandle = styled.div`\n width:
|
|
1
|
+
{"version":3,"file":"Sheet.styles.js","sources":["../../../src/components/Sheet/Sheet.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { tokens, classes } from './Sheet.tokens';\nimport { CommonProps } from './Sheet.types';\nimport { handleTransition } from './utils/handleTransition';\n\nexport const StyledWrapper = styled.div<CommonProps>`\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 1;\n transition: ${handleTransition('all 0.5s 0.1s')};\n z-index: 1000;\n\n &.${String(classes.isClosed)} {\n opacity: 0;\n visibility: hidden;\n }\n`;\n\nexport const StyledContentWrapper = styled.div<CommonProps>`\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n max-height: 100%;\n z-index: 1;\n\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n\n transition: ${handleTransition('transform 0.5s')};\n\n &.${String(classes.isClosed)} {\n transform: translateY(100%);\n }\n`;\n\nexport const StyledSheetHandle = styled.div`\n width: 3rem;\n padding: 1.75rem 0;\n margin: -1.5rem 0;\n opacity: 0.65;\n align-self: center;\n\n &::before {\n content: '';\n display: block;\n border-radius: 0.625rem;\n background-color: var(${tokens.handleColor});\n height: 0.25rem;\n }\n`;\n\nexport const StyledSheetContent = styled.div<{ hasHeader?: boolean; hasFooter?: boolean }>`\n border-radius: 1.5rem 1.5rem 0 0;\n background-color: var(${tokens.contentBackgroundColor});\n padding-left: 1rem;\n padding-right: 1rem;\n padding-top: ${({ hasHeader }) => (hasHeader ? 'unset' : '1rem')};\n padding-bottom: ${({ hasFooter }) => (hasFooter ? 'unset' : '1rem')};\n\n max-height: 100%;\n overflow: auto;\n overscroll-behavior: contain;\n\n &::-webkit-scrollbar {\n display: none;\n }\n`;\n\nexport const StyledSheetHeader = styled.div<{ isHeaderFixed?: boolean }>`\n width: 100%;\n z-index: 1;\n padding-top: 1rem;\n position: ${({ isHeaderFixed }) => (isHeaderFixed ? 'sticky' : 'static')};\n top: ${({ isHeaderFixed }) => (isHeaderFixed ? '0' : 'unset')};\n background-color: ${({ isHeaderFixed }) =>\n isHeaderFixed ? `var(${tokens.contentBackgroundColor})` : 'transparent'};\n`;\n\nexport const StyledSheetBody = styled.div``;\n\nexport const StyledSheetFooter = styled.div<{ isFooterFixed?: boolean }>`\n width: 100%;\n z-index: 1;\n padding-bottom: 1rem;\n position: ${({ isFooterFixed }) => (isFooterFixed ? 'sticky' : 'static')};\n bottom: ${({ isFooterFixed }) => (isFooterFixed ? '0' : 'unset')};\n background-color: ${({ isFooterFixed }) =>\n isFooterFixed ? `var(${tokens.contentBackgroundColor})` : 'transparent'};\n`;\n"],"names":["_exp","handleTransition","StyledWrapper","styled","name","class","propsAsIs","vars","_exp3","StyledContentWrapper","StyledSheetHandle","_exp7","_ref","hasHeader","_exp8","_ref2","hasFooter","StyledSheetContent","_exp9","_ref3","isHeaderFixed","_exp10","_ref4","_exp11","_ref5","concat","tokens","contentBackgroundColor","StyledSheetHeader","StyledSheetBody","_exp12","_ref6","isFooterFixed","_exp13","_ref7","_exp14","_ref8","StyledSheetFooter"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.sah7qw3{position:fixed;top:0;bottom:0;left:0;right:0;opacity:1;-webkit-transition:var(--sah7qw3-0);transition:var(--sah7qw3-0);z-index:1000;}.sah7qw3.is-closed{opacity:0;visibility:hidden;}
|
|
2
2
|
.shg69gz{position:absolute;left:0;bottom:0;width:100%;max-height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-transition:var(--shg69gz-0);transition:var(--shg69gz-0);}.shg69gz.is-closed{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);}
|
|
3
|
-
.s1cdpbaw{width:
|
|
3
|
+
.s1cdpbaw{width:3rem;padding:1.75rem 0;margin:-1.5rem 0;opacity:0.65;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}.s1cdpbaw::before{content:'';display:block;border-radius:0.625rem;background-color:var(--plasma-sheet-handle-background-color);height:0.25rem;}
|
|
4
4
|
.sjx120m{border-radius:1.5rem 1.5rem 0 0;background-color:var(--plasma-sheet-content-background-color);padding-left:1rem;padding-right:1rem;padding-top:var(--sjx120m-0);padding-bottom:var(--sjx120m-1);max-height:100%;overflow:auto;overscroll-behavior:contain;}.sjx120m::-webkit-scrollbar{display:none;}
|
|
5
5
|
.s1f8rwx6{width:100%;z-index:1;padding-top:1rem;position:var(--s1f8rwx6-0);top:var(--s1f8rwx6-1);background-color:var(--s1f8rwx6-2);}
|
|
6
6
|
|
package/es/index.css
CHANGED
|
@@ -538,13 +538,13 @@
|
|
|
538
538
|
|
|
539
539
|
.ToolbarDivider_styles_1ypqhb1_mcdkovg__81732880{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;--plasma-divider-background:var(--plasma-toolbar-divider-color);--plasma-divider-border-radius:var(--plasma-toolbar-divider-border-radius);}
|
|
540
540
|
|
|
541
|
-
.
|
|
542
|
-
.
|
|
543
|
-
.
|
|
544
|
-
.
|
|
545
|
-
.
|
|
541
|
+
.Sheet_styles_1g0zo91_sah7qw3__7dc8b2ed{position:fixed;top:0;bottom:0;left:0;right:0;opacity:1;-webkit-transition:var(--sah7qw3-0);transition:var(--sah7qw3-0);z-index:1000;}.Sheet_styles_1g0zo91_sah7qw3__7dc8b2ed.Sheet_styles_1g0zo91_isClosed__7dc8b2ed{opacity:0;visibility:hidden;}
|
|
542
|
+
.Sheet_styles_1g0zo91_shg69gz__7dc8b2ed{position:absolute;left:0;bottom:0;width:100%;max-height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-transition:var(--shg69gz-0);transition:var(--shg69gz-0);}.Sheet_styles_1g0zo91_shg69gz__7dc8b2ed.Sheet_styles_1g0zo91_isClosed__7dc8b2ed{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);}
|
|
543
|
+
.Sheet_styles_1g0zo91_s1cdpbaw__7dc8b2ed{width:3rem;padding:1.75rem 0;margin:-1.5rem 0;opacity:0.65;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}.Sheet_styles_1g0zo91_s1cdpbaw__7dc8b2ed::before{content:'';display:block;border-radius:0.625rem;background-color:var(--plasma-sheet-handle-background-color);height:0.25rem;}
|
|
544
|
+
.Sheet_styles_1g0zo91_sjx120m__7dc8b2ed{border-radius:1.5rem 1.5rem 0 0;background-color:var(--plasma-sheet-content-background-color);padding-left:1rem;padding-right:1rem;padding-top:var(--sjx120m-0);padding-bottom:var(--sjx120m-1);max-height:100%;overflow:auto;overscroll-behavior:contain;}.Sheet_styles_1g0zo91_sjx120m__7dc8b2ed::-webkit-scrollbar{display:none;}
|
|
545
|
+
.Sheet_styles_1g0zo91_s1f8rwx6__7dc8b2ed{width:100%;z-index:1;padding-top:1rem;position:var(--s1f8rwx6-0);top:var(--s1f8rwx6-1);background-color:var(--s1f8rwx6-2);}
|
|
546
546
|
|
|
547
|
-
.
|
|
547
|
+
.Sheet_styles_1g0zo91_s1jdcq0t__7dc8b2ed{width:100%;z-index:1;padding-bottom:1rem;position:var(--s1jdcq0t-0);bottom:var(--s1jdcq0t-1);background-color:var(--s1jdcq0t-2);}
|
|
548
548
|
|
|
549
549
|
.SliderBase_styles_7is2ll_s33crq1__0c0959e2{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:var(--plasma-slider-height);}
|
|
550
550
|
.SliderBase_styles_7is2ll_rnaoqfb__0c0959e2{height:100%;}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
|
3
|
-
"version": "0.88.0-canary.1225.
|
|
3
|
+
"version": "0.88.0-canary.1225.9418004112.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": "
|
|
108
|
+
"gitHead": "c5730aac653285ffaf9256ade17715f4a25a0f36"
|
|
109
109
|
}
|
|
@@ -16,7 +16,7 @@ var StyledContentWrapper = exports.StyledContentWrapper = /*#__PURE__*/_styledCo
|
|
|
16
16
|
})(["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__*/(0, _handleTransition.handleTransition)('transform 0.5s'), /*#__PURE__*/String(_Sheet.classes.isClosed));
|
|
17
17
|
var StyledSheetHandle = exports.StyledSheetHandle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
18
18
|
componentId: "plasma-new-hope__sc-1pj79gq-2"
|
|
19
|
-
})(["width:
|
|
19
|
+
})(["width:3rem;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;}"], _Sheet.tokens.handleColor);
|
|
20
20
|
var StyledSheetContent = exports.StyledSheetContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
21
21
|
componentId: "plasma-new-hope__sc-1pj79gq-3"
|
|
22
22
|
})(["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;}"], _Sheet.tokens.contentBackgroundColor, function (_ref) {
|
|
@@ -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
|
-
<
|
|
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
|
-
<
|
|
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
|
-
<
|
|
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
|
-
</
|
|
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
|
-
<
|
|
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
|
-
<
|
|
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
|
-
<
|
|
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
|
}
|
|
@@ -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
|
-
<
|
|
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
|
-
<
|
|
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
|
-
<
|
|
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
|
-
</
|
|
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
|
-
<
|
|
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
|
-
<
|
|
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
|
-
<
|
|
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
|
}
|
|
@@ -9,7 +9,7 @@ export var StyledContentWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
|
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
10
|
export var StyledSheetHandle = /*#__PURE__*/styled.div.withConfig({
|
|
11
11
|
componentId: "plasma-new-hope__sc-1pj79gq-2"
|
|
12
|
-
})(["width:
|
|
12
|
+
})(["width:3rem;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);
|
|
13
13
|
export var StyledSheetContent = /*#__PURE__*/styled.div.withConfig({
|
|
14
14
|
componentId: "plasma-new-hope__sc-1pj79gq-3"
|
|
15
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) {
|
|
@@ -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
|
-
<
|
|
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
|
-
<
|
|
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
|
-
<
|
|
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
|
-
</
|
|
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
|
-
<
|
|
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
|
-
<
|
|
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
|
-
<
|
|
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
|
}
|
|
@@ -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
|
-
<
|
|
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
|
-
<
|
|
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
|
-
<
|
|
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
|
-
</
|
|
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
|
-
<
|
|
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
|
-
<
|
|
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
|
-
<
|
|
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
|
}
|