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

docs(ui-toolkit): new styleguide layout

Browse Source
This commit is contained in:
Sara Vieira 2017-12-15 14:09:09 +00:00 committed by Sérgio Ramos
parent 8c604df1d2
commit 890e093656
31 changed files with 1686 additions and 1538 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/icons/package.json
View File

@ -21,7 +21,7 @@
},
"dependencies": {
"remcalc": "^1.0.9",
"styled-components": "^2.2.3"
"styled-components": "^2.3.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",

4
packages/my-joy-beta/package.json
View File

@ -45,7 +45,7 @@
"redux-actions": "^2.2.1",
"redux-form": "^7.1.2",
"remcalc": "^1.0.9",
"styled-components": "^2.2.3",
"styled-components": "^2.3.0",
"styled-flex-component": "^1.1.0",
"title-case": "^2.1.1"
},
@ -67,7 +67,7 @@
"react-test-renderer": "^16.1.1",
"redrun": "^5.10.0",
"serve": "^6.4.1",
"stylelint": "^8.2.0",
"stylelint": "^8.4.0",
"stylelint-config-joyent-portal": "^2.0.1"
}
}

28
packages/ui-toolkit/package.json
View File

@ -7,25 +7,18 @@
"jsnext:main": "dist/es/index.js",
"module": "dist/es/index.js",
"scripts": {
"lint-ci":
"eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
"lint":
"eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
"lint-ci": "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
"lint": "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
"test-ci": "echo 0",
"test": "echo 0",
"test:visual": "run-p serve jest",
"jest": "jest",
"serve": "http-server styleguide -p 6060 -s",
"copy-fonts":
"rm -rf dist; mkdir -p dist/es/typography; mkdir -p dist/umd/typography; cp -r src/typography/libre-franklin dist/es/typography; cp -r src/typography/libre-franklin dist/umd/typography",
"compile-watch:es":
"NODE_ENV=development babel src --out-dir dist/es --source-maps inline --watch",
"compile:es":
"NODE_ENV=development babel src --out-dir dist/es --source-maps inline",
"compile:umd":
"NODE_ENV=test babel src --out-dir dist/umd --source-maps inline",
"compile-watch:umd":
"NODE_ENV=test babel src --out-dir dist/umd --source-maps inline --watch",
"copy-fonts": "rm -rf dist; mkdir -p dist/es/typography; mkdir -p dist/umd/typography; cp -r src/typography/libre-franklin dist/es/typography; cp -r src/typography/libre-franklin dist/umd/typography",
"compile-watch:es": "NODE_ENV=development babel src --out-dir dist/es --source-maps inline --watch",
"compile:es": "NODE_ENV=development babel src --out-dir dist/es --source-maps inline",
"compile:umd": "NODE_ENV=test babel src --out-dir dist/umd --source-maps inline",
"compile-watch:umd": "NODE_ENV=test babel src --out-dir dist/umd --source-maps inline --watch",
"compile": "redrun -p compile:*",
"dev": "redrun copy-fonts && redrun -p compile-watch:*",
"styleguide:build": "NODE_ENV=production styleguidist build",
@ -52,7 +45,7 @@
"redrun": "^5.10.0",
"remcalc": "^1.0.9",
"rnd-id": "^2.0.0",
"styled-components": "^2.2.4",
"styled-components": "^2.3.0",
"styled-is": "^1.1.0",
"unitcalc": "^1.1.1"
},
@ -64,6 +57,7 @@
"babel-plugin-transform-es3-property-literals": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-joyent-portal": "^3.3.3",
"classnames": "^2.2.5",
"codemirror": "^5.32.0",
"eslint": "^4.12.1",
"eslint-config-joyent-portal": "^3.2.0",
@ -83,12 +77,12 @@
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-styleguidist": "^6.0.33",
"react-styleguidist": "^6.1.0",
"react-test-renderer": "^16.2.0",
"redux": "^3.7.2",
"redux-form": "^7.2.0",
"serve-static": "^1.13.1",
"stylelint": "^8.3.1",
"stylelint": "^8.4.0",
"stylelint-config-joyent-portal": "^2.0.1",
"webpack": "^3.10.0"
},

25
packages/ui-toolkit/src/button/usage.md → packages/ui-toolkit/src/button/Readme.md
View File

