All files / Overlay Overlay.stories.tsx

80% Statements 8/10
100% Branches 0/0
50% Functions 2/4
80% Lines 8/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83                                          1x 1x   1x       1x                                     1x 1x   1x       1x                                                        
import _ from 'lodash';
import React, { useState } from 'react';
import { Story, Meta } from '@storybook/react';
 
import { IOverlayProps } from './Overlay';
import Overlay from './Overlay';
import Button from '../Button/Button';
 
export default {
	title: 'Utility/Overlay',
	component: Overlay,
	parameters: {
		docs: {
			description: {
				component: Overlay.peek.description,
			},
		},
	},
} as Meta;
 
/* BASIC */
export const Basic: Story<IOverlayProps> = (args) => {
	const [isShown, setIsShown] = useState(false);
 
	const handleOpenClose = (isShown: any) => {
		setIsShown(isShown);
	};
 
	return (
		<div>
			<Button onClick={_.partial(handleOpenClose, !isShown)}>Toggle</Button>
 
			<Overlay
				{...args}
				isShown={isShown}
				onEscape={_.partial(handleOpenClose, false)}
				onBackgroundClick={_.partial(handleOpenClose, false)}
			>
				<div style={{ color: '#fff' }}>
					User cannot interact with the background (except scrolling).
				</div>
			</Overlay>
		</div>
	);
};
 
/* No Modal */
export const NoModal: Story<IOverlayProps> = (args) => {
	const [isShown, setIsShown] = useState(false);
 
	const handleOpenClose = (isShown: any) => {
		setIsShown(isShown);
	};
 
	return (
		<div>
			<Button onClick={_.partial(handleOpenClose, !isShown)}>Toggle</Button>
 
			<Overlay
				{...args}
				isShown={isShown}
				isModal={false}
				onEscape={_.partial(handleOpenClose, false)}
			>
				<div
					style={{
						backgroundColor: '#eee',
						padding: '100px',
					}}
				>
					User can still interact with the background.
					<Button
						onClick={_.partial(handleOpenClose, false)}
						style={{ marginLeft: '10px' }}
					>
						Close
					</Button>
				</div>
			</Overlay>
		</div>
	);
};