fix(ui-toolkit): styleguide minor bugs

packages/ui-toolkit/src/footer/sticky.md

@@ -19,21 +19,21 @@ const { Row, Col } = require('joyent-react-styled-flexboxgrid');
   <StickyFooter bottom>
     <Row between="xs" middle="xs">
       <Col xs={7}>
-        <Button type="button" secondary icon>
+        <Button type="button" secondary>
           <StartIcon />
           <span>Start</span>
         </Button>
-        <Button type="button" secondary icon>
+        <Button type="button" secondary>
           <StopIcon />
           <span>Stop</span>
         </Button>
-        <Button type="button" secondary icon>
+        <Button type="button" secondary>
           <ResetIcon />
           <span>Reboot</span>
         </Button>
       </Col>
       <Col xs={5}>
-        <Button type="button" error secondary right icon>
+        <Button type="button" error secondary right>
           <DeleteIcon fill="#D2433A" />
           <span>Remove</span>
         </Button>

packages/ui-toolkit/src/styleguide/playground.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import is from 'styled-is';
 import remcalc from 'remcalc';
 
-const Wrapper = styled.section;
+const Wrapper = styled.section``;
 
 const Tabs = styled.ul`
   list-style: none;
@@ -133,8 +133,8 @@ class Playground extends Component {
             </Button>
           </TabHeader>
           {states.length
-            ? states.map(state => (
-                <TabHeader active={tab === state}>
+            ? states.map((state, i) => (
+                <TabHeader active={tab === state} key={`tabHeader${i}`}>
                   <Button
                     active={tab === state}
                     onClick={() => this.changeTab(state)}
@@ -158,7 +158,7 @@ class Playground extends Component {
         </Tab>
         {states.length
           ? states.map((state, i) => (
-              <Tab active={tab === state} data-preview={name}>
+              <Tab active={tab === state} data-preview={name} key={`tab${i}`}>
                 {this.showPreview(preview, propCode.split(regex)[i + 1])}
               </Tab>
             ))

packages/ui-toolkit/src/styleguide/section.js

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 import { Card, H2, P, H4 } from '../';
 import remcalc from 'remcalc';
 
+const CardStyled = styled(Card)``;
+
 const Header = styled.header`
   background: ${props => props.theme.primary};
   padding: ${remcalc(50)} ${remcalc(120)};
@@ -23,7 +25,7 @@ export default allProps => {
 
   if (depth === 1) {
     return (
-      <Card>
+      <CardStyled>
         <Header>
           <H2 white>{name}</H2>
           {description ? <P white>{description}</P> : null}
@@ -33,7 +35,7 @@ export default allProps => {
           {components}
           {sections}
         </Main>
-      </Card>
+      </CardStyled>
     );
   }
 

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

@@ -314,11 +314,7 @@ export const Th = ({ children, ...rest }) => (
       >
         {children}
         {!showSort || !header ? null : (
-          <ArrowIcon
-            marginLeft={remcalc(9)}
-            marginBottom={remcalc(2)}
-            direction={sortOrder === 'asc' ? 'down' : 'up'}
-          />
+          <ArrowIcon direction={sortOrder === 'asc' ? 'down' : 'up'} />
         )}
       </BaseTh>
     )}