Add typography presets and examples to Storybook

guardian · Mar 7, 2024 · 3d6e725 · 3d6e725
1 parent 4630706
commit 3d6e725
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 323 deletions.
diff --git a/libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx b/libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx
@@ -0,0 +1,37 @@
+import { css } from '@emotion/react';
+import * as presets from './presets';
+import { space } from '../space/space';
+import { palette } from '../colour/palette';
+
+const listCss = css`
+	list-style: none;
+	padding: 0;
+	li + li {
+		margin-top: ${space[4]}px;
+		padding-top: ${space[4]}px;
+		border-top: 1px solid ${palette.neutral[86]};
+	}
+`;
+
+export const TypographyPresets = () => (
+	<ul css={listCss}>
+		{Object.entries(presets).map(([preset, styles]) => (
+			<li>
+				<span
+					css={css`
+						display: block;
+					`}
+				>
+					{preset}
+				</span>
+				<span
+					css={css`
+						${styles}
+					`}
+				>
+					For facts' sake
+				</span>
+			</li>
+		))}
+	</ul>
+);
diff --git a/libs/@guardian/source-foundations/src/typography/storybookTypographyRenderers.tsx b/libs/@guardian/source-foundations/src/typography/storybookTypographyRenderers.tsx