64 lines
2.6 KiB
Text
64 lines
2.6 KiB
Text
import { Meta } from '@storybook/addon-docs';
|
|
import { parameters } from '$docs/utils/docsPage.js';
|
|
|
|
import quickitImg from './imgs/quickit.png';
|
|
|
|
<Meta
|
|
title="Guides/Using with the Graphics Kit"
|
|
parameters={{ ...parameters }}
|
|
/>
|
|
|
|
|
|
|
|
# Using with the Graphics Kit
|
|
|
|
If you haven't, check out ["Using Reuters Graphics Components" in the Graphics Kit docs](https://reuters-graphics.github.io/docs_graphics-kit/for_developers/graphics-components/) to get a general idea of how to use components.
|
|
|
|
Look <span class="highlight">for <strong>🚀 QUICKIT</strong> stories</span> (Quick Kit 🤣🙄) for some of our most commonly used components. These stories
|
|
include easy copy/paste snippets as well as Google Doc block examples that should
|
|
shortcut getting a component working in the Graphics Kit.
|
|
|
|
<img src={quickitImg} width="200" />
|
|
|
|
(Want a QUICKIT story for another component? [Just ask us!](https://github.com/reuters-graphics/graphics-components/issues/new?labels=%F0%9F%93%9A%20documentation&assignees=hobbes7878))
|
|
|
|
## FAQs
|
|
|
|
### How do I write my Google Doc?
|
|
|
|
Many component stories show passing data directly into component props. In the Kit, though, you likely won't be hard-coding things like text strings in your code and instead will get them from a Google Doc.
|
|
|
|
Check out the guide devoted to [using components with Google Docs](?path=/docs/guides-using-with-google-docs--page) for a quick explanation of how to work with Google Docs.
|
|
|
|
And, of course, look for a QUICKIT story for your component, which will have a Docs example specific to it.
|
|
|
|
### How do I use this image/video/etc.?
|
|
|
|
Remember, all references to images, videos and other media must be _absolute paths_:
|
|
|
|
✅ `https://.../myImage.jpg`
|
|
|
|
❌ `./myImage.jpg`
|
|
|
|
In most cases, that means you'll need to prefix relative paths with the special `assets` Svelte module. Many examples in these docs show how to do it. But it's also easy enough to demo again here!
|
|
|
|
```svelte
|
|
<script>
|
|
import content from '$locales/en/content.json';
|
|
import { FeaturePhoto } from '@reuters-graphics/graphics-components';
|
|
|
|
// This is already imported for you in App.svelte
|
|
import { assets } from '$app/paths';
|
|
</script>
|
|
|
|
{#each content.blocks as block}
|
|
<!-- ... other blocks -->
|
|
|
|
<!-- Use assets to prefix the path to the image. -->
|
|
{:else if block.Type === 'photo'} <FeautrePhoto
|
|
src={`${assets}/${block.PathToImage}`} /> {/each}
|
|
```
|
|
|
|
### How do I change this component's styles?
|
|
|
|
Check out our guide on [customising components with SCSS](?path=/docs/guides-customising-components-with-scss--page)
|