From ce0a22aa39ce9f1a48b658b12a65a7056119381b Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 11 Oct 2019 17:06:45 -0400
Subject: [PATCH 01/37] Add styled-components, hex-rgb, and storybook knobs

---
 package-lock.json | 262 ++++++++++++++++++++++++++++++++++++++++------
 package.json      |   1 +
 2 files changed, 232 insertions(+), 31 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0714181dbe2f72..d9187167f61cae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -92,7 +92,6 @@
 			"version": "7.4.4",
 			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.4.4.tgz",
 			"integrity": "sha512-53UOLK6TVNqKxf7RUh8NE851EHRxOOeVXKbK2bivdb+iziMyk03Sr4eaE9OELCbyZAAafAKPDwF2TPUES5QbxQ==",
-			"dev": true,
 			"requires": {
 				"@babel/types": "^7.4.4",
 				"jsesc": "^2.5.1",
@@ -105,7 +104,6 @@
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz",
 			"integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==",
-			"dev": true,
 			"requires": {
 				"@babel/types": "^7.0.0"
 			}
@@ -169,7 +167,6 @@
 			"version": "7.1.0",
 			"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz",
 			"integrity": "sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==",
-			"dev": true,
 			"requires": {
 				"@babel/helper-get-function-arity": "^7.0.0",
 				"@babel/template": "^7.1.0",
@@ -206,7 +203,6 @@
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz",
 			"integrity": "sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==",
-			"dev": true,
 			"requires": {
 				"@babel/types": "^7.0.0"
 			}
@@ -288,7 +284,6 @@
 			"version": "7.4.4",
 			"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz",
 			"integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==",
-			"dev": true,
 			"requires": {
 				"@babel/types": "^7.4.4"
 			}
@@ -329,8 +324,7 @@
 		"@babel/parser": {
 			"version": "7.4.4",
 			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.4.4.tgz",
-			"integrity": "sha512-5pCS4mOsL+ANsFZGdvNLybx4wtqAZJ0MJjMHxvzI3bvIsz6sQvzW8XX92EYIkiPtIvcfG3Aj+Ir5VNyjnZhP7w==",
-			"dev": true
+			"integrity": "sha512-5pCS4mOsL+ANsFZGdvNLybx4wtqAZJ0MJjMHxvzI3bvIsz6sQvzW8XX92EYIkiPtIvcfG3Aj+Ir5VNyjnZhP7w=="
 		},
 		"@babel/plugin-external-helpers": {
 			"version": "7.2.0",
@@ -1594,7 +1588,6 @@
 			"version": "7.4.4",
 			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz",
 			"integrity": "sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==",
-			"dev": true,
 			"requires": {
 				"@babel/code-frame": "^7.0.0",
 				"@babel/parser": "^7.4.4",
@@ -1605,7 +1598,6 @@
 			"version": "7.4.5",
 			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.4.5.tgz",
 			"integrity": "sha512-Vc+qjynwkjRmIFGxy0KYoPj4FdVDxLej89kMHFsWScq999uX+pwcX4v9mWRjW0KcAYTPAuVQl2LKP1wEVLsp+A==",
-			"dev": true,
 			"requires": {
 				"@babel/code-frame": "^7.0.0",
 				"@babel/generator": "^7.4.4",
@@ -1621,14 +1613,12 @@
 				"@babel/parser": {
 					"version": "7.6.2",
 					"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.6.2.tgz",
-					"integrity": "sha512-mdFqWrSPCmikBoaBYMuBulzTIKuXVPtEISFbRRVNwMWpCms/hmE2kRq0bblUHaNRKrjRlmVbx1sDHmjmRgD2Xg==",
-					"dev": true
+					"integrity": "sha512-mdFqWrSPCmikBoaBYMuBulzTIKuXVPtEISFbRRVNwMWpCms/hmE2kRq0bblUHaNRKrjRlmVbx1sDHmjmRgD2Xg=="
 				},
 				"debug": {
 					"version": "4.1.1",
 					"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
 					"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-					"dev": true,
 					"requires": {
 						"ms": "^2.1.1"
 					}
@@ -1636,14 +1626,12 @@
 				"globals": {
 					"version": "11.12.0",
 					"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-					"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-					"dev": true
+					"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
 				},
 				"ms": {
 					"version": "2.1.2",
 					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
+					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
 				}
 			}
 		},
@@ -1725,7 +1713,6 @@
 			"version": "0.8.3",
 			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.3.tgz",
 			"integrity": "sha512-We7VBiltAJ70KQA0dWkdPMXnYoizlxOXpvtjmu5/MBnExd+u0PGgV27WCYanmLAbCwAU30Le/xA0CQs/F/Otig==",
-			"dev": true,
 			"requires": {
 				"@emotion/memoize": "0.7.3"
 			}
@@ -1733,8 +1720,7 @@
 		"@emotion/memoize": {
 			"version": "0.7.3",
 			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.3.tgz",
-			"integrity": "sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==",
-			"dev": true
+			"integrity": "sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow=="
 		},
 		"@emotion/serialize": {
 			"version": "0.11.11",
@@ -1797,8 +1783,7 @@
 		"@emotion/unitless": {
 			"version": "0.7.4",
 			"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.4.tgz",
-			"integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==",
-			"dev": true
+			"integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ=="
 		},
 		"@emotion/utils": {
 			"version": "0.11.2",
@@ -2227,6 +2212,12 @@
 			"integrity": "sha512-FmuxfCuolpLl0AnQ2NHSzoUKWEJDFl63qXjzdoWBVyFCXzMGm1spBzk7LeHNoVCiWCF7mRVms9e6jEV9+MoPbg==",
 			"dev": true
 		},
+		"@icons/material": {
+			"version": "0.2.4",
+			"resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
+			"integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
+			"dev": true
+		},
 		"@jest/console": {
 			"version": "24.7.1",
 			"resolved": "https://registry.npmjs.org/@jest/console/-/console-24.7.1.tgz",
@@ -5201,6 +5192,40 @@
 				"prop-types": "^15.7.2"
 			}
 		},
+		"@storybook/addon-knobs": {
+			"version": "5.2.3",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-5.2.3.tgz",
+			"integrity": "sha512-dOFvN3M7rNAHAnlYmOHr2fHKwgAgR5JjCrlMrOxtRG4Qnz7Zprha6T2o9TIVjlAggTM1MpMcFe7db9/OCnbIwg==",
+			"dev": true,
+			"requires": {
+				"@storybook/addons": "5.2.3",
+				"@storybook/api": "5.2.3",
+				"@storybook/client-api": "5.2.3",
+				"@storybook/components": "5.2.3",
+				"@storybook/core-events": "5.2.3",
+				"@storybook/theming": "5.2.3",
+				"@types/react-color": "^3.0.1",
+				"copy-to-clipboard": "^3.0.8",
+				"core-js": "^3.0.1",
+				"escape-html": "^1.0.3",
+				"fast-deep-equal": "^2.0.1",
+				"global": "^4.3.2",
+				"lodash": "^4.17.11",
+				"prop-types": "^15.7.2",
+				"qs": "^6.6.0",
+				"react-color": "^2.17.0",
+				"react-lifecycles-compat": "^3.0.4",
+				"react-select": "^3.0.0"
+			},
+			"dependencies": {
+				"qs": {
+					"version": "6.9.0",
+					"resolved": "https://registry.npmjs.org/qs/-/qs-6.9.0.tgz",
+					"integrity": "sha512-27RP4UotQORTpmNQDX8BHPukOnBP3p1uUJY5UnDhaJB+rMt9iMsok724XL+UHU23bEFOHRMQ2ZhI99qOWUMGFA==",
+					"dev": true
+				}
+			}
+		},
 		"@storybook/addon-viewport": {
 			"version": "5.2.3",
 			"resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-5.2.3.tgz",
@@ -6589,6 +6614,15 @@
 				"csstype": "^2.2.0"
 			}
 		},
+		"@types/react-color": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.1.tgz",
+			"integrity": "sha512-J6mYm43Sid9y+OjZ7NDfJ2VVkeeuTPNVImNFITgQNXodHteKfl/t/5pAR5Z9buodZ2tCctsZjgiMlQOpfntakw==",
+			"dev": true,
+			"requires": {
+				"@types/react": "*"
+			}
+		},
 		"@types/react-syntax-highlighter": {
 			"version": "10.1.0",
 			"resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-10.1.0.tgz",
@@ -7063,6 +7097,7 @@
 				"classnames": "^2.2.5",
 				"clipboard": "^2.0.1",
 				"dom-scroll-into-view": "^1.2.1",
+				"hex-rgb": "4.1.0",
 				"lodash": "^4.17.15",
 				"memize": "^1.0.5",
 				"moment": "^2.22.1",
@@ -7071,6 +7106,7 @@
 				"react-dates": "^17.1.1",
 				"react-spring": "^8.0.20",
 				"rememo": "^3.0.0",
+				"styled-components": "^4.4.0",
 				"tinycolor2": "^1.4.1",
 				"uuid": "^3.3.2"
 			}
@@ -9269,11 +9305,21 @@
 				"@babel/template": "^7.0.0-beta.49"
 			}
 		},
+		"babel-plugin-styled-components": {
+			"version": "1.10.6",
+			"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz",
+			"integrity": "sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA==",
+			"requires": {
+				"@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": {
 			"version": "6.18.0",
 			"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-			"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
-			"dev": true
+			"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
 		},
 		"babel-plugin-syntax-trailing-function-commas": {
 			"version": "7.0.0-beta.0",
@@ -10719,6 +10765,11 @@
 				"quick-lru": "^1.0.0"
 			}
 		},
+		"camelize": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+			"integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+		},
 		"can-use-dom": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz",
@@ -12927,6 +12978,11 @@
 				}
 			}
 		},
+		"css-color-keywords": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+			"integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+		},
 		"css-color-names": {
 			"version": "0.0.4",
 			"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -13245,6 +13301,16 @@
 				}
 			}
 		},
+		"css-to-react-native": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz",
+			"integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==",
+			"requires": {
+				"camelize": "^1.0.0",
+				"css-color-keywords": "^1.0.0",
+				"postcss-value-parser": "^3.3.0"
+			}
+		},
 		"css-tree": {
 			"version": "1.0.0-alpha.28",
 			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.28.tgz",
@@ -14041,6 +14107,15 @@
 				"utila": "~0.4"
 			}
 		},
+		"dom-helpers": {
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+			"integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+			"dev": true,
+			"requires": {
+				"@babel/runtime": "^7.1.2"
+			}
+		},
 		"dom-scroll-into-view": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz",
@@ -17924,6 +17999,11 @@
 			"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
 			"dev": true
 		},
+		"hex-rgb": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/hex-rgb/-/hex-rgb-4.1.0.tgz",
+			"integrity": "sha512-n7xsIfyBkFChITGPh6FLtxNzAt2HxZLcQIY9hYH4gm2gmMQJHMguMH3E+jnmvUbSTF5QrmFnGab5Ippi+D7e/g=="
+		},
 		"highlight.js": {
 			"version": "9.12.0",
 			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
@@ -19267,6 +19347,11 @@
 			"integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
 			"dev": true
 		},
+		"is-what": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/is-what/-/is-what-3.3.1.tgz",
+			"integrity": "sha512-seFn10yAXy+yJlTRO+8VfiafC+0QJanGLMPTBWLrJm/QPauuchy0UXh8B6H5o9VA8BAzk0iYievt6mNp6gfaqA=="
+		},
 		"is-whitespace-character": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.2.tgz",
@@ -20825,8 +20910,7 @@
 		"jsesc": {
 			"version": "2.5.1",
 			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.1.tgz",
-			"integrity": "sha1-5CGiqOINawgZ3yiQj3glJrlt0f4=",
-			"dev": true
+			"integrity": "sha1-5CGiqOINawgZ3yiQj3glJrlt0f4="
 		},
 		"json-parse-better-errors": {
 			"version": "1.0.2",
@@ -22149,6 +22233,12 @@
 				"unquote": "^1.1.0"
 			}
 		},
+		"material-colors": {
+			"version": "1.2.6",
+			"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+			"integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==",
+			"dev": true
+		},
 		"mathml-tag-names": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.0.tgz",
@@ -22259,6 +22349,11 @@
 			"resolved": "https://registry.npmjs.org/memize/-/memize-1.0.5.tgz",
 			"integrity": "sha512-Dm8Jhb5kiC4+ynYsVR4QDXKt+o2dfqGuY4hE2x+XlXZkdndlT80bJxfcMv5QGp/FCy6MhG7f5ElpmKPFKOSEpg=="
 		},
+		"memoize-one": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
+			"integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+		},
 		"memoizerific": {
 			"version": "1.11.3",
 			"resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
@@ -22361,6 +22456,14 @@
 				}
 			}
 		},
+		"merge-anything": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.1.tgz",
+			"integrity": "sha512-dYOIAl9GFCJNctSIHWOj9OJtarCjsD16P8ObCl6oxrujAG+kOvlwJuOD9/O9iYZ9aTi1RGpGTG9q9etIvuUikQ==",
+			"requires": {
+				"is-what": "^3.3.1"
+			}
+		},
 		"merge-deep": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.2.tgz",
@@ -26769,8 +26872,7 @@
 		"postcss-value-parser": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
-			"integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
-			"dev": true
+			"integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU="
 		},
 		"posthtml": {
 			"version": "0.11.3",
@@ -27459,6 +27561,20 @@
 				"@babel/runtime": "^7.0.0"
 			}
 		},
+		"react-color": {
+			"version": "2.17.3",
+			"resolved": "https://registry.npmjs.org/react-color/-/react-color-2.17.3.tgz",
+			"integrity": "sha512-1dtO8LqAVotPIChlmo6kLtFS1FP89ll8/OiA8EcFRDR+ntcK+0ukJgByuIQHRtzvigf26dV5HklnxDIvhON9VQ==",
+			"dev": true,
+			"requires": {
+				"@icons/material": "^0.2.4",
+				"lodash": "^4.17.11",
+				"material-colors": "^1.2.1",
+				"prop-types": "^15.5.10",
+				"reactcss": "^1.2.0",
+				"tinycolor2": "^1.4.1"
+			}
+		},
 		"react-dates": {
 			"version": "17.2.0",
 			"resolved": "https://registry.npmjs.org/react-dates/-/react-dates-17.2.0.tgz",
@@ -27886,6 +28002,15 @@
 				"prop-types": "^15.6.1"
 			}
 		},
+		"react-input-autosize": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.2.tgz",
+			"integrity": "sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==",
+			"dev": true,
+			"requires": {
+				"prop-types": "^15.5.8"
+			}
+		},
 		"react-is": {
 			"version": "16.8.4",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.4.tgz",
@@ -28511,6 +28636,22 @@
 			"integrity": "sha512-ITw8t/HOFNose2yf1y9pPFSSeB9ISOq2JdHpuZvj/Qb+iSsLml8GkkHdDlURzieO7B3dFDtMrrneZLl3N5z/hg==",
 			"dev": true
 		},
+		"react-select": {
+			"version": "3.0.8",
+			"resolved": "https://registry.npmjs.org/react-select/-/react-select-3.0.8.tgz",
+			"integrity": "sha512-v9LpOhckLlRmXN5A6/mGGEft4FMrfaBFTGAnuPHcUgVId7Je42kTq9y0Z+Ye5z8/j0XDT3zUqza8gaRaI1PZIg==",
+			"dev": true,
+			"requires": {
+				"@babel/runtime": "^7.4.4",
+				"@emotion/cache": "^10.0.9",
+				"@emotion/core": "^10.0.9",
+				"@emotion/css": "^10.0.9",
+				"memoize-one": "^5.0.0",
+				"prop-types": "^15.6.0",
+				"react-input-autosize": "^2.2.2",
+				"react-transition-group": "^2.2.1"
+			}
+		},
 		"react-sizeme": {
 			"version": "2.6.7",
 			"resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-2.6.7.tgz",
@@ -28585,6 +28726,18 @@
 				"react-proxy": "^1.1.7"
 			}
 		},
+		"react-transition-group": {
+			"version": "2.9.0",
+			"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+			"integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+			"dev": true,
+			"requires": {
+				"dom-helpers": "^3.4.0",
+				"loose-envify": "^1.4.0",
+				"prop-types": "^15.6.2",
+				"react-lifecycles-compat": "^3.0.4"
+			}
+		},
 		"react-with-direction": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/react-with-direction/-/react-with-direction-1.3.0.tgz",
@@ -28620,6 +28773,15 @@
 				"global-cache": "^1.2.1"
 			}
 		},
+		"reactcss": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
+			"integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
+			"dev": true,
+			"requires": {
+				"lodash": "^4.0.1"
+			}
+		},
 		"read": {
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
@@ -30754,8 +30916,7 @@
 		"source-map": {
 			"version": "0.5.7",
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-			"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-			"dev": true
+			"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
 		},
 		"source-map-loader": {
 			"version": "0.2.4",
@@ -31397,6 +31558,36 @@
 				"inline-style-parser": "0.1.1"
 			}
 		},
+		"styled-components": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.0.tgz",
+			"integrity": "sha512-xQ6vTI/0zNjZ1BBDRxyjvBddrxhQ3DxjeCdaLM1lSn5FDnkTOQgRkmWvcUiTajqc5nJqKVl+7sUioMqktD0+Zw==",
+			"requires": {
+				"@babel/helper-module-imports": "^7.0.0",
+				"@babel/traverse": "^7.0.0",
+				"@emotion/is-prop-valid": "^0.8.1",
+				"@emotion/unitless": "^0.7.0",
+				"babel-plugin-styled-components": ">= 1",
+				"css-to-react-native": "^2.2.2",
+				"memoize-one": "^5.0.0",
+				"merge-anything": "^2.2.4",
+				"prop-types": "^15.5.4",
+				"react-is": "^16.6.0",
+				"stylis": "^3.5.0",
+				"stylis-rule-sheet": "^0.0.10",
+				"supports-color": "^5.5.0"
+			},
+			"dependencies": {
+				"supports-color": {
+					"version": "5.5.0",
+					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+					"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+					"requires": {
+						"has-flag": "^3.0.0"
+					}
+				}
+			}
+		},
 		"stylehacks": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -31790,6 +31981,16 @@
 				}
 			}
 		},
+		"stylis": {
+			"version": "3.5.4",
+			"resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
+			"integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
+		},
+		"stylis-rule-sheet": {
+			"version": "0.0.10",
+			"resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
+			"integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
+		},
 		"sugarss": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",
@@ -32971,8 +33172,7 @@
 		"trim-right": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
-			"integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=",
-			"dev": true
+			"integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM="
 		},
 		"trim-trailing-lines": {
 			"version": "1.1.1",
diff --git a/package.json b/package.json
index 84f28a49d0d870..266080d51a2fc6 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
 		"@octokit/rest": "16.26.0",
 		"@storybook/addon-a11y": "5.2.3",
 		"@storybook/addon-docs": "5.2.3",
+		"@storybook/addon-knobs": "5.2.3",
 		"@storybook/addon-viewport": "5.2.3",
 		"@storybook/react": "5.2.3",
 		"@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",

From 643d02f1b9675e5d1094e571bc729cc84a04cb3f Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 11 Oct 2019 17:10:29 -0400
Subject: [PATCH 02/37] Add styled-components and hex-rgb to
 wordpress/components dependencies

---
 packages/components/package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/package.json b/packages/components/package.json
index d19667eca46cf5..5b8a4f6a7849ee 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -35,6 +35,7 @@
 		"classnames": "^2.2.5",
 		"clipboard": "^2.0.1",
 		"dom-scroll-into-view": "^1.2.1",
+		"hex-rgb": "4.1.0",
 		"lodash": "^4.17.15",
 		"memize": "^1.0.5",
 		"moment": "^2.22.1",
@@ -43,6 +44,7 @@
 		"react-dates": "^17.1.1",
 		"react-spring": "^8.0.20",
 		"rememo": "^3.0.0",
+		"styled-components": "^4.4.0",
 		"tinycolor2": "^1.4.1",
 		"uuid": "^3.3.2"
 	},

From c86781150a26905d67e69b841d45763da2e3d6dd Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 11 Oct 2019 17:10:54 -0400
Subject: [PATCH 03/37] Implement Storybook knobs addon

---
 packages/components/storybook/addons.js | 1 +
 packages/components/storybook/config.js | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/packages/components/storybook/addons.js b/packages/components/storybook/addons.js
index 48824f721ea0c4..961c85e8508288 100644
--- a/packages/components/storybook/addons.js
+++ b/packages/components/storybook/addons.js
@@ -2,4 +2,5 @@
  * External dependencies
  */
 import '@storybook/addon-a11y/register';
+import '@storybook/addon-knobs/register';
 import '@storybook/addon-viewport/register';
diff --git a/packages/components/storybook/config.js b/packages/components/storybook/config.js
index eace300f3fc963..456b00f53692ac 100644
--- a/packages/components/storybook/config.js
+++ b/packages/components/storybook/config.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { addDecorator, configure } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
 import { withA11y } from '@storybook/addon-a11y';
 
 /**
@@ -9,6 +10,7 @@ import { withA11y } from '@storybook/addon-a11y';
  */
 import '../build-style/style.css';
 
