2019-08-05 13:09:12 +00:00
|
|
|
import React from 'react';
|
|
|
|
import { storiesOf } from '@storybook/react';
|
2019-08-06 09:04:01 +00:00
|
|
|
import { withKnobs, boolean } from '@storybook/addon-knobs/react';
|
2019-08-05 13:09:12 +00:00
|
|
|
import withReadme from 'storybook-readme/with-readme';
|
|
|
|
import Readme from './README.md';
|
2019-08-06 09:04:01 +00:00
|
|
|
import { TabContainer, Text } from 'asc-web-components';
|
2019-08-05 13:09:12 +00:00
|
|
|
import Section from '../../.storybook/decorators/section';
|
|
|
|
import { BooleanValue } from 'react-values';
|
|
|
|
|
2019-08-06 09:04:01 +00:00
|
|
|
const array_items = [
|
2019-08-05 13:09:12 +00:00
|
|
|
{
|
|
|
|
id: "0",
|
2019-08-05 14:41:39 +00:00
|
|
|
title: <Text.Body> Title1 </Text.Body>,
|
2019-08-05 16:05:03 +00:00
|
|
|
content:
|
2019-08-05 13:09:12 +00:00
|
|
|
<div >
|
|
|
|
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
|
|
|
|
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
|
|
|
|
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
|
|
|
|
</div>
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: "1",
|
2019-08-05 14:41:39 +00:00
|
|
|
title: <Text.Body> Title2 </Text.Body>,
|
2019-08-05 16:05:03 +00:00
|
|
|
content:
|
2019-08-05 13:09:12 +00:00
|
|
|
<div >
|
|
|
|
<div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
|
|
|
|
<div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
|
|
|
|
<div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
|
|
|
|
</div>
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: "2",
|
2019-08-05 14:41:39 +00:00
|
|
|
title: <Text.Body> Title3 </Text.Body>,
|
2019-08-05 16:05:03 +00:00
|
|
|
content:
|
2019-08-05 13:09:12 +00:00
|
|
|
<div>
|
|
|
|
<div> <input></input> <input></input> <input></input> </div>
|
|
|
|
<div> <input></input> <input></input> <input></input> </div>
|
|
|
|
<div> <input></input> <input></input> <input></input> </div>
|
|
|
|
</div>
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: "3",
|
2019-08-05 14:41:39 +00:00
|
|
|
title: <Text.Body> Title4 </Text.Body>,
|
2019-08-05 16:05:03 +00:00
|
|
|
content:
|
2019-08-05 13:09:12 +00:00
|
|
|
<div>
|
2019-08-05 14:41:39 +00:00
|
|
|
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
|
|
|
|
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
|
|
|
|
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
|
2019-08-05 13:09:12 +00:00
|
|
|
</div>
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: "4",
|
2019-08-05 14:41:39 +00:00
|
|
|
title: <Text.Body> Title5 </Text.Body>,
|
2019-08-05 16:05:03 +00:00
|
|
|
content:
|
2019-08-05 13:09:12 +00:00
|
|
|
<div>
|
2019-08-05 14:41:39 +00:00
|
|
|
<div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
|
|
|
|
<div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
|
|
|
|
<div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
|
2019-08-05 13:09:12 +00:00
|
|
|
</div>
|
|
|
|
}
|
|
|
|
];
|
|
|
|
|
2019-08-06 09:04:01 +00:00
|
|
|
storiesOf('Components|TabContainer', module)
|
2019-08-05 13:09:12 +00:00
|
|
|
.addDecorator(withKnobs)
|
|
|
|
.addDecorator(withReadme(Readme))
|
|
|
|
.add('base', () => {
|
|
|
|
return (
|
2019-08-05 16:05:03 +00:00
|
|
|
<Section>
|
|
|
|
<BooleanValue>
|
2019-08-06 09:04:01 +00:00
|
|
|
<TabContainer isDisabled={boolean('isDisabled', false)}>
|
|
|
|
{array_items}
|
|
|
|
</TabContainer>
|
2019-08-05 16:05:03 +00:00
|
|
|
</BooleanValue>
|
|
|
|
</Section>
|
2019-08-05 13:09:12 +00:00
|
|
|
);
|
|
|
|
});
|