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

feat(ui-toolkit): add more icons page

Browse Source
This commit is contained in:
Sara Vieira 2017-09-26 17:07:45 +01:00 committed by Sérgio Ramos
parent be4190d8cb
commit 3e0e7b2e5e
50 changed files with 424 additions and 394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/ui-toolkit/src/anchor/index.js
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import { A } from 'normalized-styled-components'; import { A } from 'normalized-styled-components';
import is from 'styled-is'; import is, { isOr } from 'styled-is';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Link as BaseLink } from 'react-router-dom'; import { Link as BaseLink } from 'react-router-dom';
import Baseline from '../baseline'; import Baseline from '../baseline';
@ -9,23 +9,27 @@ import Baseline from '../baseline';
const style = css` const style = css`
color: ${props => props.theme.primary}; color: ${props => props.theme.primary};
${is('secondary')` &:hover {
color: ${props => props.theme.white};
text-decoration: none; text-decoration: none;
}
${isOr('secondary', 'reversed')`
color: ${props => props.theme.white};
`}; `};
${is('disabled')` ${is('disabled')`
color: ${props => props.theme.grey}; color: ${props => props.theme.grey};
pointer-events: none;
&:hover {
text-decoration: underline;
}
`}; `};
`; `;
const StyledAnchor = A.extend` const StyledAnchor = A.extend`${style};`;
${style}
`;
const StyledLink = styled(BaseLink)` const StyledLink = styled(BaseLink)`${style};`;
${style}
`;
/** /**
* @example ./usage.md * @example ./usage.md

19
packages/ui-toolkit/src/form/usage-toggle.md
View File

@ -8,7 +8,6 @@ const Legend = require('./legend').default;
<ToggleList> <ToggleList>
<Toggle value='video'>Video</Toggle> <Toggle value='video'>Video</Toggle>
<Toggle value='tv'>TV</Toggle> <Toggle value='tv'>TV</Toggle>
<Toggle value='netflix'>Netflix</Toggle>
</ToggleList> </ToggleList>
</FormGroup> </FormGroup>
``` ```
@ -25,23 +24,6 @@ const Legend = require('./legend').default;
<ToggleList> <ToggleList>
<Toggle value='video' checked>Video</Toggle> <Toggle value='video' checked>Video</Toggle>
<Toggle value='tv'>TV</Toggle> <Toggle value='tv'>TV</Toggle>
<Toggle value='netflix'>Netflix</Toggle>
</ToggleList>
</FormGroup>
```
#### two items
```
const { ToggleList } = require('./toggle');
const FormGroup = require('./group').default;
const Legend = require('./legend').default;
<FormGroup name='who-killed'>
<Legend>Who killed the radio star?</Legend>
<ToggleList>
<Toggle value='tv' checked>TV</Toggle>
<Toggle value='netflix'>Netflix</Toggle>
</ToggleList> </ToggleList>
</FormGroup> </FormGroup>
``` ```
@ -58,7 +40,6 @@ const Legend = require('./legend').default;
<ToggleList> <ToggleList>
<Toggle value='video'>Video</Toggle> <Toggle value='video'>Video</Toggle>
<Toggle value='tv'>TV</Toggle> <Toggle value='tv'>TV</Toggle>
<Toggle value='netflix'>Netflix</Toggle>
</ToggleList> </ToggleList>
</FormGroup> </FormGroup>
``` ```

3
packages/ui-toolkit/src/icons/Readme.md Normal file
View File

@ -0,0 +1,3 @@
```js noeditor
<Icons/>
```

7
packages/ui-toolkit/src/icons/actions-light.js Normal file
View File

@ -0,0 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import ActionsIconLight from './svg/icon_actions_light.svg';
export default Baseline(ActionsIconLight);

7
packages/ui-toolkit/src/icons/actions.js Normal file
View File

@ -0,0 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import ActionsIcon from './svg/icon_actions.svg';
export default Baseline(ActionsIcon);

7
packages/ui-toolkit/src/icons/arrow-light.js Normal file
View File

@ -0,0 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import ArrowIconLight from './svg/icon_arrow_light.svg';
export default Baseline(ArrowIconLight);

8
packages/ui-toolkit/src/icons/chevron.js Normal file
View File

@ -0,0 +1,8 @@
import Baseline from '../baseline';
import Basealign from '../basealign';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import ChevronIcon from './svg/icon_chevron.svg';
export default Baseline(Basealign(ChevronIcon));

7
packages/ui-toolkit/src/icons/completed.js Normal file
View File

@ -0,0 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import CompletedIcon from './svg/icon_completed.svg';
export default Baseline(CompletedIcon);

8
packages/ui-toolkit/src/icons/data-center-light.js Normal file
View File

@ -0,0 +1,8 @@
import Baseline from '../baseline';
import Basealign from '../basealign';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import DataCenterIconLight from './svg/icon_data_center_light.svg';
export default Baseline(Basealign(DataCenterIconLight));

197
packages/ui-toolkit/src/icons/icons.js Normal file
View File

@ -0,0 +1,197 @@
import React from 'react';
import {
IconActions,
IconActionsLight,
CloseIcon,
PlusIcon,
MinusIcon,
ArrowIcon,
ArrowIconLight,
TickIcon,
InstancesIcon,
InstancesIconLight,
HealthyIcon,
UnhealthyIcon,
BinIcon,
UserIcon,
DataCenterIcon,
DataCenterIconLight,
ChevronIcon,
TritonIcon,
CompletedIcon,
PartCompletedIcon,
IncompleteIcon,
LoadingIcon
} from './';
import { default as Label } from '../label';
import is from 'styled-is';
import remcalc from 'remcalc';
import styled from 'styled-components';
const List = styled.ul`
display: flex;
list-style: none;
padding: 0;
flex-wrap: wrap;
`;
const Icon = styled.div`
width: ${remcalc(180)};
height: ${remcalc(180)};
border: ${remcalc(2)} solid #d8d8d8;
align-items: center;
justify-content: center;
display: flex;
margin-bottom: ${remcalc(18)};
${is('dark')`
background: #464646;
`};
`;
const ListItem = styled.li`
display: flex;
align-items: center;
justify-content: center;
margin: ${remcalc(8)};
flex-direction: column;
margin-bottom: ${remcalc(53)};
`;
const Icons = () => (
<List>
<ListItem>
<Icon>
<ChevronIcon width="6" />
</Icon>
<Label>Chevron</Label>
</ListItem>
<ListItem>
<Icon>
<ArrowIcon width="6" />
</Icon>
<Label>Arrow > Light</Label>
</ListItem>
<ListItem>
<Icon dark>
<ArrowIconLight width="6" />
</Icon>
<Label>Arrow > Dark</Label>
</ListItem>
<ListItem>
<Icon>
<InstancesIcon width="18" />
</Icon>
<Label>Instances > Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<InstancesIconLight width="18" />
</Icon>
<Label>Instances > Light</Label>
</ListItem>
<ListItem>
<Icon>
<LoadingIcon width="24" />
</Icon>
<Label>Loading</Label>
</ListItem>
<ListItem>
<Icon>
<CloseIcon width="9" height="13" />
</Icon>
<Label>Close</Label>
</ListItem>
<ListItem>
<Icon>
<IconActions width="4" height="16" />
</Icon>
<Label>Actions > Light</Label>
</ListItem>
<ListItem>
<Icon dark>
<IconActionsLight width="4" height="16" />
</Icon>
<Label>Actions > Dark</Label>
</ListItem>
<ListItem>
<Icon>
<PlusIcon />
</Icon>
<Label>Plus</Label>
</ListItem>
<ListItem>
<Icon>
<MinusIcon />
</Icon>
<Label>Minus</Label>
</ListItem>
<ListItem>
<Icon>
<HealthyIcon width="18" />
</Icon>
<Label>Healthy</Label>
</ListItem>
<ListItem>
<Icon>
<UnhealthyIcon width="18" />
</Icon>
<Label>Chevron</Label>
</ListItem>
<ListItem>
<Icon>
<TickIcon width="9" />
</Icon>
<Label>Tick</Label>
</ListItem>
<ListItem>
<Icon>
<CompletedIcon width="18" />
</Icon>
<Label>Completed</Label>
</ListItem>
<ListItem>
<Icon>
<PartCompletedIcon width="18" />
</Icon>
<Label>Part Completed</Label>
</ListItem>
<ListItem>
<Icon>
<IncompleteIcon width="18" />
</Icon>
<Label>Incomplete</Label>
</ListItem>
<ListItem>
<Icon>
<BinIcon width="18" />
</Icon>
<Label>Bin</Label>
</ListItem>
<ListItem>
<Icon>
<UserIcon />
</Icon>
<Label>User</Label>
</ListItem>
<ListItem>
<Icon>
<DataCenterIcon width="9" height="13" />
</Icon>
<Label>Data Centre > Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<DataCenterIconLight width="9" height="13" />
</Icon>
<Label>Data Centre > Light</Label>
</ListItem>
<ListItem>
<Icon dark>
<TritonIcon />
</Icon>
<Label>Triton Logo</Label>
</ListItem>
</List>
);
export default Icons;

7
packages/ui-toolkit/src/icons/incomplete.js Normal file
View File

@ -0,0 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import IncompleteIcon from './svg/icon_incomplete.svg';
export default Baseline(IncompleteIcon);

11
packages/ui-toolkit/src/icons/index.js
View File

@ -1,11 +1,22 @@
export { default as CloseIcon } from './close'; export { default as CloseIcon } from './close';
export { default as PlusIcon } from './plus'; export { default as PlusIcon } from './plus';
export { default as MinusIcon } from './minus'; export { default as MinusIcon } from './minus';
export { default as IconActions } from './actions';
export { default as IconActionsLight } from './actions-light';
export { default as ArrowIcon } from './arrow'; export { default as ArrowIcon } from './arrow';
export { default as ArrowIconLight } from './arrow-light';
export { default as TickIcon } from './tick'; export { default as TickIcon } from './tick';
export { default as InstancesIcon } from './instances'; export { default as InstancesIcon } from './instances';
export { default as InstancesIconLight } from './instances-light';
export { default as HealthyIcon } from './healthy'; export { default as HealthyIcon } from './healthy';
export { default as UnhealthyIcon } from './unhealthy'; export { default as UnhealthyIcon } from './unhealthy';
export { default as BinIcon } from './bin'; export { default as BinIcon } from './bin';
export { default as UserIcon } from './user'; export { default as UserIcon } from './user';
export { default as DataCenterIcon } from './data-center'; export { default as DataCenterIcon } from './data-center';
export { default as DataCenterIconLight } from './data-center-light';
export { default as ChevronIcon } from './chevron';
export { default as TritonIcon } from './triton';
export { default as CompletedIcon } from './completed';
export { default as PartCompletedIcon } from './part-complete';
export { default as IncompleteIcon } from './incomplete';
export { default as LoadingIcon } from './loading';

7
packages/ui-toolkit/src/icons/instances-light.js Normal file
View File

@ -0,0 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import InstancesIconLight from './svg/icon_instances_light.svg';
export default Baseline(InstancesIconLight);

7
packages/ui-toolkit/src/icons/loading.js Normal file
View File

@ -0,0 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import LoadingIcon from './svg/icon_loading.svg';
export default Baseline(LoadingIcon);

7
packages/ui-toolkit/src/icons/part-complete.js Normal file
View File

@ -0,0 +1,7 @@
import Baseline from '../baseline';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import PartCompletedIcon from './svg/icon_part_completed.svg';
export default Baseline(PartCompletedIcon);

1
packages/ui-toolkit/src/icons/svg/icon_actions.svg Normal file
View File

@ -0,0 +1 @@
<svg width="4" height="16" viewBox="0 0 4 16" xmlns="http://www.w3.org/2000/svg"><path fill="#464646" fill-rule="evenodd" d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/><path style="transform:translateY(6px)" fill="#464646" fill-rule="evenodd" d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/><path style="transform:translateY(12px)" fill="#464646" fill-rule="evenodd" d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 396 B

1
packages/ui-toolkit/src/icons/svg/icon_actions_light.svg Normal file
View File

@ -0,0 +1 @@
<svg width="4" height="16" viewBox="0 0 4 16" xmlns="http://www.w3.org/2000/svg"><path fill="#FFF" fill-rule="evenodd" d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/><path style="transform:translateY(6px)" fill="#FFF" fill-rule="evenodd" d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/><path style="transform:translateY(12px)" fill="#FFF" fill-rule="evenodd" d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 387 B

22
packages/ui-toolkit/src/icons/svg/icon_alert.svg
View File

@ -1,21 +1 @@
<?xml version="1.0" encoding="UTF-8"?> <svg width="12" height="13" viewBox="0 0 12 13" xmlns="http://www.w3.org/2000/svg"><title>icon: alert</title><defs><linearGradient x1="49.967%" y1="100%" x2="49.967%" y2="0%" id="a"><stop stop-color="#E6E6E6" offset="0%"/><stop stop-color="#FFF" offset="100%"/></linearGradient></defs><path d="M27 33a1 1 0 0 1-1-1h2a1 1 0 0 1-1 1zm3.6-5.667c0 1.35 1.075 2.445 2.4 2.445V31H21v-1.222c1.325 0 2.4-1.095 2.4-2.445v-1.222a3.65 3.65 0 0 1 2.4-3.442v-1.447c0-.674.538-1.222 1.2-1.222.662 0 1.2.548 1.2 1.222v1.447a3.65 3.65 0 0 1 2.4 3.442v1.222z" transform="translate(-21 -20)" fill="url(#a)" fill-rule="evenodd"/></svg>
<svg width="12px" height="13px" viewBox="0 0 12 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>icon: alert</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="49.9665552%" y1="100%" x2="49.9665552%" y2="0%" id="linearGradient-1">
<stop stop-color="#E6E6E6" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="creating-deployment-group:-editing-manifest" transform="translate(-1108.000000, -20.000000)" fill="url(#linearGradient-1)">
<g id="header" transform="translate(0.000000, -1.000000)">
<g id="button:-alerts" transform="translate(1087.000000, 1.000000)">
<path d="M27,33 C26.448,33 26,32.552 26,32 L28,32 C28,32.552 27.552,33 27,33 Z M30.6,27.3333333 C30.6,28.6826667 31.6752,29.7777778 33,29.7777778 L33,31 L30.6,31 L28.2,31 L25.8,31 L23.4,31 L21,31 L21,29.7777778 C22.3248,29.7777778 23.4,28.6826667 23.4,27.3333333 L23.4,26.1111111 C23.4,24.5173333 24.4044,23.1741111 25.8,22.6693333 L25.8,21.2222222 C25.8,20.5475556 26.3376,20 27,20 C27.6624,20 28.2,20.5475556 28.2,21.2222222 L28.2,22.6693333 C29.5956,23.1741111 30.6,24.5173333 30.6,26.1111111 L30.6,27.3333333 Z" id="icon:-alert"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 616 B

15
packages/ui-toolkit/src/icons/svg/icon_arrow.svg
View File

@ -1,14 +1 @@
<?xml version="1.0" encoding="UTF-8"?> <svg width="9" height="6" viewBox="0 0 9 6" xmlns="http://www.w3.org/2000/svg"><title>arrow: right</title><path d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" fill="#494949" fill-rule="evenodd"/></svg>
<svg width="9px" height="6px" viewBox="0 0 9 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>arrow: right</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="creating-deployment-group:-editing-manifest-(demo)" transform="translate(-190.000000, -1161.000000)" fill="#494949">
<g id="text-field:-multiple-lines" transform="translate(183.000000, 372.000000)">
<polygon id="arrow:-right" transform="translate(11.500000, 792.000000) rotate(90.000000) translate(-11.500000, -792.000000) " points="9.88604803 787.5 8.5 788.851816 11.7279039 792 8.5 795.148184 9.88604803 796.5 14.5 792"></polygon>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 955 B

After

Width:  |  Height:  |  Size: 208 B

1
packages/ui-toolkit/src/icons/svg/icon_arrow_light.svg Executable file
View File

@ -0,0 +1 @@
<svg width="9" height="6" viewBox="0 0 9 6" xmlns="http://www.w3.org/2000/svg"><title>arrow: right</title><path d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z" fill-rule="evenodd" fill="#FFF"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 205 B

13
packages/ui-toolkit/src/icons/svg/icon_bin.svg
View File

@ -1,12 +1 @@
<?xml version="1.0" encoding="UTF-8"?> <svg width="12" height="17" viewBox="0 0 12 17" xmlns="http://www.w3.org/2000/svg"><title>icon: delete</title><path d="M4 0v1H0v2h12V1H8.001V0H4zM1 17h10V4H1v13z" fill-rule="evenodd"/></svg>
<svg width="12px" height="17px" viewBox="0 0 12 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 45.2 (43514) - http://www.bohemiancoding.com/sketch -->
<title>icon: delete</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="home" transform="translate(-467.000000, -421.000000)">
<path d="M471,421 L471,422 L467,422 L467,424 L479,424 L479,422 L475.001,422 L475.001,421 L471,421 Z M468,438 L478,438 L478,425 L468,425 L468,438 Z" id="icon:-delete"></path>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 711 B

After

Width:  |  Height:  |  Size: 190 B

2
packages/ui-toolkit/src/icons/svg/icon_calendar.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17 16"><defs><style>.cls-1{fill:#d8d8d8;}.cls-2{fill:#fff;}.cls-3{fill:url(#linear-gradient);}.cls-4{fill:#a2a2a2;}</style><linearGradient id="linear-gradient" x1="8.5" y1="14" x2="8.5" y2="2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e6e6e6"/><stop offset="0.04" stop-color="#eaeaea"/><stop offset="0.21" stop-color="#f6f6f6"/><stop offset="0.43" stop-color="#fdfdfd"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><title>calendar_</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" x="1" y="2" width="15" height="14"/><rect class="cls-2" y="1" width="17" height="14"/><rect class="cls-3" x="1" y="2" width="15" height="12"/><rect class="cls-4" x="3" y="4" width="2" height="2"/><rect class="cls-4" x="6" y="4" width="2" height="2"/><rect class="cls-4" x="9" y="4" width="2" height="2"/><rect class="cls-4" x="12" y="4" width="2" height="2"/><rect class="cls-4" x="3" y="7" width="2" height="2"/><rect class="cls-4" x="6" y="7" width="2" height="2"/><rect class="cls-4" x="9" y="7" width="2" height="2"/><rect class="cls-4" x="12" y="7" width="2" height="2"/><rect class="cls-4" x="3" y="10" width="2" height="2"/><rect class="cls-4" x="6" y="10" width="2" height="2"/><rect class="cls-4" x="9" y="10" width="2" height="2"/><path class="cls-4" d="M15,1V.5a.5.5,0,0,0-1,0V1H3V.5a.5.5,0,0,0-1,0V1H0V15H17V1Zm1,13H1V2H2v.5a.5.5,0,0,0,1,0V2H14v.5a.5.5,0,0,0,1,0V2h1Z"/></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 16"><defs><style>.cls-1{fill:#d8d8d8}.cls-2{fill:#fff}.cls-3{fill:url(#linear-gradient)}.cls-4{fill:#a2a2a2}</style><linearGradient id="linear-gradient" x1="8.5" y1="14" x2="8.5" y2="2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e6e6e6"/><stop offset=".04" stop-color="#eaeaea"/><stop offset=".21" stop-color="#f6f6f6"/><stop offset=".43" stop-color="#fdfdfd"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><title>calendar_</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M1 2h15v14H1z"/><path class="cls-2" d="M0 1h17v14H0z"/><path class="cls-3" d="M1 2h15v12H1z"/><path class="cls-4" d="M3 4h2v2H3zm3 0h2v2H6zm3 0h2v2H9zm3 0h2v2h-2zM3 7h2v2H3zm3 0h2v2H6zm3 0h2v2H9zm3 0h2v2h-2zm-9 3h2v2H3zm3 0h2v2H6zm3 0h2v2H9z"/><path class="cls-4" d="M15 1V.5a.5.5 0 0 0-1 0V1H3V.5a.5.5 0 0 0-1 0V1H0v14h17V1zm1 13H1V2h1v.5a.5.5 0 0 0 1 0V2h11v.5a.5.5 0 0 0 1 0V2h1z"/></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1015 B

1
packages/ui-toolkit/src/icons/svg/icon_chevron.svg Normal file
View File

@ -0,0 +1 @@
<svg width="6" height="10" viewBox="0 0 6 10" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z" fill="#494949" opacity=".5"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 201 B

15
packages/ui-toolkit/src/icons/svg/icon_close_cross.svg
View File

@ -1,14 +1 @@
<?xml version="1.0" encoding="UTF-8"?> <svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>icon: close</title><path d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z" fill="#494949" fill-rule="evenodd"/></svg>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>icon: close</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="creating-deployment-group:-editing-manifest" transform="translate(-1158.000000, -288.000000)" fill="#494949">
<g id="notification:-task-acomplished" transform="translate(183.000000, 270.000000)">
<path d="M981.899495,22.8994949 L981.899495,16.8994949 L979.899495,16.8994949 L979.899495,22.8994949 L973.899495,22.8994949 L973.899495,24.8994949 L979.899495,24.8994949 L979.899495,30.8994949 L981.899495,30.8994949 L981.899495,24.8994949 L987.899495,24.8994949 L987.899495,22.8994949 L981.899495,22.8994949 Z" id="icon:-close" transform="translate(980.899495, 23.899495) rotate(45.000000) translate(-980.899495, -23.899495) "></path>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 308 B

1
packages/ui-toolkit/src/icons/svg/icon_completed.svg Normal file
View File

@ -0,0 +1 @@
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path fill="#008138" fill-rule="evenodd" d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"/><path fill-rule="evenodd" fill="#FFF" d="M12.017 5l-3.896 5.336-1.487-2.109L5 9.379l3.091 4.389 5.541-7.589L12.017 5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 291 B

23
packages/ui-toolkit/src/icons/svg/icon_cpu.svg
View File

@ -1,22 +1 @@
<?xml version="1.0" encoding="UTF-8"?> <svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><title>icon: cpu</title><g fill="none" fill-rule="evenodd"><circle stroke="#8043DC" stroke-width="2" cx="24" cy="24" r="23"/><g fill="#8043DC"><path d="M20 28h8v-8h-8v8zm-1 1h10V19H19v10z"/><path d="M32 30c0 1.103-.897 2-2 2H18c-1.103 0-2-.897-2-2V18c0-1.103.897-2 2-2h12c1.103 0 2 .897 2 2v12zm3-5a1 1 0 1 0 0-2h-1v-1h1a1 1 0 1 0 0-2h-1v-2a4 4 0 0 0-4-4h-2v-1a1 1 0 1 0-2 0v1h-1v-1a1 1 0 1 0-2 0v1h-1v-1a1 1 0 1 0-2 0v1h-2a4 4 0 0 0-4 4v2h-1a1 1 0 1 0 0 2h1v1h-1a1 1 0 1 0 0 2h1v1h-1a1 1 0 1 0 0 2h1v2a4 4 0 0 0 4 4h2v1a1 1 0 1 0 2 0v-1h1v1a1 1 0 1 0 2 0v-1h1v1a1 1 0 1 0 2 0v-1h2a4 4 0 0 0 4-4v-2h1a1 1 0 1 0 0-2h-1v-1h1z"/></g></g></svg>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>icon: cpu</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="creating-deployment-group:-review-(without-package-selection)" transform="translate(-202.000000, -552.000000)">
<g id="service:-wordpress" transform="translate(183.000000, 468.000000)">
<g id="package" transform="translate(0.000000, 72.000000)">
<g id="icon:-cpu" transform="translate(19.000000, 12.000000)">
<circle id="Oval-4" stroke="#8043DC" stroke-width="2" cx="24" cy="24" r="23"></circle>
<g id="cpu" transform="translate(12.000000, 12.000000)" fill="#8043DC">
<path d="M8,16 L16,16 L16,8 L8,8 L8,16 Z M7,17 L17,17 L17,7 L7,7 L7,17 Z" id="Fill-1"></path>
<path d="M20,18 C20,19.103 19.103,20 18,20 L6,20 C4.897,20 4,19.103 4,18 L4,6 C4,4.897 4.897,4 6,4 L18,4 C19.103,4 20,4.897 20,6 L20,18 Z M23,13 C23.552,13 24,12.553 24,12 C24,11.447 23.552,11 23,11 L22,11 L22,10 L23,10 C23.552,10 24,9.553 24,9 C24,8.447 23.552,8 23,8 L22,8 L22,6 C22,3.791 20.209,2 18,2 L16,2 L16,1 C16,0.447 15.552,0 15,0 C14.448,0 14,0.447 14,1 L14,2 L13,2 L13,1 C13,0.447 12.552,0 12,0 C11.448,0 11,0.447 11,1 L11,2 L10,2 L10,1 C10,0.447 9.552,0 9,0 C8.448,0 8,0.447 8,1 L8,2 L6,2 C3.791,2 2,3.791 2,6 L2,8 L1,8 C0.448,8 0,8.447 0,9 C0,9.553 0.448,10 1,10 L2,10 L2,11 L1,11 C0.448,11 0,11.447 0,12 C0,12.553 0.448,13 1,13 L2,13 L2,14 L1,14 C0.448,14 0,14.447 0,15 C0,15.553 0.448,16 1,16 L2,16 L2,18 C2,20.209 3.791,22 6,22 L8,22 L8,23 C8,23.553 8.448,24 9,24 C9.552,24 10,23.553 10,23 L10,22 L11,22 L11,23 C11,23.553 11.448,24 12,24 C12.552,24 13,23.553 13,23 L13,22 L14,22 L14,23 C14,23.553 14.448,24 15,24 C15.552,24 16,23.553 16,23 L16,22 L18,22 C20.209,22 22,20.209 22,18 L22,16 L23,16 C23.552,16 24,15.553 24,15 C24,14.447 23.552,14 23,14 L22,14 L22,13 L23,13 Z" id="Fill-2"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 723 B

20
packages/ui-toolkit/src/icons/svg/icon_data_center.svg
View File

@ -1,19 +1 @@
<?xml version="1.0" encoding="UTF-8"?> <svg width="9" height="13" viewBox="0 0 9 13" xmlns="http://www.w3.org/2000/svg"><title>icon: data center</title><path d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z" fill="#464646" fill-rule="evenodd"/></svg>
<svg width="9px" height="13px" viewBox="0 0 9 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>icon: data center</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="49.9665552%" y1="100%" x2="49.9665552%" y2="0%" id="linearGradient-1">
<stop stop-color="#E6E6E6" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="creating-deployment-group:-editing-manifest" transform="translate(-1174.000000, -20.000000)" fill="url(#linearGradient-1)">
<g id="header" transform="translate(0.000000, -1.000000)">
<path d="M1174,34 L1183,34 L1183,21 L1174,21 L1174,34 Z M1176,32 L1181,32 L1181,23 L1176,23 L1176,32 Z M1177,25 L1180.001,25 L1180.001,24 L1177,24 L1177,25 Z M1177,27 L1180.001,27 L1180.001,26 L1177,26 L1177,27 Z M1177,29 L1180.001,29 L1180.001,28 L1177,28 L1177,29 Z" id="icon:--data-center"></path>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 245 B

1
packages/ui-toolkit/src/icons/svg/icon_data_center_light.svg Executable file
View File

@ -0,0 +1 @@
<svg width="9" height="13" viewBox="0 0 9 13" xmlns="http://www.w3.org/2000/svg"><title>icon: data center</title><path d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z" fill="#FFF" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 242 B

24
packages/ui-toolkit/src/icons/svg/icon_disk.svg
View File

@ -1,23 +1 @@
<?xml version="1.0" encoding="UTF-8"?> <svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><title>icon: disk</title><g fill="none" fill-rule="evenodd"><circle stroke="#A88A83" stroke-width="2" cx="24" cy="24" r="23"/><g fill="#A88A83"><path d="M32 31a1 1 0 0 1-1 1H17a1 1 0 0 1-1-1V17a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14zm-1-17H17a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V17a3 3 0 0 0-3-3z"/><path d="M24 29c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5m0-11a6 6 0 0 0 0 12 6 6 0 0 0 0-12"/><path d="M23 24a1 1 0 1 0 2 0 1 1 0 1 0-2 0z"/></g></g></svg>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>icon: disk</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="creating-deployment-group:-review-(without-package-selection)" transform="translate(-202.000000, -1200.000000)">
<g id="service:-wordpress" transform="translate(183.000000, 1116.000000)">
<g id="package" transform="translate(0.000000, 72.000000)">
<g id="icon:-disk" transform="translate(19.000000, 12.000000)">
<circle id="Oval-4" stroke="#A88A83" stroke-width="2" cx="24" cy="24" r="23"></circle>
<g transform="translate(14.000000, 14.000000)" fill="#A88A83">
<path d="M18,17 C18,17.552 17.552,18 17,18 L3,18 C2.448,18 2,17.552 2,17 L2,3 C2,2.448 2.448,2 3,2 L17,2 C17.552,2 18,2.448 18,3 L18,17 Z M17,0 L3,0 C1.343,0 0,1.343 0,3 L0,17 C0,18.657 1.343,20 3,20 L17,20 C18.657,20 20,18.657 20,17 L20,3 C20,1.343 18.657,0 17,0 L17,0 Z" id="Fill-1"></path>
<path d="M10,15 C7.243,15 5,12.757 5,10 C5,7.243 7.243,5 10,5 C12.757,5 15,7.243 15,10 C15,12.757 12.757,15 10,15 M10,4 C6.687,4 4,6.687 4,10 C4,13.313 6.687,16 10,16 C13.313,16 16,13.313 16,10 C16,6.687 13.313,4 10,4" id="Fill-3"></path>
<path d="M9,10 C9,10.553 9.447,11 10,11 C10.553,11 11,10.553 11,10 C11,9.447 10.553,9 10,9 C9.447,9 9,9.447 9,10 Z" id="Fill-5"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 560 B

23
packages/ui-toolkit/src/icons/svg/icon_error_failure.svg
View File

@ -1,22 +1 @@
<?xml version="1.0" encoding="UTF-8"?> <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><title>icon: error</title><g fill="none" fill-rule="evenodd"><circle fill="#DA4B42" cx="9" cy="9" r="9"/><g fill="#FFF"><path d="M11.121 5.464l1.415 1.415-5.657 5.657-1.415-1.415z"/><path d="M12.536 11.121l-1.415 1.415-5.657-5.657L6.88 5.464z"/></g></g></svg>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>icon: error</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="project-overview" transform="translate(-889.000000, -333.000000)">
<g id="feed" transform="translate(876.000000, 241.000000)">
<g id="event" transform="translate(0.000000, 92.000000)">
<g id="icon:-error" transform="translate(13.000000, 0.000000)">
<circle id="Oval" fill="#DA4B42" cx="9" cy="9" r="9"></circle>
<g id="cion:-error" transform="translate(9.000000, 9.000000) rotate(45.000000) translate(-9.000000, -9.000000) translate(5.000000, 5.000000)" fill="#FFFFFF">
<rect id="Rectangle-7" x="3" y="-3.37507799e-14" width="2" height="8"></rect>
<rect id="Rectangle-7" transform="translate(4.000000, 4.000000) rotate(90.000000) translate(-4.000000, -4.000000) " x="3" y="-2.34923192e-13" width="2" height="8"></rect>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 342 B

20
packages/ui-toolkit/src/icons/svg/icon_healthy.svg
View File

@ -1,19 +1 @@
<?xml version="1.0" encoding="UTF-8"?> <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><title>icon: state</title><g fill-rule="evenodd"><circle cx="9" cy="9" r="9"/><path d="M9.477 6.603l-.522.443-.444-.443a2.056 2.056 0 1 0-2.908 2.909l3.352 3.352 3.412-3.352c.803-.804.863-2.106.06-2.91a2.105 2.105 0 0 0-2.95 0z" fill="#FFF"/></g></svg>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>icon: state</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="topology" transform="translate(-489.000000, -441.000000)">
<g id="services" transform="translate(0.000000, 348.000000)">
<g id="service:-nginx" transform="translate(476.000000, 36.000000)">
<g id="icon:-state" transform="translate(13.000000, 57.000000)">
<circle id="Oval" cx="9" cy="9" r="9"></circle>
<path d="M9.47745233,6.60270759 L8.95496861,7.04565311 L8.51133742,6.60270759 C7.70841297,5.79909747 6.40563205,5.79909747 5.60270759,6.60270759 C4.79909747,7.40631772 4.79909747,8.70841297 5.60270759,9.5120231 L8.95496861,12.8642841 L12.3668833,9.5120231 C13.1698077,8.70841297 13.2301471,7.40631772 12.4265369,6.60270759 C11.6229268,5.79909747 10.2810625,5.79909747 9.47745233,6.60270759 Z" id="icon:-health" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 335 B

1
packages/ui-toolkit/src/icons/svg/icon_incomplete.svg Normal file
View File

@ -0,0 +1 @@
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" style="padding:1px"><path fill="#fff" fill-rule="evenodd" d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"/><path fill="#D8D8D8" d="M9 19c5.523 0 10-4.477 10-10h-2a8 8 0 0 1-8 8v2zM19 9C19 3.477 14.523-1 9-1v2a8 8 0 0 1 8 8h2zM9-1C3.477-1-1 3.477-1 9h2a8 8 0 0 1 8-8v-2zM-1 9c0 5.523 4.477 10 10 10v-2a8 8 0 0 1-8-8h-2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 402 B

21
packages/ui-toolkit/src/icons/svg/icon_instances.svg
View File

@ -1,20 +1 @@
<?xml version="1.0" encoding="UTF-8"?> <svg width="18" height="9" viewBox="0 0 18 9" xmlns="http://www.w3.org/2000/svg"><title>icon: instances</title><path d="M4.5 0a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9m8.59 0c-.375 0-.739.047-1.09.12 2.184.456 3.818 2.239 3.818 4.38S14.184 8.424 12 8.88c.351.073.715.12 1.09.12C15.803 9 18 6.985 18 4.5S15.802 0 13.09 0M14 4.5C14 6.985 11.802 9 9.09 9c-.375 0-.739-.047-1.09-.12 2.184-.456 3.818-2.239 3.818-4.38S10.184.576 8 .12C8.351.047 8.715 0 9.09 0 11.803 0 14 2.015 14 4.5" fill-rule="evenodd" fill="#494949"/></svg>
<svg width="18px" height="9px" viewBox="0 0 18 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>icon: instances</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="topology" transform="translate(-1046.000000, -447.000000)">
<g id="services" transform="translate(0.000000, 348.000000)">
<g id="service:-consul" transform="translate(1003.000000, 36.000000)">
<g id="metric">
<g id="data-centers-&amp;-instanecs" transform="translate(43.000000, 59.000000)">
<path d="M4.5,4 C2.015,4 0,6.015 0,8.5 C0,10.985 2.015,13 4.5,13 C6.985,13 9,10.985 9,8.5 C9,6.015 6.985,4 4.5,4 M13.0909091,4 C12.7145455,4 12.3512727,4.047 12,4.12 C14.184,4.576 15.8181818,6.359 15.8181818,8.5 C15.8181818,10.641 14.184,12.424 12,12.88 C12.3512727,12.953 12.7145455,13 13.0909091,13 C15.8018182,13 18,10.985 18,8.5 C18,6.015 15.8018182,4 13.0909091,4 M14,8.5 C14,10.985 11.8018182,13 9.09090909,13 C8.71454545,13 8.35127273,12.953 8,12.88 C10.184,12.424 11.8181818,10.641 11.8181818,8.5 C11.8181818,6.359 10.184,4.576 8,4.12 C8.35127273,4.047 8.71454545,4 9.09090909,4 C11.8018182,4 14,6.015 14,8.5" id="icon:-instances"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 518 B

1
packages/ui-toolkit/src/icons/svg/icon_instances_light.svg Executable file
View File

@ -0,0 +1 @@
<svg width="18" height="9" viewBox="0 0 18 9" xmlns="http://www.w3.org/2000/svg"><title>icon: instances</title><path d="M4.5 0a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9m8.59 0c-.375 0-.739.047-1.09.12 2.184.456 3.818 2.239 3.818 4.38S14.184 8.424 12 8.88c.351.073.715.12 1.09.12C15.803 9 18 6.985 18 4.5S15.802 0 13.09 0M14 4.5C14 6.985 11.802 9 9.09 9c-.375 0-.739-.047-1.09-.12 2.184-.456 3.818-2.239 3.818-4.38S10.184.576 8 .12C8.351.047 8.715 0 9.09 0 11.803 0 14 2.015 14 4.5" fill-rule="evenodd" fill="#FFF"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 515 B

1
packages/ui-toolkit/src/icons/svg/icon_loading.svg Normal file
View File

@ -0,0 +1 @@
<svg width="24" height="6" viewBox="0 0 24 6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Icons &gt; Loading</title><desc>Created using Figma</desc><use xlink:href="#a" fill="#3B46CC"/><use xlink:href="#a" transform="translate(9)" fill="#3B46CC" opacity=".5"/><use xlink:href="#a" transform="translate(18)" fill="#3B46CC" opacity=".25"/><defs><path id="a" fill-rule="evenodd" d="M0 0h6v6H0V0z"/></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 449 B

19
packages/ui-toolkit/src/icons/svg/icon_minus.svg
View File

@ -1,18 +1 @@
<?xml version="1.0" encoding="UTF-8"?> <svg width="8" height="2" viewBox="0 0 8 2" xmlns="http://www.w3.org/2000/svg"><title>icon: plus</title><path d="M0 0h8v2H0z" fill="#494949" fill-rule="evenodd"/></svg>
<svg width="8px" height="2px" viewBox="0 0 8 2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>icon: plus</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="scaling-dialogue-2" transform="translate(-641.000000, -425.000000)" fill="#494949">
<g id="content" transform="translate(453.000000, 234.000000)">
<g id="number-of-instances" transform="translate(36.000000, 168.000000)">
<g id="button:-minus" transform="translate(132.000000, 0.000000)">
<rect id="icon:-plus" x="20" y="23" width="8" height="2"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 963 B

After

Width:  |  Height:  |  Size: 168 B

1
packages/ui-toolkit/src/icons/svg/icon_part_completed.svg Normal file
View File

@ -0,0 +1 @@
<svg width="18" height="18" viewBox="0 0 18 18" style="padding:1px" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-rule="evenodd" d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"/><path fill="#008138" d="M9 19c5.523 0 10-4.477 10-10h-2a8 8 0 0 1-8 8v2zM19 9C19 3.477 14.523-1 9-1v2a8 8 0 0 1 8 8h2zM9-1C3.477-1-1 3.477-1 9h2a8 8 0 0 1 8-8v-2zM-1 9c0 5.523 4.477 10 10 10v-2a8 8 0 0 1-8-8h-2z"/><path fill="#464646" fill-rule="evenodd" d="M12.316 5l-4.062 5.477-1.55-2.165L5 9.495 8.223 14 14 6.21 12.316 5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 517 B

19
packages/ui-toolkit/src/icons/svg/icon_plus.svg
View File

@ -1,18 +1 @@
<?xml version="1.0" encoding="UTF-8"?> <svg width="8" height="8" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg"><title>icon: plus</title><path d="M3 3H0v2h3v3h2V5h3V3H5V0H3v3z" fill="#494949" fill-rule="evenodd"/></svg>
<svg width="8px" height="8px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>icon: plus</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="scaling-dialogue-2" transform="translate(-695.000000, -422.000000)" fill="#494949">
<g id="content" transform="translate(453.000000, 234.000000)">
<g id="number-of-instances" transform="translate(36.000000, 168.000000)">
<g id="button:-plus" transform="translate(186.000000, 0.000000)">
<path d="M23,23 L20,23 L20,25 L23,25 L23,28 L25,28 L25,25 L28,25 L28,23 L25,23 L25,20 L23,20 L23,23 Z" id="icon:-plus"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 186 B

20
packages/ui-toolkit/src/icons/svg/icon_ran.svg
View File

@ -1,19 +1 @@
<?xml version="1.0" encoding="UTF-8"?> <svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><title>icon: cpu</title><g fill="none" fill-rule="evenodd"><circle stroke="#32ABCF" stroke-width="2" cx="24" cy="24" r="23"/><path d="M19.197 24.354l2.121 2.12 1.414-1.413-2.121-2.122-1.414 1.415zm-2.122 2.12l2.122 2.122 1.414-1.414-2.121-2.121-1.415 1.414zm4.243-4.242l2.121 2.122 1.415-1.415-2.122-2.121-1.414 1.414zm2.121-2.121l2.122 2.121 1.414-1.414-2.121-2.121-1.415 1.414zm2.122-2.121l2.121 2.12 1.414-1.413-2.121-2.122-1.414 1.415zm-10.607 9.192l4.95 4.95 12.728-12.728-4.95-4.95-12.728 12.728zm14.85-.707a1 1 0 1 0 1.414-1.414l-.708-.707.708-.708.707.708a1 1 0 1 0 1.414-1.415l-.707-.707 1.414-1.414a2 2 0 0 0 0-2.828l-4.95-4.95a2 2 0 0 0-2.828 0L13.54 25.768a2 2 0 0 0 0 2.828l4.95 4.95a2 2 0 0 0 2.828 0l1.414-1.414.707.707a1 1 0 1 0 1.415-1.414l-.708-.707.708-.708.707.708a1 1 0 1 0 1.414-1.415l-.707-.707.707-.707.707.707a1 1 0 1 0 1.414-1.414l-.707-.707.707-.707.707.707z" fill="#32ABCF"/></g></svg>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>icon: cpu</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="creating-deployment-group:-review-(without-package-selection)" transform="translate(-202.000000, -1038.000000)">
<g id="service:-wordpress" transform="translate(183.000000, 954.000000)">
<g id="package" transform="translate(0.000000, 72.000000)">
<g id="icon:-cpu" transform="translate(19.000000, 12.000000)">
<circle id="Oval-4" stroke="#32ABCF" stroke-width="2" cx="24" cy="24" r="23"></circle>
<path d="M21,28 L24,28 L24,26 L21,26 L21,28 Z M21,31 L24,31 L24,29 L21,29 L21,31 Z M21,25 L24,25 L24,23 L21,23 L21,25 Z M21,22 L24,22 L24,20 L21,20 L21,22 Z M21,19 L24,19 L24,17 L21,17 L21,19 Z M20,33 L27,33 L27,15 L20,15 L20,33 Z M30,22 C30.552,22 31,21.553 31,21 C31,20.447 30.552,20 30,20 L29,20 L29,19 L30,19 C30.552,19 31,18.553 31,18 C31,17.447 30.552,17 30,17 L29,17 L29,15 C29,13.896 28.104,13 27,13 L20,13 C18.896,13 18,13.896 18,15 L18,33 C18,34.104 18.896,35 20,35 L27,35 C28.104,35 29,34.104 29,33 L29,31 L30,31 C30.552,31 31,30.553 31,30 C31,29.447 30.552,29 30,29 L29,29 L29,28 L30,28 C30.552,28 31,27.553 31,27 C31,26.447 30.552,26 30,26 L29,26 L29,25 L30,25 C30.552,25 31,24.553 31,24 C31,23.447 30.552,23 30,23 L29,23 L29,22 L30,22 Z" id="Page-1" fill="#32ABCF" transform="translate(24.500000, 24.000000) rotate(45.000000) translate(-24.500000, -24.000000) "></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 996 B

19
packages/ui-toolkit/src/icons/svg/icon_tick.svg
View File

@ -1,18 +1 @@
<?xml version="1.0" encoding="UTF-8"?> <svg width="9" height="9" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><title>tick</title><path d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z" fill-rule="evenodd"/></svg>
<svg width="9px" height="9px" viewBox="0 0 9 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>tick</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="creating-deployment-group:-editing-manifest" transform="translate(-399.000000, -206.000000)">
<g id="steps" transform="translate(183.000000, 186.000000)">
<g id="step" transform="translate(168.000000, 0.000000)">
<g id="icon:-in-progress" transform="translate(40.000000, 12.000000)">
<polygon id="tick" points="15.3161492 8 11.2540547 13.4771898 9.7036608 11.3123859 8 12.4948677 11.2227757 17 17 9.21019617"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1012 B

After

Width:  |  Height:  |  Size: 192 B

17
packages/ui-toolkit/src/icons/svg/icon_upload_manifest.svg
View File

@ -1,16 +1 @@
<?xml version="1.0" encoding="UTF-8"?> <svg width="18" height="24" viewBox="0 0 18 24" xmlns="http://www.w3.org/2000/svg"><title>Fill 1</title><path d="M5 0L0 4v20h18V0H5zM2 5h3V2h11v20H2V5zm7 4.946l.044.054h-.088L9 9.946zm-1 1.207V17h2v-5.847l1.23 1.485 1.54-1.276L9 6.812l-3.77 4.55 1.54 1.276L8 11.153z" fill="#646464" fill-rule="evenodd"/></svg>
<svg width="18px" height="24px" viewBox="0 0 18 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>Fill 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="creating-deployment-group:-editing-manifest" transform="translate(-196.000000, -575.000000)" fill="#646464">
<g id="button:-upload" transform="translate(183.000000, 564.000000)">
<g id="icon:-upload" transform="translate(13.000000, 11.000000)">
<path d="M5.0004,-0.0003 L0.0004,4.0007 L0.0004,23.9997 L18.0004,23.9997 L18.0004,-0.0003 L5.0004,-0.0003 Z M1.9994,4.9997 L5.0004,4.9997 L5.0004,2.0007 L16.0004,2.0007 L16.0004,22.0007 L1.9994,22.0007 L1.9994,4.9997 Z M9,9.9463 L9.044,10.0003 L8.956,10.0003 L9,9.9463 Z M8,11.1533 L8,17.0003 L10,17.0003 L10,11.1533 L11.23,12.6383 L12.77,11.3623 L9,6.8113 L5.23,11.3623 L6.77,12.6383 L8,11.1533 Z" id="Fill-1"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 310 B

22
packages/ui-toolkit/src/icons/svg/icon_user.svg
View File

@ -1,21 +1 @@
<?xml version="1.0" encoding="UTF-8"?> <svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>Shape</title><path d="M12 12H0a5.958 5.958 0 0 1 1.485-3.552 1.368 1.368 0 0 1 1.726-.296 4.83 4.83 0 0 0 5.201-.248 1.384 1.384 0 0 1 1.75.152A5.968 5.968 0 0 1 12 12zM5.619 0a3.205 3.205 0 0 0-3.211 3.2c0 1.768 1.42 4 3.21 4s3.211-2.232 3.211-4A3.204 3.204 0 0 0 5.62 0z"/></svg>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>Shape</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="49.9665552%" y1="100%" x2="49.9665552%" y2="0%" id="linearGradient-1">
<stop stop-color="#E6E6E6" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="topology" transform="translate(-1280.000000, -21.000000)" fill-rule="nonzero" fill="url(#linearGradient-1)">
<g id="header" transform="translate(0.000000, -1.000000)">
<g id="user_" transform="translate(1280.000000, 22.000000)">
<path d="M12,12 L0,12 C0.0879206862,10.6850688 0.610056844,9.4361191 1.48494983,8.448 C1.91244945,7.94595587 2.6394085,7.8212683 3.21070234,8.152 C4.84372259,9.09118114 6.87643212,8.99426146 8.41204013,7.904 C8.95662257,7.53065583 9.69030531,7.59438751 10.1618729,8.056 C11.2498099,9.09393775 11.9060055,10.5019119 12,12 Z M5.6187291,0 C3.84550716,-1.082166e-16 2.40802676,1.4326888 2.40802676,3.2 C2.40802676,4.968 3.82876254,7.2 5.6187291,7.2 C7.40869565,7.2 8.82943144,4.968 8.82943144,3.2 C8.82943144,1.4326888 7.39195104,1.082166e-16 5.6187291,0 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 371 B

1
packages/ui-toolkit/src/icons/svg/triton_logo.svg Normal file
View File

@ -0,0 +1 @@
<svg width="105" height="19" viewBox="0 0 105 19" xmlns="http://www.w3.org/2000/svg"><path fill="#FDFDFD" fill-rule="evenodd" d="M81 9.502C81 4.256 76.747.004 71.5.004V0C66.253.002 62 4.256 62 9.502S66.253 19 71.5 19 81 14.748 81 9.502zM16.227 1H.773A.773.773 0 0 0 0 1.772v3.094c0 .426.346.772.773.772h4.61c.421 0 .765.336.773.756v10.834c0 .426.346.772.773.772h3.093a.773.773 0 0 0 .773-.772V6.394c0-.426.346-.772.773-.772h4.68a.773.773 0 0 0 .752-.76v-3.09A.773.773 0 0 0 16.227 1zM33 1.772v3.094c0 .426-.35.772-.783.772h-6.723a.778.778 0 0 0-.784.773v10.817c0 .426-.35.772-.783.772h-3.14a.788.788 0 0 1-.726-.472.763.763 0 0 1-.061-.3V5.634C20.002 3.074 22.107 1 24.702 1h7.515c.432 0 .783.346.783.772zM40.167 1h-3.334c-.46 0-.833.346-.833.772v15.456c0 .426.373.772.833.772h3.334c.46 0 .833-.346.833-.772V1.772c0-.426-.373-.772-.833-.772zm3.605 0h15.456c.426 0 .772.346.772.772V4.85a.772.772 0 0 1-.772.772h-4.662a.772.772 0 0 0-.772.772v10.833a.772.772 0 0 1-.772.773H49.93a.775.775 0 0 1-.784-.773V6.394a.772.772 0 0 0-.772-.756h-4.6A.772.772 0 0 1 43 4.866V1.772c0-.426.346-.772.772-.772zM84 1.772A.77.77 0 0 1 84.77 1h11.61c2.55 0 4.618 2.074 4.62 4.634v11.594a.77.77 0 0 1-.769.772H97.15a.77.77 0 0 1-.77-.772V6.394a.77.77 0 0 0-.765-.772H89.39a.77.77 0 0 0-.77.772v10.834a.77.77 0 0 1-.769.772h-3.08a.77.77 0 0 1-.77-.772V1.772zM71.5 5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm31.112-3.854H103v.84h.314v-.753l.551.767.253-.014.551-.764v.764H105V1h-.446l-.551.767L103.49 1H102v.146h.388V2h.228l-.004-.854z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

8
packages/ui-toolkit/src/icons/triton.js Normal file
View File

@ -0,0 +1,8 @@
import Baseline from '../baseline';
import Basealign from '../basealign';
// eslint-disable-next-line no-unused-vars
import React from 'react';
import TritonIcon from './svg/triton_logo.svg';
export default Baseline(Basealign(TritonIcon));

15
packages/ui-toolkit/src/message/Readme.md
View File

@ -1,17 +1,20 @@
## Success #### Success/Educational
``` ```
<Message title="Choosing deployement data center" message="Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more"/> <Message onCloseClick={() =>{}} title="Choosing deployement data center">
Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more"
</Message>
``` ```
## Error #### Error
``` ```
<Message title="Choosing deployement data center" error message="Oh no"/> <Message onCloseClick={() =>{}} title="Choosing deployement data center" error message="Oh no"/>
``` ```
## Warning #### Warning
``` ```
<Message title="Choosing deployement data center" warning message="There were some issues"/> <Message onCloseClick={() =>{}} title="Choosing deployement data center" warning message="There were some issues"/>
``` ```

27
packages/ui-toolkit/src/message/index.js
View File

@ -3,8 +3,9 @@ import is from 'styled-is';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import unitcalc from 'unitcalc'; import unitcalc from 'unitcalc';
import remcalc from 'remcalc';
import { H3 } from '../text/headings'; import { H4 } from '../text/headings';
import P from '../text/p'; import P from '../text/p';
import CloseButton from '../close-button'; import CloseButton from '../close-button';
import { border, bottomShaddow } from '../boxes'; import { border, bottomShaddow } from '../boxes';
@ -16,14 +17,13 @@ const StyledContainer = styled.div`
box-shadow: ${bottomShaddow}; box-shadow: ${bottomShaddow};
border: ${border.confirmed}; border: ${border.confirmed};
width: 100%; width: 100%;
display: flex;
`; `;
const StyledColor = styled.div` const StyledColor = styled.div`
position: absolute; min-width: ${remcalc(36)};
top: 0; margin-right: ${remcalc(18)};
left: 0; min-height: 100%;
width: ${unitcalc(6)};
height: 100%;
background-color: ${props => props.theme.green}; background-color: ${props => props.theme.green};
${is('error')` ${is('error')`
background-color: ${props => props.theme.red}; background-color: ${props => props.theme.red};
@ -37,15 +37,6 @@ const StyledMessageContainer = styled.div`
padding: ${unitcalc(2)} 0 ${unitcalc(2.25)} 0; padding: ${unitcalc(2)} 0 ${unitcalc(2.25)} 0;
`; `;
const StyledTitle = styled(H3)`
margin: 0 ${unitcalc(9)} ${unitcalc(0.25)} ${unitcalc(9)};
font-weight: 600;
`;
const StyledMessage = styled(P)`
margin: ${unitcalc(0.25)} ${unitcalc(9)} 0 ${unitcalc(9)};
`;
const StyledClose = styled(CloseButton)` const StyledClose = styled(CloseButton)`
position: absolute; position: absolute;
right: ${unitcalc(0.5)}; right: ${unitcalc(0.5)};
@ -53,7 +44,7 @@ const StyledClose = styled(CloseButton)`
`; `;
const Message = ({ title, message, onCloseClick, children, ...type }) => { const Message = ({ title, message, onCloseClick, children, ...type }) => {
const renderTitle = title ? <StyledTitle>{title}</StyledTitle> : null; const renderTitle = title ? <H4>{title}</H4> : null;
const renderClose = onCloseClick ? ( const renderClose = onCloseClick ? (
<StyledClose onClick={onCloseClick} /> <StyledClose onClick={onCloseClick} />
@ -62,10 +53,12 @@ const Message = ({ title, message, onCloseClick, children, ...type }) => {
return ( return (
<StyledContainer> <StyledContainer>
<StyledColor {...type} /> <StyledColor {...type} />
<div>
<StyledMessageContainer> <StyledMessageContainer>
{renderTitle} {renderTitle}
<StyledMessage>{message || children}</StyledMessage> <P>{message || children}</P>
</StyledMessageContainer> </StyledMessageContainer>
</div>
{renderClose} {renderClose}
</StyledContainer> </StyledContainer>
); );

17
packages/ui-toolkit/src/text/Readme.md
View File

@ -63,20 +63,29 @@ This is called `Anchor` because of how React Router calls routing links `Link`
#### Primary #### Primary
Default anchor is a type of a link that sits outside text components. The default state has an underline and hover/click states have none.
``` ```
const Anchor = require('/').Anchor; const Anchor = require('/').Anchor;
<Anchor>Inspire the lazy</Anchor> <Anchor href="https://joyent.com">Inspire the lazy</Anchor>
``` ```
#### Secondary #### Reversed
Reversed link is used on dark backgrounds, where a default anchor would not provide enough contrast.
``` ```
const Anchor = require('/').Anchor; const Anchor = require('/').Anchor;
<span style={{'background-color': '#343434'}}> <span style={{'background-color': '#343434'}}>
<Anchor secondary>Inspire the lazy secondary</Anchor> <Anchor href="https://joyent.com" reversed>Inspire the lazy secondary</Anchor>
</span> </span>
``` ```
#### Disabled #### Disabled
Disabled links cannot be actioned and the cursor should be disabled.
``` ```
const Anchor = require('/').Anchor; const Anchor = require('/').Anchor;
<Anchor secondary disabled>Inspire the lazy disabled</Anchor> <Anchor disabled href="https://joyent.com">Inspire the lazy disabled</Anchor>
``` ```

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

@ -14,15 +14,16 @@ export const H1 = NH1.extend`
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
+ p, & + p,
+ small, & + small,
+ h1, & + h1,
+ h2, & + h2,
+ label. & + label,
+ h3, & + h3,
+ h4, & + h4,
+ h5, & + h5,
+ div { & + div,
& + span {
margin-top: ${remcalc(24)}; margin-top: ${remcalc(24)};
} }
`; `;
@ -35,15 +36,16 @@ export const H2 = styled.h2`
line-height: ${remcalc(30)}; line-height: ${remcalc(30)};
font-size: ${remcalc(24)}; font-size: ${remcalc(24)};
+ p, & + p,
+ small, & + small,
+ h1, & + h1,
+ h2, & + h2,
+ label. & + label,
+ h3, & + h3,
+ h4, & + h4,
+ h5, & + h5,
+ div { & + div,
& + span {
margin-top: ${remcalc(24)}; margin-top: ${remcalc(24)};
} }
`; `;
@ -56,20 +58,21 @@ export const H3 = styled.h3`
line-height: ${remcalc(26)}; line-height: ${remcalc(26)};
font-size: ${remcalc(21)}; font-size: ${remcalc(21)};
+ p, & + p,
+ small, & + small,
+ h1, & + h1,
+ h2, & + h2,
+ label. & + label,
+ h3, & + h3,
+ h4, & + h4,
+ h5, & + h5,
+ div { & + div,
& + span {
margin-top: ${remcalc(24)}; margin-top: ${remcalc(24)};
} }
`; `;
export const H4 = styled.h3` export const H4 = styled.h4`
margin: 0; margin: 0;
${typography.color}; ${typography.color};
${typography.fontFamily}; ${typography.fontFamily};
@ -77,15 +80,16 @@ export const H4 = styled.h3`
line-height: ${remcalc(24)}; line-height: ${remcalc(24)};
font-size: ${remcalc(15)}; font-size: ${remcalc(15)};
+ p, & + p,
+ small, & + small,
+ h1, & + h1,
+ h2, & + h2,
+ label. & + label,
+ h3, & + h3,
+ h4, & + h4,
+ h5, & + h5,
+ div { & + div,
& + span {
margin-top: ${remcalc(12)}; margin-top: ${remcalc(12)};
} }
`; `;

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

@ -9,5 +9,18 @@ export default styled.p`
line-height: ${remcalc(24)}; line-height: ${remcalc(24)};
font-size: ${remcalc(15)}; font-size: ${remcalc(15)};
margin: 0;
+ p,
+ small,
+ h1,
+ h2,
+ label,
+ h3,
+ h4,
+ h5,
+ div,
+ span {
padding-bottom: ${remcalc(36)}; padding-bottom: ${remcalc(36)};
}
`; `;

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

@ -99,7 +99,8 @@ module.exports = {
'src/close-button/index.js', 'src/close-button/index.js',
'src/icon-button/index.js', 'src/icon-button/index.js',
'src/message/index.js', 'src/message/index.js',
'src/slider/index.js' 'src/slider/index.js',
'src/icons/icons.js'
] ]
} }
], ],