mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
tabs story changes (#15147)
This commit is contained in:
parent
8cbfa2ea9e
commit
8ccd235a27
@ -1,35 +1,48 @@
|
||||
import React from 'react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
import Tab from './tab/tab.component';
|
||||
import Tabs from './tabs.component';
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/Tabs',
|
||||
id: __filename,
|
||||
argTypes: {
|
||||
tabs: {
|
||||
control: 'object',
|
||||
name: 'Tabs',
|
||||
},
|
||||
defaultActiveTabName: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
onTabClick: { action: 'onTabClick' },
|
||||
},
|
||||
args: {
|
||||
tabs: [
|
||||
{ name: 'Tab A', content: 'Tab A Content' },
|
||||
{ name: 'Tab B', content: 'Tab B Content' },
|
||||
{ name: 'Tab C', content: 'Tab C Content' },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
function renderTab(id) {
|
||||
function renderTab({ name, content }, index) {
|
||||
return (
|
||||
<Tab name={text(`Tab ${id} Name`, `Tab ${id}`)} key={id}>
|
||||
{text(`Tab ${id} Contents`, `Contents of Tab ${id}`)}
|
||||
<Tab name={name} key={name + index}>
|
||||
{content}
|
||||
</Tab>
|
||||
);
|
||||
}
|
||||
|
||||
export const TwoTabs = () => {
|
||||
return <Tabs>{['A', 'B'].map(renderTab)}</Tabs>;
|
||||
};
|
||||
|
||||
export const ManyTabs = () => {
|
||||
return <Tabs>{['A', 'B', 'C', 'D', 'E'].map(renderTab)}</Tabs>;
|
||||
};
|
||||
|
||||
export const SingleTab = () => {
|
||||
export const DefaultStory = (args) => {
|
||||
return (
|
||||
<Tabs>
|
||||
<Tab name={text('Name', 'Single A')}>
|
||||
{text('Contents', 'Contents of tab')}
|
||||
</Tab>
|
||||
<Tabs
|
||||
defaultActiveTabName={args.defaultActiveTabName}
|
||||
onTabClick={args.onTabClick}
|
||||
>
|
||||
{args.tabs.map((tabProps, i) => renderTab(tabProps, i))}
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
Loading…
Reference in New Issue
Block a user