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

Replaces SEVERITIES const with Severity enum in BannerAlert (#20200)

Browse Source 
* Replaces SEVERITIES const with Severity enum in BannerAlert

* Replaced SEVERITIES with Severity in banner-alert.constants.js

* Used BANNER_ALERT_SEVERITIES instead of SEVERITIES in banner-alert.stories.js

* Updated README for usage of Severity instead of SEVERITIES

* Updates to stories and docs link

---------

Co-authored-by: Brad Decker <bhdecker84@gmail.com>
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Pritam Dhara 2023-08-02 03:11:30 +05:30 committed by GitHub
parent d879f08763
commit 5b5ca4599e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 58 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ui/components/component-library/banner-alert/README.mdx
View File

@ -22,35 +22,35 @@ The `BannerAlert` accepts all `BannerBase` component props below
### Severity
Use the `severity` prop and the `SEVERITIES` object from `./ui/helpers/constants/design-system.js` to change the context of `BannerAlert`.
Use the `severity` prop and the `Severity` enum from `./ui/helpers/constants/design-system.js` to change the context of `BannerAlert`.
Optional: `BANNER_ALERT_SEVERITIES` from `./banner` object can be used instead of `SEVERITIES`.
Optional: `BANNER_ALERT_SEVERITIES` from `./banner` object can be used instead of `Severity`.
Possible options:
- `SEVERITIES.INFO` Default
- `SEVERITIES.WARNING`
- `SEVERITIES.DANGER`
- `SEVERITIES.SUCCESS`
- `Severity.Info` Default
- `Severity.Warning`
- `Severity.Danger`
- `Severity.Success`
<Canvas>
<Story id="components-componentlibrary-banneralert--severity" />
<Story id="components-componentlibrary-banneralert--severity-story" />
</Canvas>
```jsx
import { BannerAlert } from '../../component-library';
import { SEVERITIES } from '../../../helpers/constants/design-system';
import { Severity } from '../../../helpers/constants/design-system';
<BannerAlert title="Info">
This is a demo of severity Info.
</BannerAlert>
<BannerAlert severity={SEVERITIES.WARNING} title="Warning">
<BannerAlert severity={Severity.Warning} title="Warning">
This is a demo of severity Warning.
</BannerAlert>
<BannerAlert severity={SEVERITIES.DANGER} title="Danger">
<BannerAlert severity={Severity.Danger} title="Danger">
This is a demo of severity Danger.
</BannerAlert>
<BannerAlert severity={SEVERITIES.SUCCESS} title="Success">
<BannerAlert severity={Severity.Success} title="Success">
This is a demo of severity Success.
</BannerAlert>
```

10
ui/components/component-library/banner-alert/banner-alert.constants.js
View File

@ -1,8 +1,8 @@
import { SEVERITIES } from '../../../helpers/constants/design-system';
import { Severity } from '../../../helpers/constants/design-system';
export const BANNER_ALERT_SEVERITIES = {
DANGER: SEVERITIES.DANGER,
INFO: SEVERITIES.INFO,
SUCCESS: SEVERITIES.SUCCESS,
WARNING: SEVERITIES.WARNING,
DANGER: Severity.Danger,
INFO: Severity.Info,
SUCCESS: Severity.Success,
WARNING: Severity.Warning,
};

24
ui/components/component-library/banner-alert/banner-alert.js
View File

@ -7,34 +7,34 @@ import { BannerBase, Icon, IconName, IconSize } from '..';
import {
BackgroundColor,
IconColor,
SEVERITIES,
Severity,
} from '../../../helpers/constants/design-system';
import { BANNER_ALERT_SEVERITIES } from './banner-alert.constants';
export const BannerAlert = ({
children,
className,
severity = SEVERITIES.INFO,
severity = Severity.Info,
...props
}) => {
const severityIcon = () => {
switch (severity) {
case SEVERITIES.DANGER:
case Severity.Danger:
return {
name: IconName.Danger,
color: IconColor.errorDefault,
};
case SEVERITIES.WARNING:
case Severity.Warning:
return {
name: IconName.Warning,
color: IconColor.warningDefault,
};
case SEVERITIES.SUCCESS:
case Severity.Success:
return {
name: IconName.Confirmation,
color: IconColor.successDefault,
};
// Defaults to SEVERITIES.INFO
// Defaults to Severity.Info
default:
return {
name: IconName.Info,
@ -45,13 +45,13 @@ export const BannerAlert = ({
const severityBackground = () => {
switch (severity) {
case SEVERITIES.DANGER:
case Severity.Danger:
return BackgroundColor.errorMuted;
case SEVERITIES.WARNING:
case Severity.Warning:
return BackgroundColor.warningMuted;
case SEVERITIES.SUCCESS:
case Severity.Success:
return BackgroundColor.successMuted;
// Defaults to SEVERITIES.INFO
// Defaults to Severity.Info
default:
return BackgroundColor.primaryMuted;
}
@ -84,8 +84,8 @@ BannerAlert.propTypes = {
*/
className: PropTypes.string,
/**
* Use the `severity` prop and the `SEVERITIES` object from `./ui/helpers/constants/design-system.js` to change the context of `Banner`.
* Possible options: `SEVERITIES.INFO`(Default), `SEVERITIES.WARNING`, `SEVERITIES.DANGER`, `SEVERITIES.SUCCESS`
* Use the `severity` prop and the `Severity` enum from `./ui/helpers/constants/design-system.js` to change the context of `Banner`.
* Possible options: `Severity.Info`(Default), `Severity.Warning`, `Severity.Danger`, `Severity.Success`
*/
severity: PropTypes.oneOf(Object.values(BANNER_ALERT_SEVERITIES)),
/**

110
ui/components/component-library/banner-alert/banner-alert.stories.js
View File

@ -1,33 +1,17 @@
import React from 'react';
import { useState } from '@storybook/addons';
import {
DISPLAY,
FLEX_DIRECTION,
SEVERITIES,
Display,
FlexDirection,
Size,
Severity,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { ButtonLink, ButtonPrimary, IconName } from '..';
import README from './README.mdx';
import { BannerAlert, BANNER_ALERT_SEVERITIES } from '.';
const marginSizeControlOptions = [
undefined,
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
'auto',
];
import { ButtonLink, ButtonPrimary, IconName, Box } from '..';
import README from './README.mdx';
import { BannerAlert } from './banner-alert';
export default {
title: 'Components/ComponentLibrary/BannerAlert',
@ -36,12 +20,11 @@ export default {
docs: {
page: README,
},
backgrounds: { default: 'alternative' },
},
argTypes: {
severity: {
options: Object.values(BANNER_ALERT_SEVERITIES),
control: 'select',
options: Object.values(Severity),
},
className: {
control: 'text',
@ -55,14 +38,11 @@ export default {
children: {
control: 'text',
},
action: {
control: 'func',
},
actionButtonLabel: {
control: 'text',
},
actionButtonOnClick: {
control: 'func',
action: 'actionButtonOnClick',
},
actionButtonProps: {
control: 'object',
@ -70,95 +50,65 @@ export default {
onClose: {
action: 'onClose',
},
marginTop: {
options: marginSizeControlOptions,
control: 'select',
table: { category: 'box props' },
},
marginRight: {
options: marginSizeControlOptions,
control: 'select',
table: { category: 'box props' },
},
marginBottom: {
options: marginSizeControlOptions,
control: 'select',
table: { category: 'box props' },
},
marginLeft: {
options: marginSizeControlOptions,
control: 'select',
table: { category: 'box props' },
},
},
};
export const DefaultStory = (args) => {
const onClose = () => console.log('BannerAlert onClose trigger');
return <BannerAlert {...args} onClose={onClose} />;
};
const Template = (args) => <BannerAlert {...args} />;
export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';
DefaultStory.args = {
title: 'Title is sentence case no period',
children: "Description shouldn't repeat title. 1-3 lines.",
actionButtonLabel: 'Action',
};
DefaultStory.storyName = 'Default';
export const Severity = (args) => {
export const SeverityStory = (args) => {
return (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={3}>
<BannerAlert {...args} severity={SEVERITIES.INFO} title="Info">
<Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={3}>
<BannerAlert {...args} severity={Severity.Info} title="Info">
This is a demo of severity Info.
</BannerAlert>
<BannerAlert {...args} severity={SEVERITIES.WARNING} title="Warning">
<BannerAlert {...args} severity={Severity.Warning} title="Warning">
This is a demo of severity Warning.
</BannerAlert>
<BannerAlert {...args} severity={SEVERITIES.DANGER} title="Danger">
<BannerAlert {...args} severity={Severity.Danger} title="Danger">
This is a demo of severity Danger.
</BannerAlert>
<BannerAlert {...args} severity={SEVERITIES.SUCCESS} title="Success">
<BannerAlert {...args} severity={Severity.Success} title="Success">
This is a demo of severity Success.
</BannerAlert>
</Box>
);
};
SeverityStory.storyName = 'Severity';
export const Title = (args) => {
return <BannerAlert {...args} />;
};
export const Title = Template.bind({});
Title.args = {
title: 'Title is sentence case no period',
children: 'Pass only a string through the title prop',
};
export const Description = (args) => {
return <BannerAlert {...args} />;
};
export const Description = Template.bind({});
Description.args = {
title: 'Description vs children',
description:
'Pass only a string through the description prop or you can use children if the contents require more',
};
export const Children = (args) => {
return (
<BannerAlert {...args}>
export const Children = Template.bind({});
Children.args = {
children: (
<>
{`Description shouldn't repeat title. 1-3 lines. Can contain a `}
<ButtonLink size={Size.auto} href="https://metamask.io/" target="_blank">
<ButtonLink size={Size.auto} href="https://metamask.io/" externalLink>
hyperlink.
</ButtonLink>
</BannerAlert>
);
};
export const ActionButton = (args) => {
return <BannerAlert {...args} />;
</>
),
};
export const ActionButton = Template.bind({});
ActionButton.args = {
title: 'Action prop demo',
actionButtonLabel: 'Action',