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

packages/images/src/components/footer.js

@@ -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>
-);

packages/images/src/routes.js

@@ -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 () => (

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap

@@ -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 ",

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap

@@ -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) {

packages/my-joy-beta/src/components/create-instance/affinity.js

@@ -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' ? (

packages/my-joy-beta/src/components/create-instance/image.js

@@ -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

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/list.spec.js.snap

@@ -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) {

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap

@@ -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) {

packages/my-joy-beta/src/components/instances/footer.js

@@ -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>
   )
 );

packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/footer.spec..js.snap

@@ -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>
-`;

packages/my-joy-beta/src/components/navigation/__tests__/footer.spec..js

@@ -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();
-});

packages/my-joy-beta/src/components/navigation/__tests__/footer.ui.js

@@ -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();
-});

packages/my-joy-beta/src/components/navigation/footer.js

@@ -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>
-);

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap

@@ -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) {

packages/my-joy-beta/src/routes.js

@@ -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';
 

packages/ui-toolkit/src/footer/StickyFooter.js

@@ -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>
+));

packages/ui-toolkit/src/footer/__tests__/__snapshots__/footer.spec.js.snap

@@ -1,86 +1,80 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Footer Footer 1`] = `
+exports[`renders <Footer/> without throwing 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;
-}
-
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
+  list-style: none;
-  -ms-flex-direction: row;
+  padding: 0.75rem 1.125rem;
-  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);
   border-top: 0.0625rem solid rgb(216,216,216);
-  max-height: 3.3125rem;
+  width: 100%;
-  min-height: 3.3125rem;
+  -webkit-box-pack: end;
-  line-height: 1.5625rem;
+  -webkit-justify-content: flex-end;
-  height: 4.375rem;
+  -ms-flex-pack: end;
-  max-height: 4.375rem;
+  justify-content: flex-end;
-  z-index: 1;
+  position: absolute;
+  box-sizing: border-box;
+  margin: 0;
+  bottom: 0;
 }
 
-@media only screen and (min-width:48em) {
 .c1 {
-    width: 46rem;
+  color: rgb(151,151,151);
-  }
 }
 
-@media only screen and (min-width:64em) {
+.c1:not(:last-child) {
-  .c1 {
+  padding-right: 1.5rem;
-    width: 56rem;
-  }
 }
 
-@media only screen and (min-width:75em) {
+.c2 {
-  .c1 {
+  color: rgb(151,151,151);
-    width: 59rem;
+  -webkit-text-decoration: none;
-  }
+  text-decoration: none;
 }
 
-@media only screen and (max-width:47.9375rem) {
+.c3 {
-  .c1 {
+  font-weight: 600;
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-  }
 }
 
-<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>
 `;

packages/ui-toolkit/src/footer/__tests__/footer.spec.js

@@ -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 '@mocks/theme';
-import theme from '../../theme';
 
-describe('Footer', () => {
+it('renders <Footer/> without throwing', () => {
-  test('Footer', () => {
+  expect(
-    const tree = renderer
+    renderer
       .create(
         <Theme>
           <Footer />
         </Theme>
       )
-      .toJSON();
+      .toJSON()
-
+  ).toMatchSnapshot();
-    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, '')}`
-    );
-  });
 });

packages/ui-toolkit/src/footer/index.js

@@ -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 StickyFooter from './StickyFooter';
-import { ViewContainer } from '../layout';
 
-const Container = ViewContainer.extend`
+const List = styled.ul`
   display: flex;
-  flex-wrap: nowrap;
+  list-style: none;
-  align-content: stretch;
+  padding: ${remcalc(12)} ${remcalc(18)};
-  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)};
+  width: 100%;
-  min-height: ${remcalc(53)};
+  justify-content: flex-end;
-  line-height: ${remcalc(25)};
+  position: absolute;
-
+  box-sizing: border-box;
-  height: ${remcalc(70)};
+  margin: 0;
-  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 }) => (
+const ListItem = styled.li`
-  <Footer {...rest}>
+  color: ${props => props.theme.greyDark};
-    <Container fluid={fluid}>{children}</Container>
+  &:not(:last-child) {
-  </Footer>
+    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';

packages/ui-toolkit/src/index.js

@@ -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';
 

packages/ui-toolkit/src/key-value/index.js

@@ -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}${
+                        <span>{`${initialValues.name}${type === 'metadata'
-                          type === 'metadata' ? '—' : ':'
+                          ? '—'
-                        }`}</span>
+                          : ':'}`}</span>
                       ) : (
-                        <b>{`${initialValues.name}${
+                        <Bold>{`${initialValues.name}${type === 'metadata'
-                          type === 'metadata' ? '—' : ':'
+                          ? '—'
-                        }`}</b>
+                          : ':'}`}</Bold>
                       )}
                       <span>{initialValues.value}</span>
                     </Fragment>

packages/ui-toolkit/src/table/index.js

@@ -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')`