-
- {name}
-
- {weights &&
- Object.entries(weights).map(([name, fontWeight]) => (
-
-
- AaBbCc
-
-
- ABCDEFGHIJKLMNOPQRSTUVWXYZ
-
- abcdefghijklmnopqrstuvwxyz
-
- 1234567890(,.;:?!$&*)
-
-
-
{name}
-
- Weight:
- {fontWeight}
-
-
- Style:
- {fontFamily}
-
-
+ {Object.entries(args.fonts as FontOptions).map(([name, fontFamily]) => (
+
+
+ {name}
+
+ {Object.entries(args.weights as WeightOptions).map(
+ ([name, fontWeight]) => (
+
+
+ AaBbCc
+
+
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ
+
+ abcdefghijklmnopqrstuvwxyz
+
+ 1234567890(,.;:?!$&*)
+
+
+
{name}
+
+ Weight:
+ {fontWeight}
- ))}
-
- ))}
+
+ Style:
+ {fontFamily}
+
+
+
+ ),
+ )}
+
+ ))}
);
},
- args: {},
+ args: {
+ fonts,
+ weights,
+ },
};
export default meta;
diff --git a/source/01-global/01-typography/line-height.stories.tsx b/source/01-global/01-typography/line-height.stories.tsx
index e89de6d8..bbbcda93 100644
--- a/source/01-global/01-typography/line-height.stories.tsx
+++ b/source/01-global/01-typography/line-height.stories.tsx
@@ -2,7 +2,6 @@ import { Meta, StoryObj } from '@storybook/react';
import { Property } from 'csstype';
import getCssVariables from '../../06-utility/storybook/getCssVariables';
import styles from './line-height.module.css';
-import { useEffect, useState } from 'react';
const meta: Meta = {
title: 'Global/Typography/Line Height',
@@ -16,82 +15,64 @@ interface LineHeightOptions {
[name: string]: Property.LineHeight;
}
-const LineHeight: StoryObj = {
- render: function Render() {
- const [fonts, setFonts] = useState
(undefined);
- const [lineHeights, setLineHeights] = useState<
- LineHeightOptions | undefined
- >(undefined);
+interface LineHeightArgs {
+ fonts: FontOptions;
+ lineHeights: LineHeightOptions;
+}
- useEffect(() => {
- const allVars = getCssVariables();
+const allVars = getCssVariables();
- const fonts = allVars.reduce((allFonts, [key, value]) => {
- if (key.indexOf('--font-family') === 0) {
- const name =
- key.substring(14).charAt(0).toUpperCase() +
- key.substring(14).slice(1);
- allFonts[name] = value;
- }
- return allFonts;
- }, {} as FontOptions);
- setFonts(fonts);
+const fonts = allVars.reduce((allFonts, [key, value]) => {
+ if (key.indexOf('--font-family') === 0) {
+ const name =
+ key.substring(14).charAt(0).toUpperCase() + key.substring(14).slice(1);
+ allFonts[name] = value;
+ }
+ return allFonts;
+}, {} as FontOptions);
- const lineHeights = allVars.reduce((allLineHeights, [key, value]) => {
- if (key.indexOf('--line-height') === 0) {
- const name = key.substring(14);
- allLineHeights[name] = value;
- }
- return allLineHeights;
- }, {} as LineHeightOptions);
- setLineHeights(lineHeights);
- }, []);
+const lineHeights = allVars.reduce((allLineHeights, [key, value]) => {
+ if (key.indexOf('--line-height') === 0) {
+ const name = key.substring(14);
+ allLineHeights[name] = value;
+ }
+ return allLineHeights;
+}, {} as LineHeightOptions);
+const LineHeight: StoryObj = {
+ render: args => {
return (
<>
- {fonts &&
- Object.entries(fonts)
- .sort((fontA, fontB) => {
- if (fontA[0].toLowerCase().includes('primary')) {
- return -1;
- }
- if (fontB[0].toLowerCase().includes('primary')) {
- return 1;
- }
- if (fontA[0].toLowerCase().includes('secondary')) {
- return -1;
- }
- if (fontB[0].toLowerCase().includes('secondary')) {
- return 1;
- }
- return 0;
- })
- .map(([name, fontFamily]) => (
-
-
{name}
-
- {lineHeights &&
- Object.entries(lineHeights).map(([name, lineHeight]) => (
-
-
{name}
-
- The line-height for this text is{' '}
- {lineHeight} times the font-size.
- It’s worth remembering that line height is affected by
- the x-height. Much like how different typefaces can
- appear to be different heights despite being set at
- the same font size, so too can line height appear to
- be more open or tighter, depending on each individual
- font.
-
-
- ))}
-
-
+
{name}
+
+ {Object.entries(args.lineHeights as LineHeightOptions).map(
+ ([name, lineHeight]) => (
+
+
{name}
+
+ The line-height for this text is{' '}
+ {lineHeight} times the font-size. It’s
+ worth remembering that line height is affected by the
+ x-height. Much like how different typefaces can appear to
+ be different heights despite being set at the same font
+ size, so too can line height appear to be more open or
+ tighter, depending on each individual font.
+
+
+ ),
+ )}
+
+