m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02: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 {
COLORS,
@ -12,9 +11,17 @@ import Callout from './callout';
export default {
title: 'Components/UI/Callout',
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 margin={2}>
<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
</Typography>
</Box>
<Callout severity={select('severity', SEVERITIES, SEVERITIES.WARNING)}>
Always back up your private key!
</Callout>
<Callout {...args}>Always back up your private key!</Callout>
</Box>
);
export const DismissibleCallout = () => {
export const DismissibleCallout = (args) => {
const [dismissed, setDismissed] = useState(false);
return (
<Box borderColor={COLORS.UI2} padding={[8, 0, 0, 0]}>
@ -42,10 +47,7 @@ export const DismissibleCallout = () => {
</Typography>
</Box>
{!dismissed && (
<Callout
severity={select('severity', SEVERITIES, SEVERITIES.WARNING)}
dismiss={() => setDismissed(true)}
>
<Callout {...args} dismiss={() => setDismissed(true)}>
Always back up your private key!
</Callout>
)}