chore(deps): upgrade to styled-components v5 (#566)

BREAKING CHANGE: You will need to update to styled-components v5. In addition, you will need to import the base fonts in your <head> element. See the "Getting Started" page or README.md for an example.
bigcommerce · Jul 29, 2021 · dd83711 · dd83711
1 parent f1b342d
commit dd83711
Show file tree

Hide file tree

Showing 33 changed files with 1,584 additions and 1,431 deletions.
diff --git a/README.md b/README.md
@@ -14,21 +14,31 @@ You can find documentation and examples on our [docs page](https://bigcommerce.g
 
 ### Quick start guide
 
-Add BigDesign and styled-components@4 to your project using `npm`:
+Add BigDesign and styled-components@5 to your project using `npm`:
 
 ```
-npm install @bigcommerce/big-design styled-components@4
+npm install @bigcommerce/big-design styled-components@5
 ```
 
 or with `yarn`:
 
 ```
-yarn add @bigcommerce/big-design styled-components@4
+yarn add @bigcommerce/big-design styled-components@5
 ```
 
-Import the `GlobalStyles` component and use it once in your app. This will set a few styles globally,
-including a base font family, [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro) and [normalize.css](https://github.com/necolas/normalize.css/). We recommend placing it close to your root component.
-Then import any component, such as `Button`, to use it anywhere in your app.
+Add the font as a `<link>` in your `index.html`/`<head>` element.
+
+```html
+<head>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
+  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap" rel="stylesheet" />
+</head>
+```
+
+Import the `GlobalStyles` component and use it once in your app. This will set a few styles globally
+and add [normalize.css](https://github.com/necolas/normalize.css/). We recommend placing it close to
+your root component. Then import any component, such as `Button`, to use it anywhere in your app.
 
 ```jsx
 import { Button, GlobalStyles } from '@bigcommerce/big-design';

diff --git a/packages/big-design-icons/README.md b/packages/big-design-icons/README.md
@@ -8,16 +8,16 @@ You can find documentation, list of icons, and examples on our [docs page](https
 
 ### Quick start guide
 
-Add BigDesign Icons and styled-components@4 to your project using `npm`:
+Add BigDesign Icons and styled-components@5 to your project using `npm`:
 
 ```
-npm install @bigcommerce/big-design-icons styled-components@4
+npm install @bigcommerce/big-design-icons styled-components@5
 ```
 
 or with `yarn`:
 
 ```
-yarn add @bigcommerce/big-design-icons styled-components@4
+yarn add @bigcommerce/big-design-icons styled-components@5
 ```
 
 Import any icon component and use it anywhere in your app.

diff --git a/packages/big-design-icons/package.json b/packages/big-design-icons/package.json
@@ -41,7 +41,7 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "styled-components": "^4.3.0"
+    "styled-components": "^5.3.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.1",
@@ -63,8 +63,8 @@
     "@svgr/plugin-svgo": "^5.0.1",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
-    "@types/styled-components": "^4.1.12",
-    "babel-plugin-styled-components": "^1.10.6",
+    "@types/styled-components": "^5.1.11",
+    "babel-plugin-styled-components": "^1.13.2",
     "camelcase": "^5.3.1",
     "fs-extra": "^8.1.0",
     "glob": "^7.1.4",
@@ -76,7 +76,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
-    "styled-components": "^4.3.0",
+    "styled-components": "^5.3.0",
     "typescript": "^4.3.5",
     "typescript-styled-plugin": "^0.15.0"
   }

diff --git a/packages/big-design-theme/README.md b/packages/big-design-theme/README.md
@@ -17,16 +17,16 @@ This package is only meant to be used directly when more advanced features are n
 
 ### Quick start guide
 
-Add the BigDesign theme and styled-components@4 to your project using `npm`:
+Add the BigDesign theme and styled-components@5 to your project using `npm`:
 
 ```
-npm install @bigcommerce/big-design-theme styled-components@4
+npm install @bigcommerce/big-design-theme styled-components@5
 ```
 
 or with `yarn`:
 
 ```
-yarn add @bigcommerce/big-design-theme styled-components@4
+yarn add @bigcommerce/big-design-theme styled-components@5
 ```
 
 ```tsx

diff --git a/packages/big-design-theme/package.json b/packages/big-design-theme/package.json
@@ -37,7 +37,7 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "styled-components": "^4.3.0"
+    "styled-components": "^5.3.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.1",
@@ -53,16 +53,16 @@
     "@babel/preset-typescript": "^7.12.1",
     "@bigcommerce/configs": "^0.15.0-alpha.0",
     "@types/jest": "^25.2.1",
-    "@types/styled-components": "^4.1.12",
+    "@types/styled-components": "^5.1.11",
     "babel-jest": "^25.5.1",
-    "babel-plugin-styled-components": "^1.10.6",
+    "babel-plugin-styled-components": "^1.13.2",
     "concurrently": "^6.2.0",
     "jest": "^25.5.4",
-    "jest-styled-components": "^6.3.1",
+    "jest-styled-components": "^7.0.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
-    "styled-components": "^4.3.0",
+    "styled-components": "^5.3.0",
     "typescript": "^4.3.5",
     "typescript-styled-plugin": "^0.15.0"
   }

diff --git a/packages/big-design/README.md b/packages/big-design/README.md
@@ -8,21 +8,31 @@ You can find documentation and examples on our [docs page](https://bigcommerce.g
 
 ### Quick start guide
 
-Add BigDesign and styled-components@4 to your project using `npm`:
+Add BigDesign and styled-components@5 to your project using `npm`:
 
 ```
-npm install @bigcommerce/big-design styled-components@4
+npm install @bigcommerce/big-design styled-components@5
 ```
 
 or with `yarn`:
 
 ```
-yarn add @bigcommerce/big-design styled-components@4
+yarn add @bigcommerce/big-design styled-components@5
 ```
 
-Import the `GlobalStyles` component and use it once in your app. This will set a few styles globally,
-including a base font family, [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro) and [normalize.css](https://github.com/necolas/normalize.css/). We recommend placing it close to your root component.
-Then import any component, such as `Button`, to use it anywhere in your app.
+Add the font as a `<link>` in your `index.html`/`<head>` element.
+
+```html
+<head>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
+  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap" rel="stylesheet" />
+</head>
+```
+
+Import the `GlobalStyles` component and use it once in your app. This will set a few styles globally
+and add [normalize.css](https://github.com/necolas/normalize.css/). We recommend placing it close to
+your root component. Then import any component, such as `Button`, to use it anywhere in your app.
 
 ```jsx
 import { Button, GlobalStyles } from '@bigcommerce/big-design';

diff --git a/packages/big-design/package.json b/packages/big-design/package.json
@@ -49,7 +49,7 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "styled-components": "^4.3.0"
+    "styled-components": "^5.3.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.1",
@@ -73,17 +73,17 @@
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-dom": "^17.0.1",
     "@types/react-test-renderer": "^17.0.1",
-    "@types/styled-components": "^4.1.12",
+    "@types/styled-components": "^5.1.11",
     "babel-jest": "^25.5.1",
-    "babel-plugin-styled-components": "^1.10.6",
+    "babel-plugin-styled-components": "^1.13.2",
     "concurrently": "^6.2.0",
     "jest": "^25.5.4",
-    "jest-styled-components": "^6.3.1",
+    "jest-styled-components": "^7.0.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-test-renderer": "^17.0.1",
     "rimraf": "^3.0.2",
-    "styled-components": "^4.3.0",
+    "styled-components": "^5.3.0",
     "typescript": "^4.3.5",
     "typescript-styled-plugin": "^0.15.0"
   }