mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-22 17:33:23 +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-search/text-field-search';
|
||||
@import 'form-text-field/form-text-field';
|
||||
@import 'banner-base/banner-base';
|
||||
|
||||
@ -34,3 +34,6 @@ export {
|
||||
TEXT_FIELD_BASE_TYPES,
|
||||
} from './text-field-base';
|
||||
export { TextFieldSearch } from './text-field-search';
|
||||
|
||||
// Molecules
|
||||
export { BannerBase } from './banner-base';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user