m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Updated the Callout story to convert knobs and actions to controls / args. (#13624)

Browse Source
This commit is contained in:
Rob Dawson 2022-02-17 09:11:17 -07:00 committed by GitHub
parent cbf8a737dc
commit 4a6082f1d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ui/components/ui/callout/callout.stories.js
View File

@ -1,4 +1,3 @@
import { select } from '@storybook/addon-knobs';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import {
COLORS, COLORS,
@ -12,9 +11,17 @@ import Callout from './callout';
export default { export default {
title: 'Components/UI/Callout', title: 'Components/UI/Callout',
id: __filename, id: __filename,
argTypes: {
severity: {
control: {
type: 'select',
},
options: Object.values(SEVERITIES),
},
},
}; };
export const PersistentCallout = () => ( export const PersistentCallout = (args) => (
<Box borderColor={COLORS.UI2} padding={[8, 0, 0, 0]}> <Box borderColor={COLORS.UI2} padding={[8, 0, 0, 0]}>
<Box margin={2}> <Box margin={2}>
<Typography variant={TYPOGRAPHY.H4}>This is your private key:</Typography> <Typography variant={TYPOGRAPHY.H4}>This is your private key:</Typography>
@ -22,13 +29,11 @@ export const PersistentCallout = () => (
some seed words that are super important and probably deserve a callout some seed words that are super important and probably deserve a callout
</Typography> </Typography>
</Box> </Box>
<Callout severity={select('severity', SEVERITIES, SEVERITIES.WARNING)}> <Callout {...args}>Always back up your private key!</Callout>
Always back up your private key!
</Callout>
</Box> </Box>
); );
export const DismissibleCallout = () => { export const DismissibleCallout = (args) => {
const [dismissed, setDismissed] = useState(false); const [dismissed, setDismissed] = useState(false);
return ( return (
<Box borderColor={COLORS.UI2} padding={[8, 0, 0, 0]}> <Box borderColor={COLORS.UI2} padding={[8, 0, 0, 0]}>
@ -42,10 +47,7 @@ export const DismissibleCallout = () => {
</Typography> </Typography>
</Box> </Box>
{!dismissed && ( {!dismissed && (
<Callout <Callout {...args} dismiss={() => setDismissed(true)}>
severity={select('severity', SEVERITIES, SEVERITIES.WARNING)}
dismiss={() => setDismissed(true)}
>
Always back up your private key! Always back up your private key!
</Callout> </Callout>
)} )}