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

fixes styles for chart text furniture. fixes newlines in demo

Browse source
This commit is contained in:
hobbes7878 2025-04-04 20:35:14 +01:00
parent 19a5908a4f
commit 2067283d7d
Failed to extract signature
4 changed files with 63 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/GraphicBlock/GraphicBlock.mdx
View file

@ -18,7 +18,7 @@ Many other Reuters Graphics components use `GraphicBlock` to wrap graphics with
<GraphicBlock
title="Title for my chart"
description="Some description for your chart."
notes="Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"
notes={`Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)`}
>
<!-- Your chart goes here -->
<div id="my-chart" />

2
src/components/GraphicBlock/GraphicBlock.stories.svelte
View file

@ -27,7 +27,7 @@
<GraphicBlock
title="Title for my chart"
description="Some description for your chart."
notes="Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"
notes={`Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)`}
>
<div id="my-chart">
<img src={PlaceholderImg} alt="placeholder" />

117
src/components/GraphicBlock/GraphicBlock.svelte
View file

@ -74,72 +74,75 @@
}: Props = $props();
</script>
<Block {id} {snap} {role} {width} {ariaLabel} class="graphic fmy-6 {cls}">
<!-- Check if `title` is a snippet -->
{#if typeof title === 'string'}
<PaddingReset containerIsFluid={width === 'fluid'}>
<TextBlock width={textWidth}>
<h3>{title}</h3>
{#if description}
<Markdown source={description} />
<div class="container">
<Block {id} {snap} {role} {width} {ariaLabel} class="graphic fmy-6 {cls}">
<!-- Check if `title` is a snippet -->
{#if typeof title === 'string'}
<PaddingReset containerIsFluid={width === 'fluid'}>
<TextBlock width={textWidth}>
<h3>{title}</h3>
{#if description}
<Markdown source={description} />
{/if}
</TextBlock>
</PaddingReset>
{:else if title}
<PaddingReset containerIsFluid={width === 'fluid'}>
<TextBlock width={textWidth}>
<!-- Custom title snippet -->
{@render title()}
</TextBlock>
</PaddingReset>
{/if}
<AriaHidden hidden={!!ariaDescription}>
<!-- Graphic content -->
{@render children()}
</AriaHidden>
{#if ariaDescription}
<div class="visually-hidden">
{#if typeof ariaDescription === 'string'}
<Markdown source={ariaDescription} />
{:else}
<!-- Custom ARIA snippet -->
{@render ariaDescription()}
{/if}
</TextBlock>
</PaddingReset>
{:else if title}
<PaddingReset containerIsFluid={width === 'fluid'}>
<TextBlock width={textWidth}>
<!-- Custom title snippet -->
{@render title()}
</TextBlock>
</PaddingReset>
{/if}
<AriaHidden hidden={!!ariaDescription}>
<!-- Graphic content -->
{@render children()}
</AriaHidden>
{#if ariaDescription}
<div class="visually-hidden">
{#if typeof ariaDescription === 'string'}
<Markdown source={ariaDescription} />
{:else}
<!-- Custom ARIA snippet -->
{@render ariaDescription()}
{/if}
</div>
{/if}
{#if typeof notes === 'string'}
<PaddingReset containerIsFluid={width === 'fluid'}>
<TextBlock width={textWidth}>
<aside>
<Markdown source={notes} />
</aside>
</TextBlock>
</PaddingReset>
{:else if notes}
<PaddingReset containerIsFluid={width === 'fluid'}>
<TextBlock width={textWidth}>
<!-- Custom notes content -->
{@render notes()}
</TextBlock>
</PaddingReset>
{/if}
</Block>
</div>
{/if}
{#if typeof notes === 'string'}
<PaddingReset containerIsFluid={width === 'fluid'}>
<TextBlock width={textWidth}>
<aside>
<Markdown source={notes} />
</aside>
</TextBlock>
</PaddingReset>
{:else if notes}
<PaddingReset containerIsFluid={width === 'fluid'}>
<TextBlock width={textWidth}>
<!-- Custom notes content -->
{@render notes()}
</TextBlock>
</PaddingReset>
{/if}
</Block>
</div>
<style lang="scss" global>
<style lang="scss">
@use '../../scss/mixins' as mixins;
.article-block.graphic {
div.container {
display: contents;
// Dek
p {
:global(.article-block.graphic p) {
@include mixins.body-note;
@include mixins.font-light;
}
// Caption and Sources
aside {
p {
@include mixins.body-caption;
@include mixins.fmy-1;
}
:global(.article-block.graphic aside p) {
@include mixins.body-caption;
@include mixins.fmy-1;
}
}
</style>

1
src/components/GraphicBlock/components/TextBlock.svelte
View file

@ -3,6 +3,7 @@
import type { ContainerWidth } from '../../@types/global';
import Block from '../../Block/Block.svelte';
interface Props {
/** Width of the component within the text well. */
width?: ContainerWidth;