Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add drawer component #50

Merged
merged 1 commit into from Sep 25, 2022
Merged

Add drawer component #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Add drawer component
  • Loading branch information
@AbdallahAbis
AbdallahAbis committed Sep 6, 2022
commit 662a42b1998ec3fdd9b5d9b1d22d0c38764153b2
11 libs/shared/ui/src/lib/Drawer/index.spec.tsx
View file
Open in desktop
@@ -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
Open in desktop
@@ -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>
</>
);
}