fix(ui-toolkit): header, button, and checkbox. new toggle
This commit is contained in:
Sara Vieira
Sérgio Ramos
parent
6f226b5d7d
commit
bba8c99ee6
|
|
@ -1,6 +1,10 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
|
||||
@import url('https://fonts.googleapis.com/css?family=Libre+Franklin');
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body .rsg--sidebar-4 {
|
||||
padding: 36px 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,14 +45,14 @@
|
|||
"pascal-case": "^2.0.1",
|
||||
"prop-types": "^15.6.0",
|
||||
"react-bundle": "^1.0.4",
|
||||
"react-input-range": "^1.2.1",
|
||||
"react-input-range": "^1.2.2",
|
||||
"react-popper": "^0.7.4",
|
||||
"react-responsive": "^3.0.0",
|
||||
"react-styled-flexboxgrid": "^2.1.1",
|
||||
"redrun": "^5.10.0",
|
||||
"remcalc": "^1.0.9",
|
||||
"rnd-id": "^2.0.0",
|
||||
"styled-components": "^2.2.3",
|
||||
"styled-components": "^2.2.4",
|
||||
"styled-is": "^1.1.0",
|
||||
"unitcalc": "^1.1.1"
|
||||
},
|
||||
|
|
@ -64,8 +64,8 @@
|
|||
"babel-plugin-transform-es3-property-literals": "^6.22.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-preset-joyent-portal": "^3.3.3",
|
||||
"codemirror": "^5.31.0",
|
||||
"eslint": "^4.11.0",
|
||||
"codemirror": "^5.32.0",
|
||||
"eslint": "^4.12.1",
|
||||
"eslint-config-joyent-portal": "^3.2.0",
|
||||
"http-server": "^0.10.0",
|
||||
"jest": "^21.2.1",
|
||||
|
|
@ -77,26 +77,26 @@
|
|||
"joyent-react-scripts": "^3.1.1",
|
||||
"lodash.isboolean": "^3.0.3",
|
||||
"navalia": "^1.2.0",
|
||||
"react": "^16.1.1",
|
||||
"react": "^16.2.0",
|
||||
"react-docgen": "^3.0.0-beta8",
|
||||
"react-docgen-displayname-handler": "^1.0.1",
|
||||
"react-dom": "^16.1.1",
|
||||
"react-dom": "^16.2.0",
|
||||
"react-redux": "^5.0.6",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-styleguidist": "^6.0.33",
|
||||
"react-test-renderer": "^16.1.1",
|
||||
"react-test-renderer": "^16.2.0",
|
||||
"redux": "^3.7.2",
|
||||
"redux-form": "^7.1.2",
|
||||
"redux-form": "^7.2.0",
|
||||
"serve-static": "^1.13.1",
|
||||
"stylelint": "^8.2.0",
|
||||
"stylelint": "^8.3.1",
|
||||
"stylelint-config-joyent-portal": "^2.0.1",
|
||||
"webpack": "^3.8.1"
|
||||
"webpack": "^3.10.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"joyent-manifest-editor": "^1.4.0",
|
||||
"react": "^16.1.1",
|
||||
"react-dom": "^16.1.1",
|
||||
"react": "^16.2.0",
|
||||
"react-dom": "^16.2.0",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"redux-form": "^7.1.2"
|
||||
"redux-form": "^7.2.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const style = css`
|
|||
min-width: ${remcalc(120)};
|
||||
margin-bottom: ${remcalc(8)};
|
||||
margin-top: ${remcalc(8)};
|
||||
padding: ${remcalc(13)} ${remcalc(18)};
|
||||
padding: ${remcalc(15)} ${remcalc(18)};
|
||||
position: relative;
|
||||
|
||||
${typography.normal};
|
||||
|
|
@ -182,13 +182,16 @@ const style = css`
|
|||
`};
|
||||
|
||||
${is('small')`
|
||||
padding: ${remcalc(14)} ${remcalc(14)};
|
||||
min-width: ${remcalc(48)};
|
||||
padding: ${remcalc(9)} ${remcalc(18)};
|
||||
font-size: ${remcalc(13)};
|
||||
min-width: ${remcalc(0)};
|
||||
`};
|
||||
|
||||
${is('icon')`
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-width: ${remcalc(0)};
|
||||
|
||||
|
||||
& svg + span {
|
||||
margin-left: ${remcalc(12)};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
#### Button > Primary
|
||||
Primary button to be used once per page. Only use to indicate main action per pattern.
|
||||
Min. width: 120px
|
||||
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const { default: Button } = require('./');
|
||||
|
|
@ -5,11 +9,13 @@ const { default: Button } = require('./');
|
|||
<span>
|
||||
<Button>Inspire the lazy</Button>
|
||||
<span> </span>
|
||||
<Button href="#1">Inspire the lazy (anchor)</Button>
|
||||
<Button disabled>Inspire the lazy</Button>
|
||||
</span>;
|
||||
```
|
||||
|
||||
#### Button > Secondary
|
||||
Secondary buttons can be used freely to indicate other actions on patterns.
|
||||
Min. width: 120px
|
||||
|
||||
```jsx
|
||||
const React = require('react');
|
||||
|
|
@ -18,43 +24,19 @@ const { default: Button } = require('./');
|
|||
<span>
|
||||
<Button secondary>Inspire the brave</Button>
|
||||
<span> </span>
|
||||
<Button href="#2" secondary>
|
||||
Inspire the brave (anchor)
|
||||
</Button>
|
||||
<Button secondary disabled>Inspire the brave</Button>
|
||||
</span>;
|
||||
```
|
||||
|
||||
#### Button > Tertiary
|
||||
#### Button > Small
|
||||
Small buttons are supporters of the secondary button. They can be used within cluttered or complex patterns to free up space.
|
||||
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const { default: Button } = require('./');
|
||||
|
||||
<span>
|
||||
<Button tertiary>Inspire the tertiary</Button>
|
||||
<span> </span>
|
||||
<Button href="#3" tertiary>
|
||||
Inspire the tertiary (anchor)
|
||||
</Button>
|
||||
<span> </span>
|
||||
<Button tertiary selected>
|
||||
Inspire the tertiary
|
||||
</Button>
|
||||
</span>;
|
||||
```
|
||||
|
||||
#### Button > Disabled
|
||||
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const { default: Button } = require('./');
|
||||
|
||||
<span>
|
||||
<Button disabled>Inspire the liars</Button>
|
||||
<span> </span>
|
||||
<Button href="#4" disabled>
|
||||
Inspire the liars (anchor)
|
||||
</Button>
|
||||
<Button secondary small>Inspire the brave</Button>
|
||||
</span>;
|
||||
```
|
||||
|
||||
|
|
@ -70,3 +52,85 @@ const { default: Button } = require('./');
|
|||
</Button>
|
||||
</span>;
|
||||
```
|
||||
|
||||
#### Button > 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
|
||||
const React = require('react');
|
||||
const { default: Button } = require('./');
|
||||
const { Actions } = require('../icons');
|
||||
<span>
|
||||
<Button secondary icon rect>
|
||||
<Actions />
|
||||
</Button>
|
||||
<Button secondary icon rect disabled>
|
||||
<Actions />
|
||||
</Button>
|
||||
</span>
|
||||
```
|
||||
|
||||
#### Primary
|
||||
|
||||
Primary anchor is a type of a link that sits outside the body text.
|
||||
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const Anchor = require('../text').Anchor;
|
||||
|
||||
<Anchor href="https://joyent.com">Inspire the lazy</Anchor>
|
||||
```
|
||||
|
||||
#### Reversed
|
||||
|
||||
Reversed anchors is used on dark backgrounds, where a default anchor would not
|
||||
provide enough contrast.
|
||||
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const Anchor = require('../text').Anchor;
|
||||
|
||||
<span
|
||||
style={{
|
||||
'background-color': '#3B46CC',
|
||||
height: 80,
|
||||
width: 250,
|
||||
display: 'flex',
|
||||
'align-items': 'center',
|
||||
'justify-content': 'center'
|
||||
}}
|
||||
>
|
||||
<Anchor href="https://joyent.com" reversed>
|
||||
Inspire the lazy secondary
|
||||
</Anchor>
|
||||
</span>;
|
||||
```
|
||||
|
||||
#### In text anchor
|
||||
|
||||
In-paragraph anchor is a link that sits inside a text components. The default
|
||||
state does not have an underline. The underline appears on hover and click.
|
||||
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const Anchor = require('../text').Anchor;
|
||||
|
||||
<p>
|
||||
Body text. Crack that whip. Give the past a slip. Step on a crack. Break your
|
||||
momma's back. When a problem comes along.You must whip it.
|
||||
<Anchor href="#">Learn More</Anchor>
|
||||
</p>;
|
||||
```
|
||||
|
||||
#### Disabled
|
||||
|
||||
Disabled anchors cannot be actioned and the cursor is disabled.
|
||||
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const Anchor = require('../text').Anchor;
|
||||
|
||||
<Anchor disabled href="https://joyent.com">
|
||||
Inspire the lazy disabled
|
||||
</Anchor>;
|
||||
```
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import styled from 'styled-components';
|
|||
import { Broadcast, Subscriber } from 'joy-react-broadcast';
|
||||
import { Input } from 'normalized-styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import is from 'styled-is';
|
||||
import is, { isNot } from 'styled-is';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
import BaseInput from './input';
|
||||
|
|
@ -19,13 +19,19 @@ const StyledInput = Input.extend`
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
${isNot('error', 'warning', 'success')`
|
||||
&:checked + label {
|
||||
border-color: ${props => props.theme.primary};
|
||||
}
|
||||
|
||||
&:selected + label {
|
||||
border-color: ${props => props.theme.primary};
|
||||
}
|
||||
`};
|
||||
|
||||
&:disabled + label {
|
||||
background-color: rgb(249, 249, 249);
|
||||
}
|
||||
|
||||
&:disabled + label::after {
|
||||
opacity: 0.3;
|
||||
}
|
||||
`;
|
||||
|
||||
const Label = styled.label`
|
||||
|
|
@ -108,6 +114,14 @@ const InnerContainer = styled.div`
|
|||
height: ${remcalc(18)};
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
${isNot('noMargin')`
|
||||
margin-bottom: ${remcalc(12)};
|
||||
`}
|
||||
`;
|
||||
|
||||
const Container = styled.div`
|
||||
margin-bottom: ${remcalc(12)};
|
||||
margin-left: ${remcalc(12)};
|
||||
`;
|
||||
|
||||
const ToggleBase = ({ container = null, type = 'radio' }) =>
|
||||
|
|
@ -132,7 +146,7 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
|
|||
(rest.value === true || rest.checked === true);
|
||||
|
||||
const toggle = (
|
||||
<InnerContainer {...types} type={type}>
|
||||
<InnerContainer {...types} type={type} {...rest}>
|
||||
<StyledInput
|
||||
{...rest}
|
||||
id={newValue.id}
|
||||
|
|
@ -152,7 +166,7 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
|
|||
const el = OuterContainer ? (
|
||||
<OuterContainer>
|
||||
{toggle}
|
||||
{children}
|
||||
<Container>{children}</Container>
|
||||
</OuterContainer>
|
||||
) : (
|
||||
toggle
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { Subscriber } from 'joy-react-broadcast';
|
|||
import is from 'styled-is';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import Baseline from '../baseline';
|
||||
import Label from '../label';
|
||||
|
|
@ -22,6 +23,10 @@ const StyledLabel = Label.extend`
|
|||
${is('success')`
|
||||
color: ${props => props.theme.green};
|
||||
`};
|
||||
|
||||
font-size: ${remcalc(13)};
|
||||
float: none;
|
||||
margin-left: ${remcalc(28)};
|
||||
`;
|
||||
|
||||
const Meta = props => {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import styled from 'styled-components';
|
||||
import React from 'react';
|
||||
import remcalc from 'remcalc';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import BaseToggle from './base/toggle';
|
||||
|
|
@ -22,12 +21,6 @@ const Li = styled.li`
|
|||
const Ul = styled.ul`
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-bottom: ${remcalc(8)};
|
||||
|
||||
+ label {
|
||||
margin-left: ${remcalc(26)};
|
||||
font-size: ${remcalc(13)};
|
||||
}
|
||||
`;
|
||||
|
||||
const RadioItem = BaseInput(({ children, id, ...rest }) => (
|
||||
|
|
|
|||
|
|
@ -1,146 +1,140 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Input } from 'normalized-styled-components';
|
||||
import { Subscriber } from 'joy-react-broadcast';
|
||||
import remcalc from 'remcalc';
|
||||
import unitcalc from 'unitcalc';
|
||||
import rndId from 'rnd-id';
|
||||
import Label from './label';
|
||||
import is from 'styled-is';
|
||||
|
||||
import { border, borderRadius } from '../boxes';
|
||||
import Baseline from '../baseline';
|
||||
import BaseInput from './base/input';
|
||||
import typography from '../typography';
|
||||
|
||||
const StyledInput = Input.extend`
|
||||
display: none;
|
||||
|
||||
&:checked + label {
|
||||
color: ${props => props.theme.secondary};
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:selected + label {
|
||||
color: ${props => props.theme.secondary};
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:disabled + label {
|
||||
color: ${props => props.theme.grey};
|
||||
|
||||
& + .background {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Label = styled.label`
|
||||
${typography.normal};
|
||||
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: ${props => props.theme.text};
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
${is('error')`
|
||||
border-color: ${props => props.theme.redDark}
|
||||
`};
|
||||
|
||||
${is('warning')`
|
||||
border-color: ${props => props.theme.orangeDark}
|
||||
`};
|
||||
|
||||
${is('success')`
|
||||
border-color: ${props => props.theme.greenDark}
|
||||
`};
|
||||
|
||||
&:hover {
|
||||
color: ${props => props.theme.secondaryHover};
|
||||
}
|
||||
`;
|
||||
|
||||
const InputContainer = styled.div`
|
||||
position: relative;
|
||||
vertical-align: text-bottom;
|
||||
width: ${unitcalc(20)};
|
||||
height: ${unitcalc(8)};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const Li = BaseInput(styled.li`
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
box-sizing: border-box;
|
||||
`);
|
||||
const Input = styled.input`
|
||||
display: none;
|
||||
|
||||
const Background = styled.span`
|
||||
border-right: ${border.unchecked};
|
||||
background-color: ${props => props.theme.white};
|
||||
display: block;
|
||||
border-radius: ${borderRadius};
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
transition: ${props => props.theme.transition};
|
||||
border: ${props => `${remcalc(1)} solid ${props.theme.grey}`};
|
||||
top: ${remcalc(-1)};
|
||||
`;
|
||||
&:checked + label {
|
||||
background: #3B46CC;
|
||||
border: ${remcalc(1)} solid ${props => props.theme.primary};
|
||||
|
||||
const Ul = styled.ul`
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: ${remcalc(48)};
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
background-color: ${props => props.theme.disabled};
|
||||
border-radius: ${borderRadius};
|
||||
border: ${border.unchecked};
|
||||
position: relative;
|
||||
margin-top: ${unitcalc(1)};
|
||||
|
||||
li:first-of-type {
|
||||
input + label + .background {
|
||||
transform: translateX(calc(100% - ${remcalc(3)}));
|
||||
&:after {
|
||||
left: 50%;
|
||||
box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.primary};
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
&:after {
|
||||
margin-left: -0${remcalc(12)}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
input:checked + label + .background {
|
||||
transform: translateX(${remcalc(-1)});
|
||||
const InputLabel = styled.label`
|
||||
outline: 0;
|
||||
display: block;
|
||||
width: ${remcalc(46)};
|
||||
height: ${remcalc(24)};
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
background: ${props => props.theme.background};
|
||||
border-radius: ${remcalc(23)};
|
||||
transition: all 0.3s ease;
|
||||
border: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||
margin-right: ${remcalc(6)};
|
||||
|
||||
&::selection {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 0 0 0 ${remcalc(24)} ${props => props.theme.grey};
|
||||
&:after {
|
||||
padding-right: ${remcalc(12)};
|
||||
}
|
||||
}
|
||||
|
||||
li:last-of-type .background {
|
||||
&:hover {
|
||||
border: ${remcalc(1)} solid ${props => props.theme.primary};
|
||||
|
||||
&:after {
|
||||
box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.primary};
|
||||
}
|
||||
}
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
position: relative;
|
||||
display: block;
|
||||
content: '';
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
left: 0;
|
||||
border-radius: 2em;
|
||||
background: ${props => props.theme.white};
|
||||
transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
|
||||
padding 0.3s ease, margin 0.3s ease, box-shadow 0.3s ease;
|
||||
|
||||
box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.grey};
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 0 0 0 2em ${props => props.theme.grey};
|
||||
&:after {
|
||||
padding-right: ${remcalc(12)};
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
${is('disabled')`
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
&:after {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
background: ${props => props.theme.whiteActive};
|
||||
}
|
||||
&:hover {
|
||||
border: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||
|
||||
&:after {
|
||||
box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.grey};
|
||||
}
|
||||
}
|
||||
`};
|
||||
`;
|
||||
|
||||
const BaseToggle = BaseInput(({ children, ...rest }) => {
|
||||
const render = value => {
|
||||
const id = rndId();
|
||||
return (
|
||||
<Li>
|
||||
<InputContainer>
|
||||
<StyledInput {...value} {...rest} id={id} type="radio" />
|
||||
<Label
|
||||
htmlFor={id}
|
||||
error={rest.error}
|
||||
warning={rest.warning}
|
||||
success={rest.success}
|
||||
>
|
||||
{children}
|
||||
</Label>
|
||||
<Background className="background" />
|
||||
</InputContainer>
|
||||
</Li>
|
||||
<InputContainer>
|
||||
<Input {...value} {...rest} id={id} type="checkbox" />
|
||||
<InputLabel
|
||||
{...rest}
|
||||
htmlFor={id}
|
||||
error={rest.error}
|
||||
warning={rest.warning}
|
||||
success={rest.success}
|
||||
/>
|
||||
<Label {...rest}> {children}</Label>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -155,5 +149,3 @@ const Toggle = ({ children, ...rest }) => (
|
|||
);
|
||||
|
||||
export default Toggle;
|
||||
|
||||
export const ToggleList = Baseline(Ul);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,34 @@
|
|||
```
|
||||
|
||||
#### Checkbox > Default
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const { default: FormGroup } = require('./group');
|
||||
const { default: Label } = require('./label');
|
||||
const { FormLabel } = require('./');
|
||||
|
||||
<FormGroup name="test">
|
||||
<FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel>
|
||||
<Checkbox>
|
||||
<Label>Detailed explanations</Label>
|
||||
</Checkbox>
|
||||
<Checkbox>
|
||||
<Label>Tips and tricks</Label>
|
||||
</Checkbox>
|
||||
<Checkbox>
|
||||
<Label>Hints</Label>
|
||||
</Checkbox>
|
||||
</FormGroup>
|
||||
```
|
||||
|
||||
#### Checkbox > Active/Focused
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const { default: FormGroup } = require('./group');
|
||||
const { default: Label } = require('./label');
|
||||
const { FormLabel } = require('./');
|
||||
|
||||
<FormGroup name="test">
|
||||
<FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel>
|
||||
<Checkbox checked>
|
||||
<Label>Detailed explanations</Label>
|
||||
</Checkbox>
|
||||
|
|
@ -13,44 +38,51 @@ const { default: Label } = require('./label');
|
|||
<Checkbox>
|
||||
<Label>Hints</Label>
|
||||
</Checkbox>
|
||||
</FormGroup>
|
||||
```
|
||||
#### Checkbox > Disabled
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const { default: FormGroup } = require('./group');
|
||||
const { default: Label } = require('./label');
|
||||
const { FormLabel } = require('./');
|
||||
|
||||
<FormGroup name="test">
|
||||
<FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel>
|
||||
<Checkbox disabled>
|
||||
<Label>How to</Label>
|
||||
<Label>Detailed explanations</Label>
|
||||
</Checkbox>
|
||||
<Checkbox disabled>
|
||||
<Label>Tips and tricks</Label>
|
||||
</Checkbox>
|
||||
<Checkbox disabled>
|
||||
<Label>Hints</Label>
|
||||
</Checkbox>
|
||||
</FormGroup>
|
||||
```
|
||||
|
||||
#### Checkbox input validation
|
||||
#### Checkbox > Error
|
||||
|
||||
```
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const { default: FormMeta } = require('./meta');
|
||||
const { default: FormGroup } = require('./group');
|
||||
const { default: Label } = require('./label');
|
||||
const { FormLabel } = require('./');
|
||||
|
||||
<div>
|
||||
<FormGroup>
|
||||
<Checkbox checked success>
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left success>
|
||||
Everything looks great
|
||||
</FormMeta>
|
||||
</Checkbox>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Checkbox checked warning>
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left warning>
|
||||
Are you sure ?
|
||||
</FormMeta>
|
||||
</Checkbox>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Checkbox error checked>
|
||||
<Label>Check this out!</Label>
|
||||
<FormMeta left error>
|
||||
Something’s missing
|
||||
</FormMeta>
|
||||
</Checkbox>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<FormGroup name="test">
|
||||
<FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel>
|
||||
<Checkbox error checked>
|
||||
<Label>Detailed explanations</Label>
|
||||
</Checkbox>
|
||||
<Checkbox checked>
|
||||
<Label>Tips and tricks</Label>
|
||||
</Checkbox>
|
||||
<Checkbox>
|
||||
<Label>Hints</Label>
|
||||
</Checkbox>
|
||||
<FormMeta error>
|
||||
Something’s missing
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,12 +1,39 @@
|
|||
#### Radio > Default
|
||||
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const { default: Radio, RadioList } = require('./radio');
|
||||
const { default: FormGroup } = require('./group');
|
||||
const { default: Label } = require('./label');
|
||||
const { default: Legend } = require('./legend');
|
||||
const { FormLabel } = require('./');
|
||||
|
||||
<FormGroup name="who-killed">
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<FormLabel style={{marginBottom: '12px'}}>Who killed the radio star?</FormLabel>
|
||||
<RadioList>
|
||||
<Radio name="one" value="video">
|
||||
<Label>Video</Label>
|
||||
</Radio>
|
||||
<Radio name="one" value="tv">
|
||||
<Label>TV</Label>
|
||||
</Radio>
|
||||
<Radio name="one" value="netflix">
|
||||
<Label>Netflix</Label>
|
||||
</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>;
|
||||
```
|
||||
#### Checkbox > Active/Focused
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const { default: Radio, RadioList } = require('./radio');
|
||||
const { default: FormGroup } = require('./group');
|
||||
const { default: Label } = require('./label');
|
||||
const { default: Legend } = require('./legend');
|
||||
const { FormLabel } = require('./');
|
||||
|
||||
<FormGroup name="test">
|
||||
<FormLabel style={{marginBottom: '12px'}}>Who killed the radio star?</FormLabel>
|
||||
<RadioList>
|
||||
<Radio name="one" value="video" checked>
|
||||
<Label>Video</Label>
|
||||
|
|
@ -14,74 +41,63 @@ const { default: Legend } = require('./legend');
|
|||
<Radio name="one" value="tv">
|
||||
<Label>TV</Label>
|
||||
</Radio>
|
||||
<Radio disabled name="one" value="netflix">
|
||||
<Radio name="one" value="netflix">
|
||||
<Label>Netflix</Label>
|
||||
</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>;
|
||||
</FormGroup>
|
||||
```
|
||||
|
||||
#### Checkbox > Disabled
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const { default: Radio, RadioList } = require('./radio');
|
||||
const { default: FormGroup } = require('./group');
|
||||
const { default: Label } = require('./label');
|
||||
const { default: Legend } = require('./legend');
|
||||
const { FormLabel } = require('./');
|
||||
|
||||
<FormGroup name="test">
|
||||
<FormLabel style={{marginBottom: '12px'}}>Who killed the radio star?</FormLabel>
|
||||
<RadioList>
|
||||
<Radio name="one" value="video" disabled>
|
||||
<Label>Video</Label>
|
||||
</Radio>
|
||||
<Radio name="one" value="tv" disabled>
|
||||
<Label>TV</Label>
|
||||
</Radio>
|
||||
<Radio name="one" value="netflix" disabled>
|
||||
<Label>Netflix</Label>
|
||||
</Radio>
|
||||
</RadioList>
|
||||
</FormGroup>
|
||||
```
|
||||
#### Radio input validation
|
||||
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const { default: Radio, RadioList } = require('./radio');
|
||||
const { default: FormGroup } = require('./group');
|
||||
const { default: Legend } = require('./legend');
|
||||
const { default: FormMeta } = require('./meta');
|
||||
const { default: Label } = require('./label');
|
||||
const { default: Legend } = require('./legend');
|
||||
const { FormLabel } = require('./');
|
||||
const { default: FormMeta } = require('./meta');
|
||||
|
||||
<div>
|
||||
<FormGroup name="who-killed">
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<RadioList>
|
||||
<Radio name="two" success value="video">
|
||||
<Label>Video</Label>
|
||||
</Radio>
|
||||
<Radio name="two" success checked value="tv">
|
||||
TV
|
||||
</Radio>
|
||||
<Radio name="two" success value="netflix">
|
||||
Netflix
|
||||
</Radio>
|
||||
</RadioList>
|
||||
<FormMeta left success>
|
||||
You are the best !
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
<FormGroup name="who-killed">
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<RadioList>
|
||||
<Radio name="three" warning checked value="video">
|
||||
<Label>Video</Label>
|
||||
</Radio>
|
||||
<Radio name="three" warning value="tv">
|
||||
TV
|
||||
</Radio>
|
||||
<Radio name="three" warning value="netflix">
|
||||
Netflix
|
||||
</Radio>
|
||||
</RadioList>
|
||||
<FormMeta left warning>
|
||||
Are you sure ?
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
<FormGroup name="who-killed">
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<RadioList>
|
||||
<Radio name="four" error value="video">
|
||||
<Label>Video</Label>
|
||||
</Radio>
|
||||
<Radio name="four" error value="tv">
|
||||
TV
|
||||
</Radio>
|
||||
<Radio name="four" error value="netflix">
|
||||
Netflix
|
||||
</Radio>
|
||||
</RadioList>
|
||||
<FormMeta error left>
|
||||
You need to select one
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
</div>;
|
||||
```
|
||||
<FormGroup name="test">
|
||||
<FormLabel style={{marginBottom: '12px'}}>Who killed the radio star?</FormLabel>
|
||||
<RadioList>
|
||||
<Radio name="one" value="video" error>
|
||||
<Label>Video</Label>
|
||||
</Radio>
|
||||
<Radio name="one" value="tv" error>
|
||||
<Label>TV</Label>
|
||||
</Radio>
|
||||
<Radio name="one" value="netflix" error>
|
||||
<Label>Netflix</Label>
|
||||
</Radio>
|
||||
</RadioList>
|
||||
<FormMeta error>
|
||||
Something’s missing
|
||||
</FormMeta>
|
||||
</FormGroup>
|
||||
```
|
||||
|
|
@ -6,13 +6,9 @@ const { default: Legend } = require('./legend');
|
|||
const { default: Toggle } = require('./toggle');
|
||||
|
||||
<FormGroup name="who-killed-1">
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<ToggleList>
|
||||
<Toggle value="video" checked>
|
||||
Video
|
||||
</Toggle>
|
||||
<Toggle value="tv">TV</Toggle>
|
||||
</ToggleList>
|
||||
<Toggle value="video">
|
||||
Video
|
||||
</Toggle>
|
||||
</FormGroup>;
|
||||
```
|
||||
|
||||
|
|
@ -26,10 +22,6 @@ const { default: Legend } = require('./legend');
|
|||
const { default: Toggle } = require('./toggle');
|
||||
|
||||
<FormGroup name="who-killed-2" disabled>
|
||||
<Legend>Who killed the radio star?</Legend>
|
||||
<ToggleList>
|
||||
<Toggle value="video">Video</Toggle>
|
||||
<Toggle value="tv">TV</Toggle>
|
||||
</ToggleList>
|
||||
<Toggle value="video" disabled>Video</Toggle>
|
||||
</FormGroup>;
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import is from 'styled-is';
|
||||
|
||||
import { H2 } from '../text/headings';
|
||||
|
||||
|
|
@ -9,6 +10,12 @@ const Brand = H2.extend`
|
|||
color: ${props => props.theme.white};
|
||||
font-size: ${remcalc(29)};
|
||||
margin: 0 auto;
|
||||
|
||||
${is('center')`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`}
|
||||
`;
|
||||
|
||||
const Box = styled.div`
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
```
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const { default: HeaderBrand } = require('./brand.js');
|
||||
const { default: HeaderItem } = require('./item.js');
|
||||
const { Anchor: HeaderAnchor } = require('./item.js');
|
||||
const { default: HeaderNav } = require('./nav.js');
|
||||
const { Triton, DataCenter, User } = require('../icons');
|
||||
|
||||
<Header>
|
||||
<HeaderBrand beta>
|
||||
<Triton />
|
||||
<HeaderBrand beta center>
|
||||
<Triton light />
|
||||
</HeaderBrand>
|
||||
<HeaderNav>
|
||||
<li>
|
||||
Compute
|
||||
<HeaderAnchor>Compute</HeaderAnchor>
|
||||
</li>
|
||||
</HeaderNav>
|
||||
<HeaderItem>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
```
|
||||
```jsx
|
||||
const { default: SectionListItem, Anchor } = require('./item');
|
||||
|
||||
<SectionList>
|
||||
|
|
|
|||
|
|
@ -125,6 +125,7 @@ const BaseTable = styled.table`
|
|||
|
||||
const BaseTfoot = styled.tfoot`
|
||||
width: 100%;
|
||||
background: ${props => props.theme.background};
|
||||
|
||||
th:first-child {
|
||||
border-bottom-left-radius: ${remcalc(4)};
|
||||
|
|
@ -141,6 +142,7 @@ const BaseTfoot = styled.tfoot`
|
|||
|
||||
const BaseThead = styled.thead`
|
||||
width: 100%;
|
||||
background: ${props => props.theme.background};
|
||||
|
||||
th:first-child {
|
||||
border-top-left-radius: ${remcalc(4)};
|
||||
|
|
@ -149,10 +151,6 @@ const BaseThead = styled.thead`
|
|||
th:last-child {
|
||||
border-top-right-radius: ${remcalc(4)};
|
||||
}
|
||||
|
||||
th {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const BaseTbody = styled.tbody`
|
||||
|
|
@ -169,6 +167,10 @@ const BaseTbody = styled.tbody`
|
|||
${is('disabled')`
|
||||
border-color: ${props => props.theme.grey};
|
||||
`};
|
||||
|
||||
tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const BaseTh = styled.th`
|
||||
|
|
@ -207,6 +209,10 @@ const BaseTd = styled.td`
|
|||
border-right-width: 0;
|
||||
}
|
||||
|
||||
${is('bold')`
|
||||
font-weight: bold
|
||||
`};
|
||||
|
||||
${is('selected')`
|
||||
border-color: ${props => props.theme.primary};
|
||||
background-color: rgba(59, 70, 204, 0.05);
|
||||
|
|
@ -335,7 +341,7 @@ export const Tbody = Baseline(({ children, ...rest }) => (
|
|||
export const Td = Baseline(({ children, ...rest }) => (
|
||||
<Propagate {...rest}>
|
||||
{value => (
|
||||
<BaseTd {...value} name="td">
|
||||
<BaseTd {...value} {...rest} name="td">
|
||||
{children}
|
||||
</BaseTd>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
#### Table > Header
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const remcalc = require('remcalc');
|
||||
|
|
@ -9,11 +10,80 @@ const { Dot, Actions } = require('../icons');
|
|||
<Thead>
|
||||
<Tr>
|
||||
<Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
|
||||
<FormGroup paddingTop={remcalc(4)}>
|
||||
<Checkbox />
|
||||
<FormGroup style={{display: 'flex', alignItems: 'center'}}>
|
||||
<Checkbox noMargin/>
|
||||
</FormGroup>
|
||||
</Th>
|
||||
<Th sortOrder="asc" showSort left middle actionable>
|
||||
<Th sortOrder="asc" showSort left middle selected actionable>
|
||||
<span>Name </span>
|
||||
</Th>
|
||||
<Th xs="150" left middle actionable>
|
||||
<span>Status </span>
|
||||
</Th>
|
||||
<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>
|
||||
<Tbody/>
|
||||
</Table>
|
||||
```
|
||||
|
||||
#### Table > Footer
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const remcalc = require('remcalc');
|
||||
const { FormGroup, Checkbox } = require('../form');
|
||||
const { default: Table, Tfoot, Tr, Th, Td } = require('./');
|
||||
const { Dot, Actions } = require('../icons');
|
||||
|
||||
<Table>
|
||||
<Tfoot>
|
||||
<Tr>
|
||||
<Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
|
||||
<FormGroup style={{display: 'flex', alignItems: 'center'}}>
|
||||
<Checkbox noMargin/>
|
||||
</FormGroup>
|
||||
</Th>
|
||||
<Th sortOrder="asc" showSort left middle selected actionable>
|
||||
<span>Name </span>
|
||||
</Th>
|
||||
<Th xs="150" left middle actionable>
|
||||
<span>Status </span>
|
||||
</Th>
|
||||
<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
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const remcalc = require('remcalc');
|
||||
const { FormGroup, Checkbox } = require('../form');
|
||||
const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');
|
||||
const { Dot, Actions } = require('../icons');
|
||||
|
||||
<Table>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
|
||||
<FormGroup>
|
||||
<Checkbox noMargin/>
|
||||
</FormGroup>
|
||||
</Th>
|
||||
<Th sortOrder="asc" showSort left middle selected actionable>
|
||||
<span>Name </span>
|
||||
</Th>
|
||||
<Th xs="150" left middle actionable>
|
||||
|
|
@ -32,11 +102,11 @@ const { Dot, Actions } = require('../icons');
|
|||
<Tr>
|
||||
<Td padding="0" paddingLeft={remcalc(12)} middle left>
|
||||
<FormGroup paddingTop={remcalc(4)}>
|
||||
<Checkbox />
|
||||
<Checkbox noMargin checked/>
|
||||
</FormGroup>
|
||||
</Td>
|
||||
<Td middle left>
|
||||
<a href="/instances/hello">hello</a>
|
||||
<Td middle left bold>
|
||||
percona_high-ram-32_1_snapshot_1
|
||||
</Td>
|
||||
<Td middle left>
|
||||
<span>
|
||||
|
|
@ -62,11 +132,11 @@ const { Dot, Actions } = require('../icons');
|
|||
<Tr>
|
||||
<Td padding="0" paddingLeft={remcalc(12)} middle left>
|
||||
<FormGroup paddingTop={remcalc(4)}>
|
||||
<Checkbox />
|
||||
<Checkbox noMargin/>
|
||||
</FormGroup>
|
||||
</Td>
|
||||
<Td middle left>
|
||||
<a href="/instances/world">world</a>
|
||||
<Td middle left bold>
|
||||
percona_high-ram-32_1_snapshot_2
|
||||
</Td>
|
||||
<Td middle left>
|
||||
<span>
|
||||
|
|
@ -92,3 +162,89 @@ const { Dot, Actions } = require('../icons');
|
|||
</Tbody>
|
||||
</Table>;
|
||||
```
|
||||
|
||||
#### Table > Single Selection List
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const remcalc = require('remcalc');
|
||||
const { FormGroup, Checkbox } = require('../form');
|
||||
const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');
|
||||
const { Dot, Actions } = require('../icons');
|
||||
|
||||
<Table>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
|
||||
</Th>
|
||||
<Th sortOrder="asc" showSort left middle selected actionable>
|
||||
<span>Name </span>
|
||||
</Th>
|
||||
<Th xs="150" left middle actionable>
|
||||
<span>Status </span>
|
||||
</Th>
|
||||
<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>
|
||||
<Tr>
|
||||
<Td padding="0" paddingLeft={remcalc(12)} middle left selected>
|
||||
<FormGroup paddingTop={remcalc(4)}>
|
||||
<Radio noMargin checked/>
|
||||
</FormGroup>
|
||||
</Td>
|
||||
<Td middle left bold selected>
|
||||
percona_high-ram-32_1_snapshot_1
|
||||
</Td>
|
||||
<Td middle left selected>
|
||||
<span>
|
||||
<Dot
|
||||
width={remcalc(11)}
|
||||
height={remcalc(11)}
|
||||
borderRadius={remcalc(11)}
|
||||
color="primary"
|
||||
/>{' '}
|
||||
Provisioning
|
||||
</span>
|
||||
</Td>
|
||||
<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>
|
||||
<FormGroup paddingTop={remcalc(4)}>
|
||||
<Radio noMargin/>
|
||||
</FormGroup>
|
||||
</Td>
|
||||
<Td middle left bold>
|
||||
percona_high-ram-32_1_snapshot_2
|
||||
</Td>
|
||||
<Td middle left>
|
||||
<span>
|
||||
<Dot
|
||||
width={remcalc(11)}
|
||||
height={remcalc(11)}
|
||||
borderRadius={remcalc(11)}
|
||||
color="green"
|
||||
/>{' '}
|
||||
Running
|
||||
</span>
|
||||
</Td>
|
||||
<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>;
|
||||
```
|
||||
|
|
|
|||
|
|
@ -98,74 +98,3 @@ const Label = require('/').Label;
|
|||
native applications
|
||||
</Label>;
|
||||
```
|
||||
|
||||
### Anchors
|
||||
|
||||
Links in the toolkit are named `Anchor`. This is to avoid confusion with `Link`,
|
||||
which is a
|
||||
[React Router routing link](http://knowbody.github.io/react-router-docs/api/Link.html).
|
||||
|
||||
#### Primary
|
||||
|
||||
Primary anchor is a type of a link that sits outside the body text.
|
||||
|
||||
```
|
||||
const React = require('react');
|
||||
const Anchor = require('/').Anchor;
|
||||
|
||||
<Anchor href="https://joyent.com">Inspire the lazy</Anchor>
|
||||
```
|
||||
|
||||
#### Reversed
|
||||
|
||||
Reversed anchors is used on dark backgrounds, where a default anchor would not
|
||||
provide enough contrast.
|
||||
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const Anchor = require('/').Anchor;
|
||||
|
||||
<span
|
||||
style={{
|
||||
'background-color': '#3B46CC',
|
||||
height: 80,
|
||||
width: 250,
|
||||
display: 'flex',
|
||||
'align-items': 'center',
|
||||
'justify-content': 'center'
|
||||
}}
|
||||
>
|
||||
<Anchor href="https://joyent.com" reversed>
|
||||
Inspire the lazy secondary
|
||||
</Anchor>
|
||||
</span>;
|
||||
```
|
||||
|
||||
#### In text anchor
|
||||
|
||||
In-paragraph anchor is a link that sits inside a text components. The default
|
||||
state does not have an underline. The underline appears on hover and click.
|
||||
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const Anchor = require('/').Anchor;
|
||||
|
||||
<p>
|
||||
Body text. Crack that whip. Give the past a slip. Step on a crack. Break your
|
||||
momma's back. When a problem comes along.You must whip it.
|
||||
<Anchor href="#">Learn More</Anchor>
|
||||
</p>;
|
||||
```
|
||||
|
||||
#### Disabled
|
||||
|
||||
Disabled anchors cannot be actioned and the cursor is disabled.
|
||||
|
||||
```jsx
|
||||
const React = require('react');
|
||||
const Anchor = require('/').Anchor;
|
||||
|
||||
<Anchor disabled href="https://joyent.com">
|
||||
Inspire the lazy disabled
|
||||
</Anchor>;
|
||||
```
|
||||
|
|
|
|||
|
|
@ -52,10 +52,6 @@ module.exports = {
|
|||
name: 'Typography',
|
||||
content: 'src/text/Readme.md'
|
||||
},
|
||||
{
|
||||
name: 'Baseline',
|
||||
content: 'src/baseline/readme.md'
|
||||
},
|
||||
{
|
||||
name: 'Colors',
|
||||
content: 'src/theme/colors.md'
|
||||
|
|
@ -69,10 +65,9 @@ module.exports = {
|
|||
{
|
||||
name: 'Components',
|
||||
components: () => [
|
||||
'src/card/card.js',
|
||||
'src/table/index.js',
|
||||
'src/breadcrumb/index.js',
|
||||
'src/button/index.js',
|
||||
'src/card/card.js',
|
||||
'src/form/checkbox.js',
|
||||
'src/header/index.js',
|
||||
'src/form/input.js',
|
||||
|
|
@ -82,6 +77,7 @@ module.exports = {
|
|||
'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'
|
||||
]
|
||||
|
|
|
|||
|
|
@ -8725,7 +8725,7 @@ react-styled-flexboxgrid@^2.1.1:
|
|||
dependencies:
|
||||
lodash.isinteger "^4.0.4"
|
||||
|
||||
react-styleguidist@^6.0.33:
|
||||
react-styleguidist@^6.0.31:
|
||||
version "6.0.33"
|
||||
resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.0.33.tgz#3025d9b5d47ad6a83bdbed571e3146d8c5ce8bbf"
|
||||
dependencies:
|
||||
|
|
|
|||
Loading…
Reference in New Issue