Skip to content
This repository was archived by the owner on Apr 5, 2022. It is now read-only.

Commit b17b1ea

Browse files
nicolasfontnicolasfont
committed
Add Drawer component
1 parent 90a4138 commit b17b1ea

8 files changed

Lines changed: 167 additions & 45 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
# Upcoming
2+
3+
## New Component
4+
5+
- Add Drawer component
6+
17
# 7.2.1
28

39
## Fix

‎packages/visual-stack-docs/src/containers/Components/Docs/drawer.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.vs-drawer .vs-text {
2+
color: white;
3+
}

‎packages/visual-stack-docs/src/containers/Components/Docs/drawer.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { Box } from '@cjdev/visual-stack';
2+
import { Button } from '@cjdev/visual-stack/lib/components/Button';
3+
import { Panel } from '@cjdev/visual-stack/lib/components/Panel';
4+
import Text from '@cjdev/visual-stack/lib/experimental/Text';
5+
import React, { useState } from 'react';
6+
import { Demo, Snippet } from '../../../components/Demo';
7+
8+
import './drawer.css';
9+
10+
/* s1:start */
11+
import { Drawer } from '@cjdev/visual-stack';
12+
/* s1:end */
13+
14+
export default () => {
15+
/* s2:start */
16+
const [isOpen, setOpen] = useState();
17+
/* s2:end */
18+
19+
return (
20+
<Demo srcFile="/samples/src/containers/Components/Docs/drawer.js">
21+
{snippets => (
22+
<div>
23+
<Panel>
24+
<Box padding="2xl" gap="large">
25+
<Box align="start">
26+
{/* s3:start */}
27+
<Button
28+
type="solid-primary"
29+
onClick={() => setOpen(isOpen => !isOpen)}
30+
>
31+
Toggle
32+
</Button>
33+
{/* s3:end */}
34+
</Box>
35+
<Snippet tag="s1" src={snippets} />
36+
<Snippet tag="s2" src={snippets} />
37+
<Snippet tag="s3" src={snippets} />
38+
<Snippet tag="s4" src={snippets} />
39+
</Box>
40+
</Panel>
41+
{/* s4:start */}
42+
<Drawer isOpen={isOpen}>
43+
<Box
44+
direction="row"
45+
padding="large"
46+
justify="space-between"
47+
align="center"
48+
>
49+
<Text>Hello Drawer</Text>
50+
<Button type="solid-primary">Make Offer</Button>
51+
</Box>
52+
</Drawer>
53+
{/* s4:end */}
54+
</div>
55+
)}
56+
</Demo>
57+
);
58+
};

‎packages/visual-stack-docs/src/containers/Components/Docs/index.js‎

Lines changed: 41 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,34 @@ import {
55
} from '@cjdev/visual-stack/lib/components/PageHeader';
66
import PageContent from '@cjdev/visual-stack/lib/components/PageContent';
77
// 1. add an import for your demo
8+
import AlertDocs from './alert';
9+
import BadgeDocs from './badge';
810
import BlankSlateDocs from './blankslate';
911
import BoxDocs from './box';
10-
import ButtonWithDropdownDocs from './button-with-dropdown';
1112
import ButtonDocs from './button';
12-
import AlertDocs from './alert';
13+
import ButtonWithDropdownDocs from './button-with-dropdown';
14+
import CardDocs from './card';
15+
import CollapsiblePanelDocs from './collapsiblepanel';
1316
import DatePickerDocs from './datepicker';
17+
import DrawerDocs from './drawer';
18+
import ExpandingInputButtonDocs from './expanding-input-button';
1419
import FormDocs from './form';
1520
import ListDocs from './list';
21+
import ListViewDocs from './listview';
22+
import LoadingAnimationDocs from './loading-animation';
1623
import ModalDocs from './modal';
17-
import PanelDocs from './panel';
1824
import PageHeaderDocs from './pageheader';
25+
import PaginationDocs from './pagination';
26+
import PanelDocs from './panel';
27+
import PercentSliderDocs from './percentslider';
28+
import PopoverDocs from './popover';
1929
import SelectDocs from './select';
2030
import SideNavDocs from './sidenav';
2131
import SlidingPanelDocs from './slidingpanel';
2232
import SpinnerDocs from './spinner';
23-
import TableDocs from './table';
2433
import TabLayoutDocs from './tablayout';
25-
import CardDocs from './card';
26-
import BadgeDocs from './badge';
27-
import ListViewDocs from './listview';
28-
import ExpandingInputButtonDocs from './expanding-input-button';
29-
import LoadingAnimationDocs from './loading-animation';
30-
import PopoverDocs from './popover';
31-
32-
import CollapsiblePanelDocs from './collapsiblepanel';
33-
import PaginationDocs from './pagination';
34-
import PercentSliderDocs from './percentslider';
35-
import TopNavDocs from "./topnav";
34+
import TableDocs from './table';
35+
import TopNavDocs from './topnav';
3636

