Components: Add Card Component (#17963)

* Add styled-components, hex-rgb, and storybook knobs

* Add styled-components and hex-rgb to wordpress/components dependencies

* Implement Storybook knobs addon

* 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.

* 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.

* Export the new Card component

* Improve default, context, and prop merging for Card sub-components

* 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.

* Fix typos in card test

* Refactor Card stories

And fix border style rendering for Header and Footer

* Add Card Header to export

* Add README content for Card component

* Add updated manifest-devhub.json autogenerated doc file

* Update Card README for context overrides

* Remove unused fragment from Card stories

* Update size prop values for Card components

Changed values like `sm` and `md` to `small` and `medium`.

* Fix typo for Card docs

From `contet` -> `context`.

* Fix size values in storybook knob props

* Simplify implementation of CardContext.Provider

* Remove duplicate addDecorator withKnobs

Occurred during a merge with `master`

* Remove prettier comment + fix size values in readme files

* Change `hex-rgb` dependency from `4.1.0` to `^4.1.0`

* Revert "Change `hex-rgb` dependency from `4.1.0` to `^4.1.0`"

This reverts commit 9876eba.

* Change `hex-rgb` dependency from `4.1.0` to `^4.1.0`

* Rename __utils.js file to _utils.js

* Rename colors.values.js -> colors-values.js (hyphen)

* Refactor Card sub-components to use BEM classNames

* Fix typo + description of size + variant in sub-component documentation

* Add story example for horizontally aligned media

* Use HorizontalRule primitive in CardDivider

* 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.

* 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.

* Change first-child -> first-of-type to resolve emotion warnings

* Fix @emotion dependencies for root package-lock.json

* Update dependencies in package-lock.json

* Fixed babelrc

Removed the local babelrc from components.
Added babel-emotion to global storybook/.babelrc

* Fix whitespacing (use tabs) for babelrc

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' ],
 	};
 };

docs/manifest-devhub.json

@@ -605,6 +605,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",