import { PlaceholderMajorIcon } from "@components/icons";
import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { GalaxyLargeImage } from "./assets";
import { IconLink, IconLinkAsButton, InnerIconLink, InnerLink, InnerTextLink, Link, TextLink, TextLinkAsButton } from "@components/link";
import { Image } from "@components/image";
import { Inline } from "@components/layout";
import { RouterLink } from "./RouterLink";
import { Text } from "@components/typography";

<Meta
    title="Components/Link"
    id="link"
/>

# Link

<Tagline>Links allow a user to navigate between pages, scroll to a have page section, access files, or even to handle email addresses.</Tagline>

<ComponentInfo
    usage={"import { TextLink, IconLink, Link, TextLinkAsButton, IconLinkAsButton } from \"@sharegate/orbit-ui\";"}
    ariaPath="link"
    githubPath="/packages/components/src/link/src"
/>

## TextLink

A link style can optimized for text.

<Preview>
    <Story name="default">
        <TextLink href="#">Flight details</TextLink>
    </Story>
</Preview>

### Icon

A text link can contain [icons](#).

<Preview>
    <Story name="icon">
        <Inline alignY="center">
            <TextLink size="sm" href="#">
                <Text>Flight details</Text>
                <PlaceholderMajorIcon />
            </TextLink>
            <TextLink href="#">
                <Text>Flight details</Text>
                <PlaceholderMajorIcon />
            </TextLink>
        </Inline>
    </Story>
</Preview>

### Start icon

*Non standard* start [icons](#) can be provided to handle special cases. However, think twice before adding *start* icons, *end* icons should be your go to.

<Preview>
    <Story name="start icon">
        <TextLink href="#">
            <PlaceholderMajorIcon slot="start-icon" />
            <Text>Flight details</Text>
        </TextLink>
    </Story>
</Preview>

### External

An external text link will render by default with `rel="noopener noreferrer"` attribute.

You should avoid opening an external link in a new window or tab since it can be disorienting for people. Only do it when it's necessary. For more information, [see W3C recommendation](https://www.w3.org/TR/WCAG20-TECHS/G200.html).

<Preview>
    <Story name="external">
        <TextLink external href="#">Flight details</TextLink>
    </Story>
</Preview>

### Variants

A link can use a different style.

<Preview>
    <Story name="variants">
        <Inline>
            <TextLink variant="accent" href="#">Accent</TextLink>
            <TextLink variant="negative" href="#">Negative</TextLink>
        </Inline>
    </Story>
</Preview>

### Disabled

A link can have *disabled* style, it's your responsability to make sure the link doesn't navigate anywhere when activated.

<Preview>
    <Story name="disabled">
        <TextLink disabled href="#">Flight details</TextLink>
    </Story>
</Preview>

### Size

A link can vary in size.

<Preview>
    <Story name="size">
        <Inline alignY="center">
            <TextLink size="sm" href="#">Flight details</TextLink>
            <TextLink href="#">Flight details</TextLink>
        </Inline>
    </Story>
</Preview>

### Button

A link can behave like a button by using the `TextLinkAsButton` component.

<Preview>
    <Story name="button">
        <TextLinkAsButton>Flight details</TextLinkAsButton>
    </Story>
</Preview>

### React router

To integrate with a third-party routing library like [React Router](https://reactrouter.com) any link component can be rendered as a [React Router Link](https://reactrouter.com/web/api/Link) or as any other custom component.

<Preview filePath="/link/docs/ReactRouter" scope={{ RouterLink }} />

## Icon link

A link content can be a single icon.

> When using this variant, an accessible name must be provided through `aria-label` prop. See [WCAG practices](https://www.w3.org/TR/WCAG20-TECHS/ARIA6.html).

<Preview>
    <Story name="icon link">
        <Inline alignY="center">
            <IconLink aria-label="Add" href="#"><PlaceholderMajorIcon /></IconLink>
        </Inline>
    </Story>
</Preview>

### Button

An icon link can behave like a button by using the `IconLinkAsButton` component.

<Preview>
    <Story name="icon link button">
        <IconLinkAsButton><PlaceholderMajorIcon /></IconLinkAsButton>
    </Story>
</Preview>

## Basic link

A link can have a more subtle appareance and only be noticeable when focused.

### Image

A link content can be an image element.

<Preview scope={{ GalaxyLargeImage }}>
    <Story name="basic link image">
        <Link href="#">
            <Image src={GalaxyLargeImage} alt="SpaceX launch" />
        </Link>
    </Story>
</Preview>

### Shape

A link can use a different shape to match his content shape on focus state.

<Preview scope={{ GalaxyLargeImage }}>
    <Story name="basic link shape">
        <Inline>
            <Link shape="rounded" focus href="#">
                <Image src={GalaxyLargeImage} alt="SpaceX launch" width="100px" height="100px" />
            </Link>
            <Link shape="circular" focus href="#">
                <Image src={GalaxyLargeImage} alt="SpaceX launch" width="100px" height="100px" />
            </Link>
            <Link shape="box" focus href="#">
                <Image src={GalaxyLargeImage} alt="SpaceX launch" width="100px" height="100px" />
            </Link>
        </Inline>
    </Story>
</Preview>

## API

### TextLink

<ComponentInfo
    usage={"import { TextLink } from \"@sharegate/orbit-ui\";"}
    slots={["left-icon", "text", "icon"]}
    inherits={[InnerTextLink.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerTextLink} sort="alpha" />

### IconLink

<ComponentInfo
    usage={"import { IconLink } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerIconLink.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerIconLink} sort="alpha" />

### Link

<ComponentInfo
    usage={"import { Link } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerLink.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerLink} sort="alpha" />

### TextLinkAsButton

<ComponentInfo
    usage={"import { TextLinkAsButton } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerTextLink.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerTextLink} sort="alpha" />

### IconLinkAsButton

<ComponentInfo
    usage={"import { IconLinkAsButton } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerIconLink.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerIconLink} sort="alpha" />
