From f3e531dbd813268828bcd519b22b3e56202a53da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Ramos?= <mail@sergioramos.me>
Date: Thu, 25 May 2017 15:59:58 +0100
Subject: [PATCH] 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     | 2 +-
 .../cp-frontend/src/components/navigation/breadcrumb.js     | 2 +-
 packages/cp-frontend/src/components/navigation/header.js    | 2 +-
 packages/cp-frontend/src/components/navigation/menu.js      | 4 ++--
 packages/cp-frontend/src/containers/services/menu.js        | 6 +++---
 packages/ui-toolkit/src/anchor/index.js                     | 2 +-
 packages/ui-toolkit/src/baseline/index.js                   | 6 +++---
 packages/ui-toolkit/src/button/index.js                     | 4 ++--
 packages/ui-toolkit/src/card/card.js                        | 2 +-
 packages/ui-toolkit/src/card/description.js                 | 2 +-
 packages/ui-toolkit/src/card/group-view.js                  | 2 +-
 packages/ui-toolkit/src/card/header.js                      | 2 +-
 packages/ui-toolkit/src/card/meta.js                        | 2 +-
 packages/ui-toolkit/src/card/options.js                     | 4 ++--
 packages/ui-toolkit/src/card/outlet.js                      | 2 +-
 packages/ui-toolkit/src/card/subtitle.js                    | 2 +-
 packages/ui-toolkit/src/card/view.js                        | 2 +-
 packages/ui-toolkit/src/form/base/toggle.js                 | 2 +-
 packages/ui-toolkit/src/form/fieldset.js                    | 2 +-
 packages/ui-toolkit/src/form/label.js                       | 2 +-
 packages/ui-toolkit/src/form/legend.js                      | 2 +-
 packages/ui-toolkit/src/form/meta.js                        | 2 +-
 packages/ui-toolkit/src/form/toggle.js                      | 2 +-
 packages/ui-toolkit/src/styleguide/wrapper.js               | 2 +-
 packages/ui-toolkit/src/text/headings.js                    | 2 +-
 packages/ui-toolkit/src/text/small.js                       | 2 +-
 packages/ui-toolkit/src/theme/colors.js                     | 2 +-
 packages/ui-toolkit/src/topology/index.js                   | 2 +-
 28 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/packages/cp-frontend/src/components/layout/container.js b/packages/cp-frontend/src/components/layout/container.js
index 7d3092df..2dbd68ad 100644
--- a/packages/cp-frontend/src/components/layout/container.js
+++ b/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`
diff --git a/packages/cp-frontend/src/components/navigation/breadcrumb.js b/packages/cp-frontend/src/components/navigation/breadcrumb.js
index 76032c90..a5881334 100644
--- a/packages/cp-frontend/src/components/navigation/breadcrumb.js
+++ b/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;
 `;
diff --git a/packages/cp-frontend/src/components/navigation/header.js b/packages/cp-frontend/src/components/navigation/header.js
index a2dcec24..31efca04 100644
--- a/packages/cp-frontend/src/components/navigation/header.js
+++ b/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)};
 `;
diff --git a/packages/cp-frontend/src/components/navigation/menu.js b/packages/cp-frontend/src/components/navigation/menu.js
index 1cd0c966..6eb9855a 100644
--- a/packages/cp-frontend/src/components/navigation/menu.js
+++ b/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;
   `}
diff --git a/packages/cp-frontend/src/containers/services/menu.js b/packages/cp-frontend/src/containers/services/menu.js
index d89f3607..37b70932 100644
--- a/packages/cp-frontend/src/containers/services/menu.js
+++ b/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;
diff --git a/packages/ui-toolkit/src/anchor/index.js b/packages/ui-toolkit/src/anchor/index.js
index 2b5d6b8e..a2459b09 100644
--- a/packages/ui-toolkit/src/anchor/index.js
+++ b/packages/ui-toolkit/src/anchor/index.js
@@ -15,7 +15,7 @@ const style = css`
   `}
 `;
 
-const StyledAnchor = styled(A)`
+const StyledAnchor = A.extend`
   ${style}
 `;
 
diff --git a/packages/ui-toolkit/src/baseline/index.js b/packages/ui-toolkit/src/baseline/index.js
index eb7b677c..d5c94bf7 100644
--- a/packages/ui-toolkit/src/baseline/index.js
+++ b/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}`;
diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js
index af0d6394..eaa0f10a 100644
--- a/packages/ui-toolkit/src/button/index.js
+++ b/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}
 `;
diff --git a/packages/ui-toolkit/src/card/card.js b/packages/ui-toolkit/src/card/card.js
index d9ae880c..c4c84191 100644
--- a/packages/ui-toolkit/src/card/card.js
+++ b/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)};
diff --git a/packages/ui-toolkit/src/card/description.js b/packages/ui-toolkit/src/card/description.js
index fe939d0e..ae080b89 100644
--- a/packages/ui-toolkit/src/card/description.js
+++ b/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};
 
