docs for using type styles

.storybook/preview.js

@@ -51,7 +51,7 @@ export const parameters = {
         'SCSS',
         ['Intro', '*'],
         'Typography',
-        ['Intro', '*'],
+        ['Intro', 'How to use', ['Text styles', '*'], '*'],
         'Actions',
         ['Intro', '*'],
         'Contributing',

src/docs/typography/customising.stories.mdx

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+
+import Typeset from './typeset.png';
+import TypeGuides from './type-guides.png'
+
+<Meta title="Typography/Customising" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Customising typographic styles
+

src/docs/typography/docs/FaceDemo.svelte

@@ -0,0 +1,20 @@
+<script>
+  /**
+   * font family
+   * @type {string}
+   */
+  export let face = 'typeface-serif';
+</script>
+
+<div class="{face}">
+  As mass-printing technologies like the printing press spread, newspapers were
+  established to provide increasingly literate audiences with the news. The
+  first references to privately owned newspaper publishers in China date to the
+  late Ming dynasty in 1582. Johann Carolus's Relation aller Fürnemmen und
+  gedenckwürdigen Historien, published in 1605 in Strasbourg, is often
+  recognized as the first newspaper in Europe.
+</div>
+
+<style lang="scss">
+  @import '../../../scss/typography/main';
+</style>

src/docs/typography/docs/SizeDemo.svelte

@@ -0,0 +1,20 @@
+<script>
+  /**
+   * font size level
+   * @type {string}
+   */
+  export let size = 'font-size-3';
+</script>
+
+<div class="{size}">
+  As mass-printing technologies like the printing press spread, newspapers were
+  established to provide increasingly literate audiences with the news. The
+  first references to privately owned newspaper publishers in China date to the
+  late Ming dynasty in 1582. Johann Carolus's Relation aller Fürnemmen und
+  gedenckwürdigen Historien, published in 1605 in Strasbourg, is often
+  recognized as the first newspaper in Europe.
+</div>
+
+<style lang="scss">
+  @import '../../../scss/typography/main';
+</style>

src/docs/typography/docs/StyleDemo.svelte

@@ -0,0 +1,17 @@
+<script>
+  /**
+   * font class
+   * @type {string}
+   */
+  export let textClass = 'font-body';
+</script>
+
+<div class="{textClass}">
+  The agency was established in London in 1851 by the German-born Paul Julius
+  Reuter. It was acquired by the Thomson Corporation of Canada in 2008 and now
+  makes up the media division of Thomson Reuters.
+</div>
+
+<style lang="scss">
+  @import '../../../scss/typography/main';
+</style>

src/docs/typography/docs/face.md

@@ -0,0 +1,25 @@
+There are four font families provided via the `Theme`, which feeds into all the text styles. If you need to specifically apply font family styles to your HTML elements, you can use the following methods.
+
+## With CSS classes
+
+Add the `typeface-` class to any element for the classes to take effect. Check out the available classes and their associated sizes in the example below.
+
+```svelte
+<div class="typeface-serif">...your text here</div>
+```
+
+## With SCSS mixins
+
+Include the mixins in your stylesheets as shown below.
+
+```svelte
+<div class="my-class">...your text here</div>
+
+<style lang="scss">
+  @import '@reuters-graphics/graphics-components/dist/scss/typography/_main.scss';
+
+  .my-class {
+    @include typeface-serif;
+  }
+</style>
+```

src/docs/typography/docs/size.md

@@ -0,0 +1,31 @@
+The font sizes are used to style the various elements on the page, including margins and padding utilities. This is to ensure the harmonic rhythm of the page set by the system.
+
+You may need to use the sizes from this scale in situations like -
+
+- Adding sizes in your custom svelte component
+- Sizing chart elemnents in D3
+- Defining bespoke style beyond what is provided by the `text-styles`
+
+## With CSS classes
+
+Add the `font-size-*` class to any element for the classes to take effect, where `*` = 1 to 6. Check out the available classes and their associated sizes in the example below.
+
+```svelte
+<div class="font-body">...your text here</div>
+```
+
+## With SCSS mixins
+
+Include the mixins in your stylesheets as shown below.
+
+```svelte
+<div class="my-class">...your text here</div>
+
+<style lang="scss">
+  @import '@reuters-graphics/graphics-components/dist/scss/typography/_main.scss';
+
+  .my-class {
+    @include font-size-3;
+  }
+</style>
+```

src/docs/typography/docs/style.md

@@ -0,0 +1,32 @@
+The styles are automatically applied to native HTML elements like the `H` and `p` tags, as well as `GraphicsKit` components. For more details, check out the `Type system` section in the `Intro`.
+
+```svelte
+<div>
+  <h2>Here's a section title</h2>
+  <p>and some text to go with it...</p>
+</div>
+```
+
+## With CSS classes
+
+Add the `font-` class to any element for the classes to take effect. Check out the available classes and their associated styles in the example below.
+
+```svelte
+<div class="font-body">...your text here</div>
+```
+
+## With SCSS mixins
+
+Include the mixins in your stylesheets as shown below.
+
+```svelte
+<div class="my-class">...your text here</div>
+
+<style lang="scss">
+  @import '@reuters-graphics/graphics-components/dist/scss/typography/_main.scss';
+
+  .my-class {
+    @include font-body;
+  }
+</style>
+```

src/docs/typography/intro.stories.mdx

@@ -14,6 +14,8 @@ Our design system includes a typographic scale based on the scale of fifths to c
 
 The typographic scale is set using the CSS variable in the theme component. You can customise them if you need a bespoke typesetting for your project.
 
+
+
 ## The type system
 
 <img
@@ -30,6 +32,17 @@ The typographic scale is set using the CSS variable in the theme component. You
   style={{ margin: '3rem 0' }}
 />
 
+## Default usage
+
+In your projects, you will use the typographic styles as per the function –
+- Page title, subheads and section titles
+- Body copy
+- Graphic descriptions, captions and other notes
+
+The styles are also applied to native HTML elements like the `H` and `p` tags.
+
+> For Graphics Kit users, the typographic styles are already imported and applied to the individual components. So, if you want to customise them, check the next `Customising text styles`  section.
+
 ## How it works
 
 Somthing about the base sizes and derived scale coupled with other styles

src/docs/typography/using-faces.stories.svelte

@@ -0,0 +1,36 @@
+<script>
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+
+  import {
+    withComponentDocs,
+    withStoryDocs,
+  } from '$lib/docs/utils/withParams.js';
+
+  import FaceDemo from './docs/FaceDemo.svelte';
+
+  // @ts-ignore
+  import face from './docs/face.md?raw';
+
+  const meta = {
+    title: 'Typography/How to use',
+    component: FaceDemo,
+    ...withComponentDocs(face),
+    argTypes: {
+      face: {
+        control: 'select',
+        options: [
+          'typeface-display',
+          'typeface-serif',
+          'typeface-sans-serif',
+          'typeface-monospace',
+        ],
+      },
+    },
+  };
+</script>
+
+<Meta {...meta} />
+
+<Story let:args name="Typefaces" {...withStoryDocs(face)}>
+  <FaceDemo {...args} />
+</Story>

src/docs/typography/using-sizes.stories.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+
+  import {
+    withComponentDocs,
+    withStoryDocs,
+  } from '$lib/docs/utils/withParams.js';
+
+  import SizeDemo from './docs/SizeDemo.svelte';
+
+  // @ts-ignore
+  import size from './docs/size.md?raw';
+
+  const meta = {
+    title: 'Typography/How to use',
+    component: SizeDemo,
+    ...withComponentDocs(size),
+    argTypes: {
+      size: {
+        control: 'select',
+        options: [
+          'font-size-1',
+          'font-size-2',
+          'font-size-3',
+          'font-size-4',
+          'font-size-5',
+          'font-size-6',
+        ],
+      },
+    },
+  };
+</script>
+
+<Meta {...meta} />
+
+<Story let:args name="Text sizes" {...withStoryDocs(size)}>
+  <SizeDemo {...args} />
+</Story>

src/docs/typography/using-styles.stories.mdx

@@ -1,14 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import { parameters } from '$docs/utils/docsPage.js';
-
-
-<Meta title="Typography/Using text styles" parameters={{ ...parameters }} />
-
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
-# Applying typographic styles
-
-In your projects, you will use the typographic as per the function –
-- Page title, subheads and section titles
-- Body copy
-- Graphic descriptions, captions and other notes

src/docs/typography/using-styles.stories.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+
+  import {
+    withComponentDocs,
+    withStoryDocs,
+  } from '$lib/docs/utils/withParams.js';
+
+  import StyleDemo from './docs/StyleDemo.svelte';
+
+  // @ts-ignore
+  import style from './docs/style.md?raw';
+
+  const meta = {
+    title: 'Typography/How to use',
+    component: StyleDemo,
+    ...withComponentDocs(style),
+    argTypes: {
+      textClass: {
+        control: 'select',
+        options: [
+          'font-hed',
+          'font-subhed-1',
+          'font-subhed-2',
+          'font-subhed-3',
+          'font-body',
+          'font-note-1',
+          'font-note-2',
+          'font-note-3',
+        ],
+      },
+    },
+  };
+</script>
+
+<Meta {...meta} />
+
+<Story let:args name="Text styles" {...withStoryDocs(style)}>
+  <StyleDemo {...args} />
+</Story>