import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
import { colorGuide, mainColors } from '../../primitives';
import { Tag } from '..';

<Meta title="Components/Tag" component={Tag} />

# Tag

export const TagTemplate = (args) => <Tag {...args} />;

export const tagArgTypes = {
    children: {
        description: 'Tag keyword',
        default: null,
        type: {
            required: true,
        },
    },
    colorConfig: {
        description: 'Tag color config',
        default: null,
        type: {
            required: true,
        },
    },
    noContainer: {
        description: 'Tag without container?',
        default: false,
    },
    icon: {
        description: 'Tag with icon source',
        type: {
            required: false,
        },
        control: {
            type: 'text',
        },
    },
};

Tag component is used to label, categorize or organize data using keywords.

<Canvas>
    <Tag colorConfig={colorGuide.darkComponents.tags.error}>Error (dark)</Tag>
    <Tag noContainer colorConfig={colorGuide.lightComponents.tags.info}>
        Info (no container)
    </Tag>
    <Tag colorConfig={colorGuide.lightComponents.tags.warning}>Warning (light)</Tag>
    <Tag colorConfig={colorGuide.darkComponents.tags.success}>Success (dark)</Tag>
    <Tag
        colorConfig={colorGuide.lightComponents.tags.info}
        icon={{
            uri: 'https://pngroyale.com/wp-content/uploads/2021/12/Download-blue-information-icon-Free-PNG-300x300.png',
        }}
    >
        Info with icon
    </Tag>
</Canvas>

## Usage

```jsx
import { Tag } from 'neopop-react-native/components';
import { mainColors } from 'neopop-react-native/primitives';

const TagUsage = () => (
    <Tag colorConfig={{ color: mainColors.blue, background: mainColors.white }}>
        DEAL OF THE DAY
    </Tag>
);

export default TagUsage;
```

## Variants

<br />

### Success

<Canvas>
    <Story
        name="Success"
        args={{
            children: 'Successful',
            colorConfig: colorGuide.lightComponents.tags.success,
            noContainer: false,
        }}
        argTypes={tagArgTypes}
    >
        {TagTemplate.bind({})}
    </Story>
</Canvas>

### Info With Icon

<Canvas>
    <Story
        name="Info"
        args={{
            children: 'Know more',
            colorConfig: colorGuide.lightComponents.tags.info,
            icon: 'https://pngroyale.com/wp-content/uploads/2021/12/Download-blue-information-icon-Free-PNG-300x300.png',
            noContainer: false,
        }}
        argTypes={tagArgTypes}
    >
        {TagTemplate.bind({})}
    </Story>
</Canvas>

### Error

<Canvas>
    <Story
        name="Error"
        args={{
            children: 'Overdue',
            colorConfig: colorGuide.darkComponents.tags.error,
            noContainer: false,
        }}
        argTypes={tagArgTypes}
    >
        {TagTemplate.bind({})}
    </Story>
</Canvas>

### Warning

<Canvas>
    <Story
        name="Warning"
        args={{
            children: 'Processing',
            colorConfig: colorGuide.lightComponents.tags.warning,
            noContainer: false,
        }}
        argTypes={tagArgTypes}
    >
        {TagTemplate.bind({})}
    </Story>
</Canvas>

## Props

<ArgsTable of={Tag} />

**colorConfig**

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

| name         | description      | type   |
| ------------ | ---------------- | ------ |
| `color`      | text color       | string |
| `background` | background color | string |

</div>

**FontNameSpace**

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

| prop          | description        | type                                       |
| ------------- | ------------------ | ------------------------------------------ |
| `fontType*`   | typography variant | `heading`, `caps`, `body`, `serif-heading` |
| `fontWeight*` | weight of the text | `800`, `700`, `600`, `500`, `400`, `300`   |
| `fontSize*`   | size of the text   | `string`                                   |

</div>