1 | import * as React from 'react';
|
2 | import { storiesOf } from '@storybook/react';
|
3 | import styled from 'styled-components';
|
4 |
|
5 | import { Anchor, Tabs } from '../src';
|
6 |
|
7 | const Label = styled.p``;
|
8 | const Box1 = styled.div`background-color: white; height: 500px;`;
|
9 | const Box2 = styled.div`background-color: blue; height: 500px;`;
|
10 | const Box3 = styled.div`background-color: black; height: 500px;`;
|
11 | const Header = styled.header`background-color: blue; height: 200px;`;
|
12 |
|
13 |
|
14 | storiesOf('Accordion', module)
|
15 | .add('Default', () => (
|
16 | <React.Fragment>
|
17 | <Header>Nosso HEader</Header>
|
18 | <Anchor anchors={[
|
19 | { id: 'section-1', text: 'Seção 1' },
|
20 | { id: 'section-2', text: 'Seção 2' },
|
21 | { id: 'section-3', text: 'Seção 3' },
|
22 | ]}
|
23 | />
|
24 | <Box1 id='section-1'>
|
25 | <Tabs headers={['HTML', 'CSS', 'React', 'Angular']}>
|
26 | <Tabs.Panel fromHeader='HTML'>sdfssd</Tabs.Panel>
|
27 | <Tabs.Panel fromHeader='CSS'>fdsasdf</Tabs.Panel>
|
28 | <Tabs.Panel fromHeader='React'>asdfasdf</Tabs.Panel>
|
29 | <Tabs.Panel fromHeader='Angular'>Angular</Tabs.Panel>
|
30 | </Tabs>
|
31 | </Box1>
|
32 | <Box2 id='section-2' />
|
33 | <Box3 id='section-3' />
|
34 | </React.Fragment>
|
35 | )); |
\ | No newline at end of file |