// @flow
import React from 'react';
import { action } from '@storybook/addon-actions';
import { Link } from './link.component';
import { Span } from '../span/span.component';
import docs from './link.mdx';

export default {
  component: Link,
  title: 'Link',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

export const DefaultHref = () => (
  <Link href="https://wealthsimple.com" target="_blank">
    Anchor Element
  </Link>
);

export const DefaultOnClick = () => (
  <Link onClick={action('clicked')}>Button Element</Link>
);

export const Size = () => (
  <Link href="https://wealthsimple.com" fontSize="f5" target="_blank">
    Wealthsimple with f5 Size
  </Link>
);

export const Color = () => (
  <Link
    href="https://wealthsimple.com"
    colorName="brand-secondary-fg"
    target="_blank"
  >
    Wealthsimple with secondary brand color
  </Link>
);

export const SpanStyling = () => (
  <Link
    href="https://wealthsimple.com"
    colorName="brand-secondary-fg"
    target="_blank"
  >
    <Span fontSize="f3" bold italic>
      Wealthsimple
    </Span>
  </Link>
);
