mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 11:22:43 +02:00
Update BannerAlert component (#17586)
* update button alert component * update test * rename Banner to BannerAlert * remove old banner snapshot * fix banner alert border left
This commit is contained in:
Garrett Bear
GitHub
parent
31afc76f9b
commit
fd53de6af5
@ -1,30 +1,30 @@
|
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Banner } from './banner';
|
||||
import { BannerAlert } from './banner-alert';
|
||||
import { BannerBase } from '..';
|
||||
|
||||
# Banner
|
||||
# BannerAlert
|
||||
|
||||
The `Banner` component is used for inline notifcations and has different colors based on context's severity.
|
||||
`BannerAlert` is an inline notification that notifies users of important information & sometimes time-sensitive changes.
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-banner--default-story" />
|
||||
<Story id="components-componentlibrary-banneralert--default-story" />
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
The `Banner` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
|
||||
The `BannerAlert` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
|
||||
|
||||
<ArgsTable of={Banner} />
|
||||
|
||||
The `Banner` accepts all `BannerBase` component props below
|
||||
The `BannerAlert` accepts all `BannerBase` component props below
|
||||
|
||||
<ArgsTable of={BannerBase} />
|
||||
|
||||
### Severity
|
||||
|
||||
Use the `severity` prop and the `SEVERITIES` object from `./ui/helpers/constants/design-system.js` to change the context of `Banner`.
|
||||
Use the `severity` prop and the `SEVERITIES` object from `./ui/helpers/constants/design-system.js` to change the context of `BannerAlert`.
|
||||
|
||||
Optional: `BANNER_SEVERITIES` from `./banner` object can be used instead of `SEVERITIES`.
|
||||
Optional: `BANNER_ALERT_SEVERITIES` from `./banner` object can be used instead of `SEVERITIES`.
|
||||
|
||||
Possible options:
|
||||
|
||||
@ -34,25 +34,25 @@ Possible options:
|
||||
- `SEVERITIES.SUCCESS`
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-banner--severity" />
|
||||
<Story id="components-componentlibrary-banneralert--severity" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { Banner } from '../../component-library';
|
||||
import { BannerAlert } from '../../component-library';
|
||||
import { SEVERITIES } from '../../../helpers/constants/design-system';
|
||||
|
||||
<Banner title="Info">
|
||||
<BannerAlert title="Info">
|
||||
This is a demo of severity Info.
|
||||
</Banner>
|
||||
<Banner severity={SEVERITIES.WARNING} title="Warning">
|
||||
</BannerAlert>
|
||||
<BannerAlert severity={SEVERITIES.WARNING} title="Warning">
|
||||
This is a demo of severity Warning.
|
||||
</Banner>
|
||||
<Banner severity={SEVERITIES.DANGER} title="Danger">
|
||||
</BannerAlert>
|
||||
<BannerAlert severity={SEVERITIES.DANGER} title="Danger">
|
||||
This is a demo of severity Danger.
|
||||
</Banner>
|
||||
<Banner severity={SEVERITIES.SUCCESS} title="Success">
|
||||
</BannerAlert>
|
||||
<BannerAlert severity={SEVERITIES.SUCCESS} title="Success">
|
||||
This is a demo of severity Success.
|
||||
</Banner>
|
||||
</BannerAlert>
|
||||
```
|
||||
|
||||
### Title
|
||||
@ -60,35 +60,53 @@ import { SEVERITIES } from '../../../helpers/constants/design-system';
|
||||
Use the `title` prop to pass a string that is sentence case no period. Use the `titleProps` prop to pass additional props to the `Text` component.
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-banner--title" />
|
||||
<Story id="components-componentlibrary-banneralert--title" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { Banner } from '../../component-library';
|
||||
import { BannerAlert } from '../../component-library';
|
||||
|
||||
<Banner title="Title is sentence case no period">
|
||||
<BannerAlert title="Title is sentence case no period">
|
||||
Pass only a string through the title prop
|
||||
</Banner>;
|
||||
</BannerAlert>;
|
||||
```
|
||||
|
||||
### Description
|
||||
|
||||
The `description` is the content area of the `BannerAlert` that must be a string. Description shouldn't repeat title and only 1-3 lines.
|
||||
|
||||
If content requires more than a string, see `children` prop below.
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-banneralert--description" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { BannerAlert } from '../../component-library';
|
||||
<BannerAlert
|
||||
title="Description vs children"
|
||||
description="Pass only a string through the description prop or you can use children if the contents require more"
|
||||
/>;
|
||||
```
|
||||
|
||||
### Children
|
||||
|
||||
The `children` is the description area of the `Banner` that can be a text or react node. Description shouldn't repeat title and only 1-3 lines.
|
||||
The `children` prop is an alternative to `description` for `BannerAlert` when more than a string is needed. Children content shouldn't repeat title and only 1-3 lines.
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-banner--children" />
|
||||
<Story id="components-componentlibrary-banneralert--children" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { Size } from '../../../helpers/constants/design-system';
|
||||
import { Banner } from '../../component-library';
|
||||
import { BannerAlert } from '../../component-library';
|
||||
|
||||
<Banner>
|
||||
<BannerAlert>
|
||||
{`Description shouldn't repeat title. 1-3 lines. Can contain a `}
|
||||
<ButtonLink size={Size.auto} href="https://metamask.io/" target="_blank">
|
||||
hyperlink.
|
||||
</ButtonLink>
|
||||
</Banner>;
|
||||
</BannerAlert>;
|
||||
```
|
||||
|
||||
### Action Button Label, onClick, & Props
|
||||
@ -96,13 +114,13 @@ import { Banner } from '../../component-library';
|
||||
Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pass an onClick handler, and `actionButtonProps` prop to pass an object of [ButtonLink props](/docs/components-componentlibrary-buttonlink--default-story) for the action
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-banner--action-button" />
|
||||
<Story id="components-componentlibrary-banneralert--action-button" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { Banner, ICON_NAMES } from '../../component-library';
|
||||
import { BannerAlert, ICON_NAMES } from '../../component-library';
|
||||
|
||||
<Banner
|
||||
<BannerAlert
|
||||
title="Action prop demo"
|
||||
actionButtonLabel="Action"
|
||||
actionButtonProps={{
|
||||
@ -114,7 +132,7 @@ import { Banner, ICON_NAMES } from '../../component-library';
|
||||
Use actionButtonLabel for action text, actionButtonOnClick for the onClick
|
||||
handler, and actionButtonProps to pass any ButtonLink prop types such as
|
||||
iconName
|
||||
</Banner>;
|
||||
</BannerAlert>;
|
||||
```
|
||||
|
||||
### On Close
|
||||
@ -124,16 +142,16 @@ Use the `onClose` prop to pass a function to the close button. The close button
|
||||
Additional props can be passed to the close button with `closeButtonProps`
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-banner--on-close" />
|
||||
<Story id="components-componentlibrary-banneralert--on-close" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { Banner } from '../../component-library';
|
||||
import { BannerAlert } from '../../component-library';
|
||||
|
||||
<Banner
|
||||
<BannerAlert
|
||||
title="onClose demo"
|
||||
onClose={() => console.log('close button clicked')}
|
||||
>
|
||||
Click the close button icon to hide this notifcation
|
||||
</Banner>;
|
||||
</BannerAlert>;
|
||||
```
|
||||
@ -1,10 +1,10 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Banner should render banner element correctly 1`] = `
|
||||
exports[`BannerAlert should render BannerAlert element correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="box mm-banner-base mm-banner mm-banner--severity-info box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-primary-muted box--rounded-sm"
|
||||
data-testid="banner"
|
||||
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-info box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-primary-muted box--rounded-sm"
|
||||
data-testid="bannerAlert"
|
||||
>
|
||||
<div
|
||||
class="box mm-icon mm-icon--size-lg box--flex-direction-row box--color-primary-default"
|
||||
@ -14,12 +14,12 @@ exports[`Banner should render banner element correctly 1`] = `
|
||||
<h5
|
||||
class="box mm-text mm-banner-base__title mm-text--body-lg-medium mm-text--color-text-default box--flex-direction-row"
|
||||
>
|
||||
Banner test
|
||||
BannerAlert test
|
||||
</h5>
|
||||
<p
|
||||
class="box mm-text mm-text--body-md mm-text--color-text-default box--flex-direction-row"
|
||||
>
|
||||
should render banner element correctly
|
||||
should render BannerAlert element correctly
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,6 +1,6 @@
|
||||
import { SEVERITIES } from '../../../helpers/constants/design-system';
|
||||
|
||||
export const BANNER_SEVERITIES = {
|
||||
export const BANNER_ALERT_SEVERITIES = {
|
||||
DANGER: SEVERITIES.DANGER,
|
||||
INFO: SEVERITIES.INFO,
|
||||
SUCCESS: SEVERITIES.SUCCESS,
|
||||
@ -10,9 +10,9 @@ import {
|
||||
SEVERITIES,
|
||||
Size,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { BANNER_SEVERITIES } from './banner.constants';
|
||||
import { BANNER_ALERT_SEVERITIES } from './banner-alert.constants';
|
||||
|
||||
export const Banner = ({
|
||||
export const BannerAlert = ({
|
||||
children,
|
||||
className,
|
||||
severity = SEVERITIES.INFO,
|
||||
@ -64,10 +64,11 @@ export const Banner = ({
|
||||
backgroundColor={severityBackground()}
|
||||
paddingLeft={2}
|
||||
className={classnames(
|
||||
'mm-banner',
|
||||
'mm-banner-alert',
|
||||
{
|
||||
[`mm-banner--severity-${severity}`]:
|
||||
Object.values(BANNER_SEVERITIES).includes(severity),
|
||||
[`mm-banner-alert--severity-${severity}`]: Object.values(
|
||||
BANNER_ALERT_SEVERITIES,
|
||||
).includes(severity),
|
||||
},
|
||||
className,
|
||||
)}
|
||||
@ -78,7 +79,7 @@ export const Banner = ({
|
||||
);
|
||||
};
|
||||
|
||||
Banner.propTypes = {
|
||||
BannerAlert.propTypes = {
|
||||
/**
|
||||
* An additional className to apply to the Banner
|
||||
*/
|
||||
@ -87,7 +88,7 @@ Banner.propTypes = {
|
||||
* 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`
|
||||
*/
|
||||
severity: PropTypes.oneOf(Object.values(BANNER_SEVERITIES)),
|
||||
severity: PropTypes.oneOf(Object.values(BANNER_ALERT_SEVERITIES)),
|
||||
/**
|
||||
* Banner accepts all the props from BannerBase
|
||||
*/
|
||||
@ -1,4 +1,4 @@
|
||||
.mm-banner {
|
||||
.mm-banner-alert {
|
||||
border-left: 4px solid var(--color-primary-default);
|
||||
|
||||
&--severity-danger {
|
||||
@ -9,7 +9,7 @@ import {
|
||||
import Box from '../../ui/box/box';
|
||||
import { ICON_NAMES, ButtonLink, ButtonPrimary } from '..';
|
||||
import README from './README.mdx';
|
||||
import { Banner, BANNER_SEVERITIES } from '.';
|
||||
import { BannerAlert, BANNER_ALERT_SEVERITIES } from '.';
|
||||
|
||||
const marginSizeControlOptions = [
|
||||
undefined,
|
||||
@ -30,8 +30,8 @@ const marginSizeControlOptions = [
|
||||
];
|
||||
|
||||
export default {
|
||||
title: 'Components/ComponentLibrary/Banner',
|
||||
component: Banner,
|
||||
title: 'Components/ComponentLibrary/BannerAlert',
|
||||
component: BannerAlert,
|
||||
parameters: {
|
||||
docs: {
|
||||
page: README,
|
||||
@ -40,7 +40,7 @@ export default {
|
||||
},
|
||||
argTypes: {
|
||||
severity: {
|
||||
options: Object.values(BANNER_SEVERITIES),
|
||||
options: Object.values(BANNER_ALERT_SEVERITIES),
|
||||
control: 'select',
|
||||
},
|
||||
className: {
|
||||
@ -49,6 +49,9 @@ export default {
|
||||
title: {
|
||||
control: 'text',
|
||||
},
|
||||
description: {
|
||||
control: 'text',
|
||||
},
|
||||
children: {
|
||||
control: 'text',
|
||||
},
|
||||
@ -91,8 +94,8 @@ export default {
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => {
|
||||
const onClose = () => console.log('Banner onClose trigger');
|
||||
return <Banner {...args} onClose={onClose} />;
|
||||
const onClose = () => console.log('BannerAlert onClose trigger');
|
||||
return <BannerAlert {...args} onClose={onClose} />;
|
||||
};
|
||||
|
||||
DefaultStory.args = {
|
||||
@ -106,24 +109,24 @@ DefaultStory.storyName = 'Default';
|
||||
export const Severity = (args) => {
|
||||
return (
|
||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={3}>
|
||||
<Banner {...args} severity={SEVERITIES.INFO} title="Info">
|
||||
<BannerAlert {...args} severity={SEVERITIES.INFO} title="Info">
|
||||
This is a demo of severity Info.
|
||||
</Banner>
|
||||
<Banner {...args} severity={SEVERITIES.WARNING} title="Warning">
|
||||
</BannerAlert>
|
||||
<BannerAlert {...args} severity={SEVERITIES.WARNING} title="Warning">
|
||||
This is a demo of severity Warning.
|
||||
</Banner>
|
||||
<Banner {...args} severity={SEVERITIES.DANGER} title="Danger">
|
||||
</BannerAlert>
|
||||
<BannerAlert {...args} severity={SEVERITIES.DANGER} title="Danger">
|
||||
This is a demo of severity Danger.
|
||||
</Banner>
|
||||
<Banner {...args} severity={SEVERITIES.SUCCESS} title="Success">
|
||||
</BannerAlert>
|
||||
<BannerAlert {...args} severity={SEVERITIES.SUCCESS} title="Success">
|
||||
This is a demo of severity Success.
|
||||
</Banner>
|
||||
</BannerAlert>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export const Title = (args) => {
|
||||
return <Banner {...args} />;
|
||||
return <BannerAlert {...args} />;
|
||||
};
|
||||
|
||||
Title.args = {
|
||||
@ -131,19 +134,29 @@ Title.args = {
|
||||
children: 'Pass only a string through the title prop',
|
||||
};
|
||||
|
||||
export const Description = (args) => {
|
||||
return <BannerAlert {...args} />;
|
||||
};
|
||||
|
||||
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 (
|
||||
<Banner {...args}>
|
||||
<BannerAlert {...args}>
|
||||
{`Description shouldn't repeat title. 1-3 lines. Can contain a `}
|
||||
<ButtonLink size={Size.auto} href="https://metamask.io/" target="_blank">
|
||||
hyperlink.
|
||||
</ButtonLink>
|
||||
</Banner>
|
||||
</BannerAlert>
|
||||
);
|
||||
};
|
||||
|
||||
export const ActionButton = (args) => {
|
||||
return <Banner {...args} />;
|
||||
return <BannerAlert {...args} />;
|
||||
};
|
||||
|
||||
ActionButton.args = {
|
||||
@ -160,7 +173,7 @@ ActionButton.args = {
|
||||
|
||||
export const OnClose = (args) => {
|
||||
const [isShown, setShown] = useState(true);
|
||||
const bannerToggle = () => {
|
||||
const bannerAlertToggle = () => {
|
||||
if (isShown) {
|
||||
console.log('close button clicked');
|
||||
}
|
||||
@ -169,9 +182,11 @@ export const OnClose = (args) => {
|
||||
return (
|
||||
<>
|
||||
{isShown ? (
|
||||
<Banner {...args} onClose={bannerToggle} />
|
||||
<BannerAlert {...args} onClose={bannerAlertToggle} />
|
||||
) : (
|
||||
<ButtonPrimary onClick={bannerToggle}>View Banner</ButtonPrimary>
|
||||
<ButtonPrimary onClick={bannerAlertToggle}>
|
||||
View BannerAlert
|
||||
</ButtonPrimary>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
@ -0,0 +1,123 @@
|
||||
/* eslint-disable jest/require-top-level-describe */
|
||||
import { render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
|
||||
import { renderWithUserEvent } from '../../../../test/lib/render-helpers';
|
||||
|
||||
import { BannerAlert, BANNER_ALERT_SEVERITIES } from '.';
|
||||
|
||||
describe('BannerAlert', () => {
|
||||
it('should render BannerAlert element correctly', () => {
|
||||
const { getByTestId, container } = render(
|
||||
<BannerAlert data-testid="bannerAlert" title="BannerAlert test">
|
||||
should render BannerAlert element correctly
|
||||
</BannerAlert>,
|
||||
);
|
||||
expect(getByTestId('bannerAlert')).toHaveClass('mm-banner-alert');
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render with added classname', () => {
|
||||
const { getByTestId } = render(
|
||||
<BannerAlert
|
||||
className="mm-banner-alert--test"
|
||||
data-testid="bannerAlert"
|
||||
title="BannerAlert test"
|
||||
>
|
||||
should render BannerAlert element correctly
|
||||
</BannerAlert>,
|
||||
);
|
||||
expect(getByTestId('bannerAlert')).toHaveClass('mm-banner-alert--test');
|
||||
});
|
||||
|
||||
it('should render with different severity classnames', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<BannerAlert data-testid="info" title="Info">
|
||||
This is a demo of severity Info.
|
||||
</BannerAlert>
|
||||
<BannerAlert
|
||||
data-testid="warning"
|
||||
severity={BANNER_ALERT_SEVERITIES.WARNING}
|
||||
title="Warning"
|
||||
>
|
||||
This is a demo of severity Warning.
|
||||
</BannerAlert>
|
||||
<BannerAlert
|
||||
data-testid="danger"
|
||||
severity={BANNER_ALERT_SEVERITIES.DANGER}
|
||||
title="Danger"
|
||||
>
|
||||
This is a demo of severity Danger.
|
||||
</BannerAlert>
|
||||
<BannerAlert
|
||||
data-testid="success"
|
||||
severity={BANNER_ALERT_SEVERITIES.SUCCESS}
|
||||
title="Success"
|
||||
>
|
||||
This is a demo of severity Success.
|
||||
</BannerAlert>
|
||||
</>,
|
||||
);
|
||||
expect(getByTestId('info')).toHaveClass('mm-banner-alert--severity-info');
|
||||
expect(getByTestId('warning')).toHaveClass(
|
||||
'mm-banner-alert--severity-warning',
|
||||
);
|
||||
expect(getByTestId('danger')).toHaveClass(
|
||||
'mm-banner-alert--severity-danger',
|
||||
);
|
||||
expect(getByTestId('success')).toHaveClass(
|
||||
'mm-banner-alert--severity-success',
|
||||
);
|
||||
});
|
||||
|
||||
it('should render BannerAlert title', () => {
|
||||
const { getByText } = render(
|
||||
<BannerAlert title="BannerAlert title test" />,
|
||||
);
|
||||
expect(getByText('BannerAlert title test')).toHaveClass(
|
||||
'mm-banner-base__title',
|
||||
);
|
||||
});
|
||||
|
||||
it('should render BannerAlert description', () => {
|
||||
const { getByText } = render(
|
||||
<BannerAlert description="BannerAlert description test" />,
|
||||
);
|
||||
expect(getByText('BannerAlert description test')).toBeDefined();
|
||||
});
|
||||
|
||||
it('should render BannerAlert action button', () => {
|
||||
const { getByTestId } = render(
|
||||
<BannerAlert
|
||||
title="Action prop demo"
|
||||
actionButtonLabel="Action"
|
||||
actionButtonProps={{
|
||||
'data-testid': 'action',
|
||||
className: 'mm-banner-base__action',
|
||||
}}
|
||||
actionButtonOnClick={() =>
|
||||
console.log('ButtonLink actionButtonOnClick demo')
|
||||
}
|
||||
>
|
||||
Use actionButtonLabel for action text, actionButtonOnClick for the
|
||||
onClick handler, and actionButtonProps to pass any ButtonLink prop types
|
||||
such as iconName
|
||||
</BannerAlert>,
|
||||
);
|
||||
expect(getByTestId('action')).toHaveClass('mm-banner-base__action');
|
||||
});
|
||||
|
||||
it('should render and fire onClose event', async () => {
|
||||
const onClose = jest.fn();
|
||||
const { user, getByTestId } = renderWithUserEvent(
|
||||
<BannerAlert
|
||||
title="onClose Test"
|
||||
closeButtonProps={{ 'data-testid': 'close-button' }}
|
||||
onClose={onClose}
|
||||
/>,
|
||||
);
|
||||
await user.click(getByTestId('close-button'));
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
2
ui/components/component-library/banner-alert/index.js
Normal file
2
ui/components/component-library/banner-alert/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
export { BannerAlert } from './banner-alert';
|
||||
export { BANNER_ALERT_SEVERITIES } from './banner-alert.constants';
|
||||
@ -1,111 +0,0 @@
|
||||
/* eslint-disable jest/require-top-level-describe */
|
||||
import { render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
|
||||
import { renderWithUserEvent } from '../../../../test/lib/render-helpers';
|
||||
|
||||
import { Banner, BANNER_SEVERITIES } from '.';
|
||||
|
||||
describe('Banner', () => {
|
||||
it('should render banner element correctly', () => {
|
||||
const { getByTestId, container } = render(
|
||||
<Banner data-testid="banner" title="Banner test">
|
||||
should render banner element correctly
|
||||
</Banner>,
|
||||
);
|
||||
expect(getByTestId('banner')).toHaveClass('mm-banner');
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render with added classname', () => {
|
||||
const { getByTestId } = render(
|
||||
<Banner
|
||||
className="mm-banner--test"
|
||||
data-testid="banner"
|
||||
title="Banner test"
|
||||
>
|
||||
should render banner element correctly
|
||||
</Banner>,
|
||||
);
|
||||
expect(getByTestId('banner')).toHaveClass('mm-banner--test');
|
||||
});
|
||||
|
||||
it('should render with different severity classnames', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<Banner data-testid="info" title="Info">
|
||||
This is a demo of severity Info.
|
||||
</Banner>
|
||||
<Banner
|
||||
data-testid="warning"
|
||||
severity={BANNER_SEVERITIES.WARNING}
|
||||
title="Warning"
|
||||
>
|
||||
This is a demo of severity Warning.
|
||||
</Banner>
|
||||
<Banner
|
||||
data-testid="danger"
|
||||
severity={BANNER_SEVERITIES.DANGER}
|
||||
title="Danger"
|
||||
>
|
||||
This is a demo of severity Danger.
|
||||
</Banner>
|
||||
<Banner
|
||||
data-testid="success"
|
||||
severity={BANNER_SEVERITIES.SUCCESS}
|
||||
title="Success"
|
||||
>
|
||||
This is a demo of severity Success.
|
||||
</Banner>
|
||||
</>,
|
||||
);
|
||||
expect(getByTestId('info')).toHaveClass('mm-banner--severity-info');
|
||||
expect(getByTestId('warning')).toHaveClass('mm-banner--severity-warning');
|
||||
expect(getByTestId('danger')).toHaveClass('mm-banner--severity-danger');
|
||||
expect(getByTestId('success')).toHaveClass('mm-banner--severity-success');
|
||||
});
|
||||
|
||||
it('should render banner title', () => {
|
||||
const { getByText } = render(<Banner title="Banner title test" />);
|
||||
expect(getByText('Banner title test')).toHaveClass('mm-banner-base__title');
|
||||
});
|
||||
|
||||
it('should render banner description', () => {
|
||||
const { getByText } = render(<Banner>Banner description test</Banner>);
|
||||
expect(getByText('Banner description test')).toBeDefined();
|
||||
});
|
||||
|
||||
it('should render banner action button', () => {
|
||||
const { getByTestId } = render(
|
||||
<Banner
|
||||
title="Action prop demo"
|
||||
actionButtonLabel="Action"
|
||||
actionButtonProps={{
|
||||
'data-testid': 'action',
|
||||
className: 'mm-banner-base__action',
|
||||
}}
|
||||
actionButtonOnClick={() =>
|
||||
console.log('ButtonLink actionButtonOnClick demo')
|
||||
}
|
||||
>
|
||||
Use actionButtonLabel for action text, actionButtonOnClick for the
|
||||
onClick handler, and actionButtonProps to pass any ButtonLink prop types
|
||||
such as iconName
|
||||
</Banner>,
|
||||
);
|
||||
expect(getByTestId('action')).toHaveClass('mm-banner-base__action');
|
||||
});
|
||||
|
||||
it('should render and fire onClose event', async () => {
|
||||
const onClose = jest.fn();
|
||||
const { user, getByTestId } = renderWithUserEvent(
|
||||
<Banner
|
||||
title="onClose Test"
|
||||
closeButtonProps={{ 'data-testid': 'close-button' }}
|
||||
onClose={onClose}
|
||||
/>,
|
||||
);
|
||||
await user.click(getByTestId('close-button'));
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
@ -1,2 +0,0 @@
|
||||
export { Banner } from './banner';
|
||||
export { BANNER_SEVERITIES } from './banner.constants';
|
||||
@ -26,4 +26,4 @@
|
||||
@import 'text-field-base/text-field-base';
|
||||
@import 'text-field-search/text-field-search';
|
||||
@import 'form-text-field/form-text-field';
|
||||
@import 'banner/banner';
|
||||
@import 'banner-alert/banner-alert';
|
||||
|
||||
@ -37,4 +37,4 @@ export { TextFieldSearch } from './text-field-search';
|
||||
|
||||
// Molecules
|
||||
export { BannerBase } from './banner-base';
|
||||
export { Banner, BANNER_SEVERITIES } from './banner';
|
||||
export { BannerAlert, BANNER_ALERT_SEVERITIES } from './banner-alert';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user