diff --git a/packages/ui-toolkit/src/card/group-view.js b/packages/ui-toolkit/src/card/group-view.js
index 35f15016..4a69be7a 100644
--- a/packages/ui-toolkit/src/card/group-view.js
+++ b/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};
diff --git a/packages/ui-toolkit/src/card/header.js b/packages/ui-toolkit/src/card/header.js
index bba9aac4..ddda2ace 100644
--- a/packages/ui-toolkit/src/card/header.js
+++ b/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};
diff --git a/packages/ui-toolkit/src/card/meta.js b/packages/ui-toolkit/src/card/meta.js
index e069b5a8..677bb135 100644
--- a/packages/ui-toolkit/src/card/meta.js
+++ b/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%;
 
diff --git a/packages/ui-toolkit/src/card/options.js b/packages/ui-toolkit/src/card/options.js
index 07fa3a32..0efdfa40 100644
--- a/packages/ui-toolkit/src/card/options.js
+++ b/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;
diff --git a/packages/ui-toolkit/src/card/outlet.js b/packages/ui-toolkit/src/card/outlet.js
index 4cac77cc..ab3f2f6e 100644
--- a/packages/ui-toolkit/src/card/outlet.js
+++ b/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};
 
diff --git a/packages/ui-toolkit/src/card/subtitle.js b/packages/ui-toolkit/src/card/subtitle.js
index 009b3f4f..eb477f7f 100644
--- a/packages/ui-toolkit/src/card/subtitle.js
+++ b/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)};
 
diff --git a/packages/ui-toolkit/src/card/view.js b/packages/ui-toolkit/src/card/view.js
index 34d6bfdb..dc3badb2 100644
--- a/packages/ui-toolkit/src/card/view.js
+++ b/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;
diff --git a/packages/ui-toolkit/src/form/base/toggle.js b/packages/ui-toolkit/src/form/base/toggle.js
index 1831eec6..e64f4457 100644
--- a/packages/ui-toolkit/src/form/base/toggle.js
+++ b/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 {
diff --git a/packages/ui-toolkit/src/form/fieldset.js b/packages/ui-toolkit/src/form/fieldset.js
index 92533056..ec23cbb6 100644
--- a/packages/ui-toolkit/src/form/fieldset.js
+++ b/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;
diff --git a/packages/ui-toolkit/src/form/label.js b/packages/ui-toolkit/src/form/label.js
index 925fcd70..1f76db60 100644
--- a/packages/ui-toolkit/src/form/label.js
+++ b/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)};
 `;
 
diff --git a/packages/ui-toolkit/src/form/legend.js b/packages/ui-toolkit/src/form/legend.js
index 5554313f..00ed9348 100644
--- a/packages/ui-toolkit/src/form/legend.js
+++ b/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};
 `;
diff --git a/packages/ui-toolkit/src/form/meta.js b/packages/ui-toolkit/src/form/meta.js
index 9a2e81ae..254049f4 100644
--- a/packages/ui-toolkit/src/form/meta.js
+++ b/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;
   `};
diff --git a/packages/ui-toolkit/src/form/toggle.js b/packages/ui-toolkit/src/form/toggle.js
index ca97454d..e03c5940 100644
--- a/packages/ui-toolkit/src/form/toggle.js
+++ b/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 {
diff --git a/packages/ui-toolkit/src/styleguide/wrapper.js b/packages/ui-toolkit/src/styleguide/wrapper.js
index f787350f..46c5c7ea 100644
--- a/packages/ui-toolkit/src/styleguide/wrapper.js
+++ b/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;
 `;
 
diff --git a/packages/ui-toolkit/src/text/headings.js b/packages/ui-toolkit/src/text/headings.js
index 480a0760..72bd737b 100644
--- a/packages/ui-toolkit/src/text/headings.js
+++ b/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};
 
diff --git a/packages/ui-toolkit/src/text/small.js b/packages/ui-toolkit/src/text/small.js
index bc1a93dd..2a82f750 100644
--- a/packages/ui-toolkit/src/text/small.js
+++ b/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};
 
diff --git a/packages/ui-toolkit/src/theme/colors.js b/packages/ui-toolkit/src/theme/colors.js
index 1e1b0389..bba9c980 100644
--- a/packages/ui-toolkit/src/theme/colors.js
+++ b/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;
 `;
 
diff --git a/packages/ui-toolkit/src/topology/index.js b/packages/ui-toolkit/src/topology/index.js
index 8beb535f..e309da77 100644
--- a/packages/ui-toolkit/src/topology/index.js
+++ b/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;
 `;