feat(ui-toolkit): replace bold with semibold fonts

This commit is contained in:
Sara Vieira 2018-02-26 15:54:25 +00:00 committed by Sérgio Ramos
parent 71c7743fef
commit 99374a8170
64 changed files with 227 additions and 387 deletions

View File

@ -1,54 +0,0 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
const List = styled.ul`
display: flex;
list-style: none;
padding: ${remcalc(12)} ${remcalc(18)};
border-top: ${remcalc(1)} solid ${props => props.theme.grey};
width: 100%;
justify-content: flex-end;
position: absolute;
box-sizing: border-box;
margin: 0;
bottom: 0;
`;
const ListItem = styled.li`
color: ${props => props.theme.greyDark};
&:not(:last-child) {
padding-right: ${remcalc(24)};
}
`;
const Link = styled.a`
color: ${props => props.theme.greyDark};
text-decoration: none;
`;
export default () => (
<List>
<ListItem>
<Link
href="https://www.joyent.com/about/policies"
target="__blank"
rel="noopener noreferrer"
>
Policies
</Link>
</ListItem>
<ListItem>
<Link
href="https://www.joyent.com/networking-and-security/security-compliance"
target="__blank"
rel="noopener noreferrer"
>
Compliance
</Link>
</ListItem>
<ListItem>
<b>© {new Date().getFullYear()} Joyent, Inc.</b>
</ListItem>
</List>
);

View File

