From fab0bbfcc33ae4dcbd34ed03f2abbc94dfa21a32 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Wed, 21 Mar 2018 16:19:17 +0000 Subject: [PATCH] fix(instances): only use latest version of each image fixes #1321 --- packages/my-joy-instances/package.json | 2 + .../src/components/create-instance/image.js | 17 ++- .../src/containers/create-instance/image.js | 35 ++++-- .../src/graphql/get-images.gql | 5 +- packages/ui-toolkit/src/button/Special.md | 43 ++----- packages/ui-toolkit/src/footer/sticky.md | 41 +++---- packages/ui-toolkit/src/grids/Readme.md | 1 - packages/ui-toolkit/src/navigation.md | 4 +- .../ui-toolkit/src/styleguide/component.js | 1 - packages/ui-toolkit/src/styleguide/section.js | 8 +- packages/ui-toolkit/src/styleguide/sidebar.js | 6 +- packages/ui-toolkit/src/table/Readme.md | 13 +- packages/ui-toolkit/src/tags/Readme.md | 40 +++--- packages/ui-toolkit/src/tags/item.js | 4 +- packages/ui-toolkit/src/text/Superscript.md | 42 +++---- packages/ui-toolkit/src/text/headings.js | 54 ++++----- packages/ui-toolkit/src/text/p.js | 2 +- packages/ui-toolkit/src/text/sup.js | 5 +- packages/ui-toolkit/src/theme/colors.js | 114 +++++++++--------- packages/ui-toolkit/styleguide.config.js | 29 ++--- yarn.lock | 53 ++++---- 21 files changed, 259 insertions(+), 260 deletions(-) diff --git a/packages/my-joy-instances/package.json b/packages/my-joy-instances/package.json index 606e1593..54988022 100644 --- a/packages/my-joy-instances/package.json +++ b/packages/my-joy-instances/package.json @@ -40,7 +40,9 @@ "joyent-ui-toolkit": "^5.0.0", "lodash.find": "^4.6.0", "lodash.findindex": "^4.6.0", + "lodash.flatten": "^4.4.0", "lodash.get": "^4.4.2", + "lodash.groupby": "^4.6.0", "lodash.includes": "^4.3.0", "lodash.isarray": "^4.0.0", "lodash.isboolean": "^3.0.3", diff --git a/packages/my-joy-instances/src/components/create-instance/image.js b/packages/my-joy-instances/src/components/create-instance/image.js index ff1cfb39..93c301f0 100644 --- a/packages/my-joy-instances/src/components/create-instance/image.js +++ b/packages/my-joy-instances/src/components/create-instance/image.js @@ -36,9 +36,7 @@ const Version = styled(Select)` export const Preview = ({ name, version, isVm }) => ( -

- {name} - {version} -

+

{name}

{isVm ? 'Hardware Virtual Machine' : 'Infrastructure Container'}

