2019-06-21 16:02:16 +00:00
import React from 'react' ;
import { storiesOf } from '@storybook/react' ;
2019-07-09 10:30:58 +00:00
import { Link , DropDownItem } from 'asc-web-components' ;
2019-06-24 14:57:26 +00:00
import { Container , Row , Col } from 'reactstrap' ;
2019-06-21 16:02:16 +00:00
const rowStyle = {
marginTop : 8 ,
paddingLeft : 20 ,
fontSize : 12
} ;
2019-06-24 14:57:26 +00:00
const headerStyle = {
marginTop : 8 ,
paddingLeft : 20 ,
fontSize : 16 ,
} ;
2019-07-29 07:52:06 +00:00
const data = [
{ key : 'key1' , label : 'Base button1' , onClick : ( ) => console . log ( 'Base button1 clicked' ) } ,
{ key : 'key2' , label : 'Base button2' , onClick : ( ) => console . log ( 'Base button2 clicked' ) } ,
{ key : 'key3' , isSeparator : true } ,
{ key : 'key4' , label : 'Base button3' , onClick : ( ) => console . log ( 'Base button3 clicked' ) }
] ;
2019-06-21 16:02:16 +00:00
storiesOf ( 'Components|Link' , module )
2019-06-24 08:30:20 +00:00
. addParameters ( { viewport : { defaultViewport : 'responsive' } } )
. addParameters ( { options : { showAddonPanel : false } } )
2019-06-21 16:02:16 +00:00
. add ( 'all' , ( ) => (
2019-07-29 07:52:06 +00:00
< >
< Container fluid >
< Row style = { headerStyle } >
< Col > Page links : < / C o l >
< Col > Action links : < / C o l >
< Col > Another using of action links : < / C o l >
< / R o w >
< Row style = { rowStyle } >
< Col >
< Link type = "page" color = "black" href = "https://github.com" isBold = { true } > Bold black page link < / L i n k >
2019-07-09 10:30:58 +00:00
< / C o l >
2019-06-24 14:57:26 +00:00
< Col >
2019-07-29 07:52:06 +00:00
< Link type = "action" color = "black" isBold = { true } > Bold black action link < / L i n k >
< / C o l >
< Col >
< Link type = "action" color = "black" dropdownType = 'alwaysDotted' data = { data } > Simple dropdown < / L i n k >
< / C o l >
< / R o w >
< Row style = { rowStyle } >
< Col >
< Link type = "page" color = "black" href = "https://github.com" > Black page link < / L i n k >
< / C o l >
< Col >
< Link type = "action" color = "black" > Black action link < / L i n k >
< / C o l >
< Col >
< Link type = "action" color = "gray" dropdownType = 'appearDottedAfterHover' text = 'Gray dropdown and dotted appear after hover' data = { data } > Black action link < / L i n k > < / C o l >
< / R o w >
< Row style = { rowStyle } >
< Col >
< Link type = "page" color = "black" href = "https://github.com" isHovered = { true } > Black hovered page link < / L i n k >
2019-06-24 14:57:26 +00:00
< / C o l >
< Col >
2019-07-29 07:52:06 +00:00
< Link type = "action" color = "black" isHovered = { true } > Black hovered action link < / L i n k >
2019-06-24 14:57:26 +00:00
< / C o l >
2019-06-25 14:14:55 +00:00
< Col > < / C o l >
2019-07-29 07:52:06 +00:00
< / R o w >
< Row style = { rowStyle } >
2019-06-24 14:57:26 +00:00
< Col >
2019-07-29 07:52:06 +00:00
< Link type = "page" color = "gray" href = "https://github.com" > Gray page link < / L i n k >
2019-06-24 14:57:26 +00:00
< / C o l >
< Col >
2019-07-29 07:52:06 +00:00
< Link type = "action" color = "gray" > Gray action link < / L i n k >
2019-06-24 14:57:26 +00:00
< / C o l >
2019-06-25 14:14:55 +00:00
< Col > < / C o l >
2019-07-29 07:52:06 +00:00
< / R o w >
< Row style = { rowStyle } >
2019-06-24 14:57:26 +00:00
< Col >
2019-07-29 07:52:06 +00:00
< Link type = "page" color = "gray" href = "https://github.com" isHovered = { true } > Gray hovered page link < / L i n k >
2019-06-24 14:57:26 +00:00
< / C o l >
< Col >
2019-07-29 07:52:06 +00:00
< Link type = "action" color = "gray" isHovered = { true } > Gray hovered action link < / L i n k >
2019-06-24 14:57:26 +00:00
< / C o l >
2019-06-25 14:14:55 +00:00
< Col > < / C o l >
2019-07-29 07:52:06 +00:00
< / R o w >
< Row style = { rowStyle } >
2019-06-24 14:57:26 +00:00
< Col >
2019-07-29 07:52:06 +00:00
< Link type = "page" color = "blue" href = "https://github.com" > Blue page link < / L i n k >
2019-06-24 14:57:26 +00:00
< / C o l >
< Col >
2019-07-29 07:52:06 +00:00
< Link type = "action" color = "blue" > Blue action link < / L i n k >
2019-06-24 14:57:26 +00:00
< / C o l >
< Col > < / C o l >
2019-07-29 07:52:06 +00:00
< / R o w >
< Row style = { rowStyle } >
2019-06-24 14:57:26 +00:00
< Col >
2019-07-29 07:52:06 +00:00
< Link type = "page" color = "blue" href = "https://github.com" isHovered = { true } > Blue hovered page link < / L i n k >
2019-06-24 14:57:26 +00:00
< / C o l >
< Col >
2019-07-29 07:52:06 +00:00
< Link type = "action" color = "blue" isHovered = { true } > Blue hovered action link < / L i n k >
2019-06-24 14:57:26 +00:00
< / C o l >
< Col > < / C o l >
2019-07-29 07:52:06 +00:00
< / R o w >
< Row style = { rowStyle } >
2019-07-05 12:36:54 +00:00
< Col >
2019-07-29 07:52:06 +00:00
< Link type = "page" color = "black" href = "https://github.com" isSemitransparent = { true } > Semitransparent black page link < / L i n k >
2019-07-05 12:36:54 +00:00
< / C o l >
< Col >
2019-07-29 07:52:06 +00:00
< Link type = "action" color = "black" isSemitransparent = { true } > Semitransparent black action link < / L i n k >
2019-07-05 12:36:54 +00:00
< / C o l >
< Col > < / C o l >
2019-07-29 07:52:06 +00:00
< / R o w >
< / C o n t a i n e r >
< / >
2019-06-24 08:30:20 +00:00
) ) ;