From 9e6711e4cdef882ad70c2a6ee3b3e039b537d008 Mon Sep 17 00:00:00 2001
From: Ian Solano-Kamaiko <2371418+iansolano@users.noreply.github.com>
Date: Fri, 28 Feb 2020 17:52:35 -0500
Subject: [PATCH 1/6] build(opentrons): add styled-components to buildtools
Add styled-components and additional buildtools in support
---
.stylelintrc.js | 11 +-
Makefile | 2 +-
babel.config.js | 5 +-
components/package.json | 3 +-
.../src/components/LabwareList/styles.css | 4 +-
package.json | 4 +
yarn.lock | 161 +++++++++++++++++-
7 files changed, 181 insertions(+), 9 deletions(-)
diff --git a/.stylelintrc.js b/.stylelintrc.js
index 80567d6f42c..56c10e76645 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -1,5 +1,14 @@
module.exports = {
- extends: ['stylelint-config-standard'],
+ processors: [
+ [
+ 'stylelint-processor-styled-components',
+ {
+ ignoreFiles: ['**/*.css'],
+ },
+ ],
+ ],
+
+ extends: ['stylelint-config-standard', 'stylelint-config-styled-components'],
ignoreFiles: ['api/**', '**/dist/**', '**/coverage/**', '**/venv/**'],
diff --git a/Makefile b/Makefile
index 608076587fb..023b29a4ba1 100755
--- a/Makefile
+++ b/Makefile
@@ -145,7 +145,7 @@ lint-json:
.PHONY: lint-css
lint-css:
- stylelint "**/*.css"
+ stylelint "**/*.css" "**/*.js"
.PHONY: check-js
check-js:
diff --git a/babel.config.js b/babel.config.js
index 302a2a0bb0d..ae39ae93992 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -3,15 +3,16 @@
module.exports = {
env: {
production: {
- plugins: ['babel-plugin-unassert'],
+ plugins: ['babel-plugin-styled-components', 'babel-plugin-unassert'],
},
development: {
- plugins: ['react-hot-loader/babel'],
+ plugins: ['babel-plugin-styled-components', 'react-hot-loader/babel'],
},
test: {
plugins: [
'@babel/plugin-transform-modules-commonjs',
'babel-plugin-dynamic-import-node',
+ 'babel-plugin-styled-components',
],
},
},
diff --git a/components/package.json b/components/package.json
index a5313a5bead..ff0738a7eaa 100644
--- a/components/package.json
+++ b/components/package.json
@@ -23,6 +23,7 @@
"dependencies": {
"react-popper": "^1.0.0",
"react-remove-scroll": "^1.0.8",
- "react-select": "^3.0.8"
+ "react-select": "^3.0.8",
+ "styled-components": "5.0.1"
}
}
diff --git a/labware-library/src/components/LabwareList/styles.css b/labware-library/src/components/LabwareList/styles.css
index 670d8633e59..8086268ae8b 100644
--- a/labware-library/src/components/LabwareList/styles.css
+++ b/labware-library/src/components/LabwareList/styles.css
@@ -50,9 +50,11 @@
* non-standard, but works on all webkit browsers, Edge, and Firefox >= 68
* it turns out CSS ellipses for multiline blocks are hard
*/
- display: -webkit-box; /* stylelint-disable-line declaration-block-no-duplicate-properties */
+ /* stylelint-disable */
+ display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
+ /* stylelint-enable */
}
.title_icon {
diff --git a/package.json b/package.json
index 7e01dd0f5c9..fa646b6a7d1 100755
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
"babel-jest": "^25.1.0",
"babel-loader": "^8.0.6",
"babel-plugin-dynamic-import-node": "^2.3.0",
+ "babel-plugin-styled-components": "1.10.7",
"babel-plugin-unassert": "^3.0.1",
"codecov": "^3.1.0",
"concurrently": "^4.1.2",
@@ -77,6 +78,7 @@
"html-webpack-plugin": "^3.2.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^25.1.0",
+ "jest-styled-components": "7.0.0",
"lerna": "^3.16.4",
"lost": "^8.3.1",
"madge": "^3.6.0",
@@ -106,6 +108,8 @@
"style-loader": "^1.1.3",
"stylelint": "^11.0.0",
"stylelint-config-standard": "^19.0.0",
+ "stylelint-config-styled-components": "0.1.1",
+ "stylelint-processor-styled-components": "1.10.0",
"terser-webpack-plugin": "^2.3.5",
"url-loader": "^2.1.0",
"wait-on": "^3.3.0",
diff --git a/yarn.lock b/yarn.lock
index 4b9d12dbf42..5562a747155 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -147,7 +147,17 @@
lodash "^4.17.13"
source-map "^0.5.0"
-"@babel/helper-annotate-as-pure@^7.8.3":
+"@babel/generator@^7.8.6":
+ version "7.8.6"
+ resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.6.tgz#57adf96d370c9a63c241cd719f9111468578537a"
+ integrity sha512-4bpOR5ZBz+wWcMeVtcf7FbjcFzCp+817z2/gHNncIRcM9MmKzUhtWCYAq27RAfUrAFwb+OCG1s9WEaVxfi6cjg==
+ dependencies:
+ "@babel/types" "^7.8.6"
+ jsesc "^2.5.1"
+ lodash "^4.17.13"
+ source-map "^0.5.0"
+
+"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee"
integrity sha512-6o+mJrZBxOoEX77Ezv9zwW7WV8DdluouRKNY/IR5u/YTMuKHgugHOzYWlYvYLpLA9nPsQCAAASpCIbjI9Mv+Uw==
@@ -445,6 +455,11 @@
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.4.tgz#d1dbe64691d60358a974295fa53da074dd2ce8e8"
integrity sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw==
+"@babel/parser@^7.8.6":
+ version "7.8.6"
+ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.6.tgz#ba5c9910cddb77685a008e3c587af8d27b67962c"
+ integrity sha512-trGNYSfwq5s0SgM1BMEB8hX3NDmO7EP2wsDGDexiaKMB92BaRpS+qZfpkMqUBhcsOTBwNy9B/jieo4ad/t/z2g==
+
"@babel/plugin-proposal-async-generator-functions@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.8.3.tgz#bad329c670b382589721b27540c7d288601c6e6f"
@@ -1055,6 +1070,21 @@
globals "^11.1.0"
lodash "^4.17.10"
+"@babel/traverse@^7.4.5":
+ version "7.8.6"
+ resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.6.tgz#acfe0c64e1cd991b3e32eae813a6eb564954b5ff"
+ integrity sha512-2B8l0db/DPi8iinITKuo7cbPznLCEk0kCxDoB9/N6gGNg/gxOXiR/IcymAFPiBwk5w6TtQ27w4wpElgp9btR9A==
+ dependencies:
+ "@babel/code-frame" "^7.8.3"
+ "@babel/generator" "^7.8.6"
+ "@babel/helper-function-name" "^7.8.3"
+ "@babel/helper-split-export-declaration" "^7.8.3"
+ "@babel/parser" "^7.8.6"
+ "@babel/types" "^7.8.6"
+ debug "^4.1.0"
+ globals "^11.1.0"
+ lodash "^4.17.13"
+
"@babel/traverse@^7.5.0":
version "7.5.0"
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.5.0.tgz#4216d6586854ef5c3c4592dab56ec7eb78485485"
@@ -1143,6 +1173,15 @@
lodash "^4.17.13"
to-fast-properties "^2.0.0"
+"@babel/types@^7.8.6":
+ version "7.8.6"
+ resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.6.tgz#629ecc33c2557fcde7126e58053127afdb3e6d01"
+ integrity sha512-wqz7pgWMIrht3gquyEFPVXeXCti72Rm8ep9b5tQKz9Yg9LzJA3HxosF1SB3Kc81KD1A3XBkkVYtJvCKS2Z/QrA==
+ dependencies:
+ esutils "^2.0.2"
+ lodash "^4.17.13"
+ to-fast-properties "^2.0.0"
+
"@bcoe/v8-coverage@^0.2.3":
version "0.2.3"
resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -1238,6 +1277,13 @@
dependencies:
"@emotion/memoize" "^0.6.6"
+"@emotion/is-prop-valid@^0.8.3":
+ version "0.8.7"
+ resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.7.tgz#803449993f436f9a6c67752251ea3fc492a1044c"
+ integrity sha512-OPkKzUeiid0vEKjZqnGcy2mzxjIlCffin+L2C02pdz/bVlt5zZZE2VzO0D3XOPnH0NEeF21QNKSXiZphjr4xiQ==
+ dependencies:
+ "@emotion/memoize" "0.7.4"
+
"@emotion/memoize@0.7.4":
version "0.7.4"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
@@ -1263,7 +1309,7 @@
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
-"@emotion/stylis@0.8.5":
+"@emotion/stylis@0.8.5", "@emotion/stylis@^0.8.4":
version "0.8.5"
resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
@@ -1272,7 +1318,7 @@
version "0.7.1"
resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.7.1.tgz#50f63225e712d99e2b2b39c19c70fff023793ca5"
-"@emotion/unitless@0.7.5":
+"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.4":
version "0.7.5"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
@@ -3759,6 +3805,11 @@ atob@^2.0.0:
version "2.0.3"
resolved "https://registry.yarnpkg.com/atob/-/atob-2.0.3.tgz#19c7a760473774468f20b2d2d03372ad7d4cbf5d"
+atob@^2.1.2:
+ version "2.1.2"
+ resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+ integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
+
author-regex@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/author-regex/-/author-regex-1.0.0.tgz#d08885be6b9bbf9439fe087c76287245f0a81450"
@@ -3907,6 +3958,16 @@ babel-plugin-macros@^2.0.0:
cosmiconfig "^5.0.5"
resolve "^1.8.1"
+babel-plugin-styled-components@1.10.7, "babel-plugin-styled-components@>= 1":
+ version "1.10.7"
+ resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz#3494e77914e9989b33cc2d7b3b29527a949d635c"
+ integrity sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==
+ dependencies:
+ "@babel/helper-annotate-as-pure" "^7.0.0"
+ "@babel/helper-module-imports" "^7.0.0"
+ babel-plugin-syntax-jsx "^6.18.0"
+ lodash "^4.17.11"
+
babel-plugin-syntax-jsx@^6.18.0:
version "6.18.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -4697,6 +4758,11 @@ camelcase@^5.0.0, camelcase@^5.3.1:
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+camelize@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+ integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
caniuse-api@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -5810,6 +5876,11 @@ css-blank-pseudo@^0.1.4:
dependencies:
postcss "^7.0.5"
+css-color-keywords@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+ integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+
css-color-names@0.0.4, css-color-names@^0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -5911,6 +5982,15 @@ css-selector-tokenizer@^0.7.0:
fastparse "^1.1.1"
regexpu-core "^1.0.0"
+css-to-react-native@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+ integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+ dependencies:
+ camelize "^1.0.0"
+ css-color-keywords "^1.0.0"
+ postcss-value-parser "^4.0.2"
+
css-tree@1.0.0-alpha.28:
version "1.0.0-alpha.28"
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.28.tgz#8e8968190d886c9477bc8d61e96f61af3f7ffa7f"
@@ -5947,6 +6027,16 @@ css-what@^2.1.2:
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
+css@^2.2.4:
+ version "2.2.4"
+ resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
+ integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
+ dependencies:
+ inherits "^2.0.3"
+ source-map "^0.6.1"
+ source-map-resolve "^0.5.2"
+ urix "^0.1.0"
+
cssdb@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
@@ -9295,6 +9385,13 @@ hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.5:
version "2.5.5"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
+hoist-non-react-statics@^3.0.0:
+ version "3.3.2"
+ resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+ integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+ dependencies:
+ react-is "^16.7.0"
+
hoist-non-react-statics@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.1.0.tgz#42414ccdfff019cd2168168be998c7b3bd5245c0"
@@ -10770,6 +10867,13 @@ jest-snapshot@^25.1.0:
pretty-format "^25.1.0"
semver "^7.1.1"
+jest-styled-components@7.0.0:
+ version "7.0.0"
+ resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-7.0.0.tgz#3e1b7dcd077800ea5191e1cc95b314917a2ed668"
+ integrity sha512-A1nl8q1ptZj1t5wd0x/UYjnqfld1GhZwRDPS9w0eD5P5R8G+Q4uHaBAbUjf+Arjexqh2BxfrGkTc3tDuhtdifg==
+ dependencies:
+ css "^2.2.4"
+
jest-util@^25.1.0:
version "25.1.0"
resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-25.1.0.tgz#7bc56f7b2abd534910e9fa252692f50624c897d9"
@@ -14587,6 +14691,15 @@ postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.7:
source-map "^0.6.1"
supports-color "^6.1.0"
+postcss@^7.0.26:
+ version "7.0.27"
+ resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.27.tgz#cc67cdc6b0daa375105b7c424a85567345fc54d9"
+ integrity sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==
+ dependencies:
+ chalk "^2.4.2"
+ source-map "^0.6.1"
+ supports-color "^6.1.0"
+
preact-compat@^3.15.0:
version "3.18.4"
resolved "https://registry.yarnpkg.com/preact-compat/-/preact-compat-3.18.4.tgz#fbe76ddd30356c68e3ccde608107104946f2cf8d"
@@ -17053,6 +17166,17 @@ source-map-resolve@^0.5.0:
source-map-url "^0.4.0"
urix "^0.1.0"
+source-map-resolve@^0.5.2:
+ version "0.5.3"
+ resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
+ integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
+ dependencies:
+ atob "^2.1.2"
+ decode-uri-component "^0.2.0"
+ resolve-url "^0.2.1"
+ source-map-url "^0.4.0"
+ urix "^0.1.0"
+
source-map-support@^0.5.13, source-map-support@~0.5.12:
version "0.5.13"
resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
@@ -17576,6 +17700,22 @@ style-search@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
+styled-components@5.0.1:
+ version "5.0.1"
+ resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.0.1.tgz#57782a6471031abefb2db5820a1876ae853bc619"
+ integrity sha512-E0xKTRIjTs4DyvC1MHu/EcCXIj6+ENCP8hP01koyoADF++WdBUOrSGwU1scJRw7/YaYOhDvvoad6VlMG+0j53A==
+ dependencies:
+ "@babel/helper-module-imports" "^7.0.0"
+ "@babel/traverse" "^7.4.5"
+ "@emotion/is-prop-valid" "^0.8.3"
+ "@emotion/stylis" "^0.8.4"
+ "@emotion/unitless" "^0.7.4"
+ babel-plugin-styled-components ">= 1"
+ css-to-react-native "^3.0.0"
+ hoist-non-react-statics "^3.0.0"
+ shallowequal "^1.1.0"
+ supports-color "^5.5.0"
+
stylehacks@^4.0.0:
version "4.0.3"
resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -17597,6 +17737,21 @@ stylelint-config-standard@^19.0.0:
dependencies:
stylelint-config-recommended "^3.0.0"
+stylelint-config-styled-components@0.1.1:
+ version "0.1.1"
+ resolved "https://registry.yarnpkg.com/stylelint-config-styled-components/-/stylelint-config-styled-components-0.1.1.tgz#b408388d7c687833ab4be4c4e6522d97d2827ede"
+ integrity sha512-z5Xz/9GmvxO6e/DLzBMwkB85zHxEEjN6K7Cj80Bi+o/9vR9eS3GX3E9VuMnX9WLFYulqbqLtTapGGY28JBiy9Q==
+
+stylelint-processor-styled-components@1.10.0:
+ version "1.10.0"
+ resolved "https://registry.yarnpkg.com/stylelint-processor-styled-components/-/stylelint-processor-styled-components-1.10.0.tgz#8082fc68779476aac411d3afffac0bc833d77a29"
+ integrity sha512-g4HpN9rm0JD0LoHuIOcd/FIjTZCJ0ErQ+dC3VTxp+dSvnkV+MklKCCmCQEdz5K5WxF4vPuzfVgdbSDuPYGZhoA==
+ dependencies:
+ "@babel/parser" "^7.8.3"
+ "@babel/traverse" "^7.8.3"
+ micromatch "^4.0.2"
+ postcss "^7.0.26"
+
stylelint@^11.0.0:
version "11.0.0"
resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-11.0.0.tgz#1458d1e126d4f2fb9f41076197f852aa1fcae91d"
From 8be526dcf10f16091f2c4338a2cacf3346f3f76b Mon Sep 17 00:00:00 2001
From: Ian Solano-Kamaiko <2371418+iansolano@users.noreply.github.com>
Date: Mon, 2 Mar 2020 14:37:51 -0500
Subject: [PATCH 2/6] fixup: stylelint disable rule specific
---
labware-library/src/components/LabwareList/styles.css | 8 +++-----
1 file changed, 3 insertions(+), 5 deletions(-)
diff --git a/labware-library/src/components/LabwareList/styles.css b/labware-library/src/components/LabwareList/styles.css
index 8086268ae8b..172c51361cd 100644
--- a/labware-library/src/components/LabwareList/styles.css
+++ b/labware-library/src/components/LabwareList/styles.css
@@ -50,11 +50,9 @@
* non-standard, but works on all webkit browsers, Edge, and Firefox >= 68
* it turns out CSS ellipses for multiline blocks are hard
*/
- /* stylelint-disable */
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- /* stylelint-enable */
+ display: -webkit-box; /* stylelint-disable-line declaration-block-no-duplicate-properties, value-no-vendor-prefix */
+ -webkit-line-clamp: 2; /* stylelint-disable-line value-no-vendor-prefix */
+ -webkit-box-orient: vertical; /* stylelint-disable-line property-no-vendor-prefix */
}
.title_icon {
From 4e1172378ba725405999993f213ba0082da1aab3 Mon Sep 17 00:00:00 2001
From: Ian Solano-Kamaiko <2371418+iansolano@users.noreply.github.com>
Date: Mon, 2 Mar 2020 15:58:20 -0500
Subject: [PATCH 3/6] refactor Card component for styled-components example
---
babel.config.js | 4 ++-
components/src/structure/Card.js | 45 +++++++++++++++++++++++++-------
2 files changed, 38 insertions(+), 11 deletions(-)
diff --git a/babel.config.js b/babel.config.js
index ae39ae93992..0c84de2b0e3 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -2,6 +2,8 @@
module.exports = {
env: {
+ // Note(isk: 3/2/20): Must have babel-plugin-styled-components in each env,
+ // see here for further details: s https://styled-components.com/docs/tooling#babel-plugin
production: {
plugins: ['babel-plugin-styled-components', 'babel-plugin-unassert'],
},
@@ -10,9 +12,9 @@ module.exports = {
},
test: {
plugins: [
+ 'babel-plugin-styled-components',
'@babel/plugin-transform-modules-commonjs',
'babel-plugin-dynamic-import-node',
- 'babel-plugin-styled-components',
],
},
},
diff --git a/components/src/structure/Card.js b/components/src/structure/Card.js
index fd9ae6e5a62..a255fb2e3f1 100644
--- a/components/src/structure/Card.js
+++ b/components/src/structure/Card.js
@@ -2,9 +2,9 @@
// Card component with drop shadow
import * as React from 'react'
-import cx from 'classnames'
+import styled from 'styled-components'
-import styles from './structure.css'
+import * as styles from '../styles'
export type CardProps = {|
/** Title for card, all cards should receive a title. */
@@ -23,16 +23,41 @@ export type CardProps = {|
* Titles and other children handle their own styles and layout.
*/
export function Card(props: CardProps) {
- const { title, children } = props
-
- const style = cx(styles.card, props.className, {
- [styles.disabled]: props.disabled,
- })
+ const { title, children, className, disabled } = props
return (
-
- {title && {title}
}
+
+ {title && {title}}
{children}
-
+
)
}
+
+const Section = styled.section`
+ ${styles.FS_BODY_2}
+ position: relative;
+ overflow: visible;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.33);
+
+ ${({ disabled }) =>
+ disabled &&
+ `
+ pointer-events: none;
+ background-color: transparent;
+
+ & * {
+ color: ${styles.C_FONT_DISABLED};
+ fill: ${styles.C_FONT_DISABLED};
+ background-color: transparent;
+ }
+ `}
+`
+
+const Title = styled.h3`
+ ${styles.FONT_HEADER_DARK}
+ ${styles.FW_REGULAR}
+
+ margin: 0;
+ padding: ${styles.S_1} ${styles.S_1} 0;
+ text-transform: capitalize;
+`
From abddf3a771eb396a180e006482b2d3506019ef10 Mon Sep 17 00:00:00 2001
From: Ian Solano-Kamaiko <2371418+iansolano@users.noreply.github.com>
Date: Mon, 2 Mar 2020 15:58:48 -0500
Subject: [PATCH 4/6] adding styles
---
components/src/styles/colors.js | 5 +++++
components/src/styles/font-size.js | 13 +++++++++++++
components/src/styles/font-weight.js | 11 +++++++++++
components/src/styles/index.js | 7 +++++++
components/src/styles/spacing.js | 6 ++++++
components/src/styles/typography.js | 13 +++++++++++++
6 files changed, 55 insertions(+)
create mode 100644 components/src/styles/colors.js
create mode 100644 components/src/styles/font-size.js
create mode 100644 components/src/styles/font-weight.js
create mode 100644 components/src/styles/index.js
create mode 100644 components/src/styles/spacing.js
create mode 100644 components/src/styles/typography.js
diff --git a/components/src/styles/colors.js b/components/src/styles/colors.js
new file mode 100644
index 00000000000..102e11f7b3e
--- /dev/null
+++ b/components/src/styles/colors.js
@@ -0,0 +1,5 @@
+// @flow
+
+// TDOD(isk: 3/2/20): Rename to be more generic (e.g. not FONT)
+export const C_FONT_DISABLED = '#9c9c9c'
+export const C_FONT_DARK = '#4a4a4a'
diff --git a/components/src/styles/font-size.js b/components/src/styles/font-size.js
new file mode 100644
index 00000000000..6759066ae08
--- /dev/null
+++ b/components/src/styles/font-size.js
@@ -0,0 +1,13 @@
+// @flow
+
+import { css } from 'styled-components'
+
+import { S_0875, S_1125 } from './spacing'
+
+export const FS_HEADER = css`
+ font-size: ${S_1125};
+`
+
+export const FS_BODY_2 = css`
+ font-size: ${S_0875};
+`
diff --git a/components/src/styles/font-weight.js b/components/src/styles/font-weight.js
new file mode 100644
index 00000000000..c3eaabe5e9e
--- /dev/null
+++ b/components/src/styles/font-weight.js
@@ -0,0 +1,11 @@
+// @flow
+
+import { css } from 'styled-components'
+
+export const FW_REGULAR = css`
+ font-weight: 400;
+`
+
+export const FW_SEMIBOLD = css`
+ font-weight: 600;
+`
diff --git a/components/src/styles/index.js b/components/src/styles/index.js
new file mode 100644
index 00000000000..0c773aa59b2
--- /dev/null
+++ b/components/src/styles/index.js
@@ -0,0 +1,7 @@
+// @flow
+
+export * from './colors'
+export * from './font-size'
+export * from './font-weight'
+export * from './spacing'
+export * from './typography'
diff --git a/components/src/styles/spacing.js b/components/src/styles/spacing.js
new file mode 100644
index 00000000000..3dcc91419f5
--- /dev/null
+++ b/components/src/styles/spacing.js
@@ -0,0 +1,6 @@
+// @flow
+
+// TODO(isk: 3/2/20): Make these more generic and use calc() to compose spacing
+export const S_0875 = '0.875rem'
+export const S_1 = '1rem'
+export const S_1125 = '1.125rem'
diff --git a/components/src/styles/typography.js b/components/src/styles/typography.js
new file mode 100644
index 00000000000..daed629183f
--- /dev/null
+++ b/components/src/styles/typography.js
@@ -0,0 +1,13 @@
+// @flow
+
+import { css } from 'styled-components'
+
+import { C_FONT_DARK } from './colors'
+import { FS_HEADER } from './font-size'
+import { FW_SEMIBOLD } from './font-weight'
+
+export const FONT_HEADER_DARK = css`
+ ${FS_HEADER};
+ ${FW_SEMIBOLD}
+ color: ${C_FONT_DARK};
+`
From 3cd33f11cf2e157df606d2e5bbf24ddcacb36fdf Mon Sep 17 00:00:00 2001
From: Ian Solano-Kamaiko <2371418+iansolano@users.noreply.github.com>
Date: Mon, 2 Mar 2020 16:04:53 -0500
Subject: [PATCH 5/6] removing redundant styles
---
components/src/structure/structure.css | 16 ----------------
1 file changed, 16 deletions(-)
diff --git a/components/src/structure/structure.css b/components/src/structure/structure.css
index c1aac89921c..a0bd714aaeb 100644
--- a/components/src/structure/structure.css
+++ b/components/src/structure/structure.css
@@ -82,22 +82,6 @@
}
/* Card and card content styles */
-.card {
- position: relative;
- overflow: visible;
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.33);
- font-size: var(--fs-body-2);
-}
-
-.card_title {
- @apply --font-header-dark;
-
- margin: 0;
- padding: 1rem 1rem 0;
- font-weight: var(--fw-regular);
- text-transform: capitalize;
-}
-
.refresh_card_icon {
position: absolute;
top: 0;
From 95af4085f288ef8da2dba2c8f7fa212f880c7e2d Mon Sep 17 00:00:00 2001
From: Ian Solano-Kamaiko <2371418+iansolano@users.noreply.github.com>
Date: Mon, 2 Mar 2020 17:01:41 -0500
Subject: [PATCH 6/6] fixup: snaps and linter
---
.../src/__tests__/__snapshots__/structure.test.js.snap | 6 +++---
components/src/structure/Card.js | 2 --
2 files changed, 3 insertions(+), 5 deletions(-)
diff --git a/components/src/__tests__/__snapshots__/structure.test.js.snap b/components/src/__tests__/__snapshots__/structure.test.js.snap
index d4861450ca1..4648553121f 100644
--- a/components/src/__tests__/__snapshots__/structure.test.js.snap
+++ b/components/src/__tests__/__snapshots__/structure.test.js.snap
@@ -2,10 +2,10 @@
exports[`Card renders Card correctly 1`] = `
title
@@ -87,7 +87,7 @@ exports[`Pill renders Pill correctly with inverted text 1`] = `
exports[`RefreshCard renders correctly 1`] = `