+addDecorator( withKnobs );
 addDecorator( withA11y );
 configure(
 	[

From 93be05ad263eee5d5489fd8818418a6f9d9171c9 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 11 Oct 2019 17:11:53 -0400
Subject: [PATCH 04/37] Add color utilities

This update enables JS to use the color hex codes defined in Sass.
The hex codes are copied and stored as constants (objects).
The key/value pairs are accessed through a convenient custom getter function.
---
 packages/components/src/utils/colors.js       |  40 ++++++
 .../components/src/utils/colors.values.js     | 115 ++++++++++++++++++
 2 files changed, 155 insertions(+)
 create mode 100644 packages/components/src/utils/colors.js
 create mode 100644 packages/components/src/utils/colors.values.js

diff --git a/packages/components/src/utils/colors.js b/packages/components/src/utils/colors.js
new file mode 100644
index 00000000000000..f922f553260016
--- /dev/null
+++ b/packages/components/src/utils/colors.js
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+import hexRgb from 'hex-rgb';
+/**
+ * Internal dependencies
+ */
+import { COLORS } from './colors.values';
+
+/**
+ * Generating a CSS complient rgba() color value.
+ *
+ * @param {string} hexValue The hex value to convert to rgba().
+ * @param {number} alpha The alpha value for opacity.
+ * @return {string} The converted rgba() color value.
+ *
+ * @example
+ * rgba( '#000000', 0.5 )
+ * // rgba(0, 0, 0, 0.5)
+ */
+export function rgba( hexValue = '', alpha = 1 ) {
+	const [ r, g, b ] = hexRgb( hexValue, { format: 'array' } );
+	return `rgba(${ r }, ${ g }, ${ b }, ${ alpha })`;
+}
+
+/**
+ * Retrieves a color from the color palette.
+ *
+ * @param {string} value The value to retrieve.
+ * @return {string} The color (or fallback, if not found).
+ *
+ * @example
+ * color( 'blue.wordpress.700' )
+ * // #00669b
+ */
+export function color( value ) {
+	const fallbackColor = '#000';
+	return get( COLORS, value, fallbackColor );
+}
diff --git a/packages/components/src/utils/colors.values.js b/packages/components/src/utils/colors.values.js
new file mode 100644
index 00000000000000..8dfca09543f5e9
--- /dev/null
+++ b/packages/components/src/utils/colors.values.js
@@ -0,0 +1,115 @@
+/**
+ * Internal dependencies
+ */
+import { rgba } from './colors';
+export const BASE = {
+	black: '#000',
+	white: '#fff',
+};
+
+export const DARK_GRAY = {
+	900: '#191e23',
+	800: '#23282d',
+	700: '#32373c',
+	600: '#40464d',
+	500: '#555d66', // Use this most of the time for dark items.
+	400: '#606a73',
+	300: '#6c7781', // Lightest gray that can be used for AA text contrast.
+	200: '#7e8993',
+	150: '#8d96a0', // Lightest gray that can be used for AA non-text contrast.
+	100: '#8f98a1',
+};
+
+export const DARK_OPACITY = {
+	900: rgba( '#000510', 0.9 ),
+	800: rgba( '#00000a', 0.85 ),
+	700: rgba( '#06060b', 0.8 ),
+	600: rgba( '#000913', 0.75 ),
+	500: rgba( '#0a1829', 0.7 ),
+	400: rgba( '#0a1829', 0.65 ),
+	300: rgba( '#0e1c2e', 0.62 ),
+	200: rgba( '#162435', 0.55 ),
+	100: rgba( '#223443', 0.5 ),
+	backgroundFill: rgba( DARK_GRAY[ 700 ], 0.7 ),
+};
+
+export const DARK_OPACITY_LIGHT = {
+	900: rgba( '#304455', 0.45 ),
+	800: rgba( '#425863', 0.4 ),
+	700: rgba( '#667886', 0.35 ),
+	600: rgba( '#7b86a2', 0.3 ),
+	500: rgba( '#9197a2', 0.25 ),
+	400: rgba( '#95959c', 0.2 ),
+	300: rgba( '#829493', 0.15 ),
+	200: rgba( '#8b8b96', 0.1 ),
+	100: rgba( '#747474', 0.05 ),
+};
+
+export const LIGHT_GRAY = {
+	900: '#a2aab2',
+	800: '#b5bcc2',
+	700: '#ccd0d4',
+	600: '#d7dade',
+	500: '#e2e4e7', // Good for "grayed" items and borders.
+	400: '#e8eaeb', // Good for "readonly" input fields and special text selection.
+	300: '#edeff0',
+	200: '#f3f4f5',
+	100: '#f8f9f9',
+};
+
+export const LIGHT_OPACITY_LIGHT = {
+	900: rgba( BASE.white, 0.5 ),
+	800: rgba( BASE.white, 0.45 ),
+	700: rgba( BASE.white, 0.4 ),
+	600: rgba( BASE.white, 0.35 ),
+	500: rgba( BASE.white, 0.3 ),
+	400: rgba( BASE.white, 0.25 ),
+	300: rgba( BASE.white, 0.2 ),
+	200: rgba( BASE.white, 0.15 ),
+	100: rgba( BASE.white, 0.1 ),
+	backgroundFill: rgba( LIGHT_GRAY[ 300 ], 0.8 ),
+};
+
+// Additional colors.
+// Some are from https://make.wordpress.org/design/handbook/foundations/colors/.
+
+export const BLUE = {
+	wordpress: {
+		700: '#00669b',
+	},
+	dark: {
+		900: '#0071a1',
+	},
+	medium: {
+		900: '#006589',
+		800: '#00739c',
+		700: '#007fac',
+		600: '#008dbe',
+		500: '#00a0d2',
+		400: '#33b3db',
+		300: '#66c6e4',
+		200: '#bfe7f3',
+		100: '#e5f5fa',
+		highlight: '#b3e7fe',
+		focus: '#007cba',
+	},
+};
+
+export const ALERT = {
+	yellow: '#f0b849',
+	red: '#d94f4f',
+	green: '#4ab866',
+};
+
+export const COLORS = {
+	...BASE,
+	darkGrey: DARK_GRAY,
+	darkOpacity: DARK_OPACITY,
+	darkOpacityLight: DARK_OPACITY_LIGHT,
+	lightGray: LIGHT_GRAY,
+	lightGrayLight: LIGHT_OPACITY_LIGHT,
+	blue: BLUE,
+	alert: ALERT,
+};
+
+export default COLORS;

From 90a1bcf0bd956f9500ec819ba5fb3da5e3f0746a Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 11 Oct 2019 17:38:40 -0400
Subject: [PATCH 05/37] Create Card component + sub components, and add initial
 stories

This update adds the new Card component with it's various sub-components.
A set of stories (Storybook) were added for the Card and it's sub-components
for UI development.
---
 packages/components/src/card/body.js          |  34 ++++
 packages/components/src/card/context.js       |  18 ++
 packages/components/src/card/divider.js       |  19 ++
 packages/components/src/card/footer.js        |  35 ++++
 packages/components/src/card/header.js        |  35 ++++
 packages/components/src/card/index.js         |  52 ++++++
 packages/components/src/card/media.js         |  19 ++
 packages/components/src/card/stories/index.js | 167 ++++++++++++++++++
 .../components/src/card/styles/card.styles.js | 102 +++++++++++
 .../src/card/styles/mixins.styles.js          |  66 +++++++
 10 files changed, 547 insertions(+)
 create mode 100644 packages/components/src/card/body.js
 create mode 100644 packages/components/src/card/context.js
 create mode 100644 packages/components/src/card/divider.js
 create mode 100644 packages/components/src/card/footer.js
 create mode 100644 packages/components/src/card/header.js
 create mode 100644 packages/components/src/card/index.js
 create mode 100644 packages/components/src/card/media.js
 create mode 100644 packages/components/src/card/stories/index.js
 create mode 100644 packages/components/src/card/styles/card.styles.js
 create mode 100644 packages/components/src/card/styles/mixins.styles.js

diff --git a/packages/components/src/card/body.js b/packages/components/src/card/body.js
new file mode 100644
index 00000000000000..e1da1f6b664f29
--- /dev/null
+++ b/packages/components/src/card/body.js
@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { BodyUI } from './styles/card.styles';
+import { useCardContext } from './context';
+
+export const defaultProps = {
+	isShady: false,
+	size: 'md',
+};
+
+export function Body( props ) {
+	const { className, isShady, ...additionalProps } = props;
+	const mergedProps = { ...useCardContext(), ...props };
+	const { size } = mergedProps;
+
+	const classes = classnames(
+		'components-card-body',
+		isShady && 'is-shady',
+		size && `is-size-${ size }`,
+		className
+	);
+
+	return <BodyUI { ...additionalProps } className={ classes } />;
+}
+
+Body.defaultProps = defaultProps;
+
+export default Body;
diff --git a/packages/components/src/card/context.js b/packages/components/src/card/context.js
new file mode 100644
index 00000000000000..03f668c1eb06d8
--- /dev/null
+++ b/packages/components/src/card/context.js
@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+export const CardContext = createContext( {} );
+export const useCardContext = () => useContext( CardContext );
+
+export const CardProvider = ( props ) => {
+	const { Provider } = CardContext;
+	const { children, size, variant } = props;
+	const value = {
+		size,
+		variant,
+	};
+
+	return <Provider value={ value }>{ children }</Provider>;
+};
diff --git a/packages/components/src/card/divider.js b/packages/components/src/card/divider.js
new file mode 100644
index 00000000000000..ab7d5197d767d3
--- /dev/null
+++ b/packages/components/src/card/divider.js
@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { DividerUI } from './styles/card.styles';
+
+export function Divider( props ) {
+	const { className, ...additionalProps } = props;
+
+	const classes = classnames( 'components-card-divider', className );
+
+	return <DividerUI { ...additionalProps } className={ classes } role="separator" />;
+}
+
+export default Divider;
diff --git a/packages/components/src/card/footer.js b/packages/components/src/card/footer.js
new file mode 100644
index 00000000000000..6edb0431ac665b
--- /dev/null
+++ b/packages/components/src/card/footer.js
@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { FooterUI } from './styles/card.styles';
+import { useCardContext } from './context';
+
+export const defaultProps = {
+	isShady: false,
+	size: 'md',
+};
+
+export function Footer( props ) {
+	const { className, isShady, ...additionalProps } = props;
+	const mergedProps = { ...useCardContext(), ...props };
+	const { size, variant } = mergedProps;
+
+	const classes = classnames(
+		'components-card-footer',
+		isShady && 'is-shady',
+		size && `is-size-${ size }`,
+		variant && `is-variant-${ variant }`,
+		className
+	);
+
+	return <FooterUI { ...additionalProps } className={ classes } />;
+}
+
+Footer.defaultProps = defaultProps;
+
+export default Footer;
diff --git a/packages/components/src/card/header.js b/packages/components/src/card/header.js
new file mode 100644
index 00000000000000..958349d3669377
--- /dev/null
+++ b/packages/components/src/card/header.js
@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { HeaderUI } from './styles/card.styles';
+import { useCardContext } from './context';
+
+export const defaultProps = {
+	isShady: false,
+	size: 'md',
+};
+
+export function Header( props ) {
+	const { className, isShady, ...additionalProps } = props;
+	const mergedProps = { ...useCardContext(), ...props };
+	const { size, variant } = mergedProps;
+
+	const classes = classnames(
+		'components-card-header',
+		isShady && 'is-shady',
+		size && `is-size-${ size }`,
+		variant && `is-variant-${ variant }`,
+		className
+	);
+
+	return <HeaderUI { ...additionalProps } className={ classes } />;
+}
+
+Header.defaultProps = defaultProps;
+
+export default Header;
diff --git a/packages/components/src/card/index.js b/packages/components/src/card/index.js
new file mode 100644
index 00000000000000..715ac5da4af94b
--- /dev/null
+++ b/packages/components/src/card/index.js
@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { CardProvider } from './context';
+import Body from './body';
+import Divider from './divider';
+import Footer from './footer';
+import Header from './header';
+import Media from './media';
+import { CardUI } from './styles/card.styles';
+
+export const defaultProps = {
+	size: 'md',
+	variant: 'default',
+};
+
+export function Card( props ) {
+	const { className, size, variant, ...additionalProps } = props;
+
+	const classes = classnames(
+		'components-card',
+		size && `is-size-${ size }`,
+		variant && `is-variant-${ variant }`,
+		className
+	);
+
+	const contextProps = {
+		size,
+		variant,
+	};
+
+	return (
+		<CardProvider { ...contextProps }>
+			<CardUI { ...additionalProps } className={ classes } />
+		</CardProvider>
+	);
+}
+
+Card.Body = Body;
+Card.Divider = Divider;
+Card.Footer = Footer;
+Card.Header = Header;
+Card.Media = Media;
+
+Card.defaultProps = defaultProps;
+
+export default Card;
diff --git a/packages/components/src/card/media.js b/packages/components/src/card/media.js
new file mode 100644
index 00000000000000..824e1b662e6695
--- /dev/null
+++ b/packages/components/src/card/media.js
@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { MediaUI } from './styles/card.styles';
+
+export function Media( props ) {
+	const { className, ...additionalProps } = props;
+
+	const classes = classnames( 'components-card-media', className );
+
+	return <MediaUI { ...additionalProps } className={ classes } />;
+}
+
+export default Media;
diff --git a/packages/components/src/card/stories/index.js b/packages/components/src/card/stories/index.js
new file mode 100644
index 00000000000000..c72dfd6dd7cc16
--- /dev/null
+++ b/packages/components/src/card/stories/index.js
@@ -0,0 +1,167 @@
+/**
+ * External dependencies
+ */
+
+/* eslint-disable import/no-extraneous-dependencies */
+import { text, boolean, select } from '@storybook/addon-knobs';
+/* eslint-enable import/no-extraneous-dependencies */
+
+/**
+ * Internal dependencies
+ */
+import Card from '../';
+
+export default { title: 'Card', component: Card };
+
+export const _default = () => (
+	<Card>
+		<Card.Body>Code is Poetry</Card.Body>
+	</Card>
+);
+
+export const media = () => {
+	return (
+		<div>
+			<Card style={ { width: 360 } } size="sm">
+				<Card.Media>
+					<img
+						src="https://images.unsplash.com/photo-1570776765652-4ce2a88cc1f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+						alt="SMELLING MARSHMELLOW ICECREAM CONE"
+					/>
+				</Card.Media>
+				<Card.Body>
+					<div>Content</div>
+				</Card.Body>
+			</Card>
+			<br />
+
+			<Card style={ { width: 360 } } size="sm">
+				<Card.Header>
+					<div>Content</div>
+				</Card.Header>
+				<Card.Media>
+					<img
+						src="https://images.unsplash.com/photo-1570776765652-4ce2a88cc1f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+						alt="SMELLING MARSHMELLOW ICECREAM CONE"
+					/>
+				</Card.Media>
+			</Card>
+			<br />
+
+			<Card style={ { width: 360 } } size="sm">
+				<Card.Header>
+					<div>Content</div>
+				</Card.Header>
+				<Card.Media>
+					<img
+						src="https://images.unsplash.com/photo-1570776765652-4ce2a88cc1f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+						alt="SMELLING MARSHMELLOW ICECREAM CONE"
+					/>
+				</Card.Media>
+				<Card.Footer>
+					<div>Content</div>
+				</Card.Footer>
+			</Card>
+			<br />
+			<Card style={ { width: 360 } } size="sm">
+				<Card.Media>
+					<img
+						src="https://images.unsplash.com/photo-1570776765652-4ce2a88cc1f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+						alt="SMELLING MARSHMELLOW ICECREAM CONE"
+					/>
+				</Card.Media>
+			</Card>
+
+			<br />
+			<br />
+			<br />
+			<br />
+			<Card style={ { width: 360 } }>
+				<Card.Media>
+					<iframe
+						width="560"
+						height="315"
+						src="https://www.youtube.com/embed/zGP6zk7jcrQ"
+						frameBorder="0"
+						allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+						allowFullScreen
+						title="CORGI!!!!!!!"
+					></iframe>
+				</Card.Media>
+			</Card>
+		</div>
+	);
+};
+
+export const divider = () => {
+	const props = {
+		size: select( 'size', {
+			lg: 'lg',
+			md: 'md',
+			sm: 'sm',
+			xs: 'xs',
+		} ),
+		variant: select( 'variant', {
+			default: 'default',
+			borderless: 'borderless',
+			raised: 'raised',
+		} ),
+	};
+
+	return (
+		<div>
+			<Card style={ { width: 360 } } { ...props }>
+				<Card.Body>
+					<div>Content</div>
+				</Card.Body>
+				<Card.Divider />
+				<Card.Body>
+					<div>Content</div>
+				</Card.Body>
+			</Card>
+		</div>
+	);
+};
+
+export const playground = () => {
+	const body = text( 'body', 'Code is Poetry' );
+	const header = text( 'header', 'Header' );
+	const footer = text( 'footer', 'Footer' );
+
+	const isHeaderShady = boolean( 'isHeaderShady', false );
+	const isFooterShady = boolean( 'isFooterShade', false );
+
+	const props = {
+		size: select( 'size', {
+			lg: 'lg',
+			md: 'md',
+			sm: 'sm',
+			xs: 'xs',
+		} ),
+		variant: select( 'variant', {
+			default: 'default',
+			borderless: 'borderless',
+			raised: 'raised',
+		} ),
+	};
+
+	return (
+		<>
+			<Card { ...props }>
+				{ header && <Card.Header isShady={ isHeaderShady }>{ header }</Card.Header> }
+				{ body && <Card.Body>{ body }</Card.Body> }
+				{ footer && <Card.Footer isShady={ isFooterShady }>{ footer }</Card.Footer> }
+			</Card>
+		</>
+	);
+};
+
+export const blockDirectoryCard = () => {
+	return (
+		<Card size="sm">
+			<Card.Body>Stuff</Card.Body>
+			<Card.Divider />
+			<Card.Body isShady>Stuff</Card.Body>
+		</Card>
+	);
+};
diff --git a/packages/components/src/card/styles/card.styles.js b/packages/components/src/card/styles/card.styles.js
new file mode 100644
index 00000000000000..4704fdda922088
--- /dev/null
+++ b/packages/components/src/card/styles/card.styles.js
@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import styled from 'styled-components';
+
+/**
+ * Internal dependencies
+ */
+import { color } from '../../utils/colors';
+import {
+	bodySize,
+	headerFooterSizes,
+	handleBorderless,
+	handleShady,
+} from './mixins.styles';
+
+export const styleProps = {
+	borderColor: color( 'lightGray.500' ),
+	borderRadius: '3px',
+	backgroundShady: color( 'lightGray.200' ),
+};
+
+const { borderColor, borderRadius } = styleProps;
+
+export const CardUI = styled.div`
+	background: ${ color( 'white' ) };
+	box-sizing: border-box;
+	border-radius: ${ borderRadius };
+	border: 1px solid ${ borderColor };
+
+	${ handleBorderless };
+
+	&.is-variant {
+		&-raised {
+			box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
+				0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+				0px 2px 1px -1px rgba(0, 0, 0, 0.12);
+		}
+	}
+`;
+
+export const HeaderUI = styled.div`
+	border-bottom: 1px solid ${ borderColor };
+	border-top-left-radius: ${ borderRadius };
+	border-top-right-radius: ${ borderRadius };
+	box-sizing: border-box;
+
+	${ headerFooterSizes };
+	${ handleBorderless };
+	${ handleShady };
+`;
+
+export const MediaUI = styled.div`
+	box-sizing: border-box;
+
+	img,
+	iframe {
+		display: block;
+		max-width: 100%;
+		height: auto;
+	}
+
+	&:first-child {
+		img,
+		iframe {
+			border-top-left-radius: ${ borderRadius };
+			border-top-right-radius: ${ borderRadius };
+		}
+	}
+
+	&:last-child {
+		img,
+		iframe {
+			border-bottom-left-radius: ${ borderRadius };
+			border-bottom-right-radius: ${ borderRadius };
+		}
+	}
+`;
+
+export const BodyUI = styled.div`
+	box-sizing: border-box;
+
+	${ bodySize };
+	${ handleShady };
+`;
+
+export const FooterUI = styled.div`
+	border-top: 1px solid ${ borderColor };
+	border-bottom-left-radius: ${ borderRadius };
+	border-bottom-right-radius: ${ borderRadius };
+	box-sizing: border-box;
+
+	${ headerFooterSizes };
+	${ handleBorderless };
+	${ handleShady };
+`;
+
+export const DividerUI = styled.div`
+	background-color: ${ borderColor };
+	box-sizing: border-box;
+	height: 1px;
+`;
diff --git a/packages/components/src/card/styles/mixins.styles.js b/packages/components/src/card/styles/mixins.styles.js
new file mode 100644
index 00000000000000..692d96ff37a42a
--- /dev/null
+++ b/packages/components/src/card/styles/mixins.styles.js
@@ -0,0 +1,66 @@
+/**
+ * Internal dependencies
+ */
+import { styleProps } from './card.styles';
+
+const { backgroundShady } = styleProps;
+
+export function bodySize() {
+	return `
+		&.is-size {
+			&-lg {
+				padding: 28px;
+			}
+			&-md {
+				padding: 20px;
+			}
+			&-sm {
+				padding: 12px;
+			}
+			&-xs {
+				padding: 8px;
+			}
+		}
+	`;
+}
+
+export function headerFooterSizes() {
+	return `
+		&.is-size {
+			&-lg {
+				padding: 20px 28px;
+			}
+			&-md {
+				padding: 12px 20px;
+			}
+			&-sm {
+				padding: 8px 12px;
+			}
+			&-xs {
+				padding: 4px 8px;
+			}
+		}
+	`;
+}
+
+export function handleBorderless() {
+	return `
+		&.is-variant {
+			&-borderless {
+				border: none;
+			}
+
+			&-raised {
+				border: none;
+			}
+		}
+	`;
+}
+
+export function handleShady() {
+	return `
+		&.is-shady {
+			background: ${ backgroundShady };
+		}
+	`;
+}

From 66a869a81d6777074a067f0c8990b44e8bbd712c Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 11 Oct 2019 17:39:54 -0400
Subject: [PATCH 06/37] Export the new Card component

---
 packages/components/src/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 8542a86ba9b659..ea575d9be5d95b 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -5,6 +5,7 @@ export { default as Autocomplete } from './autocomplete';
 export { default as BaseControl } from './base-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
+export { default as Card } from './card';
 export { default as CheckboxControl } from './checkbox-control';
 export { default as ClipboardButton } from './clipboard-button';
 export { default as ColorIndicator } from './color-indicator';

From 20fcdfd5f3a26366ca205322d8f6f43aaea2009e Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 11 Oct 2019 17:45:23 -0400
Subject: [PATCH 07/37] Improve default, context, and prop merging for Card
 sub-components

---
 packages/components/src/card/body.js   | 4 +---
 packages/components/src/card/footer.js | 4 +---
 packages/components/src/card/header.js | 4 +---
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/card/body.js b/packages/components/src/card/body.js
index e1da1f6b664f29..53746615395f13 100644
--- a/packages/components/src/card/body.js
+++ b/packages/components/src/card/body.js
@@ -16,7 +16,7 @@ export const defaultProps = {
 
 export function Body( props ) {
 	const { className, isShady, ...additionalProps } = props;
-	const mergedProps = { ...useCardContext(), ...props };
+	const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
 	const { size } = mergedProps;
 
 	const classes = classnames(
@@ -29,6 +29,4 @@ export function Body( props ) {
 	return <BodyUI { ...additionalProps } className={ classes } />;
 }
 
-Body.defaultProps = defaultProps;
-
 export default Body;
diff --git a/packages/components/src/card/footer.js b/packages/components/src/card/footer.js
index 6edb0431ac665b..e87cfb55f3ebfb 100644
--- a/packages/components/src/card/footer.js
+++ b/packages/components/src/card/footer.js
@@ -16,7 +16,7 @@ export const defaultProps = {
 
 export function Footer( props ) {
 	const { className, isShady, ...additionalProps } = props;
-	const mergedProps = { ...useCardContext(), ...props };
+	const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
 	const { size, variant } = mergedProps;
 
 	const classes = classnames(
@@ -30,6 +30,4 @@ export function Footer( props ) {
 	return <FooterUI { ...additionalProps } className={ classes } />;
 }
 
-Footer.defaultProps = defaultProps;
-
 export default Footer;
diff --git a/packages/components/src/card/header.js b/packages/components/src/card/header.js
index 958349d3669377..7ea1291436b6a7 100644
--- a/packages/components/src/card/header.js
+++ b/packages/components/src/card/header.js
@@ -16,7 +16,7 @@ export const defaultProps = {
 
 export function Header( props ) {
 	const { className, isShady, ...additionalProps } = props;
-	const mergedProps = { ...useCardContext(), ...props };
+	const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
 	const { size, variant } = mergedProps;
 
 	const classes = classnames(
@@ -30,6 +30,4 @@ export function Header( props ) {
 	return <HeaderUI { ...additionalProps } className={ classes } />;
 }
 
-Header.defaultProps = defaultProps;
-
 export default Header;

From 3963db19ad6ff9a00adf1f81c48c9915ae199869 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 15 Oct 2019 13:18:17 -0400
Subject: [PATCH 08/37] Refactor Card components + sub-components, and add
 tests

This update refactors the import/export method of the Card components
to follow current conventions, which allows for better code splitting and
tree shaking.

Unit tests were added for the Card components, as well as tests for how
the sub-components integrate with the primary Card.
---
 packages/components/src/card/body.js          |   6 +-
 packages/components/src/card/divider.js       |  15 +-
 packages/components/src/card/footer.js        |   6 +-
 packages/components/src/card/header.js        |   6 +-
 packages/components/src/card/index.js         |  13 +-
 packages/components/src/card/media.js         |   6 +-
 packages/components/src/card/stories/index.js |  73 ++++---
 .../styles/{card.styles.js => card-styles.js} |  68 +++++-
 .../src/card/styles/mixins.styles.js          |  66 ------
 packages/components/src/card/test/body.js     |  48 +++++
 packages/components/src/card/test/divider.js  |  38 ++++
 packages/components/src/card/test/footer.js   |  55 +++++
 packages/components/src/card/test/header.js   |  55 +++++
 packages/components/src/card/test/index.js    | 195 ++++++++++++++++++
 packages/components/src/card/test/media.js    |  32 +++
 packages/components/src/index.js              |  28 ++-
 16 files changed, 572 insertions(+), 138 deletions(-)
 rename packages/components/src/card/styles/{card.styles.js => card-styles.js} (70%)
 delete mode 100644 packages/components/src/card/styles/mixins.styles.js
 create mode 100644 packages/components/src/card/test/body.js
 create mode 100644 packages/components/src/card/test/divider.js
 create mode 100644 packages/components/src/card/test/footer.js
 create mode 100644 packages/components/src/card/test/header.js
 create mode 100644 packages/components/src/card/test/index.js
 create mode 100644 packages/components/src/card/test/media.js

diff --git a/packages/components/src/card/body.js b/packages/components/src/card/body.js
index 53746615395f13..89d838beecda9e 100644
--- a/packages/components/src/card/body.js
+++ b/packages/components/src/card/body.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { BodyUI } from './styles/card.styles';
+import { BodyUI } from './styles/card-styles';
 import { useCardContext } from './context';
 
 export const defaultProps = {
@@ -14,7 +14,7 @@ export const defaultProps = {
 	size: 'md',
 };
 
-export function Body( props ) {
+export function CardBody( props ) {
 	const { className, isShady, ...additionalProps } = props;
 	const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
 	const { size } = mergedProps;
@@ -29,4 +29,4 @@ export function Body( props ) {
 	return <BodyUI { ...additionalProps } className={ classes } />;
 }
 
-export default Body;
+export default CardBody;
diff --git a/packages/components/src/card/divider.js b/packages/components/src/card/divider.js
index ab7d5197d767d3..1e11451e8369d6 100644
--- a/packages/components/src/card/divider.js
+++ b/packages/components/src/card/divider.js
@@ -6,14 +6,21 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { DividerUI } from './styles/card.styles';
+import { DividerUI } from './styles/card-styles';
 
-export function Divider( props ) {
+export function CardDivider( props ) {
 	const { className, ...additionalProps } = props;
 
 	const classes = classnames( 'components-card-divider', className );
 
-	return <DividerUI { ...additionalProps } className={ classes } role="separator" />;
+	return (
+		<DividerUI
+			{ ...additionalProps }
+			children={ null }
+			className={ classes }
+			role="separator"
+		/>
+	);
 }
 
-export default Divider;
+export default CardDivider;
diff --git a/packages/components/src/card/footer.js b/packages/components/src/card/footer.js
index e87cfb55f3ebfb..fac8b211a5838f 100644
--- a/packages/components/src/card/footer.js
+++ b/packages/components/src/card/footer.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { FooterUI } from './styles/card.styles';
+import { FooterUI } from './styles/card-styles';
 import { useCardContext } from './context';
 
 export const defaultProps = {
@@ -14,7 +14,7 @@ export const defaultProps = {
 	size: 'md',
 };
 
-export function Footer( props ) {
+export function CardFooter( props ) {
 	const { className, isShady, ...additionalProps } = props;
 	const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
 	const { size, variant } = mergedProps;
@@ -30,4 +30,4 @@ export function Footer( props ) {
 	return <FooterUI { ...additionalProps } className={ classes } />;
 }
 
-export default Footer;
+export default CardFooter;
diff --git a/packages/components/src/card/header.js b/packages/components/src/card/header.js
index 7ea1291436b6a7..9ca9c0b20698bb 100644
--- a/packages/components/src/card/header.js
+++ b/packages/components/src/card/header.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { HeaderUI } from './styles/card.styles';
+import { HeaderUI } from './styles/card-styles';
 import { useCardContext } from './context';
 
 export const defaultProps = {
@@ -14,7 +14,7 @@ export const defaultProps = {
 	size: 'md',
 };
 
-export function Header( props ) {
+export function CardHeader( props ) {
 	const { className, isShady, ...additionalProps } = props;
 	const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
 	const { size, variant } = mergedProps;
@@ -30,4 +30,4 @@ export function Header( props ) {
 	return <HeaderUI { ...additionalProps } className={ classes } />;
 }
 
-export default Header;
+export default CardHeader;
diff --git a/packages/components/src/card/index.js b/packages/components/src/card/index.js
index 715ac5da4af94b..536b90d1665356 100644
--- a/packages/components/src/card/index.js
+++ b/packages/components/src/card/index.js
@@ -7,12 +7,7 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import { CardProvider } from './context';
-import Body from './body';
-import Divider from './divider';
-import Footer from './footer';
-import Header from './header';
-import Media from './media';
-import { CardUI } from './styles/card.styles';
+import { CardUI } from './styles/card-styles';
 
 export const defaultProps = {
 	size: 'md',
@@ -41,12 +36,6 @@ export function Card( props ) {
 	);
 }
 
-Card.Body = Body;
-Card.Divider = Divider;
-Card.Footer = Footer;
-Card.Header = Header;
-Card.Media = Media;
-
 Card.defaultProps = defaultProps;
 
 export default Card;
diff --git a/packages/components/src/card/media.js b/packages/components/src/card/media.js
index 824e1b662e6695..572218d4e75f13 100644
--- a/packages/components/src/card/media.js
+++ b/packages/components/src/card/media.js
@@ -6,9 +6,9 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { MediaUI } from './styles/card.styles';
+import { MediaUI } from './styles/card-styles';
 
-export function Media( props ) {
+export function CardMedia( props ) {
 	const { className, ...additionalProps } = props;
 
 	const classes = classnames( 'components-card-media', className );
@@ -16,4 +16,4 @@ export function Media( props ) {
 	return <MediaUI { ...additionalProps } className={ classes } />;
 }
 
-export default Media;
+export default CardMedia;
diff --git a/packages/components/src/card/stories/index.js b/packages/components/src/card/stories/index.js
index c72dfd6dd7cc16..a582c3c7fcd02a 100644
--- a/packages/components/src/card/stories/index.js
+++ b/packages/components/src/card/stories/index.js
@@ -9,13 +9,18 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import Card from '../';
+import Card from '../index';
+import CardBody from '../body';
+import CardDivider from '../divider';
+import CardFooter from '../footer';
+import CardHeader from '../header';
+import CardMedia from '../media';
 
 export default { title: 'Card', component: Card };
 
 export const _default = () => (
 	<Card>
-		<Card.Body>Code is Poetry</Card.Body>
+		<CardBody>Code is Poetry</CardBody>
 	</Card>
 );
 
@@ -23,53 +28,53 @@ export const media = () => {
 	return (
 		<div>
 			<Card style={ { width: 360 } } size="sm">
-				<Card.Media>
+				<CardMedia>
 					<img
 						src="https://images.unsplash.com/photo-1570776765652-4ce2a88cc1f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
 						alt="SMELLING MARSHMELLOW ICECREAM CONE"
 					/>
-				</Card.Media>
-				<Card.Body>
+				</CardMedia>
+				<CardBody>
 					<div>Content</div>
-				</Card.Body>
+				</CardBody>
 			</Card>
 			<br />
 
 			<Card style={ { width: 360 } } size="sm">
-				<Card.Header>
+				<CardHeader>
 					<div>Content</div>
-				</Card.Header>
-				<Card.Media>
+				</CardHeader>
+				<CardMedia>
 					<img
 						src="https://images.unsplash.com/photo-1570776765652-4ce2a88cc1f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
 						alt="SMELLING MARSHMELLOW ICECREAM CONE"
 					/>
-				</Card.Media>
+				</CardMedia>
 			</Card>
 			<br />
 
 			<Card style={ { width: 360 } } size="sm">
-				<Card.Header>
+				<CardHeader>
 					<div>Content</div>
-				</Card.Header>
-				<Card.Media>
+				</CardHeader>
+				<CardMedia>
 					<img
 						src="https://images.unsplash.com/photo-1570776765652-4ce2a88cc1f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
 						alt="SMELLING MARSHMELLOW ICECREAM CONE"
 					/>
-				</Card.Media>
-				<Card.Footer>
+				</CardMedia>
+				<CardFooter>
 					<div>Content</div>
-				</Card.Footer>
+				</CardFooter>
 			</Card>
 			<br />
 			<Card style={ { width: 360 } } size="sm">
-				<Card.Media>
+				<CardMedia>
 					<img
 						src="https://images.unsplash.com/photo-1570776765652-4ce2a88cc1f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
 						alt="SMELLING MARSHMELLOW ICECREAM CONE"
 					/>
-				</Card.Media>
+				</CardMedia>
 			</Card>
 
 			<br />
@@ -77,7 +82,7 @@ export const media = () => {
 			<br />
 			<br />
 			<Card style={ { width: 360 } }>
-				<Card.Media>
+				<CardMedia>
 					<iframe
 						width="560"
 						height="315"
@@ -87,7 +92,7 @@ export const media = () => {
 						allowFullScreen
 						title="CORGI!!!!!!!"
 					></iframe>
-				</Card.Media>
+				</CardMedia>
 			</Card>
 		</div>
 	);
@@ -111,13 +116,13 @@ export const divider = () => {
 	return (
 		<div>
 			<Card style={ { width: 360 } } { ...props }>
-				<Card.Body>
+				<CardBody>
 					<div>Content</div>
-				</Card.Body>
-				<Card.Divider />
-				<Card.Body>
+				</CardBody>
+				<CardDivider />
+				<CardBody>
 					<div>Content</div>
-				</Card.Body>
+				</CardBody>
 			</Card>
 		</div>
 	);
@@ -148,9 +153,13 @@ export const playground = () => {
 	return (
 		<>
 			<Card { ...props }>
-				{ header && <Card.Header isShady={ isHeaderShady }>{ header }</Card.Header> }
-				{ body && <Card.Body>{ body }</Card.Body> }
-				{ footer && <Card.Footer isShady={ isFooterShady }>{ footer }</Card.Footer> }
+				{ header && (
+					<CardHeader isShady={ isHeaderShady }>{ header }</CardHeader>
+				) }
+				{ body && <CardBody>{ body }</CardBody> }
+				{ footer && (
+					<CardFooter isShady={ isFooterShady }>{ footer }</CardFooter>
+				) }
 			</Card>
 		</>
 	);
@@ -158,10 +167,10 @@ export const playground = () => {
 
 export const blockDirectoryCard = () => {
 	return (
-		<Card size="sm">
-			<Card.Body>Stuff</Card.Body>
-			<Card.Divider />
-			<Card.Body isShady>Stuff</Card.Body>
+		<Card>
+			<CardBody size="sm">Stuff</CardBody>
+			<CardDivider />
+			<CardBody isShady>Stuff</CardBody>
 		</Card>
 	);
 };
diff --git a/packages/components/src/card/styles/card.styles.js b/packages/components/src/card/styles/card-styles.js
similarity index 70%
rename from packages/components/src/card/styles/card.styles.js
rename to packages/components/src/card/styles/card-styles.js
index 4704fdda922088..2861aa61faf40a 100644
--- a/packages/components/src/card/styles/card.styles.js
+++ b/packages/components/src/card/styles/card-styles.js
@@ -7,12 +7,6 @@ import styled from 'styled-components';
  * Internal dependencies
  */
 import { color } from '../../utils/colors';
-import {
-	bodySize,
-	headerFooterSizes,
-	handleBorderless,
-	handleShady,
-} from './mixins.styles';
 
 export const styleProps = {
 	borderColor: color( 'lightGray.500' ),
@@ -20,7 +14,7 @@ export const styleProps = {
 	backgroundShady: color( 'lightGray.200' ),
 };
 
-const { borderColor, borderRadius } = styleProps;
+const { borderColor, borderRadius, backgroundShady } = styleProps;
 
 export const CardUI = styled.div`
 	background: ${ color( 'white' ) };
@@ -100,3 +94,63 @@ export const DividerUI = styled.div`
 	box-sizing: border-box;
 	height: 1px;
 `;
+
+export function bodySize() {
+	return `
+		&.is-size {
+			&-lg {
+				padding: 28px;
+			}
+			&-md {
+				padding: 20px;
+			}
+			&-sm {
+				padding: 12px;
+			}
+			&-xs {
+				padding: 8px;
+			}
+		}
+	`;
+}
+
+export function headerFooterSizes() {
+	return `
+		&.is-size {
+			&-lg {
+				padding: 20px 28px;
+			}
+			&-md {
+				padding: 12px 20px;
+			}
+			&-sm {
+				padding: 8px 12px;
+			}
+			&-xs {
+				padding: 4px 8px;
+			}
+		}
+	`;
+}
+
+export function handleBorderless() {
+	return `
+		&.is-variant {
+			&-borderless {
+				border: none;
+			}
+
+			&-raised {
+				border: none;
+			}
+		}
+	`;
+}
+
+export function handleShady() {
+	return `
+		&.is-shady {
+			background: ${ backgroundShady };
+		}
+	`;
+}
diff --git a/packages/components/src/card/styles/mixins.styles.js b/packages/components/src/card/styles/mixins.styles.js
deleted file mode 100644
index 692d96ff37a42a..00000000000000
--- a/packages/components/src/card/styles/mixins.styles.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * Internal dependencies
- */
-import { styleProps } from './card.styles';
-
-const { backgroundShady } = styleProps;
-
-export function bodySize() {
-	return `
-		&.is-size {
-			&-lg {
-				padding: 28px;
-			}
-			&-md {
-				padding: 20px;
-			}
-			&-sm {
-				padding: 12px;
-			}
-			&-xs {
-				padding: 8px;
-			}
-		}
-	`;
-}
-
-export function headerFooterSizes() {
-	return `
-		&.is-size {
-			&-lg {
-				padding: 20px 28px;
-			}
-			&-md {
-				padding: 12px 20px;
-			}
-			&-sm {
-				padding: 8px 12px;
-			}
-			&-xs {
-				padding: 4px 8px;
-			}
-		}
-	`;
-}
-
-export function handleBorderless() {
-	return `
-		&.is-variant {
-			&-borderless {
-				border: none;
-			}
-
-			&-raised {
-				border: none;
-			}
-		}
-	`;
-}
-
-export function handleShady() {
-	return `
-		&.is-shady {
-			background: ${ backgroundShady };
-		}
-	`;
-}
diff --git a/packages/components/src/card/test/body.js b/packages/components/src/card/test/body.js
new file mode 100644
index 00000000000000..58affcb51a06f9
--- /dev/null
+++ b/packages/components/src/card/test/body.js
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import CardBody from '../body';
+
+describe( 'CardBody', () => {
+	describe( 'basic rendering', () => {
+		test( 'should have components-card className', () => {
+			const wrapper = shallow( <CardBody /> );
+			const cardBody = wrapper.find( '.components-card-body' );
+
+			expect( cardBody.length ).toBe( 1 );
+		} );
+
+		test( 'should be able to render content', () => {
+			const cardBody = shallow(
+				<CardBody>
+					<div className="content">Hello</div>
+				</CardBody>
+			);
+			const content = cardBody.find( '.content' );
+
+			expect( content.length ).toBe( 1 );
+			expect( content.text() ).toBe( 'Hello' );
+		} );
+	} );
+
+	describe( 'modifiers', () => {
+		test( 'should be able to render size modifier', () => {
+			const wrapper = shallow( <CardBody size="lg" /> );
+			const cardBody = wrapper.find( '.components-card-body' );
+
+			expect( cardBody.hasClass( 'is-size-lg' ) ).toBe( true );
+		} );
+
+		test( 'should be able to render shady modifier', () => {
+			const wrapper = shallow( <CardBody isShady /> );
+			const cardBody = wrapper.find( '.components-card-body' );
+
+			expect( cardBody.hasClass( 'is-shady' ) ).toBe( true );
+		} );
+	} );
+} );
diff --git a/packages/components/src/card/test/divider.js b/packages/components/src/card/test/divider.js
new file mode 100644
index 00000000000000..6cc6c860364786
--- /dev/null
+++ b/packages/components/src/card/test/divider.js
@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import CardDivider from '../divider';
+
+describe( 'CardDivider', () => {
+	describe( 'basic rendering', () => {
+		test( 'should have components-card className', () => {
+			const wrapper = shallow( <CardDivider /> );
+			const cardDivider = wrapper.find( '.components-card-divider' );
+
+			expect( cardDivider.length ).toBe( 1 );
+		} );
+
+		test( 'should not render child content', () => {
+			const cardDivider = shallow(
+				<CardDivider>
+					<div className="content">Hello</div>
+				</CardDivider>
+			);
+			const content = cardDivider.find( '.content' );
+
+			expect( content.length ).toBe( 0 );
+		} );
+
+		test( 'should have role of separator', () => {
+			const wrapper = shallow( <CardDivider /> );
+			const cardDivider = wrapper.find( '.components-card-divider' );
+
+			expect( cardDivider.prop( 'role' ) ).toBe( 'separator' );
+		} );
+	} );
+} );
diff --git a/packages/components/src/card/test/footer.js b/packages/components/src/card/test/footer.js
new file mode 100644
index 00000000000000..316148542d5e22
--- /dev/null
+++ b/packages/components/src/card/test/footer.js
@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import CardFooter from '../footer';
+
+describe( 'CardFooter', () => {
+	describe( 'basic rendering', () => {
+		test( 'should have components-card className', () => {
+			const wrapper = shallow( <CardFooter /> );
+			const cardFooter = wrapper.find( '.components-card-footer' );
+
+			expect( cardFooter.length ).toBe( 1 );
+		} );
+
+		test( 'should be able to render content', () => {
+			const cardFooter = shallow(
+				<CardFooter>
+					<div className="content">Hello</div>
+				</CardFooter>
+			);
+			const content = cardFooter.find( '.content' );
+
+			expect( content.length ).toBe( 1 );
+			expect( content.text() ).toBe( 'Hello' );
+		} );
+	} );
+
+	describe( 'modifiers', () => {
+		test( 'should be able to render size modifier', () => {
+			const wrapper = shallow( <CardFooter size="lg" /> );
+			const cardFooter = wrapper.find( '.components-card-footer' );
+
+			expect( cardFooter.hasClass( 'is-size-lg' ) ).toBe( true );
+		} );
+
+		test( 'should be able to render shady modifier', () => {
+			const wrapper = shallow( <CardFooter isShady /> );
+			const cardFooter = wrapper.find( '.components-card-footer' );
+
+			expect( cardFooter.hasClass( 'is-shady' ) ).toBe( true );
+		} );
+
+		test( 'should be able to render variant modifier', () => {
+			const wrapper = shallow( <CardFooter variant="borderless" /> );
+			const cardFooter = wrapper.find( '.components-card-footer' );
+
+			expect( cardFooter.hasClass( 'is-variant-borderless' ) ).toBe( true );
+		} );
+	} );
+} );
diff --git a/packages/components/src/card/test/header.js b/packages/components/src/card/test/header.js
new file mode 100644
index 00000000000000..806422c44ca75d
--- /dev/null
+++ b/packages/components/src/card/test/header.js
@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import CardHeader from '../header';
+
+describe( 'CardHeader', () => {
+	describe( 'basic rendering', () => {
+		test( 'should have components-card className', () => {
+			const wrapper = shallow( <CardHeader /> );
+			const cardHeader = wrapper.find( '.components-card-header' );
+
+			expect( cardHeader.length ).toBe( 1 );
+		} );
+
+		test( 'should be able to render content', () => {
+			const cardHeader = shallow(
+				<CardHeader>
+					<div className="content">Hello</div>
+				</CardHeader>
+			);
+			const content = cardHeader.find( '.content' );
+
+			expect( content.length ).toBe( 1 );
+			expect( content.text() ).toBe( 'Hello' );
+		} );
+	} );
+
+	describe( 'modifiers', () => {
+		test( 'should be able to render size modifier', () => {
+			const wrapper = shallow( <CardHeader size="lg" /> );
+			const cardHeader = wrapper.find( '.components-card-header' );
+
+			expect( cardHeader.hasClass( 'is-size-lg' ) ).toBe( true );
+		} );
+
+		test( 'should be able to render shady modifier', () => {
+			const wrapper = shallow( <CardHeader isShady /> );
+			const cardHeader = wrapper.find( '.components-card-header' );
+
+			expect( cardHeader.hasClass( 'is-shady' ) ).toBe( true );
+		} );
+
+		test( 'should be able to render variant modifier', () => {
+			const wrapper = shallow( <CardHeader variant="borderless" /> );
+			const cardHeader = wrapper.find( '.components-card-header' );
+
+			expect( cardHeader.hasClass( 'is-variant-borderless' ) ).toBe( true );
+		} );
+	} );
+} );
diff --git a/packages/components/src/card/test/index.js b/packages/components/src/card/test/index.js
new file mode 100644
index 00000000000000..721bef92711fa4
--- /dev/null
+++ b/packages/components/src/card/test/index.js
@@ -0,0 +1,195 @@
+/**
+ * External dependencies
+ */
+import { mount, shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import Card from '../';
+import CardBody from '../body';
+import CardDivider from '../divider';
+import CardFooter from '../footer';
+import CardHeader from '../header';
+import CardMedia from '../media';
+
+describe( 'Card', () => {
+	describe( 'basic rendering', () => {
+		test( 'should have components-card className', () => {
+			const wrapper = shallow( <Card /> );
+			const card = wrapper.find( '.components-card' );
+
+			expect( card.length ).toBeTruthy();
+		} );
+
+		test( 'should be able to render content', () => {
+			const card = shallow(
+				<Card>
+					<div className="content">Hello</div>
+				</Card>
+			);
+			const content = card.find( '.content' );
+
+			expect( content.length ).toBe( 1 );
+			expect( content.text() ).toBe( 'Hello' );
+		} );
+	} );
+
+	describe( 'variants', () => {
+		test( 'should render borderless variant', () => {
+			const wrapper = shallow( <Card variant="borderless" /> );
+			const card = wrapper.find( '.components-card' );
+
+			expect( card.hasClass( 'is-variant-borderless' ) ).toBe( true );
+		} );
+
+		test( 'should render raised variant', () => {
+			const wrapper = shallow( <Card variant="raised" /> );
+			const card = wrapper.find( '.components-card' );
+
+			expect( card.hasClass( 'is-variant-raised' ) ).toBe( true );
+		} );
+	} );
+
+	describe( 'CardBody', () => {
+		test( 'should be able to render', () => {
+			const card = mount(
+				<Card>
+					<CardBody>Hello</CardBody>
+				</Card>
+			);
+			const cardBody = card.find( 'CardBody' );
+
+			expect( cardBody.length ).toBe( 1 );
+			expect( cardBody.text() ).toBe( 'Hello' );
+		} );
+
+		test( 'should receive modifer props from context', () => {
+			const card = mount(
+				<Card size="xs">
+					<CardBody>Hello</CardBody>
+				</Card>
+			);
+			const cardBody = card.find( '.components-card-body' ).first();
+
+			expect( cardBody.hasClass( 'is-size-xs' ) ).toBe( true );
+		} );
+
+		test( 'should be able to override props from context', () => {
+			const card = mount(
+				<Card size="xs">
+					<CardBody size="lg">Hello</CardBody>
+				</Card>
+			);
+			const cardBody = card.find( '.components-card-body' ).first();
+
+			expect( cardBody.hasClass( 'is-size-lg' ) ).toBe( true );
+		} );
+	} );
+
+	describe( 'CardHeader', () => {
+		test( 'should be able to render', () => {
+			const card = mount(
+				<Card>
+					<CardHeader>Hello</CardHeader>
+				</Card>
+			);
+			const cardHeader = card.find( 'CardHeader' );
+
+			expect( cardHeader.length ).toBe( 1 );
+			expect( cardHeader.text() ).toBe( 'Hello' );
+		} );
+
+		test( 'should receive modifer props from context', () => {
+			const card = mount(
+				<Card size="xs" variant="borderless">
+					<CardHeader>Hello</CardHeader>
+				</Card>
+			);
+			const cardHeader = card.find( '.components-card-header' ).first();
+
+			expect( cardHeader.hasClass( 'is-size-xs' ) ).toBe( true );
+			expect( cardHeader.hasClass( 'is-variant-borderless' ) ).toBe( true );
+		} );
+
+		test( 'should be able to override props from context', () => {
+			const card = mount(
+				<Card size="xs" variant="borderless">
+					<CardHeader size="lg" variant="raised">
+						Hello
+					</CardHeader>
+				</Card>
+			);
+			const cardHeader = card.find( '.components-card-header' ).first();
+
+			expect( cardHeader.hasClass( 'is-size-lg' ) ).toBe( true );
+			expect( cardHeader.hasClass( 'is-variant-raised' ) ).toBe( true );
+		} );
+	} );
+
+	describe( 'CardFooter', () => {
+		test( 'should be able to render', () => {
+			const card = mount(
+				<Card>
+					<CardFooter>Hello</CardFooter>
+				</Card>
+			);
+			const cardFooter = card.find( 'CardFooter' );
+
+			expect( cardFooter.length ).toBe( 1 );
+			expect( cardFooter.text() ).toBe( 'Hello' );
+		} );
+
+		test( 'should receive modifer props from context', () => {
+			const card = mount(
+				<Card size="xs" variant="borderless">
+					<CardFooter>Hello</CardFooter>
+				</Card>
+			);
+			const cardFooter = card.find( '.components-card-footer' ).first();
+
+			expect( cardFooter.hasClass( 'is-size-xs' ) ).toBe( true );
+			expect( cardFooter.hasClass( 'is-variant-borderless' ) ).toBe( true );
+		} );
+
+		test( 'should be able to override props from context', () => {
+			const card = mount(
+				<Card size="xs" variant="borderless">
+					<CardFooter size="lg" variant="raised">
+						Hello
+					</CardFooter>
+				</Card>
+			);
+			const cardFooter = card.find( '.components-card-footer' ).first();
+
+			expect( cardFooter.hasClass( 'is-size-lg' ) ).toBe( true );
+			expect( cardFooter.hasClass( 'is-variant-raised' ) ).toBe( true );
+		} );
+	} );
+
+	describe( 'CardDivider', () => {
+		test( 'should be able to render', () => {
+			const card = mount(
+				<Card>
+					<CardDivider />
+				</Card>
+			);
+			const cardBody = card.find( 'CardDivider' );
+
+			expect( cardBody.length ).toBe( 1 );
+		} );
+	} );
+
+	describe( 'CardMedia', () => {
+		test( 'should be able to render', () => {
+			const card = mount(
+				<Card>
+					<CardMedia />
+				</Card>
+			);
+			const cardBody = card.find( 'CardMedia' );
+
+			expect( cardBody.length ).toBe( 1 );
+		} );
+	} );
+} );
diff --git a/packages/components/src/card/test/media.js b/packages/components/src/card/test/media.js
new file mode 100644
index 00000000000000..f8c2b3152ee290
--- /dev/null
+++ b/packages/components/src/card/test/media.js
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import CardMedia from '../media';
+
+describe( 'CardMedia', () => {
+	describe( 'basic rendering', () => {
+		test( 'should have components-card className', () => {
+			const wrapper = shallow( <CardMedia /> );
+			const cardMedia = wrapper.find( '.components-card-media' );
+
+			expect( cardMedia.length ).toBe( 1 );
+		} );
+
+		test( 'should be able to render content', () => {
+			const cardBody = shallow(
+				<CardMedia>
+					<div className="content">Hello</div>
+				</CardMedia>
+			);
+			const content = cardBody.find( '.content' );
+
+			expect( content.length ).toBe( 1 );
+			expect( content.text() ).toBe( 'Hello' );
+		} );
+	} );
+} );
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index ea575d9be5d95b..aae715e7c93d0c 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -6,6 +6,10 @@ export { default as BaseControl } from './base-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
 export { default as Card } from './card';
+export { default as CardBody } from './card/body';
+export { default as CardDivider } from './card/divider';
+export { default as CardFooter } from './card/footer';
+export { default as CardMedia } from './card/media';
 export { default as CheckboxControl } from './checkbox-control';
 export { default as ClipboardButton } from './clipboard-button';
 export { default as ColorIndicator } from './color-indicator';
@@ -64,14 +68,28 @@ export { default as ToolbarButton } from './toolbar-button';
 export { default as Tooltip } from './tooltip';
 export { default as TreeSelect } from './tree-select';
 export { default as IsolatedEventContainer } from './isolated-event-container';
-export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
+export {
+	createSlotFill,
+	Slot,
+	Fill,
+	Provider as SlotFillProvider,
+} from './slot-fill';
 
 // Higher-Order Components
 export { default as navigateRegions } from './higher-order/navigate-regions';
-export { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing';
-export { default as withFallbackStyles } from './higher-order/with-fallback-styles';
+export {
+	default as withConstrainedTabbing,
+} from './higher-order/with-constrained-tabbing';
+export {
+	default as withFallbackStyles,
+} from './higher-order/with-fallback-styles';
 export { default as withFilters } from './higher-order/with-filters';
 export { default as withFocusOutside } from './higher-order/with-focus-outside';
-export { default as withFocusReturn, Provider as FocusReturnProvider } from './higher-order/with-focus-return';
+export {
+	default as withFocusReturn,
+	Provider as FocusReturnProvider,
+} from './higher-order/with-focus-return';
 export { default as withNotices } from './higher-order/with-notices';
-export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
+export {
+	default as withSpokenMessages,
+} from './higher-order/with-spoken-messages';

From 329218bf10a2d6ea91854d96bcdd836e0d7a7f94 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 15 Oct 2019 13:28:55 -0400
Subject: [PATCH 09/37] Fix typos in card test

---
 packages/components/src/card/test/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/card/test/index.js b/packages/components/src/card/test/index.js
index 721bef92711fa4..f640b4d66239de 100644
--- a/packages/components/src/card/test/index.js
+++ b/packages/components/src/card/test/index.js
@@ -64,7 +64,7 @@ describe( 'Card', () => {
 			expect( cardBody.text() ).toBe( 'Hello' );
 		} );
 
-		test( 'should receive modifer props from context', () => {
+		test( 'should receive modifier props from context', () => {
 			const card = mount(
 				<Card size="xs">
 					<CardBody>Hello</CardBody>
@@ -100,7 +100,7 @@ describe( 'Card', () => {
 			expect( cardHeader.text() ).toBe( 'Hello' );
 		} );
 
-		test( 'should receive modifer props from context', () => {
+		test( 'should receive modifier props from context', () => {
 			const card = mount(
 				<Card size="xs" variant="borderless">
 					<CardHeader>Hello</CardHeader>
@@ -140,7 +140,7 @@ describe( 'Card', () => {
 			expect( cardFooter.text() ).toBe( 'Hello' );
 		} );
 
-		test( 'should receive modifer props from context', () => {
+		test( 'should receive modifier props from context', () => {
 			const card = mount(
 				<Card size="xs" variant="borderless">
 					<CardFooter>Hello</CardFooter>

From 45a1f31850eae66b5839ac6514c74ba376790886 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 15 Oct 2019 15:39:14 -0400
Subject: [PATCH 10/37] Refactor Card stories

And fix border style rendering for Header and Footer
---
 .../components/src/card/stories/__utils.js    |  59 ++++++
 .../components/src/card/stories/_index.js     |  45 +++++
 packages/components/src/card/stories/body.js  |  27 +++
 .../components/src/card/stories/divider.js    |  21 +++
 .../components/src/card/stories/footer.js     |  27 +++
 .../components/src/card/stories/header.js     |  27 +++
 packages/components/src/card/stories/index.js | 176 ------------------
 packages/components/src/card/stories/media.js | 107 +++++++++++
 .../components/src/card/styles/card-styles.js |  16 +-
 9 files changed, 324 insertions(+), 181 deletions(-)
 create mode 100644 packages/components/src/card/stories/__utils.js
 create mode 100644 packages/components/src/card/stories/_index.js
 create mode 100644 packages/components/src/card/stories/body.js
 create mode 100644 packages/components/src/card/stories/divider.js
 create mode 100644 packages/components/src/card/stories/footer.js
 create mode 100644 packages/components/src/card/stories/header.js
 delete mode 100644 packages/components/src/card/stories/index.js
 create mode 100644 packages/components/src/card/stories/media.js

diff --git a/packages/components/src/card/stories/__utils.js b/packages/components/src/card/stories/__utils.js
new file mode 100644
index 00000000000000..e4171854fba7e4
--- /dev/null
+++ b/packages/components/src/card/stories/__utils.js
@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+/* eslint-disable import/no-extraneous-dependencies */
+import { select } from '@storybook/addon-knobs';
+/* eslint-enable import/no-extraneous-dependencies */
+
+export const getCardProps = ( props = {} ) => {
+	const { size, variant } = props;
+
+	return {
+		size: select(
+			'size',
+			{
+				lg: 'lg',
+				md: 'md',
+				sm: 'sm',
+				xs: 'xs',
+			},
+			size || 'md'
+		),
+		variant: select(
+			'variant',
+			{
+				default: 'default',
+				borderless: 'borderless',
+				raised: 'raised',
+			},
+			variant || 'default'
+		),
+	};
+};
+
+export const getCardStyleProps = ( props = {} ) => {
+	const width = select(
+		'Card Width',
+		{
+			'640px': 640,
+			'360px': 360,
+			'240px': 240,
+			'50%': '50%',
+			'100%': '100%',
+		},
+		props.width || '360px'
+	);
+
+	return {
+		style: {
+			width,
+		},
+	};
+};
+
+export const getCardStoryProps = () => {
+	return {
+		...getCardStyleProps(),
+		...getCardProps(),
+	};
+};
diff --git a/packages/components/src/card/stories/_index.js b/packages/components/src/card/stories/_index.js
new file mode 100644
index 00000000000000..d6fe01e95ceac0
--- /dev/null
+++ b/packages/components/src/card/stories/_index.js
@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+
+/* eslint-disable import/no-extraneous-dependencies */
+import { text, boolean } from '@storybook/addon-knobs';
+/* eslint-enable import/no-extraneous-dependencies */
+
+/**
+ * Internal dependencies
+ */
+import Card from '../index';
+import CardBody from '../body';
+import CardFooter from '../footer';
+import CardHeader from '../header';
+import { getCardStoryProps } from './__utils';
+
+export default { title: 'Card', component: Card };
+
+export const _default = () => {
+	const props = getCardStoryProps();
+
+	const body = text( 'Body/Content', 'Code is Poetry' );
+	const isBodyShady = boolean( 'Body/Shady', false );
+
+	const header = text( 'Header/Content', 'Header' );
+	const isHeaderShady = boolean( 'Header/Shady', false );
+
+	const footer = text( 'Footer/Content', 'Footer' );
+	const isFooterShady = boolean( 'Footer/Shady', false );
+
+	return (
+		<>
+			<Card { ...props }>
+				{ header && (
+					<CardHeader isShady={ isHeaderShady }>{ header }</CardHeader>
+				) }
+				{ body && <CardBody isShady={ isBodyShady }>{ body }</CardBody> }
+				{ footer && (
+					<CardFooter isShady={ isFooterShady }>{ footer }</CardFooter>
+				) }
+			</Card>
+		</>
+	);
+};
diff --git a/packages/components/src/card/stories/body.js b/packages/components/src/card/stories/body.js
new file mode 100644
index 00000000000000..d05d4523eb436c
--- /dev/null
+++ b/packages/components/src/card/stories/body.js
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+/* eslint-disable import/no-extraneous-dependencies */
+import { boolean, text } from '@storybook/addon-knobs';
+/* eslint-enable import/no-extraneous-dependencies */
+
+/**
+ * Internal dependencies
+ */
+import Card from '../index';
+import CardBody from '../body';
+import { getCardStoryProps } from './__utils';
+
+export default { title: 'Card/Body', component: CardBody };
+
+export const _default = () => {
+	const props = getCardStoryProps();
+	const content = text( 'Content', 'Content' );
+	const isShady = boolean( 'isShady', false );
+
+	return (
+		<Card { ...props }>
+			<CardBody isShady={ isShady }>{ content }</CardBody>
+		</Card>
+	);
+};
diff --git a/packages/components/src/card/stories/divider.js b/packages/components/src/card/stories/divider.js
new file mode 100644
index 00000000000000..c81c410e6ad85e
--- /dev/null
+++ b/packages/components/src/card/stories/divider.js
@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import Card from '../index';
+import CardBody from '../body';
+import CardDivider from '../divider';
+import { getCardStoryProps } from './__utils';
+
+export default { title: 'Card/Divider', component: CardDivider };
+
+export const _default = () => {
+	const props = getCardStoryProps();
+
+	return (
+		<Card { ...props }>
+			<CardBody>...</CardBody>
+			<CardDivider />
+			<CardBody>...</CardBody>
+		</Card>
+	);
+};
diff --git a/packages/components/src/card/stories/footer.js b/packages/components/src/card/stories/footer.js
new file mode 100644
index 00000000000000..db351dda548319
--- /dev/null
+++ b/packages/components/src/card/stories/footer.js
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+/* eslint-disable import/no-extraneous-dependencies */
+import { boolean, text } from '@storybook/addon-knobs';
+/* eslint-enable import/no-extraneous-dependencies */
+
+/**
+ * Internal dependencies
+ */
+import Card from '../index';
+import CardFooter from '../footer';
+import { getCardStoryProps } from './__utils';
+
+export default { title: 'Card/Footer', component: CardFooter };
+
+export const _default = () => {
+	const props = getCardStoryProps();
+	const content = text( 'Content', 'Content' );
+	const isShady = boolean( 'isShady', false );
+
+	return (
+		<Card { ...props }>
+			<CardFooter isShady={ isShady }>{ content }</CardFooter>
+		</Card>
+	);
+};
diff --git a/packages/components/src/card/stories/header.js b/packages/components/src/card/stories/header.js
new file mode 100644
index 00000000000000..2e1b36adf974a1
--- /dev/null
+++ b/packages/components/src/card/stories/header.js
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+/* eslint-disable import/no-extraneous-dependencies */
+import { boolean, text } from '@storybook/addon-knobs';
+/* eslint-enable import/no-extraneous-dependencies */
+
+/**
+ * Internal dependencies
+ */
+import Card from '../index';
+import CardHeader from '../header';
+import { getCardStoryProps } from './__utils';
+
+export default { title: 'Card/Header', component: CardHeader };
+
+export const _default = () => {
+	const props = getCardStoryProps();
+	const content = text( 'Content', 'Content' );
+	const isShady = boolean( 'isShady', false );
+
+	return (
+		<Card { ...props }>
+			<CardHeader isShady={ isShady }>{ content }</CardHeader>
+		</Card>
+	);
+};
diff --git a/packages/components/src/card/stories/index.js b/packages/components/src/card/stories/index.js
deleted file mode 100644
index a582c3c7fcd02a..00000000000000
--- a/packages/components/src/card/stories/index.js
+++ /dev/null
@@ -1,176 +0,0 @@
-/**
- * External dependencies
- */
-
-/* eslint-disable import/no-extraneous-dependencies */
-import { text, boolean, select } from '@storybook/addon-knobs';
-/* eslint-enable import/no-extraneous-dependencies */
-
-/**
- * Internal dependencies
- */
-import Card from '../index';
-import CardBody from '../body';
-import CardDivider from '../divider';
-import CardFooter from '../footer';
-import CardHeader from '../header';
-import CardMedia from '../media';
-
-export default { title: 'Card', component: Card };
-
-export const _default = () => (
-	<Card>
-		<CardBody>Code is Poetry</CardBody>
-	</Card>
-);
-
-export const media = () => {
-	return (
-		<div>
-			<Card style={ { width: 360 } } size="sm">
-				<CardMedia>
-					<img
-						src="https://images.unsplash.com/photo-1570776765652-4ce2a88cc1f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
-						alt="SMELLING MARSHMELLOW ICECREAM CONE"
-					/>
-				</CardMedia>
-				<CardBody>
-					<div>Content</div>
-				</CardBody>
-			</Card>
-			<br />
-
-			<Card style={ { width: 360 } } size="sm">
-				<CardHeader>
-					<div>Content</div>
-				</CardHeader>
-				<CardMedia>
-					<img
-						src="https://images.unsplash.com/photo-1570776765652-4ce2a88cc1f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
-						alt="SMELLING MARSHMELLOW ICECREAM CONE"
-					/>
-				</CardMedia>
-			</Card>
-			<br />
-
-			<Card style={ { width: 360 } } size="sm">
-				<CardHeader>
-					<div>Content</div>
-				</CardHeader>
-				<CardMedia>
-					<img
-						src="https://images.unsplash.com/photo-1570776765652-4ce2a88cc1f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
-						alt="SMELLING MARSHMELLOW ICECREAM CONE"
-					/>
-				</CardMedia>
-				<CardFooter>
-					<div>Content</div>
-				</CardFooter>
-			</Card>
-			<br />
-			<Card style={ { width: 360 } } size="sm">
-				<CardMedia>
-					<img
-						src="https://images.unsplash.com/photo-1570776765652-4ce2a88cc1f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
-						alt="SMELLING MARSHMELLOW ICECREAM CONE"
-					/>
-				</CardMedia>
-			</Card>
-
-			<br />
-			<br />
-			<br />
-			<br />
-			<Card style={ { width: 360 } }>
-				<CardMedia>
-					<iframe
-						width="560"
-						height="315"
-						src="https://www.youtube.com/embed/zGP6zk7jcrQ"
-						frameBorder="0"
-						allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-						allowFullScreen
-						title="CORGI!!!!!!!"
-					></iframe>
-				</CardMedia>
-			</Card>
-		</div>
-	);
-};
-
-export const divider = () => {
-	const props = {
-		size: select( 'size', {
-			lg: 'lg',
-			md: 'md',
-			sm: 'sm',
-			xs: 'xs',
-		} ),
-		variant: select( 'variant', {
-			default: 'default',
-			borderless: 'borderless',
-			raised: 'raised',
-		} ),
-	};
-
-	return (
-		<div>
-			<Card style={ { width: 360 } } { ...props }>
-				<CardBody>
-					<div>Content</div>
-				</CardBody>
-				<CardDivider />
-				<CardBody>
-					<div>Content</div>
-				</CardBody>
-			</Card>
-		</div>
-	);
-};
-
-export const playground = () => {
-	const body = text( 'body', 'Code is Poetry' );
-	const header = text( 'header', 'Header' );
-	const footer = text( 'footer', 'Footer' );
-
-	const isHeaderShady = boolean( 'isHeaderShady', false );
-	const isFooterShady = boolean( 'isFooterShade', false );
-
-	const props = {
-		size: select( 'size', {
-			lg: 'lg',
-			md: 'md',
-			sm: 'sm',
-			xs: 'xs',
-		} ),
-		variant: select( 'variant', {
-			default: 'default',
-			borderless: 'borderless',
-			raised: 'raised',
-		} ),
-	};
-
-	return (
-		<>
-			<Card { ...props }>
-				{ header && (
-					<CardHeader isShady={ isHeaderShady }>{ header }</CardHeader>
-				) }
-				{ body && <CardBody>{ body }</CardBody> }
-				{ footer && (
-					<CardFooter isShady={ isFooterShady }>{ footer }</CardFooter>
-				) }
-			</Card>
-		</>
-	);
-};
-
-export const blockDirectoryCard = () => {
-	return (
-		<Card>
-			<CardBody size="sm">Stuff</CardBody>
-			<CardDivider />
-			<CardBody isShady>Stuff</CardBody>
-		</Card>
-	);
-};
diff --git a/packages/components/src/card/stories/media.js b/packages/components/src/card/stories/media.js
new file mode 100644
index 00000000000000..3c897fc63e3cb4
--- /dev/null
+++ b/packages/components/src/card/stories/media.js
@@ -0,0 +1,107 @@
+/**
+ * External dependencies
+ */
+/* eslint-disable import/no-extraneous-dependencies */
+import { boolean, text } from '@storybook/addon-knobs';
+/* eslint-enable import/no-extraneous-dependencies */
+
+/**
+ * Internal dependencies
+ */
+import Card from '../index';
+import CardBody from '../body';
+import CardFooter from '../footer';
+import CardHeader from '../header';
+import CardMedia from '../media';
+import { getCardStoryProps } from './__utils';
+
+export default { title: 'Card/Media', component: CardMedia };
+
+const DummyImage = () => (
+	<img
+		src="https://images.unsplash.com/photo-1570776765652-4ce2a88cc1f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
+		alt="SMELLING MARSHMELLOW ICECREAM CONE"
+	/>
+);
+
+export const _default = () => {
+	const props = getCardStoryProps();
+
+	const mediaOnTop = boolean( 'On Top', true );
+	const showTopContent = ! mediaOnTop;
+	const showBottomContent = ! showTopContent;
+	const content = text( 'Content', 'Content' );
+
+	return (
+		<Card { ...props }>
+			{ showTopContent && <CardBody>{ content }</CardBody> }
+			<CardMedia>
+				<DummyImage />
+			</CardMedia>
+			{ showBottomContent && <CardBody>{ content }</CardBody> }
+		</Card>
+	);
+};
+
+export const onTop = () => {
+	const props = getCardStoryProps();
+
+	return (
+		<Card { ...props }>
+			<CardMedia>
+				<DummyImage />
+			</CardMedia>
+			<CardBody>
+				<div>Content</div>
+			</CardBody>
+		</Card>
+	);
+};
+
+export const onBottom = () => {
+	const props = getCardStoryProps();
+
+	return (
+		<Card { ...props }>
+			<CardBody>Content</CardBody>
+			<CardMedia>
+				<DummyImage />
+			</CardMedia>
+		</Card>
+	);
+};
+
+export const headerAndFooter = () => {
+	const props = getCardStoryProps();
+
+	return (
+		<Card { ...props }>
+			<CardHeader>Header Content</CardHeader>
+			<CardMedia>
+				<DummyImage />
+			</CardMedia>
+			<CardFooter isShady>Caption</CardFooter>
+		</Card>
+	);
+};
+
+export const iframeEmbed = () => {
+	const props = getCardStoryProps();
+
+	return (
+		<Card { ...props }>
+			<CardHeader>Header Content</CardHeader>
+			<CardMedia>
+				<iframe
+					width="560"
+					height="315"
+					src="https://www.youtube.com/embed/zGP6zk7jcrQ"
+					frameBorder="0"
+					allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+					allowFullScreen
+					title="Corgi"
+				></iframe>
+			</CardMedia>
+		</Card>
+	);
+};
diff --git a/packages/components/src/card/styles/card-styles.js b/packages/components/src/card/styles/card-styles.js
index 2861aa61faf40a..3194e9cf4cd20a 100644
--- a/packages/components/src/card/styles/card-styles.js
+++ b/packages/components/src/card/styles/card-styles.js
@@ -26,6 +26,7 @@ export const CardUI = styled.div`
 
 	&.is-variant {
 		&-raised {
+			border: none;
 			box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
 				0px 1px 1px 0px rgba(0, 0, 0, 0.14),
 				0px 2px 1px -1px rgba(0, 0, 0, 0.12);
@@ -39,6 +40,10 @@ export const HeaderUI = styled.div`
 	border-top-right-radius: ${ borderRadius };
 	box-sizing: border-box;
 
+	&:last-child {
+		border-bottom: none;
+	}
+
 	${ headerFooterSizes };
 	${ handleBorderless };
 	${ handleShady };
@@ -50,8 +55,9 @@ export const MediaUI = styled.div`
 	img,
 	iframe {
 		display: block;
-		max-width: 100%;
 		height: auto;
+		max-width: 100%;
+		width: 100%;
 	}
 
 	&:first-child {
@@ -84,6 +90,10 @@ export const FooterUI = styled.div`
 	border-bottom-right-radius: ${ borderRadius };
 	box-sizing: border-box;
 
+	&:first-child {
+		border-top: none;
+	}
+
 	${ headerFooterSizes };
 	${ handleBorderless };
 	${ handleShady };
@@ -139,10 +149,6 @@ export function handleBorderless() {
 			&-borderless {
 				border: none;
 			}
-
-			&-raised {
-				border: none;
-			}
 		}
 	`;
 }

From 504169fee81c683f0b8a47727fa660b3a6ee9496 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 15 Oct 2019 16:11:00 -0400
Subject: [PATCH 11/37] Add Card Header to export

---
 packages/components/src/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index aae715e7c93d0c..c80a23728781dd 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -9,6 +9,7 @@ export { default as Card } from './card';
 export { default as CardBody } from './card/body';
 export { default as CardDivider } from './card/divider';
 export { default as CardFooter } from './card/footer';
+export { default as CardHeader } from './card/header';
 export { default as CardMedia } from './card/media';
 export { default as CheckboxControl } from './checkbox-control';
 export { default as ClipboardButton } from './clipboard-button';

From 63248871ee485793b2be2c82f8422e64ce1004c8 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 15 Oct 2019 16:33:08 -0400
Subject: [PATCH 12/37] Add README content for Card component

---
 packages/components/src/card/README.md        | 83 ++++++++++++++++++
 packages/components/src/card/docs/body.md     | 26 ++++++
 packages/components/src/card/docs/divider.md  | 17 ++++
 packages/components/src/card/docs/footer.md   | 26 ++++++
 packages/components/src/card/docs/header.md   | 26 ++++++
 packages/components/src/card/docs/media.md    | 84 +++++++++++++++++++
 .../components/src/card/styles/card-styles.js |  4 +-
 7 files changed, 264 insertions(+), 2 deletions(-)
 create mode 100644 packages/components/src/card/README.md
 create mode 100644 packages/components/src/card/docs/body.md
 create mode 100644 packages/components/src/card/docs/divider.md
 create mode 100644 packages/components/src/card/docs/footer.md
 create mode 100644 packages/components/src/card/docs/header.md
 create mode 100644 packages/components/src/card/docs/media.md

diff --git a/packages/components/src/card/README.md b/packages/components/src/card/README.md
new file mode 100644
index 00000000000000..8e3dda24705705
--- /dev/null
+++ b/packages/components/src/card/README.md
@@ -0,0 +1,83 @@
+# Card
+
+Card provides a flexible and extensible content container.
+
+## Usage
+
+```jsx
+import { Card, CardBody } from '@wordpress/components';
+
+const Example = () => (
+	<Card>
+		<CardBody>...</CardBody>
+	</Card>
+);
+```
+
+## Props
+
+<!-- prettier-ignore -->
+Name | Type | Default | Description
+--- | --- | --- | ---
+`size` | `string` | `md` | Determines the amount of padding within the card.
+`variant` | `string` | `default` | Determines the style of the card.
+
+## Sub-Components
+
+This component provides a collection of sub-component that can be used to compose various interfaces.
+
+-   [`<CardBody />`](./docs/body.md)
+-   [`<CardDivider />`](./docs/divider.md)
+-   [`<CardFooter />`](./docs/footer.md)
+-   [`<CardHeader />`](./docs/header.md)
+-   [`<CardMedia />`](./docs/media.md)
+
+### Sub-Components Example
+
+```jsx
+import {
+	Card,
+	CardBody,
+	CardDivider,
+	CardFooter,
+	CardHeader,
+	CardMedia
+} from '@wordpress/components';
+
+const Example = () => (
+	<Card>
+		<CardHeader>
+			...
+		</CardHeader>
+		<CardBody>
+			...
+		<CardBody>
+		<CardDivider />
+		<CardBody>
+			...
+		<CardBody>
+		<CardMedia>
+			<img src="..." />
+		</CardMedia>
+		<CardHeader>
+			...
+		</CardHeader>
+	</Card>
+);
+```
+
+### Context
+
+Card's sub-components are connected to `<Card />` using [Context](https://reactjs.org/docs/context.html). Certain props like `size` and `variant` are passed through to the sub-components.
+
+In the following example, the `<CardBody />` will render with a size of `sm`:
+
+```jsx
+import { Card, CardBody } from '@wordpress/components';
+
+const Example = () => (
+	<Card size="xs">
+		<CardBody>...</CardBody>
+	</Card>
+);
+```
diff --git a/packages/components/src/card/docs/body.md b/packages/components/src/card/docs/body.md
new file mode 100644
index 00000000000000..19bceb7b4bff39
--- /dev/null
+++ b/packages/components/src/card/docs/body.md
@@ -0,0 +1,26 @@
+# CardBody
+
+CardBody renders an optional content area for a [`<Card />`](../).
+
+## Usage
+
+```jsx
+import { Card, CardBody } from '@wordpress/components';
+
+const Example = () => (
+	<Card>
+		<CardBody>...</CardBody>
+	</Card>
+);
+```
+
+## Props
+
+<!-- prettier-ignore -->
+Name | Type | Default | Description
+--- | --- | --- | ---
+`isShady` | `boolean` | `false` | Renders with a light gray background color.
+`size` | `string` | `md` | Determines the amount of padding within the card.
+`variant` | `string` | `default` | Determines the style of the card.a
+
+Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from contet.
diff --git a/packages/components/src/card/docs/divider.md b/packages/components/src/card/docs/divider.md
new file mode 100644
index 00000000000000..feac94af529568
--- /dev/null
+++ b/packages/components/src/card/docs/divider.md
@@ -0,0 +1,17 @@
+# CardDivider
+
+CardDivider renders an optional divider within a [`<Card />`](../).
+
+## Usage
+
+```jsx
+import { Card, CardBody, CardDivider } from '@wordpress/components';
+
+const Example = () => (
+	<Card>
+		<CardBody>...</CardBody>
+		<CardDivider />
+		<CardBody>...</CardBody>
+	</Card>
+);
+```
diff --git a/packages/components/src/card/docs/footer.md b/packages/components/src/card/docs/footer.md
new file mode 100644
index 00000000000000..eda07fa911a0ed
--- /dev/null
+++ b/packages/components/src/card/docs/footer.md
@@ -0,0 +1,26 @@
+# CardFooter
+
+CardFooter renders an optional footer within a [`<Card />`](../).
+
+## Usage
+
+```jsx
+import { Card, CardFooter } from '@wordpress/components';
+
+const Example = () => (
+	<Card>
+		<CardFooter>...</CardFooter>
+	</Card>
+);
+```
+
+## Props
+
+<!-- prettier-ignore -->
+Name | Type | Default | Description
+--- | --- | --- | ---
+`isShady` | `boolean` | `false` | Renders with a light gray background color.
+`size` | `string` | `md` | Determines the amount of padding within the card.
+`variant` | `string` | `default` | Determines the style of the card.a
+
+Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from contet.
diff --git a/packages/components/src/card/docs/header.md b/packages/components/src/card/docs/header.md
new file mode 100644
index 00000000000000..98c603d3467038
--- /dev/null
+++ b/packages/components/src/card/docs/header.md
@@ -0,0 +1,26 @@
+# CardHeader
+
+CardHeader renders an optional header within a [`<Card />`](../).
+
+## Usage
+
+```jsx
+import { Card, CardHeader } from '@wordpress/components';
+
+const Example = () => (
+	<Card>
+		<CardHeader>...</CardHeader>
+	</Card>
+);
+```
+
+## Props
+
+<!-- prettier-ignore -->
+Name | Type | Default | Description
+--- | --- | --- | ---
+`isShady` | `boolean` | `false` | Renders with a light gray background color.
+`size` | `string` | `md` | Determines the amount of padding within the card.
+`variant` | `string` | `default` | Determines the style of the card.a
+
+Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from contet.
diff --git a/packages/components/src/card/docs/media.md b/packages/components/src/card/docs/media.md
new file mode 100644
index 00000000000000..980e32127792ec
--- /dev/null
+++ b/packages/components/src/card/docs/media.md
@@ -0,0 +1,84 @@
+# CardMedia
+
+CardMedia provides a container for media elements, and renders within a [`<Card />`](../).
+
+## Usage
+
+```jsx
+import { Card, CardBody, CardMedia } from '@wordpress/components';
+
+const Example = () => (
+	<Card>
+		<CardMedia>
+			<img src="..." />
+		</CardMedia>
+		<CardBody>...</CardBody>
+	</Card>
+);
+```
+
+## Placement
+
+`<CardMedia />` can be placed in any order as a direct child of a `<Card />`. The styles will automatically round the corners of the inner media element.
+
+### Top
+
+```jsx
+import { Card, CardBody, CardMedia } from '@wordpress/components';
+
+const Example = () => (
+	<Card>
+		<CardMedia>
+			<img src="..." />
+		</CardMedia>
+		<CardBody>...</CardBody>
+	</Card>
+);
+```
+
+### Center
+
+```jsx
+import { Card, CardBody, CardMedia } from '@wordpress/components';
+
+const Example = () => (
+	<Card>
+		<CardBody>...</CardBody>
+		<CardMedia>
+			<img src="..." />
+		</CardMedia>
+		<CardBody>...</CardBody>
+	</Card>
+);
+```
+
+### Bottom
+
+```jsx
+import { Card, CardBody, CardMedia } from '@wordpress/components';
+
+const Example = () => (
+	<Card>
+		<CardBody>...</CardBody>
+		<CardMedia>
+			<img src="..." />
+		</CardMedia>
+	</Card>
+);
+```
+
+### Only
+
+`<CardMedia />` can also exist as the only child component of `<Card />`.
+
+```jsx
+import { Card, CardMedia } from '@wordpress/components';
+
+const Example = () => (
+	<Card>
+		<CardMedia>
+			<img src="..." />
+		</CardMedia>
+	</Card>
+);
+```
diff --git a/packages/components/src/card/styles/card-styles.js b/packages/components/src/card/styles/card-styles.js
index 3194e9cf4cd20a..83bf3f04d33ce1 100644
--- a/packages/components/src/card/styles/card-styles.js
+++ b/packages/components/src/card/styles/card-styles.js
@@ -52,8 +52,8 @@ export const HeaderUI = styled.div`
 export const MediaUI = styled.div`
 	box-sizing: border-box;
 
-	img,
-	iframe {
+	& > img,
+	& > iframe {
 		display: block;
 		height: auto;
 		max-width: 100%;

From 084a1e2bdd0b09aad4796a4f6b09a26919327db1 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 15 Oct 2019 16:33:45 -0400
Subject: [PATCH 13/37] Add updated manifest-devhub.json autogenerated doc file

---
 docs/manifest-devhub.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/manifest-devhub.json b/docs/manifest-devhub.json
index 10b2c9362e8aef..0e6ab755177513 100644
--- a/docs/manifest-devhub.json
+++ b/docs/manifest-devhub.json
@@ -599,6 +599,12 @@
 		"markdown_source": "../packages/components/src/button/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Card",
+		"slug": "card",
+		"markdown_source": "../packages/components/src/card/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "CheckboxControl",
 		"slug": "checkbox-control",

From e93de651cd79d27d2f1bd3261c100a6afd16cecd Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 15 Oct 2019 16:37:18 -0400
Subject: [PATCH 14/37] Update Card README for context overrides

---
 packages/components/src/card/README.md | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/card/README.md b/packages/components/src/card/README.md
index 8e3dda24705705..20d79c2ebf20f5 100644
--- a/packages/components/src/card/README.md
+++ b/packages/components/src/card/README.md
@@ -68,7 +68,7 @@ const Example = () => (
 
 ### Context
 
-Card's sub-components are connected to `<Card />` using [Context](https://reactjs.org/docs/context.html). Certain props like `size` and `variant` are passed through to the sub-components.
+`<Card />`'s sub-components are connected to `<Card />` using [Context](https://reactjs.org/docs/context.html). Certain props like `size` and `variant` are passed through to the sub-components.
 
 In the following example, the `<CardBody />` will render with a size of `sm`:
 
@@ -81,3 +81,17 @@ const Example = () => (
 	</Card>
 );
 ```
+
+These sub-components are designed to be flexible. The Context props can be overridden by the sub-component(s) as required. In the following example, the last `<CardBody />` will render it's specified size:
+
+```jsx
+import { Card, CardBody } from '@wordpress/components';
+
+const Example = () => (
+	<Card size="xs">
+		<CardBody>...</CardBody>
+		<CardBody>...</CardBody>
+		<CardBody size="lg">...</CardBody>
+	</Card>
+);
+```

From 7441e2ebf20c9aadb7e03ec7ed343b619eb05c9c Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 15 Oct 2019 17:37:36 -0400
Subject: [PATCH 15/37] Remove unused fragment from Card stories

---
 .../components/src/card/stories/_index.js     | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/card/stories/_index.js b/packages/components/src/card/stories/_index.js
index d6fe01e95ceac0..f5f1e5c956c6bb 100644
--- a/packages/components/src/card/stories/_index.js
+++ b/packages/components/src/card/stories/_index.js
@@ -30,16 +30,14 @@ export const _default = () => {
 	const isFooterShady = boolean( 'Footer/Shady', false );
 
 	return (
-		<>
-			<Card { ...props }>
-				{ header && (
-					<CardHeader isShady={ isHeaderShady }>{ header }</CardHeader>
-				) }
-				{ body && <CardBody isShady={ isBodyShady }>{ body }</CardBody> }
-				{ footer && (
-					<CardFooter isShady={ isFooterShady }>{ footer }</CardFooter>
-				) }
-			</Card>
-		</>
+		<Card { ...props }>
+			{ header && (
+				<CardHeader isShady={ isHeaderShady }>{ header }</CardHeader>
+			) }
+			{ body && <CardBody isShady={ isBodyShady }>{ body }</CardBody> }
+			{ footer && (
+				<CardFooter isShady={ isFooterShady }>{ footer }</CardFooter>
+			) }
+		</Card>
 	);
 };

From 96ff8bd9544f87475cc2628791b21c3733dfa2bd Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 16 Oct 2019 13:55:14 -0400
Subject: [PATCH 16/37] Update size prop values for Card components

Changed values like `sm` and `md` to `small` and `medium`.
---
 packages/components/src/card/README.md        |  2 +-
 packages/components/src/card/body.js          |  2 +-
 packages/components/src/card/docs/body.md     |  2 +-
 packages/components/src/card/docs/footer.md   |  2 +-
 packages/components/src/card/docs/header.md   |  2 +-
 packages/components/src/card/footer.js        |  2 +-
 packages/components/src/card/header.js        |  2 +-
 packages/components/src/card/index.js         |  2 +-
 .../components/src/card/styles/card-styles.js | 16 +++++-----
 packages/components/src/card/test/body.js     |  4 +--
 packages/components/src/card/test/footer.js   |  4 +--
 packages/components/src/card/test/header.js   |  4 +--
 packages/components/src/card/test/index.js    | 30 +++++++++----------
 13 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/packages/components/src/card/README.md b/packages/components/src/card/README.md
index 20d79c2ebf20f5..451b793980af16 100644
--- a/packages/components/src/card/README.md
+++ b/packages/components/src/card/README.md
@@ -19,7 +19,7 @@ const Example = () => (
 <!-- prettier-ignore -->
 Name | Type | Default | Description
 --- | --- | --- | ---
-`size` | `string` | `md` | Determines the amount of padding within the card.
+`size` | `string` | `medium` | Determines the amount of padding within the card.
 `variant` | `string` | `default` | Determines the style of the card.
 
 ## Sub-Components
diff --git a/packages/components/src/card/body.js b/packages/components/src/card/body.js
index 89d838beecda9e..954ba303671e6a 100644
--- a/packages/components/src/card/body.js
+++ b/packages/components/src/card/body.js
@@ -11,7 +11,7 @@ import { useCardContext } from './context';
 
 export const defaultProps = {
 	isShady: false,
-	size: 'md',
+	size: 'medium',
 };
 
 export function CardBody( props ) {
diff --git a/packages/components/src/card/docs/body.md b/packages/components/src/card/docs/body.md
index 19bceb7b4bff39..d1bca1f043060b 100644
--- a/packages/components/src/card/docs/body.md
+++ b/packages/components/src/card/docs/body.md
@@ -20,7 +20,7 @@ const Example = () => (
 Name | Type | Default | Description
 --- | --- | --- | ---
 `isShady` | `boolean` | `false` | Renders with a light gray background color.
-`size` | `string` | `md` | Determines the amount of padding within the card.
+`size` | `string` | `medium` | Determines the amount of padding within the card.
 `variant` | `string` | `default` | Determines the style of the card.a
 
 Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from contet.
diff --git a/packages/components/src/card/docs/footer.md b/packages/components/src/card/docs/footer.md
index eda07fa911a0ed..85c61cf720c3a2 100644
--- a/packages/components/src/card/docs/footer.md
+++ b/packages/components/src/card/docs/footer.md
@@ -20,7 +20,7 @@ const Example = () => (
 Name | Type | Default | Description
 --- | --- | --- | ---
 `isShady` | `boolean` | `false` | Renders with a light gray background color.
-`size` | `string` | `md` | Determines the amount of padding within the card.
+`size` | `string` | `medium` | Determines the amount of padding within the card.
 `variant` | `string` | `default` | Determines the style of the card.a
 
 Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from contet.
diff --git a/packages/components/src/card/docs/header.md b/packages/components/src/card/docs/header.md
index 98c603d3467038..6fdfb2aee7f6dd 100644
--- a/packages/components/src/card/docs/header.md
+++ b/packages/components/src/card/docs/header.md
@@ -20,7 +20,7 @@ const Example = () => (
 Name | Type | Default | Description
 --- | --- | --- | ---
 `isShady` | `boolean` | `false` | Renders with a light gray background color.
-`size` | `string` | `md` | Determines the amount of padding within the card.
+`size` | `string` | `medium` | Determines the amount of padding within the card.
 `variant` | `string` | `default` | Determines the style of the card.a
 
 Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from contet.
diff --git a/packages/components/src/card/footer.js b/packages/components/src/card/footer.js
index fac8b211a5838f..d85b6d56a99d41 100644
--- a/packages/components/src/card/footer.js
+++ b/packages/components/src/card/footer.js
@@ -11,7 +11,7 @@ import { useCardContext } from './context';
 
 export const defaultProps = {
 	isShady: false,
-	size: 'md',
+	size: 'medium',
 };
 
 export function CardFooter( props ) {
diff --git a/packages/components/src/card/header.js b/packages/components/src/card/header.js
index 9ca9c0b20698bb..eb2d437db7d928 100644
--- a/packages/components/src/card/header.js
+++ b/packages/components/src/card/header.js
@@ -11,7 +11,7 @@ import { useCardContext } from './context';
 
 export const defaultProps = {
 	isShady: false,
-	size: 'md',
+	size: 'medium',
 };
 
 export function CardHeader( props ) {
diff --git a/packages/components/src/card/index.js b/packages/components/src/card/index.js
index 536b90d1665356..4e58f4ea143921 100644
--- a/packages/components/src/card/index.js
+++ b/packages/components/src/card/index.js
@@ -10,7 +10,7 @@ import { CardProvider } from './context';
 import { CardUI } from './styles/card-styles';
 
 export const defaultProps = {
-	size: 'md',
+	size: 'medium',
 	variant: 'default',
 };
 
diff --git a/packages/components/src/card/styles/card-styles.js b/packages/components/src/card/styles/card-styles.js
index 83bf3f04d33ce1..04d0ade0cec145 100644
--- a/packages/components/src/card/styles/card-styles.js
+++ b/packages/components/src/card/styles/card-styles.js
@@ -108,16 +108,16 @@ export const DividerUI = styled.div`
 export function bodySize() {
 	return `
 		&.is-size {
-			&-lg {
+			&-large {
 				padding: 28px;
 			}
-			&-md {
+			&-medium {
 				padding: 20px;
 			}
-			&-sm {
+			&-small {
 				padding: 12px;
 			}
-			&-xs {
+			&-extraSmall {
 				padding: 8px;
 			}
 		}
@@ -127,16 +127,16 @@ export function bodySize() {
 export function headerFooterSizes() {
 	return `
 		&.is-size {
-			&-lg {
+			&-large {
 				padding: 20px 28px;
 			}
-			&-md {
+			&-medium {
 				padding: 12px 20px;
 			}
-			&-sm {
+			&-small {
 				padding: 8px 12px;
 			}
-			&-xs {
+			&-extraSmall {
 				padding: 4px 8px;
 			}
 		}
diff --git a/packages/components/src/card/test/body.js b/packages/components/src/card/test/body.js
index 58affcb51a06f9..08cc714a5981d3 100644
--- a/packages/components/src/card/test/body.js
+++ b/packages/components/src/card/test/body.js
@@ -32,10 +32,10 @@ describe( 'CardBody', () => {
 
 	describe( 'modifiers', () => {
 		test( 'should be able to render size modifier', () => {
-			const wrapper = shallow( <CardBody size="lg" /> );
+			const wrapper = shallow( <CardBody size="large" /> );
 			const cardBody = wrapper.find( '.components-card-body' );
 
-			expect( cardBody.hasClass( 'is-size-lg' ) ).toBe( true );
+			expect( cardBody.hasClass( 'is-size-large' ) ).toBe( true );
 		} );
 
 		test( 'should be able to render shady modifier', () => {
diff --git a/packages/components/src/card/test/footer.js b/packages/components/src/card/test/footer.js
index 316148542d5e22..de53bdbc2fe0ad 100644
--- a/packages/components/src/card/test/footer.js
+++ b/packages/components/src/card/test/footer.js
@@ -32,10 +32,10 @@ describe( 'CardFooter', () => {
 
 	describe( 'modifiers', () => {
 		test( 'should be able to render size modifier', () => {
-			const wrapper = shallow( <CardFooter size="lg" /> );
+			const wrapper = shallow( <CardFooter size="large" /> );
 			const cardFooter = wrapper.find( '.components-card-footer' );
 
-			expect( cardFooter.hasClass( 'is-size-lg' ) ).toBe( true );
+			expect( cardFooter.hasClass( 'is-size-large' ) ).toBe( true );
 		} );
 
 		test( 'should be able to render shady modifier', () => {
diff --git a/packages/components/src/card/test/header.js b/packages/components/src/card/test/header.js
index 806422c44ca75d..5eb6f8e26670c1 100644
--- a/packages/components/src/card/test/header.js
+++ b/packages/components/src/card/test/header.js
@@ -32,10 +32,10 @@ describe( 'CardHeader', () => {
 
 	describe( 'modifiers', () => {
 		test( 'should be able to render size modifier', () => {
-			const wrapper = shallow( <CardHeader size="lg" /> );
+			const wrapper = shallow( <CardHeader size="large" /> );
 			const cardHeader = wrapper.find( '.components-card-header' );
 
-			expect( cardHeader.hasClass( 'is-size-lg' ) ).toBe( true );
+			expect( cardHeader.hasClass( 'is-size-large' ) ).toBe( true );
 		} );
 
 		test( 'should be able to render shady modifier', () => {
diff --git a/packages/components/src/card/test/index.js b/packages/components/src/card/test/index.js
index f640b4d66239de..582a03c2a3dd5f 100644
--- a/packages/components/src/card/test/index.js
+++ b/packages/components/src/card/test/index.js
@@ -66,24 +66,24 @@ describe( 'Card', () => {
 
 		test( 'should receive modifier props from context', () => {
 			const card = mount(
-				<Card size="xs">
+				<Card size="extraSmall">
 					<CardBody>Hello</CardBody>
 				</Card>
 			);
 			const cardBody = card.find( '.components-card-body' ).first();
 
-			expect( cardBody.hasClass( 'is-size-xs' ) ).toBe( true );
+			expect( cardBody.hasClass( 'is-size-extraSmall' ) ).toBe( true );
 		} );
 
 		test( 'should be able to override props from context', () => {
 			const card = mount(
-				<Card size="xs">
-					<CardBody size="lg">Hello</CardBody>
+				<Card size="extraSmall">
+					<CardBody size="large">Hello</CardBody>
 				</Card>
 			);
 			const cardBody = card.find( '.components-card-body' ).first();
 
-			expect( cardBody.hasClass( 'is-size-lg' ) ).toBe( true );
+			expect( cardBody.hasClass( 'is-size-large' ) ).toBe( true );
 		} );
 	} );
 
@@ -102,27 +102,27 @@ describe( 'Card', () => {
 
 		test( 'should receive modifier props from context', () => {
 			const card = mount(
-				<Card size="xs" variant="borderless">
+				<Card size="extraSmall" variant="borderless">
 					<CardHeader>Hello</CardHeader>
 				</Card>
 			);
 			const cardHeader = card.find( '.components-card-header' ).first();
 
-			expect( cardHeader.hasClass( 'is-size-xs' ) ).toBe( true );
+			expect( cardHeader.hasClass( 'is-size-extraSmall' ) ).toBe( true );
 			expect( cardHeader.hasClass( 'is-variant-borderless' ) ).toBe( true );
 		} );
 
 		test( 'should be able to override props from context', () => {
 			const card = mount(
-				<Card size="xs" variant="borderless">
-					<CardHeader size="lg" variant="raised">
+				<Card size="extraSmall" variant="borderless">
+					<CardHeader size="large" variant="raised">
 						Hello
 					</CardHeader>
 				</Card>
 			);
 			const cardHeader = card.find( '.components-card-header' ).first();
 
-			expect( cardHeader.hasClass( 'is-size-lg' ) ).toBe( true );
+			expect( cardHeader.hasClass( 'is-size-large' ) ).toBe( true );
 			expect( cardHeader.hasClass( 'is-variant-raised' ) ).toBe( true );
 		} );
 	} );
@@ -142,27 +142,27 @@ describe( 'Card', () => {
 
 		test( 'should receive modifier props from context', () => {
 			const card = mount(
-				<Card size="xs" variant="borderless">
+				<Card size="extraSmall" variant="borderless">
 					<CardFooter>Hello</CardFooter>
 				</Card>
 			);
 			const cardFooter = card.find( '.components-card-footer' ).first();
 
-			expect( cardFooter.hasClass( 'is-size-xs' ) ).toBe( true );
+			expect( cardFooter.hasClass( 'is-size-extraSmall' ) ).toBe( true );
 			expect( cardFooter.hasClass( 'is-variant-borderless' ) ).toBe( true );
 		} );
 
 		test( 'should be able to override props from context', () => {
 			const card = mount(
-				<Card size="xs" variant="borderless">
-					<CardFooter size="lg" variant="raised">
+				<Card size="extraSmall" variant="borderless">
+					<CardFooter size="large" variant="raised">
 						Hello
 					</CardFooter>
 				</Card>
 			);
 			const cardFooter = card.find( '.components-card-footer' ).first();
 
-			expect( cardFooter.hasClass( 'is-size-lg' ) ).toBe( true );
+			expect( cardFooter.hasClass( 'is-size-large' ) ).toBe( true );
 			expect( cardFooter.hasClass( 'is-variant-raised' ) ).toBe( true );
 		} );
 	} );

From 4534ed47814c9ad6b74a0bd14da8373df7823679 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 16 Oct 2019 13:56:37 -0400
Subject: [PATCH 17/37] Fix typo for Card docs

From `contet` -> `context`.
---
 packages/components/src/card/docs/body.md   | 2 +-
 packages/components/src/card/docs/footer.md | 2 +-
 packages/components/src/card/docs/header.md | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/card/docs/body.md b/packages/components/src/card/docs/body.md
index d1bca1f043060b..490c85129b3846 100644
--- a/packages/components/src/card/docs/body.md
+++ b/packages/components/src/card/docs/body.md
@@ -23,4 +23,4 @@ Name | Type | Default | Description
 `size` | `string` | `medium` | Determines the amount of padding within the card.
 `variant` | `string` | `default` | Determines the style of the card.a
 
-Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from contet.
+Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.
diff --git a/packages/components/src/card/docs/footer.md b/packages/components/src/card/docs/footer.md
index 85c61cf720c3a2..35a31b722becba 100644
--- a/packages/components/src/card/docs/footer.md
+++ b/packages/components/src/card/docs/footer.md
@@ -23,4 +23,4 @@ Name | Type | Default | Description
 `size` | `string` | `medium` | Determines the amount of padding within the card.
 `variant` | `string` | `default` | Determines the style of the card.a
 
-Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from contet.
+Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.
diff --git a/packages/components/src/card/docs/header.md b/packages/components/src/card/docs/header.md
index 6fdfb2aee7f6dd..71a7d5283f210b 100644
--- a/packages/components/src/card/docs/header.md
+++ b/packages/components/src/card/docs/header.md
@@ -23,4 +23,4 @@ Name | Type | Default | Description
 `size` | `string` | `medium` | Determines the amount of padding within the card.
 `variant` | `string` | `default` | Determines the style of the card.a
 
-Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from contet.
+Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.

From efe6ea84695cd991dab19f5f091b77e0df4faf8a Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 16 Oct 2019 14:03:35 -0400
Subject: [PATCH 18/37] Fix size values in storybook knob props

---
 packages/components/src/card/stories/__utils.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/card/stories/__utils.js b/packages/components/src/card/stories/__utils.js
index e4171854fba7e4..789cb214e08a68 100644
--- a/packages/components/src/card/stories/__utils.js
+++ b/packages/components/src/card/stories/__utils.js
@@ -12,12 +12,12 @@ export const getCardProps = ( props = {} ) => {
 		size: select(
 			'size',
 			{
-				lg: 'lg',
-				md: 'md',
-				sm: 'sm',
-				xs: 'xs',
+				large: 'large',
+				medium: 'medium',
+				small: 'small',
+				extraSmall: 'extraSmall',
 			},
-			size || 'md'
+			size || 'medium'
 		),
 		variant: select(
 			'variant',

From 6ebe5757f0254b56307a446903c86e6cbd3c0478 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 16 Oct 2019 14:04:11 -0400
Subject: [PATCH 19/37] Simplify implementation of CardContext.Provider

---
 packages/components/src/card/context.js | 11 -----------
 packages/components/src/card/index.js   | 17 +++++++++--------
 2 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/card/context.js b/packages/components/src/card/context.js
index 03f668c1eb06d8..2bcc31eaf65d4e 100644
--- a/packages/components/src/card/context.js
+++ b/packages/components/src/card/context.js
@@ -5,14 +5,3 @@ import { createContext, useContext } from '@wordpress/element';
 
 export const CardContext = createContext( {} );
 export const useCardContext = () => useContext( CardContext );
-
-export const CardProvider = ( props ) => {
-	const { Provider } = CardContext;
-	const { children, size, variant } = props;
-	const value = {
-		size,
-		variant,
-	};
-
-	return <Provider value={ value }>{ children }</Provider>;
-};
diff --git a/packages/components/src/card/index.js b/packages/components/src/card/index.js
index 4e58f4ea143921..073a50fa347204 100644
--- a/packages/components/src/card/index.js
+++ b/packages/components/src/card/index.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { CardProvider } from './context';
+import { CardContext } from './context';
 import { CardUI } from './styles/card-styles';
 
 export const defaultProps = {
@@ -16,6 +16,12 @@ export const defaultProps = {
 
 export function Card( props ) {
 	const { className, size, variant, ...additionalProps } = props;
+	const { Provider } = CardContext;
+
+	const contextProps = {
+		size,
+		variant,
+	};
 
 	const classes = classnames(
 		'components-card',
@@ -24,15 +30,10 @@ export function Card( props ) {
 		className
 	);
 
-	const contextProps = {
-		size,
-		variant,
-	};
-
 	return (
-		<CardProvider { ...contextProps }>
+		<Provider value={ contextProps }>
 			<CardUI { ...additionalProps } className={ classes } />
-		</CardProvider>
+		</Provider>
 	);
 }
 

From bfde12278c7e773d7011e48b75d7785e9fd6c5b0 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 16 Oct 2019 15:31:10 -0400
Subject: [PATCH 20/37] Remove duplicate addDecorator withKnobs

Occurred during a merge with `master`
---
 packages/components/storybook/config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/storybook/config.js b/packages/components/storybook/config.js
index f2278273cc5f6d..6b75e0111b27d8 100644
--- a/packages/components/storybook/config.js
+++ b/packages/components/storybook/config.js
@@ -9,7 +9,6 @@ import { withKnobs } from '@storybook/addon-knobs';
  */
 import '../build-style/style.css';
 
-addDecorator( withKnobs );
 addDecorator( withA11y );
 addDecorator( withKnobs );
 configure(

From a8bd44f5faaaaeb6f52629c34c41c8590299a1ac Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 17 Oct 2019 11:17:29 -0400
Subject: [PATCH 21/37] Remove prettier comment + fix size values in readme
 files

---
 packages/components/src/card/README.md      | 9 ++++-----
 packages/components/src/card/docs/body.md   | 1 -
 packages/components/src/card/docs/footer.md | 1 -
 packages/components/src/card/docs/header.md | 1 -
 4 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/card/README.md b/packages/components/src/card/README.md
index 451b793980af16..595de387b492d9 100644
--- a/packages/components/src/card/README.md
+++ b/packages/components/src/card/README.md
@@ -16,7 +16,6 @@ const Example = () => (
 
 ## Props
 
-<!-- prettier-ignore -->
 Name | Type | Default | Description
 --- | --- | --- | ---
 `size` | `string` | `medium` | Determines the amount of padding within the card.
@@ -70,13 +69,13 @@ const Example = () => (
 
 `<Card />`'s sub-components are connected to `<Card />` using [Context](https://reactjs.org/docs/context.html). Certain props like `size` and `variant` are passed through to the sub-components.
 
-In the following example, the `<CardBody />` will render with a size of `sm`:
+In the following example, the `<CardBody />` will render with a size of `small`:
 
 ```jsx
 import { Card, CardBody } from '@wordpress/components';
 
 const Example = () => (
-	<Card size="xs">
+	<Card size="small">
 		<CardBody>...</CardBody>
 	</Card>
 );
@@ -88,10 +87,10 @@ These sub-components are designed to be flexible. The Context props can be overr
 import { Card, CardBody } from '@wordpress/components';
 
 const Example = () => (
-	<Card size="xs">
+	<Card size="small">
 		<CardBody>...</CardBody>
 		<CardBody>...</CardBody>
-		<CardBody size="lg">...</CardBody>
+		<CardBody size="large">...</CardBody>
 	</Card>
 );
 ```
diff --git a/packages/components/src/card/docs/body.md b/packages/components/src/card/docs/body.md
index 490c85129b3846..0c6d86f068d558 100644
--- a/packages/components/src/card/docs/body.md
+++ b/packages/components/src/card/docs/body.md
@@ -16,7 +16,6 @@ const Example = () => (
 
 ## Props
 
-<!-- prettier-ignore -->
 Name | Type | Default | Description
 --- | --- | --- | ---
 `isShady` | `boolean` | `false` | Renders with a light gray background color.
diff --git a/packages/components/src/card/docs/footer.md b/packages/components/src/card/docs/footer.md
index 35a31b722becba..4ba889d376e888 100644
--- a/packages/components/src/card/docs/footer.md
+++ b/packages/components/src/card/docs/footer.md
@@ -16,7 +16,6 @@ const Example = () => (
 
 ## Props
 
-<!-- prettier-ignore -->
 Name | Type | Default | Description
 --- | --- | --- | ---
 `isShady` | `boolean` | `false` | Renders with a light gray background color.
diff --git a/packages/components/src/card/docs/header.md b/packages/components/src/card/docs/header.md
index 71a7d5283f210b..3ddc9203e093a2 100644
--- a/packages/components/src/card/docs/header.md
+++ b/packages/components/src/card/docs/header.md
@@ -16,7 +16,6 @@ const Example = () => (
 
 ## Props
 
-<!-- prettier-ignore -->
 Name | Type | Default | Description
 --- | --- | --- | ---
 `isShady` | `boolean` | `false` | Renders with a light gray background color.

From 9876ebad3ed3a73befd9d98a3888797641876311 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 17 Oct 2019 11:18:04 -0400
Subject: [PATCH 22/37] Change `hex-rgb` dependency from `4.1.0` to `^4.1.0`

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 8b5c14ce3e4e37..26777543628f56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7355,7 +7355,7 @@
 				"classnames": "^2.2.5",
 				"clipboard": "^2.0.1",
 				"dom-scroll-into-view": "^1.2.1",
-				"hex-rgb": "4.1.0",
+				"hex-rgb": "^4.1.0",
 				"lodash": "^4.17.15",
 				"memize": "^1.0.5",
 				"moment": "^2.22.1",

From 468097e5533355a7b9bd1d4c7f029336be75a6a6 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 17 Oct 2019 11:19:36 -0400
Subject: [PATCH 23/37] Revert "Change `hex-rgb` dependency from `4.1.0` to
 `^4.1.0`"

This reverts commit 9876ebad3ed3a73befd9d98a3888797641876311.
---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 26777543628f56..8b5c14ce3e4e37 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7355,7 +7355,7 @@
 				"classnames": "^2.2.5",
 				"clipboard": "^2.0.1",
 				"dom-scroll-into-view": "^1.2.1",
-				"hex-rgb": "^4.1.0",
+				"hex-rgb": "4.1.0",
 				"lodash": "^4.17.15",
 				"memize": "^1.0.5",
 				"moment": "^2.22.1",

From 7df05075ed91dad934ff618e78272b56f7d3dd19 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 17 Oct 2019 11:21:02 -0400
Subject: [PATCH 24/37] Change `hex-rgb` dependency from `4.1.0` to `^4.1.0`

---
 package-lock.json                | 2 +-
 packages/components/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8b5c14ce3e4e37..26777543628f56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7355,7 +7355,7 @@
 				"classnames": "^2.2.5",
 				"clipboard": "^2.0.1",
 				"dom-scroll-into-view": "^1.2.1",
-				"hex-rgb": "4.1.0",
+				"hex-rgb": "^4.1.0",
 				"lodash": "^4.17.15",
 				"memize": "^1.0.5",
 				"moment": "^2.22.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index 1b331f9f748ad9..031b02c31fc629 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -35,7 +35,7 @@
 		"classnames": "^2.2.5",
 		"clipboard": "^2.0.1",
 		"dom-scroll-into-view": "^1.2.1",
-		"hex-rgb": "4.1.0",
+		"hex-rgb": "^4.1.0",
 		"lodash": "^4.17.15",
 		"memize": "^1.0.5",
 		"moment": "^2.22.1",

From 3378c86a4daf80016f98572264a0ab23f00e2c1b Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 17 Oct 2019 11:21:16 -0400
Subject: [PATCH 25/37] Rename __utils.js file to _utils.js

---
 packages/components/src/card/stories/_index.js                 | 2 +-
 packages/components/src/card/stories/{__utils.js => _utils.js} | 0
 packages/components/src/card/stories/body.js                   | 2 +-
 packages/components/src/card/stories/divider.js                | 2 +-
 packages/components/src/card/stories/footer.js                 | 2 +-
 packages/components/src/card/stories/header.js                 | 2 +-
 packages/components/src/card/stories/media.js                  | 2 +-
 7 files changed, 6 insertions(+), 6 deletions(-)
 rename packages/components/src/card/stories/{__utils.js => _utils.js} (100%)

diff --git a/packages/components/src/card/stories/_index.js b/packages/components/src/card/stories/_index.js
index f5f1e5c956c6bb..69613211055169 100644
--- a/packages/components/src/card/stories/_index.js
+++ b/packages/components/src/card/stories/_index.js
@@ -13,7 +13,7 @@ import Card from '../index';
 import CardBody from '../body';
 import CardFooter from '../footer';
 import CardHeader from '../header';
-import { getCardStoryProps } from './__utils';
+import { getCardStoryProps } from './_utils';
 
 export default { title: 'Card', component: Card };
 
diff --git a/packages/components/src/card/stories/__utils.js b/packages/components/src/card/stories/_utils.js
similarity index 100%
rename from packages/components/src/card/stories/__utils.js
rename to packages/components/src/card/stories/_utils.js
diff --git a/packages/components/src/card/stories/body.js b/packages/components/src/card/stories/body.js
index d05d4523eb436c..f82045f78bf190 100644
--- a/packages/components/src/card/stories/body.js
+++ b/packages/components/src/card/stories/body.js
@@ -10,7 +10,7 @@ import { boolean, text } from '@storybook/addon-knobs';
  */
 import Card from '../index';
 import CardBody from '../body';
-import { getCardStoryProps } from './__utils';
+import { getCardStoryProps } from './_utils';
 
 export default { title: 'Card/Body', component: CardBody };
 
diff --git a/packages/components/src/card/stories/divider.js b/packages/components/src/card/stories/divider.js
index c81c410e6ad85e..b725ee4c427a2b 100644
--- a/packages/components/src/card/stories/divider.js
+++ b/packages/components/src/card/stories/divider.js
@@ -4,7 +4,7 @@
 import Card from '../index';
 import CardBody from '../body';
 import CardDivider from '../divider';
-import { getCardStoryProps } from './__utils';
+import { getCardStoryProps } from './_utils';
 
 export default { title: 'Card/Divider', component: CardDivider };
 
diff --git a/packages/components/src/card/stories/footer.js b/packages/components/src/card/stories/footer.js
index db351dda548319..d430c1d275c066 100644
--- a/packages/components/src/card/stories/footer.js
+++ b/packages/components/src/card/stories/footer.js
@@ -10,7 +10,7 @@ import { boolean, text } from '@storybook/addon-knobs';
  */
 import Card from '../index';
 import CardFooter from '../footer';
-import { getCardStoryProps } from './__utils';
+import { getCardStoryProps } from './_utils';
 
 export default { title: 'Card/Footer', component: CardFooter };
 
diff --git a/packages/components/src/card/stories/header.js b/packages/components/src/card/stories/header.js
index 2e1b36adf974a1..8a5d478d5114a4 100644
--- a/packages/components/src/card/stories/header.js
+++ b/packages/components/src/card/stories/header.js
@@ -10,7 +10,7 @@ import { boolean, text } from '@storybook/addon-knobs';
  */
 import Card from '../index';
 import CardHeader from '../header';
-import { getCardStoryProps } from './__utils';
+import { getCardStoryProps } from './_utils';
 
 export default { title: 'Card/Header', component: CardHeader };
 
diff --git a/packages/components/src/card/stories/media.js b/packages/components/src/card/stories/media.js
index 3c897fc63e3cb4..4e9635828375b6 100644
--- a/packages/components/src/card/stories/media.js
+++ b/packages/components/src/card/stories/media.js
@@ -13,7 +13,7 @@ import CardBody from '../body';
 import CardFooter from '../footer';
 import CardHeader from '../header';
 import CardMedia from '../media';
-import { getCardStoryProps } from './__utils';
+import { getCardStoryProps } from './_utils';
 
 export default { title: 'Card/Media', component: CardMedia };
 

From 599324e06a609817c1409a7ab9f4c2004a3263fd Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 17 Oct 2019 11:22:05 -0400
Subject: [PATCH 26/37] Rename colors.values.js -> colors-values.js (hyphen)

---
 .../components/src/utils/{colors.values.js => colors-values.js} | 0
 packages/components/src/utils/colors.js                         | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/components/src/utils/{colors.values.js => colors-values.js} (100%)

diff --git a/packages/components/src/utils/colors.values.js b/packages/components/src/utils/colors-values.js
similarity index 100%
rename from packages/components/src/utils/colors.values.js
rename to packages/components/src/utils/colors-values.js
diff --git a/packages/components/src/utils/colors.js b/packages/components/src/utils/colors.js
index f922f553260016..c4a1c6dae93324 100644
--- a/packages/components/src/utils/colors.js
+++ b/packages/components/src/utils/colors.js
@@ -6,7 +6,7 @@ import hexRgb from 'hex-rgb';
 /**
  * Internal dependencies
  */
-import { COLORS } from './colors.values';
+import { COLORS } from './colors-values';
 
 /**
  * Generating a CSS complient rgba() color value.

From 287b48e407130ac2662630971f225e1117499388 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 17 Oct 2019 11:33:46 -0400
Subject: [PATCH 27/37] Refactor Card sub-components to use BEM classNames

---
 packages/components/src/card/body.js         |  2 +-
 packages/components/src/card/divider.js      |  2 +-
 packages/components/src/card/footer.js       |  2 +-
 packages/components/src/card/header.js       |  2 +-
 packages/components/src/card/media.js        |  2 +-
 packages/components/src/card/test/body.js    |  6 +++---
 packages/components/src/card/test/divider.js |  4 ++--
 packages/components/src/card/test/footer.js  |  8 ++++----
 packages/components/src/card/test/header.js  |  8 ++++----
 packages/components/src/card/test/index.js   | 12 ++++++------
 packages/components/src/card/test/media.js   |  2 +-
 11 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/components/src/card/body.js b/packages/components/src/card/body.js
index 954ba303671e6a..9194d601169ea9 100644
--- a/packages/components/src/card/body.js
+++ b/packages/components/src/card/body.js
@@ -20,7 +20,7 @@ export function CardBody( props ) {
 	const { size } = mergedProps;
 
 	const classes = classnames(
-		'components-card-body',
+		'components-card__body',
 		isShady && 'is-shady',
 		size && `is-size-${ size }`,
 		className
diff --git a/packages/components/src/card/divider.js b/packages/components/src/card/divider.js
index 1e11451e8369d6..09a4a59c726643 100644
--- a/packages/components/src/card/divider.js
+++ b/packages/components/src/card/divider.js
@@ -11,7 +11,7 @@ import { DividerUI } from './styles/card-styles';
 export function CardDivider( props ) {
 	const { className, ...additionalProps } = props;
 
-	const classes = classnames( 'components-card-divider', className );
+	const classes = classnames( 'components-card__divider', className );
 
 	return (
 		<DividerUI
diff --git a/packages/components/src/card/footer.js b/packages/components/src/card/footer.js
index d85b6d56a99d41..3d309baed9bf9c 100644
--- a/packages/components/src/card/footer.js
+++ b/packages/components/src/card/footer.js
@@ -20,7 +20,7 @@ export function CardFooter( props ) {
 	const { size, variant } = mergedProps;
 
 	const classes = classnames(
-		'components-card-footer',
+		'components-card__footer',
 		isShady && 'is-shady',
 		size && `is-size-${ size }`,
 		variant && `is-variant-${ variant }`,
diff --git a/packages/components/src/card/header.js b/packages/components/src/card/header.js
index eb2d437db7d928..6461e75b56f5ad 100644
--- a/packages/components/src/card/header.js
+++ b/packages/components/src/card/header.js
@@ -20,7 +20,7 @@ export function CardHeader( props ) {
 	const { size, variant } = mergedProps;
 
 	const classes = classnames(
-		'components-card-header',
+		'components-card__header',
 		isShady && 'is-shady',
 		size && `is-size-${ size }`,
 		variant && `is-variant-${ variant }`,
diff --git a/packages/components/src/card/media.js b/packages/components/src/card/media.js
index 572218d4e75f13..c660f6705649de 100644
--- a/packages/components/src/card/media.js
+++ b/packages/components/src/card/media.js
@@ -11,7 +11,7 @@ import { MediaUI } from './styles/card-styles';
 export function CardMedia( props ) {
 	const { className, ...additionalProps } = props;
 
-	const classes = classnames( 'components-card-media', className );
+	const classes = classnames( 'components-card__media', className );
 
 	return <MediaUI { ...additionalProps } className={ classes } />;
 }
diff --git a/packages/components/src/card/test/body.js b/packages/components/src/card/test/body.js
index 08cc714a5981d3..dbbe21cdd6028a 100644
--- a/packages/components/src/card/test/body.js
+++ b/packages/components/src/card/test/body.js
@@ -12,7 +12,7 @@ describe( 'CardBody', () => {
 	describe( 'basic rendering', () => {
 		test( 'should have components-card className', () => {
 			const wrapper = shallow( <CardBody /> );
-			const cardBody = wrapper.find( '.components-card-body' );
+			const cardBody = wrapper.find( '.components-card__body' );
 
 			expect( cardBody.length ).toBe( 1 );
 		} );
@@ -33,14 +33,14 @@ describe( 'CardBody', () => {
 	describe( 'modifiers', () => {
 		test( 'should be able to render size modifier', () => {
 			const wrapper = shallow( <CardBody size="large" /> );
-			const cardBody = wrapper.find( '.components-card-body' );
+			const cardBody = wrapper.find( '.components-card__body' );
 
 			expect( cardBody.hasClass( 'is-size-large' ) ).toBe( true );
 		} );
 
 		test( 'should be able to render shady modifier', () => {
 			const wrapper = shallow( <CardBody isShady /> );
-			const cardBody = wrapper.find( '.components-card-body' );
+			const cardBody = wrapper.find( '.components-card__body' );
 
 			expect( cardBody.hasClass( 'is-shady' ) ).toBe( true );
 		} );
diff --git a/packages/components/src/card/test/divider.js b/packages/components/src/card/test/divider.js
index 6cc6c860364786..81f6012c9cd59a 100644
--- a/packages/components/src/card/test/divider.js
+++ b/packages/components/src/card/test/divider.js
@@ -12,7 +12,7 @@ describe( 'CardDivider', () => {
 	describe( 'basic rendering', () => {
 		test( 'should have components-card className', () => {
 			const wrapper = shallow( <CardDivider /> );
-			const cardDivider = wrapper.find( '.components-card-divider' );
+			const cardDivider = wrapper.find( '.components-card__divider' );
 
 			expect( cardDivider.length ).toBe( 1 );
 		} );
@@ -30,7 +30,7 @@ describe( 'CardDivider', () => {
 
 		test( 'should have role of separator', () => {
 			const wrapper = shallow( <CardDivider /> );
-			const cardDivider = wrapper.find( '.components-card-divider' );
+			const cardDivider = wrapper.find( '.components-card__divider' );
 
 			expect( cardDivider.prop( 'role' ) ).toBe( 'separator' );
 		} );
diff --git a/packages/components/src/card/test/footer.js b/packages/components/src/card/test/footer.js
index de53bdbc2fe0ad..b162ffe2ef3aef 100644
--- a/packages/components/src/card/test/footer.js
+++ b/packages/components/src/card/test/footer.js
@@ -12,7 +12,7 @@ describe( 'CardFooter', () => {
 	describe( 'basic rendering', () => {
 		test( 'should have components-card className', () => {
 			const wrapper = shallow( <CardFooter /> );
-			const cardFooter = wrapper.find( '.components-card-footer' );
+			const cardFooter = wrapper.find( '.components-card__footer' );
 
 			expect( cardFooter.length ).toBe( 1 );
 		} );
@@ -33,21 +33,21 @@ describe( 'CardFooter', () => {
 	describe( 'modifiers', () => {
 		test( 'should be able to render size modifier', () => {
 			const wrapper = shallow( <CardFooter size="large" /> );
-			const cardFooter = wrapper.find( '.components-card-footer' );
+			const cardFooter = wrapper.find( '.components-card__footer' );
 
 			expect( cardFooter.hasClass( 'is-size-large' ) ).toBe( true );
 		} );
 
 		test( 'should be able to render shady modifier', () => {
 			const wrapper = shallow( <CardFooter isShady /> );
-			const cardFooter = wrapper.find( '.components-card-footer' );
+			const cardFooter = wrapper.find( '.components-card__footer' );
 
 			expect( cardFooter.hasClass( 'is-shady' ) ).toBe( true );
 		} );
 
 		test( 'should be able to render variant modifier', () => {
 			const wrapper = shallow( <CardFooter variant="borderless" /> );
-			const cardFooter = wrapper.find( '.components-card-footer' );
+			const cardFooter = wrapper.find( '.components-card__footer' );
 
 			expect( cardFooter.hasClass( 'is-variant-borderless' ) ).toBe( true );
 		} );
diff --git a/packages/components/src/card/test/header.js b/packages/components/src/card/test/header.js
index 5eb6f8e26670c1..9dbff9abcce5a7 100644
--- a/packages/components/src/card/test/header.js
+++ b/packages/components/src/card/test/header.js
@@ -12,7 +12,7 @@ describe( 'CardHeader', () => {
 	describe( 'basic rendering', () => {
 		test( 'should have components-card className', () => {
 			const wrapper = shallow( <CardHeader /> );
-			const cardHeader = wrapper.find( '.components-card-header' );
+			const cardHeader = wrapper.find( '.components-card__header' );
 
 			expect( cardHeader.length ).toBe( 1 );
 		} );
@@ -33,21 +33,21 @@ describe( 'CardHeader', () => {
 	describe( 'modifiers', () => {
 		test( 'should be able to render size modifier', () => {
 			const wrapper = shallow( <CardHeader size="large" /> );
-			const cardHeader = wrapper.find( '.components-card-header' );
+			const cardHeader = wrapper.find( '.components-card__header' );
 
 			expect( cardHeader.hasClass( 'is-size-large' ) ).toBe( true );
 		} );
 
 		test( 'should be able to render shady modifier', () => {
 			const wrapper = shallow( <CardHeader isShady /> );
-			const cardHeader = wrapper.find( '.components-card-header' );
+			const cardHeader = wrapper.find( '.components-card__header' );
 
 			expect( cardHeader.hasClass( 'is-shady' ) ).toBe( true );
 		} );
 
 		test( 'should be able to render variant modifier', () => {
 			const wrapper = shallow( <CardHeader variant="borderless" /> );
-			const cardHeader = wrapper.find( '.components-card-header' );
+			const cardHeader = wrapper.find( '.components-card__header' );
 
 			expect( cardHeader.hasClass( 'is-variant-borderless' ) ).toBe( true );
 		} );
diff --git a/packages/components/src/card/test/index.js b/packages/components/src/card/test/index.js
index 582a03c2a3dd5f..be4801007c068b 100644
--- a/packages/components/src/card/test/index.js
+++ b/packages/components/src/card/test/index.js
@@ -70,7 +70,7 @@ describe( 'Card', () => {
 					<CardBody>Hello</CardBody>
 				</Card>
 			);
-			const cardBody = card.find( '.components-card-body' ).first();
+			const cardBody = card.find( '.components-card__body' ).first();
 
 			expect( cardBody.hasClass( 'is-size-extraSmall' ) ).toBe( true );
 		} );
@@ -81,7 +81,7 @@ describe( 'Card', () => {
 					<CardBody size="large">Hello</CardBody>
 				</Card>
 			);
-			const cardBody = card.find( '.components-card-body' ).first();
+			const cardBody = card.find( '.components-card__body' ).first();
 
 			expect( cardBody.hasClass( 'is-size-large' ) ).toBe( true );
 		} );
@@ -106,7 +106,7 @@ describe( 'Card', () => {
 					<CardHeader>Hello</CardHeader>
 				</Card>
 			);
-			const cardHeader = card.find( '.components-card-header' ).first();
+			const cardHeader = card.find( '.components-card__header' ).first();
 
 			expect( cardHeader.hasClass( 'is-size-extraSmall' ) ).toBe( true );
 			expect( cardHeader.hasClass( 'is-variant-borderless' ) ).toBe( true );
@@ -120,7 +120,7 @@ describe( 'Card', () => {
 					</CardHeader>
 				</Card>
 			);
-			const cardHeader = card.find( '.components-card-header' ).first();
+			const cardHeader = card.find( '.components-card__header' ).first();
 
 			expect( cardHeader.hasClass( 'is-size-large' ) ).toBe( true );
 			expect( cardHeader.hasClass( 'is-variant-raised' ) ).toBe( true );
@@ -146,7 +146,7 @@ describe( 'Card', () => {
 					<CardFooter>Hello</CardFooter>
 				</Card>
 			);
-			const cardFooter = card.find( '.components-card-footer' ).first();
+			const cardFooter = card.find( '.components-card__footer' ).first();
 
 			expect( cardFooter.hasClass( 'is-size-extraSmall' ) ).toBe( true );
 			expect( cardFooter.hasClass( 'is-variant-borderless' ) ).toBe( true );
@@ -160,7 +160,7 @@ describe( 'Card', () => {
 					</CardFooter>
 				</Card>
 			);
-			const cardFooter = card.find( '.components-card-footer' ).first();
+			const cardFooter = card.find( '.components-card__footer' ).first();
 
 			expect( cardFooter.hasClass( 'is-size-large' ) ).toBe( true );
 			expect( cardFooter.hasClass( 'is-variant-raised' ) ).toBe( true );
diff --git a/packages/components/src/card/test/media.js b/packages/components/src/card/test/media.js
index f8c2b3152ee290..935134d281dc21 100644
--- a/packages/components/src/card/test/media.js
+++ b/packages/components/src/card/test/media.js
@@ -12,7 +12,7 @@ describe( 'CardMedia', () => {
 	describe( 'basic rendering', () => {
 		test( 'should have components-card className', () => {
 			const wrapper = shallow( <CardMedia /> );
-			const cardMedia = wrapper.find( '.components-card-media' );
+			const cardMedia = wrapper.find( '.components-card__media' );
 
 			expect( cardMedia.length ).toBe( 1 );
 		} );

From 1fe752837af3b407a90b9dd9aba4660914427aca Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 17 Oct 2019 11:39:40 -0400
Subject: [PATCH 28/37] Fix typo + description of size + variant in
 sub-component documentation

---
 packages/components/src/card/docs/body.md   | 4 ++--
 packages/components/src/card/docs/footer.md | 4 ++--
 packages/components/src/card/docs/header.md | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/card/docs/body.md b/packages/components/src/card/docs/body.md
index 0c6d86f068d558..001cc8f4426b21 100644
--- a/packages/components/src/card/docs/body.md
+++ b/packages/components/src/card/docs/body.md
@@ -19,7 +19,7 @@ const Example = () => (
 Name | Type | Default | Description
 --- | --- | --- | ---
 `isShady` | `boolean` | `false` | Renders with a light gray background color.
-`size` | `string` | `medium` | Determines the amount of padding within the card.
-`variant` | `string` | `default` | Determines the style of the card.a
+`size` | `string` | `medium` | Determines the amount of padding within the component.
+`variant` | `string` | `default` | Determines the style of the component.
 
 Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.
diff --git a/packages/components/src/card/docs/footer.md b/packages/components/src/card/docs/footer.md
index 4ba889d376e888..ff9de4136efdc1 100644
--- a/packages/components/src/card/docs/footer.md
+++ b/packages/components/src/card/docs/footer.md
@@ -19,7 +19,7 @@ const Example = () => (
 Name | Type | Default | Description
 --- | --- | --- | ---
 `isShady` | `boolean` | `false` | Renders with a light gray background color.
-`size` | `string` | `medium` | Determines the amount of padding within the card.
-`variant` | `string` | `default` | Determines the style of the card.a
+`size` | `string` | `medium` | Determines the amount of padding within the component.
+`variant` | `string` | `default` | Determines the style of the component.
 
 Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.
diff --git a/packages/components/src/card/docs/header.md b/packages/components/src/card/docs/header.md
index 3ddc9203e093a2..7347ab239d2a61 100644
--- a/packages/components/src/card/docs/header.md
+++ b/packages/components/src/card/docs/header.md
@@ -19,7 +19,7 @@ const Example = () => (
 Name | Type | Default | Description
 --- | --- | --- | ---
 `isShady` | `boolean` | `false` | Renders with a light gray background color.
-`size` | `string` | `medium` | Determines the amount of padding within the card.
-`variant` | `string` | `default` | Determines the style of the card.a
+`size` | `string` | `medium` | Determines the amount of padding within the component.
+`variant` | `string` | `default` | Determines the style of the component.
 
 Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.

From 23fbe545a18bb326d7e825d31c54b354d435e273 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 22 Oct 2019 13:58:15 -0400
Subject: [PATCH 29/37] Add story example for horizontally aligned media

---
 packages/components/src/card/stories/media.js | 61 ++++++++++++++++++-
 .../components/src/card/styles/card-styles.js | 15 ++---
 2 files changed, 65 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/card/stories/media.js b/packages/components/src/card/stories/media.js
index 4e9635828375b6..e06c090067ccbe 100644
--- a/packages/components/src/card/stories/media.js
+++ b/packages/components/src/card/stories/media.js
@@ -2,8 +2,9 @@
  * External dependencies
  */
 /* eslint-disable import/no-extraneous-dependencies */
-import { boolean, text } from '@storybook/addon-knobs';
+import { boolean, number, select, text } from '@storybook/addon-knobs';
 /* eslint-enable import/no-extraneous-dependencies */
+import styled from 'styled-components';
 
 /**
  * Internal dependencies
@@ -105,3 +106,61 @@ export const iframeEmbed = () => {
 		</Card>
 	);
 };
+
+/**
+ * Referring to other styled components:
+ * https://www.styled-components.com/docs/advanced#referring-to-other-components
+ * https://www.styled-components.com/docs/advanced#caveat
+ */
+const StyledCardMedia = styled( CardMedia )( '' );
+const StyledCardBody = styled( CardBody )( '' );
+
+const HorizontallyAlignedCard = styled( Card )`
+	display: flex;
+
+	&.is-right {
+		flex-direction: row-reverse;
+	}
+
+	${ StyledCardBody } {
+		flex: 1;
+	}
+
+	${ StyledCardMedia } {
+		&.is-left {
+			border-radius: 3px 0 0 3px;
+		}
+		&.is-right {
+			border-radius: 0 3px 3px 0;
+		}
+	}
+`;
+
+export const horizontallyAligned = () => {
+	const align = select(
+		'Align',
+		{
+			left: 'left',
+			right: 'right',
+		},
+		'left'
+	);
+	const content = text( 'Content', 'Content' );
+	const maxWidth = number( 'Media Width', 200 );
+	const classes = `is-${ align }`;
+
+	return (
+		<>
+			<p>
+				Note: This story demonstrates how this UI may be created. It
+				requires extra styling.
+			</p>
+			<HorizontallyAlignedCard className={ classes }>
+				<StyledCardMedia className={ classes } style={ { maxWidth } }>
+					<DummyImage />
+				</StyledCardMedia>
+				<StyledCardBody>{ content }</StyledCardBody>
+			</HorizontallyAlignedCard>
+		</>
+	);
+};
diff --git a/packages/components/src/card/styles/card-styles.js b/packages/components/src/card/styles/card-styles.js
index 04d0ade0cec145..6b22b04f0fa7c8 100644
--- a/packages/components/src/card/styles/card-styles.js
+++ b/packages/components/src/card/styles/card-styles.js
@@ -51,6 +51,7 @@ export const HeaderUI = styled.div`
 
 export const MediaUI = styled.div`
 	box-sizing: border-box;
+	overflow: hidden;
 
 	& > img,
 	& > iframe {
@@ -61,19 +62,13 @@ export const MediaUI = styled.div`
 	}
 
 	&:first-child {
-		img,
-		iframe {
-			border-top-left-radius: ${ borderRadius };
-			border-top-right-radius: ${ borderRadius };
-		}
+		border-top-left-radius: ${ borderRadius };
+		border-top-right-radius: ${ borderRadius };
 	}
 
 	&:last-child {
-		img,
-		iframe {
-			border-bottom-left-radius: ${ borderRadius };
-			border-bottom-right-radius: ${ borderRadius };
-		}
+		border-bottom-left-radius: ${ borderRadius };
+		border-bottom-right-radius: ${ borderRadius };
 	}
 `;
 

From 32ae38aed9485c897b738cb4a6baa3d4fdc49844 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 22 Oct 2019 14:21:52 -0400
Subject: [PATCH 30/37] Use HorizontalRule primitive in CardDivider

---
 packages/components/src/card/styles/card-styles.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/card/styles/card-styles.js b/packages/components/src/card/styles/card-styles.js
index 6b22b04f0fa7c8..c85bc77eb3630f 100644
--- a/packages/components/src/card/styles/card-styles.js
+++ b/packages/components/src/card/styles/card-styles.js
@@ -6,6 +6,7 @@ import styled from 'styled-components';
 /**
  * Internal dependencies
  */
+import { HorizontalRule } from '../../primitives';
 import { color } from '../../utils/colors';
 
 export const styleProps = {
@@ -94,10 +95,13 @@ export const FooterUI = styled.div`
 	${ handleShady };
 `;
 
-export const DividerUI = styled.div`
-	background-color: ${ borderColor };
+export const DividerUI = styled( HorizontalRule )`
+	all: unset;
+	border-top: 1px solid ${ borderColor };
 	box-sizing: border-box;
-	height: 1px;
+	display: block;
+	height: 0;
+	width: 100%;
 `;
 
 export function bodySize() {

From 9d26f2837219b803f03bd985631319b459a13a0b Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 23 Oct 2019 10:25:05 -0400
Subject: [PATCH 31/37] Update Card component API

Refactor `variant` into `isBorderless` and `isElevation` for the main
`Card` component as well as it's sub-components.

Update code, README, tests, and stories to reflect the changes.
---
 packages/components/src/card/README.md        |  3 +-
 packages/components/src/card/docs/body.md     |  1 -
 packages/components/src/card/docs/footer.md   |  3 +-
 packages/components/src/card/docs/header.md   |  3 +-
 packages/components/src/card/footer.js        |  5 +--
 packages/components/src/card/header.js        |  5 +--
 packages/components/src/card/index.js         | 17 +++++++---
 .../components/src/card/stories/_index.js     | 12 +++----
 .../components/src/card/stories/_utils.js     | 19 ++++-------
 packages/components/src/card/stories/body.js  |  4 +--
 .../components/src/card/stories/footer.js     |  4 +--
 .../components/src/card/stories/header.js     |  4 +--
 packages/components/src/card/stories/media.js | 10 +++---
 .../components/src/card/styles/card-styles.js | 17 ++++------
 packages/components/src/card/test/footer.js   |  6 ++--
 packages/components/src/card/test/header.js   |  6 ++--
 packages/components/src/card/test/index.js    | 34 +++++++++----------
 17 files changed, 77 insertions(+), 76 deletions(-)

diff --git a/packages/components/src/card/README.md b/packages/components/src/card/README.md
index 595de387b492d9..4a401b021a842d 100644
--- a/packages/components/src/card/README.md
+++ b/packages/components/src/card/README.md
@@ -18,8 +18,9 @@ const Example = () => (
 
 Name | Type | Default | Description
 --- | --- | --- | ---
+`isBorderless` | `boolean` | `false` | Determines the border style of the card.
+`isElevated` | `boolean` | `false` | Determines the elevation style of the card.
 `size` | `string` | `medium` | Determines the amount of padding within the card.
-`variant` | `string` | `default` | Determines the style of the card.
 
 ## Sub-Components
 
diff --git a/packages/components/src/card/docs/body.md b/packages/components/src/card/docs/body.md
index 001cc8f4426b21..6693bf644b27c4 100644
--- a/packages/components/src/card/docs/body.md
+++ b/packages/components/src/card/docs/body.md
@@ -20,6 +20,5 @@ Name | Type | Default | Description
 --- | --- | --- | ---
 `isShady` | `boolean` | `false` | Renders with a light gray background color.
 `size` | `string` | `medium` | Determines the amount of padding within the component.
-`variant` | `string` | `default` | Determines the style of the component.
 
 Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.
diff --git a/packages/components/src/card/docs/footer.md b/packages/components/src/card/docs/footer.md
index ff9de4136efdc1..f109db255672af 100644
--- a/packages/components/src/card/docs/footer.md
+++ b/packages/components/src/card/docs/footer.md
@@ -18,8 +18,9 @@ const Example = () => (
 
 Name | Type | Default | Description
 --- | --- | --- | ---
+`isBorderless` | `boolean` | `false` | Determines the border style of the card.
+`isElevated` | `boolean` | `false` | Determines the elevation style of the card.
 `isShady` | `boolean` | `false` | Renders with a light gray background color.
 `size` | `string` | `medium` | Determines the amount of padding within the component.
-`variant` | `string` | `default` | Determines the style of the component.
 
 Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.
diff --git a/packages/components/src/card/docs/header.md b/packages/components/src/card/docs/header.md
index 7347ab239d2a61..b3901f15625cca 100644
--- a/packages/components/src/card/docs/header.md
+++ b/packages/components/src/card/docs/header.md
@@ -18,8 +18,9 @@ const Example = () => (
 
 Name | Type | Default | Description
 --- | --- | --- | ---
+`isBorderless` | `boolean` | `false` | Determines the border style of the card.
+`isElevated` | `boolean` | `false` | Determines the elevation style of the card.
 `isShady` | `boolean` | `false` | Renders with a light gray background color.
 `size` | `string` | `medium` | Determines the amount of padding within the component.
-`variant` | `string` | `default` | Determines the style of the component.
 
 Note: This component is connected to [`<Card />`'s Context](../README.md#context). Passing props directly to this component will override the props derived from context.
diff --git a/packages/components/src/card/footer.js b/packages/components/src/card/footer.js
index 3d309baed9bf9c..e4b66ce4022c78 100644
--- a/packages/components/src/card/footer.js
+++ b/packages/components/src/card/footer.js
@@ -10,6 +10,7 @@ import { FooterUI } from './styles/card-styles';
 import { useCardContext } from './context';
 
 export const defaultProps = {
+	isBorderless: false,
 	isShady: false,
 	size: 'medium',
 };
@@ -17,13 +18,13 @@ export const defaultProps = {
 export function CardFooter( props ) {
 	const { className, isShady, ...additionalProps } = props;
 	const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
-	const { size, variant } = mergedProps;
+	const { isBorderless, size } = mergedProps;
 
 	const classes = classnames(
 		'components-card__footer',
+		isBorderless && 'is-borderless',
 		isShady && 'is-shady',
 		size && `is-size-${ size }`,
-		variant && `is-variant-${ variant }`,
 		className
 	);
 
diff --git a/packages/components/src/card/header.js b/packages/components/src/card/header.js
index 6461e75b56f5ad..ece890cddd4604 100644
--- a/packages/components/src/card/header.js
+++ b/packages/components/src/card/header.js
@@ -10,6 +10,7 @@ import { HeaderUI } from './styles/card-styles';
 import { useCardContext } from './context';
 
 export const defaultProps = {
+	isBorderless: false,
 	isShady: false,
 	size: 'medium',
 };
@@ -17,13 +18,13 @@ export const defaultProps = {
 export function CardHeader( props ) {
 	const { className, isShady, ...additionalProps } = props;
 	const mergedProps = { ...defaultProps, ...useCardContext(), ...props };
-	const { size, variant } = mergedProps;
+	const { isBorderless, size } = mergedProps;
 
 	const classes = classnames(
 		'components-card__header',
+		isBorderless && 'is-borderless',
 		isShady && 'is-shady',
 		size && `is-size-${ size }`,
-		variant && `is-variant-${ variant }`,
 		className
 	);
 
diff --git a/packages/components/src/card/index.js b/packages/components/src/card/index.js
index 073a50fa347204..765b980567abf5 100644
--- a/packages/components/src/card/index.js
+++ b/packages/components/src/card/index.js
@@ -10,23 +10,32 @@ import { CardContext } from './context';
 import { CardUI } from './styles/card-styles';
 
 export const defaultProps = {
+	isBorderless: false,
+	isElevated: false,
 	size: 'medium',
-	variant: 'default',
 };
 
 export function Card( props ) {
-	const { className, size, variant, ...additionalProps } = props;
+	const {
+		className,
+		isBorderless,
+		isElevated,
+		size,
+		...additionalProps
+	} = props;
 	const { Provider } = CardContext;
 
 	const contextProps = {
+		isBorderless,
+		isElevated,
 		size,
-		variant,
 	};
 
 	const classes = classnames(
 		'components-card',
+		isBorderless && 'is-borderless',
+		isElevated && 'is-elevated',
 		size && `is-size-${ size }`,
-		variant && `is-variant-${ variant }`,
 		className
 	);
 
diff --git a/packages/components/src/card/stories/_index.js b/packages/components/src/card/stories/_index.js
index 69613211055169..dea930e8c94c6c 100644
--- a/packages/components/src/card/stories/_index.js
+++ b/packages/components/src/card/stories/_index.js
@@ -20,14 +20,14 @@ export default { title: 'Card', component: Card };
 export const _default = () => {
 	const props = getCardStoryProps();
 
-	const body = text( 'Body/Content', 'Code is Poetry' );
-	const isBodyShady = boolean( 'Body/Shady', false );
+	const body = text( 'Body: children', 'Code is Poetry' );
+	const isBodyShady = boolean( 'Body: isShady', false );
 
-	const header = text( 'Header/Content', 'Header' );
-	const isHeaderShady = boolean( 'Header/Shady', false );
+	const header = text( 'Header: children', 'Header' );
+	const isHeaderShady = boolean( 'Header: isShady', false );
 
-	const footer = text( 'Footer/Content', 'Footer' );
-	const isFooterShady = boolean( 'Footer/Shady', false );
+	const footer = text( 'Footer: children', 'Footer' );
+	const isFooterShady = boolean( 'Footer: isShady', false );
 
 	return (
 		<Card { ...props }>
diff --git a/packages/components/src/card/stories/_utils.js b/packages/components/src/card/stories/_utils.js
index 789cb214e08a68..8e34f08d16a814 100644
--- a/packages/components/src/card/stories/_utils.js
+++ b/packages/components/src/card/stories/_utils.js
@@ -2,15 +2,17 @@
  * External dependencies
  */
 /* eslint-disable import/no-extraneous-dependencies */
-import { select } from '@storybook/addon-knobs';
+import { boolean, select } from '@storybook/addon-knobs';
 /* eslint-enable import/no-extraneous-dependencies */
 
 export const getCardProps = ( props = {} ) => {
-	const { size, variant } = props;
+	const { size } = props;
 
 	return {
+		isBorderless: boolean( 'Card: isBorderless', false ),
+		isElevated: boolean( 'Card: isElevated', false ),
 		size: select(
-			'size',
+			'Card: size',
 			{
 				large: 'large',
 				medium: 'medium',
@@ -19,21 +21,12 @@ export const getCardProps = ( props = {} ) => {
 			},
 			size || 'medium'
 		),
-		variant: select(
-			'variant',
-			{
-				default: 'default',
-				borderless: 'borderless',
-				raised: 'raised',
-			},
-			variant || 'default'
-		),
 	};
 };
 
 export const getCardStyleProps = ( props = {} ) => {
 	const width = select(
-		'Card Width',
+		'Example: Width',
 		{
 			'640px': 640,
 			'360px': 360,
diff --git a/packages/components/src/card/stories/body.js b/packages/components/src/card/stories/body.js
index f82045f78bf190..6980a451c31dde 100644
--- a/packages/components/src/card/stories/body.js
+++ b/packages/components/src/card/stories/body.js
@@ -16,8 +16,8 @@ export default { title: 'Card/Body', component: CardBody };
 
 export const _default = () => {
 	const props = getCardStoryProps();
-	const content = text( 'Content', 'Content' );
-	const isShady = boolean( 'isShady', false );
+	const content = text( 'Body: children', 'Content' );
+	const isShady = boolean( 'Body: isShady', false );
 
 	return (
 		<Card { ...props }>
diff --git a/packages/components/src/card/stories/footer.js b/packages/components/src/card/stories/footer.js
index d430c1d275c066..5442888f9bfa4d 100644
--- a/packages/components/src/card/stories/footer.js
+++ b/packages/components/src/card/stories/footer.js
@@ -16,8 +16,8 @@ export default { title: 'Card/Footer', component: CardFooter };
 
 export const _default = () => {
 	const props = getCardStoryProps();
-	const content = text( 'Content', 'Content' );
-	const isShady = boolean( 'isShady', false );
+	const content = text( 'Footer: children', 'Content' );
+	const isShady = boolean( 'Footer: isShady', false );
 
 	return (
 		<Card { ...props }>
diff --git a/packages/components/src/card/stories/header.js b/packages/components/src/card/stories/header.js
index 8a5d478d5114a4..b651a70605123e 100644
--- a/packages/components/src/card/stories/header.js
+++ b/packages/components/src/card/stories/header.js
@@ -16,8 +16,8 @@ export default { title: 'Card/Header', component: CardHeader };
 
 export const _default = () => {
 	const props = getCardStoryProps();
-	const content = text( 'Content', 'Content' );
-	const isShady = boolean( 'isShady', false );
+	const content = text( 'Footer: children', 'Content' );
+	const isShady = boolean( 'Footer: isShady', false );
 
 	return (
 		<Card { ...props }>
diff --git a/packages/components/src/card/stories/media.js b/packages/components/src/card/stories/media.js
index e06c090067ccbe..b4f03addee1afb 100644
--- a/packages/components/src/card/stories/media.js
+++ b/packages/components/src/card/stories/media.js
@@ -26,12 +26,12 @@ const DummyImage = () => (
 );
 
 export const _default = () => {
+	const mediaOnTop = boolean( 'Example: On Top', true );
 	const props = getCardStoryProps();
 
-	const mediaOnTop = boolean( 'On Top', true );
 	const showTopContent = ! mediaOnTop;
 	const showBottomContent = ! showTopContent;
-	const content = text( 'Content', 'Content' );
+	const content = text( 'Body: children', 'Content' );
 
 	return (
 		<Card { ...props }>
@@ -138,15 +138,15 @@ const HorizontallyAlignedCard = styled( Card )`
 
 export const horizontallyAligned = () => {
 	const align = select(
-		'Align',
+		'Example: Align',
 		{
 			left: 'left',
 			right: 'right',
 		},
 		'left'
 	);
-	const content = text( 'Content', 'Content' );
-	const maxWidth = number( 'Media Width', 200 );
+	const maxWidth = number( 'Example: Media Width', 200 );
+	const content = text( 'Body: children', 'Content' );
 	const classes = `is-${ align }`;
 
 	return (
diff --git a/packages/components/src/card/styles/card-styles.js b/packages/components/src/card/styles/card-styles.js
index c85bc77eb3630f..87d73bf45df4fc 100644
--- a/packages/components/src/card/styles/card-styles.js
+++ b/packages/components/src/card/styles/card-styles.js
@@ -25,13 +25,10 @@ export const CardUI = styled.div`
 
 	${ handleBorderless };
 
-	&.is-variant {
-		&-raised {
-			border: none;
-			box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
-				0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-				0px 2px 1px -1px rgba(0, 0, 0, 0.12);
-		}
+	&.is-elevated {
+		box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
+			0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+			0px 2px 1px -1px rgba(0, 0, 0, 0.12);
 	}
 `;
 
@@ -144,10 +141,8 @@ export function headerFooterSizes() {
 
 export function handleBorderless() {
 	return `
-		&.is-variant {
-			&-borderless {
-				border: none;
-			}
+		&.is-borderless {
+			border: none;
 		}
 	`;
 }
diff --git a/packages/components/src/card/test/footer.js b/packages/components/src/card/test/footer.js
index b162ffe2ef3aef..bcd4308782437a 100644
--- a/packages/components/src/card/test/footer.js
+++ b/packages/components/src/card/test/footer.js
@@ -45,11 +45,11 @@ describe( 'CardFooter', () => {
 			expect( cardFooter.hasClass( 'is-shady' ) ).toBe( true );
 		} );
 
-		test( 'should be able to render variant modifier', () => {
-			const wrapper = shallow( <CardFooter variant="borderless" /> );
+		test( 'should be able to render borderless modifier', () => {
+			const wrapper = shallow( <CardFooter isBorderless /> );
 			const cardFooter = wrapper.find( '.components-card__footer' );
 
-			expect( cardFooter.hasClass( 'is-variant-borderless' ) ).toBe( true );
+			expect( cardFooter.hasClass( 'is-borderless' ) ).toBe( true );
 		} );
 	} );
 } );
diff --git a/packages/components/src/card/test/header.js b/packages/components/src/card/test/header.js
index 9dbff9abcce5a7..3323658aaa7b6b 100644
--- a/packages/components/src/card/test/header.js
+++ b/packages/components/src/card/test/header.js
@@ -45,11 +45,11 @@ describe( 'CardHeader', () => {
 			expect( cardHeader.hasClass( 'is-shady' ) ).toBe( true );
 		} );
 
-		test( 'should be able to render variant modifier', () => {
-			const wrapper = shallow( <CardHeader variant="borderless" /> );
+		test( 'should be able to render borderless modifier', () => {
+			const wrapper = shallow( <CardHeader isBorderless /> );
 			const cardHeader = wrapper.find( '.components-card__header' );
 
-			expect( cardHeader.hasClass( 'is-variant-borderless' ) ).toBe( true );
+			expect( cardHeader.hasClass( 'is-borderless' ) ).toBe( true );
 		} );
 	} );
 } );
diff --git a/packages/components/src/card/test/index.js b/packages/components/src/card/test/index.js
index be4801007c068b..16b4d3158971a0 100644
--- a/packages/components/src/card/test/index.js
+++ b/packages/components/src/card/test/index.js
@@ -35,19 +35,19 @@ describe( 'Card', () => {
 		} );
 	} );
 
-	describe( 'variants', () => {
-		test( 'should render borderless variant', () => {
-			const wrapper = shallow( <Card variant="borderless" /> );
+	describe( 'styles', () => {
+		test( 'should render borderless', () => {
+			const wrapper = shallow( <Card isBorderless /> );
 			const card = wrapper.find( '.components-card' );
 
-			expect( card.hasClass( 'is-variant-borderless' ) ).toBe( true );
+			expect( card.hasClass( 'is-borderless' ) ).toBe( true );
 		} );
 
-		test( 'should render raised variant', () => {
-			const wrapper = shallow( <Card variant="raised" /> );
+		test( 'should render elevated styles', () => {
+			const wrapper = shallow( <Card isElevated /> );
 			const card = wrapper.find( '.components-card' );
 
-			expect( card.hasClass( 'is-variant-raised' ) ).toBe( true );
+			expect( card.hasClass( 'is-elevated' ) ).toBe( true );
 		} );
 	} );
 
@@ -102,20 +102,20 @@ describe( 'Card', () => {
 
 		test( 'should receive modifier props from context', () => {
 			const card = mount(
-				<Card size="extraSmall" variant="borderless">
+				<Card size="extraSmall" isBorderless={ true }>
 					<CardHeader>Hello</CardHeader>
 				</Card>
 			);
 			const cardHeader = card.find( '.components-card__header' ).first();
 
 			expect( cardHeader.hasClass( 'is-size-extraSmall' ) ).toBe( true );
-			expect( cardHeader.hasClass( 'is-variant-borderless' ) ).toBe( true );
+			expect( cardHeader.hasClass( 'is-borderless' ) ).toBe( true );
 		} );
 
 		test( 'should be able to override props from context', () => {
 			const card = mount(
-				<Card size="extraSmall" variant="borderless">
-					<CardHeader size="large" variant="raised">
+				<Card size="extraSmall" isBorderless={ true }>
+					<CardHeader size="large" isBorderless={ false }>
 						Hello
 					</CardHeader>
 				</Card>
@@ -123,7 +123,7 @@ describe( 'Card', () => {
 			const cardHeader = card.find( '.components-card__header' ).first();
 
 			expect( cardHeader.hasClass( 'is-size-large' ) ).toBe( true );
-			expect( cardHeader.hasClass( 'is-variant-raised' ) ).toBe( true );
+			expect( cardHeader.hasClass( 'is-borderless' ) ).toBe( false );
 		} );
 	} );
 
@@ -142,20 +142,20 @@ describe( 'Card', () => {
 
 		test( 'should receive modifier props from context', () => {
 			const card = mount(
-				<Card size="extraSmall" variant="borderless">
+				<Card size="extraSmall" isBorderless={ true }>
 					<CardFooter>Hello</CardFooter>
 				</Card>
 			);
 			const cardFooter = card.find( '.components-card__footer' ).first();
 
 			expect( cardFooter.hasClass( 'is-size-extraSmall' ) ).toBe( true );
-			expect( cardFooter.hasClass( 'is-variant-borderless' ) ).toBe( true );
+			expect( cardFooter.hasClass( 'is-borderless' ) ).toBe( true );
 		} );
 
 		test( 'should be able to override props from context', () => {
 			const card = mount(
-				<Card size="extraSmall" variant="borderless">
-					<CardFooter size="large" variant="raised">
+				<Card size="extraSmall" isBorderless={ true }>
+					<CardFooter size="large" isBorderless={ false }>
 						Hello
 					</CardFooter>
 				</Card>
@@ -163,7 +163,7 @@ describe( 'Card', () => {
 			const cardFooter = card.find( '.components-card__footer' ).first();
 
 			expect( cardFooter.hasClass( 'is-size-large' ) ).toBe( true );
-			expect( cardFooter.hasClass( 'is-variant-raised' ) ).toBe( true );
+			expect( cardFooter.hasClass( 'is-borderless' ) ).toBe( false );
 		} );
 	} );
 

From bb54a62409ca28e2cac151af92e31f2615e4c466 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 12 Nov 2019 11:24:57 +0100
Subject: [PATCH 32/37] Replace styled-components with emotion

Based on experience and further research, it appears that Emotion may be
a better fit for the needs of @wordpress/components. Specifically being
a dependency of the project with reduced chances of integration conflict
with other libraries and projects.
---
 babel.config.js                               |   2 +-
 package-lock.json                             | 307 ++++++++++--------
 package.json                                  |   1 +
 packages/components/package.json              |   3 +-
 packages/components/src/card/stories/media.js |   2 +-
 .../components/src/card/styles/card-styles.js |   2 +-
 packages/components/storybook/.babelrc        |   3 +-
 7 files changed, 173 insertions(+), 147 deletions(-)

diff --git a/babel.config.js b/babel.config.js
index 7679cc1e837041..f950b6603a5127 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -3,6 +3,6 @@ module.exports = function( api ) {
 
 	return {
 		presets: [ '@wordpress/babel-preset-default' ],
-		plugins: [ 'babel-plugin-inline-json-import' ],
+		plugins: [ 'babel-plugin-emotion', 'babel-plugin-inline-json-import' ],
 	};
 };
diff --git a/package-lock.json b/package-lock.json
index 7874f008874ad3..cb55f1dcd4f9d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -92,6 +92,7 @@
 			"version": "7.4.4",
 			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.4.4.tgz",
 			"integrity": "sha512-53UOLK6TVNqKxf7RUh8NE851EHRxOOeVXKbK2bivdb+iziMyk03Sr4eaE9OELCbyZAAafAKPDwF2TPUES5QbxQ==",
+			"dev": true,
 			"requires": {
 				"@babel/types": "^7.4.4",
 				"jsesc": "^2.5.1",
@@ -104,6 +105,7 @@
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz",
 			"integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==",
+			"dev": true,
 			"requires": {
 				"@babel/types": "^7.0.0"
 			}
@@ -167,6 +169,7 @@
 			"version": "7.1.0",
 			"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz",
 			"integrity": "sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==",
+			"dev": true,
 			"requires": {
 				"@babel/helper-get-function-arity": "^7.0.0",
 				"@babel/template": "^7.1.0",
@@ -284,6 +287,7 @@
 			"version": "7.4.4",
 			"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz",
 			"integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==",
+			"dev": true,
 			"requires": {
 				"@babel/types": "^7.4.4"
 			}
@@ -324,7 +328,8 @@
 		"@babel/parser": {
 			"version": "7.4.4",
 			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.4.4.tgz",
-			"integrity": "sha512-5pCS4mOsL+ANsFZGdvNLybx4wtqAZJ0MJjMHxvzI3bvIsz6sQvzW8XX92EYIkiPtIvcfG3Aj+Ir5VNyjnZhP7w=="
+			"integrity": "sha512-5pCS4mOsL+ANsFZGdvNLybx4wtqAZJ0MJjMHxvzI3bvIsz6sQvzW8XX92EYIkiPtIvcfG3Aj+Ir5VNyjnZhP7w==",
+			"dev": true
 		},
 		"@babel/plugin-external-helpers": {
 			"version": "7.2.0",
@@ -1579,6 +1584,7 @@
 			"version": "7.4.4",
 			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz",
 			"integrity": "sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==",
+			"dev": true,
 			"requires": {
 				"@babel/code-frame": "^7.0.0",
 				"@babel/parser": "^7.4.4",
@@ -1589,6 +1595,7 @@
 			"version": "7.4.5",
 			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.4.5.tgz",
 			"integrity": "sha512-Vc+qjynwkjRmIFGxy0KYoPj4FdVDxLej89kMHFsWScq999uX+pwcX4v9mWRjW0KcAYTPAuVQl2LKP1wEVLsp+A==",
+			"dev": true,
 			"requires": {
 				"@babel/code-frame": "^7.0.0",
 				"@babel/generator": "^7.4.4",
@@ -1604,12 +1611,14 @@
 				"@babel/parser": {
 					"version": "7.6.2",
 					"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.6.2.tgz",
-					"integrity": "sha512-mdFqWrSPCmikBoaBYMuBulzTIKuXVPtEISFbRRVNwMWpCms/hmE2kRq0bblUHaNRKrjRlmVbx1sDHmjmRgD2Xg=="
+					"integrity": "sha512-mdFqWrSPCmikBoaBYMuBulzTIKuXVPtEISFbRRVNwMWpCms/hmE2kRq0bblUHaNRKrjRlmVbx1sDHmjmRgD2Xg==",
+					"dev": true
 				},
 				"debug": {
 					"version": "4.1.1",
 					"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
 					"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+					"dev": true,
 					"requires": {
 						"ms": "^2.1.1"
 					}
@@ -1617,12 +1626,14 @@
 				"globals": {
 					"version": "11.12.0",
 					"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-					"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
+					"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+					"dev": true
 				},
 				"ms": {
 					"version": "2.1.2",
 					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+					"dev": true
 				}
 			}
 		},
@@ -1650,7 +1661,6 @@
 			"version": "10.0.19",
 			"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.19.tgz",
 			"integrity": "sha512-BoiLlk4vEsGBg2dAqGSJu0vJl/PgVtCYLBFJaEO8RmQzPugXewQCXZJNXTDFaRlfCs0W+quesayav4fvaif5WQ==",
-			"dev": true,
 			"requires": {
 				"@emotion/sheet": "0.9.3",
 				"@emotion/stylis": "0.8.4",
@@ -1697,13 +1707,13 @@
 		"@emotion/hash": {
 			"version": "0.7.3",
 			"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.3.tgz",
-			"integrity": "sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==",
-			"dev": true
+			"integrity": "sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw=="
 		},
 		"@emotion/is-prop-valid": {
 			"version": "0.8.3",
 			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.3.tgz",
 			"integrity": "sha512-We7VBiltAJ70KQA0dWkdPMXnYoizlxOXpvtjmu5/MBnExd+u0PGgV27WCYanmLAbCwAU30Le/xA0CQs/F/Otig==",
+			"dev": true,
 			"requires": {
 				"@emotion/memoize": "0.7.3"
 			}
@@ -1729,8 +1739,7 @@
 		"@emotion/sheet": {
 			"version": "0.9.3",
 			"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.3.tgz",
-			"integrity": "sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A==",
-			"dev": true
+			"integrity": "sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A=="
 		},
 		"@emotion/styled": {
 			"version": "10.0.17",
@@ -1768,8 +1777,7 @@
 		"@emotion/stylis": {
 			"version": "0.8.4",
 			"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.4.tgz",
-			"integrity": "sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ==",
-			"dev": true
+			"integrity": "sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ=="
 		},
 		"@emotion/unitless": {
 			"version": "0.7.4",
@@ -1779,14 +1787,12 @@
 		"@emotion/utils": {
 			"version": "0.11.2",
 			"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.2.tgz",
-			"integrity": "sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA==",
-			"dev": true
+			"integrity": "sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA=="
 		},
 		"@emotion/weak-memoize": {
 			"version": "0.2.4",
 			"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz",
-			"integrity": "sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==",
-			"dev": true
+			"integrity": "sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA=="
 		},
 		"@evocateur/libnpmaccess": {
 			"version": "3.1.2",
@@ -7336,6 +7342,8 @@
 			"version": "file:packages/components",
 			"requires": {
 				"@babel/runtime": "^7.4.4",
+				"@emotion/core": "10.0.22",
+				"@emotion/styled": "10.0.23",
 				"@wordpress/a11y": "file:packages/a11y",
 				"@wordpress/compose": "file:packages/compose",
 				"@wordpress/deprecated": "file:packages/deprecated",
@@ -7358,9 +7366,110 @@
 				"react-dates": "^17.1.1",
 				"react-spring": "^8.0.20",
 				"rememo": "^3.0.0",
-				"styled-components": "^4.4.0",
 				"tinycolor2": "^1.4.1",
 				"uuid": "^3.3.2"
+			},
+			"dependencies": {
+				"@emotion/core": {
+					"version": "10.0.22",
+					"resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.22.tgz",
+					"integrity": "sha512-7eoP6KQVUyOjAkE6y4fdlxbZRA4ILs7dqkkm6oZUJmihtHv0UBq98VgPirq9T8F9K2gKu0J/au/TpKryKMinaA==",
+					"requires": {
+						"@babel/runtime": "^7.5.5",
+						"@emotion/cache": "^10.0.17",
+						"@emotion/css": "^10.0.22",
+						"@emotion/serialize": "^0.11.12",
+						"@emotion/sheet": "0.9.3",
+						"@emotion/utils": "0.11.2"
+					},
+					"dependencies": {
+						"@babel/runtime": {
+							"version": "7.7.2",
+							"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz",
+							"integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==",
+							"requires": {
+								"regenerator-runtime": "^0.13.2"
+							}
+						}
+					}
+				},
+				"@emotion/css": {
+					"version": "10.0.22",
+					"resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.22.tgz",
+					"integrity": "sha512-8phfa5mC/OadBTmGpMpwykIVH0gFCbUoO684LUkyixPq4F1Wwri7fK5Xlm8lURNBrd2TuvTbPUGxFsGxF9UacA==",
+					"requires": {
+						"@emotion/serialize": "^0.11.12",
+						"@emotion/utils": "0.11.2",
+						"babel-plugin-emotion": "^10.0.22"
+					}
+				},
+				"@emotion/is-prop-valid": {
+					"version": "0.8.5",
+					"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz",
+					"integrity": "sha512-6ZODuZSFofbxSbcxwsFz+6ioPjb0ISJRRPLZ+WIbjcU2IMU0Io+RGQjjaTgOvNQl007KICBm7zXQaYQEC1r6Bg==",
+					"requires": {
+						"@emotion/memoize": "0.7.3"
+					}
+				},
+				"@emotion/serialize": {
+					"version": "0.11.14",
+					"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.14.tgz",
+					"integrity": "sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==",
+					"requires": {
+						"@emotion/hash": "0.7.3",
+						"@emotion/memoize": "0.7.3",
+						"@emotion/unitless": "0.7.4",
+						"@emotion/utils": "0.11.2",
+						"csstype": "^2.5.7"
+					}
+				},
+				"@emotion/styled": {
+					"version": "10.0.23",
+					"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.23.tgz",
+					"integrity": "sha512-gNr04eqBQ2iYUx8wFLZDfm3N8/QUOODu/ReDXa693uyQGy2OqA+IhPJk+kA7id8aOfwAsMuvZ0pJImEXXKtaVQ==",
+					"requires": {
+						"@emotion/styled-base": "^10.0.23",
+						"babel-plugin-emotion": "^10.0.23"
+					}
+				},
+				"@emotion/styled-base": {
+					"version": "10.0.24",
+					"resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.24.tgz",
+					"integrity": "sha512-AnBImerf0h4dGAJVo0p0VE8KoAns71F28ErGFK474zbNAHX6yqSWQUasb+1jvg/VPwZjCp19+tAr6oOB0pwmLQ==",
+					"requires": {
+						"@babel/runtime": "^7.5.5",
+						"@emotion/is-prop-valid": "0.8.5",
+						"@emotion/serialize": "^0.11.14",
+						"@emotion/utils": "0.11.2"
+					},
+					"dependencies": {
+						"@babel/runtime": {
+							"version": "7.7.2",
+							"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz",
+							"integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==",
+							"requires": {
+								"regenerator-runtime": "^0.13.2"
+							}
+						}
+					}
+				},
+				"babel-plugin-emotion": {
+					"version": "10.0.23",
+					"resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.23.tgz",
+					"integrity": "sha512-1JiCyXU0t5S2xCbItejCduLGGcKmF3POT0Ujbexog2MI4IlRcIn/kWjkYwCUZlxpON0O5FC635yPl/3slr7cKQ==",
+					"requires": {
+						"@babel/helper-module-imports": "^7.0.0",
+						"@emotion/hash": "0.7.3",
+						"@emotion/memoize": "0.7.3",
+						"@emotion/serialize": "^0.11.14",
+						"babel-plugin-macros": "^2.0.0",
+						"babel-plugin-syntax-jsx": "^6.18.0",
+						"convert-source-map": "^1.5.0",
+						"escape-string-regexp": "^1.0.5",
+						"find-root": "^1.1.0",
+						"source-map": "^0.5.7"
+					}
+				}
 			}
 		},
 		"@wordpress/compose": {
@@ -8369,7 +8478,6 @@
 			"version": "1.0.10",
 			"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
 			"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-			"dev": true,
 			"requires": {
 				"sprintf-js": "~1.0.2"
 			},
@@ -8377,8 +8485,7 @@
 				"sprintf-js": {
 					"version": "1.0.3",
 					"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-					"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-					"dev": true
+					"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
 				}
 			}
 		},
@@ -9310,21 +9417,36 @@
 			}
 		},
 		"babel-plugin-emotion": {
-			"version": "10.0.21",
-			"resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.21.tgz",
-			"integrity": "sha512-03o+T6sfVAJhNDcSdLapgv4IeewcFPzxlvBUVdSf7o5PI57ZSxoDvmy+ZulVWSu+rOWAWkEejNcsb29TuzJHbg==",
+			"version": "10.0.23",
+			"resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.23.tgz",
+			"integrity": "sha512-1JiCyXU0t5S2xCbItejCduLGGcKmF3POT0Ujbexog2MI4IlRcIn/kWjkYwCUZlxpON0O5FC635yPl/3slr7cKQ==",
 			"dev": true,
 			"requires": {
 				"@babel/helper-module-imports": "^7.0.0",
 				"@emotion/hash": "0.7.3",
 				"@emotion/memoize": "0.7.3",
-				"@emotion/serialize": "^0.11.11",
+				"@emotion/serialize": "^0.11.14",
 				"babel-plugin-macros": "^2.0.0",
 				"babel-plugin-syntax-jsx": "^6.18.0",
 				"convert-source-map": "^1.5.0",
 				"escape-string-regexp": "^1.0.5",
 				"find-root": "^1.1.0",
 				"source-map": "^0.5.7"
+			},
+			"dependencies": {
+				"@emotion/serialize": {
+					"version": "0.11.14",
+					"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.14.tgz",
+					"integrity": "sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==",
+					"dev": true,
+					"requires": {
+						"@emotion/hash": "0.7.3",
+						"@emotion/memoize": "0.7.3",
+						"@emotion/unitless": "0.7.4",
+						"@emotion/utils": "0.11.2",
+						"csstype": "^2.5.7"
+					}
+				}
 			}
 		},
 		"babel-plugin-extract-import-names": {
@@ -9441,7 +9563,6 @@
 			"version": "2.6.1",
 			"resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.6.1.tgz",
 			"integrity": "sha512-6W2nwiXme6j1n2erPOnmRiWfObUhWH7Qw1LMi9XZy8cj+KtESu3T6asZvtk5bMQQjX8te35o7CFueiSdL/2NmQ==",
-			"dev": true,
 			"requires": {
 				"@babel/runtime": "^7.4.2",
 				"cosmiconfig": "^5.2.0",
@@ -9452,7 +9573,6 @@
 					"version": "5.2.1",
 					"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
 					"integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
-					"dev": true,
 					"requires": {
 						"import-fresh": "^2.0.0",
 						"is-directory": "^0.3.1",
@@ -9464,7 +9584,6 @@
 					"version": "2.0.0",
 					"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
 					"integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
-					"dev": true,
 					"requires": {
 						"caller-path": "^2.0.0",
 						"resolve-from": "^3.0.0"
@@ -9474,7 +9593,6 @@
 					"version": "4.0.0",
 					"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
 					"integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
-					"dev": true,
 					"requires": {
 						"error-ex": "^1.3.1",
 						"json-parse-better-errors": "^1.0.1"
@@ -9483,14 +9601,12 @@
 				"path-parse": {
 					"version": "1.0.6",
 					"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-					"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
-					"dev": true
+					"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
 				},
 				"resolve": {
 					"version": "1.12.0",
 					"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
 					"integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
-					"dev": true,
 					"requires": {
 						"path-parse": "^1.0.6"
 					}
@@ -9623,17 +9739,6 @@
 				"@babel/template": "^7.0.0-beta.49"
 			}
 		},
-		"babel-plugin-styled-components": {
-			"version": "1.10.6",
-			"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz",
-			"integrity": "sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA==",
-			"requires": {
-				"@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": {
 			"version": "6.18.0",
 			"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
@@ -11031,7 +11136,6 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
 			"integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
-			"dev": true,
 			"requires": {
 				"callsites": "^2.0.0"
 			},
@@ -11039,8 +11143,7 @@
 				"callsites": {
 					"version": "2.0.0",
 					"resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
-					"integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
-					"dev": true
+					"integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA="
 				}
 			}
 		},
@@ -11048,7 +11151,6 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
 			"integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
-			"dev": true,
 			"requires": {
 				"caller-callsite": "^2.0.0"
 			}
@@ -11097,11 +11199,6 @@
 				"quick-lru": "^1.0.0"
 			}
 		},
-		"camelize": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
-			"integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
-		},
 		"can-use-dom": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz",
@@ -12416,8 +12513,7 @@
 		"convert-source-map": {
 			"version": "1.5.1",
 			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.5.1.tgz",
-			"integrity": "sha1-uCeAl7m8IpNl3lxiz1/K7YtVmeU=",
-			"dev": true
+			"integrity": "sha1-uCeAl7m8IpNl3lxiz1/K7YtVmeU="
 		},
 		"cookie": {
 			"version": "0.3.1",
@@ -12725,11 +12821,6 @@
 				}
 			}
 		},
-		"css-color-keywords": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-			"integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
-		},
 		"css-color-names": {
 			"version": "0.0.4",
 			"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -13048,16 +13139,6 @@
 				}
 			}
 		},
-		"css-to-react-native": {
-			"version": "2.3.2",
-			"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz",
-			"integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==",
-			"requires": {
-				"camelize": "^1.0.0",
-				"css-color-keywords": "^1.0.0",
-				"postcss-value-parser": "^3.3.0"
-			}
-		},
 		"css-tree": {
 			"version": "1.0.0-alpha.28",
 			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.28.tgz",
@@ -13208,8 +13289,7 @@
 		"csstype": {
 			"version": "2.6.7",
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz",
-			"integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==",
-			"dev": true
+			"integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ=="
 		},
 		"currently-unhandled": {
 			"version": "0.4.1",
@@ -14358,7 +14438,6 @@
 			"version": "1.3.2",
 			"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
 			"integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-			"dev": true,
 			"requires": {
 				"is-arrayish": "^0.2.1"
 			}
@@ -15929,8 +16008,7 @@
 		"find-root": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-			"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
-			"dev": true
+			"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
 		},
 		"find-up": {
 			"version": "2.1.0",
@@ -18775,8 +18853,7 @@
 		"is-arrayish": {
 			"version": "0.2.1",
 			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-			"integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
-			"dev": true
+			"integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
 		},
 		"is-binary-path": {
 			"version": "1.0.1",
@@ -18889,8 +18966,7 @@
 		"is-directory": {
 			"version": "0.3.1",
 			"resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
-			"integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
-			"dev": true
+			"integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE="
 		},
 		"is-equal-shallow": {
 			"version": "0.1.3",
@@ -19154,11 +19230,6 @@
 			"integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
 			"dev": true
 		},
-		"is-what": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/is-what/-/is-what-3.3.1.tgz",
-			"integrity": "sha512-seFn10yAXy+yJlTRO+8VfiafC+0QJanGLMPTBWLrJm/QPauuchy0UXh8B6H5o9VA8BAzk0iYievt6mNp6gfaqA=="
-		},
 		"is-whitespace-character": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.2.tgz",
@@ -20558,7 +20629,6 @@
 			"version": "3.13.1",
 			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
 			"integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
-			"dev": true,
 			"requires": {
 				"argparse": "^1.0.7",
 				"esprima": "^4.0.0"
@@ -20567,8 +20637,7 @@
 				"esprima": {
 					"version": "4.0.1",
 					"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-					"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-					"dev": true
+					"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
 				}
 			}
 		},
@@ -20666,13 +20735,13 @@
 		"jsesc": {
 			"version": "2.5.1",
 			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.1.tgz",
-			"integrity": "sha1-5CGiqOINawgZ3yiQj3glJrlt0f4="
+			"integrity": "sha1-5CGiqOINawgZ3yiQj3glJrlt0f4=",
+			"dev": true
 		},
 		"json-parse-better-errors": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-			"integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
-			"dev": true
+			"integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
 		},
 		"json-schema": {
 			"version": "0.2.3",
@@ -22108,7 +22177,8 @@
 		"memoize-one": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
-			"integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+			"integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==",
+			"dev": true
 		},
 		"memoizerific": {
 			"version": "1.11.3",
@@ -22212,14 +22282,6 @@
 				}
 			}
 		},
-		"merge-anything": {
-			"version": "2.4.1",
-			"resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.1.tgz",
-			"integrity": "sha512-dYOIAl9GFCJNctSIHWOj9OJtarCjsD16P8ObCl6oxrujAG+kOvlwJuOD9/O9iYZ9aTi1RGpGTG9q9etIvuUikQ==",
-			"requires": {
-				"is-what": "^3.3.1"
-			}
-		},
 		"merge-deep": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.2.tgz",
@@ -22233,7 +22295,7 @@
 			"dependencies": {
 				"clone-deep": {
 					"version": "0.2.4",
-					"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
+					"resolved": "http://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
 					"integrity": "sha1-TnPdCen7lxzDhnDF3O2cGJZIHMY=",
 					"dev": true,
 					"requires": {
@@ -22267,7 +22329,7 @@
 					"dependencies": {
 						"kind-of": {
 							"version": "2.0.1",
-							"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
+							"resolved": "http://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
 							"integrity": "sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=",
 							"dev": true,
 							"requires": {
@@ -26610,7 +26672,8 @@
 		"postcss-value-parser": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
-			"integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU="
+			"integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
+			"dev": true
 		},
 		"posthtml": {
 			"version": "0.11.6",
@@ -29410,8 +29473,7 @@
 		"resolve-from": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-			"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
-			"dev": true
+			"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
 		},
 		"resolve-url": {
 			"version": "0.2.1",
@@ -31140,36 +31202,6 @@
 				"inline-style-parser": "0.1.1"
 			}
 		},
-		"styled-components": {
-			"version": "4.4.0",
-			"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.0.tgz",
-			"integrity": "sha512-xQ6vTI/0zNjZ1BBDRxyjvBddrxhQ3DxjeCdaLM1lSn5FDnkTOQgRkmWvcUiTajqc5nJqKVl+7sUioMqktD0+Zw==",
-			"requires": {
-				"@babel/helper-module-imports": "^7.0.0",
-				"@babel/traverse": "^7.0.0",
-				"@emotion/is-prop-valid": "^0.8.1",
-				"@emotion/unitless": "^0.7.0",
-				"babel-plugin-styled-components": ">= 1",
-				"css-to-react-native": "^2.2.2",
-				"memoize-one": "^5.0.0",
-				"merge-anything": "^2.2.4",
-				"prop-types": "^15.5.4",
-				"react-is": "^16.6.0",
-				"stylis": "^3.5.0",
-				"stylis-rule-sheet": "^0.0.10",
-				"supports-color": "^5.5.0"
-			},
-			"dependencies": {
-				"supports-color": {
-					"version": "5.5.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-					"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-					"requires": {
-						"has-flag": "^3.0.0"
-					}
-				}
-			}
-		},
 		"stylehacks": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -31563,16 +31595,6 @@
 				}
 			}
 		},
-		"stylis": {
-			"version": "3.5.4",
-			"resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
-			"integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
-		},
-		"stylis-rule-sheet": {
-			"version": "0.0.10",
-			"resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
-			"integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
-		},
 		"sugarss": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",
@@ -32696,7 +32718,8 @@
 		"trim-right": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
-			"integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM="
+			"integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=",
+			"dev": true
 		},
 		"trim-trailing-lines": {
 			"version": "1.1.1",
diff --git a/package.json b/package.json
index 7fbcdef993efb3..099386c69a6007 100644
--- a/package.json
+++ b/package.json
@@ -98,6 +98,7 @@
 		"@wordpress/postcss-themes": "file:packages/postcss-themes",
 		"@wordpress/scripts": "file:packages/scripts",
 		"babel-loader": "8.0.6",
+		"babel-plugin-emotion": "10.0.23",
 		"babel-plugin-inline-json-import": "0.3.2",
 		"babel-plugin-react-native-classname-to-style": "1.2.2",
 		"babel-plugin-react-native-platform-specific-extensions": "1.1.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index 031b02c31fc629..3e5876a0c8d6eb 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -22,6 +22,8 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.4.4",
+		"@emotion/core": "10.0.22",
+		"@emotion/styled": "10.0.23",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/deprecated": "file:../deprecated",
@@ -44,7 +46,6 @@
 		"react-dates": "^17.1.1",
 		"react-spring": "^8.0.20",
 		"rememo": "^3.0.0",
-		"styled-components": "^4.4.0",
 		"tinycolor2": "^1.4.1",
 		"uuid": "^3.3.2"
 	},
diff --git a/packages/components/src/card/stories/media.js b/packages/components/src/card/stories/media.js
index b4f03addee1afb..c670d5bbb2e0b7 100644
--- a/packages/components/src/card/stories/media.js
+++ b/packages/components/src/card/stories/media.js
@@ -4,7 +4,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { boolean, number, select, text } from '@storybook/addon-knobs';
 /* eslint-enable import/no-extraneous-dependencies */
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 /**
  * Internal dependencies
diff --git a/packages/components/src/card/styles/card-styles.js b/packages/components/src/card/styles/card-styles.js
index 87d73bf45df4fc..f407b80328487e 100644
--- a/packages/components/src/card/styles/card-styles.js
+++ b/packages/components/src/card/styles/card-styles.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 /**
  * Internal dependencies
diff --git a/packages/components/storybook/.babelrc b/packages/components/storybook/.babelrc
index 3f3c69a12a5b94..74d1dc550024d8 100644
--- a/packages/components/storybook/.babelrc
+++ b/packages/components/storybook/.babelrc
@@ -1,3 +1,4 @@
 {
-	"presets": [ "@wordpress/babel-preset-default" ]
+	"presets": [ "@wordpress/babel-preset-default" ],
+	"plugins": [ "babel-plugin-emotion" ]
 }

From f40a8906da65f797a8c84b1284d62954729caca2 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 12 Nov 2019 11:48:18 +0100
Subject: [PATCH 33/37] Change first-child -> first-of-type to resolve emotion
 warnings

---
 packages/components/src/card/styles/card-styles.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/card/styles/card-styles.js b/packages/components/src/card/styles/card-styles.js
index f407b80328487e..150ff2ba1f57c9 100644
--- a/packages/components/src/card/styles/card-styles.js
+++ b/packages/components/src/card/styles/card-styles.js
@@ -59,12 +59,12 @@ export const MediaUI = styled.div`
 		width: 100%;
 	}
 
-	&:first-child {
+	&:first-of-type {
 		border-top-left-radius: ${ borderRadius };
 		border-top-right-radius: ${ borderRadius };
 	}
 
-	&:last-child {
+	&:last-of-type {
 		border-bottom-left-radius: ${ borderRadius };
 		border-bottom-right-radius: ${ borderRadius };
 	}
@@ -83,7 +83,7 @@ export const FooterUI = styled.div`
 	border-bottom-right-radius: ${ borderRadius };
 	box-sizing: border-box;
 
-	&:first-child {
+	&:first-of-type {
 		border-top: none;
 	}
 

From ca8aad4b1c75dc878248773ada1c2ed39481456f Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 12 Nov 2019 12:03:51 +0100
Subject: [PATCH 34/37] Fix @emotion dependencies for root package-lock.json

---
 package-lock.json | 85 ++++++++++++++++++++++++++++++++++-------------
 1 file changed, 61 insertions(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cb55f1dcd4f9d8..ca9ccc2ae8b035 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1669,27 +1669,51 @@
 			}
 		},
 		"@emotion/core": {
-			"version": "10.0.21",
-			"resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.21.tgz",
-			"integrity": "sha512-U9zbc7ovZ2ceIwbLXYZPJy6wPgnOdTNT4jENZ31ee6v2lojetV5bTbCVk6ciT8G3wQRyVaTTfUCH9WCrMzpRIw==",
+			"version": "10.0.22",
+			"resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.22.tgz",
+			"integrity": "sha512-7eoP6KQVUyOjAkE6y4fdlxbZRA4ILs7dqkkm6oZUJmihtHv0UBq98VgPirq9T8F9K2gKu0J/au/TpKryKMinaA==",
 			"dev": true,
 			"requires": {
 				"@babel/runtime": "^7.5.5",
 				"@emotion/cache": "^10.0.17",
-				"@emotion/css": "^10.0.14",
-				"@emotion/serialize": "^0.11.10",
+				"@emotion/css": "^10.0.22",
+				"@emotion/serialize": "^0.11.12",
 				"@emotion/sheet": "0.9.3",
 				"@emotion/utils": "0.11.2"
 			},
 			"dependencies": {
 				"@babel/runtime": {
-					"version": "7.6.2",
-					"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.2.tgz",
-					"integrity": "sha512-EXxN64agfUqqIGeEjI5dL5z0Sw0ZwWo1mLTi4mQowCZ42O59b7DRpZAnTC6OqdF28wMBMFKNb/4uFGrVaigSpg==",
+					"version": "7.7.2",
+					"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz",
+					"integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==",
 					"dev": true,
 					"requires": {
 						"regenerator-runtime": "^0.13.2"
 					}
+				},
+				"@emotion/css": {
+					"version": "10.0.22",
+					"resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.22.tgz",
+					"integrity": "sha512-8phfa5mC/OadBTmGpMpwykIVH0gFCbUoO684LUkyixPq4F1Wwri7fK5Xlm8lURNBrd2TuvTbPUGxFsGxF9UacA==",
+					"dev": true,
+					"requires": {
+						"@emotion/serialize": "^0.11.12",
+						"@emotion/utils": "0.11.2",
+						"babel-plugin-emotion": "^10.0.22"
+					}
+				},
+				"@emotion/serialize": {
+					"version": "0.11.14",
+					"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.14.tgz",
+					"integrity": "sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==",
+					"dev": true,
+					"requires": {
+						"@emotion/hash": "0.7.3",
+						"@emotion/memoize": "0.7.3",
+						"@emotion/unitless": "0.7.4",
+						"@emotion/utils": "0.11.2",
+						"csstype": "^2.5.7"
+					}
 				}
 			}
 		},
@@ -1710,9 +1734,9 @@
 			"integrity": "sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw=="
 		},
 		"@emotion/is-prop-valid": {
-			"version": "0.8.3",
-			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.3.tgz",
-			"integrity": "sha512-We7VBiltAJ70KQA0dWkdPMXnYoizlxOXpvtjmu5/MBnExd+u0PGgV27WCYanmLAbCwAU30Le/xA0CQs/F/Otig==",
+			"version": "0.8.5",
+			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz",
+			"integrity": "sha512-6ZODuZSFofbxSbcxwsFz+6ioPjb0ISJRRPLZ+WIbjcU2IMU0Io+RGQjjaTgOvNQl007KICBm7zXQaYQEC1r6Bg==",
 			"dev": true,
 			"requires": {
 				"@emotion/memoize": "0.7.3"
@@ -1742,35 +1766,48 @@
 			"integrity": "sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A=="
 		},
 		"@emotion/styled": {
-			"version": "10.0.17",
-			"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.17.tgz",
-			"integrity": "sha512-zHMgWjHDMNjD+ux64POtDnjLAObniu3znxFBLSdV/RiEhSLjHIowfvSbbd/C33/3uwtI6Uzs2KXnRZtka/PpAQ==",
+			"version": "10.0.23",
+			"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.23.tgz",
+			"integrity": "sha512-gNr04eqBQ2iYUx8wFLZDfm3N8/QUOODu/ReDXa693uyQGy2OqA+IhPJk+kA7id8aOfwAsMuvZ0pJImEXXKtaVQ==",
 			"dev": true,
 			"requires": {
-				"@emotion/styled-base": "^10.0.17",
-				"babel-plugin-emotion": "^10.0.17"
+				"@emotion/styled-base": "^10.0.23",
+				"babel-plugin-emotion": "^10.0.23"
 			}
 		},
 		"@emotion/styled-base": {
-			"version": "10.0.19",
-			"resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.19.tgz",
-			"integrity": "sha512-Sz6GBHTbOZoeZQKvkE9gQPzaJ6/qtoQ/OPvyG2Z/6NILlYk60Es1cEcTgTkm26H8y7A0GSgp4UmXl+srvsnFPg==",
+			"version": "10.0.24",
+			"resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.24.tgz",
+			"integrity": "sha512-AnBImerf0h4dGAJVo0p0VE8KoAns71F28ErGFK474zbNAHX6yqSWQUasb+1jvg/VPwZjCp19+tAr6oOB0pwmLQ==",
 			"dev": true,
 			"requires": {
 				"@babel/runtime": "^7.5.5",
-				"@emotion/is-prop-valid": "0.8.3",
-				"@emotion/serialize": "^0.11.11",
+				"@emotion/is-prop-valid": "0.8.5",
+				"@emotion/serialize": "^0.11.14",
 				"@emotion/utils": "0.11.2"
 			},
 			"dependencies": {
 				"@babel/runtime": {
-					"version": "7.6.2",
-					"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.2.tgz",
-					"integrity": "sha512-EXxN64agfUqqIGeEjI5dL5z0Sw0ZwWo1mLTi4mQowCZ42O59b7DRpZAnTC6OqdF28wMBMFKNb/4uFGrVaigSpg==",
+					"version": "7.7.2",
+					"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz",
+					"integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==",
 					"dev": true,
 					"requires": {
 						"regenerator-runtime": "^0.13.2"
 					}
+				},
+				"@emotion/serialize": {
+					"version": "0.11.14",
+					"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.14.tgz",
+					"integrity": "sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==",
+					"dev": true,
+					"requires": {
+						"@emotion/hash": "0.7.3",
+						"@emotion/memoize": "0.7.3",
+						"@emotion/unitless": "0.7.4",
+						"@emotion/utils": "0.11.2",
+						"csstype": "^2.5.7"
+					}
 				}
 			}
 		},

From 8559de598b8c9d5b3ef53ca4fb1826eff09c793f Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 12 Nov 2019 12:55:56 +0100
Subject: [PATCH 35/37] Update dependencies in package-lock.json

---
 package-lock.json | 113 ----------------------------------------------
 1 file changed, 113 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ca9ccc2ae8b035..55abb0b9968d05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1672,7 +1672,6 @@
 			"version": "10.0.22",
 			"resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.22.tgz",
 			"integrity": "sha512-7eoP6KQVUyOjAkE6y4fdlxbZRA4ILs7dqkkm6oZUJmihtHv0UBq98VgPirq9T8F9K2gKu0J/au/TpKryKMinaA==",
-			"dev": true,
 			"requires": {
 				"@babel/runtime": "^7.5.5",
 				"@emotion/cache": "^10.0.17",
@@ -1686,7 +1685,6 @@
 					"version": "7.7.2",
 					"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz",
 					"integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==",
-					"dev": true,
 					"requires": {
 						"regenerator-runtime": "^0.13.2"
 					}
@@ -1695,7 +1693,6 @@
 					"version": "10.0.22",
 					"resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.22.tgz",
 					"integrity": "sha512-8phfa5mC/OadBTmGpMpwykIVH0gFCbUoO684LUkyixPq4F1Wwri7fK5Xlm8lURNBrd2TuvTbPUGxFsGxF9UacA==",
-					"dev": true,
 					"requires": {
 						"@emotion/serialize": "^0.11.12",
 						"@emotion/utils": "0.11.2",
@@ -1706,7 +1703,6 @@
 					"version": "0.11.14",
 					"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.14.tgz",
 					"integrity": "sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==",
-					"dev": true,
 					"requires": {
 						"@emotion/hash": "0.7.3",
 						"@emotion/memoize": "0.7.3",
@@ -1737,7 +1733,6 @@
 			"version": "0.8.5",
 			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz",
 			"integrity": "sha512-6ZODuZSFofbxSbcxwsFz+6ioPjb0ISJRRPLZ+WIbjcU2IMU0Io+RGQjjaTgOvNQl007KICBm7zXQaYQEC1r6Bg==",
-			"dev": true,
 			"requires": {
 				"@emotion/memoize": "0.7.3"
 			}
@@ -1769,7 +1764,6 @@
 			"version": "10.0.23",
 			"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.23.tgz",
 			"integrity": "sha512-gNr04eqBQ2iYUx8wFLZDfm3N8/QUOODu/ReDXa693uyQGy2OqA+IhPJk+kA7id8aOfwAsMuvZ0pJImEXXKtaVQ==",
-			"dev": true,
 			"requires": {
 				"@emotion/styled-base": "^10.0.23",
 				"babel-plugin-emotion": "^10.0.23"
@@ -1779,7 +1773,6 @@
 			"version": "10.0.24",
 			"resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.24.tgz",
 			"integrity": "sha512-AnBImerf0h4dGAJVo0p0VE8KoAns71F28ErGFK474zbNAHX6yqSWQUasb+1jvg/VPwZjCp19+tAr6oOB0pwmLQ==",
-			"dev": true,
 			"requires": {
 				"@babel/runtime": "^7.5.5",
 				"@emotion/is-prop-valid": "0.8.5",
@@ -1791,7 +1784,6 @@
 					"version": "7.7.2",
 					"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz",
 					"integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==",
-					"dev": true,
 					"requires": {
 						"regenerator-runtime": "^0.13.2"
 					}
@@ -1800,7 +1792,6 @@
 					"version": "0.11.14",
 					"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.14.tgz",
 					"integrity": "sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==",
-					"dev": true,
 					"requires": {
 						"@emotion/hash": "0.7.3",
 						"@emotion/memoize": "0.7.3",
@@ -7405,108 +7396,6 @@
 				"rememo": "^3.0.0",
 				"tinycolor2": "^1.4.1",
 				"uuid": "^3.3.2"
-			},
-			"dependencies": {
-				"@emotion/core": {
-					"version": "10.0.22",
-					"resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.22.tgz",
-					"integrity": "sha512-7eoP6KQVUyOjAkE6y4fdlxbZRA4ILs7dqkkm6oZUJmihtHv0UBq98VgPirq9T8F9K2gKu0J/au/TpKryKMinaA==",
-					"requires": {
-						"@babel/runtime": "^7.5.5",
-						"@emotion/cache": "^10.0.17",
-						"@emotion/css": "^10.0.22",
-						"@emotion/serialize": "^0.11.12",
-						"@emotion/sheet": "0.9.3",
-						"@emotion/utils": "0.11.2"
-					},
-					"dependencies": {
-						"@babel/runtime": {
-							"version": "7.7.2",
-							"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz",
-							"integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==",
-							"requires": {
-								"regenerator-runtime": "^0.13.2"
-							}
-						}
-					}
-				},
-				"@emotion/css": {
-					"version": "10.0.22",
-					"resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.22.tgz",
-					"integrity": "sha512-8phfa5mC/OadBTmGpMpwykIVH0gFCbUoO684LUkyixPq4F1Wwri7fK5Xlm8lURNBrd2TuvTbPUGxFsGxF9UacA==",
-					"requires": {
-						"@emotion/serialize": "^0.11.12",
-						"@emotion/utils": "0.11.2",
-						"babel-plugin-emotion": "^10.0.22"
-					}
-				},
-				"@emotion/is-prop-valid": {
-					"version": "0.8.5",
-					"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz",
-					"integrity": "sha512-6ZODuZSFofbxSbcxwsFz+6ioPjb0ISJRRPLZ+WIbjcU2IMU0Io+RGQjjaTgOvNQl007KICBm7zXQaYQEC1r6Bg==",
-					"requires": {
-						"@emotion/memoize": "0.7.3"
-					}
-				},
-				"@emotion/serialize": {
-					"version": "0.11.14",
-					"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.14.tgz",
-					"integrity": "sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==",
-					"requires": {
-						"@emotion/hash": "0.7.3",
-						"@emotion/memoize": "0.7.3",
-						"@emotion/unitless": "0.7.4",
-						"@emotion/utils": "0.11.2",
-						"csstype": "^2.5.7"
-					}
-				},
-				"@emotion/styled": {
-					"version": "10.0.23",
-					"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.23.tgz",
-					"integrity": "sha512-gNr04eqBQ2iYUx8wFLZDfm3N8/QUOODu/ReDXa693uyQGy2OqA+IhPJk+kA7id8aOfwAsMuvZ0pJImEXXKtaVQ==",
-					"requires": {
-						"@emotion/styled-base": "^10.0.23",
-						"babel-plugin-emotion": "^10.0.23"
-					}
-				},
-				"@emotion/styled-base": {
-					"version": "10.0.24",
-					"resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.24.tgz",
-					"integrity": "sha512-AnBImerf0h4dGAJVo0p0VE8KoAns71F28ErGFK474zbNAHX6yqSWQUasb+1jvg/VPwZjCp19+tAr6oOB0pwmLQ==",
-					"requires": {
-						"@babel/runtime": "^7.5.5",
-						"@emotion/is-prop-valid": "0.8.5",
-						"@emotion/serialize": "^0.11.14",
-						"@emotion/utils": "0.11.2"
-					},
-					"dependencies": {
-						"@babel/runtime": {
-							"version": "7.7.2",
-							"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz",
-							"integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==",
-							"requires": {
-								"regenerator-runtime": "^0.13.2"
-							}
-						}
-					}
-				},
-				"babel-plugin-emotion": {
-					"version": "10.0.23",
-					"resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.23.tgz",
-					"integrity": "sha512-1JiCyXU0t5S2xCbItejCduLGGcKmF3POT0Ujbexog2MI4IlRcIn/kWjkYwCUZlxpON0O5FC635yPl/3slr7cKQ==",
-					"requires": {
-						"@babel/helper-module-imports": "^7.0.0",
-						"@emotion/hash": "0.7.3",
-						"@emotion/memoize": "0.7.3",
-						"@emotion/serialize": "^0.11.14",
-						"babel-plugin-macros": "^2.0.0",
-						"babel-plugin-syntax-jsx": "^6.18.0",
-						"convert-source-map": "^1.5.0",
-						"escape-string-regexp": "^1.0.5",
-						"find-root": "^1.1.0",
-						"source-map": "^0.5.7"
-					}
-				}
 			}
 		},
 		"@wordpress/compose": {
@@ -9457,7 +9346,6 @@
 			"version": "10.0.23",
 			"resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.23.tgz",
 			"integrity": "sha512-1JiCyXU0t5S2xCbItejCduLGGcKmF3POT0Ujbexog2MI4IlRcIn/kWjkYwCUZlxpON0O5FC635yPl/3slr7cKQ==",
-			"dev": true,
 			"requires": {
 				"@babel/helper-module-imports": "^7.0.0",
 				"@emotion/hash": "0.7.3",
@@ -9475,7 +9363,6 @@
 					"version": "0.11.14",
 					"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.14.tgz",
 					"integrity": "sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==",
-					"dev": true,
 					"requires": {
 						"@emotion/hash": "0.7.3",
 						"@emotion/memoize": "0.7.3",

From 66b442154c19b4dd32cbecc210bfc2206ce5469f Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 13 Nov 2019 11:21:07 +0100
Subject: [PATCH 36/37] Fixed babelrc

Removed the local babelrc from components.
Added babel-emotion to global storybook/.babelrc
---
 packages/components/storybook/.babelrc | 4 ----
 storybook/.babelrc                     | 1 +
 2 files changed, 1 insertion(+), 4 deletions(-)
 delete mode 100644 packages/components/storybook/.babelrc

diff --git a/packages/components/storybook/.babelrc b/packages/components/storybook/.babelrc
deleted file mode 100644
index 74d1dc550024d8..00000000000000
--- a/packages/components/storybook/.babelrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-	"presets": [ "@wordpress/babel-preset-default" ],
-	"plugins": [ "babel-plugin-emotion" ]
-}
diff --git a/storybook/.babelrc b/storybook/.babelrc
index c97694a2f21a53..d120dfe8528e13 100644
--- a/storybook/.babelrc
+++ b/storybook/.babelrc
@@ -1,6 +1,7 @@
 {
 	"presets": [ "@wordpress/babel-preset-default" ],
 	"plugins": [
+    "babel-plugin-emotion",
 		"babel-plugin-inline-json-import"
 	]
 }

From dbe16a2fa40deb854e1ee423a7c43e16f6e07d13 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 13 Nov 2019 11:25:43 +0100
Subject: [PATCH 37/37] Fix whitespacing (use tabs) for babelrc

---
 storybook/.babelrc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/storybook/.babelrc b/storybook/.babelrc
index d120dfe8528e13..fe77bd84598748 100644
--- a/storybook/.babelrc
+++ b/storybook/.babelrc
@@ -1,7 +1,7 @@
 {
 	"presets": [ "@wordpress/babel-preset-default" ],
 	"plugins": [
-    "babel-plugin-emotion",
+		"babel-plugin-emotion",
 		"babel-plugin-inline-json-import"
 	]
 }