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

Merge branch 'mf-article' of https://github.com/reuters-graphics/graphics-components into mf-video

Browse source
This commit is contained in:
MinamiFunakoshiTR 2025-03-26 11:57:36 -07:00
commit 1e4e5792e6
Failed to extract signature
5 changed files with 49 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/Article/Article.mdx
View file

@ -6,9 +6,9 @@ import * as ArticleStories from './Article.stories.svelte';
# Article
The `Article` component contains all the content of our story and also establishes the dimensions of our article well, the default central trunk of our page layout.
The `Article` component contains all the contents of our story.
> 📌 In most cases, **you won't need to mess with the `Article` component** because it's already included in our rigs for you!
> 📌 In most cases, **you don't need to mess with the `Article` component** because it's already set up in the Graphics Kit.
```svelte
<script>
@ -16,29 +16,30 @@ The `Article` component contains all the content of our story and also establish
</script>
<Article>
<!-- The story stuff goes in here! -->
<!-- The story content goes here! -->
</Article>
```
<Canvas of={ArticleStories.Demo} />
## Custom well widths
## Custom column widths
The `Article` component also creates several column dimensions inside our article well. The standard widths of columns follow a basic class scheme:
The `Article` component also establishes the widths of columns that contain individual sections of the story, such as text, photos, and charts. The default column widths follow a basic class scheme:
- `narrower` A bit narrower than narrow...
- `narrow` A bit narrower than the text column
- `normal` **The main width of the body text column**
- `wide` A bit wider than the text column
- `narrower` The narrowest...
- `narrow` A bit narrower than the default body text column
- `normal` **The default width of the body text column**
- `wide` A bit wider
- `wider` A bit wider than wide...
- `widest` Edge-to-edge, but _excluding_ the left and right padding on `Article`
- `fluid` Fully edge-to-edge
When combined with the `Block` component, you can set custom column widths by passing an object to the `columnWidths` prop with pixel values for the `narrower`, `narrow`, `normal`, `wide` and `wider` column widths.
You can set custom column widths by passing an object to the `columnWidths` prop with pixel values for the `narrower`, `narrow`, `normal`, `wide` and `wider` classes. These can then be used by the `Block` component or other elements housed inside `<Article>`.
> **For most pages, you shouldn't customise the column widths.** Other tools, like our AI templates, use our default column widths, so customising those widths here has downstream consequences for graphics made outside your code. The main exception is SREP stories.
> **For most Graphics Kit pages, you shouldn't customise the column widths.** Other Reuters tools, like our AI templates, use our default column widths, so customising those widths here has downstream consequences for graphics made outside Graphics Kit. The main exception is SREP stories.
```svelte
<!-- Set custom column widths -->
<Article
columnWidths="{{
narrower: 310,
@ -48,6 +49,7 @@ When combined with the `Block` component, you can set custom column widths by pa
wider: 1400,
}}"
>
<!-- Custom column widths get passed down to the `Block` component -->
<Block width="narrower" />
<Block width="narrow" />
<Block width="normal" />
@ -58,11 +60,11 @@ When combined with the `Block` component, you can set custom column widths by pa
</Article>
```
If you're not using our `Block` component, you can still inherit the column widths from `Article` to create your own custom container with the article well dimensions by using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) like this:
If you're not using our `Block` component, you can still inherit the column widths from `Article` and create your own custom containers by using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) like this:
```svelte
<div class="my-special-container">
<!-- Stuffs... -->
<!-- Story content -->
</div>
<style lang="scss">
@ -72,7 +74,7 @@ If you're not using our `Block` component, you can still inherit the column widt
</style>
```
... or you can make your component entirely configurable within the article well doing something like this:
... or you can make your column widths entirely configurable by adding classes and manually specifying widths:
```svelte
<script>
@ -80,7 +82,7 @@ If you're not using our `Block` component, you can still inherit the column widt
</script>
<div class="my-special-container {width}">
<!-- Stuffs... -->
<!-- Story content -->
</div>
<style lang="scss">
@ -110,4 +112,6 @@ If you're not using our `Block` component, you can still inherit the column widt
</style>
```
Here's an example of how custom\* `columnWidths` can be used to change the article well columns:
Here's an example of how <span className='custom'>custom</span> `columnWidths` can be used to change column widths:
<Canvas of={ArticleStories.CustomColumns} />

56
src/components/Article/Article.stories.svelte
View file