@@ -64,15 +62,16 @@ const Image = ({ onClick, active, ...image }) => { -

{titleCase(imageName)}

+

+ {titleCase(imageName) || 'Custom Images'} +

- {versions.map(({ name, version, id }) => ( - + {versions.map(({ name, id }) => ( + ))} diff --git a/packages/my-joy-instances/src/containers/create-instance/image.js b/packages/my-joy-instances/src/containers/create-instance/image.js index 12c6dcc0..afa4a903 100644 --- a/packages/my-joy-instances/src/containers/create-instance/image.js +++ b/packages/my-joy-instances/src/containers/create-instance/image.js @@ -8,8 +8,11 @@ import { Margin } from 'styled-components-spacing'; import includes from 'lodash.includes'; import sortBy from 'lodash.sortby'; import findIndex from 'lodash.findindex'; -import find from 'lodash.find'; +import groupBy from 'lodash.groupby'; +import values from 'lodash.values'; import reverse from 'lodash.reverse'; +import flatten from 'lodash.flatten'; +import find from 'lodash.find'; import get from 'lodash.get'; import { InstanceTypeIcon, StatusLoader, Button } from 'joyent-ui-toolkit'; @@ -167,7 +170,8 @@ export default compose( ), graphql(GetImages, { options: () => ({ - ssr: false + ssr: false, + variables: { public: true } }), props: ({ ownProps, data }) => { const { image = '', query } = ownProps; @@ -181,7 +185,7 @@ export default compose( }; } - const values = images + const _images = images .reduce((acc, img) => { const isVm = !includes(img.type, 'DATASET'); @@ -198,6 +202,7 @@ export default compose( const version = { name: img.name, version: img.version, + published: new Date(img.published_at).getTime(), id: img.id }; @@ -216,24 +221,34 @@ export default compose( isVm }); + const versions = acc[index].versions.concat([version]); + acc[index] = { ...acc[index], - versions: acc[index].versions.concat([version]) + versions }; return acc; }, []) - .map(({ versions, ...img }) => ({ - ...img, - active: Boolean(find(versions, ['id', image])), - versions: reverse(sortBy(versions, ['name'])) - })); + .map(({ versions, ...img }) => { + return { + ...img, + active: Boolean(find(versions, ['id', image])), + versions: reverse( + flatten( + values(groupBy(versions, 'name')).map(groupedVersion => + sortBy(groupedVersion, 'published').pop() + ) + ) + ) + }; + }); const selected = find(images, ['id', image]) || {}; return { loading, - images: values, + images: _images, image: { ...selected, isVm: !includes(selected.type || '', 'DATASET') diff --git a/packages/my-joy-instances/src/graphql/get-images.gql b/packages/my-joy-instances/src/graphql/get-images.gql index f3e0f5e4..d432a91b 100644 --- a/packages/my-joy-instances/src/graphql/get-images.gql +++ b/packages/my-joy-instances/src/graphql/get-images.gql @@ -1,9 +1,10 @@ -query Images { - images { +query Images($public: Boolean) { + images(public: $public) { id name os version type + published_at } } diff --git a/packages/ui-toolkit/src/button/Special.md b/packages/ui-toolkit/src/button/Special.md index d120d7da..4337939a 100644 --- a/packages/ui-toolkit/src/button/Special.md +++ b/packages/ui-toolkit/src/button/Special.md @@ -8,15 +8,10 @@ const React = require('react'); const { default: Button } = require('./'); const { StartIcon } = require('../'); - +; ``` #### Delete Button @@ -29,38 +24,24 @@ const React = require('react'); const { default: Button } = require('./'); const { DeleteIcon } = require('../'); - - +; // Tab: Disabled const React = require('react'); const { default: Button } = require('./'); const { DeleteIcon } = require('../'); - - +; ``` #### Toggle Switch + Toggle switch is to be used when users have the choice to turn a service or feature on or off. ```jsx @@ -71,7 +52,7 @@ const { default: Toggle } = require('../form/toggle'); Activate - +; // Tab: Disabled const React = require('react'); @@ -82,5 +63,5 @@ const { default: Toggle } = require('../form/toggle'); Activate - +; ``` diff --git a/packages/ui-toolkit/src/footer/sticky.md b/packages/ui-toolkit/src/footer/sticky.md index 1df8bb72..687ee53c 100644 --- a/packages/ui-toolkit/src/footer/sticky.md +++ b/packages/ui-toolkit/src/footer/sticky.md @@ -5,51 +5,40 @@ Quick Action Toasts are used to show contextually relevent commands and actions ```jsx // Name: Active const React = require('react'); -const { StickyFooter, StartIcon, Button, StopIcon, ResetIcon, DeleteIcon } = require('../'); +const { + StickyFooter, + StartIcon, + Button, + StopIcon, + ResetIcon, + DeleteIcon +} = require('../'); const { Row, Col } = require('joyent-react-styled-flexboxgrid'); -
+
- - - - -
+
; ``` diff --git a/packages/ui-toolkit/src/grids/Readme.md b/packages/ui-toolkit/src/grids/Readme.md index c5ae0dc3..47d8b6bc 100644 --- a/packages/ui-toolkit/src/grids/Readme.md +++ b/packages/ui-toolkit/src/grids/Readme.md @@ -22,7 +22,6 @@ const medium = require('./medium.svg'); }} src={medium} /> ``` - #### Small Grid ```jsx noeditor diff --git a/packages/ui-toolkit/src/navigation.md b/packages/ui-toolkit/src/navigation.md index c44e23af..5619b366 100644 --- a/packages/ui-toolkit/src/navigation.md +++ b/packages/ui-toolkit/src/navigation.md @@ -26,7 +26,7 @@ const { Breadcrumb, BreadcrumbItem, Anchor } = require('./index.js'); const React = require('react'); const { Footer } = require('./'); -
+
-
+
; ``` diff --git a/packages/ui-toolkit/src/styleguide/component.js b/packages/ui-toolkit/src/styleguide/component.js index 9efd2fad..575ce31f 100644 --- a/packages/ui-toolkit/src/styleguide/component.js +++ b/packages/ui-toolkit/src/styleguide/component.js @@ -6,7 +6,6 @@ import { P, H4 } from '../'; const chevron = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTsiIGNsYXNzPSJiYXNlbGluZS1idFRncEsgaGltUHhaIj48cGF0aCBmaWxsPSJyZ2JhKDczLCA3MywgNzMsIDEpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiPjwvcGF0aD48L3N2Zz4='; - const Main = styled.div` h4[class*='rsg--heading'] { margin: 0; diff --git a/packages/ui-toolkit/src/styleguide/section.js b/packages/ui-toolkit/src/styleguide/section.js index b6f447b6..f0fd4353 100644 --- a/packages/ui-toolkit/src/styleguide/section.js +++ b/packages/ui-toolkit/src/styleguide/section.js @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { Card, H2, P, H4 } from '../'; import remcalc from 'remcalc'; -const CardStyled = styled(Card) ` +const CardStyled = styled(Card)` margin-bottom: ${remcalc(36)}; `; @@ -35,7 +35,7 @@ export default allProps => {

{name}

- {description ?

{description}

: null } + {description ?

{description}

: null}
{content} @@ -43,7 +43,7 @@ export default allProps => { {sections}
- ) + ); } return ( @@ -58,5 +58,5 @@ export default allProps => { {sections} - ) + ); }; diff --git a/packages/ui-toolkit/src/styleguide/sidebar.js b/packages/ui-toolkit/src/styleguide/sidebar.js index 34d3ad66..048f83e4 100644 --- a/packages/ui-toolkit/src/styleguide/sidebar.js +++ b/packages/ui-toolkit/src/styleguide/sidebar.js @@ -27,7 +27,7 @@ const Header = styled(H3)` const Link = styled.a` color: #979797; text-decoration: none; -` +`; export default ({ children: { props } }) => { const items = props.items.filter(item => item.name); @@ -40,7 +40,9 @@ export default ({ children: { props } }) => { {items.map(({ heading, name, slug, content }) => (
  • -
    {name}
    +
    + {name} +
    {content}
    • ))} diff --git a/packages/ui-toolkit/src/table/Readme.md b/packages/ui-toolkit/src/table/Readme.md index 0f86468f..e32416d5 100644 --- a/packages/ui-toolkit/src/table/Readme.md +++ b/packages/ui-toolkit/src/table/Readme.md @@ -93,8 +93,8 @@ const { default: Table, Tfoot, Tr, Th } = require('./'); ; ``` - #### Empty Table + ```jsx // Name: Active const React = require('react'); @@ -104,8 +104,6 @@ const { Card, H3, Button, P } = require('../'); const { Padding, Margin } = require('styled-components-spacing'); const { default: Flex } = require('styled-flex-component'); - -
    @@ -160,18 +158,21 @@ const { default: Flex } = require('styled-flex-component');
    - +

    No instances yet?

    -

    You haven’t commissioned any instances yet, but they’re really easy to set up. Click below to get going.

    +

    + You haven’t commissioned any instances yet, but they’re really easy to + set up. Click below to get going. +

    -
    +; ``` #### Multiple Selection List diff --git a/packages/ui-toolkit/src/tags/Readme.md b/packages/ui-toolkit/src/tags/Readme.md index d77878fd..158a6702 100644 --- a/packages/ui-toolkit/src/tags/Readme.md +++ b/packages/ui-toolkit/src/tags/Readme.md @@ -5,25 +5,25 @@ const React = require('react'); const { TagItem, TagList } = require('./'); -Tags:4lyf +Tags:4lyf; // Tab: Normal const React = require('react'); const { TagItem, TagList } = require('./'); -Tags:4lyf +Tags:4lyf; // Tab: Disabled const React = require('react'); const { TagItem, TagList } = require('./'); -Tags:4lyf +Tags:4lyf; // Tab: Error const React = require('react'); const { TagItem, TagList } = require('./'); -Tags:4lyf +Tags:4lyf; ``` #### Deleteable Tags @@ -36,9 +36,11 @@ const { PlusIcon } = require('../'); const { Margin } = require('styled-components-spacing'); - Tags:4lyf - - + Tags:4lyf + + + +; // Tab: Normal const React = require('react'); @@ -47,9 +49,11 @@ const { PlusIcon } = require('../'); const { Margin } = require('styled-components-spacing'); - Tags:4lyf - - + Tags:4lyf + + + +; // Tab: Disabled const React = require('react'); @@ -58,9 +62,11 @@ const { PlusIcon } = require('../'); const { Margin } = require('styled-components-spacing'); - Tags:4lyf - - + Tags:4lyf + + + +; // Tab: Error const React = require('react'); @@ -69,7 +75,9 @@ const { PlusIcon } = require('../'); const { Margin } = require('styled-components-spacing'); - Tags:4lyf - - + Tags:4lyf + + + +; ``` diff --git a/packages/ui-toolkit/src/tags/item.js b/packages/ui-toolkit/src/tags/item.js index 8c690a66..4ce0ee08 100644 --- a/packages/ui-toolkit/src/tags/item.js +++ b/packages/ui-toolkit/src/tags/item.js @@ -30,11 +30,11 @@ const Tag = styled.li` flex-grow: 0; align-items: center; - ${is('disabled') ` + ${is('disabled')` background: ${props => props.theme.disabled}; `}; - ${is('error') ` + ${is('error')` border: ${remcalc(1)} solid ${props => props.theme.red}; `}; diff --git a/packages/ui-toolkit/src/text/Superscript.md b/packages/ui-toolkit/src/text/Superscript.md index 3bad1b36..abb64708 100644 --- a/packages/ui-toolkit/src/text/Superscript.md +++ b/packages/ui-toolkit/src/text/Superscript.md @@ -7,7 +7,7 @@ The default superscript was intially designed to offer supporting information on const React = require('react'); const Sup = require('/').Sup; const P = require('/').P; -const Small = require('/').Small +const Small = require('/').Small; const styles = { color: '#979797', @@ -18,12 +18,12 @@ const styles = { };
    -

    - Superscript Example - Superscript -

    - Libre Franklin Semi Bold - 8px with 12px leading -
    +

    + Superscript Example + Superscript +

    + Libre Franklin Semi Bold - 8px with 12px leading +; ``` #### Alert Superscript @@ -35,7 +35,7 @@ The Alert variation of superscript is to be used as an excliamation, to announce const React = require('react'); const Sup = require('/').Sup; const P = require('/').P; -const Small = require('/').Small +const Small = require('/').Small; const styles = { color: '#979797', @@ -46,12 +46,12 @@ const styles = { };
    -

    - Superscript Example - Alert Superscript -

    - Libre Franklin Semi Bold - 8px with 12px leading -
    +

    + Superscript Example + Alert Superscript +

    + Libre Franklin Semi Bold - 8px with 12px leading +; ``` #### Badge Superscript @@ -63,7 +63,7 @@ The badge variation of superscript is for when a specific element of information const React = require('react'); const Sup = require('/').Sup; const P = require('/').P; -const Small = require('/').Small +const Small = require('/').Small; const styles = { color: '#979797', @@ -74,10 +74,10 @@ const styles = { };
    -

    - Superscript Example - SSD -

    - Libre Franklin Semi Bold - 8px with 12px leading -
    +

    + Superscript Example + SSD +

    + Libre Franklin Semi Bold - 8px with 12px leading +; ``` diff --git a/packages/ui-toolkit/src/text/headings.js b/packages/ui-toolkit/src/text/headings.js index b22e4e09..57d3ca16 100644 --- a/packages/ui-toolkit/src/text/headings.js +++ b/packages/ui-toolkit/src/text/headings.js @@ -14,24 +14,24 @@ export const H1 = NH1.extend` font-weight: normal; margin: 0; - ${is('inline') ` + ${is('inline')` display: inline-block; `}; - ${is('small') ` + ${is('small')` font-size: ${remcalc(32)}; `}; - ${is('bold') ` + ${is('bold')` font-weight: ${props => props.theme.font.weight.semibold}; `}; - ${is('white') ` + ${is('white')` -webkit-text-fill-color: currentcolor; color: ${props => props.theme.white} `}; - ${isNot('noMargin') ` + ${isNot('noMargin')` & + p, & + small, & + h1, @@ -54,25 +54,24 @@ export const H2 = styled.h2` font-size: ${remcalc(24)}; margin: 0; - ${is('inline') ` + ${is('inline')` display: inline-block; `}; - - ${is('small') ` + ${is('small')` font-size: ${remcalc(24)}; `}; - ${is('bold') ` + ${is('bold')` font-weight: ${props => props.theme.font.weight.semibold}; `}; - ${is('white') ` + ${is('white')` -webkit-text-fill-color: currentcolor; color: ${props => props.theme.white} `}; - ${isNot('noMargin') ` + ${isNot('noMargin')` & + p, & + small, & + h1, @@ -95,25 +94,24 @@ export const H3 = styled.h3` font-size: ${remcalc(21)}; margin: 0; - ${is('inline') ` + ${is('inline')` display: inline-block; `}; - - ${is('small') ` + ${is('small')` font-size: ${remcalc(18)}; `}; - ${is('bold') ` + ${is('bold')` font-weight: ${props => props.theme.font.weight.semibold}; `}; - ${is('white') ` + ${is('white')` -webkit-text-fill-color: currentcolor; color: ${props => props.theme.white} `}; - ${isNot('noMargin') ` + ${isNot('noMargin')` & + p, & + small, & + h1, @@ -136,16 +134,16 @@ export const H4 = styled.h4` font-size: ${remcalc(15)}; margin: 0; - ${is('inline') ` + ${is('inline')` display: inline-block; `}; - ${is('white') ` + ${is('white')` -webkit-text-fill-color: currentcolor; color: ${props => props.theme.white} `}; - ${isNot('noMargin') ` + ${isNot('noMargin')` & + p, & + small, & + h1, @@ -168,20 +166,20 @@ export const H5 = styled.h4` font-size: ${remcalc(15)}; margin: 0; - ${is('inline') ` + ${is('inline')` display: inline-block; `}; - ${is('bold') ` + ${is('bold')` font-weight: ${props => props.theme.font.weight.semibold}; `}; - ${is('white') ` + ${is('white')` -webkit-text-fill-color: currentcolor; color: ${props => props.theme.white} `}; - ${isNot('noMargin') ` + ${isNot('noMargin')` & + p, & + small, & + h1, @@ -204,20 +202,20 @@ export const H6 = styled.h6` font-size: ${remcalc(13)}; margin: 0; - ${is('inline') ` + ${is('inline')` display: inline-block; `}; - ${is('bold') ` + ${is('bold')` font-weight: ${props => props.theme.font.weight.semibold}; `}; - ${is('white') ` + ${is('white')` -webkit-text-fill-color: currentcolor; color: ${props => props.theme.white} `}; - ${isNot('noMargin') ` + ${isNot('noMargin')` & + p, & + small, & + h1, diff --git a/packages/ui-toolkit/src/text/p.js b/packages/ui-toolkit/src/text/p.js index 71be3c1e..b09d13a2 100644 --- a/packages/ui-toolkit/src/text/p.js +++ b/packages/ui-toolkit/src/text/p.js @@ -15,7 +15,7 @@ export default styled.p` color: ${props => props.theme.white} `}; - ${is('center') ` + ${is('center')` text-align: center; `}; diff --git a/packages/ui-toolkit/src/text/sup.js b/packages/ui-toolkit/src/text/sup.js index 9e1b41fd..da824056 100644 --- a/packages/ui-toolkit/src/text/sup.js +++ b/packages/ui-toolkit/src/text/sup.js @@ -2,10 +2,9 @@ import styled from 'styled-components'; import remcalc from 'remcalc'; import is from 'styled-is'; - export default styled.sup` position: absolute; - margin-left: ${remcalc(6)};; + margin-left: ${remcalc(6)}; font-weight: ${props => props.theme.font.weight.semibold}; line-height: normal; font-size: ${remcalc(8)}; @@ -23,5 +22,5 @@ export default styled.sup` ${is('alert')` color: ${props => props.theme.orangeDark} - `} + `}; `; diff --git a/packages/ui-toolkit/src/theme/colors.js b/packages/ui-toolkit/src/theme/colors.js index f66c0407..f54c51a0 100644 --- a/packages/ui-toolkit/src/theme/colors.js +++ b/packages/ui-toolkit/src/theme/colors.js @@ -9,7 +9,6 @@ import { Margin } from 'styled-components-spacing'; import copy from 'clipboard-copy'; import { Clipboard } from '../icons'; - // Function to convert hex format to a rgb color function rgb2hex(rgb) { rgb = rgb.match( @@ -17,9 +16,9 @@ function rgb2hex(rgb) { ); return rgb && rgb.length === 4 ? '#' + - ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) + - ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2) + - ('0' + parseInt(rgb[3], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) + + ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2) + + ('0' + parseInt(rgb[3], 10).toString(16)).slice(-2) : ''; } @@ -27,9 +26,8 @@ const parseRGB = c => { const color = c.split('('); const rgb = color[1].split(')')[0]; - - return `${color[0].toUpperCase()}: ${rgb}` -} + return `${color[0].toUpperCase()}: ${rgb}`; +}; const Box = styled.div` width: ${remcalc(187)}; @@ -38,22 +36,24 @@ const Box = styled.div` padding: ${remcalc(18)} ${remcalc(26)}; box-sizing: border-box; - ${is('bottom') ` + ${is('bottom')` margin-bottom: ${remcalc(45)}; `}; - ${is('right') ` + ${is('right')` margin-right: ${remcalc(45)}; - `} + `}; `; const ClipboardIconActionable = Clipboard.extend` cursor: pointer; margin-left: ${remcalc(12)}; - path { fill: ${props => props.theme.white}; } + path { + fill: ${props => props.theme.white}; + } - ${is('dark') ` + ${is('dark')` path { fill: ${props => props.theme.text}; } `}; `; @@ -67,7 +67,7 @@ const Paragraph = P.extend` width: ${remcalc(193)}; text-align: left; - ${is('dark') ` + ${is('dark')` color: ${props => props.theme.text}; -webkit-text-fill-color: currentcolor; `}; @@ -78,7 +78,7 @@ const Code = styled.code` margin: 0; color: ${props => props.theme.white}; - ${is('dark') ` + ${is('dark')` color: ${props => props.theme.text}; -webkit-text-fill-color: currentcolor; `}; @@ -108,7 +108,13 @@ const Color = ({ name, color, dark, bottom, right }) => ( {name}
  • - {rgb2hex(color).toUpperCase()} copy(rgb2hex(color).toUpperCase())} /> + + {rgb2hex(color).toUpperCase()}{' '} + copy(rgb2hex(color).toUpperCase())} + /> +
  • {parseRGB(color)} @@ -123,51 +129,27 @@ export default () => (

    Action Colors

    This palette contains Triton’s ‘action and status’ colors. They aim to - communicate that a component is interactable and has a purpose. They also - act as status colors to alert users on the condition and nature of + communicate that a component is interactable and has a purpose. They + also act as status colors to alert users on the condition and nature of components. -

    +

    - - + + - - + +
    - + - + @@ -177,9 +159,9 @@ export default () => (

    Greys

    Greys give Triton a sense of depth and offer contrast between potentially - similar components. They allow us to make certain components look clickable, - whilst making others appear disabled or static. -

    + similar components. They allow us to make certain components look + clickable, whilst making others appear disabled or static. +

    ( name="Grey 2 - Faded" color={theme.whiteActive} /> - - - - + + + -) +); diff --git a/packages/ui-toolkit/styleguide.config.js b/packages/ui-toolkit/styleguide.config.js index e312cf45..4aafbf92 100644 --- a/packages/ui-toolkit/styleguide.config.js +++ b/packages/ui-toolkit/styleguide.config.js @@ -44,35 +44,37 @@ module.exports = { name: 'Typographic Scale', content: 'src/text/Readme.md', description: - 'Triton uses two typographic scales, a large and a small. The large is to be used on breakpoints above 600px, whilst the small is to be used on anything under that. ', + 'Triton uses two typographic scales, a large and a small. The large is to be used on breakpoints above 600px, whilst the small is to be used on anything under that. ' }, { name: 'Grids', content: 'src/grids/Readme.md', description: - 'Triton’s grid aims to have maximum coverage over a wide range of devices. With a maximum container width of 964px, we are able to display the main desktop experience all the way down to a tradional landscape tablet device.', + 'Triton’s grid aims to have maximum coverage over a wide range of devices. With a maximum container width of 964px, we are able to display the main desktop experience all the way down to a tradional landscape tablet device.' }, { name: 'Baseline Grids', content: 'src/grids/Baseline.md', description: - 'All of the size and spacing values are derived on the baseline grid. The baseline grid is composed of horizontal lines positioned 6 px apart, making the base measurement unit 6 px.', + 'All of the size and spacing values are derived on the baseline grid. The baseline grid is composed of horizontal lines positioned 6 px apart, making the base measurement unit 6 px.' }, { name: 'Superscript', content: 'src/text/Superscript.md', description: - 'Superscript is a way of formatting text so they appear above the baseline, drawing more attention to a smaller, less important element of information.', + 'Superscript is a way of formatting text so they appear above the baseline, drawing more attention to a smaller, less important element of information.' }, { name: 'Buttons', - description: '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. ', - content: 'src/button/Readme.md', + description: + '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. ', + content: 'src/button/Readme.md' }, { name: 'Special Buttons', - description: 'Icon buttons are to be used to illustrate important actions and for when we are redirecting users to seperate services such as Github. ', - content: 'src/button/Special.md', + description: + 'Icon buttons are to be used to illustrate important actions and for when we are redirecting users to seperate services such as Github. ', + content: 'src/button/Special.md' }, { name: 'Basic Components', @@ -88,25 +90,24 @@ module.exports = { { name: 'Tags', content: 'src/tags/Readme.md', - description: 'Tags are used to identify instances and services provided by Triton. Our tag style is derived from our small button style, but it’s inlaid text is written to represent the key:value function of the tagging system.' + description: + 'Tags are used to identify instances and services provided by Triton. Our tag style is derived from our small button style, but it’s inlaid text is written to represent the key:value function of the tagging system.' }, { name: 'Cards', content: 'src/card/demo.md', description: - 'Cards are the most widely used component within the current Triton designs. They are used to divide, compartmentalize, and sort information and components that are related. Our card style uses a white background with a Grey 3 border. In some cases we attach a header to cards with either a white background, a coloured background to denote an active status, or a grey background for inactive status.', + 'Cards are the most widely used component within the current Triton designs. They are used to divide, compartmentalize, and sort information and components that are related. Our card style uses a white background with a Grey 3 border. In some cases we attach a header to cards with either a white background, a coloured background to denote an active status, or a grey background for inactive status.' }, { name: 'Tables', content: 'src/table/Readme.md', description: - 'Tritons uses tables throughout the service in a number of different ways. Tables can be used to list multiple variations of simgle information types, such as instqance lists, snapshots, and package types. Tables can either be multiple select (checkbox) or single select (radio button) and both variations are shown below.', + 'Tritons uses tables throughout the service in a number of different ways. Tables can be used to list multiple variations of simgle information types, such as instqance lists, snapshots, and package types. Tables can either be multiple select (checkbox) or single select (radio button) and both variations are shown below.' }, { name: 'Compound Components', - components: () => [ - 'src/message/index.js', - ] + components: () => ['src/message/index.js'] }, { name: 'Toasts', diff --git a/yarn.lock b/yarn.lock index 0271ef0c..a53ef8b7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2089,6 +2089,10 @@ buble@^0.19.2: os-homedir "^1.0.1" vlq "^1.0.0" +buffer-from@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.0.0.tgz#4cb8832d23612589b0406e9e2956c17f06fdf531" + buffer-indexof@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c" @@ -2266,12 +2270,12 @@ caniuse-api@^1.5.2: lodash.uniq "^4.5.0" caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: - version "1.0.30000815" - resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000815.tgz#0e218fa133d0d071c886aa041b435258cc746891" + version "1.0.30000817" + resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000817.tgz#c9f8e236887cf60ae623d1fb1e5ec92877ab1229" caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000792: - version "1.0.30000815" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000815.tgz#3a4258e6850362185adb11b0d754a48402d35bf6" + version "1.0.30000817" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000817.tgz#e993c380eb4bfe76a2aed4223f841c02d6e0d832" capture-stack-trace@^1.0.0: version "1.0.0" @@ -2550,8 +2554,8 @@ code-point-at@^1.0.0: resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" codemirror@^5.18.2, codemirror@^5.32.0: - version "5.35.0" - resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.35.0.tgz#280653d495455bc66aa87e6284292b02775ba878" + version "5.36.0" + resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.36.0.tgz#1172ad9dc298056c06e0b34e5ccd23825ca15b40" collapse-white-space@^1.0.2: version "1.0.3" @@ -2705,9 +2709,10 @@ concat-stream@1.6.0: typedarray "^0.0.6" concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@^1.6.0: - version "1.6.1" - resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.1.tgz#261b8f518301f1d834e36342b9fea095d2620a26" + version "1.6.2" + resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34" dependencies: + buffer-from "^1.0.0" inherits "^2.0.3" readable-stream "^2.2.2" typedarray "^0.0.6" @@ -3649,8 +3654,8 @@ ee-first@1.1.1: resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30: - version "1.3.39" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.39.tgz#d7a4696409ca0995e2750156da612c221afad84d" + version "1.3.40" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.40.tgz#1fbd6d97befd72b8a6f921dc38d22413d2f6fddf" elliptic@^6.0.0: version "6.4.0" @@ -3750,8 +3755,8 @@ error-stack-parser@1.3.3: stackframe "^0.3.1" es-abstract@^1.7.0: - version "1.10.0" - resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864" + version "1.11.0" + resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.11.0.tgz#cce87d518f0496893b1a30cd8461835535480681" dependencies: es-to-primitive "^1.1.1" function-bind "^1.1.1" @@ -4593,8 +4598,8 @@ flatten@^1.0.2: resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782" flush-write-stream@^1.0.0: - version "1.0.2" - resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.2.tgz#c81b90d8746766f1a609a46809946c45dd8ae417" + version "1.0.3" + resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd" dependencies: inherits "^2.0.1" readable-stream "^2.0.4" @@ -5091,8 +5096,8 @@ hapi-render-react-joyent-document@^5.0.0: through2 "^2.0.3" hapi-render-react@^2.2.0: - version "2.5.1" - resolved "https://registry.yarnpkg.com/hapi-render-react/-/hapi-render-react-2.5.1.tgz#457bcf07629cd5889ae1691fb0d17c35875b00a5" + version "2.5.2" + resolved "https://registry.yarnpkg.com/hapi-render-react/-/hapi-render-react-2.5.2.tgz#d94c6000865d977404facc317e34bae84b2f4176" dependencies: clear-module "^2.1.0" get-stream "^3.0.0" @@ -6857,6 +6862,10 @@ lodash.get@^4.4.2: version "4.4.2" resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" +lodash.groupby@^4.6.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/lodash.groupby/-/lodash.groupby-4.6.0.tgz#0b08a1dcf68397c397855c3239783832df7403d1" + lodash.includes@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f" @@ -8057,8 +8066,8 @@ performance-now@^2.1.0: resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" pez@4.x.x: - version "4.0.1" - resolved "https://registry.yarnpkg.com/pez/-/pez-4.0.1.tgz#d698ecf9a146c9188d74abe5cef7b5cb71deb3b5" + version "4.0.2" + resolved "https://registry.yarnpkg.com/pez/-/pez-4.0.2.tgz#0a7c81b64968e90b0e9562b398f390939e9c4b53" dependencies: b64 "4.x.x" boom "7.x.x" @@ -9025,8 +9034,8 @@ react-scripts@^1.1.1: fsevents "^1.1.3" react-styleguidist@^6.2.5: - version "6.2.7" - resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.2.7.tgz#e7e7509b73439fb3899a9dfa13125def2c25c08f" + version "6.4.0" + resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.4.0.tgz#85eb647c5e140454aa58c00cff92671ad466fee0" dependencies: ast-types "^0.10.1" buble "^0.19.2" @@ -9625,8 +9634,8 @@ resolve@1.1.7: resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b" resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0: - version "1.5.0" - resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36" + version "1.6.0" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.6.0.tgz#0fbd21278b27b4004481c395349e7aba60a9ff5c" dependencies: path-parse "^1.0.5"