Skip to content
Permalink
Browse files
Add drawer component
  • Loading branch information
@AbdallahAbis
AbdallahAbis committed Sep 6, 2022
1 parent 01c2d0a commit 662a42b
Show file tree
Hide file tree
Showing 3 changed files with 434 additions and 0 deletions.
11 libs/shared/ui/src/lib/Drawer/index.spec.tsx
View file
@@ -0,0 +1,11 @@
import { render } from '@testing-library/react';
import React from 'react'

import Drawer from './index';

describe('Drawer', () => {
it('should render successfully', () => {
const { baseElement } = render(<Drawer active={true} onClose={() => {}}>drawer</Drawer>);
expect(baseElement).toBeTruthy();
});
});
295 libs/shared/ui/src/lib/Drawer/index.stories.tsx
View file
@@ -0,0 +1,295 @@
import React, { useState } from 'react'
import Drawer from './index';

export default {
title: 'Drawer',
component: Drawer
}
export const Default = () => {
const [active, setActive] = useState(false)
return (
<>
<div className="text-center">
<button
onClick={() => setActive(!active)}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
type="button"
data-drawer-target="drawer-example"
data-drawer-show="drawer-example"
aria-controls="drawer-example"
>
Show drawer
</button>
</div>
<Drawer active={active} onClose={() => setActive(!active)}>
<div className='p-3'>
<h2>Test content</h2>
</div>
</Drawer>
</>
);
}
export const fromLeft = () => {
const [active, setActive] = useState(false)
return (
<>
<div className="text-center">
<button
onClick={() => setActive(!active)}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
type="button"
data-drawer-target="drawer-example"
data-drawer-show="drawer-example"
aria-controls="drawer-example"
>
Show drawer
</button>
</div>
<Drawer active={active} onClose={() => setActive(!active)} from='left'>
<div className='p-3'>
<h2>Test content</h2>
</div>
</Drawer>
</>
);
}
export const WithHeader = () => {
const [active, setActive] = useState(false)
return (
<>
<div className="text-center">
<button
onClick={() => setActive(!active)}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
type="button"
data-drawer-target="drawer-example"
data-drawer-show="drawer-example"
aria-controls="drawer-example"
>
Show drawer
</button>
</div>
<Drawer active={active} onClose={() => setActive(!active)} header='This is a Drawer'>
<div className='p-3'>
<h2>Test content</h2>
</div>
</Drawer>
</>
);
}
export const xSmall = () => {
const [active, setActive] = useState(false)
return (
<>
<div className="text-center">
<button
onClick={() => setActive(!active)}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
type="button"
data-drawer-target="drawer-example"
data-drawer-show="drawer-example"
aria-controls="drawer-example"
>
Show drawer
</button>
</div>
<Drawer active={active} onClose={() => setActive(!active)} size='xs'>
<div className='p-3'>
<h2>Test content</h2>
</div>
</Drawer>
</>
);
}
export const Small = () => {
const [active, setActive] = useState(false)
return (
<>
<div className="text-center">
<button
onClick={() => setActive(!active)}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
type="button"
data-drawer-target="drawer-example"
data-drawer-show="drawer-example"
aria-controls="drawer-example"
>
Show drawer
</button>
</div>
<Drawer active={active} onClose={() => setActive(!active)} size='sm'>
<div className='p-3'>
<h2>Test content</h2>
</div>
</Drawer>
</>
);
}
export const Medium = () => {
const [active, setActive] = useState(false)
return (
<>
<div className="text-center">
<button
onClick={() => setActive(!active)}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
type="button"
data-drawer-target="drawer-example"
data-drawer-show="drawer-example"
aria-controls="drawer-example"
>
Show drawer
</button>
</div>
<Drawer active={active} onClose={() => setActive(!active)} size='md'>
<div className='p-3'>
<h2>Test content</h2>
</div>
</Drawer>
</>
);
}
export const Half = () => {
const [active, setActive] = useState(false)
return (
<>
<div className="text-center">
<button
onClick={() => setActive(!active)}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
type="button"
data-drawer-target="drawer-example"
data-drawer-show="drawer-example"
aria-controls="drawer-example"
>
Show drawer
</button>
</div>
<Drawer active={active} onClose={() => setActive(!active)} size='1/2'>
<div className='p-3'>
<h2>Test content</h2>
</div>
</Drawer>
</>
);
}
export const xLarge = () => {
const [active, setActive] = useState(false)
return (
<>
<div className="text-center">
<button
onClick={() => setActive(!active)}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
type="button"
data-drawer-target="drawer-example"
data-drawer-show="drawer-example"
aria-controls="drawer-example"
>
Show drawer
</button>
</div>
<Drawer active={active} onClose={() => setActive(!active)} size='xl'>
<div className='p-3'>
<h2>Test content</h2>
</div>
</Drawer>
</>
);
}
export const twoXLarge = () => {
const [active, setActive] = useState(false)
return (
<>
<div className="text-center">
<button
onClick={() => setActive(!active)}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
type="button"
data-drawer-target="drawer-example"
data-drawer-show="drawer-example"
aria-controls="drawer-example"
>
Show drawer
</button>
</div>
<Drawer active={active} onClose={() => setActive(!active)} size='2xl'>
<div className='p-3'>
<h2>Test content</h2>
</div>
</Drawer>
</>
);
}
export const ThreeXLarge = () => {
const [active, setActive] = useState(false)
return (
<>
<div className="text-center">
<button
onClick={() => setActive(!active)}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
type="button"
data-drawer-target="drawer-example"
data-drawer-show="drawer-example"
aria-controls="drawer-example"
>
Show drawer
</button>
</div>
<Drawer active={active} onClose={() => setActive(!active)} size='3xl'>
<div className='p-3'>
<h2>Test content</h2>
</div>
</Drawer>
</>
);
}
export const MediumTransition = () => {
const [active, setActive] = useState(false)
return (
<>
<div className="text-center">
<button
onClick={() => setActive(!active)}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
type="button"
data-drawer-target="drawer-example"
data-drawer-show="drawer-example"
aria-controls="drawer-example"
>
Show drawer
</button>
</div>
<Drawer active={active} onClose={() => setActive(!active)} transition='medium'>
<div className='p-3'>
<h2>Test content</h2>
</div>
</Drawer>
</>
);
}
export const SlowTransition = () => {
const [active, setActive] = useState(false)
return (
<>
<div className="text-center">
<button
onClick={() => setActive(!active)}
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
type="button"
data-drawer-target="drawer-example"
data-drawer-show="drawer-example"
aria-controls="drawer-example"
>
Show drawer
</button>
</div>
<Drawer active={active} onClose={() => setActive(!active)} transition='slow'>
<div className='p-3'>
<h2>Test content</h2>
</div>
</Drawer>
</>
);
}

0 comments on commit 662a42b

Please sign in to comment.