diff --git a/.storybook/preview.js b/.storybook/preview.js index f7cb7a40..16fba0cc 100644 --- a/.storybook/preview.js +++ b/.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', diff --git a/.storybook/preview.scss b/.storybook/preview.scss index d34d6ed6..a411cd65 100644 --- a/.storybook/preview.scss +++ b/.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; - text-decoration: underline; + @include font-display; + color: $tr-muted-blue; + text-decoration: none; + &:hover { + text-decoration: underline; + } } .sbdocs { diff --git a/src/components/PymChild/PymChild.stories.svelte b/src/components/PymChild/PymChild.stories.svelte index 07083a63..57e0d37a 100644 --- a/src/components/PymChild/PymChild.stories.svelte +++ b/src/components/PymChild/PymChild.stories.svelte @@ -21,6 +21,7 @@ ``` diff --git a/src/components/SiteHeader/stories/docs/component.md b/src/components/SiteHeader/stories/docs/component.md index 33e23a81..f41404e6 100644 --- a/src/components/SiteHeader/stories/docs/component.md +++ b/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. diff --git a/src/docs/actions/intro.stories.mdx b/src/docs/actions/intro.stories.mdx new file mode 100644 index 00000000..4b7919d9 --- /dev/null +++ b/src/docs/actions/intro.stories.mdx @@ -0,0 +1,8 @@ +import { Meta } from '@storybook/addon-docs'; +import { parameters } from '$docs/utils/docsPage.js'; + + + +![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) + +# Actions diff --git a/src/docs/components/intro.stories.mdx b/src/docs/components/intro.stories.mdx new file mode 100644 index 00000000..13b6fa44 --- /dev/null +++ b/src/docs/components/intro.stories.mdx @@ -0,0 +1,8 @@ +import { Meta } from '@storybook/addon-docs'; +import { parameters } from '$docs/utils/docsPage.js'; + + + +![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) + +# Components diff --git a/src/docs/contributing/writing-component-stories.stories.mdx b/src/docs/contributing/writing-component-stories.stories.mdx index 66fde577..db79a8eb 100644 --- a/src/docs/contributing/writing-component-stories.stories.mdx +++ b/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.) diff --git a/src/docs/guides/getting-help.stories.mdx b/src/docs/guides/getting-help.stories.mdx new file mode 100644 index 00000000..409ccfca --- /dev/null +++ b/src/docs/guides/getting-help.stories.mdx @@ -0,0 +1,30 @@ +import { Meta } from '@storybook/addon-docs'; +import { parameters } from '$docs/utils/docsPage.js'; + + + +![](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. diff --git a/src/docs/intro.stories.mdx b/src/docs/intro.stories.mdx index 1a8bcb78..dd3568e3 100644 --- a/src/docs/intro.stories.mdx +++ b/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 diff --git a/src/docs/layout/intro.stories.mdx b/src/docs/layout/intro.stories.mdx new file mode 100644 index 00000000..db74f776 --- /dev/null +++ b/src/docs/layout/intro.stories.mdx @@ -0,0 +1,8 @@ +import { Meta } from '@storybook/addon-docs'; +import { parameters } from '$docs/utils/docsPage.js'; + + + +![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) + +# Layout diff --git a/src/docs/scss/intro.stories.mdx b/src/docs/scss/intro.stories.mdx new file mode 100644 index 00000000..7954a285 --- /dev/null +++ b/src/docs/scss/intro.stories.mdx @@ -0,0 +1,8 @@ +import { Meta } from '@storybook/addon-docs'; +import { parameters } from '$docs/utils/docsPage.js'; + + + +![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) + +# SCSS diff --git a/src/docs/utilities/intro.stories.mdx b/src/docs/utilities/intro.stories.mdx new file mode 100644 index 00000000..2dee2f42 --- /dev/null +++ b/src/docs/utilities/intro.stories.mdx @@ -0,0 +1,8 @@ +import { Meta } from '@storybook/addon-docs'; +import { parameters } from '$docs/utils/docsPage.js'; + + + +![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) + +# Utilities