feat(cp-frontend,ui-toolkit): style inheritance using `.extend` (#458)

styled-components@2 exposes a new `.extend`[1] API. It is less problematic than
styled(Parent).

[1]: https://www.styled-components.com/docs/basics#extending-styles

packages/cp-frontend/src/components/layout/container.js

@@ -3,7 +3,7 @@ import { Grid } from 'react-styled-flexboxgrid';
 
 import { breakpoints } from 'joyent-ui-toolkit';
 
-export default styled(Grid)`
+export default Grid.extend`
   padding: 2rem;
 
   ${breakpoints.large`

packages/cp-frontend/src/components/navigation/breadcrumb.js

@@ -14,7 +14,7 @@ const StyledDiv = styled.div`
   margin-bottom: ${remcalc(18)};
 `;
 
-const StyledH2 = styled(H2)`
+const StyledH2 = H2.extend`
   color: ${props => props.theme.primary};
   margin: 0;
 `;

packages/cp-frontend/src/components/navigation/header.js

@@ -13,7 +13,7 @@ const StyledHeader = styled.div`
   padding: ${unitcalc(2.5)} ${unitcalc(3)} ${unitcalc(2)} ${unitcalc(3)};
 `;
 
-const StyledLogo = styled(Img)`
+const StyledLogo = Img.extend`
   width: ${remcalc(87)};
   height: ${remcalc(25)};
 `;

packages/cp-frontend/src/components/navigation/menu.js

@@ -9,11 +9,11 @@ import remcalc from 'remcalc';
 import { breakpoints, Ul, Li } from 'joyent-ui-toolkit';
 import { LayoutContainer } from '@components/layout';
 
-const StyledHorizontalList = styled(Ul)`
+const StyledHorizontalList = Ul.extend`
   padding: 0;
 `;
 
-const StyledHorizontalListItem = styled(Li)`
+const StyledHorizontalListItem = Li.extend`
   ${breakpoints.smallOnly`
     display: block;
   `}

packages/cp-frontend/src/containers/services/menu.js

@@ -20,17 +20,17 @@ import {
 
 // import { servicesForTopologySelector } from '@state/selectors';
 
-const StyledLegend = styled(Legend)`
+const StyledLegend = Legend.extend`
   float: left;
   padding-top: ${unitcalc(2)};
   margin-right: ${unitcalc(1.5)};
 `;
 
-const PaddedRow = styled(Row)`
+const PaddedRow = Row.extend`
   margin-bottom: ${remcalc(18)}
 `;
 
-const StyledForm = styled(FormGroup)`
+const StyledForm = FormGroup.extend`
   width: 60%;
   float: left;
   margin: 0;

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

@@ -15,7 +15,7 @@ const style = css`
   `}
 `;
 
-const StyledAnchor = styled(A)`
+const StyledAnchor = A.extend`
   ${style}
 `;
 

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

@@ -28,6 +28,6 @@ const unitsFromProps = props =>
     )
     .join(';\n');
 
-export default Component => styled(Component)`
-  ${unitsFromProps}
-`;
+export default Component => Component.extend
+  ? Component.extend`${unitsFromProps}`
+  : styled(Component)`${unitsFromProps}`;

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

@@ -148,7 +148,7 @@ const style = css`
   `}
 `;
 
-const StyledButton = styled(NButton)`
+const StyledButton = NButton.extend`
   min-width: ${remcalc(120)};
   ${style}
 
@@ -157,7 +157,7 @@ const StyledButton = styled(NButton)`
   }
 `;
 
-const StyledAnchor = styled(A)`
+const StyledAnchor = A.extend`
   display: inline-block;
   ${style}
 `;

packages/ui-toolkit/src/card/card.js

@@ -9,7 +9,7 @@ import { Row } from 'react-styled-flexboxgrid';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const StyledCard = styled(Row)`
+const StyledCard = Row.extend`
   position: relative;
   height: auto;
   min-height: ${remcalc(126)};

packages/ui-toolkit/src/card/description.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import Title from './title';
 import React from 'react';
 
-const StyledTitle = styled(Title)`
+const StyledTitle = Title.extend`
   ${typography.fontFamily};
   ${typography.normal};
 

packages/ui-toolkit/src/card/group-view.js

@@ -4,7 +4,7 @@ import Baseline from '../baseline';
 import View from './view';
 import React from 'react';
 
-const StyledView = styled(View)`
+const StyledView = View.extend`
   display: block;
   padding: ${remcalc(62, 23, 5, 23)};
   background-color: ${props => props.grey};

packages/ui-toolkit/src/card/header.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import Baseline from '../baseline';
 import Card from './card';
 
-const StyledCard = styled(Card)`
+const StyledCard = Card.extend`
   position: absolute;
 
   background-color: ${props => props.theme.primary};

packages/ui-toolkit/src/card/meta.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import View from './view';
 import React from 'react';
 
