diff --git a/src/components/Article/Article.mdx b/src/components/Article/Article.mdx index ad6935ce..5c038bd2 100644 --- a/src/components/Article/Article.mdx +++ b/src/components/Article/Article.mdx @@ -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
- +
``` -## 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 `
`. -> **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 +
+ @@ -58,11 +60,11 @@ When combined with the `Block` component, you can set custom column widths by pa
``` -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
- +
``` -... 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
- +
``` -Here's an example of how custom\* `columnWidths` can be used to change the article well columns: +Here's an example of how custom `columnWidths` can be used to change column widths: + + diff --git a/src/components/Article/Article.stories.svelte b/src/components/Article/Article.stories.svelte index c0683455..79d69c36 100644 --- a/src/components/Article/Article.stories.svelte +++ b/src/components/Article/Article.stories.svelte @@ -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, }); - - - +
-
Article container
+
Article well
⇤15px padding
 - + +

Default column widths

+
narrower @@ -43,22 +32,23 @@ fluid
+

Custom column widths

- narrower* - narrow* - normal* - wide* - wider* + narrower + narrow + normal + wide + wider widest fluid
@@ -66,6 +56,13 @@ -``` - -... or you can make your component entirely configurable within the article well doing something like this: - -```svelte - - -
- -
- - -``` - -Here's an example of how custom\* `columnWidths` can be used to change the article well columns: