Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix(instances): only use latest version of each image 

fixes #1321
This commit is contained in:
Sara Vieira 2018-03-21 16:19:17 +00:00 committed by Sérgio Ramos
parent f5fbe0a169
commit fab0bbfcc3
21 changed files with 259 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/my-joy-instances/package.json
View File

@ -40,7 +40,9 @@
"joyent-ui-toolkit": "^5.0.0", "joyent-ui-toolkit": "^5.0.0",
"lodash.find": "^4.6.0", "lodash.find": "^4.6.0",
"lodash.findindex": "^4.6.0", "lodash.findindex": "^4.6.0",
"lodash.flatten": "^4.4.0",
"lodash.get": "^4.4.2", "lodash.get": "^4.4.2",
"lodash.groupby": "^4.6.0",
"lodash.includes": "^4.3.0", "lodash.includes": "^4.3.0",
"lodash.isarray": "^4.0.0", "lodash.isarray": "^4.0.0",
"lodash.isboolean": "^3.0.3", "lodash.isboolean": "^3.0.3",

17
packages/my-joy-instances/src/components/create-instance/image.js
View File

@ -36,9 +36,7 @@ const Version = styled(Select)`
export const Preview = ({ name, version, isVm }) => ( export const Preview = ({ name, version, isVm }) => (
<Fragment> <Fragment>
<Margin bottom={2} top={3}> <Margin bottom={2} top={3}>
<H3> <H3>{name}</H3>
{name} - {version}
</H3>
<P>{isVm ? 'Hardware Virtual Machine' : 'Infrastructure Container'} </P> <P>{isVm ? 'Hardware Virtual Machine' : 'Infrastructure Container'} </P>
</Margin> </Margin>
</Fragment> </Fragment>
@ -64,15 +62,16 @@ const Image = ({ onClick, active, ...image }) => {
<Margin bottom={3}> <Margin bottom={3}>
<Card id={id} onClick={handleCardClick} active={active} preview> <Card id={id} onClick={handleCardClick} active={active} preview>
<Logo onClick={handleLogoClick} width="42" height="42" /> <Logo onClick={handleLogoClick} width="42" height="42" />
<H4 onClick={handleLogoClick}>{titleCase(imageName)}</H4> <H4 onClick={handleLogoClick}>
{titleCase(imageName) || 'Custom Images'}
</H4>
<FormGroup name="image" field={Field}> <FormGroup name="image" field={Field}>
<Version onBlur={null}> <Version onBlur={null}>
<option selected>Version</option> <option selected>Version</option>
{versions.map(({ name, version, id }) => ( {versions.map(({ name, id }) => (
<option <option key={id} value={id}>
key={`${name} - ${version}`} {name}
value={id} </option>
>{`${name} - ${version}`}</option>
))} ))}
</Version> </Version>
</FormGroup> </FormGroup>

35
packages/my-joy-instances/src/containers/create-instance/image.js
View File

@ -8,8 +8,11 @@ import { Margin } from 'styled-components-spacing';
import includes from 'lodash.includes'; import includes from 'lodash.includes';
import sortBy from 'lodash.sortby'; import sortBy from 'lodash.sortby';
import findIndex from 'lodash.findindex'; 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 reverse from 'lodash.reverse';
import flatten from 'lodash.flatten';
import find from 'lodash.find';
import get from 'lodash.get'; import get from 'lodash.get';
import { InstanceTypeIcon, StatusLoader, Button } from 'joyent-ui-toolkit'; import { InstanceTypeIcon, StatusLoader, Button } from 'joyent-ui-toolkit';
@ -167,7 +170,8 @@ export default compose(
), ),
graphql(GetImages, { graphql(GetImages, {
options: () => ({ options: () => ({
ssr: false ssr: false,
variables: { public: true }
}), }),
props: ({ ownProps, data }) => { props: ({ ownProps, data }) => {
const { image = '', query } = ownProps; const { image = '', query } = ownProps;
@ -181,7 +185,7 @@ export default compose(
}; };
} }
const values = images const _images = images
.reduce((acc, img) => { .reduce((acc, img) => {
const isVm = !includes(img.type, 'DATASET'); const isVm = !includes(img.type, 'DATASET');
@ -198,6 +202,7 @@ export default compose(
const version = { const version = {
name: img.name, name: img.name,
version: img.version, version: img.version,
published: new Date(img.published_at).getTime(),
id: img.id id: img.id
}; };
@ -216,24 +221,34 @@ export default compose(
isVm isVm
}); });
const versions = acc[index].versions.concat([version]);
acc[index] = { acc[index] = {
...acc[index], ...acc[index],
versions: acc[index].versions.concat([version]) versions
}; };
return acc; return acc;
}, []) }, [])
.map(({ versions, ...img }) => ({ .map(({ versions, ...img }) => {
...img, return {
active: Boolean(find(versions, ['id', image])), ...img,
versions: reverse(sortBy(versions, ['name'])) 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]) || {}; const selected = find(images, ['id', image]) || {};
return { return {
loading, loading,
images: values, images: _images,
image: { image: {
...selected, ...selected,
isVm: !includes(selected.type || '', 'DATASET') isVm: !includes(selected.type || '', 'DATASET')

5
packages/my-joy-instances/src/graphql/get-images.gql
View File

@ -1,9 +1,10 @@
query Images { query Images($public: Boolean) {
images { images(public: $public) {
id id
name name
os os
version version
type type
published_at
} }
} }

43
packages/ui-toolkit/src/button/Special.md
View File

@ -8,15 +8,10 @@ const React = require('react');
const { default: Button } = require('./'); const { default: Button } = require('./');
const { StartIcon } = require('../'); const { StartIcon } = require('../');
<Button <Button type="button" secondary bold icon>
type="button" <StartIcon />
secondary <span>Start</span>
bold </Button>;
icon
>
<StartIcon />
<span>Start</span>
</Button>
``` ```
#### Delete Button #### Delete Button
@ -29,38 +24,24 @@ const React = require('react');
const { default: Button } = require('./'); const { default: Button } = require('./');
const { DeleteIcon } = require('../'); const { DeleteIcon } = require('../');
<Button type="button" secondary bold icon error>
<Button <DeleteIcon fill="rgb(210, 67, 58)" />
type="button"
secondary
bold
icon
error
>
<DeleteIcon fill="rgb(210, 67, 58)"/>
<span>Remove</span> <span>Remove</span>
</Button> </Button>;
// Tab: Disabled // Tab: Disabled
const React = require('react'); const React = require('react');
const { default: Button } = require('./'); const { default: Button } = require('./');
const { DeleteIcon } = require('../'); const { DeleteIcon } = require('../');
<Button type="button" secondary disabled bold icon error>
<Button
type="button"
secondary
disabled
bold
icon
error
>
<DeleteIcon /> <DeleteIcon />
<span>Remove</span> <span>Remove</span>
</Button> </Button>;
``` ```
#### Toggle Switch #### Toggle Switch
Toggle switch is to be used when users have the choice to turn a service or feature on or off. Toggle switch is to be used when users have the choice to turn a service or feature on or off.
```jsx ```jsx
@ -71,7 +52,7 @@ const { default: Toggle } = require('../form/toggle');
<FormGroup name="who-killed-1"> <FormGroup name="who-killed-1">
<Toggle value="video">Activate</Toggle> <Toggle value="video">Activate</Toggle>
</FormGroup> </FormGroup>;
// Tab: Disabled // Tab: Disabled
const React = require('react'); const React = require('react');
@ -82,5 +63,5 @@ const { default: Toggle } = require('../form/toggle');
<Toggle value="video" disabled> <Toggle value="video" disabled>
Activate Activate
</Toggle> </Toggle>
</FormGroup> </FormGroup>;
``` ```

41
packages/ui-toolkit/src/footer/sticky.md
View File

@ -5,51 +5,40 @@ Quick Action Toasts are used to show contextually relevent commands and actions
```jsx ```jsx
// Name: Active // Name: Active
const React = require('react'); 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'); const { Row, Col } = require('joyent-react-styled-flexboxgrid');
<div style={{position: 'relative', height: 100}}> <div style={{ position: 'relative', height: 100 }}>
<StickyFooter bottom> <StickyFooter bottom>
<Row between="xs" middle="xs"> <Row between="xs" middle="xs">
<Col xs={7}> <Col xs={7}>
<Button <Button type="button" secondary icon>
type="button"
secondary
icon
>
<StartIcon /> <StartIcon />
<span>Start</span> <span>Start</span>
</Button> </Button>
<Button <Button type="button" secondary icon>
type="button"
secondary
icon
>
<StopIcon /> <StopIcon />
<span>Stop</span> <span>Stop</span>
</Button> </Button>
<Button <Button type="button" secondary icon>
type="button"
secondary
icon
>
<ResetIcon /> <ResetIcon />
<span>Reboot</span> <span>Reboot</span>
</Button> </Button>
</Col> </Col>
<Col xs={5}> <Col xs={5}>
<Button <Button type="button" error secondary right icon>
type="button" <DeleteIcon fill="#D2433A" />
error
secondary
right
icon
>
<DeleteIcon fill="#D2433A"/>
<span>Remove</span> <span>Remove</span>
</Button> </Button>
</Col> </Col>
</Row> </Row>
</StickyFooter> </StickyFooter>
</div> </div>;
``` ```

1
packages/ui-toolkit/src/grids/Readme.md
View File

@ -22,7 +22,6 @@ const medium = require('./medium.svg');
}} src={medium} /> }} src={medium} />
``` ```
#### Small Grid #### Small Grid
```jsx noeditor ```jsx noeditor

4
packages/ui-toolkit/src/navigation.md
View File

@ -26,7 +26,7 @@ const { Breadcrumb, BreadcrumbItem, Anchor } = require('./index.js');
const React = require('react'); const React = require('react');
const { Footer } = require('./'); const { Footer } = require('./');
<div style={{position: 'relative', height: 100}}> <div style={{ position: 'relative', height: 100 }}>
<Footer /> <Footer />
</div> </div>;
``` ```

1
packages/ui-toolkit/src/styleguide/component.js
View File

@ -6,7 +6,6 @@ import { P, H4 } from '../';
const chevron = const chevron =
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTsiIGNsYXNzPSJiYXNlbGluZS1idFRncEsgaGltUHhaIj48cGF0aCBmaWxsPSJyZ2JhKDczLCA3MywgNzMsIDEpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiPjwvcGF0aD48L3N2Zz4='; 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTsiIGNsYXNzPSJiYXNlbGluZS1idFRncEsgaGltUHhaIj48cGF0aCBmaWxsPSJyZ2JhKDczLCA3MywgNzMsIDEpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiPjwvcGF0aD48L3N2Zz4=';
const Main = styled.div` const Main = styled.div`
h4[class*='rsg--heading'] { h4[class*='rsg--heading'] {
margin: 0; margin: 0;

8
packages/ui-toolkit/src/styleguide/section.js
View File

@ -3,7 +3,7 @@ import styled from 'styled-components';
import { Card, H2, P, H4 } from '../'; import { Card, H2, P, H4 } from '../';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
const CardStyled = styled(Card) ` const CardStyled = styled(Card)`
margin-bottom: ${remcalc(36)}; margin-bottom: ${remcalc(36)};
`; `;
@ -35,7 +35,7 @@ export default allProps => {
<CardStyled id={name.replace(/\s+/g, '-').toLowerCase()}> <CardStyled id={name.replace(/\s+/g, '-').toLowerCase()}>
<Header> <Header>
<H2 white>{name}</H2> <H2 white>{name}</H2>
{description ? <P white>{description}</P> : null } {description ? <P white>{description}</P> : null}
</Header> </Header>
<Main> <Main>
{content} {content}
@ -43,7 +43,7 @@ export default allProps => {
{sections} {sections}
</Main> </Main>
</CardStyled> </CardStyled>
) );
} }
return ( return (
@ -58,5 +58,5 @@ export default allProps => {
{sections} {sections}
</div> </div>
</Fragment> </Fragment>
) );
}; };

6
packages/ui-toolkit/src/styleguide/sidebar.js
View File

@ -27,7 +27,7 @@ const Header = styled(H3)`
const Link = styled.a` const Link = styled.a`
color: #979797; color: #979797;
text-decoration: none; text-decoration: none;
` `;
export default ({ children: { props } }) => { export default ({ children: { props } }) => {
const items = props.items.filter(item => item.name); const items = props.items.filter(item => item.name);
@ -40,7 +40,9 @@ export default ({ children: { props } }) => {
<List> <List>
{items.map(({ heading, name, slug, content }) => ( {items.map(({ heading, name, slug, content }) => (
<li key={name}> <li key={name}>
<Header><Link href={`/#${slug}`}>{name}</Link></Header> <Header>
<Link href={`/#${slug}`}>{name}</Link>
</Header>
{content} {content}
</li> </li>
))} ))}

13
packages/ui-toolkit/src/table/Readme.md
View File

@ -93,8 +93,8 @@ const { default: Table, Tfoot, Tr, Th } = require('./');
</Table>; </Table>;
``` ```
#### Empty Table #### Empty Table
```jsx ```jsx
// Name: Active // Name: Active
const React = require('react'); const React = require('react');
@ -104,8 +104,6 @@ const { Card, H3, Button, P } = require('../');
const { Padding, Margin } = require('styled-components-spacing'); const { Padding, Margin } = require('styled-components-spacing');
const { default: Flex } = require('styled-flex-component'); const { default: Flex } = require('styled-flex-component');
<div> <div>
<Table> <Table>
<Thead> <Thead>
@ -160,18 +158,21 @@ const { default: Flex } = require('styled-flex-component');
</Tr> </Tr>
</Thead> </Thead>
</Table> </Table>
<Card> <Card>
<Padding all={5}> <Padding all={5}>
<Flex alignCenter justifyCenter column> <Flex alignCenter justifyCenter column>
<H3>No instances yet?</H3> <H3>No instances yet?</H3>
<P center>You haven’t commissioned any instances yet, but they’re really easy to set up. Click below to get going.</P> <P center>
You haven’t commissioned any instances yet, but they’re really easy to
set up. Click below to get going.
</P>
<Margin top={2}> <Margin top={2}>
<Button>Create Instance</Button> <Button>Create Instance</Button>
</Margin> </Margin>
</Flex> </Flex>
</Padding> </Padding>
</Card> </Card>
</div> </div>;
``` ```
#### Multiple Selection List #### Multiple Selection List

40
packages/ui-toolkit/src/tags/Readme.md
View File

@ -5,25 +5,25 @@
const React = require('react'); const React = require('react');
const { TagItem, TagList } = require('./'); const { TagItem, TagList } = require('./');
<TagItem active>Tags:4lyf</TagItem> <TagItem active>Tags:4lyf</TagItem>;
// Tab: Normal // Tab: Normal
const React = require('react'); const React = require('react');
const { TagItem, TagList } = require('./'); const { TagItem, TagList } = require('./');
<TagItem>Tags:4lyf</TagItem> <TagItem>Tags:4lyf</TagItem>;
// Tab: Disabled // Tab: Disabled
const React = require('react'); const React = require('react');
const { TagItem, TagList } = require('./'); const { TagItem, TagList } = require('./');
<TagItem disabled>Tags:4lyf</TagItem> <TagItem disabled>Tags:4lyf</TagItem>;
// Tab: Error // Tab: Error
const React = require('react'); const React = require('react');
const { TagItem, TagList } = require('./'); const { TagItem, TagList } = require('./');
<TagItem error>Tags:4lyf</TagItem> <TagItem error>Tags:4lyf</TagItem>;
``` ```
#### Deleteable Tags #### Deleteable Tags
@ -36,9 +36,11 @@ const { PlusIcon } = require('../');
const { Margin } = require('styled-components-spacing'); const { Margin } = require('styled-components-spacing');
<TagItem active> <TagItem active>
Tags:4lyf Tags:4lyf
<Margin left={1}><PlusIcon /></Margin> <Margin left={1}>
</TagItem> <PlusIcon />
</Margin>
</TagItem>;
// Tab: Normal // Tab: Normal
const React = require('react'); const React = require('react');
@ -47,9 +49,11 @@ const { PlusIcon } = require('../');
const { Margin } = require('styled-components-spacing'); const { Margin } = require('styled-components-spacing');
<TagItem> <TagItem>
Tags:4lyf Tags:4lyf
<Margin left={1}><PlusIcon /></Margin> <Margin left={1}>
</TagItem> <PlusIcon />
</Margin>
</TagItem>;
// Tab: Disabled // Tab: Disabled
const React = require('react'); const React = require('react');
@ -58,9 +62,11 @@ const { PlusIcon } = require('../');
const { Margin } = require('styled-components-spacing'); const { Margin } = require('styled-components-spacing');
<TagItem disabled> <TagItem disabled>
Tags:4lyf Tags:4lyf
<Margin left={1}><PlusIcon /></Margin> <Margin left={1}>
</TagItem> <PlusIcon />
</Margin>
</TagItem>;
// Tab: Error // Tab: Error
const React = require('react'); const React = require('react');
@ -69,7 +75,9 @@ const { PlusIcon } = require('../');
const { Margin } = require('styled-components-spacing'); const { Margin } = require('styled-components-spacing');
<TagItem error> <TagItem error>
Tags:4lyf Tags:4lyf
<Margin left={1}><PlusIcon /></Margin> <Margin left={1}>
</TagItem> <PlusIcon />
</Margin>
</TagItem>;
``` ```

4
packages/ui-toolkit/src/tags/item.js
View File

@ -30,11 +30,11 @@ const Tag = styled.li`
flex-grow: 0; flex-grow: 0;
align-items: center; align-items: center;
${is('disabled') ` ${is('disabled')`
background: ${props => props.theme.disabled}; background: ${props => props.theme.disabled};
`}; `};
${is('error') ` ${is('error')`
border: ${remcalc(1)} solid ${props => props.theme.red}; border: ${remcalc(1)} solid ${props => props.theme.red};
`}; `};

42
packages/ui-toolkit/src/text/Superscript.md
View File

@ -7,7 +7,7 @@ The default superscript was intially designed to offer supporting information on
const React = require('react'); const React = require('react');
const Sup = require('/').Sup; const Sup = require('/').Sup;
const P = require('/').P; const P = require('/').P;
const Small = require('/').Small const Small = require('/').Small;
const styles = { const styles = {
color: '#979797', color: '#979797',
@ -18,12 +18,12 @@ const styles = {
}; };
<div> <div>
<P> <P>
Superscript Example Superscript Example
<Sup>Superscript</Sup> <Sup>Superscript</Sup>
</P> </P>
<Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small> <Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small>
</div> </div>;
``` ```
#### Alert Superscript #### 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 React = require('react');
const Sup = require('/').Sup; const Sup = require('/').Sup;
const P = require('/').P; const P = require('/').P;
const Small = require('/').Small const Small = require('/').Small;
const styles = { const styles = {
color: '#979797', color: '#979797',
@ -46,12 +46,12 @@ const styles = {
}; };
<div> <div>
<P> <P>
Superscript Example Superscript Example
<Sup alert>Alert Superscript</Sup> <Sup alert>Alert Superscript</Sup>
</P> </P>
<Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small> <Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small>
</div> </div>;
``` ```
#### Badge Superscript #### Badge Superscript
@ -63,7 +63,7 @@ The badge variation of superscript is for when a specific element of information
const React = require('react'); const React = require('react');
const Sup = require('/').Sup; const Sup = require('/').Sup;
const P = require('/').P; const P = require('/').P;
const Small = require('/').Small const Small = require('/').Small;
const styles = { const styles = {
color: '#979797', color: '#979797',
@ -74,10 +74,10 @@ const styles = {
}; };
<div> <div>
<P> <P>
Superscript Example Superscript Example
<Sup badge>SSD</Sup> <Sup badge>SSD</Sup>
</P> </P>
<Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small> <Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small>
</div> </div>;
``` ```

54
packages/ui-toolkit/src/text/headings.js
View File

@ -14,24 +14,24 @@ export const H1 = NH1.extend`
font-weight: normal; font-weight: normal;
margin: 0; margin: 0;
${is('inline') ` ${is('inline')`
display: inline-block; display: inline-block;
`}; `};
${is('small') ` ${is('small')`
font-size: ${remcalc(32)}; font-size: ${remcalc(32)};
`}; `};
${is('bold') ` ${is('bold')`
font-weight: ${props => props.theme.font.weight.semibold}; font-weight: ${props => props.theme.font.weight.semibold};
`}; `};
${is('white') ` ${is('white')`
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
color: ${props => props.theme.white} color: ${props => props.theme.white}
`}; `};
${isNot('noMargin') ` ${isNot('noMargin')`
& + p, & + p,
& + small, & + small,
& + h1, & + h1,
@ -54,25 +54,24 @@ export const H2 = styled.h2`
font-size: ${remcalc(24)}; font-size: ${remcalc(24)};
margin: 0; margin: 0;
${is('inline') ` ${is('inline')`
display: inline-block; display: inline-block;
`}; `};
${is('small')`
${is('small') `
font-size: ${remcalc(24)}; font-size: ${remcalc(24)};
`}; `};
${is('bold') ` ${is('bold')`
font-weight: ${props => props.theme.font.weight.semibold}; font-weight: ${props => props.theme.font.weight.semibold};
`}; `};
${is('white') ` ${is('white')`
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
color: ${props => props.theme.white} color: ${props => props.theme.white}
`}; `};
${isNot('noMargin') ` ${isNot('noMargin')`
& + p, & + p,
& + small, & + small,
& + h1, & + h1,
@ -95,25 +94,24 @@ export const H3 = styled.h3`
font-size: ${remcalc(21)}; font-size: ${remcalc(21)};
margin: 0; margin: 0;
${is('inline') ` ${is('inline')`
display: inline-block; display: inline-block;
`}; `};
${is('small')`
${is('small') `
font-size: ${remcalc(18)}; font-size: ${remcalc(18)};
`}; `};
${is('bold') ` ${is('bold')`
font-weight: ${props => props.theme.font.weight.semibold}; font-weight: ${props => props.theme.font.weight.semibold};
`}; `};
${is('white') ` ${is('white')`
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
color: ${props => props.theme.white} color: ${props => props.theme.white}
`}; `};
${isNot('noMargin') ` ${isNot('noMargin')`
& + p, & + p,
& + small, & + small,
& + h1, & + h1,
@ -136,16 +134,16 @@ export const H4 = styled.h4`
font-size: ${remcalc(15)}; font-size: ${remcalc(15)};
margin: 0; margin: 0;
${is('inline') ` ${is('inline')`
display: inline-block; display: inline-block;
`}; `};
${is('white') ` ${is('white')`
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
color: ${props => props.theme.white} color: ${props => props.theme.white}
`}; `};
${isNot('noMargin') ` ${isNot('noMargin')`
& + p, & + p,
& + small, & + small,
& + h1, & + h1,
@ -168,20 +166,20 @@ export const H5 = styled.h4`
font-size: ${remcalc(15)}; font-size: ${remcalc(15)};
margin: 0; margin: 0;
${is('inline') ` ${is('inline')`
display: inline-block; display: inline-block;
`}; `};
${is('bold') ` ${is('bold')`
font-weight: ${props => props.theme.font.weight.semibold}; font-weight: ${props => props.theme.font.weight.semibold};
`}; `};
${is('white') ` ${is('white')`
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
color: ${props => props.theme.white} color: ${props => props.theme.white}
`}; `};
${isNot('noMargin') ` ${isNot('noMargin')`
& + p, & + p,
& + small, & + small,
& + h1, & + h1,
@ -204,20 +202,20 @@ export const H6 = styled.h6`
font-size: ${remcalc(13)}; font-size: ${remcalc(13)};
margin: 0; margin: 0;
${is('inline') ` ${is('inline')`
display: inline-block; display: inline-block;
`}; `};
${is('bold') ` ${is('bold')`
font-weight: ${props => props.theme.font.weight.semibold}; font-weight: ${props => props.theme.font.weight.semibold};
`}; `};
${is('white') ` ${is('white')`
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
color: ${props => props.theme.white} color: ${props => props.theme.white}
`}; `};
${isNot('noMargin') ` ${isNot('noMargin')`
& + p, & + p,
& + small, & + small,
& + h1, & + h1,

2
packages/ui-toolkit/src/text/p.js
View File

@ -15,7 +15,7 @@ export default styled.p`
color: ${props => props.theme.white} color: ${props => props.theme.white}
`}; `};
${is('center') ` ${is('center')`
text-align: center; text-align: center;
`}; `};

5
packages/ui-toolkit/src/text/sup.js
View File

@ -2,10 +2,9 @@ import styled from 'styled-components';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import is from 'styled-is'; import is from 'styled-is';
export default styled.sup` export default styled.sup`
position: absolute; position: absolute;
margin-left: ${remcalc(6)};; margin-left: ${remcalc(6)};
font-weight: ${props => props.theme.font.weight.semibold}; font-weight: ${props => props.theme.font.weight.semibold};
line-height: normal; line-height: normal;
font-size: ${remcalc(8)}; font-size: ${remcalc(8)};
@ -23,5 +22,5 @@ export default styled.sup`
${is('alert')` ${is('alert')`
color: ${props => props.theme.orangeDark} color: ${props => props.theme.orangeDark}
`} `};
`; `;

114
packages/ui-toolkit/src/theme/colors.js
View File

@ -9,7 +9,6 @@ import { Margin } from 'styled-components-spacing';
import copy from 'clipboard-copy'; import copy from 'clipboard-copy';
import { Clipboard } from '../icons'; import { Clipboard } from '../icons';
// Function to convert hex format to a rgb color // Function to convert hex format to a rgb color
function rgb2hex(rgb) { function rgb2hex(rgb) {
rgb = rgb.match( rgb = rgb.match(
@ -17,9 +16,9 @@ function rgb2hex(rgb) {
); );
return rgb && rgb.length === 4 return rgb && rgb.length === 4
? '#' + ? '#' +
('0' + parseInt(rgb[1], 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[2], 10).toString(16)).slice(-2) +
('0' + parseInt(rgb[3], 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 color = c.split('(');
const rgb = color[1].split(')')[0]; const rgb = color[1].split(')')[0];
return `${color[0].toUpperCase()}: ${rgb}`;
return `${color[0].toUpperCase()}: ${rgb}` };
}
const Box = styled.div` const Box = styled.div`
width: ${remcalc(187)}; width: ${remcalc(187)};
@ -38,22 +36,24 @@ const Box = styled.div`
padding: ${remcalc(18)} ${remcalc(26)}; padding: ${remcalc(18)} ${remcalc(26)};
box-sizing: border-box; box-sizing: border-box;
${is('bottom') ` ${is('bottom')`
margin-bottom: ${remcalc(45)}; margin-bottom: ${remcalc(45)};
`}; `};
${is('right') ` ${is('right')`
margin-right: ${remcalc(45)}; margin-right: ${remcalc(45)};
`} `};
`; `;
const ClipboardIconActionable = Clipboard.extend` const ClipboardIconActionable = Clipboard.extend`
cursor: pointer; cursor: pointer;
margin-left: ${remcalc(12)}; 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}; } path { fill: ${props => props.theme.text}; }
`}; `};
`; `;
@ -67,7 +67,7 @@ const Paragraph = P.extend`
width: ${remcalc(193)}; width: ${remcalc(193)};
text-align: left; text-align: left;
${is('dark') ` ${is('dark')`
color: ${props => props.theme.text}; color: ${props => props.theme.text};
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
`}; `};
@ -78,7 +78,7 @@ const Code = styled.code`
margin: 0; margin: 0;
color: ${props => props.theme.white}; color: ${props => props.theme.white};
${is('dark') ` ${is('dark')`
color: ${props => props.theme.text}; color: ${props => props.theme.text};
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
`}; `};
@ -108,7 +108,13 @@ const Color = ({ name, color, dark, bottom, right }) => (
<Paragraph dark={dark}>{name}</Paragraph> <Paragraph dark={dark}>{name}</Paragraph>
</li> </li>
<li> <li>
<Flex alignCenter><Code dark={dark}>{rgb2hex(color).toUpperCase()}</Code> <ClipboardIconActionable dark={dark} onClick={() => copy(rgb2hex(color).toUpperCase())} /></Flex> <Flex alignCenter>
<Code dark={dark}>{rgb2hex(color).toUpperCase()}</Code>{' '}
<ClipboardIconActionable
dark={dark}
onClick={() => copy(rgb2hex(color).toUpperCase())}
/>
</Flex>
</li> </li>
<li> <li>
<Code dark={dark}>{parseRGB(color)}</Code> <Code dark={dark}>{parseRGB(color)}</Code>
@ -123,51 +129,27 @@ export default () => (
<H3>Action Colors</H3> <H3>Action Colors</H3>
<P> <P>
This palette contains Triton’s ‘action and status’ colors. They aim to This palette contains Triton’s ‘action and status’ colors. They aim to
communicate that a component is interactable and has a purpose. They also communicate that a component is interactable and has a purpose. They
act as status colors to alert users on the condition and nature of also act as status colors to alert users on the condition and nature of
components. components.
</P> </P>
</div> </div>
<Margin style={{ display: 'inline-block' }} top={4} bottom={5} right={5}> <Margin style={{ display: 'inline-block' }} top={4} bottom={5} right={5}>
<Color <Color key="primaryHover" name="Blue 1" color={theme.primary} />
key="primaryHover" <Color key="primaryActive" name="Blue 2" color={theme.primaryActive} />
name="Blue 1"
color={theme.primary}
/>
<Color
key="primaryActive"
name="Blue 2"
color={theme.primaryActive}
/>
</Margin> </Margin>
<Margin style={{ display: 'inline-block' }} top={4} bottom={5}> <Margin style={{ display: 'inline-block' }} top={4} bottom={5}>
<Color <Color key="joyent1" name="Joyent 1" color="rgb(44, 72, 89)" />
key="joyent1" <Color key="joyent2" name="Joyent 2" color="rgb(27, 50, 64)" />
name="Joyent 1"
color="rgb(44, 72, 89)"
/>
<Color
key="joyent2"
name="Joyent 2"
color="rgb(27, 50, 64)"
/>
</Margin> </Margin>
<div> <div>
<Margin right={5} style={{ display: 'inline-block' }} bottom={2}> <Margin right={5} style={{ display: 'inline-block' }} bottom={2}>
<Color key="green" name="Green 1" color={theme.green} /> <Color key="green" name="Green 1" color={theme.green} />
<Color <Color key="greenDark" name="Green 2" color={theme.greenDark} />
key="greenDark"
name="Green 2"
color={theme.greenDark}
/>
</Margin> </Margin>
<Margin bottom={2} right={5} style={{ display: 'inline-block' }}> <Margin bottom={2} right={5} style={{ display: 'inline-block' }}>
<Color key="orange" name="Orange 1" color={theme.orange} /> <Color key="orange" name="Orange 1" color={theme.orange} />
<Color <Color key="orangeDark" name="Orange 2" color={theme.orangeDark} />
key="orangeDark"
name="Orange 2"
color={theme.orangeDark}
/>
</Margin> </Margin>
<Margin bottom={5} right={5} style={{ display: 'inline-block' }}> <Margin bottom={5} right={5} style={{ display: 'inline-block' }}>
<Color key="red" name="Red 1" color={theme.red} /> <Color key="red" name="Red 1" color={theme.red} />
@ -177,9 +159,9 @@ export default () => (
<H3>Greys</H3> <H3>Greys</H3>
<P> <P>
Greys give Triton a sense of depth and offer contrast between potentially Greys give Triton a sense of depth and offer contrast between potentially
similar components. They allow us to make certain components look clickable, similar components. They allow us to make certain components look
whilst making others appear disabled or static. clickable, whilst making others appear disabled or static.
</P> </P>
<Margin top={4}> <Margin top={4}>
<Flex wrap> <Flex wrap>
<Color <Color
@ -198,15 +180,29 @@ export default () => (
name="Grey 2 - Faded" name="Grey 2 - Faded"
color={theme.whiteActive} color={theme.whiteActive}
/> />
<Color bottom dark key="grey" name="Grey 3 - Dividers" color={theme.grey} /> <Color
<Color bottom right key="greyDark" name="Grey 4 - Disabled" color={theme.greyDark} /> bottom
<Color bottom right key="text" name="Grey 5 - Text" color={theme.text} /> dark
<Color bottom key="grey"
key="greyDarker" name="Grey 3 - Dividers"
name="Grey 6" color={theme.grey}
color={theme.greyDarker}
/> />
<Color
bottom
right
key="greyDark"
name="Grey 4 - Disabled"
color={theme.greyDark}
/>
<Color
bottom
right
key="text"
name="Grey 5 - Text"
color={theme.text}
/>
<Color bottom key="greyDarker" name="Grey 6" color={theme.greyDarker} />
</Flex> </Flex>
</Margin> </Margin>
</Fragment> </Fragment>
) );

29
packages/ui-toolkit/styleguide.config.js
View File

@ -44,35 +44,37 @@ module.exports = {
name: 'Typographic Scale', name: 'Typographic Scale',
content: 'src/text/Readme.md', content: 'src/text/Readme.md',
description: 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', name: 'Grids',
content: 'src/grids/Readme.md', content: 'src/grids/Readme.md',
description: 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', name: 'Baseline Grids',
content: 'src/grids/Baseline.md', content: 'src/grids/Baseline.md',
description: 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', name: 'Superscript',
content: 'src/text/Superscript.md', content: 'src/text/Superscript.md',
description: 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', 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. ', description:
content: 'src/button/Readme.md', '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', 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. ', description:
content: 'src/button/Special.md', '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', name: 'Basic Components',
@ -88,25 +90,24 @@ module.exports = {
{ {
name: 'Tags', name: 'Tags',
content: 'src/tags/Readme.md', 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', name: 'Cards',
content: 'src/card/demo.md', content: 'src/card/demo.md',
description: 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', name: 'Tables',
content: 'src/table/Readme.md', content: 'src/table/Readme.md',
description: 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', name: 'Compound Components',
components: () => [ components: () => ['src/message/index.js']
'src/message/index.js',
]
}, },
{ {
name: 'Toasts', name: 'Toasts',

53
yarn.lock
View File

@ -2089,6 +2089,10 @@ buble@^0.19.2:
os-homedir "^1.0.1" os-homedir "^1.0.1"
vlq "^1.0.0" 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: buffer-indexof@^1.0.0:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c" 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" lodash.uniq "^4.5.0"
caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
version "1.0.30000815" version "1.0.30000817"
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000815.tgz#0e218fa133d0d071c886aa041b435258cc746891" resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000817.tgz#c9f8e236887cf60ae623d1fb1e5ec92877ab1229"
caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000792: caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000792:
version "1.0.30000815" version "1.0.30000817"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000815.tgz#3a4258e6850362185adb11b0d754a48402d35bf6" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000817.tgz#e993c380eb4bfe76a2aed4223f841c02d6e0d832"
capture-stack-trace@^1.0.0: capture-stack-trace@^1.0.0:
version "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" resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
codemirror@^5.18.2, codemirror@^5.32.0: codemirror@^5.18.2, codemirror@^5.32.0:
version "5.35.0" version "5.36.0"
resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.35.0.tgz#280653d495455bc66aa87e6284292b02775ba878" resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.36.0.tgz#1172ad9dc298056c06e0b34e5ccd23825ca15b40"
collapse-white-space@^1.0.2: collapse-white-space@^1.0.2:
version "1.0.3" version "1.0.3"
@ -2705,9 +2709,10 @@ concat-stream@1.6.0:
typedarray "^0.0.6" typedarray "^0.0.6"
concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@^1.6.0: concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@^1.6.0:
version "1.6.1" version "1.6.2"
resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.1.tgz#261b8f518301f1d834e36342b9fea095d2620a26" resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
dependencies: dependencies:
buffer-from "^1.0.0"
inherits "^2.0.3" inherits "^2.0.3"
readable-stream "^2.2.2" readable-stream "^2.2.2"
typedarray "^0.0.6" 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" 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: electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30:
version "1.3.39" version "1.3.40"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.39.tgz#d7a4696409ca0995e2750156da612c221afad84d" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.40.tgz#1fbd6d97befd72b8a6f921dc38d22413d2f6fddf"
elliptic@^6.0.0: elliptic@^6.0.0:
version "6.4.0" version "6.4.0"
@ -3750,8 +3755,8 @@ error-stack-parser@1.3.3:
stackframe "^0.3.1" stackframe "^0.3.1"
es-abstract@^1.7.0: es-abstract@^1.7.0:
version "1.10.0" version "1.11.0"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864" resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.11.0.tgz#cce87d518f0496893b1a30cd8461835535480681"
dependencies: dependencies:
es-to-primitive "^1.1.1" es-to-primitive "^1.1.1"
function-bind "^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" resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
flush-write-stream@^1.0.0: flush-write-stream@^1.0.0:
version "1.0.2" version "1.0.3"
resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.2.tgz#c81b90d8746766f1a609a46809946c45dd8ae417" resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd"
dependencies: dependencies:
inherits "^2.0.1" inherits "^2.0.1"
readable-stream "^2.0.4" readable-stream "^2.0.4"
@ -5091,8 +5096,8 @@ hapi-render-react-joyent-document@^5.0.0:
through2 "^2.0.3" through2 "^2.0.3"
hapi-render-react@^2.2.0: hapi-render-react@^2.2.0:
version "2.5.1" version "2.5.2"
resolved "https://registry.yarnpkg.com/hapi-render-react/-/hapi-render-react-2.5.1.tgz#457bcf07629cd5889ae1691fb0d17c35875b00a5" resolved "https://registry.yarnpkg.com/hapi-render-react/-/hapi-render-react-2.5.2.tgz#d94c6000865d977404facc317e34bae84b2f4176"
dependencies: dependencies:
clear-module "^2.1.0" clear-module "^2.1.0"
get-stream "^3.0.0" get-stream "^3.0.0"
@ -6857,6 +6862,10 @@ lodash.get@^4.4.2:
version "4.4.2" version "4.4.2"
resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" 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: lodash.includes@^4.3.0:
version "4.3.0" version "4.3.0"
resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f" 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" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
pez@4.x.x: pez@4.x.x:
version "4.0.1" version "4.0.2"
resolved "https://registry.yarnpkg.com/pez/-/pez-4.0.1.tgz#d698ecf9a146c9188d74abe5cef7b5cb71deb3b5" resolved "https://registry.yarnpkg.com/pez/-/pez-4.0.2.tgz#0a7c81b64968e90b0e9562b398f390939e9c4b53"
dependencies: dependencies:
b64 "4.x.x" b64 "4.x.x"
boom "7.x.x" boom "7.x.x"
@ -9025,8 +9034,8 @@ react-scripts@^1.1.1:
fsevents "^1.1.3" fsevents "^1.1.3"
react-styleguidist@^6.2.5: react-styleguidist@^6.2.5:
version "6.2.7" version "6.4.0"
resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.2.7.tgz#e7e7509b73439fb3899a9dfa13125def2c25c08f" resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.4.0.tgz#85eb647c5e140454aa58c00cff92671ad466fee0"
dependencies: dependencies:
ast-types "^0.10.1" ast-types "^0.10.1"
buble "^0.19.2" buble "^0.19.2"
@ -9625,8 +9634,8 @@ resolve@1.1.7:
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0: resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0:
version "1.5.0" version "1.6.0"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.6.0.tgz#0fbd21278b27b4004481c395349e7aba60a9ff5c"
dependencies: dependencies:
path-parse "^1.0.5" path-parse "^1.0.5"