feat: Typography component shows text styles and not just font sizes

BREAKING CHANGE: `FontSizeSwatch` is now `TextStyleSwatch` and accepts text style objects as `value`.

Author: Andrey Okonetchnikov

src/components/FontSizeSwatch.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { css } from "theme-ui";
+import { valuePropType } from "../propTypes";
+
+/**
+ * A swatch to render a `textStyle` variant. Provide the sample text as `children`.
+ * @param value
+ * @param componentCSS
+ * @param rest
+ * @return React.Element
+ * @constructor
+ */
+const TextStyleSwatch = ({ value, css: componentCSS, ...rest }) => (
+	<p
+		css={css({
+			alignSelf: "center",
+			m: 0,
+			...value,
+			...componentCSS
+		})}
+		{...rest}
+	/>
+);
+
+TextStyleSwatch.propTypes = {
+	...valuePropType
+};
+
+/** @component */
+export default TextStyleSwatch;

src/components/FontSizeSwatch.md

@@ -0,0 +1,7 @@
+```jsx harmony
+import theme from "../theme";
+
+<TextStyleSwatch token={"heading"} value={theme.textStyles.heading}>
+  Aa
+</TextStyleSwatch>;
+```

src/components/TextStyleSwatch.jsx

@@ -1,37 +1,33 @@
 import React from "react";
-import { ThemeProvider, css } from "theme-ui";
+import { ThemeProvider } from "theme-ui";
 import Stack from "stack-styled/emotion/Stack.js";
-import {
-	FontSizeSwatch,
-	Swatch,
-	Swatches,
-	SwatchToken,
-	SwatchValue
-} from "../index";
+import { Swatch, Swatches, SwatchToken, TextStyleSwatch } from "../";
 
+/**
+ * Typography component showcases all available text styles defined in `theme.textStyles`
+ * object of [styled-system theme](https://styled-system.com/table#variants).
+ * @param theme
+ * @return React.Element
+ * @constructor
+ */
 export default function Typography({ theme }) {
 	return (
 		<ThemeProvider theme={theme}>
 			<Stack gap={5}>
-				<Swatches theme={theme} items={theme.fontSizes}>
+				<Swatches theme={theme} items={theme.textStyles || {}}>
 					{(token, value) => (
 						<Swatch token={token} value={value} key={token}>
 							<Stack gap={2}>
 								<div>
-									<SwatchToken css={{ display: "inline-block" }}>
+									<SwatchToken
+										css={{ display: "inline-block", fontFamily: "monospace" }}
+									>
 										{token}
-									</SwatchToken>{" "}
-									<SwatchValue css={{ display: "inline-block" }}>
-										({value})
-									</SwatchValue>
+									</SwatchToken>
 								</div>
-								<FontSizeSwatch
-									token={token}
-									value={value}
-									css={css({ color: "text" })}
-								>
+								<TextStyleSwatch token={token} value={value}>
 									The quick brown fox jumps over the lazy dog
-								</FontSizeSwatch>
+								</TextStyleSwatch>
 							</Stack>
 						</Swatch>
 					)}

src/components/TextStyleSwatch.md

@@ -3,3 +3,17 @@ import theme from "../theme";
 
 <Typography theme={theme} />;
 ```
+
+Starting from v5 of styled-system, you can co-locate variants inside your components.
+
+Consider this is your `Text` component that defines text styles:
+
+```js { "file": "../../examples/Text.js" }
+```
+
+```jsx harmony
+import theme from "../theme";
+import { textStyles } from "../examples/Text";
+
+<Typography theme={{ ...theme, textStyles }} />;
+```

src/components/Typography.jsx

@@ -0,0 +1,34 @@
+import styled from "@emotion/styled";
+import { css } from "@styled-system/css";
+import { typography, variant, compose } from "styled-system";
+
+export const textStyles = {
+	body: {
+		fontFamily: "body",
+		fontSize: "md",
+		fontWeight: "normal",
+		color: "text"
+	},
+	heading: {
+		fontFamily: "heading",
+		fontSize: "xl",
+		fontWeight: "bold",
+		color: "secondary"
+	}
+};
+
+const Text = styled.p(
+	css({
+		m: 0,
+		lineHeight: 1.5
+	}),
+	compose(
+		variant({
+			prop: "textStyle",
+			variants: textStyles
+		}),
+		typography
+	)
+);
+
+export default Text;

src/components/Typography.md

@@ -3,7 +3,7 @@ export { default as Swatch } from "./components/Swatch";
 export { default as SwatchToken } from "./components/SwatchToken";
 export { default as SwatchValue } from "./components/SwatchValue";
 export { default as ColorSwatch } from "./components/ColorSwatch";
-export { default as FontSizeSwatch } from "./components/FontSizeSwatch";
+export { default as TextStyleSwatch } from "./components/TextStyleSwatch";
 export { default as PaletteSwatch } from "./components/PaletteSwatch";
 export { default as SpacingSwatch } from "./components/SpacingSwatch";
 export { default as Colors } from "./components/Colors";

src/examples/Text.js

@@ -25,6 +25,18 @@ export default {
 		heading: '"Avenir Next", sans-serif',
 		monospace: "Menlo, monospace"
 	},
+	textStyles: {
+		body: {
+			fontFamily: "body",
+			fontSize: "md",
+			color: "text"
+		},
+		heading: {
+			fontSize: "xl",
+			fontFamily: "heading",
+			color: "secondary"
+		}
+	},
 	space: [
 		0,
 		"0.125rem", // 2px

src/index.js

@@ -1,8 +1,10 @@
+const fs = require("fs");
 const path = require("path");
 const pkg = require("./package.json");
 
 module.exports = {
 	title: pkg.name,
+	serverPort: 6061,
 	styleguideDir: path.join(__dirname, "docs"),
 	getComponentPathLine(componentPath) {
 		const name = path.basename(componentPath, ".jsx");
@@ -28,5 +30,24 @@ module.exports = {
 	],
 	ribbon: {
 		url: "https://github.com/component-driven/react-design-tokens"
+	},
+	updateExample(props, exampleFilePath) {
+		// props.settings are passed by any fenced code block, in this case
+		const { settings, lang } = props;
+		// "../mySourceCode.js"
+		if (typeof settings.file === "string") {
+			// "absolute path to mySourceCode.js"
+			const filepath = path.resolve(exampleFilePath, settings.file);
+			// displays the block as static code
+			settings.static = true;
+			// no longer needed
+			delete settings.file;
+			return {
+				content: fs.readFileSync(filepath, "utf8"),
+				settings,
+				lang
+			};
+		}
+		return props;
 	}
 };