wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

a few docs things

Browse source
This commit is contained in:
Jon McClure 2022-08-15 19:36:51 +01:00
parent 9873372623
commit 861e77c2cb
13 changed files with 95 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
.storybook/preview.js
View file

@ -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',

11
.storybook/preview.scss
View file

@ -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 {

1
src/components/PymChild/PymChild.stories.svelte
View file

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

2
src/components/SEO/stories/docs/quickit.md
View file

@ -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'}
/>
```

2
src/components/SiteHeader/stories/docs/component.md
View file

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

8
src/docs/actions/intro.stories.mdx Normal file
View file

@ -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

8
src/docs/components/intro.stories.mdx Normal file
View file

@ -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

2
src/docs/contributing/writing-component-stories.stories.mdx
View file

@ -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.)

30
src/docs/guides/getting-help.stories.mdx Normal file
View file

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

10
src/docs/intro.stories.mdx
View file

@ -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!'}" />

8
src/docs/layout/intro.stories.mdx Normal file
View file

@ -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

8
src/docs/scss/intro.stories.mdx Normal file
View file

@ -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

8
src/docs/utilities/intro.stories.mdx Normal file
View file

@ -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