import React from "react";
import TabContainer from "./";
import styled from "styled-components";
export default {
title: "Components/TabContainer",
component: TabContainer,
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/ZiW5KSwb4t7Tj6Nz5TducC/UI-Kit-DocSpace-1.0.0?type=design&node-id=638-4439&mode=design&t=TBNCKMQKQMxr44IZ-0",
},
},
};
const arrayItems = [
{
key: "tab0",
title: "Title1",
content: (
),
},
{
key: "tab1",
title: "Title2",
content: (
),
},
{
key: "tab2",
title: "Title3",
content: (
),
},
{
key: "tab3",
title: "Title4",
content: (
),
},
{
key: "tab4",
title: "Title5",
content: (
),
},
];
const scrollArrayItems = [
{
key: "tab0",
title: "First long tab container",
content: (
<>
>
),
},
{
key: "tab1",
title: "Short",
content: (
<>
>
),
},
{
key: "tab2",
title: "Second long tab container",
content: (
<>
>
),
},
{
key: "tab3",
title: "Short2",
content: (
<>
>
),
},
{
key: "tab4",
title: "Third long tab container header",
content: (
<>
>
),
},
{
key: "tab5",
title: "Short3",
content: (
<>
>
),
},
{
key: "tab6",
title: "tab container",
content: (
<>
>
),
},
{
key: "tab7",
title: "Very long tabs-container field",
content: (
<>
>
),
},
{
key: "tab8",
title: "tab container",
content: (
<>
>
),
},
{
key: "tab9",
title: "Short_04",
content: (
<>
>
),
},
{
key: "tab10",
title: "Short__05",
content: (
<>
>
),
},
{
key: "tab11",
title: "TabsContainer",
content: (
<>
>
),
},
];
const tabsItems = [
{
key: "tab0",
title: "Title00000000",
content: (
<>
>
),
},
{
key: "tab1",
title: "Title00000001",
content: (
<>
>
),
},
{
key: "tab2",
title: "Title00000002",
content: (
<>
>
),
},
{
key: "tab3",
title: "Title00000003",
content: (
<>
>
),
},
{
key: "tab4",
title: "Title00000004",
content: (
<>
>
),
},
{
key: "tab5",
title: "Title00000005",
content: (
<>
>
),
},
{
key: "tab6",
title: "Title00000006",
content: (
<>
>
),
},
{
key: "tab7",
title: "Title00000007",
content: (
<>
>
),
},
{
key: "tab8",
title: "Title00000008",
content: (
<>
>
),
},
{
key: "tab9",
title: "Title00000009",
content: (
<>
>
),
},
];
const StyledTitle = styled.h5.attrs({ dir: "auto" })`
text-align: ${({ theme }) =>
theme.interfaceDirection === "rtl" ? `right` : `left`};
`;
const Template = ({ onSelect, ...args }) => {
return (
Base TabsContainer:
onSelect(index)}
selectedItem={arrayItems.indexOf(arrayItems[0])}
elements={arrayItems}
/>
Autoscrolling with different tab widths:
onSelect(index)}
/>
Autoscrolling with the same tabs width:
onSelect(index)}
/>
);
};
export const basic = Template.bind({});
basic.args = {
isDisabled: false,
};