Skip to content
This repository has been archived by the owner on Oct 4, 2022. It is now read-only.

Commit

Permalink
Merge pull request #184 from Yoast/upgrade-styled-components-to-v4
Browse files Browse the repository at this point in the history 
Updated styled-components to v4+
  • Loading branch information
@moorscode
moorscode committed Apr 5, 2019
2 parents 0454737 + 43b3313 commit 35a88ae
Show file tree
Hide file tree
Showing 65 changed files with 35,504 additions and 23,321 deletions.
39 changes: 24 additions & 15 deletions apps/components/ButtonsWrapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import styled from "styled-components";
// Yoast dependencies.
import {
BaseButton,
BaseLinkButton,
Button,
IconButton,
IconButtonToggle,
Expand All @@ -15,7 +14,7 @@ import {
UpsellButton,
UpsellLinkButton,
YoastButton,
YoastLinkButton
YoastLinkButton,
} from "@yoast/components";

const ButtonsContainer = styled.div`
Expand All @@ -40,12 +39,14 @@ const Separator = styled.hr`
/**
* Renders all the yoast-component Buttons.
*
* @returns {ReactElement} The Buttons container component.
* @returns {React.Element} The Buttons container component.
*/
export default class ButtonsList extends React.Component {
/**
* Constructs the Buttons container.
*
* @param {Object} props The component's props.
*
* @returns {void}
*/
constructor( props ) {
Expand All @@ -64,15 +65,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 (
Expand All @@ -83,7 +84,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
Expand Down Expand Up @@ -131,8 +131,12 @@ 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>{ " " }
<YoastButton backgroundColor="lightblue" textColor="#333"
withTextShadow={ false }>Color</YoastButton>{ " " }
<YoastButton
backgroundColor="lightblue" textColor="#333"
withTextShadow={ false }
>
Color
</YoastButton>{ " " }
<YoastButton className="test-large-button">Min width</YoastButton>{ " " }

<h2>Test min-height bugs</h2>
Expand All @@ -145,17 +149,22 @@ export default class ButtonsList extends React.Component {
</p>
<h3>Buttons</h3>
<BaseButton>Base</BaseButton>{ " " }
<YoastButton backgroundColor="lightblue" textColor="#333"
withTextShadow={ false }>Color</YoastButton>{ " " }
<YoastButton
backgroundColor="lightblue" textColor="#333"
withTextShadow={ false }
>
Color
</YoastButton>{ " " }
<YoastButton className="test-large-button">Min width</YoastButton>{ " " }
<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 }>
<YoastLinkButton
href="#somewhere4" backgroundColor="lightblue" textColor="#333"
withTextShadow={ false }
>
Color
</YoastLinkButton>{ " " }
<YoastLinkButton className="test-large-button" href="#somewhere3">Min width</YoastLinkButton>
Expand Down
66 changes: 26 additions & 40 deletions apps/components/tests/__snapshots__/appTest.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,21 +155,21 @@ exports[`App renders without problems 1`] = `
className="ButtonsWrapper__ButtonsContainer-sc-1nb1s31-0 cDHlch"
>
<button
className="Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
className="Button__BaseButton-sc-32rbq-4 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 glyHEG"
type="button"
>
BaseButton
</button>
<button
className="Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
className="Button__BaseButton-sc-32rbq-4 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 glyHEG"
type="button"
>
Button
</button>
<button
className="Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
className="Button__BaseButton-sc-32rbq-4 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 glyHEG"
type="button"
>
<svg
Expand All @@ -191,7 +191,7 @@ exports[`App renders without problems 1`] = `
<button
aria-label="IconButton with icon only"
className="Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
className="Button__BaseButton-sc-32rbq-4 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 glyHEG"
type="button"
>
<svg
Expand All @@ -211,7 +211,7 @@ exports[`App renders without problems 1`] = `
</button>
<button
className="Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
className="Button__BaseButton-sc-32rbq-4 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 glyHEG"
type="button"
>
<svg
Expand Down Expand Up @@ -248,14 +248,7 @@ exports[`App renders without problems 1`] = `
className="ButtonsWrapper__Separator-sc-1nb1s31-1 ZmEFB"
/>
<a
className="Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv LinkButton__BaseLinkButton-sc-8lzs74-0 dkXoPT"
href="#someresource"
>
BaseLinkButton
</a>
<a
className="Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv LinkButton__BaseLinkButton-sc-8lzs74-0 dkXoPT"
className="LinkButton-sc-8lzs74-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 eSBBKS"
href="#someresource"
>
LinkButton
Expand Down Expand Up @@ -293,7 +286,7 @@ exports[`App renders without problems 1`] = `
/>
<button
aria-expanded={undefined}
className="YoastButton-gx5w7q-0 kHUgXc YoastButton-gx5w7q-1 bQXGlm"
className="YoastButton-gx5w7q-1 YoastButton-gx5w7q-0 dnvPfT"
onClick={undefined}
type="button"
>
Expand All @@ -304,7 +297,7 @@ exports[`App renders without problems 1`] = `
<button
aria-expanded={undefined}
className="UpsellButton-sc-7vlxuh-1 nVzPF UpsellButton__UpsellButtonBase-sc-7vlxuh-2 cAGllX"
className="UpsellButton__UpsellButtonBase-sc-7vlxuh-2 UpsellButton-sc-7vlxuh-1 dMNgsz"
onClick={undefined}
type="button"
>
Expand Down Expand Up @@ -337,7 +330,7 @@ exports[`App renders without problems 1`] = `
className="ButtonsWrapper__Separator-sc-1nb1s31-1 ZmEFB"
/>
<button
className="Button-sc-32rbq-2 emdVop Button-sc-32rbq-1 kYzALm Button-sc-32rbq-3 bYChMW IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 ITzLP"
className="IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 oyBPh"
type="button"
>
<svg
Expand All @@ -357,7 +350,7 @@ exports[`App renders without problems 1`] = `
Need help?
</button>
<button
className="Button-sc-32rbq-2 emdVop Button-sc-32rbq-1 kYzALm Button-sc-32rbq-3 bYChMW IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 ITzLP"
className="IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 oyBPh"
type="button"
>
<svg
Expand All @@ -377,7 +370,7 @@ exports[`App renders without problems 1`] = `
Settings
</button>
<button
className="Button-sc-32rbq-2 dpPCCR Button-sc-32rbq-1 kYzALm Button-sc-32rbq-3 bYChMW IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 ITzLP"
className="IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 jXoQXj"
type="button"
>
<svg
Expand All @@ -397,7 +390,7 @@ exports[`App renders without problems 1`] = `
Custom Hover
</button>
<button
className="Button-sc-32rbq-2 emdVop Button-sc-32rbq-1 JPjJJ Button-sc-32rbq-3 bYChMW IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 ITzLP"
className="IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 dpAKxO"
type="button"
>
<svg
Expand All @@ -417,7 +410,7 @@ exports[`App renders without problems 1`] = `
Custom Focus
</button>
<button
className="Button-sc-32rbq-2 emdVop Button-sc-32rbq-1 kYzALm Button-sc-32rbq-3 fEWBQa IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 ITzLP"
className="IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 gEmqXM"
type="button"
>
<svg
Expand All @@ -437,7 +430,7 @@ exports[`App renders without problems 1`] = `
Custom Active
</button>
<button
className="Button-sc-32rbq-2 emdVop Button-sc-32rbq-1 kYzALm Button-sc-32rbq-3 bYChMW IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 jHiVsN"
className="IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 gecabx"
type="button"
>
<svg
Expand All @@ -464,7 +457,7 @@ exports[`App renders without problems 1`] = `
</h2>
<button
aria-label="IconButton with icon only"
className="Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
className="Button__BaseButton-sc-32rbq-4 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 glyHEG"
type="button"
>
<svg
Expand All @@ -484,7 +477,7 @@ exports[`App renders without problems 1`] = `
</button>
<button
className="with-max-width Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
className="Button__BaseButton-sc-32rbq-4 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 with-max-width Button-sc-32rbq-0 glyHEG"
type="button"
>
<svg
Expand All @@ -506,7 +499,7 @@ exports[`App renders without problems 1`] = `
<button
aria-expanded={undefined}
className="YoastButton-gx5w7q-0 ZkSNk YoastButton-gx5w7q-1 clbiFf"
className="YoastButton-gx5w7q-1 YoastButton-gx5w7q-0 fQIjQA"
onClick={undefined}
type="button"
>
Expand All @@ -517,7 +510,7 @@ exports[`App renders without problems 1`] = `
<button
aria-expanded={undefined}
className="test-large-button YoastButton-gx5w7q-0 kHUgXc YoastButton-gx5w7q-1 bQXGlm"
className="YoastButton-gx5w7q-1 test-large-button YoastButton-gx5w7q-0 dnvPfT"
onClick={undefined}
type="button"
>
Expand Down Expand Up @@ -547,15 +540,15 @@ exports[`App renders without problems 1`] = `
Buttons
</h3>
<button
className="Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
className="Button__BaseButton-sc-32rbq-4 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 glyHEG"
type="button"
>
Base
</button>
<button
aria-expanded={undefined}
className="YoastButton-gx5w7q-0 ZkSNk YoastButton-gx5w7q-1 clbiFf"
className="YoastButton-gx5w7q-1 YoastButton-gx5w7q-0 fQIjQA"
onClick={undefined}
type="button"
>
Expand All @@ -566,7 +559,7 @@ exports[`App renders without problems 1`] = `
<button
aria-expanded={undefined}
className="test-large-button YoastButton-gx5w7q-0 kHUgXc YoastButton-gx5w7q-1 bQXGlm"
className="YoastButton-gx5w7q-1 test-large-button YoastButton-gx5w7q-0 dnvPfT"
onClick={undefined}
type="button"
>
Expand All @@ -577,7 +570,7 @@ exports[`App renders without problems 1`] = `
<button
aria-label="IconButton with icon only"
className="Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
className="Button__BaseButton-sc-32rbq-4 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 glyHEG"
type="button"
>
<svg
Expand All @@ -597,7 +590,7 @@ exports[`App renders without problems 1`] = `
</button>
<button
className="with-max-width Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
className="Button__BaseButton-sc-32rbq-4 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 with-max-width Button-sc-32rbq-0 glyHEG"
type="button"
>
<svg
Expand All @@ -621,28 +614,21 @@ exports[`App renders without problems 1`] = `
Links
</h3>
<a
className="Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv LinkButton__BaseLinkButton-sc-8lzs74-0 dkXoPT"
href="#somewhere1"
>
Base
</a>
<a
className="Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv LinkButton__BaseLinkButton-sc-8lzs74-0 dkXoPT"
className="LinkButton-sc-8lzs74-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 eSBBKS"
href="#somewhere2"
>
Button
</a>
<a
className="YoastButton-gx5w7q-0 ZkSNk YoastLinkButton-dntyts-0 kwzqgY"
className="YoastLinkButton-dntyts-0 YoastButton-gx5w7q-0 kVjfWG"
href="#somewhere4"
>
Color
</a>
<a
className="test-large-button YoastButton-gx5w7q-0 kHUgXc YoastLinkButton-dntyts-0 cWHZQQ"
className="YoastLinkButton-dntyts-0 test-large-button YoastButton-gx5w7q-0 exJvQq"
href="#somewhere3"
>
Min width
Expand Down
6 changes: 3 additions & 3 deletions packages/algolia-search-box/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,17 @@
"prop-types": "^15.6.0",
"react": "16.6.3",
"react-intl": "^2.4.0",
"styled-components": "^2.1.2"
"styled-components": "^4.2.0"
},
"devDependencies": {
"babel-jest": "^24.5.0",
"babel-loader": "^7.1.1",
"babel-plugin-styled-components": "^1.5.1",
"babel-plugin-styled-components": "^1.10.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"enzyme-to-json": "^3.3.3",
"jest": "^24.5.0",
"jest-styled-components": "5.0.1",
"jest-styled-components": "^6.3.1",
"react-test-renderer": "16.8.4"
},
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion packages/algolia-search-box/src/AlgoliaSearcher.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ class AlgoliaSearcher extends React.Component {
getSearchView() {
return (
<AlgoliaSearchWrapper
innerRef={ ( el ) => {
ref={ ( el ) => {
this.searchViewWrapper = el;
} }
>
Expand Down
2 changes: 1 addition & 1 deletion packages/algolia-search-box/src/SearchResultDetail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ class SearchResultDetail extends React.Component {
<Detail
aria-label={ searchResulLabel }
tabIndex="-1"
innerRef={ ( el ) => {
ref={ ( el ) => {
this.detailWrapper = el;
} }
>
Expand Down

0 comments on commit 35a88ae

Please sign in to comment.