Bump styled-components from 3.4.10 to 4.0.0 (#4996)

* Bump styled-components from 3.4.10 to 4.0.0

Bumps [styled-components](https://github.com/styled-components/styled-components) from 3.4.10 to 4.0.0.
- [Release notes](https://github.com/styled-components/styled-components/releases)
- [Changelog](https://github.com/styled-components/styled-components/blob/master/CHANGELOG.md)
- [Commits](styled-components/styled-components@v3.4.10...v4.0.0)

Signed-off-by: dependabot[bot] <support@dependabot.com>

* Replace .extend with styled()

* Replace innerRef with ref

* Replace .dive() with .children()
The React 16.3 context API breaks wrapper.dive(), so work around this by using wrapper.children() to get the BackgroundWrapper for tests.

app/classifier/drawing-tools/components/DetailsSubTaskForm/DetailsSubTaskForm.jsx

@@ -122,7 +122,7 @@ export class DetailsSubTaskForm extends React.Component {
     return (
       <ThemeProvider theme={{ mode: theme }}>
         <StyledStickyModalForm
-          innerRef={(node) => { this.detailsForm = node; }}
+          ref={(node) => { this.detailsForm = node; }}
           onSubmit={this.handleDetailsFormClose}
           onCancel={this.handleDetailsFormClose}
         >

app/classifier/tasks/components/TaskInputField/TaskInputField.jsx

@@ -165,7 +165,7 @@ export class TaskInputField extends React.Component {
     return (
       <ThemeProvider theme={{ mode: this.props.theme }}>
         <StyledTaskInputField
-          innerRef={(node) => { this.field = node; }}
+          ref={(node) => { this.field = node; }}
           className={this.props.className}
           label={this.props.label}
           data-focus={false}

app/classifier/tasks/highlighter/components/HighlighterButton.jsx

@@ -11,7 +11,7 @@ import HighlighterButtonLabel from './HighlighterButtonLabel';
 
 
 // TODO: the focus and hover styles while the component has the active class is not working
-export const StyledHighlighterButton = StyledTaskInputField.extend`
+export const StyledHighlighterButton = styled(StyledTaskInputField)`
   font-size: inherit;
   width: 100%;
 `.withComponent('button');

app/pages/project/components/ProjectNavbar/components/Avatar/Avatar.jsx

@@ -15,7 +15,7 @@ export const StyledAvatarImg = styled.img`
   width: ${props => pxToRem(props.size)};
 `;
 
-export const DefaultProjectAvatarWrapper = StyledAvatarImg.withComponent('div').extend`
+export const DefaultProjectAvatarWrapper = styled(StyledAvatarImg.withComponent('div'))`
   background-color: ${theme('mode', { light: zooTheme.colors.teal.mid })};
   color: ${theme('mode', { light: zooTheme.colors.brand.default })};
 `;

app/pages/project/components/ProjectNavbar/components/Background/Background.spec.js

@@ -26,7 +26,7 @@ describe('Background', function () {
     });
 
     it('should set BackgroundWrapper\'s prop.hasBg to false', function() {
-      expect(wrapper.dive().props().hasBg).to.be.false;
+      expect(wrapper.children().props().hasBg).to.be.false;
     });
 
     it('should not render ImgBackground', function() {
@@ -40,7 +40,7 @@ describe('Background', function () {
     });
 
     it('should set BackgroundWrapper\'s prop.hasBg to true', function () {
-      expect(wrapper.dive().props().hasBg).to.be.true;
+      expect(wrapper.children().props().hasBg).to.be.true;
     });
 
     it('should not render ImgBackground', function () {

app/pages/project/components/ProjectNavbar/components/ProjectNavbarNarrow/ProjectNavbarNarrow.jsx

@@ -23,7 +23,7 @@ export const StyledOuterWrapper = styled.div`
   position: relative;
 `;
 
-export const StyledInnerWrapper = Wrapper.extend`
+export const StyledInnerWrapper = styled(Wrapper)`
   flex-direction: column;
   justify-content: center;
   padding: ${pxToRem(20)} 0;

app/pages/project/components/ProjectNavbar/components/ProjectNavbarWide/ProjectNavbarWide.jsx

@@ -9,7 +9,7 @@ import StyledHeader from '../StyledHeader';
 import Wrapper from '../Wrapper';
 import { pxToRem } from '../../../../../../theme';
 
-export const StyledHeaderWide = StyledHeader.extend`
+export const StyledHeaderWide = styled(StyledHeader)`
   box-shadow: 0 ${pxToRem(2)} ${pxToRem(4)} 0 rgba(0,0,0,0.5);
 `;
 

package.json

@@ -48,7 +48,7 @@
     "sinon": "~7.0.0",
     "sort-into-columns": "~1.0.0",
     "striptags": "~3.1.1",
-    "styled-components": "~3.4.10",
+    "styled-components": "~4.0.0",
     "styled-theming": "~2.2.0",
     "sugar-client": "~1.0.1",
     "svg-path-properties": "~0.4.5",