-const InnerRow = styled(Row)`
+const InnerRow = Row.extend`
   display: block;
   height: 100%;
 

packages/ui-toolkit/src/card/options.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import Button from '../button';
 import React from 'react';
 
-const StyledNav = styled(Nav)`
+const StyledNav = Nav.extend`
   flex: 0 0 ${remcalc(47)};
   border-left: ${remcalc(1)} solid ${props => props.theme.grey};
   box-sizing: border-box;
@@ -18,7 +18,7 @@ const StyledNav = styled(Nav)`
   `};
 `;
 
-const StyledButton = styled(Button)`
+const StyledButton = Button.extend`
   position: relative;
   border-width: 0;
   box-shadow: none;

packages/ui-toolkit/src/card/outlet.js

@@ -8,7 +8,7 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const StyledCol = styled(Col)`
+const StyledCol = Col.extend`
   ${typography.fontFamily};
   ${typography.normal};
 

packages/ui-toolkit/src/card/subtitle.js

@@ -29,7 +29,7 @@ const Span = styled.span`
   `};
 `;
 
-const StyledTitle = styled(Title)`
+const StyledTitle = Title.extend`
   display: inline-block;
   padding: 0 ${remcalc(18)};
 

packages/ui-toolkit/src/card/view.js

@@ -7,7 +7,7 @@ import { Row } from 'react-styled-flexboxgrid';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const StyledView = styled(Row)`
+const StyledView = Row.extend`
   flex: 1;
   margin: 0;
   height: auto;

packages/ui-toolkit/src/form/base/toggle.js

@@ -9,7 +9,7 @@ import unitcalc from 'unitcalc';
 import is from 'styled-is';
 import rndId from 'rnd-id';
 
-const StyledInput = styled(Input)`
+const StyledInput = Input.extend`
   display: none;
 
   &:checked + label::after {

packages/ui-toolkit/src/form/fieldset.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { Fieldset } from 'normalized-styled-components';
 import Baseline from '../baseline';
 
-const StyledFieldset = styled(Fieldset)`
+const StyledFieldset = Fieldset.extend`
   display: inline-block;
   margin: 0;
   padding: 0;

packages/ui-toolkit/src/form/label.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import remcalc from 'remcalc';
 import Label from '../label';
 
-const StyledLabel = styled(Label)`
+const StyledLabel = Label.extend`
   margin-right: ${remcalc(12)};
 `;
 

packages/ui-toolkit/src/form/legend.js

@@ -3,7 +3,7 @@ import { Legend } from 'normalized-styled-components';
 import Baseline from '../baseline';
 import typography from '../typography';
 
-const StyledLegend = styled(Legend)`
+const StyledLegend = Legend.extend`
   ${typography.fontFamily};
   ${typography.semibold};
 `;

packages/ui-toolkit/src/form/meta.js

@@ -7,7 +7,7 @@ import Label from '../label';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const StyledLabel = styled(Label)`
+const StyledLabel = Label.extend`
   ${breakpoints.medium`
     text-align: right;
   `};

packages/ui-toolkit/src/form/toggle.js

@@ -11,7 +11,7 @@ import Baseline from '../baseline';
 import BaseInput from './base/input';
 import typography from '../typography';
 
-const StyledInput = styled(Input)`
+const StyledInput = Input.extend`
   display: none;
 
   &:checked + label {

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

@@ -3,7 +3,7 @@ import styled, { ThemeProvider, injectGlobal } from 'styled-components';
 import theme from '../theme';
 import Base, { global } from '../base';
 
-const StyledBase = styled(Base)`
+const StyledBase = Base.extend`
   background-color: transparent;
 `;
 

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

@@ -3,7 +3,7 @@ import { H1 as NH1 } from 'normalized-styled-components';
 import remcalc from 'remcalc';
 import typography from '../typography';
 
-export const H1 = styled(NH1)`
+export const H1 = NH1.extend`
   ${typography.fontFamily};
   ${typography.medium};
 

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

@@ -3,7 +3,7 @@ import { Small } from 'normalized-styled-components';
 import remcalc from 'remcalc';
 import typography from '../typography';
 
-export default styled(Small)`
+export default Small.extend`
   ${typography.fontFamily};
   ${typography.normal};
 

packages/ui-toolkit/src/theme/colors.js

@@ -31,7 +31,7 @@ const Preview = styled.div`
   width: 100%;
 `;
 
-const Paragraph = styled(P)`
+const Paragraph = P.extend`
   margin: 0;
 `;
 

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

@@ -11,7 +11,7 @@ import TopologyLink from './link';
 import TopologyLinkArrow from './link/arrow';
 import { calculateLineLayout } from './link/functions';
 
-const StyledSvg = styled(Svg)`
+const StyledSvg = Svg.extend`
   width: 100%;
   height: 1400px;
 `;