mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
1007930078
* text housekeeping * update testing * Text constant * TEXT const to story * format text sizes * add associated constants to text component * add all exports to global index.js * update snapshot * update text component variants * Update ui/components/component-library/text/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * update rearrangements * update text in tests Co-authored-by: George Marshall <george.marshall@consensys.net> |
||
---|---|---|
.. | ||
__snapshots__ | ||
button-link.constants.js | ||
button-link.js | ||
button-link.scss | ||
button-link.stories.js | ||
button-link.test.js | ||
index.js | ||
README.mdx |
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; import { ButtonLink } from './button-link'; # ButtonLink The `ButtonLink` is an extension of `ButtonBase` to support link styles. <Canvas> <Story id="ui-components-component-library-button-link-button-link-stories-js--default-story" /> </Canvas> ## Props The `ButtonLink` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) and [ButtonBase](/docs/ui-components-component-library-button-base-button-base-stories-js--default-story#props) component props <ArgsTable of={ButtonLink} /> ### Size Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonLink`. Defaults to `SIZES.MD` Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `SIZES`. Possible sizes include: - `SIZES.AUTO` inherits the font-size of the parent element. - `SIZES.SM` 32px - `SIZES.MD` 40px - `SIZES.LG` 48px <Canvas> <Story id="ui-components-component-library-button-link-button-link-stories-js--size" /> </Canvas> ```jsx import { SIZES } from '../../../helpers/constants/design-system'; import { ButtonLink } from '../../ui/components/component-library'; <ButtonLink size={SIZES.AUTO} /> <ButtonLink size={SIZES.SM} /> <ButtonLink size={SIZES.MD} /> <ButtonLink size={SIZES.LG} /> ``` ### Danger Use the `danger` boolean prop to change the `ButtonLink` to danger color. <Canvas> <Story id="ui-components-component-library-button-link-button-link-stories-js--danger" /> </Canvas> ```jsx import { ButtonLink } from '../../ui/components/component-library'; <ButtonLink>Normal</ButtonLink> <ButtonLink danger>Danger</ButtonLink> ``` ### Href When an `href` is passed the tag element will switch to an `anchor`(`a`) tag. <Canvas> <Story id="ui-components-component-library-button-link-button-link-stories-js--href" /> </Canvas> ```jsx import { ButtonLink } from '../../ui/components/component-library'; <ButtonLink href="/">Href Example</ButtonLink>; ```