diff --git a/packages/icons/package.json b/packages/icons/package.json index c3e32f31..caaa2b12 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -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", diff --git a/packages/my-joy-beta/package.json b/packages/my-joy-beta/package.json index baf8945e..d4fb4b20 100644 --- a/packages/my-joy-beta/package.json +++ b/packages/my-joy-beta/package.json @@ -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" } } diff --git a/packages/ui-toolkit/package.json b/packages/ui-toolkit/package.json index e046ffc1..10690b47 100644 --- a/packages/ui-toolkit/package.json +++ b/packages/ui-toolkit/package.json @@ -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" }, diff --git a/packages/ui-toolkit/src/button/usage.md b/packages/ui-toolkit/src/button/Readme.md similarity index 87% rename from packages/ui-toolkit/src/button/usage.md rename to packages/ui-toolkit/src/button/Readme.md index a1a76c77..9e91b298 100644 --- a/packages/ui-toolkit/src/button/usage.md +++ b/packages/ui-toolkit/src/button/Readme.md @@ -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('./'); - - ; ``` -#### 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('./'); - - ; ``` -#### Button > Small +#### 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('./'); + + + +; +``` + +#### 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('./'); ; ``` -#### Button > Loading +#### Loading Button ```jsx const React = require('react'); @@ -53,7 +62,7 @@ const { default: Button } = require('./'); ; ``` -#### 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 diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js index c56105f4..ecc44108 100644 --- a/packages/ui-toolkit/src/button/index.js +++ b/packages/ui-toolkit/src/button/index.js @@ -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); diff --git a/packages/ui-toolkit/src/card/demo.md b/packages/ui-toolkit/src/card/demo.md index 24d2a529..407e6011 100644 --- a/packages/ui-toolkit/src/card/demo.md +++ b/packages/ui-toolkit/src/card/demo.md @@ -28,10 +28,10 @@ const { Instances, Actions } = require('../icons');
- +

Nginx

- +

4 of 4 instances

@@ -59,10 +59,10 @@ const { Instances, Health, Actions } = require('../icons');
- +

Nginx

- +

4 of 4 instances

@@ -107,10 +107,10 @@ const { Instances, Actions } = require('../icons');
- +

Nginx

- +

4 of 4 instances

@@ -147,10 +147,10 @@ const { Actions, Instances, Health } = require('../icons');
- +

Nginx

- +
@@ -169,10 +169,10 @@ const { Actions, Instances, Health } = require('../icons');
- +

Nginx

- +

4 of 4 instances

@@ -227,10 +227,10 @@ const { Actions } = require('../icons');
- +

Nginx

- +

1 Instance

@@ -399,16 +399,22 @@ const { Health, Actions, DataCenter } = require('../icons');
- +

Nginx

- -

+ +

Healthy

- -

+ +

eu-ams-1

diff --git a/packages/ui-toolkit/src/form/usage-select.md b/packages/ui-toolkit/src/form/usage-select.md index ef50f89b..4b9e844b 100644 --- a/packages/ui-toolkit/src/form/usage-select.md +++ b/packages/ui-toolkit/src/form/usage-select.md @@ -1,16 +1,19 @@ ```jsx const React = require('react'); const { default: Select } = require('./select'); +const { default: FormGroup } = require('./group'); -; + + + ``` #### Select > Disabled diff --git a/packages/ui-toolkit/src/icons/Readme.md b/packages/ui-toolkit/src/icons/Readme.md deleted file mode 100644 index 9d0b962b..00000000 --- a/packages/ui-toolkit/src/icons/Readme.md +++ /dev/null @@ -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('.'); - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -; -``` diff --git a/packages/ui-toolkit/src/icons/functional.md b/packages/ui-toolkit/src/icons/functional.md new file mode 100644 index 00000000..cdf2c1d3 --- /dev/null +++ b/packages/ui-toolkit/src/icons/functional.md @@ -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('.'); + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +``` diff --git a/packages/ui-toolkit/src/icons/icons.js b/packages/ui-toolkit/src/icons/icons.js index fe3d26d3..cad142f8 100644 --- a/packages/ui-toolkit/src/icons/icons.js +++ b/packages/ui-toolkit/src/icons/icons.js @@ -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; diff --git a/packages/ui-toolkit/src/icons/section.md b/packages/ui-toolkit/src/icons/section.md new file mode 100644 index 00000000..8e31c8ca --- /dev/null +++ b/packages/ui-toolkit/src/icons/section.md @@ -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('.'); + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +; +``` diff --git a/packages/ui-toolkit/src/styleguide/component.js b/packages/ui-toolkit/src/styleguide/component.js new file mode 100644 index 00000000..89b3ea9b --- /dev/null +++ b/packages/ui-toolkit/src/styleguide/component.js @@ -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 ( + +
+

{heading.props.children}

