diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 58b97dd1..e69de29b 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,3 +0,0 @@ - - - diff --git a/.storybook/preview.js b/.storybook/preview.js index f40fd995..0f512f38 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,6 +1,7 @@ import '../source/00-config/index.css'; import '../source/01-global/index.css'; import '../source/06-utility/index.css'; +import SourceSansFontStyle from '../source/01-global/fonts/source-sans'; const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, @@ -66,7 +67,14 @@ const withWritingDirection = (Story, context) => { ); }; -const decorators = [withWritingDirection]; +const withFont = Story => ( + <> + + + +); + +const decorators = [withWritingDirection, withFont]; const preview = { parameters, diff --git a/pages/_app.tsx b/pages/_app.tsx index 6556115f..4ba4c2bc 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -13,6 +13,7 @@ import SiteName from '../source/03-components/SiteName/SiteName'; import Skiplink from '../source/03-components/Skiplink/Skiplink'; import addBasePath from '../source/06-utility/addBasePath'; import '../source/06-utility/index.css'; +import SourceSansFontStyle from '../source/01-global/fonts/source-sans'; function MyApp({ Component, pageProps }: AppProps) { return ( @@ -20,6 +21,7 @@ function MyApp({ Component, pageProps }: AppProps) { +
diff --git a/source/00-config/vars/typography.css b/source/00-config/vars/typography.css index cc26913e..595108eb 100644 --- a/source/00-config/vars/typography.css +++ b/source/00-config/vars/typography.css @@ -1,5 +1,8 @@ :root { - --font-family-primary: 'Source Sans Pro', Arial, sans-serif; + /* + * Uncomment if you are NOT using Next's font component. + * --font-family-primary: 'Source Sans Pro', Arial, sans-serif; + */ --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', Droid Sans, sans-serif; --font-family-monospace: Menlo, Consolas, 'Lucida Console', 'Liberation Mono', diff --git a/source/01-global/01-typography/fonts.stories.tsx b/source/01-global/01-typography/fonts.stories.tsx index d73ee645..a36792af 100644 --- a/source/01-global/01-typography/fonts.stories.tsx +++ b/source/01-global/01-typography/fonts.stories.tsx @@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { Property } from 'csstype'; import getCssVariables from '../../06-utility/storybook/getCssVariables'; import styles from './fonts.module.css'; +import { useEffect, useState } from 'react'; const meta: Meta = { title: 'Global/Typography/Fonts', @@ -15,94 +16,114 @@ interface WeightOptions { [name: string]: Property.FontWeight; } -interface FontsArgs { - fonts: FontOptions; - weights: WeightOptions; -} +const Fonts: StoryObj = { + render: function Render() { + const [fonts, setFonts] = useState(undefined); + const [weights, setWeights] = useState( + undefined, + ); -const allVars = getCssVariables(); + useEffect(() => { + 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); + 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 weights = allVars.reduce((allWeights, [key, value]) => { - if (key.indexOf('--font-weight') === 0) { - const name = key.substring(14); - allWeights[name] = value; - } - return allWeights; -}, {} as WeightOptions); + const weights = allVars.reduce((allWeights, [key, value]) => { + if (key.indexOf('--font-weight') === 0) { + const name = key.substring(14); + allWeights[name] = value; + } + return allWeights; + }, {} as WeightOptions); + setWeights(weights); + }, []); -const Fonts: StoryObj = { - render: args => { return ( <> - {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} + {fonts && + Object.entries(fonts) + .sort((fontA, fontB) => { + // Sort fonts so that Primary and Secondary (if used) appear at the + // top of the list. + 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} +

+ {weights && + Object.entries(weights).map(([name, fontWeight]) => ( +
+
+ AaBbCc +
+
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ +
+ abcdefghijklmnopqrstuvwxyz +
+ 1234567890(,.;:?!$&*) +
+
+
{name}
+
+ Weight: + {fontWeight} +
+
+ Style: + {fontFamily} +
+
-
- Style: - {fontFamily} -
-
-
- ), - )} -
- ))} + ))} +
+ ))} ); }, - args: { - fonts, - weights, - }, + args: {}, }; 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 bbbcda93..e89de6d8 100644 --- a/source/01-global/01-typography/line-height.stories.tsx +++ b/source/01-global/01-typography/line-height.stories.tsx @@ -2,6 +2,7 @@ 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', @@ -15,64 +16,82 @@ interface LineHeightOptions { [name: string]: Property.LineHeight; } -interface LineHeightArgs { - fonts: FontOptions; - lineHeights: LineHeightOptions; -} +const LineHeight: StoryObj = { + render: function Render() { + const [fonts, setFonts] = useState(undefined); + const [lineHeights, setLineHeights] = useState< + LineHeightOptions | undefined + >(undefined); -const allVars = getCssVariables(); + useEffect(() => { + 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); + 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 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 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 LineHeight: StoryObj = { - render: args => { return ( <> - {Object.entries(args.fonts as FontOptions).map(([name, fontFamily]) => ( -
-

{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. -
-
- ), - )} -
-
- ))} + {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. +
+
+ ))} +
+
+ ))} ); }, - args: { - fonts, - lineHeights, - }, }; export default meta; diff --git a/source/01-global/fonts/source-sans.tsx b/source/01-global/fonts/source-sans.tsx new file mode 100644 index 00000000..12a3f979 --- /dev/null +++ b/source/01-global/fonts/source-sans.tsx @@ -0,0 +1,26 @@ +import { Source_Sans_3 as SourceSansPro } from 'next/font/google'; + +const sourceSansPro = SourceSansPro({ + display: 'swap', + subsets: ['latin'], + weight: 'variable', +}); + +function SourceSansFontStyle() { + return ( + + ); +} + +export default SourceSansFontStyle; +export { sourceSansPro }; diff --git a/source/06-utility/storybook/getCssVariables.ts b/source/06-utility/storybook/getCssVariables.ts index c8ee81d8..ba67a970 100644 --- a/source/06-utility/storybook/getCssVariables.ts +++ b/source/06-utility/storybook/getCssVariables.ts @@ -7,7 +7,7 @@ function getCssVariables(): string[][] { .map(sheet => { const rules: CSSRulesWithLayers[] = Array.from(sheet.cssRules); return rules.map(r => { - if ('cssRules' in r) { + if ('cssRules' in r && r.cssRules.length > 0) { return Array.from(r.cssRules); } return r;