3737
const routeComponentMap = {};
3838

@@ -41,6 +41,8 @@ const addComponentRoute = (path, linkName, component) => {
4141
};
4242

4343
// 2. add your demo to the routeComponentMap
44+
addComponentRoute('alert', 'Alert', <AlertDocs />);
45+
addComponentRoute('badge', 'Badge', <BadgeDocs />);
4446
addComponentRoute('blankslate', 'Blank Slate', <BlankSlateDocs />);
4547
addComponentRoute('box', 'Box', <BoxDocs />);
4648
addComponentRoute('button', 'Button', <ButtonDocs />);
@@ -49,46 +51,40 @@ addComponentRoute(
4951
'Button With Dropdown',
5052
<ButtonWithDropdownDocs />
5153
);
52-
addComponentRoute('alert', 'Alert', <AlertDocs />);
54+
addComponentRoute('card', 'Card', <CardDocs />);
55+
addComponentRoute(
56+
'collapsiblepanel',
57+
'Collapsible Panel',
58+
<CollapsiblePanelDocs />
59+
);
60+
addComponentRoute(
61+
'expanding-input-button',
62+
'Expanding Input Button',
63+
<ExpandingInputButtonDocs />
64+
);
65+
addComponentRoute('datepicker', 'Date Picker', <DatePickerDocs />);
66+
addComponentRoute('drawer', 'Drawer', <DrawerDocs />);
5367
addComponentRoute('form', 'Form', <FormDocs />);
5468
addComponentRoute('list', 'List', <ListDocs />);
55-
addComponentRoute('modal', 'Modal', <ModalDocs />);
56-
addComponentRoute('panel', 'Panel', <PanelDocs />);
57-
addComponentRoute('pageheader', 'Page Header', <PageHeaderDocs />);
58-
addComponentRoute('percentslider', 'Percent Slider', <PercentSliderDocs />);
59-
addComponentRoute('select', 'Select', <SelectDocs />);
60-
addComponentRoute('sidenav', 'SideNav', <SideNavDocs />);
61-
addComponentRoute('topnav', 'TopNav', <TopNavDocs />);
62-
addComponentRoute('slidingpanel', 'Sliding Panel', <SlidingPanelDocs />);
69+
addComponentRoute('listview', 'List View', <ListViewDocs />);
6370
addComponentRoute(
6471
'loading-animation',
6572
'Loading Animation',
6673
<LoadingAnimationDocs />
6774
);
75+
addComponentRoute('modal', 'Modal', <ModalDocs />);
76+
addComponentRoute('pageheader', 'Page Header', <PageHeaderDocs />);
77+
addComponentRoute('pagination', 'Pagination', <PaginationDocs />);
78+
addComponentRoute('panel', 'Panel', <PanelDocs />);
79+
addComponentRoute('percentslider', 'Percent Slider', <PercentSliderDocs />);
6880
addComponentRoute('popover', 'Popover', <PopoverDocs />);
81+
addComponentRoute('select', 'Select', <SelectDocs />);
82+
addComponentRoute('sidenav', 'SideNav', <SideNavDocs />);
83+
addComponentRoute('slidingpanel', 'Sliding Panel', <SlidingPanelDocs />);
6984
addComponentRoute('spinner', 'Spinner', <SpinnerDocs />);
70-
addComponentRoute('table', 'Table', <TableDocs />);
7185
addComponentRoute('tablayout', 'TabLayout', <TabLayoutDocs />);
72-
addComponentRoute('card', 'Card', <CardDocs />);
73-
addComponentRoute('badge', 'Badge', <BadgeDocs />);
74-
addComponentRoute('listview', 'List View', <ListViewDocs />);
75-
addComponentRoute('pagination', 'Pagination', <PaginationDocs />);
76-
addComponentRoute(
77-
'expanding-input-button',
78-
'Expanding Input Button',
79-
<ExpandingInputButtonDocs />
80-
);
81-
addComponentRoute(
82-
'collapsiblepanel',
83-
'Collapsible Panel',
84-
<CollapsiblePanelDocs />
85-
);
86-
addComponentRoute(
87-
'button-with-dropdown',
88-
'Button With Dropdown',
89-
<ButtonWithDropdownDocs />
90-
);
91-
addComponentRoute('datepicker', 'Date Picker', <DatePickerDocs />);
86+
addComponentRoute('table', 'Table', <TableDocs />);
87+
addComponentRoute('topnav', 'TopNav', <TopNavDocs />);
9288