+ {description && + description.props && ( +

{description.props.text}

+ )} +
+
+ {tabButtons} + {tabBody} + {examples} +
+
+ ); +}; diff --git a/packages/ui-toolkit/src/styleguide/playground.js b/packages/ui-toolkit/src/styleguide/playground.js new file mode 100644 index 00000000..88045730 --- /dev/null +++ b/packages/ui-toolkit/src/styleguide/playground.js @@ -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 ( + + + + + + + + + + + + {preview} + + {tabBody} + + ); + } +} + +export default Playground; diff --git a/packages/ui-toolkit/src/styleguide/renderer.js b/packages/ui-toolkit/src/styleguide/renderer.js new file mode 100644 index 00000000..4626da05 --- /dev/null +++ b/packages/ui-toolkit/src/styleguide/renderer.js @@ -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 +}) => ( + +
+ +
+ + + +
+
+ +
+ {hasSidebar && ( + + {toc} + + )} + + {children} + +
+
+
+
+); + +export default StyleGuideRenderer; diff --git a/packages/ui-toolkit/src/styleguide/section.js b/packages/ui-toolkit/src/styleguide/section.js new file mode 100644 index 00000000..2f2def2d --- /dev/null +++ b/packages/ui-toolkit/src/styleguide/section.js @@ -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 ( + + {name && + depth !== 1 && ( +
+

{name}

+ {description && ( +

{description}

+ )} +
+ )} + + {content} + {components} + {sections} + +
+ ); +}; diff --git a/packages/ui-toolkit/src/styleguide/sectionHeading.js b/packages/ui-toolkit/src/styleguide/sectionHeading.js new file mode 100644 index 00000000..2e509901 --- /dev/null +++ b/packages/ui-toolkit/src/styleguide/sectionHeading.js @@ -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 : ( + + {children} + + ) + + + return Heading +} + +const Heading = Styled(styles)(HeadingRenderer); + +export default ({ + classes, + children, + toolbar, + id, + href, + depth, + deprecated +}) => { + const headingLevel = Math.min(6, depth); + + return ( +
+ + {children} + + {/*
{toolbar}
*/} +
+ ); +}; diff --git a/packages/ui-toolkit/src/styleguide/sidebar.js b/packages/ui-toolkit/src/styleguide/sidebar.js new file mode 100644 index 00000000..82c41878 --- /dev/null +++ b/packages/ui-toolkit/src/styleguide/sidebar.js @@ -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 ( + + {items.map(({ heading, name, slug, content }) => ( +
  • +
    {name}
    + {content} +
  • + ))} +
    + ); +}; diff --git a/packages/ui-toolkit/src/styleguide/tabs.js b/packages/ui-toolkit/src/styleguide/tabs.js new file mode 100644 index 00000000..7c425354 --- /dev/null +++ b/packages/ui-toolkit/src/styleguide/tabs.js @@ -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 ( + + ); +} + +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); diff --git a/packages/ui-toolkit/src/styleguide/wrapper.js b/packages/ui-toolkit/src/styleguide/wrapper.js index f5a3e603..ddcc6574 100644 --- a/packages/ui-toolkit/src/styleguide/wrapper.js +++ b/packages/ui-toolkit/src/styleguide/wrapper.js @@ -14,7 +14,9 @@ const StyledBase = Base.extend` export default ({ children }) => ( - {children} + + {children} + ); diff --git a/packages/ui-toolkit/src/table/usage.md b/packages/ui-toolkit/src/table/usage.md index af0c9605..b9b38af6 100644 --- a/packages/ui-toolkit/src/table/usage.md +++ b/packages/ui-toolkit/src/table/usage.md @@ -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'); Created - - Short ID - @@ -33,7 +30,7 @@ const { Dot, Actions } = require('../icons'); ``` - #### Table > Footer + #### Footer ```jsx const React = require('react'); const remcalc = require('remcalc'); @@ -58,16 +55,13 @@ const { Dot, Actions } = require('../icons'); Created - - Short ID - ``` -#### 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'); Created - - Short ID - @@ -106,7 +97,7 @@ const { Dot, Actions } = require('../icons'); - percona_high-ram-32_1_snapshot_1 + percona-ram-32 @@ -122,9 +113,6 @@ const { Dot, Actions } = require('../icons'); about 2 months - - 2252839 - @@ -136,7 +124,7 @@ const { Dot, Actions } = require('../icons'); - percona_high-ram-32_1_snapshot_2 + percona-ram-32 @@ -152,9 +140,6 @@ const { Dot, Actions } = require('../icons'); about 1 hour - - 6739567 - @@ -163,7 +148,7 @@ const { Dot, Actions } = require('../icons'); ; ``` -#### 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'); Created - - Short ID - @@ -198,7 +180,7 @@ const { Dot, Actions } = require('../icons'); - percona_high-ram-32_1_snapshot_1 + percona-ram-32 @@ -214,9 +196,6 @@ const { Dot, Actions } = require('../icons'); about 2 months - - 2252839 - @@ -225,7 +204,7 @@ const { Dot, Actions } = require('../icons'); - percona_high-ram-32_1_snapshot_2 + percona-ram-32 @@ -241,9 +220,6 @@ const { Dot, Actions } = require('../icons'); about 1 hour - - 6739567 - ; diff --git a/packages/ui-toolkit/src/text/Readme.md b/packages/ui-toolkit/src/text/Readme.md index 48880cfd..72c70479 100644 --- a/packages/ui-toolkit/src/text/Readme.md +++ b/packages/ui-toolkit/src/text/Readme.md @@ -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; - -

    Inspire the lazy

    ; -``` - -#### Heading 2 - -```jsx -const React = require('react'); const H2 = require('/').H2; - -

    Inspire the lazy

    ; -``` - -#### Heading 3 - -```jsx -const React = require('react'); const H3 = require('/').H3; - -

    Inspire the lazy

    ; -``` - -#### Heading 4 - -```jsx -const React = require('react'); const H4 = require('/').H4; - -

    Inspire the lazy

    ; -``` - -### Paragraph - -```jsx -const React = require('react'); const P = require('/').P; - -

    - Joyent experts provide 360 degree support for modern application - architectures, including development frameworks, container orchestration - tools, and hybrid cloud infrastructures. -

    ; -``` - -### 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 `` element. This will -reduce the text size to 13px. - -```jsx -const React = require('react'); const Small = require('/').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. -; -``` - -### Label - -The `