1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/component-library/modal-content/modal-content.stories.tsx
George Marshall 68f928c8a2
Adding ModalContent component (#18175)
* Adding ModalContent component

* Using different component api for ref

* use imperative handle

* Updating size

* Updating stories and docs as well as component api

* Fixing import
2023-03-22 17:17:19 -07:00

145 lines
3.6 KiB
TypeScript

import React, { useEffect, useRef, useState } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import {
DISPLAY,
JustifyContent,
AlignItems,
BLOCK_SIZES,
TextVariant,
TEXT_ALIGN,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box';
import { Button, Text } from '..';
import { ModalContent } from './modal-content';
import { ModalContentSize } from './modal-content.types';
import README from './README.mdx';
export default {
title: 'Components/ComponentLibrary/ModalContent',
component: ModalContent,
parameters: {
docs: {
page: README,
},
},
argTypes: {
className: {
control: 'text',
},
children: {
control: 'text',
},
size: {
control: 'select',
options: Object.values(ModalContentSize).map((value) =>
value.toLowerCase(),
),
},
},
args: {
children: 'Modal Content',
},
} as ComponentMeta<typeof ModalContent>;
const Template: ComponentStory<typeof ModalContent> = (args) => (
<ModalContent {...args} />
);
export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';
/*
* !!TODO: Replace with ModalHeader component
*/
const ModalHeader = () => (
<>
<Box
className="mm-modal-header"
display={DISPLAY.FLEX}
justifyContent={JustifyContent.spaceBetween}
alignItems={AlignItems.flexStart}
width={BLOCK_SIZES.FULL}
marginBottom={4}
>
<button>Back</button>
<Text variant={TextVariant.headingSm} textAlign={TEXT_ALIGN.CENTER}>
Modal Header
</Text>
<button>Close</button>
</Box>
</>
);
export const Children: ComponentStory<typeof ModalContent> = (args) => (
<ModalContent {...args}>
<ModalHeader />
<Text>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio,
reiciendis assumenda dolorum mollitia saepe, optio at aliquam molestias
omnis quae corporis nesciunt natus, quas tempore ut ullam eaque fuga.
Velit.
</Text>
</ModalContent>
);
export const Size: ComponentStory<typeof ModalContent> = (args) => (
<>
<ModalContent {...args} marginBottom={4}>
<Text>ModalContentSize.Sm default and only size 360px max-width</Text>
</ModalContent>
<ModalContent
{...args}
width={[
BLOCK_SIZES.FULL,
BLOCK_SIZES.THREE_FOURTHS,
BLOCK_SIZES.HALF,
BLOCK_SIZES.ONE_THIRD,
]}
marginBottom={4}
>
<Text>
Using width Box props and responsive array props <br /> [
BLOCK_SIZES.FULL, BLOCK_SIZES.THREE_FOURTHS, BLOCK_SIZES.HALF,
BLOCK_SIZES.ONE_THIRD, ]
</Text>
</ModalContent>
<ModalContent {...args} marginBottom={4} style={{ maxWidth: 800 }}>
Adding a className and setting a max width (max-width: 800px)
</ModalContent>
</>
);
export const ModalContentRef: ComponentStory<typeof ModalContent> = (args) => {
const [show, setShow] = useState(false);
const modalContentRef = useRef<HTMLDivElement>(null);
const handleClickOutside = (event: MouseEvent) => {
if (
modalContentRef?.current &&
!modalContentRef.current.contains(event.target as Node)
) {
setShow(false);
}
};
useEffect(() => {
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
return (
<>
<Button onClick={() => setShow(true)}>Show ModalContent</Button>
{show && (
<ModalContent {...args} modalContentRef={modalContentRef}>
Click outside of this ModalContent to close
</ModalContent>
)}
</>
);
};