mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-22 17:33:23 +01:00
Fix popover component to for new Storybook format (#12896)
* popover * add proptype comments * Update * updating use state var name Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Etienne Dusseault
GitHub
parent
de4b54c230
commit
c0f03d827d
16
ui/components/ui/popover/README.mdx
Normal file
16
ui/components/ui/popover/README.mdx
Normal file
@ -0,0 +1,16 @@
|
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
|
||||
import Popover from './popover.component';
|
||||
|
||||
# Popover
|
||||
|
||||
A modal component to show info
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-popover-popover-stories-js--default-story" />
|
||||
</Canvas>
|
||||
|
||||
## Component API
|
||||
|
||||
<ArgsTable of={Popover} />
|
||||
|
||||
@ -81,20 +81,56 @@ const Popover = ({
|
||||
};
|
||||
|
||||
Popover.propTypes = {
|
||||
/**
|
||||
* Show title of the popover
|
||||
*/
|
||||
title: PropTypes.string,
|
||||
/**
|
||||
* Show subtitle label on popover
|
||||
*/
|
||||
subtitle: PropTypes.string,
|
||||
/**
|
||||
* Show children content could be react child or text
|
||||
*/
|
||||
children: PropTypes.node,
|
||||
/**
|
||||
* Show footer content could be react child or text
|
||||
*/
|
||||
footer: PropTypes.node,
|
||||
/**
|
||||
* Add custom CSS class for footer
|
||||
*/
|
||||
footerClassName: PropTypes.string,
|
||||
/**
|
||||
* onBack handler
|
||||
*/
|
||||
onBack: PropTypes.func,
|
||||
/**
|
||||
* onClose handler
|
||||
*/
|
||||
onClose: PropTypes.func,
|
||||
CustomBackground: PropTypes.func,
|
||||
/**
|
||||
* Add custom CSS class for content
|
||||
*/
|
||||
contentClassName: PropTypes.string,
|
||||
/**
|
||||
* Add custom CSS class
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* Check if component would show arror
|
||||
*/
|
||||
showArrow: PropTypes.bool,
|
||||
/**
|
||||
* The ref of the popover-wrap element
|
||||
*/
|
||||
popoverRef: PropTypes.shape({
|
||||
current: PropTypes.instanceOf(window.Element),
|
||||
}),
|
||||
/**
|
||||
* Check if use centered title
|
||||
*/
|
||||
centerTitle: PropTypes.bool,
|
||||
};
|
||||
|
||||
|
||||
@ -1,67 +1,83 @@
|
||||
import React from 'react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import React, { useState } from 'react';
|
||||
import Button from '../button';
|
||||
import Box from '../box';
|
||||
import README from './README.mdx';
|
||||
import Popover from './popover.component';
|
||||
|
||||
const containerStyle = {
|
||||
width: 800,
|
||||
height: 600,
|
||||
background: 'pink',
|
||||
position: 'relative',
|
||||
};
|
||||
|
||||
const mainWrapperStyle = {
|
||||
padding: '0 24px 24px',
|
||||
};
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/Popover',
|
||||
id: __filename,
|
||||
component: Popover,
|
||||
parameters: {
|
||||
docs: {
|
||||
page: README,
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
title: { control: 'text' },
|
||||
subtitle: { control: 'text' },
|
||||
children: { control: 'object' },
|
||||
footer: { control: 'object' },
|
||||
footerClassName: { control: 'text' },
|
||||
onBack: { action: 'onBack' },
|
||||
onClose: { action: 'onClose' },
|
||||
contentClassName: { control: 'text' },
|
||||
className: { control: 'text' },
|
||||
showArrow: { control: 'boolean' },
|
||||
popoverRef: { control: 'object' },
|
||||
centerTitle: { control: 'boolean' },
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = () => (
|
||||
<div style={containerStyle}>
|
||||
<Popover
|
||||
title={text('title', 'Approve spend limit')}
|
||||
subtitle={text('subtitle', 'This is the new limit')}
|
||||
onClose={action('clicked')}
|
||||
footer={<button>Example Footer</button>}
|
||||
>
|
||||
<main style={mainWrapperStyle}>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper
|
||||
eget duis at tellus at urna condimentum. Posuere urna nec tincidunt
|
||||
praesent semper. Arcu dictum varius duis at. A lacus vestibulum sed
|
||||
arcu. Orci porta non pulvinar neque laoreet suspendisse interdum.
|
||||
Pretium fusce id velit ut. Ut consequat semper viverra nam libero
|
||||
justo laoreet sit. In ante metus dictum at tempor commodo ullamcorper
|
||||
a lacus. Posuere morbi leo urna molestie at elementum eu facilisis
|
||||
sed. Libero enim sed faucibus turpis in eu mi bibendum neque. Amet
|
||||
massa vitae tortor condimentum lacinia quis. Pretium viverra
|
||||
suspendisse potenti nullam ac. Pellentesque elit eget gravida cum
|
||||
sociis natoque penatibus. Proin libero nunc consequat interdum varius
|
||||
sit amet. Est ultricies integer quis auctor elit sed vulputate. Ornare
|
||||
arcu odio ut sem nulla pharetra. Eget nullam non nisi est sit. Leo vel
|
||||
fringilla est ullamcorper eget nulla.
|
||||
</p>
|
||||
<p>
|
||||
Mattis pellentesque id nibh tortor id. Commodo sed egestas egestas
|
||||
fringilla phasellus. Semper eget duis at tellus at urna. Tristique
|
||||
nulla aliquet enim tortor at auctor urna nunc. Pellentesque habitant
|
||||
morbi tristique senectus et netus et. Turpis egestas sed tempus urna
|
||||
et pharetra pharetra massa massa. Mi eget mauris pharetra et ultrices
|
||||
neque ornare aenean. Facilisis volutpat est velit egestas dui id
|
||||
ornare arcu odio. Lacus sed turpis tincidunt id aliquet risus feugiat
|
||||
in. Cras tincidunt lobortis feugiat vivamus. Blandit libero volutpat
|
||||
sed cras ornare arcu. Facilisi morbi tempus iaculis urna id volutpat.
|
||||
Risus viverra adipiscing at in tellus. Leo vel orci porta non pulvinar
|
||||
neque. Malesuada fames ac turpis egestas integer. Euismod nisi porta
|
||||
lorem mollis aliquam.
|
||||
</p>
|
||||
</main>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
export const DefaultStory = (args) => {
|
||||
const [isShowingPopover, setIsShowingPopover] = useState(false);
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
style={{ width: 'auto' }}
|
||||
onClick={() => setIsShowingPopover(true)}
|
||||
>
|
||||
Show Popover
|
||||
</Button>
|
||||
{isShowingPopover && (
|
||||
<Popover
|
||||
{...args}
|
||||
onClose={() => setIsShowingPopover(false)}
|
||||
title={args.title}
|
||||
subtitle={args.subtitle}
|
||||
footer={args.footer}
|
||||
>
|
||||
{args.children}
|
||||
</Popover>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
DefaultStory.args = {
|
||||
title: 'Approve spend limit',
|
||||
subtitle: 'This is the new limit',
|
||||
footer: <button>Example Footer</button>,
|
||||
showArrow: false,
|
||||
children: (
|
||||
<Box padding={4}>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Semper eget duis at
|
||||
tellus at urna condimentum. Posuere urna nec tincidunt praesent semper.
|
||||
Arcu dictum varius duis at. A lacus vestibulum sed arcu. Orci porta non
|
||||
pulvinar neque laoreet suspendisse interdum. Pretium fusce id velit ut.
|
||||
Ut consequat semper viverra nam libero justo laoreet sit. In ante metus
|
||||
dictum at tempor commodo ullamcorper a lacus. Posuere morbi leo urna
|
||||
molestie at elementum eu facilisis sed. Libero enim sed faucibus turpis
|
||||
in eu mi bibendum neque. Amet massa vitae tortor condimentum lacinia
|
||||
quis. Pretium viverra suspendisse potenti nullam ac. Pellentesque elit
|
||||
eget gravida cum sociis natoque penatibus. Proin libero nunc consequat
|
||||
interdum varius sit amet. Est ultricies integer quis auctor elit sed
|
||||
vulputate. Ornare arcu odio ut sem nulla pharetra. Eget nullam non nisi
|
||||
est sit. Leo vel fringilla est ullamcorper eget nulla.
|
||||
</p>
|
||||
</Box>
|
||||
),
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user