WEB-2113 layout with scrollable area

Telefonica · Dec 18, 2024 · 5cc29b3 · 5cc29b3
1 parent e3bba8b
commit 5cc29b3
Show file tree

Hide file tree

Showing 3 changed files with 202 additions and 54 deletions.
diff --git a/src/__stories__/drawer-story.tsx b/src/__stories__/drawer-story.tsx
@@ -3,6 +3,7 @@ import Drawer from '../drawer';
 import {Placeholder} from '../placeholder';
 import Stack from '../stack';
 import {ButtonPrimary} from '../button';
+import {Text3} from '../text';
 
 export default {
     title: 'Components/Modals/Drawer',
@@ -13,10 +14,21 @@ type Args = {
     subtitle: string;
     description: string;
     contentLength: number;
+    onDismissHandler: boolean;
+    showButton: boolean;
+    showSecondaryButton: boolean;
+    showButtonLink: boolean;
 };
 
-export const Default = ({title, subtitle, description, contentLength}: Args): JSX.Element => {
+export const Default = ({
+    title,
+    subtitle,
+    description,
+    contentLength,
+    onDismissHandler,
+}: Args): JSX.Element => {
     const [isOpen, setIsOpen] = React.useState(false);
+    const [result, setResult] = React.useState('');
     const content = (
         <Stack space={16}>
             {Array.from({length: contentLength}).map((_, index) => (
@@ -27,15 +39,20 @@ export const Default = ({title, subtitle, description, contentLength}: Args): JS
 
     return (
         <>
-            <ButtonPrimary onPress={() => setIsOpen(true)}>Open Drawer</ButtonPrimary>
+            <Stack space={16}>
+                <ButtonPrimary onPress={() => setIsOpen(true)}>Open Drawer</ButtonPrimary>
+                <Text3 regular>Result: {result}</Text3>
+            </Stack>
             {isOpen && (
                 <Drawer
                     title={title}
                     subtitle={subtitle}
                     description={description}
-                    onClose={() => {
-                        setIsOpen(false);
-                    }}
+                    onClose={() => setIsOpen(false)}
+                    onDismiss={onDismissHandler ? () => setResult('dismiss') : undefined}
+                    button={{text: 'Primary', onPress: () => setResult('primary')}}
+                    secondaryButton={{text: 'Secondary', onPress: () => setResult('secondary')}}
+                    buttonLink={{text: 'Link', onPress: () => setResult('link')}}
                 >
                     {content}
                 </Drawer>
@@ -51,4 +68,8 @@ Default.args = {
     subtitle: 'Subtitle',
     description: 'Description',
     contentLength: 2,
+    onDismissHandler: true,
+    showButton: true,
+    showSecondaryButton: true,
+    showButtonLink: true,
 };
diff --git a/src/drawer.css.ts b/src/drawer.css.ts
@@ -6,36 +6,66 @@ import {sprinkles} from './sprinkles.css';
 export const ANIMATION_DURATION_MS = 400; // review
 
 export const container = style({
-    background: vars.colors.background,
     position: 'fixed',
+    display: 'flex',
+    paddingBottom: 'env(safe-area-inset-bottom)',
+    background: vars.colors.background,
     top: 0,
     right: 0,
     bottom: 0,
+    overflow: 'hidden',
     '@media': {
-        [mq.tabletOrSmaller]: {
+        [mq.mobile]: {
             left: 0,
             transition: `transform ${ANIMATION_DURATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1)`,
         },
-        [mq.desktopOrBigger]: {
+        [mq.tabletOrBigger]: {
             borderTopLeftRadius: vars.borderRadii.container,
             borderBottomLeftRadius: vars.borderRadii.container,
             transition: `transform ${ANIMATION_DURATION_MS}ms cubic-bezier(0.65, 0, 0.35, 1)`,
         },
     },
 });
 
+export const drawer = style([
+    sprinkles({
+        paddingTop: 40,
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: 1,
+    }),
+    {
+        border: '1px dotted red',
+        '@media': {
+            [mq.tabletOrSmaller]: {
+                paddingBottom: 16 - 8,
+            },
+            [mq.desktopOrBigger]: {
+                paddingBottom: 24 - 8,
+            },
+        },
+    },
+]);
+
+export const scrollableSection = style([
+    sprinkles({
+        flexGrow: 1,
+        overflowY: 'auto',
+    }),
+]);
+
 export const open = style({
     transform: '',
 });
 
 export const closed = style({
     '@media': {
-        [mq.desktopOrBigger]: {
-            transform: 'translateX(100%)',
-        },
-        [mq.tabletOrSmaller]: {
+        [mq.mobile]: {
             transform: 'translateY(100%)',
         },
+        [mq.tabletOrBigger]: {
+            transform: 'translateX(100%)',
+        },
     },
 });
 
@@ -62,7 +92,7 @@ export const overlayOpen = style({
     opacity: 1,
 });
 
-export const closeButton = style({
+export const closeButtonContainer = style({
     position: 'absolute',
     top: 8,
     right: 8,