sets up headline docs
This commit is contained in:
MinamiFunakoshiTR
parent
4a674123df
commit
c9b4c7d86c
16 changed files with 204 additions and 207 deletions
137
src/components/Headline/Headline.mdx
Normal file
137
src/components/Headline/Headline.mdx
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
import { Meta, Canvas } from '@storybook/blocks';
|
||||
|
||||
import * as HeadlineStories from './Headline.stories.svelte';
|
||||
|
||||
<Meta of={HeadlineStories} />
|
||||
|
||||
# Headline
|
||||
|
||||
The `Headline` component creates the Reuters Graphics headline.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Headline
|
||||
hed={'Reuters Graphics Interactive'}
|
||||
dek={'The beginning of a beautiful page'}
|
||||
section={'World News'}
|
||||
/>
|
||||
```
|
||||
|
||||
<Canvas of={HeadlineStories.Demo} />
|
||||
|
||||
## Dek
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Headline
|
||||
hed={'Reuters Graphics Interactive'}
|
||||
dek={'The beginning of a beautiful page'}
|
||||
section={'Global news'}
|
||||
/>
|
||||
```
|
||||
|
||||
## With byline
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Headline
|
||||
hed={'Reuters Graphics Interactive'}
|
||||
dek={'The beginning of a beautiful page'}
|
||||
section={'Global news'}
|
||||
authors={['Dea Bankova', 'Aditi Bhandari']}
|
||||
publishTime={new Date('2020-01-01').toISOString()}
|
||||
/>
|
||||
```
|
||||
|
||||
## With custom hed
|
||||
Use the `hed` and/or `dek` named slots to override those elements with completely custom markup.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Headline width="wide">
|
||||
<h1 class="custom-hed" slot="hed">
|
||||
<span class="small block text-base">The secret to</span>
|
||||
“The Nutcracker's”
|
||||
<span class="small block text-base fpt-1">success</span>
|
||||
</h1>
|
||||
<p class="custom-dek !fmt-3" slot="dek">
|
||||
How “The Nutcracker” ballet became an<span
|
||||
class="font-medium mx-1 px-1.5 py-1">American holday staple</span
|
||||
>and a financial pillar of ballet companies across the country
|
||||
</p>
|
||||
</Headline>
|
||||
|
||||
<style lang="scss">
|
||||
.custom-hed {
|
||||
line-height: 0.9;
|
||||
}
|
||||
.custom-dek {
|
||||
span {
|
||||
background-color: #fde68a;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## With crown image
|
||||
|
||||
Add a crown image in the `crown` named slot and override the headline in the `hed` named slot.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths';
|
||||
</script>
|
||||
|
||||
<Headline class="!fmt-3" publishTime={new Date('2020-01-01').toISOString()}>
|
||||
<!-- Add a crown -->
|
||||
<img
|
||||
slot="crown"
|
||||
src={crownImgSrc}
|
||||
width="100"
|
||||
class="mx-auto mb-0"
|
||||
alt="Illustration of Europe"
|
||||
/>
|
||||
<!-- Override the hed with a named slot -->
|
||||
<h1 slot="hed" class="!font-serif !tracking-wide">Europa</h1>
|
||||
</Headline>
|
||||
```
|
||||
|
||||
## With crown graphic
|
||||
|
||||
Add a full graphic or any other component in the crown.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
import Map from './ai2svelte/graphic.svelte';
|
||||
import { assets } from '$app/paths';
|
||||
</script>
|
||||
|
||||
<Headline
|
||||
width="wider"
|
||||
class="!fmt-1"
|
||||
hed={'Unfriendly skies'}
|
||||
dek={'How Russia’s invasion of Ukraine is redrawing air routes'}
|
||||
section={'Ukraine Crisis'}
|
||||
authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
|
||||
publishTime={new Date('2022-03-04').toISOString()}
|
||||
>
|
||||
<!-- Add a crown graphic -->
|
||||
<div slot="crown">
|
||||
<Map assetsPath={assets} />
|
||||
</div>
|
||||
</Headline>
|
||||
```
|
||||
|
|
@ -1,28 +1,10 @@
|
|||
<script module lang="ts">
|
||||
// @ts-ignore raw
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
// @ts-ignore raw
|
||||
import withBylineDocs from './stories/docs/withByline.md?raw';
|
||||
// @ts-ignore raw
|
||||
import withDekDocs from './stories/docs/withDek.md?raw';
|
||||
// @ts-ignore raw
|
||||
import customHedDocs from './stories/docs/customHed.md?raw';
|
||||
// @ts-ignore raw
|
||||
import withCrownImgDocs from './stories/docs/withCrownImage.md?raw';
|
||||
// @ts-ignore raw
|
||||
import withCrownGraphicDocs from './stories/docs/withCrownGraphic.md?raw';
|
||||
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import Headline from './Headline.svelte';
|
||||
|
||||
import {
|
||||
withComponentDocs,
|
||||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
export const meta = {
|
||||
const { Story } = defineMeta({
|
||||
title: 'Components/Text elements/Headline',
|
||||
component: Headline,
|
||||
...withComponentDocs(componentDocs),
|
||||
argTypes: {
|
||||
hedSize: {
|
||||
control: 'select',
|
||||
|
|
@ -33,115 +15,107 @@
|
|||
options: ['normal', 'wide', 'wider', 'widest'],
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { Template, Story } from '@storybook/addon-svelte-csf';
|
||||
|
||||
// @ts-ignore img
|
||||
import crownImgSrc from './stories/crown.png';
|
||||
import Map from './stories/graphic.svelte';
|
||||
import crownImgSrc from './demo/crown.png';
|
||||
import Map from './demo/graphic.svelte';
|
||||
</script>
|
||||
|
||||
<Template >
|
||||
{#snippet children({ args })}
|
||||
<Headline {...args} />
|
||||
{/snippet}
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
args="{{
|
||||
name="Demo"
|
||||
args={{
|
||||
section: 'World News',
|
||||
hed: 'Reuters Graphics interactive',
|
||||
hedSize: 'normal',
|
||||
dek: '',
|
||||
authors: [],
|
||||
}}"
|
||||
}}
|
||||
/>
|
||||
|
||||
<Story name="With dek" {...withStoryDocs(withDekDocs)}>
|
||||
<Story name="Dek">
|
||||
<Headline
|
||||
hed="{'Reuters Graphics Interactive'}"
|
||||
dek="{'The beginning of a beautiful page'}"
|
||||
section="{'Global news'}"
|
||||
hed={'Reuters Graphics Interactive'}
|
||||
dek={'The beginning of a beautiful page'}
|
||||
section={'Global news'}
|
||||
/>
|
||||
</Story>
|
||||
|
||||
<Story name="With byline" {...withStoryDocs(withBylineDocs)}>
|
||||
<Story name="Byline">
|
||||
<Headline
|
||||
hed="{'Reuters Graphics Interactive'}"
|
||||
dek="{'The beginning of a beautiful page'}"
|
||||
section="{'Global news'}"
|
||||
authors="{['Dea Bankova', 'Aditi Bhandari']}"
|
||||
publishTime="{new Date('2020-01-01').toISOString()}"
|
||||
hed={'Reuters Graphics Interactive'}
|
||||
dek={'The beginning of a beautiful page'}
|
||||
section={'Global news'}
|
||||
authors={['Dea Bankova', 'Aditi Bhandari']}
|
||||
publishTime={new Date('2020-01-01').toISOString()}
|
||||
/>
|
||||
</Story>
|
||||
|
||||
<Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
|
||||
<Story name="Custom hed" exportName="CustomHed">
|
||||
<Headline width="wide">
|
||||
{#snippet hed()}
|
||||
<h1 class="custom-hed" >
|
||||
<h1 class="custom-hed">
|
||||
<span class="small block text-base">The secret to</span>
|
||||
“The Nutcracker's”
|
||||
<span class="small block text-base fpt-1">success</span>
|
||||
</h1>
|
||||
{/snippet}
|
||||
{/snippet}
|
||||
{#snippet dek()}
|
||||
<p class="custom-dek !fmt-3" >
|
||||
<p class="custom-dek !fmt-3">
|
||||
How “The Nutcracker” ballet became an<span
|
||||
class="font-medium mx-1 px-1.5 py-1">American holday staple</span
|
||||
>and a financial pillar of ballet companies across the country
|
||||
</p>
|
||||
{/snippet}
|
||||
{/snippet}
|
||||
</Headline>
|
||||
<style lang="scss">
|
||||
.custom-hed {
|
||||
line-height: 0.9;
|
||||
}
|
||||
.custom-dek {
|
||||
span {
|
||||
background-color: #fde68a;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</Story>
|
||||
|
||||
<Story name="With crown image" {...withStoryDocs(withCrownImgDocs)}>
|
||||
<Headline class="!fmt-3" publishTime="{new Date('2020-01-01').toISOString()}">
|
||||
<Story name="Crown image" exportName="CrownImage">
|
||||
>
|
||||
<Headline class="!fmt-3" publishTime={new Date('2020-01-01').toISOString()}>
|
||||
<!-- Add a crown -->
|
||||
{#snippet crown()}
|
||||
<img
|
||||
|
||||
src="{crownImgSrc}"
|
||||
<img
|
||||
src={crownImgSrc}
|
||||
width="100"
|
||||
class="mx-auto mb-0"
|
||||
alt="Illustration of Europe"
|
||||
/>
|
||||
{/snippet}
|
||||
<!-- Override the hed with a named slot -->
|
||||
{/snippet}
|
||||
<!-- Override the hed with a snippet -->
|
||||
{#snippet hed()}
|
||||
<h1 class="!font-serif !tracking-wide">Europa</h1>
|
||||
{/snippet}
|
||||
<h1 class="!font-serif !tracking-wide">Europa</h1>
|
||||
{/snippet}
|
||||
</Headline>
|
||||
</Story>
|
||||
|
||||
<Story name="With crown graphic" {...withStoryDocs(withCrownGraphicDocs)}>
|
||||
<Story name="Crown graphic" exportName="CrownGraphic">
|
||||
<Headline
|
||||
width="wider"
|
||||
class="!fmt-1"
|
||||
hed="{'Unfriendly skies'}"
|
||||
dek="{'How Russia’s invasion of Ukraine is redrawing air routes'}"
|
||||
section="{'Ukraine Crisis'}"
|
||||
authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
|
||||
publishTime="{new Date('2022-03-04').toISOString()}"
|
||||
hed={'Unfriendly skies'}
|
||||
dek={'How Russia’s invasion of Ukraine is redrawing air routes'}
|
||||
section={'Ukraine Crisis'}
|
||||
authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
|
||||
publishTime={new Date('2022-03-04').toISOString()}
|
||||
>
|
||||
<!-- Add a crown graphic -->
|
||||
{#snippet crown()}
|
||||
<div >
|
||||
<div>
|
||||
<Map />
|
||||
</div>
|
||||
{/snippet}
|
||||
{/snippet}
|
||||
</Headline>
|
||||
</Story>
|
||||
|
||||
<style lang="scss">
|
||||
.custom-hed {
|
||||
line-height: 0.9;
|
||||
}
|
||||
.custom-dek {
|
||||
span {
|
||||
background-color: #fde68a;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
|
||||
<!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-headline--docs) -->
|
||||
<script lang="ts">
|
||||
import type { HeadlineSize } from './../@types/global';
|
||||
|
|
@ -95,8 +94,8 @@
|
|||
<!-- Headline named slot -->
|
||||
<slot name="hed" />
|
||||
{:else}
|
||||
<h1 class="{hedClass}">
|
||||
<Markdown source="{hed}" parseInline />
|
||||
<h1 class={hedClass}>
|
||||
<Markdown source={hed} parseInline />
|
||||
</h1>
|
||||
{/if}
|
||||
{#if $$slots.dek}
|
||||
|
|
@ -106,7 +105,7 @@
|
|||
</div>
|
||||
{:else if dek}
|
||||
<div class="dek fmx-auto fmb-6">
|
||||
<Markdown source="{dek}" />
|
||||
<Markdown source={dek} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -115,7 +114,7 @@
|
|||
<slot name="byline" />
|
||||
{:else if authors.length > 0 || publishTime}
|
||||
<Byline
|
||||
class="fmy-4"
|
||||
cls="fmy-4"
|
||||
{authors}
|
||||
{publishTime}
|
||||
{updateTime}
|
||||
|
|
@ -127,17 +126,17 @@
|
|||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use '../../scss/mixins' as *;
|
||||
@use '../../scss/mixins' as mixins;
|
||||
.headline-wrapper {
|
||||
:global(.dek) {
|
||||
max-width: $column-width-normal;
|
||||
}
|
||||
:global(.dek p) {
|
||||
@include fmt-0;
|
||||
@include font-note;
|
||||
@include leading-tight;
|
||||
@include font-light;
|
||||
@include fmb-3;
|
||||
@include mixins.fmt-0;
|
||||
@include mixins.font-note;
|
||||
@include mixins.leading-tight;
|
||||
@include mixins.font-light;
|
||||
@include mixins.fmb-3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 363 KiB After Width: | Height: | Size: 363 KiB |
|
Before Width: | Height: | Size: 226 KiB After Width: | Height: | Size: 226 KiB |
|
Before Width: | Height: | Size: 159 KiB After Width: | Height: | Size: 159 KiB |
|
Before Width: | Height: | Size: 519 KiB After Width: | Height: | Size: 519 KiB |
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 98 KiB |
|
|
@ -14,7 +14,7 @@
|
|||
let width = $state(null);
|
||||
</script>
|
||||
|
||||
<div id="g-graphic-box" bind:clientWidth="{width}">
|
||||
<div id="g-graphic-box" bind:clientWidth={width}>
|
||||
<!-- Artboard: xs -->
|
||||
{#if width && width >= 0 && width < 510}
|
||||
<div id="g-graphic-xs" class="g-artboard" style="">
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<div
|
||||
id="g-graphic-xs-img"
|
||||
class="g-aiImg"
|
||||
style="{`background-image: url(${chartXs});`}"
|
||||
style={`background-image: url(${chartXs});`}
|
||||
></div>
|
||||
<div
|
||||
id="g-ai0-3"
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
<div
|
||||
id="g-graphic-sm-img"
|
||||
class="g-aiImg"
|
||||
style="{`background-image: url(${chartSm});`}"
|
||||
style={`background-image: url(${chartSm});`}
|
||||
></div>
|
||||
<div
|
||||
id="g-ai1-1"
|
||||
|
|
@ -213,7 +213,7 @@
|
|||
<div
|
||||
id="g-graphic-md-img"
|
||||
class="g-aiImg"
|
||||
style="{`background-image: url(${chartMd});`}"
|
||||
style={`background-image: url(${chartMd});`}
|
||||
></div>
|
||||
|
||||
<div
|
||||
|
|
@ -346,7 +346,7 @@
|
|||
<div
|
||||
id="g-graphic-lg-img"
|
||||
class="g-aiImg"
|
||||
style="{`background-image: url(${chartLg});`}"
|
||||
style={`background-image: url(${chartLg});`}
|
||||
></div>
|
||||
<div
|
||||
id="g-ai3-1"
|
||||
|
|
@ -485,7 +485,7 @@
|
|||
<div
|
||||
id="g-graphic-xl-img"
|
||||
class="g-aiImg"
|
||||
style="{`background-image: url(${chartXl});`}"
|
||||
style={`background-image: url(${chartXl});`}
|
||||
></div>
|
||||
<div
|
||||
id="g-ai4-1"
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
Reuters Graphics headline
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Headline
|
||||
hed="{'Reuters Graphics Interactive'}"
|
||||
dek="{'The beginning of a beautiful page'}"
|
||||
section="{'World News'}"
|
||||
/>
|
||||
```
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
Use the `hed` and/or `dek` named slots to override those elements with completely custom markup.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Headline width="wide">
|
||||
<h1 class="custom-hed" slot="hed">
|
||||
<span class="small block text-base">The secret to</span>
|
||||
“The Nutcracker's”
|
||||
<span class="small block text-base fpt-1">success</span>
|
||||
</h1>
|
||||
<p class="custom-dek !fmt-3" slot="dek">
|
||||
How “The Nutcracker” ballet became an<span
|
||||
class="font-medium mx-1 px-1.5 py-1">American holday staple</span
|
||||
>and a financial pillar of ballet companies across the country
|
||||
</p>
|
||||
</Headline>
|
||||
|
||||
<style lang="scss">
|
||||
.custom-hed {
|
||||
line-height: 0.9;
|
||||
}
|
||||
.custom-dek {
|
||||
span {
|
||||
background-color: #fde68a;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Headline
|
||||
hed="{'Reuters Graphics Interactive'}"
|
||||
dek="{'The beginning of a beautiful page'}"
|
||||
section="{'Global news'}"
|
||||
authors="{['Dea Bankova', 'Aditi Bhandari']}"
|
||||
publishTime="{new Date('2020-01-01').toISOString()}"
|
||||
/>
|
||||
```
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
Add a full graphic or any other component in the crown.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
import Map from './ai2svelte/graphic.svelte';
|
||||
import { assets } from '$app/paths';
|
||||
</script>
|
||||
|
||||
<Headline
|
||||
width="wider"
|
||||
class="!fmt-1"
|
||||
hed="{'Unfriendly skies'}"
|
||||
dek="{'How Russia’s invasion of Ukraine is redrawing air routes'}"
|
||||
section="{'Ukraine Crisis'}"
|
||||
authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
|
||||
publishTime="{new Date('2022-03-04').toISOString()}"
|
||||
>
|
||||
<!-- Add a crown graphic -->
|
||||
<div slot="crown">
|
||||
<Map assetsPath="{assets}" />
|
||||
</div>
|
||||
</Headline>
|
||||
```
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
Add a crown image in the `crown` named slot and override the headline in the `hed` named slot.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths';
|
||||
</script>
|
||||
|
||||
<Headline class="!fmt-3" publishTime="{new Date('2020-01-01').toISOString()}">
|
||||
<!-- Add a crown -->
|
||||
<img
|
||||
slot="crown"
|
||||
src="{crownImgSrc}"
|
||||
width="100"
|
||||
class="mx-auto mb-0"
|
||||
alt="Illustration of Europe"
|
||||
/>
|
||||
<!-- Override the hed with a named slot -->
|
||||
<h1 slot="hed" class="!font-serif !tracking-wide">Europa</h1>
|
||||
</Headline>
|
||||
```
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Headline
|
||||
hed="{'Reuters Graphics Interactive'}"
|
||||
dek="{'The beginning of a beautiful page'}"
|
||||
section="{'Global news'}"
|
||||
/>
|
||||
```
|
||||
Loading…
Reference in a new issue