diff --git a/src/components/Anchor/Anchor.stories.jsx b/src/components/Anchor/Anchor.stories.jsx new file mode 100644 index 000000000..1c6906cd4 --- /dev/null +++ b/src/components/Anchor/Anchor.stories.jsx @@ -0,0 +1,9 @@ +export const Default = { + args: { + color: 'default', + children: 'Default', + // eslint-disable-next-line no-script-url + href: 'https://ui.adslot.com', + target: '_blank', + }, +}; diff --git a/src/components/Anchor/Anchor.stories.mdx b/src/components/Anchor/Anchor.stories.mdx new file mode 100644 index 000000000..13edfd3d4 --- /dev/null +++ b/src/components/Anchor/Anchor.stories.mdx @@ -0,0 +1,20 @@ +import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; +import Anchor from './'; +import { Horizontal } from '../../../www/storybook/Decorators'; +import * as stories from './Anchor.stories.jsx'; + + + + + +Use anchors to link to web pages or documents. + +Anchor shares the same props API as Button, with the addition of `href` and removal of `isLoading`. + +See [Button](?path=/docs/button) for further usage. + + + + + + diff --git a/src/components/Anchor/index.jsx b/src/components/Anchor/index.jsx index 5fbe955ed..82baee8b0 100644 --- a/src/components/Anchor/index.jsx +++ b/src/components/Anchor/index.jsx @@ -3,7 +3,7 @@ import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; import { expandDts, invariant } from '../../lib/utils'; -import { buttonSharedClasses, colors, variants, sizes } from '../Button'; +import { buttonSharedClasses } from '../Button'; const Anchor = (props) => { const { @@ -62,6 +62,10 @@ const Anchor = (props) => { ); }; +const colors = ['default', 'primary', 'secondary', 'success', 'danger', 'warning', 'info']; +const variants = ['solid', 'borderless', 'inverse', 'link']; +const sizes = ['medium', 'large']; + Anchor.propTypes = { color: PropTypes.oneOf(colors), variant: PropTypes.oneOf(variants),