added a Text component (#18495)

* added a Text component * avoid exporting and documenting the mixin * fix storybook title * use kebab-case for file naming * added a _default story with all variants in the one story * update styles * update snapshots for react-native * git and case-sensitive renames are the worst on macos * git and case-sensitive renames are the worst on macos * rename tests in kebab-case * renamed snapshot files * d'oh forgot to fix the casing ina file * update the readme to include when to use the component * removed eslint disable rule * update native snapshots * delete unnecessary tests ready for visual regression testing * update storyshots * commit updates to generated file * renamed Text to __experimentalText * remove unnecessary files * Update formatting of typings Co-Authored-By: Grzegorz (Greg) Ziółkowski <[email protected]> * fix formatting * Mark stories as experimental Co-Authored-By: Grzegorz (Greg) Ziółkowski <[email protected]> * updated story snapshots Co-authored-by: Grzegorz (Greg) Ziółkowski <[email protected]>
WordPress · Jan 7, 2020 · 023c43e · 023c43e
1 parent 40cf95c
commit 023c43e
Show file tree

Hide file tree

Showing 16 changed files with 1,436 additions and 52 deletions.
diff --git a/docs/manifest-devhub.json b/docs/manifest-devhub.json
@@ -983,6 +983,12 @@
 		"markdown_source": "../packages/components/src/text-highlight/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Text",
+		"slug": "text",
+		"markdown_source": "../packages/components/src/text/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "TextareaControl",
 		"slug": "textarea-control",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -126,6 +126,7 @@
 		"husky": "3.0.5",
 		"inquirer": "6.3.1",
 		"is-equal-shallow": "0.1.3",
+		"jest-emotion": "10.0.17",
 		"jest-junit": "6.4.0",
 		"jest-serializer-enzyme": "1.0.0",
 		"jsdom": "11.12.0",

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -23,8 +23,10 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@babel/runtime": "^7.4.4",
-		"@emotion/core": "10.0.22",
-		"@emotion/styled": "10.0.23",
+		"@emotion/core": "^10.0.22",
+		"@emotion/css": "^10.0.22",
+		"@emotion/native": "^10.0.22",
+		"@emotion/styled": "^10.0.23",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/deprecated": "file:../deprecated",

diff --git a/packages/components/src/index.js b/packages/components/src/index.js
@@ -104,3 +104,4 @@ export { default as withNotices } from './higher-order/with-notices';
 export {
 	default as withSpokenMessages,
 } from './higher-order/with-spoken-messages';
+export * from './text';
diff --git a/packages/components/src/text/README.md b/packages/components/src/text/README.md
@@ -0,0 +1,18 @@
+# Text
+
+A text component for styling text.
+
+## Usage
+
+```jsx
+import {Text} from '@wordpress/components';
+
+const HeroPanel = () => (
+	<>
+		<Text variant="title.large" as="h1">Hello World!</Text>
+		<Text variant="body">Greetings to you!</Text>
+	</>
+);
+```
+
+> For most use-cases you can use this component instead of a `h1`, `h2`, `h3`, `h4`, `h5`, `h6` or `p`.
diff --git a/packages/components/src/text/font-family.js b/packages/components/src/text/font-family.js
@@ -0,0 +1,2 @@
+export const fontFamily = `font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;`;
diff --git a/packages/components/src/text/font-family.native.js b/packages/components/src/text/font-family.native.js
@@ -0,0 +1 @@
+export const fontFamily = '';
diff --git a/packages/components/src/text/index.js b/packages/components/src/text/index.js
@@ -0,0 +1 @@
+export * from './text.styles';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const fontFamily = `font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;`;