import { ArgsTable, Meta, Canvas, Story } from "@storybook/addon-docs";

import RoviButton from "./index.vue";

<Meta title="Components/Button" component={RoviButton} />

export const Template = (args, { argTypes }) => ({
  props: Object.keys(args),
  components: { RoviButton },
  template: `<RoviButton v-bind="$props" v-on="$props" >Try me</RoviButton>`,
});

# Button

Button component allows to render neoPOP styled - Elevated, Flat, Rounded and Link type of Button and trigger an `onClick` action on tap/press.

## Usage

- Button component decides text color, background color, edge colors, and border color based on the `variant`, `kind`, and `colorMode` props.
- Spacing of the button - height, padding, icon height (if any icon is passed) is decided by the `size` prop.
- Text style of the button is also decided by the `size` prop.
- Button component is super flexible as it supports these configs:
  - `colorConfig` prop for all the colors
  - `spacingConfig` prop for - height, iconHeight, and padding
  - `textStyle` for custom textStyle - fontWeight, fontSize, fontType

<Canvas style={{ background: "#0d0d0d" }}>
  <Story
    name="Introdution"
    args={{
      size: "small",
      variant: "primary",
      kind: "elevated",
      icon: "https://i.ibb.co/bNj1Hxw/cbimage.png",
      as: "p",
      showArrow: true,
      showShimmer: true,
      onClick: () => {
        console.log("Clicked");
      },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

```jsx
...Documentation will be written here...
```

## Variants

### Kinds

There can be 4 different types of button.

<Canvas>
  <Story name="Kinds">
    {(args) => {
      return {
        components: { RoviButton },
        template: `<div style="
                        display: flex;
                        gap: 20px;
                        align-items: baseline;
                    ">
                        <RoviButton kind="elevated" >Elevated</RoviButton>
                        <RoviButton kind="flat">Flat</RoviButton>
                        <RoviButton kind="round">Round</RoviButton>
                        <RoviButton kind="link">Link</RoviButton>
        </div>`,
      };
    }}
  </Story>
</Canvas>

There can be 2 different variants of above butttons.

<Canvas>
  <Story name="Variants">
    {(args) => {
      return {
        components: { RoviButton },
        template: `<div style="
                        display: flex;
                        gap: 20px;
                        align-items: baseline;
                    ">
                        <RoviButton kind="elevated" variant="primary" >Primary</RoviButton>
                        <RoviButton kind="elevated" variant="secondary">Secondary</RoviButton>
        </div>`,
      };
    }}
  </Story>
</Canvas>

### Sizes (Big, Medium, Small)

<Canvas>
  <Story name="Sizes">
    {(args) => {
      return {
        components: { RoviButton },
        template: `<div style="
                        display: flex;
                        gap: 20px;
                        align-items: baseline;
                    ">
                        <RoviButton kind="elevated" variant="primary" size="big">Big</RoviButton>
                        <RoviButton kind="elevated" variant="primary" size="medium">Medium</RoviButton>
                        <RoviButton kind="elevated" variant="primary" size="small">Small</RoviButton>
        </div>`,
      };
    }}
  </Story>
</Canvas>

### Styles

<Canvas>
  <Story name="Styles">
    {(args) => {
      return {
        components: { RoviButton },
        template: `<div style="
                        display: flex;
                        gap: 20px;
                        align-items: center;
                    ">
                        <RoviButton
                                kind="elevated"
                                variant="primary"
                            >
                                Only Text
                        </RoviButton>
                        <RoviButton
                                kind="elevated"
                                variant="primary"
                                showArrow
                            >
                                Text and Arrow
                        </RoviButton>
                        <RoviButton
                                kind="elevated"
                                variant="primary"
                                showArrow
                                icon="https://i.ibb.co/bNj1Hxw/cbimage.png"
                            >
                                Text, Icon and Arrow
                        </RoviButton>
                        <RoviButton
                                kind="elevated"
                                variant="primary"
                                showArrow
                                isVertical
                                icon="https://i.ibb.co/bNj1Hxw/cbimage.png"
                            >
                                Vertical
                        </RoviButton>
                        <RoviButton
                                kind="elevated"
                                variant="primary"
                                showArrow
                                showShimmer
                                icon="https://i.ibb.co/bNj1Hxw/cbimage.png"
                            >
                                Shimmer Effect
                        </RoviButton>
        </div>`,
      };
    }}
  </Story>
</Canvas>

### States

<Canvas>
  <Story name="States">
    {(args) => {
      return {
        components: { RoviButton },
        template: `<div style="
                        display: flex;
                        gap: 20px;
                        align-items: baseline;
                    ">
                        <RoviButton kind="elevated" variant="primary">Active</RoviButton>
                        <RoviButton kind="elevated" variant="primary" isActive>Pressed</RoviButton>
                        <RoviButton kind="elevated" variant="primary" disabled>Disabled</RoviButton>
        </div>`,
      };
    }}
  </Story>
</Canvas>

### ColorModes

<Canvas>
  <Story name="Color Modes">
    {(args) => {
      return {
        components: { RoviButton },
        template: `<div style="
                        display: flex;
                        gap: 20px;
                        align-items: baseline;
                    ">
                        <RoviButton kind="elevated" variant="primary" colorMode="light">Light</RoviButton>
                        <RoviButton kind="elevated" variant="primary" colorMode="dark">Dark</RoviButton>
        </div>`,
      };
    }}
  </Story>
</Canvas>

## Props

<div style={{overflowX: 'auto'}}>

| Prop                 | Description                                                                                                                                                                                                                                                | Type               |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `kind*`              | different kind of button <br/> `"flat"` `"elevated"` `"round"` `"link"`                                                                                                                                                                                    | `String`           |
| `style`              | custom styles if any                                                                                                                                                                                                                                       | `CSS Style Object` |
| `size`               | `"big"`, `"medium"` or `"small"` - used to decide the paddings, height, and typography style                                                                                                                                                               | `String`           |
| `variant`            | `"primary"` or `"secondary"` variant of `flat` or `elevated` button                                                                                                                                                                                        | `String`           |
| `colorMode`          | `"dark"` or `"light"` mode of the button                                                                                                                                                                                                                   | `String`           |
| `elevationDirection` | specifies the direction for an `elevated` button. this will decide which plunk to hide or show when button is pressed. <br/> `"bottom-right"` `"top-right"` `"bottom-left"` `"top-left"` `"bottom-center"` `"top-center"` `"right-center"` `"left-center"` | `String`           |
| `fullWidth`          | flex the button to take full-width of the container                                                                                                                                                                                                        | `Boolean`          |
| `showArrow`          | arrow icon in the button                                                                                                                                                                                                                                   | `Boolean`          |
| `disabled`           | if true, button is disabled                                                                                                                                                                                                                                | `Boolean`          |
| `colorConfig`        | Object for taking in colors                                                                                                                                                                                                                                | `Object`           |
| `spacingConfig`      | Object for taking in spacing details                                                                                                                                                                                                                       | `Object`           |
| `textStyle`          | text style - passes configs for `Typography` <br/> `{ fontWeight: FontWeights, fontSize: String, fontType: FontType }`                                                                                                                                     | `Object`           |
| `icon`               | url for any image to be set, this aligns left to the text                                                                                                                                                                                                  | `String`           |

</div>

`colorConfig` prop object takes in all the colors related to button.
It also takes `disabledColors` which takes in the same props but applied when `disabled` is true.

<div style={{overflowX: 'auto'}}>

| Field             | Description                                                                                                      | type     |
| ----------------- | ---------------------------------------------------------------------------------------------------------------- | -------- |
| `borderColor`     | border color for the borders of face                                                                             | `String` |
| `backgroundColor` | background color for the face                                                                                    | `String` |
| `edgeColors`      | colors for the plunk (left, right, top, bottom) <br/> `{ left: color, top: color, right: color, bottom: color }` | `Object` |
| `color`           | text color                                                                                                       | `String` |
| `disabledColors`  | Object of `borderColor`, `backgroundColor`, `edgeColors`, and `color` to be applied when `disabled` is true.     | `Object` |

</div>

`spacingConfig` prop Object takes in `padding`, `height` and `iconHeight`

<div style={{overflowX: 'auto'}}>

| Field        | Description                                                | Type     |
| ------------ | ---------------------------------------------------------- | -------- |
| `padding`    | takes padding around the text - all CSS patterns supported | `String` |
| `height`     | height of the button - in px                               | `String` |
| `iconHeight` | fixed height for the icon, width is set to auto            | `String` |

</div>