Tom Kirkpatrick
6 years ago
3 changed files with 233 additions and 12 deletions
@ -1,10 +1,25 @@ |
|||
<style> |
|||
.story-title, |
|||
.story-subtitle, |
|||
.chapter-header, |
|||
.section-header, |
|||
.section-subsection, |
|||
.section-button-container { |
|||
filter: invert(100%); |
|||
.dark .story-title, |
|||
.dark .story-subtitle, |
|||
.dark .chapter-header, |
|||
.dark .section-header, |
|||
.dark .section-subsection, |
|||
.dark .section-button-container { |
|||
color: white !important; |
|||
display: block; |
|||
} |
|||
|
|||
.light .story-title, |
|||
.light .story-subtitle, |
|||
.light .chapter-header, |
|||
.light .section-header, |
|||
.light .section-subsection, |
|||
.light .section-button-container { |
|||
color: black !important; |
|||
display: block; |
|||
} |
|||
|
|||
.story-header p { |
|||
margin-bottom: 1em; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,5 +1,205 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { StateDecorator, Store } from '@sambego/storybook-state' |
|||
import { Box, Flex } from 'rebass' |
|||
import { |
|||
Bar, |
|||
Button, |
|||
Dropdown, |
|||
Form, |
|||
Heading, |
|||
Input, |
|||
Label, |
|||
LightningInvoiceInput, |
|||
Message, |
|||
Notification, |
|||
Range, |
|||
TextArea, |
|||
Toggle |
|||
} from 'components/UI' |
|||
|
|||
storiesOf('Welcome', module).addWithChapters('Zap Style Guide', { |
|||
subtitle: 'Reusable components for Zap Desktop.' |
|||
const Column = props => <Box width={1 / 4} mr={5} {...props} /> |
|||
const Group = ({ title, children }) => ( |
|||
<Box mb={4}> |
|||
<Heading.h3 mb={2} fontWeight="normal"> |
|||
{title} |
|||
</Heading.h3> |
|||
<Bar mb={3} /> |
|||
{children} |
|||
</Box> |
|||
) |
|||
Group.propTypes = { |
|||
title: PropTypes.string, |
|||
children: PropTypes.node |
|||
} |
|||
const Element = props => <Box py={1} {...props} /> |
|||
|
|||
const store = new Store({ |
|||
crypto: 'btc', |
|||
fiat: 'usd', |
|||
cryptoCurrencies: [ |
|||
{ |
|||
key: 'btc', |
|||
name: 'BTC' |
|||
}, |
|||
{ |
|||
key: 'bits', |
|||
name: 'bits' |
|||
}, |
|||
{ |
|||
key: 'sats', |
|||
name: 'satoshis' |
|||
} |
|||
], |
|||
fiatCurrencies: [ |
|||
{ |
|||
key: 'usd', |
|||
name: 'USD' |
|||
}, |
|||
{ |
|||
key: 'eur', |
|||
name: 'EUR' |
|||
}, |
|||
{ |
|||
key: 'gbp', |
|||
name: 'GBP' |
|||
} |
|||
] |
|||
}) |
|||
|
|||
storiesOf('Welcome', module) |
|||
.addDecorator(StateDecorator(store)) |
|||
.addWithChapters('Zap Style Guide', { |
|||
subtitle: 'Reusable components for Zap Desktop.', |
|||
info: `The Zap style guide showcases and documents our library of reusable React components. Below is a sample of
|
|||
three components. You can can full details of each component using the navigation on the left. |
|||
|
|||
Use the Theme Picker in the bottom panel to view components in one of our alternate themes.`,
|
|||
chapters: [ |
|||
{ |
|||
sections: [ |
|||
{ |
|||
options: { |
|||
showSource: false, |
|||
allowSourceToggling: false, |
|||
showPropTables: false, |
|||
allowPropTablesToggling: false |
|||
}, |
|||
sectionFn: () => ( |
|||
<Flex> |
|||
<Column> |
|||
<Group title="Message"> |
|||
<Element> |
|||
<Message variant="error">Error message</Message> |
|||
</Element> |
|||
<Element> |
|||
<Message variant="success">Success message</Message> |
|||
</Element> |
|||
<Element> |
|||
<Message variant="warning">Warning message</Message> |
|||
</Element> |
|||
</Group> |
|||
|
|||
<Group title="Notification"> |
|||
<Element> |
|||
<Notification variant="error">Error message</Notification> |
|||
</Element> |
|||
<Element> |
|||
<Notification variant="success">Success message</Notification> |
|||
</Element> |
|||
<Element> |
|||
<Notification variant="warning">Warning message</Notification> |
|||
</Element> |
|||
</Group> |
|||
</Column> |
|||
|
|||
<Column> |
|||
<Group title="Input with Label"> |
|||
<Form> |
|||
<Label htmlFor="input">Input Label</Label> |
|||
<Input field="input" /> |
|||
</Form> |
|||
</Group> |
|||
|
|||
<Group title="TextArea with Label"> |
|||
<Form> |
|||
<Label htmlFor="input">Input Label</Label> |
|||
<TextArea field="input" /> |
|||
</Form> |
|||
</Group> |
|||
|
|||
<Group title="Lightning Invoice Input"> |
|||
<Form> |
|||
<LightningInvoiceInput |
|||
field="input" |
|||
chain="bitcoin" |
|||
network="testnet" |
|||
rows={7} |
|||
validateOnBlur |
|||
validateOnChange |
|||
/* eslint-disable max-len */ |
|||
initialValue="lntb100u1pdaxza7pp5x73t3j7xgvkzgcdvzgpdg74k4pn0uhwuxlxu9qssytjn77x7zs4qdqqcqzysxqyz5vqd20eaq5uferzgzwasu5te3pla7gv8tzk8gcdxlj7lpkygvfdwndhwtl3ezn9ltjejl3hsp36ps3z3e5pp4rzp2hgqjqql80ec3hyzucq4d9axl" |
|||
/> |
|||
</Form> |
|||
</Group> |
|||
</Column> |
|||
|
|||
<Column> |
|||
<Group title="Button"> |
|||
<Element> |
|||
<Button>Text</Button> |
|||
</Element> |
|||
<Element> |
|||
<Button size="small">Text</Button> |
|||
</Element> |
|||
</Group> |
|||
|
|||
<Group title="Secondary Button"> |
|||
<Element> |
|||
<Button variant="secondary">Text</Button> |
|||
</Element> |
|||
</Group> |
|||
|
|||
<Group title="Loading Button"> |
|||
<Element> |
|||
<Button>Send 0.1235 BTC</Button> |
|||
</Element> |
|||
<Element> |
|||
<Button processing disabled> |
|||
Send 0.1235 BTC |
|||
</Button> |
|||
</Element> |
|||
</Group> |
|||
</Column> |
|||
|
|||
<Column> |
|||
<Group title="Dropdown"> |
|||
<Element> |
|||
<Dropdown |
|||
activeKey={store.get('fiat')} |
|||
items={store.get('fiatCurrencies')} |
|||
onChange={fiat => store.set({ fiat })} |
|||
/> |
|||
</Element> |
|||
</Group> |
|||
|
|||
<Group title="Toggle"> |
|||
<Form> |
|||
<Toggle field="input" /> |
|||
</Form> |
|||
</Group> |
|||
|
|||
<Group title="Range"> |
|||
<Form> |
|||
<Range field="input" /> |
|||
</Form> |
|||
</Group> |
|||
</Column> |
|||
</Flex> |
|||
) |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}) |
|||
|
|||
Loading…
Reference in new issue