diff --git a/gatsby-config.ts b/gatsby-config.ts index fda9225139..344ed3396a 100644 --- a/gatsby-config.ts +++ b/gatsby-config.ts @@ -30,7 +30,6 @@ export const graphqlTypegen = true; export const plugins = [ 'gatsby-plugin-postcss', - 'gatsby-plugin-styled-components', 'gatsby-plugin-image', 'gatsby-plugin-sharp', 'gatsby-transformer-yaml', diff --git a/package-lock.json b/package-lock.json index 9501194ffd..f7d4b7a288 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,6 @@ "@types/cheerio": "^0.22.31", "@types/prop-types": "^15.7.4", "addsearch-js-client": "^0.7.0", - "babel-plugin-styled-components": "^2.0.2", "cheerio": "^1.0.0-rc.10", "classnames": "^2.3.1", "diff": "^5.1.0", @@ -31,7 +30,6 @@ "gatsby-plugin-root-import": "^2.0.9", "gatsby-plugin-sharp": "^5.8.1", "gatsby-plugin-sitemap": "^6.12.1", - "gatsby-plugin-styled-components": "^6.3.0", "gatsby-source-filesystem": "^5.12.0", "gatsby-transformer-remark": "^6.12.0", "gatsby-transformer-sharp": "^5.3.0", @@ -47,7 +45,6 @@ "react-helmet": "^6.1.0", "react-medium-image-zoom": "^5.1.2", "react-select": "^5.7.0", - "styled-components": "^5.3.3", "tailwindcss": "^2.2.19", "tailwindcss-filters": "^2.0.0", "textile-js": "^2.1.1", @@ -73,7 +70,6 @@ "@types/lodash.throttle": "^4.1.7", "@types/react-helmet": "^6.1.6", "@types/react-test-renderer": "^18.0.0", - "@types/styled-components": "^5.1.26", "@types/turndown": "^5.0.1", "@typescript-eslint/eslint-plugin": "^5.46.1", "autoprefixer": "^10.4.13", @@ -2401,14 +2397,6 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" }, - "node_modules/@emotion/is-prop-valid": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", - "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", - "dependencies": { - "@emotion/memoize": "^0.8.1" - } - }, "node_modules/@emotion/memoize": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", @@ -2454,11 +2442,6 @@ "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" }, - "node_modules/@emotion/stylis": { - "version": "0.8.5", - "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" - }, "node_modules/@emotion/unitless": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", @@ -6447,16 +6430,6 @@ "@types/unist": "^2" } }, - "node_modules/@types/hoist-non-react-statics": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.3.tgz", - "integrity": "sha512-Wny3a2UXn5FEA1l7gc6BbpoV5mD1XijZqgkp4TRgDCDL5r3B5ieOFGUX5h3n78Tr1MEG7BfvoM8qeztdvNU0fw==", - "dev": true, - "dependencies": { - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0" - } - }, "node_modules/@types/http-cache-semantics": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.2.tgz", @@ -6767,17 +6740,6 @@ "integrity": "sha512-NwCYScf83RIwCyi5/9cXocrJB//xrqMh5PMw3mYTSFGaI3DuVjBLfO/PCk7QVAC3Da8b9NjxNmTO9Aj9T3rl/Q==", "dev": true }, - "node_modules/@types/styled-components": { - "version": "5.1.28", - "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.28.tgz", - "integrity": "sha512-nu0VKNybkjvUqJAXWtRqKd7j3iRUl8GbYSTvZNuIBJcw/HUp1Y4QUXNLlj7gcnRV/t784JnHAlvRnSnE3nPbJA==", - "dev": true, - "dependencies": { - "@types/hoist-non-react-statics": "*", - "@types/react": "*", - "csstype": "^3.0.2" - } - }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz", @@ -8429,21 +8391,6 @@ "gatsby": "^5.0.0-next" } }, - "node_modules/babel-plugin-styled-components": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz", - "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==", - "dependencies": { - "@babel/helper-annotate-as-pure": "^7.22.5", - "@babel/helper-module-imports": "^7.22.5", - "@babel/plugin-syntax-jsx": "^7.22.5", - "lodash": "^4.17.21", - "picomatch": "^2.3.1" - }, - "peerDependencies": { - "styled-components": ">= 2" - } - }, "node_modules/babel-plugin-syntax-trailing-function-commas": { "version": "7.0.0-beta.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz", @@ -9109,14 +9056,6 @@ "node": ">= 6" } }, - "node_modules/camelize": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", - "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -10354,14 +10293,6 @@ "node": ">=8" } }, - "node_modules/css-color-keywords": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", - "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", - "engines": { - "node": ">=4" - } - }, "node_modules/css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -10498,16 +10429,6 @@ "resolved": "https://registry.npmjs.org/css-selector-parser/-/css-selector-parser-1.4.1.tgz", "integrity": "sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==" }, - "node_modules/css-to-react-native": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", - "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", - "dependencies": { - "camelize": "^1.0.0", - "css-color-keywords": "^1.0.0", - "postcss-value-parser": "^4.0.2" - } - }, "node_modules/css-tree": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", @@ -14622,24 +14543,6 @@ "react-dom": "^18.0.0 || ^0.0.0" } }, - "node_modules/gatsby-plugin-styled-components": { - "version": "6.13.0", - "resolved": "https://registry.npmjs.org/gatsby-plugin-styled-components/-/gatsby-plugin-styled-components-6.13.0.tgz", - "integrity": "sha512-7cqwnwg9YXTTpUuJSemey7bP/TeUZ3cgnFT81AU6qgosNB1y+eaHRHQuNjM+AMGcnkjwxnYP1RDGfn0pMxSOTg==", - "dependencies": { - "@babel/runtime": "^7.20.13" - }, - "engines": { - "node": ">=18.0.0" - }, - "peerDependencies": { - "babel-plugin-styled-components": ">1.5.0", - "gatsby": "^5.0.0-next", - "react": "^18.0.0 || ^0.0.0", - "react-dom": "^18.0.0 || ^0.0.0", - "styled-components": ">=2.0.0" - } - }, "node_modules/gatsby-plugin-typescript": { "version": "5.13.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-5.13.0.tgz", @@ -27527,7 +27430,8 @@ "node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", - "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", + "dev": true }, "node_modules/react-medium-image-zoom": { "version": "5.1.8", @@ -29128,11 +29032,6 @@ "resolved": "https://registry.npmjs.org/shallow-compare/-/shallow-compare-1.2.2.tgz", "integrity": "sha512-LUMFi+RppPlrHzbqmFnINTrazo0lPNwhcgzuAXVVcfy/mqPDrQmHAyz5bvV0gDAuRFrk804V0HpQ6u9sZ0tBeg==" }, - "node_modules/shallowequal": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", - "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" - }, "node_modules/sharp": { "version": "0.32.6", "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz", @@ -29980,40 +29879,6 @@ "inline-style-parser": "0.1.1" } }, - "node_modules/styled-components": { - "version": "5.3.11", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", - "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", - "dependencies": { - "@babel/helper-module-imports": "^7.0.0", - "@babel/traverse": "^7.4.5", - "@emotion/is-prop-valid": "^1.1.0", - "@emotion/stylis": "^0.8.4", - "@emotion/unitless": "^0.7.4", - "babel-plugin-styled-components": ">= 1.12.0", - "css-to-react-native": "^3.0.0", - "hoist-non-react-statics": "^3.0.0", - "shallowequal": "^1.1.0", - "supports-color": "^5.5.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/styled-components" - }, - "peerDependencies": { - "react": ">= 16.8.0", - "react-dom": ">= 16.8.0", - "react-is": ">= 16.8.0" - } - }, - "node_modules/styled-components/node_modules/@emotion/unitless": { - "version": "0.7.5", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", - "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" - }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -34147,14 +34012,6 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" }, - "@emotion/is-prop-valid": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", - "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", - "requires": { - "@emotion/memoize": "^0.8.1" - } - }, "@emotion/memoize": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", @@ -34192,11 +34049,6 @@ "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" }, - "@emotion/stylis": { - "version": "0.8.5", - "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" - }, "@emotion/unitless": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", @@ -37062,16 +36914,6 @@ "@types/unist": "^2" } }, - "@types/hoist-non-react-statics": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.3.tgz", - "integrity": "sha512-Wny3a2UXn5FEA1l7gc6BbpoV5mD1XijZqgkp4TRgDCDL5r3B5ieOFGUX5h3n78Tr1MEG7BfvoM8qeztdvNU0fw==", - "dev": true, - "requires": { - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0" - } - }, "@types/http-cache-semantics": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.2.tgz", @@ -37375,17 +37217,6 @@ "integrity": "sha512-NwCYScf83RIwCyi5/9cXocrJB//xrqMh5PMw3mYTSFGaI3DuVjBLfO/PCk7QVAC3Da8b9NjxNmTO9Aj9T3rl/Q==", "dev": true }, - "@types/styled-components": { - "version": "5.1.28", - "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.28.tgz", - "integrity": "sha512-nu0VKNybkjvUqJAXWtRqKd7j3iRUl8GbYSTvZNuIBJcw/HUp1Y4QUXNLlj7gcnRV/t784JnHAlvRnSnE3nPbJA==", - "dev": true, - "requires": { - "@types/hoist-non-react-statics": "*", - "@types/react": "*", - "csstype": "^3.0.2" - } - }, "@types/testing-library__jest-dom": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz", @@ -38608,18 +38439,6 @@ "gatsby-core-utils": "^4.13.0" } }, - "babel-plugin-styled-components": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz", - "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==", - "requires": { - "@babel/helper-annotate-as-pure": "^7.22.5", - "@babel/helper-module-imports": "^7.22.5", - "@babel/plugin-syntax-jsx": "^7.22.5", - "lodash": "^4.17.21", - "picomatch": "^2.3.1" - } - }, "babel-plugin-syntax-trailing-function-commas": { "version": "7.0.0-beta.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz", @@ -39113,11 +38932,6 @@ "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==" }, - "camelize": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", - "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==" - }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -40018,11 +39832,6 @@ "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==" }, - "css-color-keywords": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", - "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==" - }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -40112,16 +39921,6 @@ "resolved": "https://registry.npmjs.org/css-selector-parser/-/css-selector-parser-1.4.1.tgz", "integrity": "sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==" }, - "css-to-react-native": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", - "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", - "requires": { - "camelize": "^1.0.0", - "css-color-keywords": "^1.0.0", - "postcss-value-parser": "^4.0.2" - } - }, "css-tree": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", @@ -43465,14 +43264,6 @@ "sitemap": "^7.1.1" } }, - "gatsby-plugin-styled-components": { - "version": "6.13.0", - "resolved": "https://registry.npmjs.org/gatsby-plugin-styled-components/-/gatsby-plugin-styled-components-6.13.0.tgz", - "integrity": "sha512-7cqwnwg9YXTTpUuJSemey7bP/TeUZ3cgnFT81AU6qgosNB1y+eaHRHQuNjM+AMGcnkjwxnYP1RDGfn0pMxSOTg==", - "requires": { - "@babel/runtime": "^7.20.13" - } - }, "gatsby-plugin-typescript": { "version": "5.13.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-5.13.0.tgz", @@ -52189,7 +51980,8 @@ "react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", - "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", + "dev": true }, "react-medium-image-zoom": { "version": "5.1.8", @@ -53352,11 +53144,6 @@ "resolved": "https://registry.npmjs.org/shallow-compare/-/shallow-compare-1.2.2.tgz", "integrity": "sha512-LUMFi+RppPlrHzbqmFnINTrazo0lPNwhcgzuAXVVcfy/mqPDrQmHAyz5bvV0gDAuRFrk804V0HpQ6u9sZ0tBeg==" }, - "shallowequal": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", - "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" - }, "sharp": { "version": "0.32.6", "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz", @@ -53988,30 +53775,6 @@ "inline-style-parser": "0.1.1" } }, - "styled-components": { - "version": "5.3.11", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", - "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", - "requires": { - "@babel/helper-module-imports": "^7.0.0", - "@babel/traverse": "^7.4.5", - "@emotion/is-prop-valid": "^1.1.0", - "@emotion/stylis": "^0.8.4", - "@emotion/unitless": "^0.7.4", - "babel-plugin-styled-components": ">= 1.12.0", - "css-to-react-native": "^3.0.0", - "hoist-non-react-statics": "^3.0.0", - "shallowequal": "^1.1.0", - "supports-color": "^5.5.0" - }, - "dependencies": { - "@emotion/unitless": { - "version": "0.7.5", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", - "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" - } - } - }, "stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", diff --git a/package.json b/package.json index 2a4f71ad61..0d855aa65c 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,6 @@ "@types/cheerio": "^0.22.31", "@types/prop-types": "^15.7.4", "addsearch-js-client": "^0.7.0", - "babel-plugin-styled-components": "^2.0.2", "cheerio": "^1.0.0-rc.10", "classnames": "^2.3.1", "diff": "^5.1.0", @@ -62,7 +61,6 @@ "gatsby-plugin-root-import": "^2.0.9", "gatsby-plugin-sharp": "^5.8.1", "gatsby-plugin-sitemap": "^6.12.1", - "gatsby-plugin-styled-components": "^6.3.0", "gatsby-source-filesystem": "^5.12.0", "gatsby-transformer-remark": "^6.12.0", "gatsby-transformer-sharp": "^5.3.0", @@ -78,7 +76,6 @@ "react-helmet": "^6.1.0", "react-medium-image-zoom": "^5.1.2", "react-select": "^5.7.0", - "styled-components": "^5.3.3", "tailwindcss": "^2.2.19", "tailwindcss-filters": "^2.0.0", "textile-js": "^2.1.1", @@ -104,7 +101,6 @@ "@types/lodash.throttle": "^4.1.7", "@types/react-helmet": "^6.1.6", "@types/react-test-renderer": "^18.0.0", - "@types/styled-components": "^5.1.26", "@types/turndown": "^5.0.1", "@typescript-eslint/eslint-plugin": "^5.46.1", "autoprefixer": "^10.4.13", diff --git a/src/components/Link/LanguageLink.tsx b/src/components/Link/LanguageLink.tsx index d3ca9a13b8..1b26eeb94e 100644 --- a/src/components/Link/LanguageLink.tsx +++ b/src/components/Link/LanguageLink.tsx @@ -1,24 +1,8 @@ import { Link } from 'gatsby'; -import styled from 'styled-components'; import { usePageLanguage } from '../../contexts/page-language-context'; import languageLabels from '../../maps/language'; -import { primary } from '../../styles/colors'; import { getLanguageDefaults } from '../common/language-defaults'; -const HoverLink = styled(Link)` - cursor: pointer; - display: block; - position: relative; - user-select: none; - color: ${primary.black}; - - &:hover, - &.active, - &.is-active { - color: ${primary.richOrange}; - } -`; - const LanguageLink = ({ language }: { language: string }) => { const { currentLanguage: pageLanguage } = usePageLanguage(); @@ -27,7 +11,14 @@ const LanguageLink = ({ language }: { language: string }) => { ? `./language/${language}` : `../../${isLanguageDefault ? '' : `language/${language}`}`; - return {languageLabels[language] ?? language}; + return ( + + {languageLabels[language] ?? language} + + ); }; export default LanguageLink; diff --git a/src/components/blocks/Html/__snapshots__/Html.test.tsx.snap b/src/components/blocks/Html/__snapshots__/Html.test.tsx.snap index 2f5defa796..f707956cd1 100644 --- a/src/components/blocks/Html/__snapshots__/Html.test.tsx.snap +++ b/src/components/blocks/Html/__snapshots__/Html.test.tsx.snap @@ -5,14 +5,14 @@ exports[` renders correct Dl based on PageLanguageContext value 1`] = `
name
event name for the published message (props.paddingBottom ? props.paddingBottom : '24px')}; - - margin-bottom: var(--spacing-8); -`; - -const InlineGridParagraph = styled.aside` - display: inline-grid; - border-radius: 0.5em; - background-color: ${colors.containers.three}; - border-width: 1px; - border-color: #d9d9da; - grid-template-rows: auto auto; - margin-bottom: 24px; - font-size: 16px; - line-height: 23px; - padding: 0; - width: 100%; -`; +import { + inlineGridParagraph, + inlineContentContainer, + pitfallElement, + leftSideElement, + furtherReadingElement, + noteElement, + tipTitleElement, +} from './dividers.module.css'; const Aside = ({ data, attribs }: HtmlComponentProps<'div'>) => { let paddingBottom: string | false = false; @@ -79,37 +19,37 @@ const Aside = ({ data, attribs }: HtmlComponentProps<'div'>) => { paddingBottom = '0'; } return ( - + ); }; diff --git a/src/components/blocks/dividers/dividers.module.css b/src/components/blocks/dividers/dividers.module.css new file mode 100644 index 0000000000..d760174d98 --- /dev/null +++ b/src/components/blocks/dividers/dividers.module.css @@ -0,0 +1,59 @@ +/* Styles migrated to a CSS component to wean the repo off of styled-components +All styles to be migrated to Tailwind classes when convenient */ + +span.left-side-element { + width: 8px; + border-radius: 0.5em 0 0 0.5em; + left: 0; + cursor: default; + grid-row-start: 1; + grid-row-end: span 2; + grid-column-start: 1; + grid-column-end: 1; + height: 100%; +} +.note-element { + background-color: #4af7ff; +} +.pitfall-element { + background-color: #ff5416; +} +.further-reading-element { + background-color: #08fe13; +} + +strong.tip-title-element { + margin-left: var(--spacing-16); + padding: var(--spacing-16); + margin-top: var(--spacing-8); + grid-column-start: 1; + grid-row-start: 1; + text-transform: uppercase; + font-size: 14px; + letter-spacing: 0.1em; + line-height: 18px; +} + +div.inline-content-container { + grid-row: 2; + grid-column: 1; + margin-left: var(--spacing-16); + padding-left: var(--spacing-16); + padding-right: var(--spacing-16); + margin-bottom: var(--spacing-8); + display: inline; +} + +aside.inline-grid-paragraph { + display: inline-grid; + border-radius: 0.5em; + background-color: #fafafb; + border-width: 1px; + border-color: #d9d9da; + grid-template-rows: auto auto; + margin-bottom: 24px; + font-size: 16px; + line-height: 23px; + padding: 0; + width: 100%; +} diff --git a/src/components/blocks/list/Dd.tsx b/src/components/blocks/list/Dd.tsx index 4c80a3b2c1..2b9e80e5ae 100644 --- a/src/components/blocks/list/Dd.tsx +++ b/src/components/blocks/list/Dd.tsx @@ -1,10 +1,7 @@ import GenericHtmlBlock from '../Html/GenericHtmlBlock'; -import styled from 'styled-components'; -const StyledDd = styled.dd` - font-weight: 300; -`; +const Dd: React.FC<{ className?: string }> = (props) => ( +
+); -const Dd = GenericHtmlBlock(StyledDd); - -export default Dd; +export default GenericHtmlBlock(Dd); diff --git a/src/components/blocks/list/Dl/DefinitionListRow.tsx b/src/components/blocks/list/Dl/DefinitionListRow.tsx index a33ff26ea8..fa6d03391b 100644 --- a/src/components/blocks/list/Dl/DefinitionListRow.tsx +++ b/src/components/blocks/list/Dl/DefinitionListRow.tsx @@ -1,19 +1,9 @@ -import styled from 'styled-components'; import GenericHtmlBlock from '../../Html/GenericHtmlBlock'; +import { definitionListRowStyles } from '../list.module.css'; -const DefinitionListRowStyles = styled.div` - display: block; - min-height: 35px; - border-bottom: 1px solid #e1e1e1; - overflow: auto; - padding: 15px 0; - @media (min-width: 40em) { - display: flex; - padding: 0; - width: 100%; - } -`; - -const DefinitionListRow = GenericHtmlBlock(DefinitionListRowStyles); +const DefinitionListRow = GenericHtmlBlock('div')({ + data: null, + attribs: { className: definitionListRowStyles }, +}); export default DefinitionListRow; diff --git a/src/components/blocks/list/Dl/index.tsx b/src/components/blocks/list/Dl/index.tsx index a9d3689549..7318b2c3d2 100644 --- a/src/components/blocks/list/Dl/index.tsx +++ b/src/components/blocks/list/Dl/index.tsx @@ -1,88 +1,13 @@ -import React from 'react'; import Html from '../../Html'; -import styled, { css } from 'styled-components'; -import { borders } from '../../../../styles'; import { HtmlComponentProps } from 'src/components/html-component-props'; import { DlWrapper } from './DlWrapper'; - -const definitionListCell = css` - border-bottom: ${borders.defaultBorder}; - height: 100%; - padding: 15px 20px 15px 0; - line-height: 1.5; -`; - -const StyledDl = styled.dl` - border-top: ${borders.defaultBorder}; - display: grid; - grid-auto-rows: minmax(min-content, max-content); - grid-auto-flow: column; - margin-bottom: 20px; - font-size: 16px; - overflow-x: scroll; - - /** - * This :only-child directive is present to ensure that multiple lines are not shown in the situation - * where there is a
inside a
that is selected based on language type in between two other divs, i.e. - *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- */ - :only-child { - margin-bottom: -1px; - margin-top: -21px; - } - - div { - display: contents; - } - dt { - grid-column: 1; - ${definitionListCell} - } - dd { - ${definitionListCell} - } - dd > em:not(.italics):first-of-type { - background: #e1e1e1; - border-radius: 5px; - padding: 2px 5px; - display: block; - width: fit-content; - block-size: fit-content; - margin-bottom: 7px; - ::before { - content: '(default: '; - } - ::after { - content: ')'; - } - } - dd > em.italics:last-of-type { - float: right; - display: block; - text-align: right; - font-size: 12px; - margin-top: 12px; - } -`; +import { listDl } from '../list.module.css'; const Dl = ({ data, attribs }: HtmlComponentProps<'dl'>) => { return ( - +
- +
); }; diff --git a/src/components/blocks/list/Dt.tsx b/src/components/blocks/list/Dt.tsx index 834c844327..db596c10e4 100644 --- a/src/components/blocks/list/Dt.tsx +++ b/src/components/blocks/list/Dt.tsx @@ -1,14 +1,8 @@ -import styled from 'styled-components'; import GenericHtmlBlock from '../Html/GenericHtmlBlock'; +import { listDt } from './list.module.css'; -const StyledDt = styled.dt` - font-weight: 500; - margin: 0 0 10px; - @media (min-width: 40em) { - min-width: 120px; - } -`; +const Dt: React.FC<{ className?: string }> = (props) => ( +
+); -const Dt = GenericHtmlBlock(StyledDt); - -export default Dt; +export default GenericHtmlBlock(Dt); diff --git a/src/components/blocks/list/Li.tsx b/src/components/blocks/list/Li.tsx index 45fe0ed1ee..fb4a44250d 100644 --- a/src/components/blocks/list/Li.tsx +++ b/src/components/blocks/list/Li.tsx @@ -1,7 +1,7 @@ -import React, { FC } from 'react'; +import { FC } from 'react'; import GenericHtmlBlock from '../Html/GenericHtmlBlock'; -const StyledLi: FC = ({ children, ...props }) => ( +const StyledLi: FC<{ children: React.ReactNode }> = ({ children, ...props }) => (
  • {children}
    • diff --git a/src/components/blocks/list/list.module.css b/src/components/blocks/list/list.module.css new file mode 100644 index 0000000000..1c034885e3 --- /dev/null +++ b/src/components/blocks/list/list.module.css @@ -0,0 +1,116 @@ +/* Styles migrated to a CSS component to wean the repo off of styled-components +All styles to be migrated to Tailwind classes when convenient */ + +.list-dt { + font-weight: 500; + margin: 0 0 10px; + @media (min-width: 40em) { + min-width: 120px; + } +} + +.list-dl { + border-top: 1px solid #e1e1e1; + display: grid; + grid-auto-rows: minmax(min-content, max-content); + grid-auto-flow: column; + margin-bottom: 20px; + font-size: 16px; + overflow-x: scroll; + + /** + * This :only-child directive is present to ensure that multiple lines are not shown in the situation + * where there is a
    inside a
    that is selected based on language type in between two other divs, i.e. + *
    + *
    + *
    + *
    + *
    + *
    + *
    + *
    + *
    + *
    + *
    + *
    + *
    + *
    + */ + :only-child { + margin-bottom: -1px; + margin-top: -21px; + } + + div { + display: contents; + } + dt, + dd { + border-bottom: 1px solid #e1e1e1; + height: 100%; + padding: 15px 20px 15px 0; + line-height: 1.5; + } + dt { + grid-column: 1; + } + dd > em:not(.italics):first-of-type { + background: #e1e1e1; + border-radius: 5px; + padding: 2px 5px; + display: block; + width: fit-content; + block-size: fit-content; + margin-bottom: 7px; + ::before { + content: '(default: '; + } + ::after { + content: ')'; + } + } + dd > em.italics:last-of-type { + float: right; + display: block; + text-align: right; + font-size: 12px; + margin-top: 12px; + } +} + +div.definition-list-row-styles { + display: block; + min-height: 35px; + border-bottom: 1px solid #e1e1e1; + overflow: auto; + padding: 15px 0; + @media (min-width: 40em) { + display: flex; + padding: 0; + width: 100%; + } +} + +p.inline-content-container { + grid-row: 2; + grid-column: 1; + margin-left: var(--spacing-16); + padding-left: var(--spacing-16); + padding-right: var(--spacing-16); + padding-bottom: var(--spacing-16); + margin-bottom: var(--spacing-8); +} + +div.inline-grid-paragraph { + display: inline-grid; + border-radius: 0.5em; + background-color: '#FAFAFB'; + border-width: 1px; + border-color: #d9d9da; + grid-template-rows: auto auto; + margin-bottom: 24px; + font-size: 16px; + line-height: 23px; + padding: 0; + width: 100%; +} diff --git a/src/components/blocks/typography/P/Tip.tsx b/src/components/blocks/typography/P/Tip.tsx index aed652d1c9..28582b6eac 100644 --- a/src/components/blocks/typography/P/Tip.tsx +++ b/src/components/blocks/typography/P/Tip.tsx @@ -1,71 +1,15 @@ -import React from 'react'; import { HtmlComponentProps } from '../../../html-component-props'; import Html from '../../Html'; -import styled from 'styled-components'; -import { colors } from '../../../../styles'; - -/** - * This is required because Tailwind v2 does not offer a good way to style one side of a border. - * The closest to what design requires here is: - * rounded-lg bg-{#FAFAFB} ring-2 ring-{#d9d9da} ring-inset border-l-8 border-{#08ff13} e p-4 - bg-{#08ff13} w-8 left-0 cursor-default - */ -const LeftsideElement = styled.span` - width: 8px; - border-radius: 0.5em 0 0 0.5em; - background-color: #08ff13; - left: 0; - cursor: default; - grid-row-start: 1; - grid-row-end: span 2; - grid-column-start: 1; - grid-column-end: 1; - height: 100%; -`; - -const TipTitleElement = styled.strong` - margin-left: var(--spacing-16); - padding: var(--spacing-16); - margin-top: var(--spacing-8); - grid-column-start: 1; - grid-row-start: 1; - text-transform: uppercase; - font-size: 14px; - letter-spacing: 0.1em; - line-height: 18px; -`; - -const InlineContentContainer = styled.p` - grid-row: 2; - grid-column: 1; - margin-left: var(--spacing-16); - padding-left: var(--spacing-16); - padding-right: var(--spacing-16); - padding-bottom: var(--spacing-16); - margin-bottom: var(--spacing-8); -`; - -const InlineGridParagraph = styled.div` - display: inline-grid; - border-radius: 0.5em; - background-color: ${colors.containers.three}; - border-width: 1px; - border-color: #d9d9da; - grid-template-rows: auto auto; - margin-bottom: 24px; - font-size: 16px; - line-height: 23px; - padding: 0; - width: 100%; -`; +import { inlineGridParagraph } from '../../list/list.module.css'; +import { leftSideElement, tipTitleElement, inlineContentContainer } from '../typography.module.css'; // This needs to be set to a grid in order to render properly export const Tip = ({ data, attribs }: HtmlComponentProps<'p'>) => ( - -   - Tip - +
    +   + Tip +

    - - +

    +
    ); diff --git a/src/components/blocks/typography/typography.module.css b/src/components/blocks/typography/typography.module.css new file mode 100644 index 0000000000..919738db89 --- /dev/null +++ b/src/components/blocks/typography/typography.module.css @@ -0,0 +1,44 @@ +/* Styles migrated to a CSS component to wean the repo off of styled-components +All styles to be migrated to Tailwind classes when convenient */ + +/** + * This is required because Tailwind v2 does not offer a good way to style one side of a border. + * The closest to what design requires here is: + * rounded-lg bg-{#FAFAFB} ring-2 ring-{#d9d9da} ring-inset border-l-8 border-{#08ff13} e p-4 + bg-{#08ff13} w-8 left-0 cursor-default + */ +span.left-side-element { + width: 8px; + border-radius: 0.5em 0 0 0.5em; + background-color: #08ff13; + left: 0; + cursor: default; + grid-row-start: 1; + grid-row-end: span 2; + grid-column-start: 1; + grid-column-end: 1; + height: 100%; +} + +strong.tip-title-element { + margin-left: var(--spacing-16); + margin-top: var(--spacing-8); + padding: var(--spacing-16); + grid-column-start: 1; + grid-row-start: 1; + text-transform: uppercase; + font-size: 14px; + letter-spacing: 0.1em; + line-height: 18px; +} + +p.inline-content-container { + grid-row: 2; + grid-column: 1; + margin-left: var(--spacing-16); + padding-left: var(--spacing-16); + padding-right: var(--spacing-16); + padding-bottom: var(--spacing-16); + margin-bottom: var(--spacing-8); + display: inline; +} diff --git a/src/components/blocks/wrappers/__snapshots__/ConditionalChildrenLanguageDisplay.test.js.snap b/src/components/blocks/wrappers/__snapshots__/ConditionalChildrenLanguageDisplay.test.js.snap index 1d971f62fe..aafeadcb13 100644 --- a/src/components/blocks/wrappers/__snapshots__/ConditionalChildrenLanguageDisplay.test.js.snap +++ b/src/components/blocks/wrappers/__snapshots__/ConditionalChildrenLanguageDisplay.test.js.snap @@ -2,7 +2,7 @@ exports[`Integration: ConditionalChildrenLanguageDisplay only displays one
    pair of children from alternatives for parsed definition lists ConditionalChildrenLanguageDisplay displays the expected results from HTML data 1`] = `
    @@ -10,14 +10,14 @@ exports[`Integration: ConditionalChildrenLanguageDisplay only displays one
    < lang="javascript" >
    callback
    is a function of the form ({ ...ablyUIConfig, purge: { @@ -130,6 +135,7 @@ module.exports = extendConfig((ablyUIConfig) => ({ colors: { ...apiReferenceSpecificColors, ...highlightColors, + ...legacyBrandColors, }, gridRowStart: { 9: '9',