@ -2,36 +2,25 @@
import { defineMeta } from '@storybook/addon-svelte-csf';
import Block from '../Block/Block.svelte';
import Article from './Article.svelte';
// @ts-ignore raw
import customWellWidthsDocs from './stories/docs/customWellWidths.md?raw';
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
const { Story } = defineMeta({
title: 'Components/Page Layout/Article',
title: 'Components/Page layout/Article',
component: Article,
});
</script>
<script lang="ts">
</script>
<Story
name="Demo"
args={{
embedded: false,
id: '',
}}
>
<Story name="Demo">
<Article id="article-story-basic">
<div class="demo-container">
<div class="background-label">Article container</div>
<div class="background-label">Article well</div>
<div class="padding-label"><span>⇤</span>15px padding</div>
</div>
</Article>
</Story>
<Story name="Custom columns" {...withStoryDocs(customWellWidthsDocs)}>
<Story name="Custom columns" exportName="CustomColumns">
<h3>Default column widths</h3>
<Article id="article-column-widths-demo">
<div class="article-boundaries">
<Block id="section-demo" width="narrower">narrower</Block>
@ -43,22 +32,23 @@
<Block id="section-demo" width="fluid">fluid</Block>
</div>
</Article>
<h3>Custom column widths</h3>
<Article
id="article-column-widths-demo"
columnWidths={{
narrower: 310,
narrow: 450,
normal: 550,
narrower: 250,
narrow: 400,
normal: 500,
wide: 675,
wider: 1400,
}}
>
<div class="article-boundaries custom">
<Block id="section-demo" width="narrower">narrower*</Block>
<Block id="section-demo" width="narrow">narrow*</Block>
<Block id="section-demo">normal*</Block>
<Block id="section-demo" width="wide">wide*</Block>
<Block id="section-demo" width="wider">wider*</Block>
<Block id="section-demo" width="narrower">narrower</Block>
<Block id="section-demo" width="narrow">narrow</Block>
<Block id="section-demo">normal</Block>
<Block id="section-demo" width="wide">wide</Block>
<Block id="section-demo" width="wider">wider</Block>
<Block id="section-demo" width="widest">widest</Block>
<Block id="section-demo" width="fluid">fluid</Block>
</div>
@ -66,6 +56,13 @@
</Story>
<style lang="scss">
h3 {
text-align: center;
}
:global(span.custom) {
color: rgb(211, 132, 123);
font-weight: 600;
}
:global(#article-story-basic, #article-column-widths-demo) {
width: calc(100% + 30px);
margin-left: -15px;
@ -93,21 +90,22 @@
height: 50px;
padding-left: 3px;
color: white;
font-size: 12px;
font-size: 1rem;
}
div.demo-container {
height: 300px;
background: #ccc;
position: relative;
font-size: 12px;
.background-label {
font-size: 1.5rem;
position: absolute;
bottom: 0;
left: 5px;
top: 40%;
left: 40%;
color: #666;
}
.padding-label {
font-size: 1rem;
position: absolute;
top: 0;
left: -17px;

4
src/components/Article/Article.svelte
View file

@ -18,7 +18,7 @@
/** Set to true for embeddables. */
embedded?: boolean;
/** Add an id to the article tag to target it with custom CSS. */
id?: string | null;
id?: string;
/** ARIA role of the article */
role?: string | null;
/** Set custom widths for the normal, wide and wider column dimensions */
@ -28,7 +28,7 @@
let {
embedded = false,
id = null,
id = '',
role = null,
columnWidths = {
narrower: 330,

13
src/components/Article/stories/docs/component.md
View file

@ -1,13 +0,0 @@
The `Article` component contains all the content of our story and also establishes the dimensions of our article well, the default central trunk of our page layout.
> 📌 In most cases, **you won't need to mess with the `Article` component** because it's already included in our rigs for you!
```svelte
<script>
import { Article } from '@reuters-graphics/graphics-components';
</script>
<Article>
<!-- The story stuff goes in here! -->
</Article>
```

87
src/components/Article/stories/docs/customWellWidths.md
View file

@ -1,87 +0,0 @@
The `Article` component also creates several column dimensions inside our article well. The standard widths of columns follow a basic class scheme:
- `narrower` A bit narrower than narrow...
- `narrow` A bit narrower than the text column
- `normal` **The main width of the body text column**
- `wide` A bit wider than the text column
- `wider` A bit wider than wide...
- `widest` Edge-to-edge, but _excluding_ the left and right padding on `Article`
- `fluid` Fully edge-to-edge
When combined with the `Block` component, you can set custom column widths by passing an object to the `columnWidths` prop with pixel values for the `narrower`, `narrow`, `normal`, `wide` and `wider` column widths.
> **For most pages, you shouldn't customise the column widths.** Other tools, like our AI templates, use our default column widths, so customising those widths here has downstream consequences for graphics made outside your code. The main exception is SREP stories.
```svelte
<Article
columnWidths="{{
narrower: 310,
narrow: 450,
normal: 550,
wide: 675,
wider: 1400,
}}"
>
<Block width="narrower" />
<Block width="narrow" />
<Block width="normal" />
<Block width="wide" />
<Block width="wider" />
<Block width="widest" />
<Block width="fluid" />
</Article>
```
If you're not using our `Block` component, you can still inherit the column widths from `Article` to create your own custom container with the article well dimensions by using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) like this:
```svelte
<div class="my-special-container">
<!-- Stuffs... -->
</div>
<style lang="scss">
div.my-special-container {
max-width: var(--wide-column-width);
}
</style>
```
... or you can make your component entirely configurable within the article well doing something like this:
```svelte
<script>
export let width = 'normal';
</script>
<div class="my-special-container {width}">
<!-- Stuffs... -->
</div>
<style lang="scss">
div.my-special-container {
max-width: var(--normal-column-width);
&.narrower {
max-width: var(--narrower-column-width);
}
&.narrow {
max-width: var(--narrow-column-width);
}
&.wide {
max-width: var(--wide-column-width);
}
&.wider {
max-width: var(--wider-column-width);
}
&.widest {
max-width: 100%;
}
&.fluid {
width: calc(100% + 30px);
margin-left: -15px;
max-width: none;
}
}
</style>
```
Here's an example of how custom\* `columnWidths` can be used to change the article well columns: