From 3d6e725dee82a947e1eca132c48fe69dfc53c135 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Thu, 7 Mar 2024 18:06:45 +0000 Subject: [PATCH] Add typography presets and examples to Storybook --- .../src/typography/storybookTypeSpecimen.tsx | 37 +++ .../storybookTypographyRenderers.tsx | 122 --------- .../src/typography/typography.stories.mdx | 249 ++++-------------- 3 files changed, 85 insertions(+), 323 deletions(-) create mode 100644 libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx delete mode 100644 libs/@guardian/source-foundations/src/typography/storybookTypographyRenderers.tsx diff --git a/libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx b/libs/@guardian/source-foundations/src/typography/storybookTypeSpecimen.tsx new file mode 100644 index 0000000000..c207fe48bc --- /dev/null +++ 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 = () => ( + +); diff --git a/libs/@guardian/source-foundations/src/typography/storybookTypographyRenderers.tsx b/libs/@guardian/source-foundations/src/typography/storybookTypographyRenderers.tsx deleted file mode 100644 index 9794d95c7a..0000000000 --- a/libs/@guardian/source-foundations/src/typography/storybookTypographyRenderers.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import { - bodyObjectStyles, - fontWeights, - headlineObjectStyles, - textSansObjectStyles, -} from '../index'; -import type { Category, FontScaleFunction, FontWeight } from './types'; - -type FontFunctions = { - [key in Category]: FontScaleFunction; -}; - -interface FontStylesRendererProps { - fontName: string; - fontStyles: FontFunctions; -} - -export const FontStylesRenderer = ({ - fontName, - fontStyles, -}: FontStylesRendererProps) => { - return ( - - ); -}; - -interface LineHeightRendererProps { - getFontStyles: FontScaleFunction; -} - -export const LineHeightRenderer = ({ - getFontStyles, -}: LineHeightRendererProps) => { - const fontStyles = getFontStyles({ unit: 'px' }); - return ( -

- The quick brown fox jumps over the lazy dogs -

- ); -}; - -export const FontWeightRenderer = () => ( - -); - -export const ItalicsRenderer = () => ( - -); diff --git a/libs/@guardian/source-foundations/src/typography/typography.stories.mdx b/libs/@guardian/source-foundations/src/typography/typography.stories.mdx index a4d1843bd0..db17c09966 100644 --- a/libs/@guardian/source-foundations/src/typography/typography.stories.mdx +++ b/libs/@guardian/source-foundations/src/typography/typography.stories.mdx @@ -1,16 +1,5 @@ import { Meta, Canvas, Story } from '@storybook/addon-docs'; -import { - headlineObjectStyles, - bodyObjectStyles, - textSansObjectStyles, - titlepieceObjectStyles, -} from '@guardian/source-foundations'; -import { - FontStylesRenderer, - LineHeightRenderer, - FontWeightRenderer, - ItalicsRenderer, -} from './storybookTypographyRenderers'; +import { TypographyPresets } from './storybookTypeSpecimen'; - - - - +The Guardian has four bespoke typefaces, which were created for different +purposes. When used effectively, they create contrast and alter the tone in +which text is read. -#### Line height +### Where do we use web typography presets? -The default for headline is `tight`. This maps to `1.15 (115%)`. +Any content in a web browser or a webview in the app uses web typography +presets. - - - - - +- _Browser_ — All [theguardian.com](https://www.theguardian.com) content + (front and article pages) and supporter revenue pages. +- _App webview_ — Article pages, sign-in and registration pages -### Body +#### Guardian Headline -```css -font-family: 'GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif'; -``` +Use for headlines, headings and any short form text like pull quotes, bylines +and titles. - - - - - +#### Kicker — Guardian Headline -#### Line height +Use for a kicker in the fronts card. -The default for body is `loose`. This maps to `1.40 (140%)`. +#### Guardian Text Sans -This meets the [WCAG 2.1 AAA success criterion for visual presentation](https://www.w3.org/TR/WCAG21/#visual-presentation). +Use for interactive page elements like buttons and text input fields and for +meta information like datelines, image captions and data visualisations. - - - - - +_Note:_ Text Sans is used across the board on paid content templates to help +differentiate from editorial content. -### Text sans - -```css -font-family: 'GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif'; -``` - - - - - - - -#### Line height - -The default for text-sans is `regular`. This maps to `1.3 (130%)`. - - - - - - - -### Titlepiece - -```css -font-family: 'GT Guardian Titlepiece, Georgia, serif'; -``` - - - - - - - -#### Line height - -The default for titlepiece is `tight`. This maps to `1.15 (115%)`. - - - - - - - -### Options - -Each method may receive an `options` object. Missing options are merged with sensible defaults for each font family. - -#### Line height - -The available options for line height are documented in the table below. - - - - - - - - - - - - - - - - - - -
Alias in SourceLine height
loose140% (1.4)
regular130% (1.30)
tight115% (1.15)
- -We calculate the final line height based on the font size using the following formula: - -```ts -// line-height is defined as a unitless value, so we multiply -// by the element's font-size in px to get the px value -const finalLineHeight = `${lineHeight * fontSizeInPx}px`; -``` +#### Guardian Titlepiece -And a worked example: - -```ts -const lineHeight = - 1.15 * // line-height: tight (unitless) - 30; // font-size: small (px) - -// lineHeight === 34.5px -``` - -#### Font weight - -```tsx -headline.medium({ fontWeight: 'bold' }); -``` - - - - - - - -The default for body and textSans is `regular`. The `light` and `medium` font weights are not available for these fonts. - -The default for headline is `medium`. The `regular` font-weight is not available for this font. - -The default and only font-weight for titlepiece is `bold`. - -#### Font style - -```tsx -headline.medium({ fontStyle: 'italic' }); -``` - -`normal` (default) is available for all fonts. - -`italic` is available for the following fonts: - - - - - - - -#### Unit - -```tsx -headline.medium({ unit: 'px' }); -``` +Use for impact. Ideal for marketing messages, page headers and numerals. Use +sparingly and at large sizes only. -Specifies units for the font-size and line-height values. +_Note:_ this font is not available on [theguardian.com](https://theguardian.com) -By default, font-size is expressed in `rem`, and line-height is expressed as a [unitless value](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#values). +### Specimen -You can override this behaviour by setting the `unit` option to `px`. As a result, both font-size and line-height will be expressed in `px` values. +