Skip to content

Commit 169f5ab

Browse files
maxime-gendronmaxime-gendron
committed
fix(SideDrawer): Add react state to stories
1 parent 0504818 commit 169f5ab

File tree

2 files changed

+81
-71
lines changed

2 files changed

+81
-71
lines changed

‎packages/react/src/components/global-navigation/global-navigation.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ const ShowMoreMenu = styled.ul<{ open?: boolean }>`
6464
& > :first-child a {
6565
border-radius: var(--border-radius) var(--border-radius) 0 0;
6666
}
67+
6768
& > :last-child a {
6869
border-radius: 0 0 var(--border-radius) var(--border-radius);
6970
}

‎packages/storybook/stories/side-drawer.stories.tsx

+80-71
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Button, SideDrawer } from '@equisoft/design-elements-react';
2-
import { forceReRender, Story } from '@storybook/react';
3-
import React from 'react';
2+
import { Story } from '@storybook/react';
3+
import React, { useState } from 'react';
44
import styled from 'styled-components';
55

66
const Box = styled.div`
@@ -19,81 +19,90 @@ export default {
1919
component: SideDrawer,
2020
};
2121

22-
type DrawerType = 'normal' | 'withNestedDrawer' | 'nested' | 'scrollable' | 'left' | 'variableWidth';
22+
export const Normal: Story = () => {
23+
const [isDrawerOpen, setDrawerOpen] = useState(false);
2324

24-
const allDrawers = {
25-
normal: false,
26-
withNestedDrawer: false,
27-
nested: false,
28-
scrollable: false,
29-
left: false,
30-
variableWidth: false,
25+
return (
26+
<>
27+
<SideDrawer open={isDrawerOpen}>
28+
<h3>Drawer Content</h3>
29+
<Button label="Close drawer" buttonType="primary" onClick={() => setDrawerOpen(false)} />
30+
</SideDrawer>
31+
<Button label="Click to open side-drawer" buttonType="primary" onClick={() => setDrawerOpen(true)} />
32+
</>
33+
);
3134
};
3235

33-
function toggleDrawer(drawer: DrawerType): void {
34-
allDrawers[drawer] = !allDrawers[drawer];
35-
forceReRender();
36-
}
36+
export const WithNestedDrawer: Story = () => {
37+
const [isDrawerOpen, setDrawerOpen] = useState(false);
38+
const [isNestedDrawerOpen, setNestedDrawerOpen] = useState(false);
3739

38-
export const Normal: Story = () => (
39-
<>
40-
<SideDrawer open={allDrawers.normal}>
41-
<h3>Drawer Content</h3>
42-
<Button label="Close drawer" buttonType="primary" onClick={() => toggleDrawer('normal')} />
43-
</SideDrawer>
44-
<Button label="Click to open side-drawer" buttonType="primary" onClick={() => toggleDrawer('normal')} />
45-
</>
46-
);
40+
return (
41+
<>
42+
<SideDrawer open={isDrawerOpen}>
43+
<h3>Drawer Content</h3>
44+
<SideDrawer open={isNestedDrawerOpen} nested>
45+
<h3>Nested Drawer Content</h3>
46+
<Button label="Close drawer" buttonType="primary" onClick={() => setNestedDrawerOpen(false)} />
47+
</SideDrawer>
48+
<Button label="Open nested drawer" buttonType="primary" onClick={() => setNestedDrawerOpen(true)} />
49+
<br />
50+
<Button label="Close drawer" buttonType="primary" onClick={() => setDrawerOpen(false)} />
51+
</SideDrawer>
52+
<Button
53+
label="Click to open side-drawer"
54+
buttonType="primary"
55+
onClick={() => setDrawerOpen(true)}
56+
/>
57+
</>
58+
);
59+
};
4760

48-
export const WithNestedDrawer: Story = () => (
49-
<>
50-
<SideDrawer open={allDrawers.withNestedDrawer}>
51-
<h3>Drawer Content</h3>
52-
<SideDrawer open={allDrawers.nested} nested>
53-
<h3>Nested Drawer Content</h3>
54-
<Button label="Close drawer" buttonType="primary" onClick={() => toggleDrawer('nested')} />
61+
export const Scrollable: Story = () => {
62+
const [isDrawerOpen, setDrawerOpen] = useState(false);
63+
64+
return (
65+
<>
66+
<SideDrawer open={isDrawerOpen}>
67+
<h3>Drawer with scrollable content</h3>
68+
<div>
69+
{[...Array(6).keys()].map((el) => <Box key={el} />)}
70+
</div>
71+
<Button label="Close drawer" buttonType="primary" onClick={() => setDrawerOpen(false)} />
5572
</SideDrawer>
56-
<Button label="Open nested drawer" buttonType="primary" onClick={() => toggleDrawer('nested')} />
57-
<br />
58-
<Button label="Close drawer" buttonType="primary" onClick={() => toggleDrawer('withNestedDrawer')} />
59-
</SideDrawer>
60-
<Button
61-
label="Click to open side-drawer"
62-
buttonType="primary"
63-
onClick={() => toggleDrawer('withNestedDrawer')}
64-
/>
65-
</>
66-
);
73+
<Button label="Click to open side-drawer" buttonType="primary" onClick={() => setDrawerOpen(true)} />
74+
</>
75+
);
76+
};
6777

68-
export const Scrollable: Story = () => (
69-
<>
70-
<SideDrawer open={allDrawers.scrollable}>
71-
<h3>Drawer with scrollable content</h3>
72-
<div>
73-
{[...Array(6).keys()].map((el) => <Box key={el} />)}
74-
</div>
75-
<Button label="Close drawer" buttonType="primary" onClick={() => toggleDrawer('scrollable')} />
76-
</SideDrawer>
77-
<Button label="Click to open side-drawer" buttonType="primary" onClick={() => toggleDrawer('scrollable')} />
78-
</>
79-
);
78+
export const LeftOrigin: Story = () => {
79+
const [isDrawerOpen, setDrawerOpen] = useState(false);
8080

81-
export const LeftOrigin: Story = () => (
82-
<>
83-
<SideDrawer open={allDrawers.left} drawerOrigin="left">
84-
<h3>Drawer Content</h3>
85-
<Button label="Close drawer" buttonType="primary" onClick={() => toggleDrawer('left')} />
86-
</SideDrawer>
87-
<Button label="Click to open side-drawer" buttonType="primary" onClick={() => toggleDrawer('left')} />
88-
</>
89-
);
81+
return (
82+
<>
83+
<SideDrawer open={isDrawerOpen} drawerOrigin="left">
84+
<h3>Drawer Content</h3>
85+
<Button label="Close drawer" buttonType="primary" onClick={() => setDrawerOpen(false)} />
86+
</SideDrawer>
87+
<Button label="Click to open side-drawer" buttonType="primary" onClick={() => setDrawerOpen(true)} />
88+
</>
89+
);
90+
};
91+
92+
export const VariableWidth: Story = () => {
93+
const [isDrawerOpen, setDrawerOpen] = useState(false);
9094

91-
export const VariableWidth: Story = () => (
92-
<>
93-
<SideDrawer open={allDrawers.variableWidth} width="50%">
94-
<h3>Drawer content</h3>
95-
<Button label="Close drawer" buttonType="primary" onClick={() => toggleDrawer('variableWidth')} />
96-
</SideDrawer>
97-
<Button label="Click to open side-drawer" buttonType="primary" onClick={() => toggleDrawer('variableWidth')} />
98-
</>
99-
);
95+
return (
96+
<>
97+
<SideDrawer open={isDrawerOpen} width="50%">
98+
<h3>Drawer content</h3>
99+
<Button label="Close drawer" buttonType="primary" onClick={() => setDrawerOpen(false)} />
100+
</SideDrawer>
101+
<Button
102+
label="Click to open side-drawer"
103+
buttonType="primary"
104+
onClick={() => setDrawerOpen(true)}
105+
/>
106+
</>
107+
);
108+
};

0 commit comments

Comments
 (0)