WIP: upgrade to styled-components v6

Author: sdalonzo

apps/docs/package.json

@@ -22,12 +22,12 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
-    "styled-components": "^5.3.11"
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@mdx-js/loader": "^0.15.5",
     "babel-loader": "^8.2.3",
-    "babel-plugin-styled-components": "^1.13.3",
+    "babel-plugin-styled-components": "^2.1.4",
     "next": "^12.0.7",
     "eslint": "^8.33.0",
     "eslint-config-next": "^12.0.7",

apps/docs/pages/palette.js

@@ -18,7 +18,9 @@ const ColorList = (props) =>
     </Column>
   ))
 
-export const SectionTitle = (props) => <Heading.h3 fontSize={[2, 3]} bold mt={[2, 4]} {...props} />
+export const SectionTitle = (props) => (
+  <Heading.h3 fontSize={[2, 3]} fontWeight='bold' mt={[2, 4]} {...props} />
+)
 
 const defaultPalette = createTheme().palette
 

apps/docs/pages/typography.js

@@ -21,7 +21,7 @@ const Typography = () => (
     </Box>
     <Box py={4}>
       <Heading mb={4}>Font Weight Regular</Heading>
-      <Heading bold mb={4}>
+      <Heading fontWeight='bold' mb={4}>
         Font Weight Bold
       </Heading>
     </Box>

apps/docs/src/SideNav.js

@@ -17,7 +17,7 @@ const SideNav = () => (
     {navigation.map((section) =>
       section.section ? (
         <Box key={section.section}>
-          <Heading color='text' p={3} bold caps fontSize={0}>
+          <Heading color='text' p={3} fontWeight='bold' caps fontSize={0}>
             {section.section}
           </Heading>
           {section.links.map((link) => (

apps/docs/src/components.js

@@ -106,7 +106,9 @@ Table.defaultProps = {
   my: 3,
 }
 
-export const PageTitle = (props) => <Heading.h1 fontSize={[5, 6]} bold mt={[2, 5]} mb={3} {...props} />
+export const PageTitle = (props) => (
+  <Heading.h1 fontSize={[5, 6]} fontWeight='bold' mt={[2, 5]} mb={3} {...props} />
+)
 
 export const Description = (props) => <Text fontSize={[2, 3]} mb={3} {...props} />
 

apps/storybook/package.json

@@ -50,7 +50,7 @@
     "react-is": "^18.2.0",
     "require-from-string": "2.0.2",
     "storybook": "^7.6.19",
-    "styled-components": "^5.3.11",
+    "styled-components": "^6.1.8",
     "typescript": "^5.3.3",
     "vite": "^4.5.3",
     "vite-plugin-turbosnap": "^1.0.3"

common/changes/pcln-autocomplete/styled-components-v6_2024-04-12-13-52.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Upgrade to styled-components v6",
+      "type": "patch",
+      "packageName": "pcln-autocomplete"
+    }
+  ],
+  "packageName": "pcln-autocomplete",
+  "email": "steven.dalonzo@priceline.com"
+}

common/changes/pcln-carousel/styled-components-v6_2024-04-12-13-52.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Upgrade to styled-components v6",
+      "type": "patch",
+      "packageName": "pcln-carousel"
+    }
+  ],
+  "packageName": "pcln-carousel",
+  "email": "steven.dalonzo@priceline.com"
+}

common/changes/pcln-codemods/styled-components-v6_2024-04-12-13-52.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Upgrade to styled-components v6",
+      "type": "patch",
+      "packageName": "pcln-codemods"
+    }
+  ],
+  "packageName": "pcln-codemods",
+  "email": "steven.dalonzo@priceline.com"
+}

common/changes/pcln-design-system/styled-components-v6_2024-04-12-13-52.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Upgrade to styled-components v6",
+      "type": "patch",
+      "packageName": "pcln-design-system"
+    }
+  ],
+  "packageName": "pcln-design-system",
+  "email": "steven.dalonzo@priceline.com"
+}