181 lines
9.9 KiB
JavaScript
181 lines
9.9 KiB
JavaScript
import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as r}from"./index-CO-0pc0F.js";import{M as a,C as s}from"./index-Z-6k0Xrj.js";import{G as o,D as c,A as h,C as l,a as p,b as d}from"./GraphicBlock.stories-HeBLcngG.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./GraphicBlock-uLJTqaY1.js";import"./Block-D3Ui8rd-.js";import"./PaddingReset-_TGvg1_B.js";import"./Markdown-DUxFwijc.js";import"./each-CVpBMMjG.js";import"./size-DMdj3-I9.js";function i(n){const t={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...r(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{of:o}),`
|
|
`,e.jsx(t.h1,{id:"graphicblock",children:"GraphicBlock"}),`
|
|
`,e.jsxs(t.p,{children:["The ",e.jsx(t.code,{children:"GraphicBlock"})," component is a special derivative of the ",e.jsx(t.a,{href:"?path=/docs/components-page-layout-block--docs",children:"Block"})," component that wraps around your graphic. It also adds a title, description, notes and other text elements."]}),`
|
|
`,e.jsxs(t.p,{children:["Many other Reuters Graphics components use ",e.jsx(t.code,{children:"GraphicBlock"})," to wrap graphics with styled text."]}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<script>
|
|
import { GraphicBlock } from '@reuters-graphics/graphics-components';
|
|
<\/script>
|
|
|
|
<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)\`}
|
|
>
|
|
<!-- Your chart goes here -->
|
|
<div id="my-chart" />
|
|
</GraphicBlock>
|
|
`})}),`
|
|
`,e.jsx(s,{of:c}),`
|
|
`,e.jsx(t.h2,{id:"using-with-ai2svelte-and-archieml-docs",children:"Using with ai2svelte and ArchieML docs"}),`
|
|
`,e.jsxs(t.p,{children:["The ",e.jsx(t.code,{children:"GraphicBlock"})," component is built to handle ",e.jsx(t.a,{href:"https://github.com/reuters-graphics/ai2svelte",rel:"nofollow",children:"ai2svelte"})," graphics in graphics kit."]}),`
|
|
`,e.jsx(t.p,{children:"You'll likely get your text value from an ArchieML doc..."}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-yaml",children:`# ArchieML doc
|
|
[blocks]
|
|
type: ai-graphic
|
|
width: normal
|
|
chart: AiMap # IMPORTANT: This must match the name of the ai2svelte chart you import in App.svelte
|
|
title: Earthquake in Haiti
|
|
description: The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021.
|
|
notes: \\Note: A shakemap represents the ground shaking produced by an earthquake.
|
|
|
|
\\Source: USGIS
|
|
:end
|
|
altText: A map that shows the shake intensity of the earthquake, which was worst in central Haiti.
|
|
:end
|
|
[]
|
|
`})}),`
|
|
`,e.jsxs(t.p,{children:["... which you'll parse out of a ArchieML block object before passing to the ",e.jsx(t.code,{children:"GraphicBlock"})," component."]}),`
|
|
`,e.jsxs(t.p,{children:["To pass your ai2svelte graphic into ",e.jsx(t.code,{children:"GraphicBlock"})," component, import your ai2svelte graphic at the top of ",e.jsx(t.code,{children:"App.svelte"})," and add it to the ",e.jsx(t.code,{children:"aiCharts"})," object."]}),`
|
|
`,e.jsxs(t.blockquote,{children:[`
|
|
`,e.jsxs(t.p,{children:[e.jsx(t.strong,{children:"Important❗:"})," Make sure that the value for ",e.jsx(t.code,{children:"chart"})," in the ArchieML doc matches the name of the ai2svelte file imported in ",e.jsx(t.code,{children:"App.svelte"}),"."]}),`
|
|
`]}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<!-- App.svelte -->
|
|
<script>
|
|
// IMPORTANT: The name of your ai2svelte chart must match \`chart\` in your ArchieML doc
|
|
import AiMap from './ai2svelte/my-map.svelte';
|
|
// Error handler for missing ai2svelte charts
|
|
import LogBlock from './components/dev/LogBlock.svelte';
|
|
|
|
// If using with the graphics kit
|
|
import { assets } from '$app/paths';
|
|
|
|
// A built-in helper function in Graphis Kit for validating container width
|
|
import { containerWidth } from '$utils/propValidators';
|
|
|
|
// Add your imported ai2svelte charts to this object
|
|
const aiCharts = {
|
|
AiMap,
|
|
// Other ai2svelte graphics...
|
|
};
|
|
<\/script>
|
|
|
|
<!-- Loop through ArchieML blocks -->
|
|
{#each content.blocks as block}
|
|
{#if block.type === 'ai-graphic'}
|
|
{#if !aiCharts[block.chart]}
|
|
<!-- Error message for when the ai2svelte chart is missing -->
|
|
<LogBlock message={\`Unable to find "\${block.chart}" in aiCharts\`} />
|
|
{:else}
|
|
<!-- Get the ai2svelte graphic specified by \`chart\` in ArchieML -->
|
|
{@const AiChart = aiCharts[block.chart]}
|
|
<GraphicBlock
|
|
id={block.chart}
|
|
width={containerWidth(block.width)}
|
|
title={block.title}
|
|
description={block.description}
|
|
notes={block.notes}
|
|
ariaDescription={block.altText}
|
|
>
|
|
<!-- In graphics kit, pass the \`assetsPath\` prop -->
|
|
<AiChart assetsPath={assets || '/'} />
|
|
</GraphicBlock>
|
|
{/if}
|
|
{/if}
|
|
{/each}
|
|
`})}),`
|
|
`,e.jsx(s,{of:h}),`
|
|
`,e.jsx(t.h2,{id:"custom-text",children:"Custom text"}),`
|
|
`,e.jsxs(t.p,{children:["You can override the default styles for title and notes by making your own custom elements and passing them as ",e.jsx(t.code,{children:"title"})," and ",e.jsx(t.code,{children:"notes"})," ",e.jsx(t.a,{href:"https://svelte.dev/docs/svelte/snippet",rel:"nofollow",children:"snippets"})," instead of as strings:"]}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<GraphicBlock>
|
|
<!-- Custom title snippet -->
|
|
{#snippet title()}
|
|
<h5>My smaller title</h5>
|
|
{/snippet}
|
|
|
|
<!-- Your graphic -->
|
|
<div id="my-chart"></div>
|
|
|
|
<!-- Custom notes snippet -->
|
|
{#snippet notes()}
|
|
<aside>
|
|
<p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
|
|
</aside>
|
|
{/snippet}
|
|
</GraphicBlock>
|
|
`})}),`
|
|
`,e.jsx(s,{of:l}),`
|
|
`,e.jsx(t.h2,{id:"aria-descriptions",children:"ARIA descriptions"}),`
|
|
`,e.jsxs(t.p,{children:["If the text in your chart isn't easily read by screen readers — for example, a map with annotations that wouldn't make sense without the visual — add an ",e.jsx(t.code,{children:"ariaDescription"})," that describes the chart."]}),`
|
|
`,e.jsxs(t.p,{children:["The ",e.jsx(t.code,{children:"ariaDescription"})," string will be processed as markdown, so you can add multiple paragraphs, links, headers, etc. in markdown."]}),`
|
|
`,e.jsxs(t.blockquote,{children:[`
|
|
`,e.jsxs(t.p,{children:[e.jsx(t.strong,{children:"Note:"})," When you set an ",e.jsx(t.code,{children:"ariaDescription"}),", your graphic will be automatically wrapped in a div with ",e.jsx(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden",rel:"nofollow",children:'aria-hidden="true"'}),", which tells screen readers to read the hidden ARIA description and skip the text in the graphic."]}),`
|
|
`]}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<GraphicBlock
|
|
title="Earthquake in Haiti"
|
|
description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
|
|
notes="Note: A shakemap represents the ground shaking produced by an earthquake."
|
|
ariaDescription="A map showing the shake intensity produced by the earthquake."
|
|
>
|
|
<!-- In graphics kit, pass the \`assetsPath\` prop -->
|
|
<AiChart assetsPath={assets || '/'} />
|
|
</GraphicBlock>
|
|
`})}),`
|
|
`,e.jsx(s,{of:p}),`
|
|
`,e.jsx(t.h2,{id:"custom-aria-descriptions",children:"Custom ARIA descriptions"}),`
|
|
`,e.jsxs(t.p,{children:["Sometimes, instead of a simple sentence, we want to provide a data table or something more complex as an ARIA description. To do this, pass the custom elements as an ",e.jsx(t.code,{children:"ariaDescription"})," ",e.jsx(t.a,{href:"https://svelte.dev/docs/svelte/snippet",rel:"nofollow",children:"snippet"})," instead of as a string, as in the ",e.jsx(t.a,{href:"?path=/docs/components-graphics-graphicblock--docs#aria-descriptions",children:"example above"}),"."]}),`
|
|
`,e.jsxs(t.p,{children:[e.jsx(t.a,{href:"https://accessibility.psu.edu/images/charts/",rel:"nofollow",children:"Read this"})," for more information on using screen reader data tables for charts."]}),`
|
|
`,e.jsxs(t.blockquote,{children:[`
|
|
`,e.jsxs(t.p,{children:[e.jsx(t.strong,{children:"Note:"})," The ",e.jsx(t.code,{children:"customAria"})," snippet will override the ",e.jsx(t.code,{children:"ariaDescription"})," and will also hide the text in your graphic from screen readers."]}),`
|
|
`]}),`
|
|
`,e.jsx(t.pre,{children:e.jsx(t.code,{className:"language-svelte",children:`<GraphicBlock
|
|
title="Earthquake in Haiti"
|
|
description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
|
|
notes="Note: A shakemap represents the ground shaking produced by an earthquake."
|
|
>
|
|
<!-- In graphics kit, pass the \`assetsPath\` prop -->
|
|
<AiChart assetsPath={assets || '/'} />
|
|
|
|
<!-- Custom ARIA description snippet -->
|
|
{#snippet ariaDescription()}
|
|
<p>
|
|
A shakemap shows the intensity of the 7.2-magnitude earthquake that struck
|
|
Haiti at 8:29 a.m. EST, Aug. 14, 2021.
|
|
</p>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th>City</th>
|
|
<th>Felt shake strength</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Les Cayes</td>
|
|
<td>Very strong</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Jeremie</td>
|
|
<td>Strong</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
{/snippet}
|
|
</GraphicBlock>
|
|
|
|
<!-- Optionally, style the visually hidden table nicely for sighted readers who use screen readers -->
|
|
<style lang="scss">
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
|
|
th,
|
|
td {
|
|
border: 1px solid #ddd;
|
|
padding: 8px;
|
|
}
|
|
|
|
th {
|
|
background-color: #f2f2f2;
|
|
}
|
|
}
|
|
</style>
|
|
`})}),`
|
|
`,e.jsx(s,{of:d})]})}function R(n={}){const{wrapper:t}={...r(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(i,{...n})}):i(n)}export{R as default};
|