Web: Components: removed reactstrap from all.link.stories.js

This commit is contained in:
Nikita Gopienko 2019-12-04 09:10:37 +03:00
parent d7be3292d8
commit bc1a63cb24

View File

@ -1,62 +1,67 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import Link from '.';
import { Container, Row, Col } from 'reactstrap';
import React from "react";
import { storiesOf } from "@storybook/react";
import Link from ".";
const rowStyle = {
marginTop: 8,
paddingLeft: 20,
fontSize: 12
};
const rowStyle = { marginTop: 8, fontSize: 12 };
const headerStyle = {
marginTop: 8,
paddingLeft: 20,
fontSize: 16,
padding: "8px 0 0 40px",
fontSize: 16
};
storiesOf('Components|Link', module)
storiesOf("Components|Link", module)
.addParameters({ options: { showAddonPanel: false } })
.add('all', () => (
<>
<Container fluid>
<Row style={headerStyle}>
<Col>Page links:</Col>
<Col>Action links:</Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type="page" href="https://github.com" isBold={true}>Bold black page link</Link>
</Col>
<Col>
<Link type="action" isBold={true}>Bold black action link</Link>
</Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type="page" href="https://github.com">Black page link</Link>
</Col>
<Col>
<Link type="action">Black action link</Link>
</Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type="page" href="https://github.com" isHovered={true}>Black hovered page link</Link>
</Col>
<Col>
<Link type="action" isHovered={true}>Black hovered action link</Link>
</Col>
</Row>
<Row style={rowStyle}>
<Col>
<Link type="page" href="https://github.com" isSemitransparent={true}>Semitransparent black page link</Link>
</Col>
<Col>
<Link type="action" isSemitransparent={true}>Semitransparent black action link</Link>
</Col>
</Row>
</Container>
</>
.add("all", () => (
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
<div style={headerStyle}>
<div>Page links:</div>
<div>
<div style={rowStyle}>
<Link type="page" href="https://github.com" isBold={true}>
Bold black page link
</Link>
</div>
<div style={rowStyle}>
<Link type="page" href="https://github.com">
Black page link
</Link>
</div>
<div style={rowStyle}>
<Link type="page" href="https://github.com" isHovered={true}>
Black hovered page link
</Link>
</div>
<div style={rowStyle}>
<Link
type="page"
href="https://github.com"
isSemitransparent={true}
>
Semitransparent black page link
</Link>
</div>
</div>
</div>
<div style={headerStyle}>
<div>Action links:</div>
<div style={rowStyle}>
<Link type="action" isBold={true}>
Bold black action link
</Link>
</div>
<div style={rowStyle}>
<Link type="action">Black action link</Link>
</div>
<div style={rowStyle}>
<Link type="action" isHovered={true}>
Black hovered action link
</Link>
</div>
<div style={rowStyle}>
<Link type="action" isSemitransparent={true}>
Semitransparent black action link
</Link>
</div>
</div>
</div>
));