Skip to content

Commit

Permalink
Update stories to show correct examples
Browse files Browse the repository at this point in the history
  • Loading branch information
jamesmockett committed Apr 2, 2024
1 parent b33fa79 commit 52eb7ae
Showing 1 changed file with 11 additions and 43 deletions.
54 changes: 11 additions & 43 deletions libs/@guardian/source-foundations/src/typography/typography.mdx
Original file line number Diff line number Diff line change
@@ -1,16 +1,4 @@
import { Meta, Canvas, Story } from '@storybook/blocks';
import {
headlineObjectStyles,
bodyObjectStyles,
textSansObjectStyles,
titlepieceObjectStyles,
} from '@guardian/source-foundations';
import {
FontStylesRenderer,
LineHeightRenderer,
FontWeightRenderer,
ItalicsRenderer,
} from './storybookTypographyRenderers';
import { Meta, Canvas } from '@storybook/blocks';
import * as TypographyStories from './typography.stories';

<Meta of={TypographyStories} />
Expand Down Expand Up @@ -71,73 +59,57 @@ typography API assigns font size in rems.
font-family: 'GH Guardian Headline, Guardian Egyptian Web, Georgia, serif';
```

<Canvas>
<Story of={TypographyStories.Headline} />
</Canvas>
<Canvas of={TypographyStories.Headline} />

#### Line height

The default for headline is `tight`. This maps to `1.15 (115%)`.

<Canvas>
<Story of={TypographyStories.HeadlineLineheight} />
</Canvas>
<Canvas of={TypographyStories.HeadlineLineheight} />

### Body

```css
font-family: 'GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia, serif';
```

<Canvas>
<Story of={TypographyStories.Body} />
</Canvas>
<Canvas of={TypographyStories.Body} />

#### Line height

The default for body is `loose`. This maps to `1.40 (140%)`.

This meets the [WCAG 2.1 AAA success criterion for visual presentation](https://www.w3.org/TR/WCAG21/#visual-presentation).

<Canvas>
<Story of={TypographyStories.BodyLineheight} />
</Canvas>
<Canvas of={TypographyStories.BodyLineheight} />

### Text sans

```css
font-family: 'GuardianTextSans, Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif';
```

<Canvas>
<Story of={TypographyStories.TextSans} />
</Canvas>
<Canvas of={TypographyStories.TextSans} />

#### Line height

The default for text-sans is `regular`. This maps to `1.3 (130%)`.

<Canvas>
<Story of={TypographyStories.TextSansLineheight} />
</Canvas>
<Canvas of={TypographyStories.TextSansLineheight} />

### Titlepiece

```css
font-family: 'GT Guardian Titlepiece, Georgia, serif';
```

<Canvas>
<Story of={TypographyStories.Titlepiece} />
</Canvas>
<Canvas of={TypographyStories.Titlepiece} />

#### Line height

The default for titlepiece is `tight`. This maps to `1.15 (115%)`.

<Canvas>
<Story of={TypographyStories.TitlepieceLineheight} />
</Canvas>
<Canvas of={TypographyStories.TitlepieceLineheight} />

### Options

Expand Down Expand Up @@ -197,9 +169,7 @@ const lineHeight =
headline.medium({ fontWeight: 'bold' });
```

<Canvas>
<Story of={TypographyStories.FontWeight} />
</Canvas>
<Canvas of={TypographyStories.FontWeight} />

The default for body and textSans is `regular`. The `light` and `medium` font weights are not available for these fonts.

Expand All @@ -217,9 +187,7 @@ headline.medium({ fontStyle: 'italic' });

`italic` is available for the following fonts:

<Canvas>
<Story of={TypographyStories.Italics} />
</Canvas>
<Canvas of={TypographyStories.Italics} />

#### Unit

Expand Down

0 comments on commit 52eb7ae

Please sign in to comment.