feat(ui-toolkit): implement native <sup> with badge

fixes #1049
fixes #1048

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

@@ -8,17 +8,7 @@ import { Row, Col } from 'react-styled-flexboxgrid';
 import titleCase from 'title-case';
 import includes from 'lodash.includes';
 
-import {
+import { H3, P, FormGroup, FormLabel, Toggle, H4, Select, Card } from 'joyent-ui-toolkit';
-  H3,
-  P,
-  FormGroup,
-  FormLabel,
-  Button,
-  Toggle,
-  H4,
-  Select,
-  Card
-} from 'joyent-ui-toolkit';
 
 const Version = styled(Select)`
   min-width: 100%;

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

@@ -9,6 +9,7 @@ import bytes from 'bytes';
 import {
   H3,
   H4,
+  Sup,
   FormGroup,
   Button,
   TableTh,
@@ -45,22 +46,6 @@ const VerticalDivider = styled.div`
   box-sizing: border-box;
 `;
 
-const SuperScript = styled.div`
-  background: ${props => props.theme.primary};
-  border-radius: ${remcalc(3)};
-  font-weight: 600;
-  line-height: normal;
-  font-size: ${remcalc(8)};
-  color: ${props => props.theme.white};
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: ${remcalc(3)};
-  position: absolute;
-  margin-top: ${remcalc(-8)};
-  margin-left: ${remcalc(6)};
-`;
-
 export const Filters = ({ resetFilters }) => (
   <Margin top={4} bottom={3}>
     <H4>Filters</H4>
@@ -157,7 +142,11 @@ export const Package = ({
     </TableTd>
     <TableTd right selected={selected}>
       {bytes(disk, { decimalPlaces: 0 })}
-      {ssd && <SuperScript>SSD</SuperScript>}
+      {ssd && (
+        <Margin inline left={1}>
+          <Sup badge>SSD</Sup>
+        </Margin>
+      )}
     </TableTd>
     {hasVms && (
       <TableTd right selected={selected}>

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

@@ -32,7 +32,6 @@ const ImageContainer = ({
   vms
 }) => (
   <Fragment>
-    {console.log({ image, vms })}
     <Title
       onClick={!expanded && !image.id && handleEdit}
       icon={<InstanceTypeIcon />}

packages/ui-toolkit/src/card/demo.md

@@ -15,7 +15,7 @@ const { default: Card } = require('.');
 ```jsx
 const React = require('react');
 const { Margin } = require('styled-components-spacing');
-const { default: Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
+const { default: Card, Header, HeaderBox, HeaderMeta } = require('.');
 const { H4 } = require('../text');
 const { Actions } = require('../icons');
 
@@ -39,7 +39,7 @@ const { Actions } = require('../icons');
 ```jsx
 const React = require('react');
 const { Margin } = require('styled-components-spacing');
-const { default: Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
+const { default: Card, Header, HeaderBox, HeaderMeta } = require('.');
 const { H4 } = require('../text');
 const { Actions } = require('../icons');
 
@@ -64,11 +64,10 @@ const { Actions } = require('../icons');
 const React = require('react');
 const { Padding, Margin } = require('styled-components-spacing');
 const { default: Flex, FlexItem } = require('styled-flex-component');
-const { default: Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
+const { default: Card } = require('.');
 const { Row, Col } = require('../grid');
-const { H4, Strong, P } = require('../text');
+const { Strong, P } = require('../text');
 const { TagList, TagItem } = require('../tags');
-const { Actions } = require('../icons');
 const { Fragment } = React;
 
 <Fragment>
@@ -307,7 +306,6 @@ const { Fragment } = React;
 </Fragment>;
 ```
 
-
 ### Select Cards
 
 ```jsx
@@ -328,5 +326,5 @@ const { Row, Col } = require('../grid');
   <Col xs="3">
     <Card preview error />
   </Col>
-</Row>
+</Row>;
 ```

packages/ui-toolkit/src/index.js

@@ -8,6 +8,7 @@ export { H1, H2, H3, H4, H5, H6 } from './text/headings';
 export { default as P } from './text/p';
 export { default as Small } from './text/small';
 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';

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

@@ -6,5 +6,6 @@ export { H1, H2, H3, H4, H5, H6 } from './headings';
 export { default as P } from './p';
 export { default as Small } from './small';
 export { default as Strong } from './strong';
+export { default as Sup } from './sup';
 export { default as Label } from '../label';
 export { default as Anchor } from '../anchor';

packages/ui-toolkit/src/text/sup.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+import is from 'styled-is';
+
+export default styled.sup`
+  position: relative;
+  bottom: 0.5em;
+  border-radius: ${remcalc(3)};
+  font-weight: ${props => props.theme.font.weight.semibold};
+  line-height: normal;
+  font-size: ${remcalc(8)};
+  color: ${props => props.theme.primary};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  ${is('badge')`
+    padding: ${remcalc(2)} ${remcalc(3)};
+    background: ${props => props.theme.primary};
+    color: ${props => props.theme.white};
+  `};
+`;