import { Meta, Story, Canvas, Title, Subtitle, ArgsTable, Source } from '@storybook/addon-docs';
import Add from '@lendi-ui/icon/Add';
import { Button, AnchorButton } from './index';
import { Spacer } from '@lendi/ui/Layout';
import * as stories from './button-next.stories.tsx';
import {TITLE_COMPONENTS_DECOMISSIONED} from "../../../../../docs/content";

<Meta
  title={`${TITLE_COMPONENTS_DECOMISSIONED}/Button/Overview`}
  component={Button}
  parameters={{
    actions: {
      handles: ['click']
    }
  }}
/>


<Title>Button</Title>
<Subtitle>A button is used to denote an action</Subtitle>

<Source language='tsx' dark={true} code={`import { Button } from '@lendi/ui/Button';`} />

<Canvas>
  <Story name="Interactive" story={stories.Interactive} parameters={{layout: 'centered'}} />
</Canvas>

<ArgsTable story="Interactive" include={['variant', 'state', 'isLoading', 'isInverse', 'width', 'isDisabled', 'size']} />

Note: this props table is not complete. See <a href="#props">below</a> for full props.

## Variants
<Canvas>
  <Story name="Variants" story={stories.Variants} />
</Canvas>

## Pseudo States
<Canvas>
  <Story name="Pseudo States" story={stories.States} />
</Canvas>

## Inverse styles
These buttons that should sit on a dark background
<Canvas>
  <Story name="Inverse" story={stories.Inverse} />
</Canvas>

<ArgsTable story="Inverse" include={['state', 'isLoading', 'isDisabled']} />


## Icons

<Canvas>
<Story name="Icon" story={stories.Icons} />
</Canvas>

### Icon position
<Canvas>
<Story name="Icon position" story={stories.IconPosition} />
</Canvas>

<Story name="Text overflow" story={stories.TextOverflow} />

### Icon only
Try to avoid icon only interaction elements, icons alone do not always convey clear meaning and functionality to users.

For scenarios where we have to use an icon without text, you will also have to pass an accessible name for you button/link by setting an `aria-label`. This is so assistive technologies can communicate what the button will do.
<Canvas withSource="open">
<Story name="Icon only" story={stories.IconOnly} />
</Canvas>

## Size
### Button sizes
<Canvas>
<Story name="Button sizes" story={stories.ButtonSizes} />
</Canvas>

### Button width
Defaults to auto "width" but also has a default minWidth of 108px (6.75rem)
<Canvas>
<Story name="Button width" story={stories.ButtonWidth} />
</Canvas>

<Story name="Button Types" story={stories.ButtonTypes} />

<Story name="Matrix" story={stories.MatrixStory} />

## AnchorButton
An anchor link that looks like a button

<Source language='tsx' dark={true} code={`import { AnchorButton } from '@lendi/ui/Button';`} />

<Canvas withSource="open">
<Story
name="AnchorButton"
story={stories.AnchorButtonDefault}
/>
</Canvas>


## AnchorButton (new tab)
Limit the use of `target="_blank"`, use only when absolutely needed. eg. Help documentation which opens in a new window to prevent users from loosing information entered in a form.

The key problems:
- Opening a link in a new tab can be disorientating to certain users
- Screen readers are not made aware of this change by assistive technologies
- It removes the user’s ability to control the experience
- Back button will no longer be of any use

If you have to open a link in a new tab, give advanced warning by including text in the anchor that [visibly states the link opens in a new tab](https://www.w3.org/WAI/WCAG21/Techniques/html/H83).
<Canvas withSource="open">
<Story
name="AnchorButton (new tab)"
story={stories.AnchorButtonOpenNewTab}
/>
</Canvas>


## Props

<ArgsTable components={{ 'Button': Button, 'AnchorButton': AnchorButton }} exclude={['onPress', 'minWidth', 'maxWidth']} />


## LUI Now Migration Guide
- Replace imports of `@lendi-ui/button` with `@lendi/ui` using the above documentation
- We don't prop spread, if you have a prop you need passed to the `<button>` element or similar that isn't supported, please reach out to design ops.
  - Before and after children have been replaced by the icon prop. If you were using it for other children, please describe your use case to design ops.
  - `IconButton` has been removed, use the button variant that makes sense (text, primary, etc) with the icon prop.
  - There is no `isFullWidth` prop. Use the width prop `width='100%'` instead.
  - We've removed Button Group. We recommending using a horizontal Spacer instead.