@ -1,4 +1,4 @@
#### Button > Primary
#### Primary Button
Primary button to be used once per page. Only use to indicate main action per pattern.
Min. width: 120px
@ -8,12 +8,10 @@ const { default: Button } = require('./');
<span>
<Button>Inspire the lazy</Button>
<span> </span>
<Button disabled>Inspire the lazy</Button>
</span>;
```
#### Button > Secondary
#### Secondary Button
Secondary buttons can be used freely to indicate other actions on patterns.
Min. width: 120px
@ -23,12 +21,23 @@ const { default: Button } = require('./');
<span>
<Button secondary>Inspire the brave</Button>
<span> </span>
</span>;
```
#### Disabled Button
Disabled buttons can be used freely to indicate that no action is permitted in this button.
Min. width: 120px
```jsx
const React = require('react');
const { default: Button } = require('./');
<span>
<Button secondary disabled>Inspire the brave</Button>
</span>;
```
#### Button > Small
#### Small Button
Small buttons are supporters of the secondary button. They can be used within cluttered or complex patterns to free up space.
```jsx
@ -40,7 +49,7 @@ const { default: Button } = require('./');
</span>;
```
#### Button > Loading
#### Loading Button
```jsx
const React = require('react');
@ -53,7 +62,7 @@ const { default: Button } = require('./');
</span>;
```
#### Button > Quick Action
#### Quick Action
Quick action buttons are to be imbedded in components to give additional functionality. They can be used in either primary or secondary colour palettes depending on importance
```jsx

47
packages/ui-toolkit/src/button/index.js
View File

@ -95,23 +95,6 @@ const style = css`
}
`};
${is('tertiary')`
color: ${props => props.theme.text};
background-color: ${props => props.theme.disabled};
border-color: ${props => props.theme.grey};
font-weight: 600;
&:focus,
&:hover,
&:active,
&:active:hover,
&:active:focus {
color: ${props => props.theme.text};
background-color: ${props => props.theme.disabled};
border-color: ${props => props.theme.grey};
}
`};
${is('error')`
color: ${props => props.theme.red};
background-color: ${props => props.theme.white};
@ -136,22 +119,6 @@ const style = css`
}
`};
${is('tertiary', 'selected')`
background-color: rgba(59, 70, 204, 0.2);
color: ${props => props.theme.primaryActive};
border-color: ${props => props.theme.primaryActive};
&:focus,
&:hover,
&:active,
&:active:hover,
&:active:focus {
background-color: rgba(59, 70, 204, 0.2);
color: ${props => props.theme.primaryActive};
border-color: ${props => props.theme.primaryActive};
}
`};
${isOr('disabled', 'loading')`
cursor: not-allowed;
pointer-events: none;
@ -239,7 +206,7 @@ const StyledLink = styled(Link)`
`;
/**
* @example ./usage.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.
*/
const Button = props => {
const { href = '', to = '', loading = false, secondary } = props;
@ -282,10 +249,6 @@ Button.propTypes = {
* Is it secondary ?
*/
secondary: PropTypes.bool,
/**
* Is it tertiary ?
*/
tertiary: PropTypes.bool,
/**
* When set to true a smaller version of the button will show
*/
@ -294,19 +257,13 @@ Button.propTypes = {
* Set to true to show loading animation
*/
loading: PropTypes.bool,
/**
* When used, will give button an active state (Only for tertiary for now)
*/
selected: PropTypes.bool
};
Button.defaultProps = {
primary: true,
secondary: false,
tertiary: false,
small: false,
loading: false,
selected: false
loading: false
};
export default Baseline(Button);

40
packages/ui-toolkit/src/card/demo.md
View File

@ -28,10 +28,10 @@ const { Instances, Actions } = require('../icons');
<Header>
<HeaderMeta>
<Row between="xs" middle="xs">
<Col xs={4} sm={8} md={9}>
<Col xs={4} sm={8}>
<H4>Nginx</H4>
</Col>
<Col xs={8} sm={4} md={3}>
<Col xs={8} sm={4}>
<P>
<Instances marginRight="0.5" light /> 4 of 4 instances
</P>
@ -59,10 +59,10 @@ const { Instances, Health, Actions } = require('../icons');
<Header>
<HeaderMeta>
<Row between="xs" middle="xs">
<Col xs={4} sm={8} md={9}>
<Col xs={4} sm={8}>
<H4>Nginx</H4>
</Col>
<Col xs={8} sm={4} md={3}>
<Col xs={8} sm={4}>
<P>
<Instances marginRight="0.5" light /> 4 of 4 instances
</P>
@ -107,10 +107,10 @@ const { Instances, Actions } = require('../icons');
<Header>
<HeaderMeta>
<Row between="xs" middle="xs">
<Col xs={4} sm={8} md={9}>
<Col xs={4} sm={8}>
<H4>Nginx</H4>
</Col>
<Col xs={8} sm={4} md={3}>
<Col xs={8} sm={4}>
<P>
<Instances marginRight="0.5" light /> 4 of 4 instances
</P>
@ -147,10 +147,10 @@ const { Actions, Instances, Health } = require('../icons');
<Header>
<HeaderMeta>
<Row middle="xs">
<Col xs={2} sm={1} md={1}>
<Col xs={2} sm={3}>
<H4>Nginx</H4>
</Col>
<Col xs={8} sm={4} md={2}>
<Col xs={8} sm={4}>
<StatusLoader marginLeft="0" inline row msg="Provisioning" />
</Col>
</Row>
@ -169,10 +169,10 @@ const { Actions, Instances, Health } = require('../icons');
<Header>
<HeaderMeta>
<Row between="xs" middle="xs">
<Col xs={4} sm={8} md={9}>
<Col xs={4} sm={8}>
<H4>Nginx</H4>
</Col>
<Col xs={8} sm={4} md={3}>
<Col xs={8} sm={4}>
<P>
<Instances marginRight="0.5" light /> 4 of 4 instances
</P>
@ -227,10 +227,10 @@ const { Actions } = require('../icons');
<Header>
<HeaderMeta>
<Row between="xs" middle="xs">
<Col xs={2} sm={9} md={10}>
<Col xs={2} sm={9} md={9}>
<H4>Nginx</H4>
</Col>
<Col xs={5} sm={2} md={2}>
<Col xs={5} sm={2} md={3}>
<P>1 Instance</P>
</Col>
</Row>
@ -399,16 +399,22 @@ const { Health, Actions, DataCenter } = require('../icons');
<Header transparent>
<HeaderMeta>
<Row between="xs" middle="xs">
<Col xs={2} sm={9} md={8}>
<Col xs={2} sm={5}>
<H4>Nginx</H4>
</Col>
<Col xs={5} sm={2} md={2}>
<P>
<Col xs={5} sm={3}>
<P style={{
display: 'flex',
alignItems: 'center'
}}>
<Health healthy /> Healthy
</P>
</Col>
<Col xs={5} sm={2} md={2}>
<P>
<Col xs={5} sm={3}>
<P style={{
display: 'flex',
alignItems: 'center'
}}>
<DataCenter /> eu-ams-1
</P>
</Col>

21
packages/ui-toolkit/src/form/usage-select.md
View File

@ -1,16 +1,19 @@
```jsx
const React = require('react');
const { default: Select } = require('./select');
const { default: FormGroup } = require('./group');
<Select>
<option selected disabled>
Select a datacenter
</option>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>;
<FormGroup>
<Select>
<option selected disabled>
Select a datacenter
</option>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
</FormGroup>
```
#### Select > Disabled

670
packages/ui-toolkit/src/icons/Readme.md
View File

@ -1,670 +0,0 @@
```js noeditor
const React = require('react');
const { List, Icon, ListItem } = require('./icons');
const { default: Label } = require('../label');
const { default: theme } = require('../theme');
const {
Actions,
Affinity,
Arrow,
Bin,
Checkcircle,
Clipboard,
Close,
Cns,
Copy,
DataCenter,
Delete,
Dot,
Duplicate,
Edit,
Firewall,
Health,
Id,
Import,
InstanceCount,
InstanceType,
Instances,
Loading,
Login,
Metadata,
Minus,
Network,
Package,
Plus,
Reset,
Start,
Stop,
Tags,
Triton,
User
} = require('.');
<List>
<ListItem>
<Icon>
<Actions />
</Icon>
<Label>Actions &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Actions light />
</Icon>
<Label>Actions &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Actions disabled />
</Icon>
<Label>Actions &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Affinity />
</Icon>
<Label>Affinity &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Affinity light />
</Icon>
<Label>Affinity &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Affinity disabled />
</Icon>
<Label>Affinity &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Arrow />
</Icon>
<Label>Arrow &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon>
<Arrow direction="right" />
</Icon>
<Label>Arrow &gt; Right</Label>
</ListItem>
<ListItem>
<Icon>
<Arrow direction="up" />
</Icon>
<Label>Arrow &gt; Up</Label>
</ListItem>
<ListItem>
<Icon>
<Arrow direction="left" />
</Icon>
<Label>Arrow &gt; left</Label>
</ListItem>
<ListItem>
<Icon dark>
<Arrow light />
</Icon>
<Label>Arrow &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Arrow disabled />
</Icon>
<Label>Arrow &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Bin />
</Icon>
<Label>Bin &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark >
<Bin light />
</Icon>
<Label>Bin &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Bin disabled />
</Icon>
<Label>Bin &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Checkcircle checked />
</Icon>
<Label>Tick</Label>
</ListItem>
<ListItem>
<Icon>
<Checkcircle checked fill />
</Icon>
<Label>Completed</Label>
</ListItem>
<ListItem>
<Icon>
<Checkcircle checked border />
</Icon>
<Label>Part Completed</Label>
</ListItem>
<ListItem>
<Icon>
<Checkcircle border />
</Icon>
<Label>Incomplete</Label>
</ListItem>
<ListItem>
<Icon>
<Close />
</Icon>
<Label>Close</Label>
</ListItem>
<ListItem>
<Icon>
<Clipboard />
</Icon>
<Label>Clipboard &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Clipboard light />
</Icon>
<Label>Clipboard &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Clipboard disabled />
</Icon>
<Label>Clipboard &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Cns />
</Icon>
<Label>CNS &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Cns light />
</Icon>
<Label>CNS &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Cns disabled />
</Icon>
<Label>CNS &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Copy />
</Icon>
<Label>Copy &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Copy light />
</Icon>
<Label>Copy &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Copy disabled />
</Icon>
<Label>Copy &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<DataCenter />
</Icon>
<Label>Data Centre &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<DataCenter light />
</Icon>
<Label>Data Centre &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<DataCenter disabled />
</Icon>
<Label>Data Centre &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Delete fill={theme.red} />
</Icon>
<Label>Delete &gt; Red</Label>
</ListItem>
<ListItem>
<Icon dark>
<Delete light />
</Icon>
<Label>Delete &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Delete />
</Icon>
<Label>Delete &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon>
<Delete disabled />
</Icon>
<Label>Delete &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Dot color='primary' />
</Icon>
<Label>Dot &gt; Primary</Label>
</ListItem>
<ListItem>
<Icon>
<Duplicate />
</Icon>
<Label>Duplicate &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Duplicate light />
</Icon>
<Label>Duplicate &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Duplicate disabled />
</Icon>
<Label>Duplicate &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Edit />
</Icon>
<Label>Edit &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Edit light />
</Icon>
<Label>Edit &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Edit disabled />
</Icon>
<Label>Edit &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Firewall />
</Icon>
<Label>Firewall &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Firewall light />
</Icon>
<Label>Firewall &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Firewall disabled />
</Icon>
<Label>Firewall &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon dark>
<Health />
</Icon>
<Label>Health &gt; Healthy</Label>
</ListItem>
<ListItem>
<Icon dark>
<Health healthy={false} />
</Icon>
<Label>Health &gt; Unhealthy</Label>
</ListItem>
<ListItem>
<Icon>
<Id />
</Icon>
<Label>Id &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Id light />
</Icon>
<Label>Id &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Id disabled />
</Icon>
<Label>Id &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Import />
</Icon>
<Label>Import</Label>
</ListItem>
<ListItem>
<Icon>
<InstanceCount />
</Icon>
<Label>InstanceCount &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<InstanceCount light />
</Icon>
<Label>InstanceCount &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<InstanceCount disabled />
</Icon>
<Label>InstanceCount &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<InstanceType />
</Icon>
<Label>InstanceType &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<InstanceType light />
</Icon>
<Label>InstanceType &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<InstanceType disabled />
</Icon>
<Label>InstanceType &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Instances />
</Icon>
<Label>Instances &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Instances light />
</Icon>
<Label>Instances &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Instances disabled />
</Icon>
<Label>Instances &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Loading />
</Icon>
<Label>Loading &gt; Primary</Label>
</ListItem>
<ListItem>
<Icon>
<Loading secondary />
</Icon>
<Label>Loading &gt; Secondary</Label>
</ListItem>
<ListItem>
<Icon dark>
<Loading light />
</Icon>
<Label>Loading &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Loading disabled />
</Icon>
<Label>Loading &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Login />
</Icon>
<Label>Login &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Login light />
</Icon>
<Label>Login &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Login disabled />
</Icon>
<Label>Login &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Metadata />
</Icon>
<Label>Metadata &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Metadata light />
</Icon>
<Label>Metadata &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Metadata disabled />
</Icon>
<Label>Metadata &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Minus />
</Icon>
<Label>Minus &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Minus light />
</Icon>
<Label>Minus &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Minus disabled />
</Icon>
<Label>Minus &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Network />
</Icon>
<Label>Network &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Network light />
</Icon>
<Label>Network &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Network disabled />
</Icon>
<Label>Network &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Package />
</Icon>
<Label>Package &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Package light />
</Icon>
<Label>Package &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Package disabled />
</Icon>
<Label>Package &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Plus />
</Icon>
<Label>Plus &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Plus light />
</Icon>
<Label>Plus &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Plus disabled />
</Icon>
<Label>Plus &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Reset />
</Icon>
<Label>Reset &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Reset light />
</Icon>
<Label>Reset &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Reset disabled />
</Icon>
<Label>Reset &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Start />
</Icon>
<Label>Start &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Start light />
</Icon>
<Label>Start &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Start disabled />
</Icon>
<Label>Start &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Stop />
</Icon>
<Label>Stop &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Stop light />
</Icon>
<Label>Stop &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Stop disabled />
</Icon>
<Label>Stop &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Tags />
</Icon>
<Label>Tags &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Tags light />
</Icon>
<Label>Tags &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Tags disabled />
</Icon>
<Label>Tags &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Triton />
</Icon>
<Label>Triton &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Triton light />
</Icon>
<Label>Triton &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Triton disabled />
</Icon>
<Label>Triton &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<Triton beta />
</Icon>
<Label>Triton Beta &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<Triton beta light />
</Icon>
<Label>Triton Beta &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<Triton beta disabled />
</Icon>
<Label>Triton Beta &gt; Disabled</Label>
</ListItem>
<ListItem>
<Icon>
<User />
</Icon>
<Label>User &gt; Dark</Label>
</ListItem>
<ListItem>
<Icon dark>
<User light />
</Icon>
<Label>User &gt; Light</Label>
</ListItem>
<ListItem>
<Icon>
<User disabled />
</Icon>
<Label>User &gt; Disabled</Label>
</ListItem>
</List>;
```

258
packages/ui-toolkit/src/icons/functional.md Normal file
View File

@ -0,0 +1,258 @@
Icons here are used to support funtions and actions users can take withini the Triton service.
```js noeditor
const React = require('react');
const { List, Icon, ListItem } = require('./icons');
const { default: Label } = require('../label');
const { default: theme } = require('../theme');
const {
Actions,
Affinity,
Arrow,
Bin,
Checkcircle,
Clipboard,
Close,
Cns,
Copy,
DataCenter,
Delete,
Dot,
Duplicate,
Edit,
Firewall,
Health,
Id,
Import,
InstanceCount,
InstanceType,
Instances,
Loading,
Login,
Metadata,
Minus,
Network,
Package,
Plus,
Reset,
Start,
Stop,
Tags,
Triton,
User
} = require('.');
<List>
<ListItem>
<Icon>
<Actions />
</Icon>
<Label>Actions</Label>
</ListItem>
<ListItem>
<Icon>
<Arrow />
</Icon>
<Label>Arrow</Label>
</ListItem>
<ListItem>
<Icon>
<Arrow direction="right" />
</Icon>
<Label>Arrow &gt; Right</Label>
</ListItem>
<ListItem>
<Icon>
<Arrow direction="up" />
</Icon>
<Label>Arrow &gt; Up</Label>
</ListItem>
<ListItem>
<Icon>
<Arrow direction="left" />
</Icon>
<Label>Arrow &gt; left</Label>
</ListItem>
<ListItem>
<Icon>
<Bin />
</Icon>
<Label>Bin</Label>
</ListItem>
<ListItem>
<Icon>
<Checkcircle checked />
</Icon>
<Label>Tick</Label>
</ListItem>
<ListItem>
<Icon>
<Checkcircle checked fill />
</Icon>
<Label>Completed</Label>
</ListItem>
<ListItem>
<Icon>
<Checkcircle checked border />
</Icon>
<Label>Part Completed</Label>
</ListItem>
<ListItem>
<Icon>
<Checkcircle border />
</Icon>
<Label>Incomplete</Label>
</ListItem>
<ListItem>
<Icon>
<Close />
</Icon>
<Label>Close</Label>
</ListItem>
<ListItem>
<Icon>
<Clipboard />
</Icon>
<Label>Clipboard</Label>
</ListItem>
<ListItem>
<Icon>
<Copy />
</Icon>
<Label>Copy</Label>
</ListItem>
<ListItem>
<Icon>
<DataCenter />
</Icon>
<Label>Data Centre</Label>
</ListItem>
<ListItem>
<Icon>
<Delete fill={theme.red} />
</Icon>
<Label>Delete &gt; Red</Label>
</ListItem>
<ListItem>
<Icon>
<Delete />
</Icon>
<Label>Delete</Label>
</ListItem>
<ListItem>
<Icon>
<Dot color='primary' />
</Icon>
<Label>Dot &gt; Primary</Label>
</ListItem>
<ListItem>
<Icon>
<Duplicate />
</Icon>
<Label>Duplicate</Label>
</ListItem>
<ListItem>
<Icon>
<Edit />
</Icon>
<Label>Edit</Label>
</ListItem>
<ListItem>
<Icon>
<Health />
</Icon>
<Label>Health &gt; Healthy</Label>
</ListItem>
<ListItem>
<Icon>
<Health healthy={false} />
</Icon>
<Label>Health &gt; Unhealthy</Label>
</ListItem>
<ListItem>
<Icon>
<Id />
</Icon>
<Label>Id</Label>
</ListItem>
<ListItem>
<Icon>
<Import />
</Icon>
<Label>Import</Label>
</ListItem>
<ListItem>
<Icon>
<Instances />
</Icon>
<Label>Instances</Label>
</ListItem>
<ListItem>
<Icon>
<Loading />
</Icon>
<Label>Loading &gt; Primary</Label>
</ListItem>
<ListItem>
<Icon>
<Loading secondary />
</Icon>
<Label>Loading &gt; Secondary</Label>
</ListItem>
<ListItem>
<Icon>
<Login />
</Icon>
<Label>Login</Label>
</ListItem>
<ListItem>
<Icon>
<Minus />
</Icon>
<Label>Minus</Label>
</ListItem>
<ListItem>
<Icon>
<Plus />
</Icon>
<Label>Plus</Label>
</ListItem>
<ListItem>
<Icon>
<Reset />
</Icon>
<Label>Reset</Label>
</ListItem>
<ListItem>
<Icon>
<Start />
</Icon>
<Label>Start</Label>
</ListItem>
<ListItem>
<Icon>
<Stop />
</Icon>
<Label>Stop</Label>
</ListItem>
<ListItem>
<Icon>
<Triton />
</Icon>
<Label>Triton</Label>
</ListItem>
<ListItem>
<Icon>
<Triton beta />
</Icon>
<Label>Triton Beta</Label>
</ListItem>
<ListItem>
<Icon>
<User />
</Icon>
<Label>User</Label>
</ListItem>
</List>;
```

4
packages/ui-toolkit/src/icons/icons.js
View File

@ -10,8 +10,8 @@ export const List = styled.ul`
`;
export const Icon = styled.div`
width: ${remcalc(180)};
height: ${remcalc(180)};
width: ${remcalc(165)};
height: ${remcalc(165)};
border: ${remcalc(2)} solid ${props => props.theme.grey};
align-items: center;
justify-content: center;

102
packages/ui-toolkit/src/icons/section.md Normal file
View File

@ -0,0 +1,102 @@
Icons here are used to denote sperate sections within the Instance Managements space of Triton Compute.
```js noeditor
const React = require('react');
const { List, Icon, ListItem } = require('./icons');
const { default: Label } = require('../label');
const { default: theme } = require('../theme');
const {
Actions,
Affinity,
Arrow,
Bin,
Checkcircle,
Clipboard,
Close,
Cns,
Copy,
DataCenter,
Delete,
Dot,
Duplicate,
Edit,
Firewall,
Health,
Id,
Import,
InstanceCount,
InstanceType,
Instances,
Loading,
Login,
Metadata,
Minus,
Network,
Package,
Plus,
Reset,
Start,
Stop,
Tags,
Triton,
User
} = require('.');
<List>
<ListItem>
<Icon>
<Affinity />
</Icon>
<Label>Affinity</Label>
</ListItem>
<ListItem>
<Icon>
<Firewall />
</Icon>
<Label>Firewall</Label>
</ListItem>
<ListItem>
<Icon>
<Cns />
</Icon>
<Label>CNS/DNS</Label>
</ListItem>
<ListItem>
<Icon>
<InstanceCount />
</Icon>
<Label>InstanceCount</Label>
</ListItem>
<ListItem>
<Icon>
<InstanceType />
</Icon>
<Label>InstanceType</Label>
</ListItem>
<ListItem>
<Icon>
<Metadata />
</Icon>
<Label>Metadata</Label>
</ListItem>
<ListItem>
<Icon>
<Package />
</Icon>
<Label>Package</Label>
</ListItem>
<ListItem>
<Icon>
<Network />
</Icon>
<Label>Network</Label>
</ListItem>
<ListItem>
<Icon>
<Tags />
</Icon>
<Label>Tags</Label>
</ListItem>
</List>;
```

124
packages/ui-toolkit/src/styleguide/component.js Normal file
View File

@ -0,0 +1,124 @@
import React from 'react';
import styled, { keyframes } from 'styled-components';
import remcalc from 'remcalc';
import { Card, H2, P } from '../';
import typography from '../typography';
const chevron =
'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTsiIGNsYXNzPSJiYXNlbGluZS1idFRncEsgaGltUHhaIj48cGF0aCBmaWxsPSJyZ2JhKDczLCA3MywgNzMsIDEpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiPjwvcGF0aD48L3N2Zz4=';
const CardStyled = styled(Card)`
margin-bottom: ${remcalc(36)};
`;
const Header = styled.header`
background: ${props => props.theme.primary};
padding: ${remcalc(50)} ${remcalc(120)};
position: relative;
`;
const Main = styled.div`
padding: ${remcalc(50)} ${remcalc(120)};
h4 {
margin: 0;
${typography.color};
${typography.fontFamily};
${typography.normal};
line-height: ${remcalc(26)};
font-size: ${remcalc(21)};
& + p {
margin-top: ${remcalc(12)};
}
}
`;
const fadeIn = keyframes`
from {opacity: 0;}
to {opacity: 1;}
`;
const Wrapper = styled.div`
> div {
padding: ${remcalc(16)};
animation: ${fadeIn} 250ms ease-in-out;
background: ${props => props.theme.whiteHover};
th[class*='rsg--cellHeading-'] {
font-weight: normal;
padding-bottom: ${remcalc(16)};
}
thead[class*='rsg--tableHead'] {
border: none;
}
table[class*='rsg--table'] {
margin: 0;
}
}
`;
const Props = styled.div`
> div:not(:empty) {
position: relative;
border-bottom: ${remcalc(1)} solid ${props => props.theme.grey};
}
button[class*='rsg--isActive-'] {
border: none;
}
button {
text-transform: none;
color: ${props => props.theme.text};
position: relative;
cursor: pointer;
&:after {
content: '';
position: absolute;
display: block;
width: ${remcalc(9)};
height: ${remcalc(6)};
background: url(${chevron});
right: ${remcalc(-18)};
top: ${remcalc(15)};
}
&:hover {
color: ${props => props.theme.text};
}
}
`;
const Content = styled.div`
margin-top: ${remcalc(40)};
`;
export default ({
name,
heading,
description,
examples,
tabButtons,
tabBody
}) => {
return (
<CardStyled id={name.toLowerCase()}>
<Header>
<H2 style={{ color: 'white' }}>{heading.props.children}</H2>
{description &&
description.props && (
<P style={{ color: 'white' }}>{description.props.text}</P>
)}
</Header>
<Main>
<Props>{tabButtons}</Props>
<Wrapper>{tabBody}</Wrapper>
<Content>{examples}</Content>
</Main>
</CardStyled>
);
};

117
packages/ui-toolkit/src/styleguide/playground.js Normal file
View File

@ -0,0 +1,117 @@
import React, { Component } from 'react';
import styled from 'styled-components';
import is from 'styled-is';
import remcalc from 'remcalc';
const Wrapper = styled.section`
margin-top: ${remcalc(24)};
margin-bottom: ${remcalc(46)};
`;
const Tabs = styled.ul`
list-style: none;
display: flex;
padding: 0;
align-items: center;
border-bottom: ${remcalc(1)} solid ${props => props.theme.textDisabled};
`;
const TabHeader = styled.li`
position: relative;
height: ${remcalc(30)};
box-sizing: border-box;
line-height: inherit;
margin-right: ${remcalc(18)};
${is('active')`
border-bottom: ${remcalc(1)} solid ${props => props.theme.primary};
`};
li:hover {
border-bottom: ${remcalc(1)} solid ${props => props.theme.primary};
}
`;
const Button = styled.button`
font-family: 'Libre Franklin';
text-transform: uppercase;
font-size: ${remcalc(15)};
color: ${props => props.theme.textDisabled};
border: none;
background: ${props => props.theme.white};
transition: color 150ms ease-in;
cursor: pointer;
text-transform: none;
padding: 0;
margin: 0 ${remcalc(2)};
${is('active')`
color: ${props => props.theme.primary};
font-weight: bold;
`};
&:hover {
color: ${props => props.theme.primary};
}
`;
const Tab = styled.div`
height: 0;
opacity: 0;
transition: opacity 150ms ease-in;
${is('active')`
height: auto;
opacity: 1;
`};
.CodeMirror-wrap {
border: none;
padding: 0;
}
`;
class Playground extends Component {
state = {
tab: 'component'
};
changeTab = tab => {
this.setState({
tab
});
};
render() {
const { name, preview, tabBody } = this.props;
return (
<Wrapper>
<Tabs>
<TabHeader active={this.state.tab === 'component'}>
<Button
active={this.state.tab === 'component'}
onClick={() => this.changeTab('component')}
>
Example
</Button>
</TabHeader>
<TabHeader active={this.state.tab === 'code'}>
<Button
active={this.state.tab === 'code'}
onClick={() => this.changeTab('code')}
>
Code
</Button>
</TabHeader>
</Tabs>
<Tab active={this.state.tab === 'component'} data-preview={name}>
{preview}
</Tab>
<Tab active={this.state.tab === 'code'}>{tabBody}</Tab>
</Wrapper>
);
}
}
export default Playground;

74
packages/ui-toolkit/src/styleguide/renderer.js Normal file
View File

@ -0,0 +1,74 @@
import React from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { Grid, Row, Col } from '../grid';
import remcalc from 'remcalc';
import theme from '../theme';
import is from 'styled-is';
import Header, { HeaderBrand } from '../header';
import { Triton } from '../icons';
const Main = styled(Row)`
padding-top: ${remcalc(40)};
`;
const Sticky = styled.div`
position: sticky;
top: 0;
z-index: 9;
${is('sidebar')`
top: ${remcalc(100)};
`};
`;
const fullTheme = {
...theme,
spacing: {
0.5: remcalc(4),
0: remcalc(0),
1: remcalc(6),
2: remcalc(12),
3: remcalc(18),
4: remcalc(24),
5: remcalc(30),
6: remcalc(36),
7: remcalc(42),
8: remcalc(48),
9: remcalc(54),
10: remcalc(60)
}
};
const StyleGuideRenderer = ({
title,
homepageUrl,
children,
toc,
hasSidebar
}) => (
<ThemeProvider theme={fullTheme}>
<div>
<Sticky>
<Header fluid>
<HeaderBrand beta center>
<Triton light />
</HeaderBrand>
</Header>
</Sticky>
<Grid>
<Main>
{hasSidebar && (
<Col xs={3}>
<Sticky sidebar>{toc}</Sticky>
</Col>
)}
<Col xs={hasSidebar ? 9 : 12} lg={hasSidebar ? 8 : 12}>
{children}
</Col>
</Main>
</Grid>
</div>
</ThemeProvider>
);
export default StyleGuideRenderer;

64
packages/ui-toolkit/src/styleguide/section.js Normal file
View File

@ -0,0 +1,64 @@
import React from 'react';
import styled from 'styled-components';
import typography from '../typography';
import { Card, H2, P } from '../';
import remcalc from 'remcalc';
const CardStyled = styled(Card)`
margin-bottom: ${remcalc(36)};
`;
const Header = styled.header`
background: ${props => props.theme.primary};
padding: ${remcalc(50)} ${remcalc(120)};
position: relative;
`;
const Main = styled.div`
padding: ${remcalc(50)} ${remcalc(120)};
h4 {
margin: 0;
${typography.color};
${typography.fontFamily};
${typography.normal};
line-height: ${remcalc(26)};
font-size: ${remcalc(21)};
& + p {
margin-top: ${remcalc(24)};
}
}
`;
export default allProps => {
const {
name,
content,
components,
sections,
depth,
description
} = allProps;
const Tag = depth === 2 ? CardStyled : 'div';
const TagMain = depth === 2 ? Main : 'div';
return (
<Tag>
{name &&
depth !== 1 && (
<Header>
<H2 style={{ color: 'white' }}>{name}</H2>
{description && (
<P style={{ color: 'white' }}>{description}</P>
)}
</Header>
)}
<TagMain>
{content}
{components}
{sections}
</TagMain>
</Tag>
);
};

75
packages/ui-toolkit/src/styleguide/sectionHeading.js Normal file
View File

@ -0,0 +1,75 @@
import React from 'react';
import styled from 'styled-components';
import cx from 'classnames';
import Styled from 'react-styleguidist/lib/rsg-components/Styled';
import remcalc from 'remcalc';
const styles = ({ color, fontFamily, fontSize }) => ({
heading: {
margin: remcalc(24),
marginLeft: 0,
color: color.base,
fontFamily: fontFamily.base,
fontWeight: 'normal'
},
heading1: {
fontSize: remcalc(36)
},
heading2: {
fontSize: remcalc(30)
},
heading3: {
fontSize: remcalc(26)
},
heading4: {
fontSize: remcalc(24)
},
heading5: {
fontSize: remcalc(24)
},
heading6: {
fontSize: remcalc(18)
}
});
const Link = styled.a`
color: ${props => props.theme.text};
text-decoration: none;
`;
function HeadingRenderer({ classes, level, children, ...props }) {
const Tag = `h${level}`;
const headingClasses = cx(classes.heading, classes[`heading${level}`]);
const Heading = level === 1 ? null : (
<Tag {...props} className={headingClasses}>
{children}
</Tag>
)
return Heading
}
const Heading = Styled(styles)(HeadingRenderer);
export default ({
classes,
children,
toolbar,
id,
href,
depth,
deprecated
}) => {
const headingLevel = Math.min(6, depth);
return (
<div>
<Heading level={headingLevel} id={id}>
<Link href={href}>{children}</Link>
</Heading>
{/* <div className={classes.toolbar}>{toolbar}</div> */}
</div>
);
};

44
packages/ui-toolkit/src/styleguide/sidebar.js Normal file
View File

@ -0,0 +1,44 @@
import React from 'react';
import remcalc from 'remcalc';
import { H3 } from '../';
import styled from 'styled-components';
const List = styled.ul`
list-style: none;
padding: 0;
ul.rsg--list-1 {
padding-left: ${remcalc(6)};
}
a.rsg--link-6 {
color: ${props => props.theme.text};
margin-bottom: ${remcalc(6)};
}
`;
const Header = styled(H3)`
color: #979797;
font-size: ${remcalc(18)};
margin-bottom: ${remcalc(12)};
margin-top: ${remcalc(12)};
`;
export default ({ children: { props } }) => {
const items = props.items.filter(item => item.name);
if (!items.length) {
return null;
}
return (
<List>
{items.map(({ heading, name, slug, content }) => (
<li key={name}>
<Header>{name}</Header>
{content}
</li>
))}
</List>
);
};

72
packages/ui-toolkit/src/styleguide/tabs.js Normal file
View File

@ -0,0 +1,72 @@
import React from 'react';
import PropTypes from 'prop-types';
import Styled from 'react-styleguidist/lib/rsg-components/Styled';
import cx from 'classnames';
export const styles = ({
space,
color,
fontFamily,
fontSize,
buttonTextTransform
}) => ({
button: {
padding: [[space[1], 0]],
fontFamily: fontFamily.base,
fontSize: fontSize.base,
color: color.light,
background: 'transparent',
textTransform: buttonTextTransform,
transition: 'color 750ms ease-out',
border: 'none',
cursor: 'pointer',
'&:hover, &:focus': {
isolate: false,
outline: 0,
color: color.linkHover,
transition: 'color 150ms ease-in'
},
'&:focus:not($isActive)': {
isolate: false,
outline: [[1, 'dotted', color.linkHover]]
},
'& + &': {
isolate: false,
marginLeft: space[1]
}
},
isActive: {
borderBottom: [[2, color.linkHover, 'solid']]
}
});
export function TabButtonRenderer({
classes,
name,
className,
onClick,
active,
children
}) {
const classNames = cx(classes.button, className, {
[classes.isActive]: active
});
return (
<button type="button" name={name} className={classNames} onClick={onClick}>
{children}
sup
</button>
);
}
TabButtonRenderer.propTypes = {
classes: PropTypes.object.isRequired,
name: PropTypes.string,
className: PropTypes.string,
onClick: PropTypes.func,
active: PropTypes.bool,
children: PropTypes.node
};
export default Styled(styles)(TabButtonRenderer);

4
packages/ui-toolkit/src/styleguide/wrapper.js
View File

@ -14,7 +14,9 @@ const StyledBase = Base.extend`
export default ({ children }) => (
<ThemeProvider theme={theme}>
<StyledBase>
<RootContainer>{children}</RootContainer>
<RootContainer>
{children}
</RootContainer>
</StyledBase>
</ThemeProvider>
);

40
packages/ui-toolkit/src/table/usage.md
View File

@ -1,4 +1,4 @@
#### Table > Header
#### Header
```jsx
const React = require('react');
const remcalc = require('remcalc');
@ -23,9 +23,6 @@ const { Dot, Actions } = require('../icons');
<Th xs="0" sm="160" left middle actionable>
<span>Created </span>
</Th>
<Th xs="0" sm="130" left middle actionable>
<span>Short ID </span>
</Th>
<Th xs="60" padding="0" />
</Tr>
</Thead>
@ -33,7 +30,7 @@ const { Dot, Actions } = require('../icons');
</Table>
```
#### Table > Footer
#### Footer
```jsx
const React = require('react');
const remcalc = require('remcalc');
@ -58,16 +55,13 @@ const { Dot, Actions } = require('../icons');
<Th xs="0" sm="160" left middle actionable>
<span>Created </span>
</Th>
<Th xs="0" sm="130" left middle actionable>
<span>Short ID </span>
</Th>
<Th xs="60" padding="0" />
</Tr>
</Tfoot>
</Table>
```
#### Table > Multiple Selection List
#### Multiple Selection List
```jsx
const React = require('react');
const remcalc = require('remcalc');
@ -92,9 +86,6 @@ const { Dot, Actions } = require('../icons');
<Th xs="0" sm="160" left middle actionable>
<span>Created </span>
</Th>
<Th xs="0" sm="130" left middle actionable>
<span>Short ID </span>
</Th>
<Th xs="60" padding="0" />
</Tr>
</Thead>
@ -106,7 +97,7 @@ const { Dot, Actions } = require('../icons');
</FormGroup>
</Td>
<Td middle left bold>
percona_high-ram-32_1_snapshot_1
percona-ram-32
</Td>
<Td middle left>
<span>
@ -122,9 +113,6 @@ const { Dot, Actions } = require('../icons');
<Td xs="0" sm="160" middle left>
about 2 months
</Td>
<Td xs="0" sm="130" middle left>
<code>2252839</code>
</Td>
<Td padding="0" center hasBorder="left">
<Actions />
</Td>
@ -136,7 +124,7 @@ const { Dot, Actions } = require('../icons');
</FormGroup>
</Td>
<Td middle left bold>
percona_high-ram-32_1_snapshot_2
percona-ram-32
</Td>
<Td middle left>
<span>
@ -152,9 +140,6 @@ const { Dot, Actions } = require('../icons');
<Td xs="0" sm="160" middle left>
about 1 hour
</Td>
<Td xs="0" sm="130" middle left>
<code>6739567</code>
</Td>
<Td padding="0" center hasBorder="left">
<Actions />
</Td>
@ -163,7 +148,7 @@ const { Dot, Actions } = require('../icons');
</Table>;
```
#### Table > Single Selection List
#### Single Selection List
```jsx
const React = require('react');
const remcalc = require('remcalc');
@ -185,9 +170,6 @@ const { Dot, Actions } = require('../icons');
<Th xs="0" sm="160" left middle actionable>
<span>Created </span>
</Th>
<Th xs="0" sm="130" left middle actionable>
<span>Short ID </span>
</Th>
</Tr>
</Thead>
<Tbody>
@ -198,7 +180,7 @@ const { Dot, Actions } = require('../icons');
</FormGroup>
</Td>
<Td middle left bold selected>
percona_high-ram-32_1_snapshot_1
percona-ram-32
</Td>
<Td middle left selected>
<span>
@ -214,9 +196,6 @@ const { Dot, Actions } = require('../icons');
<Td xs="0" sm="160" middle left selected>
about 2 months
</Td>
<Td xs="0" sm="130" middle left selected>
<code>2252839</code>
</Td>
</Tr>
<Tr>
<Td padding="0" paddingLeft={remcalc(12)} middle left>
@ -225,7 +204,7 @@ const { Dot, Actions } = require('../icons');
</FormGroup>
</Td>
<Td middle left bold>
percona_high-ram-32_1_snapshot_2
percona-ram-32
</Td>
<Td middle left>
<span>
@ -241,9 +220,6 @@ const { Dot, Actions } = require('../icons');
<Td xs="0" sm="160" middle left>
about 1 hour
</Td>
<Td xs="0" sm="130" middle left>
<code>6739567</code>
</Td>
</Tr>
</Tbody>
</Table>;

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

@ -1,100 +1,48 @@
Joyent's font is Libre Franklin, which is available to use at
[Google Fonts](https://fonts.google.com/specimen/Libre+Franklin).
The font sizes in the toolkit are based on an
[augmented fourth modular scale](http://www.modularscale.com/?15,24&px&1.414),
with base font size of **15px**.
### Headings
Headings are available from `h1` through to `h4`. If demand is shown for `h5`
and `h6`, these will be included in the toolkit.
To learn more about the correct usage of HTML headings, visit
[MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).
#### Heading 1
#### Large Type Scale
```jsx
const React = require('react');
const H1 = require('/').H1;
<H1>Inspire the lazy</H1>;
```
#### Heading 2
```jsx
const React = require('react');
const H2 = require('/').H2;
<H2>Inspire the lazy</H2>;
```
#### Heading 3
```jsx
const React = require('react');
const H3 = require('/').H3;
<H3>Inspire the lazy</H3>;
```
#### Heading 4
```jsx
const React = require('react');
const H4 = require('/').H4;
<H4>Inspire the lazy</H4>;
```
### Paragraph
```jsx
const React = require('react');
const P = require('/').P;
<P>
Joyent experts provide 360 degree support for modern application
architectures, including development frameworks, container orchestration
tools, and hybrid cloud infrastructures.
</P>;
```
### Small
If you need to display content that is less important that the main body text,
or where space is more constrained, you can use the `<small>` element. This will
reduce the text size to 13px.
```jsx
const React = require('react');
const Small = require('/').Small;
<Small>
Triton is 100% open source and designed to eliminate cloud provider lock-in.
With support for popular container management tools like Kubernetes, augmented
by our own open source project ContainerPilot, we are working with the
community to deliver simple to operate platform services that are open and
portable.
</Small>;
```
### Label
The `<label>` element is used for captions in the user interface and information
labels (i.e. text that is not continuous body text).
Read more about using the `<label>` element on the
[MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label).
```jsx
const React = require('react');
const Label = require('/').Label;
<Label>
Hybrid, Modern and Open, Triton is engineered to run the world’s largest cloud
native applications
</Label>;
const styles = {
color: "#979797",
marginBottom: '22px',
display: 'block',
marginTop: '6px',
padding: 0
};
<div>
<H1>H1 - Don’t say it, shout it</H1>
<Small style={styles}>
Libre Franklin Regular - 36px with 45px leading
</Small>
<H2>H2 - Breadcrumb? More like breadloaf</H2>
<Small style={styles}>
Libre Franklin Regular - 24px with 30px leading
</Small>
<H3>H3 - Your friendly neighbourhood workhorse</H3>
<Small style={styles}>
Libre Franklin Regular - 21px with 26px leading
</Small>
<H4>H4 - Bodies bigger brother</H4>
<Small style={styles}>
Libre Franklin Semibold - 15px with 24px leading
</Small>
<P>
P - Body copy
</P>
<Small style={styles}>
Libre Franklin Regular - 15px with 24px leading
</Small>
<Small> C - Caption text</Small>
<Small style={styles}>
Libre Franklin Regular - 13px with 18px leadings
</Small>
</div>
```

4
packages/ui-toolkit/src/text/index.js
View File

@ -1,3 +1,7 @@
/**
* Our large typographic scale is based on a modular scale based on 15px and 24px and the augmented fourth scale: http://www.modularscale.com/?15,24&px&1.414
*/
export { H1, H2, H3, H4, H5 } from './headings';
export { default as P } from './p';
export { default as Small } from './small';

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

@ -1,309 +1,156 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import { P, H2 } from '../text';
import { P, H3 } from '../text';
import is from 'styled-is';
import theme from './';
import { Margin } from 'styled-components-spacing';
// Function to convert hex format to a rgb color
function rgb2hex(rgb) {
rgb = rgb.match(
/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i
);
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)
: '';
}
const Box = styled.div`
width: ${remcalc(130)};
height: ${remcalc(48)};
background: ${props => props.hex};
width: 100%;
margin: auto;
text-align: center;
`;
const Data = styled.td`
padding: ${remcalc(18)} 0;
border-bottom: ${remcalc(1)} solid ${theme.grey};
max-width: ${remcalc(250)};
`;
const Table = styled.table`
/** */
width: 100%;
`;
const InnerBox = styled.div`
margin-top: ${remcalc(6)};
line-height: ${remcalc(24)};
font-size: ${remcalc(16)};
color: ${theme.text};
`;
const Preview = styled.div`
display: inline-block;
background: ${props => props.hex};
width: ${remcalc(96)};
height: ${remcalc(96)};
border: ${remcalc(1)} solid ${theme.grey};
box-shadow: 0 ${remcalc(2)} ${remcalc(1)} rgba(0, 0, 0, 0.05);
padding: 0 ${remcalc(60)};
box-sizing: border-box;
`;
const Paragraph = P.extend`
font-size: ${remcalc(13)};
margin: 0;
font-weight: bold;
color: ${props => props.theme.white};
width: ${remcalc(193)};
text-align: left;
${is('dark')`
color: ${props => props.theme.text};
`};
`;
const ColorName = styled(H2)`
/* trick prettier */
max-width: ${remcalc(100)};
const Code = styled.code`
font-size: ${remcalc(13)};
margin: 0;
color: ${props => props.theme.white};
${is('dark')`
color: ${props => props.theme.text};
`};
`;
const Color = ({ name, hex }) => (
<Box>
<Preview hex={hex} />
<InnerBox background={hex}>
<Paragraph>{hex.toUpperCase()}</Paragraph>
</InnerBox>
const List = styled.ul`
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
margin: 0;
height: ${remcalc(48)};
li {
padding: 0;
}
`;
const Color = ({ name, color, dark }) => (
<Box hex={color}>
<List>
<li>
<Paragraph dark={dark}>{name}</Paragraph>
</li>
<li>
<Code dark={dark}>{rgb2hex(color)}</Code>
</li>
<li>
<Code dark={dark}>{color}</Code>
</li>
</List>
</Box>
);
export default () => (
<Table>
<thead>
<tr>
<th />
<th>Default</th>
<th>Hover</th>
<th>Click</th>
<th>Disabled</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<Data>
<ColorName>Blue fill / blue text</ColorName>
</Data>
<Data>
<Color key="primary" name="primary" hex={theme.primary} />
</Data>
<Data>
<Color
key="primaryHover"
name="primaryHover"
hex={theme.primaryHover}
/>
</Data>
<Data>
<Color
key="primaryActive"
name="primaryActive"
hex={theme.primaryActive}
/>
</Data>
<Data>
<Color key="disabled" name="disabled" hex={theme.disabled} />
</Data>
<Data>
Fill for primary buttons, text anchors (including interactive parts of
the breadcrumb) and other UI components, whose priority or prominence
is emphasized with color.
</Data>
</tr>
<tr>
<Data>
<ColorName>Blue border</ColorName>
</Data>
<Data>
<Color
key="primaryActive"
name="primaryActive"
hex={theme.primaryActive}
/>
</Data>
<Data />
<Data />
<Data>
<Color key="disabled" name="disabled" hex={theme.disabled} />
</Data>
<Data>
Borders of primary buttons and other UI components, whose priority or
prominence is emphasized with color.
</Data>
</tr>
<tr>
<Data>
<ColorName>White fill</ColorName>
</Data>
<Data>
<Color key="white" name="white" hex={theme.white} />
</Data>
<Data>
<Color key="whiteHover" name="whiteHover" hex={theme.whiteHover} />
</Data>
<Data>
<Color key="whiteActive" name="whiteActive" hex={theme.whiteActive} />
</Data>
<Data>
<Color key="disabled" name="disabled" hex={theme.disabled} />
</Data>
<Data>
Fill for secondary buttons, inputs, dropdown menus, tables, service
and instance cards and other components that need to be distinguished
from the overall layout.
</Data>
</tr>
<tr>
<Data>
<ColorName>Grey border</ColorName>
</Data>
<Data>
<Color key="grey" name="grey" hex={theme.grey} />
</Data>
<Data />
<Data />
<Data />
<Data>Borders of white or grey UI components and dividers.</Data>
</tr>
<tr>
<Data>
<ColorName>Charcoal fill</ColorName>
</Data>
<Data>
<Color key="secondary" name="secondary" hex={theme.secondary} />
</Data>
<Data>
<Color
key="secondaryHover"
name="secondaryHover"
hex={theme.secondaryHover}
/>
</Data>
<Data>
<Color
key="secondaryActive"
name="secondaryActive"
hex={theme.secondaryActive}
/>
</Data>
<Data>
<Color key="disabled" name="disabled" hex={theme.disabled} />
</Data>
<Data>Fill for topology components.</Data>
</tr>
<tr>
<Data>
<ColorName>Charcoal border</ColorName>
</Data>
<Data>
<Color
key="secondaryActive"
name="secondaryActive"
hex={theme.secondaryActive}
/>
</Data>
<Data />
<Data />
<Data>
<Color
key="textDisabled"
name="textDisabled"
hex={theme.textDisabled}
/>
</Data>
<Data>Border for topology components.</Data>
</tr>
<tr>
<Data>
<ColorName>Text</ColorName>
</Data>
<Data>
<Color key="text" name="text" hex={theme.text} />
</Data>
<Data />
<Data />
<Data>
<Color
key="textDisabled"
name="textDisabled"
hex={theme.textDisabled}
/>
</Data>
<Data>Any text.</Data>
</tr>
<tr>
<Data>
<ColorName>Example Text</ColorName>
</Data>
<Data>
<Color key="placeholder" name="placeholder" hex={theme.placeholder} />
</Data>
<Data />
<Data />
<Data />
<Data>Input placeholder text.</Data>
</tr>
<tr>
<Data>
<ColorName>Red fill / red text</ColorName>
</Data>
<Data>
<Color key="red" name="red" hex={theme.red} />
</Data>
<Data />
<Data />
<Data />
<Data>Errors</Data>
</tr>
<tr>
<Data>
<ColorName>Red border</ColorName>
</Data>
<Data>
<Color key="redDark" name="redDark" hex={theme.redDark} />
</Data>
<Data />
<Data />
<Data />
<Data>Complements red fill.</Data>
</tr>
<tr>
<Data>
<ColorName>Green fill / green text</ColorName>
</Data>
<Data>
<Color key="redDark" name="greenDark" hex={theme.greenDark} />
</Data>
<Data />
<Data />
<Data />
<Data>Confirmations and instructional components.</Data>
</tr>
<tr>
<Data>
<ColorName>Green border</ColorName>
</Data>
<Data>
<Color key="green" name="green" hex={theme.green} />
</Data>
<Data />
<Data />
<Data />
<Data>Confirmations and instructional components.</Data>
</tr>
<tr>
<Data>
<ColorName>Orange Fill</ColorName>
</Data>
<Data>
<Color key="orange" name="orange" hex={theme.orange} />
</Data>
<Data />
<Data />
<Data />
<Data>To notify users of things that require their attention.</Data>
</tr>
<tr>
<Data>
<ColorName>Orange border / orange text</ColorName>
</Data>
<Data>
<Color key="orangeDark" name="orangeDark" hex={theme.orangeDark} />
</Data>
<Data />
<Data />
<Data />
<Data>Complements orange fill.</Data>
</tr>
</tbody>
</Table>
);
export default () => [
<div>
<H3>Action Colors</H3>
<P>
This palette is Tritons ‘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
components.
</P>
</div>,
<Margin top={4} bottom={2}>
<Color
key="primaryHover"
name="Blue 1 - Aqua Marine"
color={theme.primary}
/>
<Color
key="primaryActive"
name="Blue 2 - Lost in Space"
color={theme.primaryActive}
/>
</Margin>,
<Margin bottom={2}>
<Color key="green" name="Green 1 - Confirmaton" color={theme.green} />
<Color
key="greenDark"
name="Green 2 - Confirmation Outline"
color={theme.greenDark}
/>
</Margin>,
<Margin bottom={2}>
<Color key="orange" name="Orange 1 - Warning" color={theme.orange} />
<Color
key="orangeDark"
name="Orange 2 - Warning Outline"
color={theme.orangeDark}
/>
</Margin>,
<Margin bottom={5}>
<Color key="red" name="Red 1 - Error" color={theme.red} />
<Color key="redDark" name="Red 2 - Error Outline" color={theme.redDark} />
</Margin>,
<H3>Greys</H3>,
<P>
Colors on this page aim to give Triton a sense of depth and to offer
contrast between potentially similar components. They allow us to make
certain components look clickable, whilst making others appear disabled or
static.
</P>,
<Margin top={4}>
<Color
dark
key="disabled"
name="Grey 1 - Background"
color={theme.disabled}
/>
<Color
dark
key="whiteActive"
name="Grey 2 - Faded"
color={theme.whiteActive}
/>
<Color dark key="grey" name="Grey 3 - Outline" color={theme.grey} />
<Color key="greyDark" name="Grey 4 - Disabled" color={theme.greyDark} />
<Color key="text" name="Grey 5 - Text" color={theme.text} />
<Color
key="greyDarker"
name="Grey 6 - Charcoal"
color={theme.greyDarker}
/>
</Margin>
];

4
packages/ui-toolkit/src/theme/index.js
View File

@ -35,7 +35,9 @@ const white = {
const grey = {
grey: 'rgb(216, 216, 216)',
greyTransparent: 'rgba(73, 73, 73, 0.8)',
greyLight: 'rgb(189, 189, 189)'
greyLight: 'rgb(189, 189, 189)',
greyDark: 'rgb(151, 151, 151)',
greyDarker: 'rgb(052, 052, 052)'
};
const green = {

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

@ -18,15 +18,77 @@ module.exports = {
})
})
}),
title: 'UI Toolkit',
styleguideComponents: {
StyleGuideRenderer: path.join(__dirname, 'src/styleguide/renderer'),
TableOfContentsRenderer: path.join(__dirname, 'src/styleguide/sidebar'),
ReactComponentRenderer: path.join(__dirname, 'src/styleguide/component'),
PlaygroundRenderer: path.join(__dirname, 'src/styleguide/playground'),
TabButtonRenderer: path.join(__dirname, 'src/styleguide/tabs'),
SectionHeadingRenderer: path.join(
__dirname,
'src/styleguide/sectionHeading'
),
SectionRenderer: path.join(__dirname, 'src/styleguide/section')
},
title: 'Design System',
showCode: true,
sections: [
{
name: 'Get Started',
name: 'Base Language',
sections: [
{
name: 'Overview',
content: 'src/overview.md'
name: 'Color Palette',
description:
'Triton’s color palette aim to accessible and clear, whilst making distinctions between elements that are alive and elements that are static. We’ve split our palette into two sections; Action colors and Greys. ',
content: 'src/theme/colors.md'
},
{
name: 'Typography',
content: 'src/text/Readme.md'
}
]
},
{
name: 'Basic Components',
components: () => [
'src/button/index.js',
'src/form/input.js',
'src/form/radio.js',
'src/form/select.js',
'src/form/checkbox.js',
'src/form/toggle.js',
'src/card/card.js',
'src/tooltip/index.js',
'src/popover/index.js'
]
},
{
name: 'Compound Components',
components: () => [
'src/table/index.js',
'src/header/index.js',
'src/message/index.js',
'src/section-list/index.js',
'src/breadcrumb/index.js',
'src/progress-bar/index.js'
]
},
{
name: 'Assets',
sections: [
{
name: 'Section Iconography',
content: 'src/icons/section.md'
},
{
name: 'Functional Iconography',
content: 'src/icons/functional.md'
}
]
},
{
name: 'Developer',
sections: [
{
name: 'Download',
content: 'src/download.md'
@ -35,52 +97,11 @@ module.exports = {
name: 'Contribute',
content: 'src/contribute.md'
},
{
name: 'Support',
content: 'src/support.md'
},
{
name: 'FAQ',
content: 'src/faq.md'
}
]
},
{
name: 'Base',
sections: [
{
name: 'Typography',
content: 'src/text/Readme.md'
},
{
name: 'Colors',
content: 'src/theme/colors.md'
},
{
name: 'Icons',
content: 'src/icons/Readme.md'
}
]
},
{
name: 'Components',
components: () => [
'src/breadcrumb/index.js',
'src/button/index.js',
'src/card/card.js',
'src/form/checkbox.js',
'src/header/index.js',
'src/form/input.js',
'src/message/index.js',
'src/progress-bar/index.js',
'src/popover/index.js',
'src/form/radio.js',
'src/section-list/index.js',
'src/form/select.js',
'src/table/index.js',
'src/form/toggle.js',
'src/tooltip/index.js'
]
}
],
theme: {

BIN
packages/ui-toolkit/test/__image_snapshots__/__diff_output__/cards-spec-js-visual-regressions-card-headed-1-diff.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 91 KiB

After

Width:  |  Height:  |  Size: 25 KiB

BIN
packages/ui-toolkit/test/__image_snapshots__/__diff_output__/cards-spec-js-visual-regressions-card-headed-collapsed-1-diff.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

4
prototypes/cra-boilerplate/package.json
View File

@ -26,7 +26,7 @@
"react-scripts": "1.0.17",
"redux": "^3.7.2",
"redux-form": "^7.1.2",
"styled-components": "^2.2.3"
"styled-components": "^2.3.0"
},
"devDependencies": {
"babel-preset-joyent-portal": "^3.3.3",
@ -34,7 +34,7 @@
"eslint-config-joyent-portal": "^3.2.0",
"joyent-react-scripts": "^3.1.1",
"prettier": "^1.8.2",
"stylelint": "^8.2.0",
"stylelint": "^8.4.0",
"stylelint-config-joyent-portal": "^2.0.1"
}
}

4
prototypes/create-instance-icons/package.json
View File

@ -37,7 +37,7 @@
"redux": "^3.7.2",
"redux-form": "^7.1.2",
"remcalc": "^1.0.9",
"styled-components": "^2.2.3",
"styled-components": "^2.3.0",
"styled-components-spacing": "^2.1.3",
"styled-is": "^1.1.0",
"unitcalc": "^1.1.1"
@ -69,7 +69,7 @@
"react-scripts": "^1.0.17",
"react-test-renderer": "^16.1.1",
"redrun": "^5.10.0",
"stylelint": "^8.2.0",
"stylelint": "^8.4.0",
"stylelint-config-joyent-portal": "^2.0.1"
}
}

4
prototypes/create-instance/package.json
View File

@ -34,7 +34,7 @@
"redux": "^3.7.2",
"redux-form": "^7.1.2",
"remcalc": "^1.0.9",
"styled-components": "^2.2.3",
"styled-components": "^2.3.0",
"styled-is": "^1.1.0",
"unitcalc": "^1.1.1"
},
@ -63,7 +63,7 @@
"react-scripts": "^1.0.17",
"react-test-renderer": "^16.1.1",
"redrun": "^5.10.0",
"stylelint": "^8.2.0",
"stylelint": "^8.4.0",
"stylelint-config-joyent-portal": "^2.0.1"
}
}

725
yarn.lock
View File

File diff suppressed because it is too large Load Diff