fix: anchor

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',
+  },
+};

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';
+
+<Meta title="Components/Anchor" component={Anchor} />
+
+<Overview component={Anchor} stories={stories}>
+
+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.
+
+<Canvas>
+  <Story name="Overview" story={stories.Default} />
+</Canvas>
+
+</Overview>

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),