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

chore(my-joy-beta): fix tests

This commit is contained in:
Sara Vieira 2018-02-22 17:11:18 +00:00 committed by Sérgio Ramos
parent e787687be1
commit cfc911e5cd
14 changed files with 86 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/ui-toolkit/src/breadcrumb/usage.md
View File

@ -1,5 +1,4 @@
```jsx
// Name: Active
const React = require('react');
const { default: Anchor } = require('../anchor/index.js');
@ -8,8 +7,14 @@ const { default: BreadcrumbItem } = require('./item.js');
<Breadcrumb>
<BreadcrumbItem>Home</BreadcrumbItem>
<BreadcrumbItem><Anchor href="https://joyent.com">Warp Records Blog</Anchor></BreadcrumbItem>
<BreadcrumbItem><Anchor href="https://joyent.com">Services</Anchor></BreadcrumbItem>
<BreadcrumbItem><Anchor href="https://joyent.com">Ngnix</Anchor></BreadcrumbItem>
</Breadcrumb>
<BreadcrumbItem>
<Anchor href="https://joyent.com">Warp Records Blog</Anchor>
</BreadcrumbItem>
<BreadcrumbItem>
<Anchor href="https://joyent.com">Services</Anchor>
</BreadcrumbItem>
<BreadcrumbItem>
<Anchor href="https://joyent.com">Ngnix</Anchor>
</BreadcrumbItem>
</Breadcrumb>;
```

12
packages/ui-toolkit/src/button/Readme.md
View File

@ -10,14 +10,14 @@ const { default: Button } = require('./');
<span>
<Button>Inspire the lazy</Button>
</span>
</span>;
// Tab: Disabled
const React = require('react');
const { default: Button } = require('./');
<span>
<Button disabled>Inspire the brave</Button>
</span>
</span>;
```
#### Secondary Button
@ -38,8 +38,10 @@ const { default: Button } = require('./');
const React = require('react');
const { default: Button } = require('./');
<span>
<Button secondary disabled>Inspire the brave</Button>
</span>
<Button secondary disabled>
Inspire the brave
</Button>
</span>;
```
#### Loading Button
@ -68,7 +70,7 @@ const { Actions } = require('../icons');
<Button secondary icon actions>
<Actions />
</Button>
</span>
</span>;
// Tab: Disabled
const React = require('react');

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

