Updated styled component to v4+

packages/yoast-components/app/ButtonsWrapper.js

@@ -7,7 +7,7 @@ import { YoastButton } from "../composites/Plugin/Shared/components/YoastButton"
 import { YoastLinkButton } from "../composites/Plugin/Shared/components/YoastLinkButton";
 import { BaseButton, Button, IconButton, IconsButton } from "../composites/Plugin/Shared/components/Button";
 import IconButtonToggle from "../composites/Plugin/Shared/components/IconButtonToggle";
-import { BaseLinkButton, LinkButton } from "../composites/Plugin/Shared/components/LinkButton";
+import { LinkButton } from "../composites/Plugin/Shared/components/LinkButton";
 import FormButton from "../forms/Button";
 import IconLabelledButton from "../composites/Plugin/Shared/components/IconLabelledButton";
 
@@ -57,15 +57,15 @@ export default class ButtonsList extends React.Component {
 	 * @returns {void}
 	 */
 	updateIconButtonTogglePressed() {
-		this.setState( {
-			iconButtonTogglePressed: ! this.state.iconButtonTogglePressed,
-		} );
+		this.setState( prevState => ( {
+			iconButtonTogglePressed: ! prevState.iconButtonTogglePressed,
+		} ) );
 	}
 
 	/**
 	 * Renders all the buttons.
 	 *
-	 * @returns {ReactElement} The rendered list of buttons.
+	 * @returns {React.Element} The rendered list of buttons.
 	 */
 	render() {
 		return (
@@ -76,7 +76,6 @@ export default class ButtonsList extends React.Component {
 				<IconButton icon="edit" iconColor="#c00" aria-label="IconButton with icon only" />{ " " }
 				<IconsButton prefixIcon={ { icon: "search" } } suffixIcon={ { icon: "plus" } }>IconsButton</IconsButton>
 				<Separator />
-				<BaseLinkButton href="#someresource">BaseLinkButton</BaseLinkButton>{ " " }
 				<LinkButton href="#someresource">LinkButton</LinkButton>
 				<Separator />
 				<IconButtonToggle
@@ -149,7 +148,6 @@ export default class ButtonsList extends React.Component {
 				<IconButton icon="edit" iconColor="#c00" aria-label="IconButton with icon only" />{ " " }
 				<IconButton icon="edit" iconColor="#c00" className="with-max-width">With max-width and long text</IconButton>{ " " }
 				<h3>Links</h3>
-				<BaseLinkButton href="#somewhere1">Base</BaseLinkButton>{ " " }
 				<LinkButton href="#somewhere2">Button</LinkButton>{ " " }
 				<YoastLinkButton href="#somewhere4" backgroundColor="lightblue" textColor="#333" withTextShadow={ false }>
 					Color

packages/yoast-components/composites/AlgoliaSearch/AlgoliaSearcher.js

@@ -302,7 +302,7 @@ class AlgoliaSearcher extends React.Component {
 	getSearchView() {
 		return (
 			<AlgoliaSearchWrapper
-				innerRef={ ( el ) => {
+				ref={ ( el ) => {
 					this.searchViewWrapper = el;
 				} }
 			>

packages/yoast-components/composites/AlgoliaSearch/SearchResultDetail.js

@@ -113,7 +113,7 @@ class SearchResultDetail extends React.Component {
 			<Detail
 				aria-label={ searchResulLabel }
 				tabIndex="-1"
-				innerRef={ ( el ) => {
+				ref={ ( el ) => {
 					this.detailWrapper = el;
 				} }
 			>

packages/yoast-components/composites/AlgoliaSearch/tests/__snapshots__/AlgoliaSearcherTest.js.snap

@@ -1,33 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`the AlgoliaSearcher component with headingText matches the snapshot 1`] = `
-.c5 {
+.c4 {
   color: #fff;
   background: #64a60a;
   min-width: 152px;
   text-shadow: 0 0 2px #000;
   overflow: visible;
   cursor: pointer;
-}
-
-.c5::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c5 span {
-  display: inherit;
-  -webkit-align-items: inherit;
-  -webkit-box-align: inherit;
-  -ms-flex-align: inherit;
-  align-items: inherit;
-  -webkit-box-pack: inherit;
-  -webkit-justify-content: inherit;
-  -ms-flex-pack: inherit;
-  justify-content: inherit;
-  width: 100%;
-}
-
-.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -55,6 +35,23 @@ exports[`the AlgoliaSearcher component with headingText matches the snapshot 1`]
   transition: box-shadow 150ms ease-out;
 }
 
+.c4::-moz-focus-inner {
+  border-width: 0;
+}
+
+.c4 span {
+  display: inherit;
+  -webkit-align-items: inherit;
+  -webkit-box-align: inherit;
+  -ms-flex-align: inherit;
+  align-items: inherit;
+  -webkit-box-pack: inherit;
+  -webkit-justify-content: inherit;
+  -ms-flex-pack: inherit;
+  justify-content: inherit;
+  width: 100%;
+}
+
 .c4:hover,
 .c4:focus,
 .c4:active {
@@ -163,7 +160,7 @@ exports[`the AlgoliaSearcher component with headingText matches the snapshot 1`]
       />
       <button
         aria-expanded={undefined}
-        className="c4 c5"
+        className="c4"
         onClick={undefined}
         type="submit"
       >

packages/yoast-components/composites/AlgoliaSearch/tests/__snapshots__/SearchBarTest.js.snap

@@ -1,33 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`the SearchBar component with headingText matches the snapshot 1`] = `
-.c4 {
+.c3 {
   color: #fff;
   background: #64a60a;
   min-width: 152px;
   text-shadow: 0 0 2px #000;
   overflow: visible;
   cursor: pointer;
-}
-
-.c4::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c4 span {
-  display: inherit;
-  -webkit-align-items: inherit;
-  -webkit-box-align: inherit;
-  -ms-flex-align: inherit;
-  align-items: inherit;
-  -webkit-box-pack: inherit;
-  -webkit-justify-content: inherit;
-  -ms-flex-pack: inherit;
-  justify-content: inherit;
-  width: 100%;
-}
-
-.c3 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -55,6 +35,23 @@ exports[`the SearchBar component with headingText matches the snapshot 1`] = `
   transition: box-shadow 150ms ease-out;
 }
 
+.c3::-moz-focus-inner {
+  border-width: 0;
+}
+
+.c3 span {
+  display: inherit;
+  -webkit-align-items: inherit;
+  -webkit-box-align: inherit;
+  -ms-flex-align: inherit;
+  align-items: inherit;
+  -webkit-box-pack: inherit;
+  -webkit-justify-content: inherit;
+  -ms-flex-pack: inherit;
+  justify-content: inherit;
+  width: 100%;
+}
+
 .c3:hover,
 .c3:focus,
 .c3:active {
@@ -155,7 +152,7 @@ exports[`the SearchBar component with headingText matches the snapshot 1`] = `
     />
     <button
       aria-expanded={undefined}
-      className="c3 c4"
+      className="c3"
       onClick={undefined}
       type="submit"
     >
@@ -168,33 +165,13 @@ exports[`the SearchBar component with headingText matches the snapshot 1`] = `
 `;
 
 exports[`the SearchBar component without headingText matches the snapshot 1`] = `
-.c4 {
+.c3 {
   color: #fff;
   background: #64a60a;
   min-width: 152px;
   text-shadow: 0 0 2px #000;
   overflow: visible;
   cursor: pointer;
-}
-
-.c4::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c4 span {
-  display: inherit;
-  -webkit-align-items: inherit;
-  -webkit-box-align: inherit;
-  -ms-flex-align: inherit;
-  align-items: inherit;
-  -webkit-box-pack: inherit;
-  -webkit-justify-content: inherit;
-  -ms-flex-pack: inherit;
-  justify-content: inherit;
-  width: 100%;
-}
-
-.c3 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -222,6 +199,23 @@ exports[`the SearchBar component without headingText matches the snapshot 1`] =
   transition: box-shadow 150ms ease-out;
 }
 
+.c3::-moz-focus-inner {
+  border-width: 0;
+}
+
+.c3 span {
+  display: inherit;
+  -webkit-align-items: inherit;
+  -webkit-box-align: inherit;
+  -ms-flex-align: inherit;
+  align-items: inherit;
+  -webkit-box-pack: inherit;
+  -webkit-justify-content: inherit;
+  -ms-flex-pack: inherit;
+  justify-content: inherit;
+  width: 100%;
+}
+
 .c3:hover,
 .c3:focus,
 .c3:active {
@@ -322,7 +316,7 @@ exports[`the SearchBar component without headingText matches the snapshot 1`] =
     />
     <button
       aria-expanded={undefined}
-      className="c3 c4"
+      className="c3"
       onClick={undefined}
       type="submit"
     >