TextLink

import { Story } from '@storybook/react'
import React from 'react'
import styled, { css } from 'styled-components'

import { FaFlagIcon } from '../Icon'

import { TextLink } from './TextLink'

export default {
  title: 'Text（テキスト）/TextLink',
  component: TextLink,
  parameters: {
    withTheming: true,
  },
}

export const All: Story = () => (
  <Wrapper>
    <li>
      <TextLink href="/" prefix={<FaFlagIcon />}>
        ルートへのリンク
      </TextLink>
    </li>
    <li>
      <TextLink href="/" target="_blank">
        別タブで開くルートへのリンク
      </TextLink>
    </li>
    <li>
      <TextLink href="/" target="_blank" suffix={null}>
        別タブで開くルートへのリンク（suffix なし）
      </TextLink>
    </li>
    <li>
      {/* eslint-disable-next-line smarthr/a11y-anchor-has-href-attribute */}
      <TextLink onClick={() => alert('click!')}>
        onClick しか設定していなくてもフォーカスできます。
      </TextLink>
    </li>
    <li>
      {/* eslint-disable-next-line smarthr/a11y-anchor-has-href-attribute */}
      <TextLink>onClick も href も指定されていない場合はフォーカスできません</TextLink>
      <br />
      <TextLink href={undefined}>hrefがundefinedの場合もフォーカスできません</TextLink>
    </li>
    <li>
      <TextLink href="/?path=/story/textlink--all" prefix={<FaFlagIcon />} target="_blank">
        健康保険厚生年金保険被保険者生年月日訂正届船員保険厚生年金保険被保険者生年月日訂正届船員保険厚生年金保険被保険者資格記録訂正届船員保険厚生年金保険被保険者資格記録取消届船員保険被保険者離職事由訂正届基礎年金番号氏名生年月日性別変更（訂正）届
      </TextLink>
    </li>
  </Wrapper>
)
All.storyName = 'all'

const Wrapper = styled.ul(
  ({ theme: { spacingByChar } }) => css`
    list-style: none;
    margin: ${spacingByChar(1.5)};

    li + li {
      margin-top: ${spacingByChar(1)};
    }
  `,
)