mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 01:47:00 +01:00
Feat/15085/banner base component (#16828)
* add banner base component banner base wip remove base avatar banner base * add banner base * Update ui/components/component-library/banner-base/banner-base.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * named export org fix * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * updated changes to banner base * banner base updates * fix description/children * move banner base down * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.test.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * fix linting Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net>
This commit is contained in:
Garrett Bear
GitHub
parent
38bbb2aeae
commit
01c0d7823d
121
ui/components/component-library/banner-base/README.mdx
Normal file
121
ui/components/component-library/banner-base/README.mdx
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||||
|
import { BannerBase } from './banner-base';
|
||||||
|
|
||||||
|
### This is a base component. It should not be used in your feature code directly but as a "base" for other UI components
|
||||||
|
|
||||||
|
# BannerBase
|
||||||
|
|
||||||
|
The `BannerBase` is the base component for banners
|
||||||
|
|
||||||
|
<Canvas style={{ background: 'var(--color-background-alternative)' }}>
|
||||||
|
<Story id="ui-components-component-library-banner-base-banner-base-stories-js--default-story" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
The `BannerBase` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
|
||||||
|
|
||||||
|
<ArgsTable of={BannerBase} />
|
||||||
|
|
||||||
|
### Title
|
||||||
|
|
||||||
|
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 style={{ background: 'var(--color-background-alternative)' }}>
|
||||||
|
<Story id="ui-components-component-library-banner-base-banner-base-stories-js--title" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { BannerBase } from '../../component-library';
|
||||||
|
|
||||||
|
<BannerBase title="Title is sentence case no period">
|
||||||
|
Pass only a string through the title prop
|
||||||
|
</BannerBase>;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Children
|
||||||
|
|
||||||
|
The `children` is the description area of the `BannerBase` that can be a text or react node. Description shouldn't repeat title and only 1-3 lines.
|
||||||
|
|
||||||
|
<Canvas style={{ background: 'var(--color-background-alternative)' }}>
|
||||||
|
<Story id="ui-components-component-library-banner-base-banner-base-stories-js--children" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { SIZES } from '../../../helpers/constants/design-system';
|
||||||
|
import { BannerBase } from '../../component-library';
|
||||||
|
|
||||||
|
<BannerBase>
|
||||||
|
{`Description shouldn't repeat title. 1-3 lines. Can contain a `}
|
||||||
|
<ButtonLink size={SIZES.AUTO} href="https://metamask.io/" target="_blank">
|
||||||
|
hyperlink.
|
||||||
|
</ButtonLink>
|
||||||
|
</BannerBase>;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Action Button Label, onClick, & Props
|
||||||
|
|
||||||
|
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/ui-components-component-library-button-link-button-link-stories-js--default-story) for the action
|
||||||
|
|
||||||
|
<Canvas style={{ background: 'var(--color-background-alternative)' }}>
|
||||||
|
<Story id="ui-components-component-library-banner-base-banner-base-stories-js--action-button" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { BannerBase, ICON_NAMES } from '../../component-library';
|
||||||
|
|
||||||
|
<BannerBase
|
||||||
|
title="Action prop demo"
|
||||||
|
actionButtonLabel="Action"
|
||||||
|
actionButtonProps={{
|
||||||
|
icon: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName
|
||||||
|
iconPositionRight: true,
|
||||||
|
}}
|
||||||
|
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
|
||||||
|
</BannerBase>;
|
||||||
|
```
|
||||||
|
|
||||||
|
### On Close
|
||||||
|
|
||||||
|
Use the `onClose` prop to pass a function to the close button. The close button will appear when this prop is used.
|
||||||
|
|
||||||
|
Additional props can be passed to the close button with `closeButtonProps`
|
||||||
|
|
||||||
|
<Canvas style={{ background: 'var(--color-background-alternative)' }}>
|
||||||
|
<Story id="ui-components-component-library-banner-base-banner-base-stories-js--on-close" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { BannerBase } from '../../component-library';
|
||||||
|
|
||||||
|
<BannerBase
|
||||||
|
title="onClose demo"
|
||||||
|
onClose={() => console.log('close button clicked')}
|
||||||
|
>
|
||||||
|
Click the close button icon to hide this notifcation
|
||||||
|
</BannerBase>;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Start Accessory
|
||||||
|
|
||||||
|
Use the `startAccessory` prop to add components such as icons or fox image to the start (default: left) of the `BannerBase` content
|
||||||
|
|
||||||
|
<Canvas style={{ background: 'var(--color-background-alternative)' }}>
|
||||||
|
<Story id="ui-components-component-library-banner-base-banner-base-stories-js--start-accessory" />
|
||||||
|
</Canvas>
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { SIZES } from '../../../helpers/constants/design-system';
|
||||||
|
import { BannerBase, Icon, ICON_NAMES } from '../../component-library';
|
||||||
|
|
||||||
|
<BannerBase
|
||||||
|
title="Start accessory demo"
|
||||||
|
startAccessory={<Icon name={ICON_NAMES.INFO_FILLED} size={SIZES.LG} />}
|
||||||
|
>
|
||||||
|
The info icon on the left is passed through the startAccessory prop
|
||||||
|
</BannerBase>;
|
||||||
|
```
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`BannerBase should render bannerbase element correctly 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="box mm-banner-base box--padding-3 box--display-inline-flex box--gap-2 box--flex-direction-row box--background-color-background-default box--rounded-sm"
|
||||||
|
data-testid="banner-base"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h5
|
||||||
|
class="box mm-text mm-banner-base__title mm-text--body-lg-medium mm-text--color-text-default box--flex-direction-row"
|
||||||
|
>
|
||||||
|
Bannerbase test
|
||||||
|
</h5>
|
||||||
|
<p
|
||||||
|
class="box mm-text mm-text--body-md mm-text--color-text-default box--flex-direction-row"
|
||||||
|
>
|
||||||
|
should render bannerbase element correctly
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
133
ui/components/component-library/banner-base/banner-base.js
Normal file
133
ui/components/component-library/banner-base/banner-base.js
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import classnames from 'classnames';
|
||||||
|
|
||||||
|
import { ButtonIcon, ButtonLink, ICON_NAMES, Text } from '..';
|
||||||
|
|
||||||
|
import Box from '../../ui/box';
|
||||||
|
|
||||||
|
import {
|
||||||
|
COLORS,
|
||||||
|
DISPLAY,
|
||||||
|
SIZES,
|
||||||
|
TEXT,
|
||||||
|
} from '../../../helpers/constants/design-system';
|
||||||
|
|
||||||
|
export const BannerBase = ({
|
||||||
|
className,
|
||||||
|
title,
|
||||||
|
titleProps,
|
||||||
|
children,
|
||||||
|
|
||||||
|
actionButtonLabel,
|
||||||
|
actionButtonOnClick,
|
||||||
|
actionButtonProps,
|
||||||
|
startAccessory,
|
||||||
|
onClose,
|
||||||
|
closeButtonProps,
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
className={classnames('mm-banner-base', className)}
|
||||||
|
display={DISPLAY.INLINE_FLEX}
|
||||||
|
gap={2}
|
||||||
|
backgroundColor={COLORS.BACKGROUND_DEFAULT}
|
||||||
|
borderRadius={SIZES.SM}
|
||||||
|
padding={3}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{startAccessory && <>{startAccessory}</>}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{title && (
|
||||||
|
<Text
|
||||||
|
className="mm-banner-base__title"
|
||||||
|
variant={TEXT.BODY_LG_MEDIUM}
|
||||||
|
as="h5"
|
||||||
|
{...titleProps}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
{children && typeof children === 'object' ? (
|
||||||
|
children
|
||||||
|
) : (
|
||||||
|
<Text>{children}</Text>
|
||||||
|
)}
|
||||||
|
{actionButtonLabel && (
|
||||||
|
<ButtonLink
|
||||||
|
// noPadding TODO: Use noPadding option when released
|
||||||
|
size={SIZES.AUTO} // TODO: Remove when noPadding is added
|
||||||
|
onClick={actionButtonOnClick}
|
||||||
|
{...actionButtonProps}
|
||||||
|
>
|
||||||
|
{actionButtonLabel}
|
||||||
|
</ButtonLink>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{onClose && (
|
||||||
|
<ButtonIcon
|
||||||
|
className="mm-banner-base__close-button"
|
||||||
|
iconName={ICON_NAMES.CLOSE_OUTLINE}
|
||||||
|
size={SIZES.SM}
|
||||||
|
ariaLabel="Close" // TODO: i18n
|
||||||
|
onClick={onClose}
|
||||||
|
{...closeButtonProps}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
BannerBase.propTypes = {
|
||||||
|
/**
|
||||||
|
* The title of the BannerBase
|
||||||
|
*/
|
||||||
|
title: PropTypes.string,
|
||||||
|
/**
|
||||||
|
* Additional props to pass to the `Text` component used for the `title` text
|
||||||
|
*/
|
||||||
|
titleProps: PropTypes.shape(Text.PropTypes),
|
||||||
|
/**
|
||||||
|
* The children is the description area of the BannerBase below the title
|
||||||
|
*/
|
||||||
|
children: PropTypes.node,
|
||||||
|
/**
|
||||||
|
* The action of the BannerBase below the children
|
||||||
|
*/
|
||||||
|
action: PropTypes.node,
|
||||||
|
/**
|
||||||
|
* Label for action button (ButtonLink) of the BannerBase below the children
|
||||||
|
*/
|
||||||
|
actionButtonLabel: PropTypes.string,
|
||||||
|
/**
|
||||||
|
* Props for action button (ButtonLink) of the BannerBase below the children
|
||||||
|
*/
|
||||||
|
actionButtonProps: PropTypes.shape(ButtonLink.PropTypes),
|
||||||
|
/**
|
||||||
|
* The onClick handler for the action button (ButtonLink)
|
||||||
|
*/
|
||||||
|
actionButtonOnClick: PropTypes.func,
|
||||||
|
/**
|
||||||
|
* The start(defualt left) content area of BannerBase
|
||||||
|
*/
|
||||||
|
startAccessory: PropTypes.node,
|
||||||
|
/**
|
||||||
|
* The onClick handler for the close button
|
||||||
|
* When passed this will allow for the close button to show
|
||||||
|
*/
|
||||||
|
onClose: PropTypes.func,
|
||||||
|
/**
|
||||||
|
* The props to pass to the close button
|
||||||
|
*/
|
||||||
|
closeButtonProps: PropTypes.shape(ButtonIcon.PropTypes),
|
||||||
|
/**
|
||||||
|
* An additional className to apply to the BannerBase
|
||||||
|
*/
|
||||||
|
className: PropTypes.string,
|
||||||
|
/**
|
||||||
|
* BannerBase accepts all the props from Box
|
||||||
|
*/
|
||||||
|
...Box.propTypes,
|
||||||
|
};
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
.mm-banner-base {
|
||||||
|
border-left: 4px solid var(--color-icon-default);
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,170 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { useState } from '@storybook/addons';
|
||||||
|
import { SIZES } from '../../../helpers/constants/design-system';
|
||||||
|
import { Icon, ICON_NAMES, ButtonLink, ButtonPrimary } from '..';
|
||||||
|
import { BannerBase } from './banner-base';
|
||||||
|
import README from './README.mdx';
|
||||||
|
|
||||||
|
const marginSizeControlOptions = [
|
||||||
|
undefined,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
2,
|
||||||
|
3,
|
||||||
|
4,
|
||||||
|
5,
|
||||||
|
6,
|
||||||
|
7,
|
||||||
|
8,
|
||||||
|
9,
|
||||||
|
10,
|
||||||
|
11,
|
||||||
|
12,
|
||||||
|
'auto',
|
||||||
|
];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Components/ComponentLibrary/BannerBase',
|
||||||
|
id: __filename,
|
||||||
|
component: BannerBase,
|
||||||
|
parameters: {
|
||||||
|
docs: {
|
||||||
|
page: README,
|
||||||
|
},
|
||||||
|
backgrounds: { default: 'alternative' },
|
||||||
|
},
|
||||||
|
argTypes: {
|
||||||
|
className: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
children: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
action: {
|
||||||
|
control: 'func',
|
||||||
|
},
|
||||||
|
actionButtonLabel: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
actionButtonOnClick: {
|
||||||
|
control: 'func',
|
||||||
|
},
|
||||||
|
actionButtonProps: {
|
||||||
|
control: 'object',
|
||||||
|
},
|
||||||
|
startAccessory: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
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('BannerBase onClose trigger');
|
||||||
|
return <BannerBase {...args} onClose={onClose} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
DefaultStory.args = {
|
||||||
|
title: 'Title is sentence case no period',
|
||||||
|
children: "Description shouldn't repeat title. 1-3 lines.",
|
||||||
|
actionButtonLabel: 'Action',
|
||||||
|
startAccessory: <Icon name={ICON_NAMES.INFO_FILLED} size={SIZES.LG} />,
|
||||||
|
};
|
||||||
|
|
||||||
|
DefaultStory.storyName = 'Default';
|
||||||
|
|
||||||
|
export const Title = (args) => {
|
||||||
|
return <BannerBase {...args} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
Title.args = {
|
||||||
|
title: 'Title is sentence case no period',
|
||||||
|
children: 'Pass only a string through the title prop',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Children = (args) => {
|
||||||
|
return (
|
||||||
|
<BannerBase {...args}>
|
||||||
|
{`Description shouldn't repeat title. 1-3 lines. Can contain a `}
|
||||||
|
<ButtonLink size={SIZES.AUTO} href="https://metamask.io/" target="_blank">
|
||||||
|
hyperlink.
|
||||||
|
</ButtonLink>
|
||||||
|
</BannerBase>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ActionButton = (args) => {
|
||||||
|
return <BannerBase {...args} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
ActionButton.args = {
|
||||||
|
title: 'Action prop demo',
|
||||||
|
actionButtonLabel: 'Action',
|
||||||
|
actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
|
||||||
|
actionButtonProps: {
|
||||||
|
icon: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName
|
||||||
|
iconPositionRight: true,
|
||||||
|
},
|
||||||
|
children:
|
||||||
|
'Use actionButtonLabel for action text, actionButtonOnClick for the onClick handler, and actionButtonProps to pass any ButtonLink prop types such as iconName',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const OnClose = (args) => {
|
||||||
|
const [isShown, setShown] = useState(true);
|
||||||
|
const bannerToggle = () => {
|
||||||
|
if (isShown) {
|
||||||
|
console.log('close button clicked');
|
||||||
|
}
|
||||||
|
setShown(!isShown);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{isShown ? (
|
||||||
|
<BannerBase {...args} onClose={bannerToggle} />
|
||||||
|
) : (
|
||||||
|
<ButtonPrimary onClick={bannerToggle}>View BannerBase</ButtonPrimary>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
OnClose.args = {
|
||||||
|
title: 'onClose demo',
|
||||||
|
children: 'Click the close button icon to hide this notifcation',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const StartAccessory = (args) => {
|
||||||
|
return <BannerBase {...args} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
StartAccessory.args = {
|
||||||
|
title: 'Start accessory demo',
|
||||||
|
children:
|
||||||
|
'The info icon on the left is passed through the startAccessory prop',
|
||||||
|
startAccessory: <Icon name={ICON_NAMES.INFO_FILLED} size={SIZES.LG} />,
|
||||||
|
};
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
/* 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 { Icon, ICON_NAMES } from '..';
|
||||||
|
import { BannerBase } from './banner-base';
|
||||||
|
|
||||||
|
describe('BannerBase', () => {
|
||||||
|
it('should render bannerbase element correctly', () => {
|
||||||
|
const { getByTestId, container } = render(
|
||||||
|
<BannerBase data-testid="banner-base" title="Bannerbase test">
|
||||||
|
should render bannerbase element correctly
|
||||||
|
</BannerBase>,
|
||||||
|
);
|
||||||
|
expect(getByTestId('banner-base')).toHaveClass('mm-banner-base');
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render with added classname', () => {
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<BannerBase
|
||||||
|
className="mm-banner-base--test"
|
||||||
|
data-testid="banner-base"
|
||||||
|
title="Bannerbase test"
|
||||||
|
>
|
||||||
|
should render bannerbase element correctly
|
||||||
|
</BannerBase>,
|
||||||
|
);
|
||||||
|
expect(getByTestId('banner-base')).toHaveClass('mm-banner-base--test');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render bannerbase title', () => {
|
||||||
|
const { getByText } = render(<BannerBase title="Bannerbase title test" />);
|
||||||
|
expect(getByText('Bannerbase title test')).toHaveClass(
|
||||||
|
'mm-banner-base__title',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render bannerbase description', () => {
|
||||||
|
const { getByText } = render(
|
||||||
|
<BannerBase>Bannerbase description test</BannerBase>,
|
||||||
|
);
|
||||||
|
expect(getByText('Bannerbase description test')).toBeDefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render bannerbase action button', () => {
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<BannerBase
|
||||||
|
title="Action prop demo"
|
||||||
|
actionButtonLabel="Action"
|
||||||
|
actionButtonProps={{
|
||||||
|
icon: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName
|
||||||
|
iconPositionRight: true,
|
||||||
|
'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
|
||||||
|
</BannerBase>,
|
||||||
|
);
|
||||||
|
expect(getByTestId('action')).toHaveClass('mm-banner-base__action');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render bannerbase startAccessory', () => {
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<BannerBase
|
||||||
|
startAccessory={
|
||||||
|
<Icon
|
||||||
|
data-testid="start-accessory"
|
||||||
|
name={ICON_NAMES.ADD_SQUARE_FILLED}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(getByTestId('start-accessory')).toBeDefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render and fire onClose event', async () => {
|
||||||
|
const onClose = jest.fn();
|
||||||
|
const { user, getByTestId } = renderWithUserEvent(
|
||||||
|
<BannerBase
|
||||||
|
title="onClose Test"
|
||||||
|
closeButtonProps={{ 'data-testid': 'close-button' }}
|
||||||
|
onClose={onClose}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
await user.click(getByTestId('close-button'));
|
||||||
|
expect(onClose).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
1
ui/components/component-library/banner-base/index.js
Normal file
1
ui/components/component-library/banner-base/index.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { BannerBase } from './banner-base';
|
||||||
@ -26,3 +26,4 @@
|
|||||||
@import 'text-field-base/text-field-base';
|
@import 'text-field-base/text-field-base';
|
||||||
@import 'text-field-search/text-field-search';
|
@import 'text-field-search/text-field-search';
|
||||||
@import 'form-text-field/form-text-field';
|
@import 'form-text-field/form-text-field';
|
||||||
|
@import 'banner-base/banner-base';
|
||||||
|
|||||||
@ -34,3 +34,6 @@ export {
|
|||||||
TEXT_FIELD_BASE_TYPES,
|
TEXT_FIELD_BASE_TYPES,
|
||||||
} from './text-field-base';
|
} from './text-field-base';
|
||||||
export { TextFieldSearch } from './text-field-search';
|
export { TextFieldSearch } from './text-field-search';
|
||||||
|
|
||||||
|
// Molecules
|
||||||
|
export { BannerBase } from './banner-base';
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user