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",
"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",

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 }) => (
<Fragment>
<Margin bottom={2} top={3}>
<H3>
{name} - {version}
</H3>
<H3>{name}</H3>
<P>{isVm ? 'Hardware Virtual Machine' : 'Infrastructure Container'} </P>
</Margin>
</Fragment>
@ -64,15 +62,16 @@ const Image = ({ onClick, active, ...image }) => {
<Margin bottom={3}>
<Card id={id} onClick={handleCardClick} active={active} preview>
<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}>
<Version onBlur={null}>
<option selected>Version</option>
{versions.map(({ name, version, id }) => (
<option
key={`${name} - ${version}`}
value={id}
>{`${name} - ${version}`}</option>
{versions.map(({ name, id }) => (
<option key={id} value={id}>
{name}
</option>
))}
</Version>
</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 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')

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

@ -1,9 +1,10 @@
query Images {
images {
query Images($public: Boolean) {
images(public: $public) {
id
name
os
version
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 { StartIcon } = require('../');
<Button
type="button"
secondary
bold
icon
>
<StartIcon />
<span>Start</span>
</Button>
<Button type="button" secondary bold icon>
<StartIcon />
<span>Start</span>
</Button>;
```
#### Delete Button
@ -29,38 +24,24 @@ const React = require('react');
const { default: Button } = require('./');
const { DeleteIcon } = require('../');
<Button
type="button"
secondary
bold
icon
error
>
<DeleteIcon fill="rgb(210, 67, 58)"/>
<Button type="button" secondary bold icon error>
<DeleteIcon fill="rgb(210, 67, 58)" />
<span>Remove</span>
</Button>
</Button>;
// Tab: Disabled
const React = require('react');
const { default: Button } = require('./');
const { DeleteIcon } = require('../');
<Button
type="button"
secondary
disabled
bold
icon
error
>
<Button type="button" secondary disabled bold icon error>
<DeleteIcon />
<span>Remove</span>
</Button>
</Button>;
```
#### 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');
<FormGroup name="who-killed-1">
<Toggle value="video">Activate</Toggle>
</FormGroup>
</FormGroup>;
// Tab: Disabled
const React = require('react');
@ -82,5 +63,5 @@ const { default: Toggle } = require('../form/toggle');
<Toggle value="video" disabled>
Activate
</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
// 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');
<div style={{position: 'relative', height: 100}}>
<div style={{ position: 'relative', height: 100 }}>
<StickyFooter bottom>
<Row between="xs" middle="xs">
<Col xs={7}>
<Button
type="button"
secondary
icon
>
<Button type="button" secondary icon>
<StartIcon />
<span>Start</span>
</Button>
<Button
type="button"
secondary
icon
>
<Button type="button" secondary icon>
<StopIcon />
<span>Stop</span>
</Button>
<Button
type="button"
secondary
icon
>
<Button type="button" secondary icon>
<ResetIcon />
<span>Reboot</span>
</Button>
</Col>
<Col xs={5}>
<Button
type="button"
error
secondary
right
icon
>
<DeleteIcon fill="#D2433A"/>
<Button type="button" error secondary right icon>
<DeleteIcon fill="#D2433A" />
<span>Remove</span>
</Button>
</Col>
</Row>
</StickyFooter>
</div>
</div>;
```

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

@ -22,7 +22,6 @@ const medium = require('./medium.svg');
}} src={medium} />
```
#### Small Grid
```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 { Footer } = require('./');
<div style={{position: 'relative', height: 100}}>
<div style={{ position: 'relative', height: 100 }}>
<Footer />
</div>
</div>;
```

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

@ -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;

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

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

@ -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 } }) => {
<List>
{items.map(({ heading, name, slug, content }) => (
<li key={name}>
<Header><Link href={`/#${slug}`}>{name}</Link></Header>
<Header>
<Link href={`/#${slug}`}>{name}</Link>
</Header>
{content}
</li>
))}

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

@ -93,8 +93,8 @@ const { default: Table, Tfoot, Tr, Th } = require('./');
</Table>;
```
#### 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');
<div>
<Table>
<Thead>
@ -160,18 +158,21 @@ const { default: Flex } = require('styled-flex-component');
</Tr>
</Thead>
</Table>
<Card>
<Card>
<Padding all={5}>
<Flex alignCenter justifyCenter column>
<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}>
<Button>Create Instance</Button>
</Margin>
</Flex>
</Padding>
</Card>
</div>
</div>;
```
#### Multiple Selection List

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

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

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

@ -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};
`};

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 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 = {
};
<div>
<P>
Superscript Example
<Sup>Superscript</Sup>
</P>
<Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small>
</div>
<P>
Superscript Example
<Sup>Superscript</Sup>
</P>
<Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small>
</div>;
```
#### 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 = {
};
<div>
<P>
Superscript Example
<Sup alert>Alert Superscript</Sup>
</P>
<Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small>
</div>
<P>
Superscript Example
<Sup alert>Alert Superscript</Sup>
</P>
<Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small>
</div>;
```
#### 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 = {
};
<div>
<P>
Superscript Example
<Sup badge>SSD</Sup>
</P>
<Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small>
</div>
<P>
Superscript Example
<Sup badge>SSD</Sup>
</P>
<Small style={styles}>Libre Franklin Semi Bold - 8px with 12px leading</Small>
</div>;
```

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

@ -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,

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

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

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 { 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 }) => (
<Paragraph dark={dark}>{name}</Paragraph>
</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>
<Code dark={dark}>{parseRGB(color)}</Code>
@ -123,51 +129,27 @@ export default () => (
<H3>Action Colors</H3>
<P>
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.
</P>
</P>
</div>
<Margin style={{ display: 'inline-block' }} top={4} bottom={5} right={5}>
<Color
key="primaryHover"
name="Blue 1"
color={theme.primary}
/>
<Color
key="primaryActive"
name="Blue 2"
color={theme.primaryActive}
/>
<Color key="primaryHover" name="Blue 1" color={theme.primary} />
<Color key="primaryActive" name="Blue 2" color={theme.primaryActive} />
</Margin>
<Margin style={{ display: 'inline-block' }} top={4} bottom={5}>
<Color
key="joyent1"
name="Joyent 1"
color="rgb(44, 72, 89)"
/>
<Color
key="joyent2"
name="Joyent 2"
color="rgb(27, 50, 64)"
/>
<Color key="joyent1" name="Joyent 1" color="rgb(44, 72, 89)" />
<Color key="joyent2" name="Joyent 2" color="rgb(27, 50, 64)" />
</Margin>
<div>
<Margin right={5} style={{ display: 'inline-block' }} bottom={2}>
<Color key="green" name="Green 1" color={theme.green} />
<Color
key="greenDark"
name="Green 2"
color={theme.greenDark}
/>
<Color key="greenDark" name="Green 2" color={theme.greenDark} />
</Margin>
<Margin bottom={2} right={5} style={{ display: 'inline-block' }}>
<Color key="orange" name="Orange 1" color={theme.orange} />
<Color
key="orangeDark"
name="Orange 2"
color={theme.orangeDark}
/>
<Color key="orangeDark" name="Orange 2" color={theme.orangeDark} />
</Margin>
<Margin bottom={5} right={5} style={{ display: 'inline-block' }}>
<Color key="red" name="Red 1" color={theme.red} />
@ -177,9 +159,9 @@ export default () => (
<H3>Greys</H3>
<P>
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.
</P>
similar components. They allow us to make certain components look
clickable, whilst making others appear disabled or static.
</P>
<Margin top={4}>
<Flex wrap>
<Color
@ -198,15 +180,29 @@ export default () => (
name="Grey 2 - Faded"
color={theme.whiteActive}
/>
<Color bottom dark key="grey" name="Grey 3 - Dividers" color={theme.grey} />
<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}
<Color
bottom
dark
key="grey"
name="Grey 3 - Dividers"
color={theme.grey}
/>
<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>
</Margin>
</Fragment>
)
);

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

@ -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',

53
yarn.lock
View File

@ -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"