From 0c90ef70a37bd2ef4c6640b1d9ce95b9365abb52 Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Wed, 7 Nov 2018 15:18:44 +0100 Subject: [PATCH 1/2] style(storybook): reorganise and tidy up storybook --- .storybook/config.js | 9 +- .storybook/preview-head.html | 27 +++- app/components/Pay/Pay.js | 5 +- app/components/Request/Request.js | 22 +-- app/components/UI/Bar.js | 42 +++--- app/components/UI/Dropdown.js | 58 ++++---- app/components/UI/MainContent.js | 4 +- app/components/UI/Menu.js | 6 +- app/components/UI/Page.js | 1 - app/components/UI/Panel.js | 11 +- app/components/UI/QRCode.js | 4 +- app/components/UI/Sidebar.js | 2 +- stories/{ => _general}/_welcome.stories.js | 4 +- stories/{ => _general}/color.stories.js | 8 +- stories/_general/typography.stories.js | 79 +++++++++++ stories/components/background.stories.js | 86 ++++++++---- stories/components/bar.stories.js | 14 +- stories/components/button.stories.js | 127 ++++++++++++------ stories/components/countdown.stories.js | 2 +- stories/components/dropdown.stories.js | 118 +++++++++------- stories/components/header.stories.js | 21 ++- stories/components/menu.stories.js | 39 ++++-- stories/components/message.stories.js | 25 ++++ stories/components/modal.stories.js | 40 ++++-- stories/components/notification.stories.js | 30 ++++- stories/components/page-elements.stories.js | 20 --- stories/components/panel.stories.js | 11 -- stories/components/qrcode.stories.js | 28 +++- stories/components/spinner.stories.js | 13 +- stories/components/typography.stories.js | 25 ---- stories/{pages => containers}/pay.stories.js | 0 .../{pages => containers}/request.stories.js | 0 stories/{components => forms}/form.stories.js | 2 +- stories/helpers.js | 20 ++- stories/{components => icons}/icon.stories.js | 2 +- stories/layouts/page.stories.js | 42 ++++++ stories/layouts/panel.stories.js | 40 ++++++ .../PaySummaryLightning.spec.js.snap | 27 +++- .../PaySummaryOnchain.spec.js.snap | 18 ++- .../UI/__snapshots__/Bar.spec.js.snap | 10 +- .../UI/__snapshots__/Dropdown.spec.js.snap | 72 +++++----- .../UI/__snapshots__/MainContent.spec.js.snap | 2 - .../UI/__snapshots__/Menu.spec.js.snap | 2 + .../UI/__snapshots__/Page.spec.js.snap | 4 - .../UI/__snapshots__/Panel.spec.js.snap | 34 ++--- .../UI/__snapshots__/QRCode.spec.js.snap | 8 +- .../UI/__snapshots__/Sidebar.spec.js.snap | 1 - 47 files changed, 775 insertions(+), 390 deletions(-) rename stories/{ => _general}/_welcome.stories.js (98%) rename stories/{ => _general}/color.stories.js (90%) create mode 100644 stories/_general/typography.stories.js create mode 100644 stories/components/message.stories.js delete mode 100644 stories/components/page-elements.stories.js delete mode 100644 stories/components/panel.stories.js delete mode 100644 stories/components/typography.stories.js rename stories/{pages => containers}/pay.stories.js (100%) rename stories/{pages => containers}/request.stories.js (100%) rename stories/{components => forms}/form.stories.js (99%) rename stories/{components => icons}/icon.stories.js (98%) create mode 100644 stories/layouts/page.stories.js create mode 100644 stories/layouts/panel.stories.js diff --git a/.storybook/config.js b/.storybook/config.js index 94bedc32..c8e1b260 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -16,9 +16,12 @@ import { getDefaultLocale, locales } from 'lib/i18n' import { BackgroundPrimary, GlobalStyle } from 'components/UI' const BackgroundPrimaryWithTheme = withTheme(({ theme, ...rest }) => ( -
- -
+ )) // Register supported locales. diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index d8a3a070..fe7af838 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -3,23 +3,44 @@ .dark .story-subtitle, .dark .chapter-header, .dark .section-header, + .dark .section-title, .dark .section-subsection, - .dark .section-button-container { + .dark .section-button-container, + .dark .chapter-h3 { color: white !important; display: block; } + .dark .chapter-header { + border-bottom: 1px solid rgba(255, 255, 255, .5) !important; + } + .light .story-title, .light .story-subtitle, .light .chapter-header, .light .section-header, + .light .section-title, .light .section-subsection, - .light .section-button-container { + .light .section-button-container, + .light .chapter-h3 { color: black !important; display: block; } + .light .chapter-header { + border-bottom: 1px solid rgba(0, 0, 0, .5) !important; + } + + .chapter-header { + margin-bottom: 30px !important; + } .story-header p { - margin-bottom: 1em; + margin-bottom: 1em !important; + } + .section-container { + margin-bottom: 30px !important; + } + .section-component-container { + margin-bottom: 15px !important; } diff --git a/app/components/Pay/Pay.js b/app/components/Pay/Pay.js index 2988c750..39bc39d4 100644 --- a/app/components/Pay/Pay.js +++ b/app/components/Pay/Pay.js @@ -678,9 +678,10 @@ class Pay extends React.Component { })} ${cryptoName} (${cryptoCurrencyTicker})`} type={isLn ? 'offchain' : isOnchain ? 'onchain' : null} /> + - - + + {this.renderHelpText()} diff --git a/app/components/Request/Request.js b/app/components/Request/Request.js index ba4d1102..c2208911 100644 --- a/app/components/Request/Request.js +++ b/app/components/Request/Request.js @@ -321,9 +321,9 @@ class Request extends React.Component { subtitle={} logo={} /> + - - + {currentStep == 'form' ? ( {this.renderHelpText()} @@ -347,14 +347,16 @@ class Request extends React.Component { {currentStep == 'form' && ( - + + + )} diff --git a/app/components/UI/Bar.js b/app/components/UI/Bar.js index c9a19070..2c9ab6a7 100644 --- a/app/components/UI/Bar.js +++ b/app/components/UI/Bar.js @@ -1,28 +1,20 @@ -import React from 'react' -import { Card } from 'rebass' +import system from '@rebass/components' -/** - * @render react - * @name Bar - * @example - * - */ -class Bar extends React.PureComponent { - render() { - return ( - - ) - } -} +const Bar = system( + { + is: 'hr', + m: 0, + border: 0, + borderBottom: 1, + borderColor: 'primaryText', + opacity: 0.6 + }, + 'borders', + 'borderColor', + 'space', + 'opacity' +) + +Bar.displayName = 'Bar' export default Bar diff --git a/app/components/UI/Dropdown.js b/app/components/UI/Dropdown.js index 0e50c3fd..1a253f78 100644 --- a/app/components/UI/Dropdown.js +++ b/app/components/UI/Dropdown.js @@ -152,34 +152,36 @@ class Dropdown extends React.Component { }) const selectedItem = items.find(c => c.key === activeKey) return ( - - - - {selectedItem ? selectedItem.name : activeKey}{' '} - {isOpen ? : } - - - {isOpen && ( - - - {items.map(item => { - return ( - this.onChange(item.key)}> - - - {activeKey === item.key && ( - - )} - - {item.name} - - - ) - })} - - - )} - +
+ + + + {selectedItem ? selectedItem.name : activeKey}{' '} + {isOpen ? : } + + + {isOpen && ( + + + {items.map(item => { + return ( + this.onChange(item.key)}> + + + {activeKey === item.key && ( + + )} + + {item.name} + + + ) + })} + + + )} + +
) } } diff --git a/app/components/UI/MainContent.js b/app/components/UI/MainContent.js index ce2135ce..d7ec0fa5 100644 --- a/app/components/UI/MainContent.js +++ b/app/components/UI/MainContent.js @@ -7,8 +7,6 @@ import { BackgroundPrimary } from 'components/UI' * @example * Some content */ -const MainContent = props => ( - -) +const MainContent = props => export default MainContent diff --git a/app/components/UI/Menu.js b/app/components/UI/Menu.js index cd3ad2c7..c588e1ca 100644 --- a/app/components/UI/Menu.js +++ b/app/components/UI/Menu.js @@ -7,9 +7,11 @@ const SystemMenu = system( { extend: MenuBase, mb: 2, - p: 0 + p: 0, + color: 'primaryText' }, - 'space' + 'space', + 'color' ) const StyledMenu = styled(SystemMenu)` diff --git a/app/components/UI/Page.js b/app/components/UI/Page.js index 73a876c6..e686645a 100644 --- a/app/components/UI/Page.js +++ b/app/components/UI/Page.js @@ -9,7 +9,6 @@ import { Flex } from 'rebass' */ const Page = ({ css, ...rest }) => ( ( - + {children} - + ) PanelHeader.propTypes = { children: PropTypes.node } const PanelBody = ({ children, ...rest }) => ( - + {children} ) PanelBody.propTypes = { children: PropTypes.node } const PanelFooter = ({ children, ...rest }) => ( - + {children} - + ) PanelFooter.propTypes = { children: PropTypes.node } diff --git a/app/components/UI/QRCode.js b/app/components/UI/QRCode.js index d8c12009..abe7dbc8 100644 --- a/app/components/UI/QRCode.js +++ b/app/components/UI/QRCode.js @@ -70,8 +70,8 @@ class ZapQRCode extends React.PureComponent { static defaultProps = { size: '150px', - color: 'primaryColor', - bg: 'primaryText' + color: 'black', + bg: 'white' } render() { diff --git a/app/components/UI/Sidebar.js b/app/components/UI/Sidebar.js index ca6481d8..0a6be03d 100644 --- a/app/components/UI/Sidebar.js +++ b/app/components/UI/Sidebar.js @@ -7,7 +7,7 @@ import { BackgroundTertiary } from 'components/UI' * @example * Some content */ -const Sidebar = props => +const Sidebar = props => Sidebar.small = props => Sidebar.medium = props => diff --git a/stories/_welcome.stories.js b/stories/_general/_welcome.stories.js similarity index 98% rename from stories/_welcome.stories.js rename to stories/_general/_welcome.stories.js index 093a4798..9d85cbf5 100644 --- a/stories/_welcome.stories.js +++ b/stories/_general/_welcome.stories.js @@ -15,7 +15,7 @@ import { TextArea, Toggle } from 'components/UI' -import { Column, Group, Element } from './helpers' +import { Column, Group, Element } from '../helpers' const store = new Store({ crypto: 'btc', @@ -50,7 +50,7 @@ const store = new Store({ ] }) -storiesOf('Welcome', module) +storiesOf('General', module) .addDecorator(StateDecorator(store)) .addWithChapters('Zap Style Guide', { subtitle: 'Reusable components for Zap Desktop.', diff --git a/stories/color.stories.js b/stories/_general/color.stories.js similarity index 90% rename from stories/color.stories.js rename to stories/_general/color.stories.js index e0d32bed..7fede8f5 100644 --- a/stories/color.stories.js +++ b/stories/_general/color.stories.js @@ -5,7 +5,7 @@ import { ThemeProvider, withTheme } from 'styled-components' import { Box, Card, Flex } from 'rebass' import { BackgroundPrimary, Text } from 'components/UI' import { dark, light } from 'themes' -import { Column, Group, Element } from './helpers' +import { Column, Group, Element } from '../helpers' const Swatch = ({ name, color }) => ( @@ -42,7 +42,7 @@ const Palette = withTheme(({ theme, ...rest }) => ( )) -storiesOf('Welcome', module).addWithChapters('Color palette', { +storiesOf('General', module).addWithChapters('Color palette', { subtitle: 'Colors that we use throughout the app.', info: `This page shows our two primary colour palettes. These are used as "themes" that users can switch between within the app.`, @@ -59,7 +59,7 @@ storiesOf('Welcome', module).addWithChapters('Color palette', { sectionFn: () => ( - + @@ -69,7 +69,7 @@ storiesOf('Welcome', module).addWithChapters('Color palette', { - + diff --git a/stories/_general/typography.stories.js b/stories/_general/typography.stories.js new file mode 100644 index 00000000..4f5d2a50 --- /dev/null +++ b/stories/_general/typography.stories.js @@ -0,0 +1,79 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' +import { Heading, Text } from 'components/UI' + +storiesOf('General', module).addWithChapters('Typography', { + subtitle: 'Text styles that we use throughout the app.', + info: `This page shows the various fonts and font styles that we use. All text uses the "Roboto" font family.`, + chapters: [ + { + title: 'Heading', + sections: [ + { + title: 'h1', + sectionFn: () => The quick brown fox jumps over the lazy dog + }, + { + title: 'h2', + sectionFn: () => The quick brown fox jumps over the lazy dog + }, + { + title: 'h3', + sectionFn: () => The quick brown fox jumps over the lazy dog + }, + { + title: 'h4', + sectionFn: () => The quick brown fox jumps over the lazy dog + } + ] + }, + { + title: 'Text (weights)', + sections: [ + { + title: 'Normal', + sectionFn: () => ( + The quick brown fox jumps over the lazy dog + ) + }, + { + title: 'Light', + sectionFn: () => The quick brown fox jumps over the lazy dog + } + ] + }, + { + title: 'Text (sizes)', + sections: [ + { + title: 'Extra Extra large', + sectionFn: () => The quick brown fox jumps over the lazy dog + }, + { + title: 'Extra Large', + sectionFn: () => The quick brown fox jumps over the lazy dog + }, + { + title: 'Large', + sectionFn: () => The quick brown fox jumps over the lazy dog + }, + { + title: 'Medium', + sectionFn: () => The quick brown fox jumps over the lazy dog + }, + { + title: 'Small', + sectionFn: () => The quick brown fox jumps over the lazy dog + }, + { + title: 'Extra Small', + sectionFn: () => The quick brown fox jumps over the lazy dog + }, + { + title: 'Extra Extra Small', + sectionFn: () => The quick brown fox jumps over the lazy dog + } + ] + } + ] +}) diff --git a/stories/components/background.stories.js b/stories/components/background.stories.js index 42c837e7..d88be220 100644 --- a/stories/components/background.stories.js +++ b/stories/components/background.stories.js @@ -1,26 +1,66 @@ import React from 'react' +import PropTypes from 'prop-types' import { storiesOf } from '@storybook/react' -import { BackgroundPrimary, BackgroundTertiary, BackgroundSecondary } from 'components/UI' +import { BackgroundPrimary, BackgroundTertiary, BackgroundSecondary, Page } from 'components/UI' +import { Content } from '../helpers' -storiesOf('Components.Background', module) - .add('dark', () => ( - - )) - .add('light', () => ( - - )) - .add('lightest', () => ( - - )) +const Wrapper = ({ children }) => ( + {children} +) +Wrapper.propTypes = { + children: PropTypes.node +} + +storiesOf('Components', module).addWithChapters('Background', { + chapters: [ + { + sections: [ + { + options: { + decorator: story => {story()} + }, + sectionFn: () => ( + + BackgroundPrimary + + ) + }, + { + options: { + decorator: story => {story()} + }, + sectionFn: () => ( + + BackgroundSecondary + + ) + }, + { + options: { + decorator: story => {story()} + }, + sectionFn: () => ( + + BackgroundTertiary + + ) + } + ] + } + ] +}) diff --git a/stories/components/bar.stories.js b/stories/components/bar.stories.js index 2563d543..da5dc8af 100644 --- a/stories/components/bar.stories.js +++ b/stories/components/bar.stories.js @@ -2,4 +2,16 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { Bar } from 'components/UI' -storiesOf('Components.Bar', module).add('bar', () => ) +storiesOf('Components', module).addWithChapters('Bar', { + subtitle: 'For dividing sections.', + info: `The Bar component is used to divide sections.`, + chapters: [ + { + sections: [ + { + sectionFn: () => + } + ] + } + ] +}) diff --git a/stories/components/button.stories.js b/stories/components/button.stories.js index e90f4a09..29a05dd9 100644 --- a/stories/components/button.stories.js +++ b/stories/components/button.stories.js @@ -5,43 +5,90 @@ import { Button } from 'components/UI' import SystemNavPrevious from 'components/Icon/SystemNavPrevious' import SystemNavNext from 'components/Icon/SystemNavNext' -storiesOf('Components.Button', module) - .add('Basic', () => ) - .add('With Icon', () => ( -
- {' '} - -
- )) - .add('Processing', () => ( - - )) - .add('Disabled', () => ( - - )) - .add('Primary', () => ( - - )) - .add('Secondary', () => ( - - )) - .add('Small', () => ( - - )) - .add('Normal', () => ) +storiesOf('Components', module).addWithChapters('Button', { + subtitle: 'Buttons for forms and anything else that the user might want to click on.', + chapters: [ + { + sections: [ + { + title: 'Basic', + sectionFn: () => + }, + { + title: 'With Icon', + sectionFn: () => ( +
+ {' '} + +
+ ) + } + ] + }, + { + title: 'Variants', + sections: [ + { + title: 'Primary', + sectionFn: () => ( + + ) + }, + { + title: 'Secondary', + sectionFn: () => ( + + ) + } + ] + }, + { + title: 'States', + sections: [ + { + title: 'Processing', + sectionFn: () => ( + + ) + }, + { + title: 'Disabled', + sectionFn: () => ( + + ) + } + ] + }, + { + title: 'Sizes', + sections: [ + { + title: 'Medium', + sectionFn: () => + }, + { + title: 'Small', + sectionFn: () => ( + + ) + } + ] + } + ] +}) diff --git a/stories/components/countdown.stories.js b/stories/components/countdown.stories.js index 1add657f..be70b769 100644 --- a/stories/components/countdown.stories.js +++ b/stories/components/countdown.stories.js @@ -2,7 +2,7 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { Countdown } from 'components/UI' -storiesOf('Components.Countdown', module).addWithChapters('Countdown', { +storiesOf('Components', module).addWithChapters('Countdown', { chapters: [ { sections: [ diff --git a/stories/components/dropdown.stories.js b/stories/components/dropdown.stories.js index 86b76f27..0256c025 100644 --- a/stories/components/dropdown.stories.js +++ b/stories/components/dropdown.stories.js @@ -1,58 +1,76 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { StateDecorator, Store } from '@sambego/storybook-state' +import { State, Store } from '@sambego/storybook-state' import { Dropdown } from 'components/UI' -const store = new Store({ - crypto: 'btc', - fiat: 'usd', - cryptoCurrencies: [ +storiesOf('Components', module).addWithChapters('Dropdown', { + chapters: [ { - 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' + sections: [ + { + title: 'Left justify (default)', + sectionFn: () => { + const store = new Store({ + crypto: 'btc', + cryptoCurrencies: [ + { + key: 'btc', + name: 'BTC' + }, + { + key: 'bits', + name: 'bits' + }, + { + key: 'sats', + name: 'satoshis' + } + ] + }) + return ( + + store.set({ crypto })} + /> + + ) + } + }, + { + title: 'Right justify', + sectionFn: () => { + const store = new Store({ + fiat: 'usd', + fiatCurrencies: [ + { + key: 'usd', + name: 'USD' + }, + { + key: 'eur', + name: 'EUR' + }, + { + key: 'gbp', + name: 'GBP' + } + ] + }) + return ( + + store.set({ fiat })} + justify="right" + /> + + ) + } + } + ] } ] }) - -storiesOf('Components.Dropdown', module) - .addDecorator(StateDecorator(store)) - .add('Crypto', () => { - return ( - store.set({ crypto })} - /> - ) - }) - .add('Fiat', () => { - return ( - store.set({ fiat })} - /> - ) - }) diff --git a/stories/components/header.stories.js b/stories/components/header.stories.js index 066cff81..86c4c6b3 100644 --- a/stories/components/header.stories.js +++ b/stories/components/header.stories.js @@ -3,6 +3,21 @@ import { storiesOf } from '@storybook/react' import { Header } from 'components/UI' import Lightning from 'components/Icon/Lightning' -storiesOf('Components.Header', module).add('Header', () => ( -
} /> -)) +storiesOf('Components', module).addWithChapters('Header', { + subtitle: 'A section heading with on optional title, subtitle, and icon.', + chapters: [ + { + sections: [ + { + sectionFn: () => ( +
} + /> + ) + } + ] + } + ] +}) diff --git a/stories/components/menu.stories.js b/stories/components/menu.stories.js index 4ff08eb1..18cee3a4 100644 --- a/stories/components/menu.stories.js +++ b/stories/components/menu.stories.js @@ -3,18 +3,29 @@ import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' import { Menu, MenuItem, MenuItemGroup } from 'components/UI' -storiesOf('Components.Menu', module).add('Menu', () => ( - - - My item 1 - My item 2 - My item 3 - +storiesOf('Components', module).addWithChapters('Menu', { + subtitle: 'A section heading with on optional title, subtitle, and icon.', + chapters: [ + { + sections: [ + { + sectionFn: () => ( + + + My item 1 + My item 2 + My item 3 + - - Other item 1 - Other item 2 - Other item 3 - - -)) + + Other item 1 + Other item 2 + Other item 3 + + + ) + } + ] + } + ] +}) diff --git a/stories/components/message.stories.js b/stories/components/message.stories.js new file mode 100644 index 00000000..f686ab0b --- /dev/null +++ b/stories/components/message.stories.js @@ -0,0 +1,25 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' +import { Message } from 'components/UI' + +storiesOf('Components', module).addWithChapters('Message', { + subtitle: 'For displaying messages.', + chapters: [ + { + sections: [ + { + title: 'Success', + sectionFn: () => Success message + }, + { + title: 'Warning', + sectionFn: () => Warning message + }, + { + title: 'Error', + sectionFn: () => Error message + } + ] + } + ] +}) diff --git a/stories/components/modal.stories.js b/stories/components/modal.stories.js index 30393670..6a5d9b6a 100644 --- a/stories/components/modal.stories.js +++ b/stories/components/modal.stories.js @@ -3,16 +3,30 @@ import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' import { Modal, Page, Text } from 'components/UI' -storiesOf('Components.Modal', module).add('Modal', () => ( - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - -)) +storiesOf('Components', module).addWithChapters('Modal', { + subtitle: 'For displaying content in an overlay.', + info: `We use modals to display popup screens on top of your current position in the app. Closing the modal should + take you back to where you were before you opened it.`, + chapters: [ + { + sections: [ + { + sectionFn: () => ( + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui + officia deserunt mollit anim id est laborum. + + + + ) + } + ] + } + ] +}) diff --git a/stories/components/notification.stories.js b/stories/components/notification.stories.js index 4c6f7a04..e37d2fff 100644 --- a/stories/components/notification.stories.js +++ b/stories/components/notification.stories.js @@ -2,8 +2,28 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { Notification } from 'components/UI' -storiesOf('Components.Notification', module) - .add('Success', () => Success message) - .add('Warning', () => Warning message) - .add('Error', () => Error message) - .add('Processing', () => Processing message) +storiesOf('Components', module).addWithChapters('Notification', { + subtitle: 'For displaying important messages.', + chapters: [ + { + sections: [ + { + title: 'Success', + sectionFn: () => Success notification + }, + { + title: 'Warning', + sectionFn: () => Warning notification + }, + { + title: 'Error', + sectionFn: () => Error notification + }, + { + title: 'Processing', + sectionFn: () => Processing notification + } + ] + } + ] +}) diff --git a/stories/components/page-elements.stories.js b/stories/components/page-elements.stories.js deleted file mode 100644 index e7b4fb58..00000000 --- a/stories/components/page-elements.stories.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { Page, MainContent, Sidebar } from 'components/UI' - -storiesOf('Components.Layouts', module) - .add('MainContent', () => Main content) - .add('Sidebar', () => Sidebar) - .add('Page', () => Page) - .add('Page - sidebar left', () => ( - - Sidebar left - Main content - - )) - .add('Page - sidebar right', () => ( - - Main content - Sidebar right - - )) diff --git a/stories/components/panel.stories.js b/stories/components/panel.stories.js deleted file mode 100644 index 06fe5796..00000000 --- a/stories/components/panel.stories.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { Panel } from 'components/UI' - -storiesOf('Components.Panel', module).add('Panel', () => ( - - Header here - Body here - Footer here - -)) diff --git a/stories/components/qrcode.stories.js b/stories/components/qrcode.stories.js index 40c8ad58..fa75d09a 100644 --- a/stories/components/qrcode.stories.js +++ b/stories/components/qrcode.stories.js @@ -2,6 +2,28 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { QRCode } from 'components/UI' -storiesOf('Components.QR Code', module).add('QR Code', () => ( - -)) +storiesOf('Components', module).addWithChapters('QR Code', { + subtitle: 'For displaying complex data in an easily scannable format.', + chapters: [ + { + sections: [ + { + title: 'default size', + sectionFn: () => ( + /* eslint-disable max-len */ + + ) + }, + { + title: 'custom size', + sectionFn: () => ( + + ) + } + ] + } + ] +}) diff --git a/stories/components/spinner.stories.js b/stories/components/spinner.stories.js index c3a99846..745ff570 100644 --- a/stories/components/spinner.stories.js +++ b/stories/components/spinner.stories.js @@ -3,4 +3,15 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { Spinner } from 'components/UI' -storiesOf('Components.Spinners', module).add('circle', () => ) +storiesOf('Components', module).addWithChapters('Spinner', { + subtitle: 'For letting the user know that something is happening.', + chapters: [ + { + sections: [ + { + sectionFn: () => + } + ] + } + ] +}) diff --git a/stories/components/typography.stories.js b/stories/components/typography.stories.js deleted file mode 100644 index 275b57d9..00000000 --- a/stories/components/typography.stories.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { Heading, Text } from 'components/UI' - -storiesOf('Components.Typography', module) - .add('heading', () => ( - - This is a default heading (h2) - This is an h1 - This is an h2 - This is an h3 - This is an h4 - This is an h5 - This is an h6 - - )) - .add('text', () => ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat - non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - )) diff --git a/stories/pages/pay.stories.js b/stories/containers/pay.stories.js similarity index 100% rename from stories/pages/pay.stories.js rename to stories/containers/pay.stories.js diff --git a/stories/pages/request.stories.js b/stories/containers/request.stories.js similarity index 100% rename from stories/pages/request.stories.js rename to stories/containers/request.stories.js diff --git a/stories/components/form.stories.js b/stories/forms/form.stories.js similarity index 99% rename from stories/components/form.stories.js rename to stories/forms/form.stories.js index 40442bc4..e0e74e7a 100644 --- a/stories/components/form.stories.js +++ b/stories/forms/form.stories.js @@ -31,7 +31,7 @@ const selectItems = [ { value: 'banana' } ] -storiesOf('Components.Form', module) +storiesOf('Forms', module) .add('Input', () => (
diff --git a/stories/helpers.js b/stories/helpers.js index 58842963..ca6d2c39 100644 --- a/stories/helpers.js +++ b/stories/helpers.js @@ -1,20 +1,30 @@ import React from 'react' import PropTypes from 'prop-types' -import { Box } from 'rebass' -import { Bar, Heading } from 'components/UI' +import { Box, Flex } from 'rebass' +import { Bar, Heading, Page } from 'components/UI' +export const Window = props => export const Column = props => -export const Group = ({ title, children }) => ( +export const Group = ({ title, children, withBar = true }) => ( {title} - + {withBar && } {children} ) Group.propTypes = { title: PropTypes.string, - children: PropTypes.node + children: PropTypes.node, + withBar: PropTypes.bool } export const Element = props => +export const Content = ({ children }) => ( + + {children} + +) +Content.propTypes = { + children: PropTypes.node +} diff --git a/stories/components/icon.stories.js b/stories/icons/icon.stories.js similarity index 98% rename from stories/components/icon.stories.js rename to stories/icons/icon.stories.js index b53992c4..280da5c1 100644 --- a/stories/components/icon.stories.js +++ b/stories/icons/icon.stories.js @@ -106,7 +106,7 @@ const zapIconsList = { ZapLogoBlack } -const zapIconStories = storiesOf('Components.Icon', module) +const zapIconStories = storiesOf('Icons', module) Object.keys(zapIconsList).forEach(name => { var Icon = zapIconsList[name] diff --git a/stories/layouts/page.stories.js b/stories/layouts/page.stories.js new file mode 100644 index 00000000..1d5b8232 --- /dev/null +++ b/stories/layouts/page.stories.js @@ -0,0 +1,42 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' +import { Page, MainContent, Sidebar } from 'components/UI' +import { Content } from '../helpers' + +storiesOf('Layouts', module).addWithChapters('Page', { + subtitle: 'The outer most application wrapper.', + info: `Pages can have optional sidebars on the left or right.`, + chapters: [ + { + sections: [ + { + title: 'Page with small left sidebar', + + sectionFn: () => ( + + + Sidebar + + + MainContent + + + ) + }, + { + title: 'Page with large right sidebar', + sectionFn: () => ( + + + MainContent + + + Sidebar + + + ) + } + ] + } + ] +}) diff --git a/stories/layouts/panel.stories.js b/stories/layouts/panel.stories.js new file mode 100644 index 00000000..64179fb8 --- /dev/null +++ b/stories/layouts/panel.stories.js @@ -0,0 +1,40 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { storiesOf } from '@storybook/react' +import { Page, Panel } from 'components/UI' +import { Content } from '../helpers' + +const Wrapper = ({ children }) => ( + {children} +) +Wrapper.propTypes = { + children: PropTypes.node +} + +storiesOf('Layouts', module).addWithChapters('Panel', { + subtitle: 'For pages with a fixed header and footer.', + info: `Header and footer regions will always stick to the top and bottom of a panels container.`, + chapters: [ + { + sections: [ + { + sectionFn: () => ( + + + + Panel Header + + + Panel Body + + + Panel Footer + + + + ) + } + ] + } + ] +}) diff --git a/test/unit/components/Pay/__snapshots__/PaySummaryLightning.spec.js.snap b/test/unit/components/Pay/__snapshots__/PaySummaryLightning.spec.js.snap index 2a77be4e..f41d51f3 100644 --- a/test/unit/components/Pay/__snapshots__/PaySummaryLightning.spec.js.snap +++ b/test/unit/components/Pay/__snapshots__/PaySummaryLightning.spec.js.snap @@ -88,7 +88,14 @@ exports[`component.Form.PaySummaryLightning should render correctly 1`] = ` - + } /> - + } /> - + `; diff --git a/test/unit/components/Pay/__snapshots__/PaySummaryOnchain.spec.js.snap b/test/unit/components/Pay/__snapshots__/PaySummaryOnchain.spec.js.snap index bdf56820..1243fadc 100644 --- a/test/unit/components/Pay/__snapshots__/PaySummaryOnchain.spec.js.snap +++ b/test/unit/components/Pay/__snapshots__/PaySummaryOnchain.spec.js.snap @@ -101,7 +101,14 @@ exports[`component.Form.PaySummaryOnchain should render correctly 1`] = ` - + } /> - + `; diff --git a/test/unit/components/UI/__snapshots__/Dropdown.spec.js.snap b/test/unit/components/UI/__snapshots__/Dropdown.spec.js.snap index be5bf0eb..e3a98ce1 100644 --- a/test/unit/components/UI/__snapshots__/Dropdown.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Dropdown.spec.js.snap @@ -40,41 +40,49 @@ exports[`component.Dropdown should render correctly 1`] = ` }
- + BTC + + + + + + +
+ + `; diff --git a/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap b/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap index 83af9682..bbb868a8 100644 --- a/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap @@ -2,11 +2,9 @@ exports[`component.UI.MainContent should render correctly 1`] = ` .c0 { - padding: 16px; width: 100%; color: primaryText; background-color: primaryColor; - height: 100%; }
Header here
Body here
Footer here
diff --git a/test/unit/components/UI/__snapshots__/QRCode.spec.js.snap b/test/unit/components/UI/__snapshots__/QRCode.spec.js.snap index 027f0bc5..d0d4bbc9 100644 --- a/test/unit/components/UI/__snapshots__/QRCode.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/QRCode.spec.js.snap @@ -105,9 +105,9 @@ exports[`component.UI.QRCode should render correctly 1`] = ` /> diff --git a/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap b/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap index ce194eb6..0d16e81c 100644 --- a/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap @@ -2,7 +2,6 @@ exports[`component.UI.Sidebar should render correctly 1`] = ` .c0 { - padding: 16px; width: 33.33333333333333%; color: primaryText; background-color: tertiaryColor; From dbc2764760591d79717bff6e088e8bcf90810d35 Mon Sep 17 00:00:00 2001 From: Tom Kirkpatrick Date: Wed, 7 Nov 2018 21:32:00 +0100 Subject: [PATCH 2/2] style: update notification in light theme --- app/components/UI/Notification.js | 4 +-- app/themes/base.js | 5 +++- app/themes/dark.js | 10 +++---- app/themes/light.js | 28 +++++++++---------- stories/_general/color.stories.js | 3 +- stories/components/notification.stories.js | 6 +++- .../__snapshots__/Notification.spec.js.snap | 5 ++-- 7 files changed, 34 insertions(+), 27 deletions(-) diff --git a/app/components/UI/Notification.js b/app/components/UI/Notification.js index 422a37af..a71efd56 100644 --- a/app/components/UI/Notification.js +++ b/app/components/UI/Notification.js @@ -58,7 +58,7 @@ class Notification extends React.Component { > - + {processing && } {!processing && variant === 'success' && } {!processing && variant === 'warning' && } @@ -68,7 +68,7 @@ class Notification extends React.Component { {children} - + diff --git a/app/themes/base.js b/app/themes/base.js index b0967674..b4401214 100644 --- a/app/themes/base.js +++ b/app/themes/base.js @@ -16,7 +16,10 @@ export const palette = { pineGreen: '#0d331a', superRed: '#e63939', mudBrown: '#330d0d', - gray: '#959595' + gray: '#959595', + lightGreen: '#eefff4', + lightOrange: '#fff3e1', + lightRed: '#ffeded' } export const fontSizes = { diff --git a/app/themes/dark.js b/app/themes/dark.js index 0e771423..d397d326 100644 --- a/app/themes/dark.js +++ b/app/themes/dark.js @@ -16,6 +16,10 @@ const { } = palette const colors = { + primaryColor: deepseaBlue, + secondaryColor: underwaterBlue, + tertiaryColor: seaBlue, + highlight: hoverSeaBlue, primaryText: white, lightningOrange, lightningBrown, @@ -23,11 +27,7 @@ const colors = { pineGreen, superRed, mudBrown, - gray, - primaryColor: deepseaBlue, - secondaryColor: underwaterBlue, - tertiaryColor: seaBlue, - highlight: hoverSeaBlue + gray } const buttons = { diff --git a/app/themes/light.js b/app/themes/light.js index 60d8a72e..658bd406 100644 --- a/app/themes/light.js +++ b/app/themes/light.js @@ -4,30 +4,30 @@ const { white, black, lightningOrange, - lightningBrown, + lightOrange, seaGray, hoverSeaGray, underwaterGray, superGreen, - pineGreen, + lightGreen, superRed, - mudBrown, + lightRed, gray } = palette const colors = { + primaryColor: white, + secondaryColor: underwaterGray, + tertiaryColor: seaGray, + highlight: hoverSeaGray, primaryText: black, lightningOrange, - lightningBrown, + lightOrange, superGreen, - pineGreen, + lightGreen, superRed, - mudBrown, - gray, - primaryColor: white, - secondaryColor: underwaterGray, - tertiaryColor: seaGray, - highlight: hoverSeaGray + lightRed, + gray } const buttons = { @@ -59,15 +59,15 @@ const buttons = { } const cards = { success: { - backgroundColor: colors.pineGreen, + backgroundColor: colors.lightGreen, color: colors.superGreen }, warning: { - backgroundColor: colors.lightningBrown, + backgroundColor: colors.lightOrange, color: colors.lightningOrange }, error: { - backgroundColor: colors.mudBrown, + backgroundColor: colors.lightRed, color: colors.superRed } } diff --git a/stories/_general/color.stories.js b/stories/_general/color.stories.js index 7fede8f5..f3e4dd98 100644 --- a/stories/_general/color.stories.js +++ b/stories/_general/color.stories.js @@ -15,8 +15,7 @@ const Swatch = ({ name, color }) => ( width={50} mr={21} borderRadius={8} - borderColor="primaryText" - border="solid 1px" + boxShadow="0 2px 6px rgba(0, 0, 0, 0.3)" css={{ background: color, height: '50px' diff --git a/stories/components/notification.stories.js b/stories/components/notification.stories.js index e37d2fff..a1119e88 100644 --- a/stories/components/notification.stories.js +++ b/stories/components/notification.stories.js @@ -21,7 +21,11 @@ storiesOf('Components', module).addWithChapters('Notification', { }, { title: 'Processing', - sectionFn: () => Processing notification + sectionFn: () => ( + + Processing notification + + ) } ] } diff --git a/test/unit/components/UI/__snapshots__/Notification.spec.js.snap b/test/unit/components/UI/__snapshots__/Notification.spec.js.snap index b591ffc2..11e9f9b3 100644 --- a/test/unit/components/UI/__snapshots__/Notification.spec.js.snap +++ b/test/unit/components/UI/__snapshots__/Notification.spec.js.snap @@ -24,7 +24,7 @@ exports[`component.UI.Notification should render correctly 1`] = ` } .c3 { - font-size: xl; + font-size: 17px; } .c4 { @@ -33,6 +33,7 @@ exports[`component.UI.Notification should render correctly 1`] = ` } .c5 { + margin-top: 4px; font-size: xs; } @@ -59,7 +60,7 @@ exports[`component.UI.Notification should render correctly 1`] = ` >