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};