a few docs things

.storybook/preview.js

@@ -33,20 +33,23 @@ export const parameters = {
         'Guides',
         [
           'Using these docs',
+          'Getting help',
           'Using with the Graphics Kit',
           'Using with Google docs',
           'Customising components with SCSS',
           '*',
         ],
         'Layout',
-        ['*'],
+        ['Intro', '*'],
         'Components',
-        ['*'],
+        ['Intro', '*'],
         '*',
-        'Actions',
-        ['*'],
         'Utilities',
-        ['*'],
+        ['Intro', '*'],
+        'SCSS',
+        ['Intro', '*'],
+        'Actions',
+        ['Intro', '*'],
         'Contributing',
         [
           'Quickstart', 'Component Basics', '*', 'Writing Stories',

.storybook/preview.scss

@@ -1,4 +1,5 @@
 @import "../src/scss/mixins";
+@import "../src/scss/colours/thematic/tr";
 
 table.docblock-argstable {
   p {
@@ -34,15 +35,19 @@ div.sbdocs-content {
   }
 }
 
-p.sbdocs-p, ul.sbdocs-ul, li.sbdocs-li, a.sbdocs-a {
+p.sbdocs-p, ul.sbdocs-ul, li.sbdocs-li {
   font-size: 18px;
   line-height: 29px;
   @include font-display;
 }
 
 a.sbdocs-a {
-  color: inherit;
+  @include font-display;
-  text-decoration: underline;
+  color: $tr-muted-blue;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 .sbdocs {

src/components/PymChild/PymChild.stories.svelte

@@ -21,6 +21,7 @@
 
 <Template let:args>
   <PymChild {...args} />
+  <div>Nothing to see here. 😎</div>
 </Template>
 
 <Story

src/components/SEO/stories/docs/quickit.md

@@ -22,6 +22,6 @@ Most of the fields are filled in by other sources, like your Google Doc and pack
   publishTime={pkg?.reuters?.graphic?.published}
   updateTime={pkg?.reuters?.graphic?.updated}
   authors={pkg?.reuters?.graphic?.authors}
-  includeAnalytics={true}
+  includeAnalytics={$page.url.hostname === 'graphics.reuters.com'}
 />
 ```

src/components/SiteHeader/stories/docs/component.md

@@ -1,6 +1,6 @@
 Reuters dotcom site header, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-header).
 
-(Go to the "Canvas" tab to see this component better...)
+(Go to the "[Canvas](./?path=/story/components-siteheader--default)" tab to see this component better. It'll look a bit broken below... but it's NOT!)
 
 > **Note:** In the [Graphics Kit](https://github.com/reuters-graphics/bluprint_graphics-kit/blob/master/pages/index.svelte), you can find this component in `pages/index.svelte`. Customise it there for the default page.
 

src/docs/actions/intro.stories.mdx

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+
+<Meta title="Actions/Intro" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Actions

src/docs/components/intro.stories.mdx

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+
+<Meta title="Components/Intro" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Components

src/docs/contributing/writing-component-stories.stories.mdx

@@ -31,4 +31,4 @@ Your component's story page will then have at least one story that shows how it
 
 Read through the recipes docs for some common examples of how you may want to write and customise your stories.
 
-If you're comparing the recipes to Storybook's own docs, note that all the examples use "Svelte Native" story format. (Storybook is technically a React-first tool, that's been retrofit to also support a number of other frameworks, including Svelte.)
+If you're comparing the recipes to Storybook's own docs, note that all the examples use "Svelte Native" story format. (Storybook is technically a React-first tool that's been retrofit to also support a number of other frameworks, including Svelte.)

src/docs/guides/getting-help.stories.mdx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+
+<Meta title="Guides/Getting help" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Getting help
+
+**If you're on deadline**, talk to your editor who can point you to the nearest developer.
+
+If you're off deadline, we use GitHub issues to track things that need fixing up or could be improved. Use one of the links below to create a new issue.
+
+---
+
+### Is something wrong with a component or another piece of code?
+
+🏷️ [Click here](https://github.com/reuters-graphics/graphics-components/issues/new?labels=%F0%9F%90%9B%20bug&assignees=hobbes7878) to create an issue on GitHub and report any bugs you've found. It's usually helpful if you also share a link to any repo you're working in where you've spotted the bug.
+
+---
+
+### Is something wrong with these docs?
+
+🏷️ [Click here](https://github.com/reuters-graphics/graphics-components/issues/new?labels=%F0%9F%93%9A%20documentation&assignees=hobbes7878) and tell us which docs are incorrect, unclear or could otherwise be improved.
+
+---
+
+### Have an idea for a new component or how to improve an existing one?
+
+🏷️ [Click here](https://github.com/reuters-graphics/graphics-components/issues/new?labels=%F0%9F%9A%80%20new%20feature&assignees=hobbes7878) and tell us more.

src/docs/intro.stories.mdx

@@ -5,9 +5,9 @@ import { parameters } from '$docs/utils/docsPage.js';
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
 
-# @reuters-graphics/graphics-svelte-components
+# @reuters-graphics/graphics-components
 
-[![npm version](https://badge.fury.io/js/@reuters-graphics%2Fgraphics-svelte-components.svg)](https://badge.fury.io/js/@reuters-graphics%2Fgraphics-svelte-components)
+[![npm version](https://badge.fury.io/js/@reuters-graphics%2Fgraphics-components.svg)](https://badge.fury.io/js/@reuters-graphics%2Fgraphics-svelte-components)
 
 Chart components you can use in your Svelte-based projects.
 
@@ -25,14 +25,14 @@ Chart components you can use in your Svelte-based projects.
 1. Install
 
 ```bash
-yarn add @reuters-graphics/graphics-svelte-components
+yarn add @reuters-graphics/graphics-components
 ```
 
-2. Import and use in your Svelte code.
+2. Checkout the guides, if you haven't, or dive straight into the component docs to start using components.
 
 ```svelte
 <script>
-  import { BodyText } from '@reuters-graphics/graphics-svelte-components';
+  import { BodyText } from '@reuters-graphics/graphics-components';
 </script>
 
 <BodyText text="{'Hello world!'}" />

src/docs/layout/intro.stories.mdx

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+
+<Meta title="Layout/Intro" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Layout

src/docs/scss/intro.stories.mdx

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+
+<Meta title="SCSS/Intro" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# SCSS

src/docs/utilities/intro.stories.mdx

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+
+<Meta title="Utilities/Intro" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Utilities