Update typography API stories to show correct examples (#1325)

## What are you changing?

Updates typography API stories so that the correct examples are shown.

## Why?

The story format was updated as part of the Storybook 8 upgrade, but
this resulted in the headline examples being shown in place of all other
examples on the page.

## Screenshots

### Before

<img width="1014" alt="Screenshot 2024-04-02 at 16 58 17"
src="https://github.com/guardian/csnx/assets/1166188/53e296db-1dce-4088-adfd-7878a02244a4">

### After

<img width="1022" alt="Screenshot 2024-04-02 at 16 58 37"
src="https://github.com/guardian/csnx/assets/1166188/c38f36dd-d729-41c4-880c-ab5fe328c233">

libs/@guardian/source-foundations/src/typography/typography.mdx

@@ -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} />
@@ -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
 
@@ -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.
 
@@ -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