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

migrated infobox, working on documentation

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-03-06 14:13:47 -08:00
parent 2d0d0263e3
commit cf1a18afaa
Failed to extract signature
2 changed files with 54 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/components/InfoBox/InfoBox.stories.mdx → src/components/InfoBox/InfoBox.mdx
View file

@ -1,11 +1,13 @@
import { Meta, Canvas } from '@storybook/blocks';
import * as InfoBoxStories from './InfoBox.stories.svelte';
<Meta of={InfoBoxStories} />
# InfoBox
InfoBox is used to provide additional information that needs to be visually set aside from the main content flowm, such as methodology, detailed notes about data, and extra context as text stories.
Switch the theme prop to `dark` for a dark page infobox.
Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the content as needed, e.g. adding icons and thumbnail images.
```svelte
<script>
import { InfoBox } from '@reuters-graphics/graphics-components';
@ -17,3 +19,43 @@ Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the content
notes={'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}
/>
```
You can use InfoBoox as a list by creating a list with a **ArchieML doc** in the **Graphics Kit** like this:
```yaml
# TEST THIS START HERE
[infoBox]
title: What you need to know about the war
text:
- **Food crisis**: [Russia's invasion of Ukraine](#) in late February dramatically worsened the outlook for already inflated global food prices.
- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes.
- **Nordstream sabotage**: A series of clandestine bombings and subsequent underwater gas leaks occurred on the Nord Stream 1 and Nord Stream 2 natural gas pipelines.
:end
[]
```
```svelte
<!-- Graphics Kit -->
<script>
import { BodyText } from '@reuters-graphics/graphics-components';
import content from '$locales/en/content.json';
</script>
# Graphics Kit
{#each content.blocks as block}
{#if block.type === 'text'}
<BodyText text={block.text} />
<!-- ... -->
{/if}
{/each}
```
## List
## Theme
Switch the theme prop to `dark` for a dark page infobox.
## Customisation
Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the content as needed, e.g. adding icons and thumbnail images.

15
src/components/InfoBox/InfoBox.stories.svelte
View file

@ -33,10 +33,11 @@
text="In case you don't read Twitter, the news, or just can't get enough of The Apprentice host's legendary oration, try this Trump lorem ipsum generator on for size."
/>
</Story>
<Story name="List">
<InfoBox
title="What you need to know about the war"
text={"- **Food crisis**: [Russia's invasion of Ukraine](#) in late February dramatically worsened the outlook for already inflated global food prices. \n- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes. \n- **Nordstream sabotage**: A series of clandestine bombings and subsequent underwater gas leaks occurred on the Nord Stream 1 and Nord Stream 2 natural gas pipelines. "}
/>
</Story>
<Story
name="List"
tags={['!autodocs']}
args={{
title: 'What you need to know about the war',
text: "- **Food crisis**: [Russia's invasion of Ukraine](#) in late February dramatically worsened the outlook for already inflated global food prices. \n- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes. \n- **Nordstream sabotage**: A series of clandestine bombings and subsequent underwater gas leaks occurred on the Nord Stream 1 and Nord Stream 2 natural gas pipelines. ",
}}
></Story>