mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
ed75dabe57
* add banner component * update banner styles and tests * fix padding and update snapshot * banner stories id removal * update readme * Update ui/components/component-library/banner/banner.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * banner updates Co-authored-by: George Marshall <george.marshall@consensys.net> Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> |
||
---|---|---|
.. | ||
__snapshots__ | ||
banner.constants.js | ||
banner.js | ||
banner.scss | ||
banner.stories.js | ||
banner.test.js | ||
index.js | ||
README.mdx |
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; import { Banner } from './banner'; import { BannerBase } from '..'; # Banner The `Banner` component is used for inline notifcations and has different colors based on context's severity. <Canvas> <Story id="components-componentlibrary-banner--default-story" /> </Canvas> ## Props The `Banner` 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 <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`. Optional: `BANNER_SEVERITIES` from `./banner` object can be used instead of `SEVERITIES`. Possible options: - `SEVERITIES.INFO` Default - `SEVERITIES.WARNING` - `SEVERITIES.DANGER` - `SEVERITIES.SUCCESS` <Canvas> <Story id="components-componentlibrary-banner--severity" /> </Canvas> ```jsx import { Banner } from '../../component-library'; import { SEVERITIES } from '../../../helpers/constants/design-system'; <Banner title="Info"> This is a demo of severity Info. </Banner> <Banner severity={SEVERITIES.WARNING} title="Warning"> This is a demo of severity Warning. </Banner> <Banner severity={SEVERITIES.DANGER} title="Danger"> This is a demo of severity Danger. </Banner> <Banner severity={SEVERITIES.SUCCESS} title="Success"> This is a demo of severity Success. </Banner> ``` ### 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> <Story id="components-componentlibrary-banner--title" /> </Canvas> ```jsx import { Banner } from '../../component-library'; <Banner title="Title is sentence case no period"> Pass only a string through the title prop </Banner>; ``` ### 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. <Canvas> <Story id="components-componentlibrary-banner--children" /> </Canvas> ```jsx import { SIZES } from '../../../helpers/constants/design-system'; import { Banner } from '../../component-library'; <Banner> {`Description shouldn't repeat title. 1-3 lines. Can contain a `} <ButtonLink size={SIZES.AUTO} href="https://metamask.io/" target="_blank"> hyperlink. </ButtonLink> </Banner>; ``` ### 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/components-componentlibrary-buttonlink--default-story) for the action <Canvas> <Story id="components-componentlibrary-banner--action-button" /> </Canvas> ```jsx import { Banner, ICON_NAMES } from '../../component-library'; <Banner 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 </Banner>; ``` ### 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> <Story id="components-componentlibrary-banner--on-close" /> </Canvas> ```jsx import { Banner } from '../../component-library'; <Banner title="onClose demo" onClose={() => console.log('close button clicked')} > Click the close button icon to hide this notifcation </Banner>; ```