import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";

import * as Tabs from "./Tabs.stories";

<Meta of={Tabs} />

# Tabs

A tab component organizes content into multiple sections, enabling users to seamlessly switch between views without page reloads, enhancing navigation and user experience.

## Usage

<Canvas of={Tabs.Documentation} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const TabsExample = () => {
return (

<Tabs
  size="md"
  spacing="lg"
  separator={true}
  tabs={[
    <Tabs.Tab
      key="account"
      value="account"
      trigger="Account"
      content="Account settings and personal information"
    />,
    <Tabs.Tab
      key="security"
      value="security"
      trigger="Security"
      content="Security settings and password management"
    />,
    <Tabs.Tab
      key="preferences"
      value="preferences"
      trigger="Preferences"
      content="User interface preferences and customization"
    />
  ]}
/>
); };

export default TabsExample;

` } }
additionalActions={[
{
title: 'Open in GitHub',
onClick: () => {
window.open(
'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Tabs/Tabs.tsx',
'_blank'
);
},
}
]}
/>

<Controls of={Tabs.Documentation} />

```tsx
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const TabsExample = () => {
  return (
    <Tabs
      size="md"
      spacing="lg"
      separator={true}
      tabs={[
        <Tabs.Tab
          key="account"
          value="account"
          trigger="Account"
          content="Account settings and personal information"
        />,
        <Tabs.Tab
          key="security"
          value="security"
          trigger="Security"
          content="Security settings and password management"
        />,
        <Tabs.Tab
          key="preferences"
          value="preferences"
          trigger="Preferences"
          content="User interface preferences and customization"
        />
      ]}
    />
  );
};

export default TabsExample;
```

## Examples

### Default

<Canvas of={Tabs.Default} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const DefaultTabsExample = () => {
return (

<Tabs
  tabs={[
    <Tabs.Tab
      key="account"
      value="account"
      trigger="Account"
      content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />,
    <Tabs.Tab
      key="password"
      value="password"
      trigger="Password"
      content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />
  ]}
/>
); };

export default DefaultTabsExample;
` } } />

### Size Variants

#### Small (SM)

<Canvas of={Tabs.SizeSmall} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const SmallTabsExample = () => {
return (

<Tabs
  size="sm"
  tabs={[
    <Tabs.Tab
      key="account"
      value="account"
      trigger="Account"
      content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />,
    <Tabs.Tab
      key="password"
      value="password"
      trigger="Password"
      content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />
  ]}
/>
); };

export default SmallTabsExample;
` } } />

#### Medium (MD)

<Canvas of={Tabs.SizeMedium} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const MediumTabsExample = () => {
return (

<Tabs
  size="md"
  tabs={[
    <Tabs.Tab
      key="account"
      value="account"
      trigger="Account"
      content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />,
    <Tabs.Tab
      key="password"
      value="password"
      trigger="Password"
      content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />
  ]}
/>
); };

export default MediumTabsExample;
` } } />

#### Large (LG)

<Canvas of={Tabs.SizeLarge} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const LargeTabsExample = () => {
return (

<Tabs
  size="lg"
  tabs={[
    <Tabs.Tab
      key="account"
      value="account"
      trigger="Account"
      content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />,
    <Tabs.Tab
      key="password"
      value="password"
      trigger="Password"
      content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />
  ]}
/>
); };

export default LargeTabsExample;
` } } />

#### Extra Large (XL)

<Canvas of={Tabs.SizeExtraLarge} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const ExtraLargeTabsExample = () => {
return (

<Tabs
  size="xl"
  tabs={[
    <Tabs.Tab
      key="account"
      value="account"
      trigger="Account"
      content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />,
    <Tabs.Tab
      key="password"
      value="password"
      trigger="Password"
      content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />
  ]}
/>
); };

export default ExtraLargeTabsExample;
` } } />

### Spacing Variants

