From 1a2b278c328cf509836ea93e500f53f5ae553cf7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Fri, 15 Dec 2017 14:53:59 +0000 Subject: [PATCH] style: lint and format --- .../components/instances/__tests__/tags.js | 3 +- .../src/components/instances/home.js | 35 ++++++----- packages/ui-toolkit/src/baseline/readme.md | 3 +- packages/ui-toolkit/src/button/Readme.md | 21 +++++-- packages/ui-toolkit/src/button/index.js | 4 +- packages/ui-toolkit/src/card/demo.md | 20 +++--- packages/ui-toolkit/src/form/base/toggle.js | 2 +- .../ui-toolkit/src/form/usage-checkbox.md | 61 ++++++++++--------- packages/ui-toolkit/src/form/usage-radio.md | 42 +++++++------ packages/ui-toolkit/src/form/usage-select.md | 2 +- packages/ui-toolkit/src/form/usage-toggle.md | 12 ++-- packages/ui-toolkit/src/header/brand.js | 2 +- packages/ui-toolkit/src/header/usage.md | 7 +-- packages/ui-toolkit/src/section-list/usage.md | 28 +++------ .../ui-toolkit/src/styleguide/renderer.js | 2 + packages/ui-toolkit/src/styleguide/section.js | 13 +--- .../src/styleguide/sectionHeading.js | 14 ++--- packages/ui-toolkit/src/styleguide/wrapper.js | 4 +- packages/ui-toolkit/src/table/usage.md | 47 +++++++------- packages/ui-toolkit/src/tags/list.js | 2 +- packages/ui-toolkit/src/text/Readme.md | 42 +++++-------- 21 files changed, 176 insertions(+), 190 deletions(-) diff --git a/packages/my-joy-beta/src/components/instances/__tests__/tags.js b/packages/my-joy-beta/src/components/instances/__tests__/tags.js index c60691bc..c5c2ebf4 100644 --- a/packages/my-joy-beta/src/components/instances/__tests__/tags.js +++ b/packages/my-joy-beta/src/components/instances/__tests__/tags.js @@ -5,7 +5,6 @@ import 'jest-styled-components'; import Tags from '../tags'; - it('renders without throwing', () => { const tree = renderer .create( @@ -16,4 +15,4 @@ it('renders without throwing', () => { .toJSON(); expect(tree).toMatchSnapshot(); -}); \ No newline at end of file +}); diff --git a/packages/my-joy-beta/src/components/instances/home.js b/packages/my-joy-beta/src/components/instances/home.js index de713508..af808a9d 100644 --- a/packages/my-joy-beta/src/components/instances/home.js +++ b/packages/my-joy-beta/src/components/instances/home.js @@ -214,7 +214,7 @@ export default withTheme( disabled={instance.state === 'RUNNING'} onClick={() => onAction('start')} > - + Start - - - - - - - - {instance.image && ( - - )} - - {instance.ips.map((ip, i) => ( + + + + + + + {instance.image && ( + + )} - + {instance.ips.map((ip, i) => ( + + ))} {instance.ips.map((ip, i) => ( - + ; ``` #### Small Button + Small buttons are supporters of the secondary button. They can be used within cluttered or complex patterns to free up space. ```jsx @@ -45,7 +51,9 @@ const React = require('react'); const { default: Button } = require('./'); - + ; ``` @@ -63,6 +71,7 @@ const { default: Button } = require('./'); ``` #### Quick Action + Quick action buttons are to be imbedded in components to give additional functionality. They can be used in either primary or secondary colour palettes depending on importance ```jsx @@ -73,10 +82,10 @@ const { Actions } = require('../icons'); - - +; ``` #### Primary @@ -87,7 +96,7 @@ Primary anchor is a type of a link that sits outside the body text. const React = require('react'); const Anchor = require('../text').Anchor; -Inspire the lazy +Inspire the lazy; ``` #### Reversed diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js index ecc44108..891e29d0 100644 --- a/packages/ui-toolkit/src/button/index.js +++ b/packages/ui-toolkit/src/button/index.js @@ -206,7 +206,7 @@ const StyledLink = styled(Link)` `; /** - * Buttons are the core of any UI kit, and we are no exception. Here we have documented to most basic variations of the button states, which include but are limited to; Default, Hover, Clicked, and Disabled. + * Buttons are the core of any UI kit, and we are no exception. Here we have documented to most basic variations of the button states, which include but are limited to; Default, Hover, Clicked, and Disabled. */ const Button = props => { const { href = '', to = '', loading = false, secondary } = props; @@ -256,7 +256,7 @@ Button.propTypes = { /** * Set to true to show loading animation */ - loading: PropTypes.bool, + loading: PropTypes.bool }; Button.defaultProps = { diff --git a/packages/ui-toolkit/src/card/demo.md b/packages/ui-toolkit/src/card/demo.md index 407e6011..c900df20 100644 --- a/packages/ui-toolkit/src/card/demo.md +++ b/packages/ui-toolkit/src/card/demo.md @@ -403,18 +403,22 @@ const { Health, Actions, DataCenter } = require('../icons');

Nginx

-

+

Healthy

-

+

eu-ams-1

diff --git a/packages/ui-toolkit/src/form/base/toggle.js b/packages/ui-toolkit/src/form/base/toggle.js index 23f7922e..3f4f94b0 100644 --- a/packages/ui-toolkit/src/form/base/toggle.js +++ b/packages/ui-toolkit/src/form/base/toggle.js @@ -116,7 +116,7 @@ const InnerContainer = styled.div` cursor: pointer; ${isNot('noMargin')` margin-bottom: ${remcalc(12)}; - `} + `}; `; const Container = styled.div` diff --git a/packages/ui-toolkit/src/form/usage-checkbox.md b/packages/ui-toolkit/src/form/usage-checkbox.md index 7c22769a..a98708ae 100644 --- a/packages/ui-toolkit/src/form/usage-checkbox.md +++ b/packages/ui-toolkit/src/form/usage-checkbox.md @@ -1,64 +1,67 @@ +#### Checkbox > Default -#### Checkbox > Default ```jsx const React = require('react'); const { default: FormGroup } = require('./group'); const { default: Label } = require('./label'); -const { FormLabel } = require('./'); +const { FormLabel, Checkbox } = require('./'); - Label name + Label name - + - + - + - +; ``` -#### Checkbox > Active/Focused +#### Checkbox > Active/Focused + ```jsx const React = require('react'); const { default: FormGroup } = require('./group'); const { default: Label } = require('./label'); -const { FormLabel } = require('./'); +const { FormLabel, Checkbox } = require('./'); - Label name + Label name - + - + - + - +; ``` -#### Checkbox > Disabled + +#### Checkbox > Disabled + ```jsx const React = require('react'); const { default: FormGroup } = require('./group'); const { default: Label } = require('./label'); -const { FormLabel } = require('./'); +const { FormLabel, Checkbox } = require('./'); - Label name + Label name - + - + - + - +; ``` #### Checkbox > Error @@ -68,21 +71,19 @@ const React = require('react'); const { default: FormMeta } = require('./meta'); const { default: FormGroup } = require('./group'); const { default: Label } = require('./label'); -const { FormLabel } = require('./'); +const { FormLabel, Checkbox } = require('./'); - Label name + Label name - + - + - + - - Something’s missing - - + Something’s missing +; ``` diff --git a/packages/ui-toolkit/src/form/usage-radio.md b/packages/ui-toolkit/src/form/usage-radio.md index 0f0a368a..134488b0 100644 --- a/packages/ui-toolkit/src/form/usage-radio.md +++ b/packages/ui-toolkit/src/form/usage-radio.md @@ -1,15 +1,16 @@ -#### Radio > Default +#### Radio > Default ```jsx const React = require('react'); const { default: Radio, RadioList } = require('./radio'); const { default: FormGroup } = require('./group'); const { default: Label } = require('./label'); -const { default: Legend } = require('./legend'); const { FormLabel } = require('./'); - Who killed the radio star? + + Who killed the radio star? + @@ -23,17 +24,20 @@ const { FormLabel } = require('./'); ; ``` -#### Checkbox > Active/Focused + +#### Checkbox > Active/Focused + ```jsx const React = require('react'); const { default: Radio, RadioList } = require('./radio'); const { default: FormGroup } = require('./group'); const { default: Label } = require('./label'); -const { default: Legend } = require('./legend'); const { FormLabel } = require('./'); - Who killed the radio star? + + Who killed the radio star? + @@ -45,20 +49,22 @@ const { FormLabel } = require('./'); - +; ``` -#### Checkbox > Disabled +#### Checkbox > Disabled + ```jsx const React = require('react'); const { default: Radio, RadioList } = require('./radio'); const { default: FormGroup } = require('./group'); const { default: Label } = require('./label'); -const { default: Legend } = require('./legend'); const { FormLabel } = require('./'); - Who killed the radio star? + + Who killed the radio star? + @@ -70,8 +76,9 @@ const { FormLabel } = require('./'); - +; ``` + #### Radio input validation ```jsx @@ -79,12 +86,13 @@ const React = require('react'); const { default: Radio, RadioList } = require('./radio'); const { default: FormGroup } = require('./group'); const { default: Label } = require('./label'); -const { default: Legend } = require('./legend'); const { FormLabel } = require('./'); const { default: FormMeta } = require('./meta'); - Who killed the radio star? + + Who killed the radio star? + @@ -96,8 +104,6 @@ const { default: FormMeta } = require('./meta'); - - Something’s missing - - -``` \ No newline at end of file + Something’s missing +; +``` diff --git a/packages/ui-toolkit/src/form/usage-select.md b/packages/ui-toolkit/src/form/usage-select.md index 4b9e844b..f9a3a5ef 100644 --- a/packages/ui-toolkit/src/form/usage-select.md +++ b/packages/ui-toolkit/src/form/usage-select.md @@ -13,7 +13,7 @@ const { default: FormGroup } = require('./group'); - +; ``` #### Select > Disabled diff --git a/packages/ui-toolkit/src/form/usage-toggle.md b/packages/ui-toolkit/src/form/usage-toggle.md index 56ec23ab..17f90ceb 100644 --- a/packages/ui-toolkit/src/form/usage-toggle.md +++ b/packages/ui-toolkit/src/form/usage-toggle.md @@ -1,14 +1,10 @@ ```jsx const React = require('react'); -const { ToggleList } = require('./toggle'); const { default: FormGroup } = require('./group'); -const { default: Legend } = require('./legend'); const { default: Toggle } = require('./toggle'); - - Video - + Video ; ``` @@ -16,12 +12,12 @@ const { default: Toggle } = require('./toggle'); ```jsx const React = require('react'); -const { ToggleList } = require('./toggle'); const { default: FormGroup } = require('./group'); -const { default: Legend } = require('./legend'); const { default: Toggle } = require('./toggle'); - Video + + Video + ; ``` diff --git a/packages/ui-toolkit/src/header/brand.js b/packages/ui-toolkit/src/header/brand.js index abbe31c6..2b67e779 100644 --- a/packages/ui-toolkit/src/header/brand.js +++ b/packages/ui-toolkit/src/header/brand.js @@ -15,7 +15,7 @@ const Brand = H2.extend` display: flex; align-items: center; justify-content: center; - `} + `}; `; const Box = styled.div` diff --git a/packages/ui-toolkit/src/header/usage.md b/packages/ui-toolkit/src/header/usage.md index 20f45dff..e3b4ea71 100644 --- a/packages/ui-toolkit/src/header/usage.md +++ b/packages/ui-toolkit/src/header/usage.md @@ -5,6 +5,7 @@ const { default: HeaderItem } = require('./item.js'); const { Anchor: HeaderAnchor } = require('./item.js'); const { default: HeaderNav } = require('./nav.js'); const { Triton, DataCenter, User } = require('../icons'); +const { default: Header } = require('./index');
@@ -15,14 +16,12 @@ const { Triton, DataCenter, User } = require('../icons'); Compute - - Return to existing portal - + Return to existing portal eu-east-1 Nicola -
+; ``` diff --git a/packages/ui-toolkit/src/section-list/usage.md b/packages/ui-toolkit/src/section-list/usage.md index de6178b2..7ef3e1c3 100644 --- a/packages/ui-toolkit/src/section-list/usage.md +++ b/packages/ui-toolkit/src/section-list/usage.md @@ -1,36 +1,26 @@ ```jsx +const React = require('react'); const { default: SectionListItem, Anchor } = require('./item'); +const { default: SectionList } = require('./'); - - Overview - + Overview - - Services - + Services - - Instances - + Instances - - Versions - + Versions - - Manifest - + Manifest - - Settings - + Settings - +; ``` diff --git a/packages/ui-toolkit/src/styleguide/renderer.js b/packages/ui-toolkit/src/styleguide/renderer.js index 4626da05..45ee3bfa 100644 --- a/packages/ui-toolkit/src/styleguide/renderer.js +++ b/packages/ui-toolkit/src/styleguide/renderer.js @@ -18,6 +18,8 @@ const Sticky = styled.div` ${is('sidebar')` top: ${remcalc(100)}; + max-height: 85vh; + overflow: auto; `}; `; diff --git a/packages/ui-toolkit/src/styleguide/section.js b/packages/ui-toolkit/src/styleguide/section.js index 2f2def2d..10223fef 100644 --- a/packages/ui-toolkit/src/styleguide/section.js +++ b/packages/ui-toolkit/src/styleguide/section.js @@ -32,14 +32,7 @@ const Main = styled.div` `; export default allProps => { - const { - name, - content, - components, - sections, - depth, - description - } = allProps; + const { name, content, components, sections, depth, description } = allProps; const Tag = depth === 2 ? CardStyled : 'div'; const TagMain = depth === 2 ? Main : 'div'; @@ -49,9 +42,7 @@ export default allProps => { depth !== 1 && (

{name}

- {description && ( -

{description}

- )} + {description &&

{description}

}
)} diff --git a/packages/ui-toolkit/src/styleguide/sectionHeading.js b/packages/ui-toolkit/src/styleguide/sectionHeading.js index 2e509901..aebe2bf3 100644 --- a/packages/ui-toolkit/src/styleguide/sectionHeading.js +++ b/packages/ui-toolkit/src/styleguide/sectionHeading.js @@ -41,14 +41,14 @@ function HeadingRenderer({ classes, level, children, ...props }) { const Tag = `h${level}`; const headingClasses = cx(classes.heading, classes[`heading${level}`]); - const Heading = level === 1 ? null : ( - - {children} - - ) + const Heading = + level === 1 ? null : ( + + {children} + + ); - - return Heading + return Heading; } const Heading = Styled(styles)(HeadingRenderer); diff --git a/packages/ui-toolkit/src/styleguide/wrapper.js b/packages/ui-toolkit/src/styleguide/wrapper.js index ddcc6574..f5a3e603 100644 --- a/packages/ui-toolkit/src/styleguide/wrapper.js +++ b/packages/ui-toolkit/src/styleguide/wrapper.js @@ -14,9 +14,7 @@ const StyledBase = Base.extend` export default ({ children }) => ( - - {children} - + {children} ); diff --git a/packages/ui-toolkit/src/table/usage.md b/packages/ui-toolkit/src/table/usage.md index b9b38af6..bb2b033c 100644 --- a/packages/ui-toolkit/src/table/usage.md +++ b/packages/ui-toolkit/src/table/usage.md @@ -1,17 +1,17 @@ #### Header + ```jsx const React = require('react'); const remcalc = require('remcalc'); const { FormGroup, Checkbox } = require('../form'); -const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./'); -const { Dot, Actions } = require('../icons'); +const { default: Table, Thead, Tr, Th, Tbody } = require('./'); - -
- - + + @@ -26,24 +26,24 @@ const { Dot, Actions } = require('../icons');
- ``` + +; +``` + +#### Footer - #### Footer ```jsx const React = require('react'); const remcalc = require('remcalc'); const { FormGroup, Checkbox } = require('../form'); -const { default: Table, Tfoot, Tr, Th, Td } = require('./'); -const { Dot, Actions } = require('../icons'); +const { default: Table, Tfoot, Tr, Th } = require('./'); -
- - + + @@ -58,10 +58,11 @@ const { Dot, Actions } = require('../icons');
- ``` +; +``` #### Multiple Selection List + ```jsx const React = require('react'); const remcalc = require('remcalc'); @@ -74,7 +75,7 @@ const { Dot, Actions } = require('../icons'); - + @@ -93,7 +94,7 @@ const { Dot, Actions } = require('../icons'); - + @@ -120,7 +121,7 @@ const { Dot, Actions } = require('../icons'); - + @@ -149,18 +150,18 @@ const { Dot, Actions } = require('../icons'); ``` #### Single Selection List + ```jsx const React = require('react'); const remcalc = require('remcalc'); -const { FormGroup, Checkbox } = require('../form'); +const { FormGroup, Radio } = require('../form'); const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./'); -const { Dot, Actions } = require('../icons'); +const { Dot } = require('../icons'); - + @@ -176,7 +177,7 @@ const { Dot, Actions } = require('../icons');
- Name
- + @@ -200,7 +201,7 @@ const { Dot, Actions } = require('../icons');
- + diff --git a/packages/ui-toolkit/src/tags/list.js b/packages/ui-toolkit/src/tags/list.js index 4770ccb1..7a0a4b1c 100644 --- a/packages/ui-toolkit/src/tags/list.js +++ b/packages/ui-toolkit/src/tags/list.js @@ -6,4 +6,4 @@ export default styled.ul` display: flex; list-style: none; flex-wrap: wrap; -`; \ No newline at end of file +`; diff --git a/packages/ui-toolkit/src/text/Readme.md b/packages/ui-toolkit/src/text/Readme.md index 72c70479..57e270d1 100644 --- a/packages/ui-toolkit/src/text/Readme.md +++ b/packages/ui-toolkit/src/text/Readme.md @@ -10,7 +10,7 @@ const P = require('/').P; const Small = require('/').Small; const styles = { - color: "#979797", + color: '#979797', marginBottom: '22px', display: 'block', marginTop: '6px', @@ -18,31 +18,17 @@ const styles = { };
-

H1 - Don’t say it, shout it

- - Libre Franklin Regular - 36px with 45px leading - -

H2 - Breadcrumb? More like breadloaf

- - Libre Franklin Regular - 24px with 30px leading - -

H3 - Your friendly neighbourhood workhorse

- - Libre Franklin Regular - 21px with 26px leading - -

H4 - Bodies bigger brother

- - Libre Franklin Semibold - 15px with 24px leading - -

- P - Body copy -

- - Libre Franklin Regular - 15px with 24px leading - - C - Caption text - - Libre Franklin Regular - 13px with 18px leadings - -
+

H1 - Don’t say it, shout it

+ Libre Franklin Regular - 36px with 45px leading +

H2 - Breadcrumb? More like breadloaf

+ Libre Franklin Regular - 24px with 30px leading +

H3 - Your friendly neighbourhood workhorse

+ Libre Franklin Regular - 21px with 26px leading +

H4 - Bodies bigger brother

+ Libre Franklin Semibold - 15px with 24px leading +

P - Body copy

+ Libre Franklin Regular - 15px with 24px leading + C - Caption text + Libre Franklin Regular - 13px with 18px leadings +; ```