9389
const ComponentDocs = ({ params }) => {
9490
const routeData = routeComponentMap[params.componentName];

‎packages/visual-stack/src/components/Drawer/index.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import './styles.css';
2+
3+
import classNames from 'classnames';
4+
import React from 'react';
5+
6+
export const Drawer = ({ className, children, isOpen, ...restProps }) => (
7+
<div
8+
{...restProps}
9+
className={classNames(className, 'vs-drawer', {
10+
'vs-drawer-open': isOpen,
11+
})}
12+
>
13+
{children}
14+
</div>
15+
);

‎packages/visual-stack/src/components/Drawer/styles.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.vs-drawer {
2+
position: fixed;
3+
width: 100%;
4+
height: 0;
5+
bottom: 0;
6+
left: 0;
7+
background-color: #4d5051;
8+
z-index: 9999;
9+
transition: height 0.5s;
10+
}
11+
12+
.vs-drawer.vs-drawer-open {
13+
height: 64px;
14+
}

‎packages/visual-stack/src/components/Drawer/tests/Drawer.test.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import { Drawer } from '../index';
3+
import Enzyme, { shallow } from 'enzyme/build';
4+
import Adapter from 'enzyme-adapter-react-16/build';
5+
Enzyme.configure({ adapter: new Adapter() });
6+
7+
describe('Drawer', () => {
8+
it('should render when open', () => {
9+
const wrapper = shallow(
10+
<Drawer isOpen>
11+
<div className="test" />
12+
</Drawer>
13+
);
14+
15+
expect(wrapper.find('.vs-drawer.vs-drawer-open')).toHaveLength(1);
16+
expect(wrapper.find('.vs-drawer .test')).toHaveLength(1);
17+
});
18+
19+
it('should render when not open', () => {
20+
const wrapper = shallow(
21+
<Drawer isOpen={false}>
22+
<div className="test" />
23+
</Drawer>
24+
);
25+
26+
expect(wrapper.find('.vs-drawer')).toHaveLength(1);
27+
expect(wrapper.find('.vs-drawer.vs-drawer-open')).toHaveLength(0);
28+
});
29+
});

‎packages/visual-stack/src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import './global';
55
export * from './components/Box';
66
export * from './components/Button';
77
export * from './components/Badge';
8+
export * from './components/Drawer';
89
export * from './components/Spinner';
910

1011
// modules that need scoping. i.e. the components they

0 commit comments

Comments
 (0)