@ -219,7 +219,7 @@ const Button = styled(BaseButton)`
border-radius: 0;
`};
${is('actions') `
${is('actions')`
border-radius: 0;
width: ${remcalc(48)};
min-width: ${remcalc(0)};

1
packages/ui-toolkit/src/form/base/toggle.js
View File

@ -131,7 +131,6 @@ const Container = styled.div`
font-size: ${remcalc(15)};
}
${isNot('noMargin')`
margin-bottom: ${remcalc(12)};
`};

3
packages/ui-toolkit/src/form/meta.js
View File

@ -70,7 +70,8 @@ const Meta = props => {
error={hasError}
warning={hasWarning}
success={hasSuccess}
right={isRight}>
right={isRight}
>
{msg}
</StyledLabel>
);

7
packages/ui-toolkit/src/form/usage-input.md
View File

@ -10,8 +10,7 @@ const { default: Input } = require('./input');
<FormGroup>
<Label>Username</Label>
<Input placeholder="Example: JarJarBinks" type="text" />
</FormGroup>
</FormGroup>;
// Tab: Disabled
const React = require('react');
@ -22,7 +21,7 @@ const { default: Input } = require('./input');
<FormGroup>
<Label disabled>Username</Label>
<Input disabled placeholder="Example: JarJarBinks" type="text" />
</FormGroup>
</FormGroup>;
// Tab: Error
const React = require('react');
@ -35,5 +34,5 @@ const { default: Input } = require('./input');
<Label>Username</Label>
<Input value="anton/s" error type="text" />
<FormMeta error>Something’s wrong</FormMeta>
</FormGroup>
</FormGroup>;
```

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

@ -1,4 +1,5 @@
#### Select
This is the standard dropdown menu to be used in forms and for multiple choice selections.
```jsx
@ -38,8 +39,7 @@ const { default: Select } = require('./select');
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
</FormGroup>
</FormGroup>;
// Tab: Error
const React = require('react');
@ -52,7 +52,9 @@ const { default: Select } = require('./select');
<FormGroup>
<Flex alignCenter justifyBetween>
<Label>Your location</Label>
<FormMeta top error>Unexpected children error!</FormMeta>
<FormMeta top error>
Unexpected children error!
</FormMeta>
</Flex>
<Select>
<option>Amsterdam, EU</option>
@ -60,5 +62,5 @@ const { default: Select } = require('./select');
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
</FormGroup>
</FormGroup>;
```

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

@ -13,7 +13,7 @@ const { Message, Title, Description } = require('.');
more
</Description>
</Message>
<br/>
<br />
<Message onCloseClick={() => null} warning>
<Title>Choosing deployment data center</Title>
<Description>
@ -22,7 +22,7 @@ const { Message, Title, Description } = require('.');
more
</Description>
</Message>
<br/>
<br />
<Message onCloseClick={() => null} error>
<Title>Choosing deployment data center</Title>
<Description>
@ -31,5 +31,5 @@ const { Message, Title, Description } = require('.');
more
</Description>
</Message>
</div>
</div>;
```

1
packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap
View File

@ -32,7 +32,6 @@ Array [
.c1 {
display: block;
-webkit-text-align: left;
text-align: left;
cursor: pointer;
}

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

@ -32,9 +32,7 @@ const UnorderedList = styled.ul`
* @example ./usage.md
*/
const SectionList = ({ children, mode, ...rest }) => (
<UnorderedList {...rest}>
{children}
</UnorderedList>
<UnorderedList {...rest}>{children}</UnorderedList>
);
export default Baseline(SectionList);

2
packages/ui-toolkit/src/section-list/item.js
View File

@ -38,7 +38,7 @@ export const Anchor = Baseline(styled(BaseAnchor)`
font-weight: ${props => props.theme.font.weight.semibold};
&:after {
${border}
${border};
}
}

2
packages/ui-toolkit/src/section-list/usage.md
View File

@ -32,5 +32,5 @@ const { default: SectionList } = require('./');
<SectionListItem>
<Anchor>Snapshots</Anchor>
</SectionListItem>
</SectionList>
</SectionList>;
```

9
packages/ui-toolkit/src/styleguide/playground.js
View File

@ -156,7 +156,8 @@ class Playground extends Component {
<TabHeader active={tab === 'component'}>
<Button
active={tab === 'component'}
onClick={() => this.changeTab('component')}>
onClick={() => this.changeTab('component')}
>
{(propCode.split(nameRegex)[1] || 'Component').split(/\s/g)[0]}
</Button>
</TabHeader>
@ -165,7 +166,8 @@ class Playground extends Component {
<TabHeader active={tab === state}>
<Button
active={tab === state}
onClick={() => this.changeTab(state)}>
onClick={() => this.changeTab(state)}
>
{state}
</Button>
</TabHeader>
@ -174,7 +176,8 @@ class Playground extends Component {
<TabHeader active={tab === 'code'}>
<Button
active={tab === 'code'}
onClick={() => this.changeTab('code')}>
onClick={() => this.changeTab('code')}
>
Code
</Button>
</TabHeader>

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

@ -39,21 +39,53 @@ const { default: Table, Tfoot, Tr, Th } = require('./');
<Table>
<Tfoot>
<Tr>
<Th style={{borderTop: '1px solid rgb(216,216,216)'}} xs="32" padding="0" paddingLeft="12" middle left>
<Th
style={{ borderTop: '1px solid rgb(216,216,216)' }}
xs="32"
padding="0"
paddingLeft="12"
middle
left
>
<FormGroup style={{ display: 'flex', alignItems: 'center' }}>
<Checkbox noMargin />
</FormGroup>
</Th>
<Th style={{borderTop: '1px solid rgb(216,216,216)'}} sortOrder="asc" showSort left middle selected actionable>
<Th
style={{ borderTop: '1px solid rgb(216,216,216)' }}
sortOrder="asc"
showSort
left
middle
selected
actionable
>
<span>Name </span>
</Th>
<Th style={{borderTop: '1px solid rgb(216,216,216)'}} xs="150" left middle actionable>
<Th
style={{ borderTop: '1px solid rgb(216,216,216)' }}
xs="150"
left
middle
actionable
>
<span>Status </span>
</Th>
<Th style={{borderTop: '1px solid rgb(216,216,216)'}} xs="0" sm="160" left middle actionable>
<Th
style={{ borderTop: '1px solid rgb(216,216,216)' }}
xs="0"
sm="160"
left
middle
actionable
>
<span>Created </span>
</Th>
<Th style={{borderTop: '1px solid rgb(216,216,216)'}} xs="60" padding="0" />
<Th
style={{ borderTop: '1px solid rgb(216,216,216)' }}
xs="60"
padding="0"
/>
</Tr>
</Tfoot>
</Table>;
@ -90,7 +122,7 @@ const { Dot, Actions } = require('../icons');
<Tbody>
<Tr>
<Td padding="0" paddingLeft="12" middle left>
<FormGroup paddingTop={(4)}>
<FormGroup paddingTop={4}>
<Checkbox noMargin checked />
</FormGroup>
</Td>
@ -99,12 +131,7 @@ const { Dot, Actions } = require('../icons');
</Td>
<Td middle left>
<span>
<Dot
size="11px"
borderRadius={11}
color="primary"
/>{' '}
Provisioning
<Dot size="11px" borderRadius={11} color="primary" /> Provisioning
</span>
</Td>
<Td xs="0" sm="160" middle left>
@ -116,7 +143,7 @@ const { Dot, Actions } = require('../icons');
</Tr>
<Tr>
<Td padding="0" paddingLeft="12" middle left>
<FormGroup paddingTop={(4)}>
<FormGroup paddingTop={4}>
<Checkbox noMargin />
</FormGroup>
</Td>
@ -125,12 +152,7 @@ const { Dot, Actions } = require('../icons');
</Td>
<Td middle left>
<span>
<Dot
size="11px"
borderRadius={11}
color="green"
/>{' '}
Running
<Dot size="11px" borderRadius={11} color="green" /> Running
</span>
</Td>
<Td xs="0" sm="160" middle left>
@ -170,7 +192,7 @@ const { Dot } = require('../icons');
<Tbody>
<Tr>
<Td padding="0" paddingLeft="12" middle left selected>
<FormGroup paddingTop={(4)}>
<FormGroup paddingTop={4}>
<Radio noMargin checked />
</FormGroup>
</Td>
@ -179,12 +201,7 @@ const { Dot } = require('../icons');
</Td>
<Td middle left selected>
<span>
<Dot
size="11px"
borderRadius={11}
color="primary"
/>{' '}
Provisioning
<Dot size="11px" borderRadius={11} color="primary" /> Provisioning
</span>
</Td>
<Td xs="0" sm="160" middle left selected>
@ -193,7 +210,7 @@ const { Dot } = require('../icons');
</Tr>
<Tr>
<Td padding="0" paddingLeft="12" middle left>
<FormGroup paddingTop={(4)}>
<FormGroup paddingTop={4}>
<Radio noMargin />
</FormGroup>
</Td>
@ -202,12 +219,7 @@ const { Dot } = require('../icons');
</Td>
<Td middle left>
<span>
<Dot
size="11px"
borderRadius={11}
color="green"
/>{' '}
Running
<Dot size="11px" borderRadius={11} color="green" /> Running
</span>
</Td>
<Td xs="0" sm="160" middle left>