Styled components v4

.storybook/config.js

@@ -1,10 +1,20 @@
-import { configure } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies
-import '../src/app/lib/globalStyles';
+import React, { Fragment } from 'react';
+import { configure, addDecorator } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies
+import GlobalStyle from '../src/app/lib/globalStyles';
 
 const req = require.context('../src/app', true, /\.stories\.jsx$/);
 
 function loadStories() {
   req.keys().forEach(filename => req(filename));
 }
 
+addDecorator(story => (
+  /* eslint-disable react/jsx-filename-extension */
+  <Fragment>
+    <GlobalStyle />
+    {story()}
+  </Fragment>
+  /* eslint-enable react/jsx-filename-extension */
+));
+
 configure(loadStories, module);

package.json

@@ -69,7 +69,7 @@
     "react-helmet": "^5.2.0",
     "react-router-dom": "^4.3.1",
     "speculate": "^1.7.4",
-    "styled-components": "^3.4.6",
+    "styled-components": "^4.0.0-beta.5",
     "styled-normalize": "^8.0.0"
   },
   "devDependencies": {

src/app/components/Document/index.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { AfterRoot, AfterData } from '@jaredpalmer/after';
 import ResourceHints from './ResourceHints';
-import '../../lib/globalStyles';
 import { C_POSTBOX } from '../../lib/constants/styles';
 
 /* eslint-disable react/prop-types */

src/app/containers/Article/__snapshots__/index.test.jsx.snap

@@ -5,6 +5,7 @@ exports[`ArticleContainer Component no data should render correctly 1`] = `"Load
 exports[`ArticleContainer Component should render correctly 1`] = `
 <React.Fragment>
   <Header />
+  <GlobalStyleComponent />
   <Metadata
     amp={false}
     canonicalLink="https://www.bbc.com/news/articles/c0000000001o"

src/app/containers/Article/index.jsx

@@ -6,6 +6,7 @@ import Footer from '../Footer';
 import MainContent from '../MainContent';
 import articlePropTypes from '../../models/propTypes/article';
 import isAmpPath from '../../helpers/isAmpPath';
+import GlobalStyle from '../../lib/globalStyles';
 
 const validateService = service => {
   const services = ['news', 'persian'];
@@ -83,6 +84,7 @@ class ArticleContainer extends Component {
     return (
       <Fragment>
         <Header />
+        <GlobalStyle />
         <Metadata {...metadataProps} />
         <MainContent blocks={blocks} />
         <Footer />

src/app/containers/Figure/__snapshots__/index.test.jsx.snap

@@ -1,35 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Figure should render an image with alt text 1`] = `
-<Figure>
-  <Image
+<ForwardRef>
+  <ForwardRef
     alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
     src="https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
   />
-</Figure>
+</ForwardRef>
 `;
 
 exports[`Figure should render caption text 1`] = `
-<Figure>
-  <Image
+<ForwardRef>
+  <ForwardRef
     alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
     src="https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
   />
   <Text
     paragraphOverride={[Function]}
     text="This is a caption"
   />
-</Figure>
+</ForwardRef>
 `;
 
 exports[`Figure should render copyright text 1`] = `
-<Figure>
-  <Image
+<ForwardRef>
+  <ForwardRef
     alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
     src="https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
   />
-  <VisuallyHiddenText>
+  <ForwardRef>
     Copyright Getty images
-  </VisuallyHiddenText>
-</Figure>
+  </ForwardRef>
+</ForwardRef>
 `;

src/app/containers/Headings/__snapshots__/index.test.jsx.snap

@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Headings with headline data should render correctly 1`] = `
-<Headline
+<ForwardRef
   text="This is a headline!"
 >
   This is a headline!
-</Headline>
+</ForwardRef>
 `;
 
 exports[`Headings with subheading data should render correctly 1`] = `
-<SubHeading
+<ForwardRef
   text="This is a subheading"
 >
   This is a subheading
-</SubHeading>
+</ForwardRef>
 `;

src/app/containers/InlineLink/__snapshots__/index.test.jsx.snap

@@ -31,9 +31,9 @@ exports[`InlineLink with link matching routes for SPA should render correctly 1`
 `;
 
 exports[`InlineLink with link not matching SPA route should render correctly 1`] = `
-<InlineLink
+<ForwardRef
   href="https://www.bbc.com/news"
 >
   BBC News
-</InlineLink>
+</ForwardRef>
 `;

src/app/containers/InlineLink/index.jsx

@@ -3,17 +3,15 @@ import { Link } from 'react-router-dom';
 import { string, node } from 'prop-types';
 import InlineLink from '../../components/InlineLink';
 
-const InternalInlineLink = InlineLink.withComponent(Link);
-
 const InlineLinkContainer = ({ href, children, ...rest }) => {
   const regex = '^/news/articles/c[a-zA-Z0-9]{10}o$';
 
   // if URL matches a valid route, use a react-router link
   if (href.match(regex)) {
     return (
-      <InternalInlineLink to={href} {...rest}>
+      <InlineLink as={Link} to={href} {...rest}>
         {children}
-      </InternalInlineLink>
+      </InlineLink>
     );
   }