<Canvas of={Tabs.SpacingMedium} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const SpacingMediumExample = () => {
return (

<Tabs
  spacing="md"
  tabs={[
    <Tabs.Tab
      key="account"
      value="account"
      trigger="Account"
      content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />,
    <Tabs.Tab
      key="password"
      value="password"
      trigger="Password"
      content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />
  ]}
/>
); };

export default SpacingMediumExample;
` } } />

### With Separator

<Canvas of={Tabs.WithSeparator} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const WithSeparatorExample = () => {
return (

<Tabs
  separator={true}
  tabs={[
    <Tabs.Tab
      key="account"
      value="account"
      trigger="Account"
      content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />,
    <Tabs.Tab
      key="password"
      value="password"
      trigger="Password"
      content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />
  ]}
/>
); };

export default WithSeparatorExample;
` } } />

### With Default Value

<Canvas of={Tabs.WithDefaultValue} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const WithDefaultValueExample = () => {
return (

<Tabs
  defaultValue="password"
  tabs={[
    <Tabs.Tab
      key="account"
      value="account"
      trigger="Account"
      content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />,
    <Tabs.Tab
      key="password"
      value="password"
      trigger="Password"
      content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />
  ]}
/>
); };

export default WithDefaultValueExample;
` } } />

### With Controlled Value

<Canvas of={Tabs.WithControlledValue} source={ { code: `
import React, { useState } from "react";
import { Tabs } from "@webiny/admin-ui";

const WithControlledValueExample = () => {
const [value, setValue] = useState("password");

    return (
        <Tabs
            value={value}
            onValueChange={setValue}
            tabs={[
                <Tabs.Tab
                    key="account"
                    value="account"
                    trigger="Account"
                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />,
                <Tabs.Tab
                    key="password"
                    value="password"
                    trigger="Password"
                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                />
            ]}
        />
    );

};

export default WithControlledValueExample;
` } } />

### With Icons

<Canvas of={Tabs.WithIcons} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";
import { ReactComponent as PersonIcon } from "@webiny/icons/person.svg";
import { ReactComponent as LockIcon } from "@webiny/icons/lock.svg";

const WithIconsExample = () => {
return (

<Tabs
  tabs={[
    <Tabs.Tab
      key="account"
      value="account"
      trigger="Account"
      icon={<PersonIcon />}
      content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />,
    <Tabs.Tab
      key="password"
      value="password"
      trigger="Password"
      icon={<LockIcon />}
      content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />
  ]}
/>
); };

export default WithIconsExample;
` } } />

### With Disabled Tab

<Canvas of={Tabs.WithDisabledTab} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const WithDisabledTabExample = () => {
return (

<Tabs
  tabs={[
    <Tabs.Tab
      key="account"
      value="account"
      trigger="Account"
      content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      disabled={true}
    />,
    <Tabs.Tab
      key="password"
      value="password"
      trigger="Password"
      content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />
  ]}
/>
); };

export default WithDisabledTabExample;
` } } />

### With Hidden Tab

<Canvas of={Tabs.WithHiddenTab} source={ { code: `
import React from "react";
import { Tabs } from "@webiny/admin-ui";

const WithHiddenTabExample = () => {
return (

<Tabs
  tabs={[
    <Tabs.Tab
      key="account"
      value="account"
      trigger="Account"
      content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      visible={false}
    />,
    <Tabs.Tab
      key="password"
      value="password"
      trigger="Password"
      content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    />
  ]}
/>
); };

export default WithHiddenTabExample;
` } } />

## Anatomy

### Construction

<img src="/images/storybook/tabs/construction.png" alt="Construction" />

### Size & States

<img src="/images/storybook/tabs/size-and-states.png" alt="Size & States" />

### Tab Group

<img src="/images/storybook/tabs/tab-group.png" alt="Tab Group" />

## Usage

<img src="/images/storybook/tabs/usage.png" alt="Usage" />