@ -7,7 +7,8 @@ import {
ViewContainer,
Message,
MessageDescription,
MessageTitle
MessageTitle,
Footer
} from 'joyent-ui-toolkit';
import Breadcrumb from '@containers/breadcrumb';
@ -16,7 +17,6 @@ import List from '@containers/list';
import Summary from '@containers/summary';
import Create from '@containers/create';
import Tags from '@containers/tags';
import Footer from '@components/footer';
import { Route as ServerError } from '@root/server-error';
export default () => (

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

View File

@ -2,10 +2,16 @@
exports[`renders <Header /> without throwing 1`] = `
Array [
<b>
.c0 {
font-weight: 600;
}
<span
className="c0"
>
:
</b>,
</span>,
" be on a",
" ",
" node as the instance(s) identified by the instance ",
@ -21,10 +27,16 @@ Array [
exports[`renders <Header tag/> without throwing 1`] = `
Array [
<b>
.c0 {
font-weight: 600;
}
<span
className="c0"
>
:
</b>,
</span>,
" be on a",
" ",
" node as the instance(s) identified by the instance ",

View File

@ -1393,7 +1393,7 @@ exports[`renders <Packages expanded /> without throwing 1`] = `
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c3:not(:first-child) {
@ -1941,7 +1941,7 @@ exports[`renders <Packages isVmSelected /> without throwing 1`] = `
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c3:not(:first-child) {
@ -2489,7 +2489,7 @@ exports[`renders <Packages loading /> without throwing 1`] = `
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c3:not(:first-child) {
@ -2955,7 +2955,7 @@ exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c3:not(:first-child) {
@ -3247,7 +3247,7 @@ exports[`renders <Packages pristine={false} /> without throwing 1`] = `
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c3:not(:first-child) {

View File

@ -1,4 +1,5 @@
import React, { Fragment } from 'react';
import styled from 'styled-components';
import { Margin } from 'styled-components-spacing';
import Flex from 'styled-flex-component';
import { Field } from 'redux-form';
@ -12,6 +13,10 @@ const style = {
fontSize: '18px'
};
const Bold = styled.span`
font-weight: ${props => props.theme.font.weight.semibold};
`;
const Values = touched => (
<Margin right={1}>
<Select style={style} touched={touched} embedded width={remcalc(130)}>
@ -127,7 +132,7 @@ export const Rule = rule => (
export const Header = rule => (
<Fragment>
<b>{titleCase(rule['rule-instance-conditional'])}:</b> be on a{' '}
<Bold>{titleCase(rule['rule-instance-conditional'])}:</Bold> be on a{' '}
{rule['rule-instance-placement']} node as the instance(s) identified by the
instance {rule['rule-type']}
{rule['rule-type'] === 'name' ? (

View File

@ -3,11 +3,9 @@ import styled from 'styled-components';
import { Field } from 'redux-form';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { Margin } from 'styled-components-spacing';
import Flex from 'styled-flex-component';
import pascalCase from 'pascal-case';
import titleCase from 'title-case';
import remcalc from 'remcalc';
import format from 'date-fns/format';
import * as Assets from 'joyent-logo-assets';
@ -15,11 +13,9 @@ import {
H3,
P,
FormGroup,
FormLabel,
SectionList,
SectionListItem,
SectionListAnchor,
Anchor,
H4,
Select,
Card

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

View File

@ -231,7 +231,7 @@ exports[`renders <InstanceList /> without throwing 1`] = `
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c11:not(:first-child) {
@ -766,7 +766,7 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c11:not(:first-child) {
@ -1422,7 +1422,7 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c12:not(:first-child) {
@ -1957,7 +1957,7 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c12:not(:first-child) {
@ -2371,7 +2371,7 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c11:not(:first-child) {
@ -2906,7 +2906,7 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c11:not(:first-child) {

View File

@ -232,7 +232,7 @@ Array [
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c11:not(:first-child) {
@ -2023,7 +2023,7 @@ Array [
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c11:not(:first-child) {
@ -2856,7 +2856,7 @@ Array [
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c11:not(:first-child) {
@ -3778,7 +3778,7 @@ Array [
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c12:not(:first-child) {
@ -4611,7 +4611,7 @@ Array [
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c12:not(:first-child) {
@ -5355,7 +5355,7 @@ Array [
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c11:not(:first-child) {

View File

@ -4,7 +4,7 @@ import { withTheme } from 'styled-components';
import {
Button,
Footer,
StickyFooter,
QueryBreakpoints,
StartIcon,
StopIcon,
@ -25,7 +25,7 @@ export default withTheme(
onRemove,
theme = {}
}) => (
<Footer fixed bottom>
<StickyFooter fixed bottom>
<Row between="xs" middle="xs">
<Col xs={7}>
{onStart && [
@ -162,6 +162,6 @@ export default withTheme(
</Col>
)}
</Row>
</Footer>
</StickyFooter>
)
);

View File

@ -1,74 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Footer/> without throwing 1`] = `
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0.75rem 1.125rem;
border-top: 0.0625rem solid rgb(216,216,216);
width: 100%;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
position: absolute;
box-sizing: border-box;
margin: 0;
bottom: 0;
}
.c1 {
color: rgb(151,151,151);
}
.c1:not(:last-child) {
padding-right: 1.5rem;
}
.c2 {
color: rgb(151,151,151);
-webkit-text-decoration: none;
text-decoration: none;
}
<ul
className="c0"
>
<li
className="c1"
>
<a
className="c2"
href="https://www.joyent.com/about/policies"
rel="noopener noreferrer"
target="__blank"
>
Policies
</a>
</li>
<li
className="c1"
>
<a
className="c2"
href="https://www.joyent.com/networking-and-security/security-compliance"
rel="noopener noreferrer"
target="__blank"
>
Compliance
</a>
</li>
<li
className="c1"
>
<b>
©
2018
Joyent, Inc.
</b>
</li>
</ul>
`;

View File

@ -1,18 +0,0 @@
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import Footer from '../footer';
import Theme from '@mocks/theme';
it('renders <Footer/> without throwing', () => {
expect(
renderer
.create(
<Theme>
<Footer />
</Theme>
)
.toJSON()
).toMatchSnapshot();
});

View File

@ -1,20 +0,0 @@
import React from 'react';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import screenshot from 'react-screenshot-renderer';
import Footer from '../footer';
import Theme from '@mocks/theme';
expect.extend({
toMatchImageSnapshot
});
it('<Footer/>', async () => {
expect(
await screenshot(
<Theme ss>
<Footer />
</Theme>
)
).toMatchImageSnapshot();
});

View File

@ -1,54 +0,0 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
const List = styled.ul`
display: flex;
list-style: none;
padding: ${remcalc(12)} ${remcalc(18)};
border-top: ${remcalc(1)} solid ${props => props.theme.grey};
width: 100%;
justify-content: flex-end;
position: absolute;
box-sizing: border-box;
margin: 0;
bottom: 0;
`;
const ListItem = styled.li`
color: ${props => props.theme.greyDark};
&:not(:last-child) {
padding-right: ${remcalc(24)};
}
`;
const Link = styled.a`
color: ${props => props.theme.greyDark};
text-decoration: none;
`;
export default () => (
<List>
<ListItem>
<Link
href="https://www.joyent.com/about/policies"
target="__blank"
rel="noopener noreferrer"
>
Policies
</Link>
</ListItem>
<ListItem>
<Link
href="https://www.joyent.com/networking-and-security/security-compliance"
target="__blank"
rel="noopener noreferrer"
>
Compliance
</Link>
</ListItem>
<ListItem>
<b>© {new Date().getFullYear()} Joyent, Inc.</b>
</ListItem>
</List>
);

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

View File

@ -609,7 +609,7 @@ exports[`renders <List /> without throwing 1`] = `
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c24:not(:first-child) {
@ -1915,7 +1915,7 @@ exports[`renders <List error /> without throwing 1`] = `
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c30:not(:first-child) {
@ -3190,7 +3190,7 @@ exports[`renders <List instances /> without throwing 1`] = `
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c24:not(:first-child) {
@ -5235,7 +5235,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c24:not(:first-child) {
@ -7661,7 +7661,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c24:not(:first-child) {
@ -10300,7 +10300,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
font-weight: 500;
border-bottom-width: 0;
color: rgba(73,73,73,1);
font-weight: bold;
font-weight: 600;
}
.c24:not(:first-child) {

View File

@ -7,11 +7,11 @@ import {
ViewContainer,
Message,
MessageDescription,
MessageTitle
MessageTitle,
Footer
} from 'joyent-ui-toolkit';
import { Breadcrumb, Menu } from '@containers/navigation';
import Footer from '@components/navigation/footer';
import CreateInstance from '@containers/create-instance';
import { Route as ServerError } from '@root/server-error';

View File

@ -0,0 +1,44 @@
import React from 'react';
import styled from 'styled-components';
import is from 'styled-is';
import remcalc from 'remcalc';
import Baseline from '../baseline';
import { ViewContainer } from '../layout';
const Container = ViewContainer.extend`
display: flex;
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
`;
const Footer = styled.div`
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
background-color: rgba(241, 241, 241, 1);
border-top: ${remcalc(1)} solid ${props => props.theme.grey};
max-height: ${remcalc(53)};
min-height: ${remcalc(53)};
line-height: ${remcalc(25)};
height: ${remcalc(70)};
max-height: ${remcalc(70)};
z-index: 1;
${is('fixed')`
position: fixed;
left: 0;
right: 0;
`};
${is('bottom', 'fixed')`
bottom: 0;
`};
`;
export default Baseline(({ children, fluid, ...rest }) => (
<Footer {...rest}>
<Container fluid={fluid}>{children}</Container>
</Footer>
));

View File

@ -1,86 +1,80 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Footer Footer 1`] = `
.c1 {
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
width: 100%;
max-width: 62.5rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
exports[`renders <Footer/> without throwing 1`] = `
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
background-color: rgba(241,241,241,1);
list-style: none;
padding: 0.75rem 1.125rem;
border-top: 0.0625rem solid rgb(216,216,216);
max-height: 3.3125rem;
min-height: 3.3125rem;
line-height: 1.5625rem;
height: 4.375rem;
max-height: 4.375rem;
z-index: 1;
width: 100%;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
position: absolute;
box-sizing: border-box;
margin: 0;
bottom: 0;
}
@media only screen and (min-width:48em) {
.c1 {
width: 46rem;
}
.c1 {
color: rgb(151,151,151);
}
@media only screen and (min-width:64em) {
.c1 {
width: 56rem;
}
.c1:not(:last-child) {
padding-right: 1.5rem;
}
@media only screen and (min-width:75em) {
.c1 {
width: 59rem;
}
.c2 {
color: rgb(151,151,151);
-webkit-text-decoration: none;
text-decoration: none;
}
@media only screen and (max-width:47.9375rem) {
.c1 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.c3 {
font-weight: 600;
}
<div
<ul
className="c0"
>
<div
<li
className="c1"
/>
</div>
>
<a
className="c2"
href="https://www.joyent.com/about/policies"
rel="noopener noreferrer"
target="__blank"
>
Policies
</a>
</li>
<li
className="c1"
>
<a
className="c2"
href="https://www.joyent.com/networking-and-security/security-compliance"
rel="noopener noreferrer"
target="__blank"
>
Compliance
</a>
</li>
<li
className="c1"
>
<span
className="c3"
>
©
2018
Joyent, Inc.
</span>
</li>
</ul>
`;

View File

@ -1,27 +1,18 @@
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import remcalc from 'remcalc';
import Footer from '../';
import { Theme } from '../../mocks';
import theme from '../../theme';
import Theme from '@mocks/theme';
describe('Footer', () => {
test('Footer', () => {
const tree = renderer
it('renders <Footer/> without throwing', () => {
expect(
renderer
.create(
<Theme>
<Footer />
</Theme>
)
.toJSON();
expect(tree).toMatchSnapshot();
expect(tree).toHaveStyleRule('background-color', 'rgba(241,241,241,1)');
expect(tree).toHaveStyleRule(
'border-top',
`${remcalc(1)} solid ${theme.grey.replace(/ /g, '')}`
);
});
.toJSON()
).toMatchSnapshot();
});

View File

@ -1,47 +1,62 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import is from 'styled-is';
import Baseline from '../baseline';
import { ViewContainer } from '../layout';
import StickyFooter from './StickyFooter';
const Container = ViewContainer.extend`
const List = styled.ul`
display: flex;
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
`;
const Footer = styled.div`
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
background-color: rgba(241, 241, 241, 1);
list-style: none;
padding: ${remcalc(12)} ${remcalc(18)};
border-top: ${remcalc(1)} solid ${props => props.theme.grey};
max-height: ${remcalc(53)};
min-height: ${remcalc(53)};
line-height: ${remcalc(25)};
height: ${remcalc(70)};
max-height: ${remcalc(70)};
z-index: 1;
${is('fixed')`
position: fixed;
left: 0;
right: 0;
`};
${is('bottom', 'fixed')`
bottom: 0;
`};
width: 100%;
justify-content: flex-end;
position: absolute;
box-sizing: border-box;
margin: 0;
bottom: 0;
`;
export default Baseline(({ children, fluid, ...rest }) => (
<Footer {...rest}>
<Container fluid={fluid}>{children}</Container>
</Footer>
));
const ListItem = styled.li`
color: ${props => props.theme.greyDark};
&:not(:last-child) {
padding-right: ${remcalc(24)};
}
`;
const Link = styled.a`
color: ${props => props.theme.greyDark};
text-decoration: none;
`;
const Brand = styled.span`
font-weight: ${props => props.theme.font.weight.semibold};
`;
export default () => (
<List>
<ListItem>
<Link
href="https://www.joyent.com/about/policies"
target="__blank"
rel="noopener noreferrer"
>
Policies
</Link>
</ListItem>
<ListItem>
<Link
href="https://www.joyent.com/networking-and-security/security-compliance"
target="__blank"
rel="noopener noreferrer"
>
Compliance
</Link>
</ListItem>
<ListItem>
<Brand>© {new Date().getFullYear()} Joyent, Inc.</Brand>
</ListItem>
</List>
);
export { default as StickyFooter } from './StickyFooter';

View File

@ -11,7 +11,7 @@ export { default as Strong } from './text/strong';
export { default as Sup } from './text/sup';
export { default as theme } from './theme';
export { default as Divider } from './divider';
export { default as Footer } from './footer';
export { default as Footer, StickyFooter } from './footer';
export { default as KeyValue } from './key-value';
export { default as StatusLoader } from './status-loader';

View File

@ -47,6 +47,10 @@ const Meta = styled(CardHeaderMeta)`
max-width: 98%;
`;
const Bold = styled.span`
 font-weight: ${props => props.theme.font.weight.semibold};
`;
class ValueTextareaField extends PureComponent {
render() {
const { input = {}, submitting, editor } = this.props;
@ -58,8 +62,7 @@ class ValueTextareaField extends PureComponent {
React.createElement(editor, {
...props,
mode: 'sh'
})
}
})}
/>
) : (
<Textarea monospace resize="vertical" disabled={submitting} fluid />
@ -209,13 +212,13 @@ export const KeyValue = ({
{initialValues.name ? (
<Fragment>
{expanded ? (
<span>{`${initialValues.name}${
type === 'metadata' ? '—' : ':'
}`}</span>
<span>{`${initialValues.name}${type === 'metadata'
? '—'
: ':'}`}</span>
) : (
<b>{`${initialValues.name}${
type === 'metadata' ? '—' : ':'
}`}</b>
<Bold>{`${initialValues.name}${type === 'metadata'
? '—'
: ':'}`}</Bold>
)}
<span>{initialValues.value}</span>
</Fragment>

View File

@ -177,7 +177,7 @@ const BaseTh = styled.th`
${isOr('selected', 'showSort')`
color: ${props => props.theme.text};
font-weight: bold;
font-weight: ${props => props.theme.font.weight.semibold};
`};
&:not(:first-child) {
@ -205,7 +205,7 @@ const BaseTd = styled.td`
}
${is('bold')`
font-weight: bold
font-weight: ${props => props.theme.font.weight.semibold};
`};
${is('selected')`