updates snippet prop names

src/components/GraphicBlock/GraphicBlock.mdx

@@ -6,7 +6,7 @@ import * as GraphicBlockStories from './GraphicBlock.stories.svelte';
 
 # GraphicBlock
 
-The `GraphicBlock` component is a special derivative of the [Block](./?path=/docs/layout-block) component that wraps around your graphic. It also adds a title, description, notes and other text elements.
+The `GraphicBlock` component is a special derivative of the [Block](?path=/docs/components-page-layout-block--docs) component that wraps around your graphic. It also adds a title, description, notes and other text elements.
 
 Many other Reuters Graphics components use `GraphicBlock` to wrap graphics with styled text.
 
@@ -106,12 +106,12 @@ To pass your ai2svelte graphic into `GraphicBlock` component, import your ai2sve
 
 ## Custom text
 
-You can override the default styles for title and notes by making your own custom elements with the `customTitle` and `customNotes` [snippets](https://svelte.dev/docs/svelte/snippet):
+You can override the default styles for title and notes by making your own custom elements and passing them as `title` and `notes` [snippets](https://svelte.dev/docs/svelte/snippet) instead of as strings:
 
 ```svelte
 <GraphicBlock>
   <!-- Custom title snippet -->
-  {#snippet customTitle()}
+  {#snippet title()}
     <h5>My smaller title</h5>
   {/snippet}
 
@@ -119,7 +119,7 @@ You can override the default styles for title and notes by making your own custo
   <div id="my-chart"></div>
 
   <!-- Custom notes snippet -->
-  {#snippet customNotes()}
+  {#snippet notes()}
     <aside>
       <p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
     </aside>
@@ -153,7 +153,7 @@ The `ariaDescription` string will be processed as markdown, so you can add multi
 
 ## Custom ARIA descriptions
 
-Sometimes, instead of a simple sentence, we want to provide a data table or something more complex as an ARIA description. To do this, use the `customAria` [snippet](https://svelte.dev/docs/svelte/snippet).
+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 `ariaDescription` [snippet](https://svelte.dev/docs/svelte/snippet) instead of as a string, as in the [example above](?path=/docs/components-graphics-graphicblock--docs#aria-descriptions).
 
 [Read this](https://accessibility.psu.edu/images/charts/) for more information on using screen reader data tables for charts.
 
@@ -169,7 +169,7 @@ Sometimes, instead of a simple sentence, we want to provide a data table or some
   <AiChart assetsPath={assets || '/'} />
 
   <!-- Custom ARIA description snippet -->
-  {#snippet customAria()}
+  {#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.

src/components/GraphicBlock/GraphicBlock.stories.svelte

@@ -51,11 +51,11 @@
       <img src={PlaceholderImg} alt="placeholder" />
     </div>
 
-    {#snippet customTitle()}
+    {#snippet title()}
       <h5>My smaller title</h5>
     {/snippet}
 
-    {#snippet customNotes()}
+    {#snippet notes()}
       <aside>
         <p><strong>Note:</strong> Data current as of Aug. 2, 2022.</p>
       </aside>
@@ -81,7 +81,7 @@
     notes="Note: A shakemap represents the ground shaking produced by an earthquake."
   >
     <AiMap />
-    {#snippet customAria()}
+    {#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.

src/components/GraphicBlock/GraphicBlock.svelte

@@ -29,11 +29,9 @@
      */
     role?: string;
     /**
-     * Notes to the graphic, passed in as a markdown string.
+     * Notes to the graphic, passed in as a markdown string OR as a custom snippet.
      */
-    notes?: string;
+    notes?: string | Snippet;
-    /** Custom notes snippet */
-    customNotes?: Snippet;
     /**
      * Width of the component within the text well.
      */
@@ -43,11 +41,9 @@
      */
     textWidth?: ContainerWidth;
     /**
-     * Title of the graphic
+     * Title of the graphic as a string or a custom snippet.
      */
-    title?: string;
+    title?: string | Snippet;
-    /** Custom title snippet */
-    customTitle?: Snippet;
     /**
      * Description of the graphic, passed in as a markdown string.
      */
@@ -57,11 +53,9 @@
      */
     ariaLabel?: string;
     /**
-     * ARIA description, passed in as a markdown string.
+     * ARIA description, passed in as a markdown string OR as a custom snippet.
      */
-    ariaDescription?: string;
+    ariaDescription?: string | Snippet;
-    /** Custom ARIA snippet */
-    customAria?: Snippet;
   }
 
   let {
@@ -71,27 +65,18 @@
     snap = false,
     role,
     notes,
-    customNotes,
     width = 'normal',
     textWidth = 'normal',
     title,
-    customTitle,
     description,
     ariaLabel = 'chart',
     ariaDescription,
-    customAria,
   }: Props = $props();
 </script>
 
 <Block {id} {snap} {role} {width} {ariaLabel} class="graphic fmy-6 {cls}">
-  {#if customTitle}
+  <!-- Check if `title` is a snippet -->
-    <PaddingReset containerIsFluid={width === 'fluid'}>
+  {#if typeof title === 'string'}
-      <TextBlock width={textWidth}>
-        <!-- Custom title snippet -->
-        {@render customTitle()}
-      </TextBlock>
-    </PaddingReset>
-  {:else if title}
     <PaddingReset containerIsFluid={width === 'fluid'}>
       <TextBlock width={textWidth}>
         <h3>{title}</h3>
@@ -100,29 +85,29 @@
         {/if}
       </TextBlock>
     </PaddingReset>
+  {:else if title}
+    <PaddingReset containerIsFluid={width === 'fluid'}>
+      <TextBlock width={textWidth}>
+        <!-- Custom title snippet -->
+        {@render title()}
+      </TextBlock>
+    </PaddingReset>
   {/if}
-  <AriaHidden hidden={!!customAria || !!ariaDescription}>
+  <AriaHidden hidden={!!ariaDescription}>
     <!-- Graphic content -->
     {@render children()}
   </AriaHidden>
-  {#if customAria || ariaDescription}
+  {#if ariaDescription}
     <div class="visually-hidden">
-      {#if customAria}
+      {#if typeof ariaDescription === 'string'}
-        <!-- Custom ARIA snippet -->
-        {@render customAria()}
-      {:else if ariaDescription}
         <Markdown source={ariaDescription} />
+      {:else}
+        <!-- Custom ARIA snippet -->
+        {@render ariaDescription()}
       {/if}
     </div>
   {/if}
-  {#if customNotes}
+  {#if typeof notes === 'string'}
-    <PaddingReset containerIsFluid={width === 'fluid'}>
-      <TextBlock width={textWidth}>
-        <!-- Custom notes content -->
-        {@render customNotes()}
-      </TextBlock>
-    </PaddingReset>
-  {:else if notes}
     <PaddingReset containerIsFluid={width === 'fluid'}>
       <TextBlock width={textWidth}>
         <aside>
@@ -130,6 +115,13 @@
         </aside>
       </TextBlock>
     </PaddingReset>
+  {:else if notes}
+    <PaddingReset containerIsFluid={width === 'fluid'}>
+      <TextBlock width={textWidth}>
+        <!-- Custom notes content -->
+        {@render notes()}
+      </TextBlock>
+    </PaddingReset>
   {/if}
 </Block>