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

Updated styled-components to v4+ #184

Merged
merged 6 commits into from
Apr 5, 2019
Merged

Updated styled-components to v4+ #184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9d0d5fc
Updated styled-components to v4+
abotteram Apr 2, 2019
b1dc947
Merge branch 'develop' into upgrade-styled-components-to-v4
abotteram Apr 3, 2019
6975f57
Merge branch 'release-yoast-seo/11.0' into upgrade-styled-components-…
abotteram Apr 4, 2019
008ba49
Merge branch 'release-yoast-seo/11.0' into upgrade-styled-components-…
xyfi Apr 5, 2019
56c9a3c
Updated snapshots
abotteram Apr 5, 2019
43b3313
Removed redundant funcrion applyFontStyles
abotteram Apr 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 24 additions & 15 deletions apps/components/ButtonsWrapper.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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