From 2067283d7debd7b0277246e571488cfdd1bae98e Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Fri, 4 Apr 2025 20:35:14 +0100
Subject: [PATCH] fixes styles for chart text furniture. fixes newlines in demo

---
 src/components/GraphicBlock/GraphicBlock.mdx  |   2 +-
 .../GraphicBlock/GraphicBlock.stories.svelte  |   2 +-
 .../GraphicBlock/GraphicBlock.svelte          | 117 +++++++++---------
 .../GraphicBlock/components/TextBlock.svelte  |   1 +
 4 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/src/components/GraphicBlock/GraphicBlock.mdx b/src/components/GraphicBlock/GraphicBlock.mdx
index 3df1e4e3..10ef9fea 100644
--- a/src/components/GraphicBlock/GraphicBlock.mdx
+++ b/src/components/GraphicBlock/GraphicBlock.mdx
@@ -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" />
diff --git a/src/components/GraphicBlock/GraphicBlock.stories.svelte b/src/components/GraphicBlock/GraphicBlock.stories.svelte
index 07c70115..f19268eb 100644
--- a/src/components/GraphicBlock/GraphicBlock.stories.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.stories.svelte
@@ -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" />
diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
index 0ae66ca8..e8cef209 100644
--- a/src/components/GraphicBlock/GraphicBlock.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.svelte
@@ -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>
diff --git a/src/components/GraphicBlock/components/TextBlock.svelte b/src/components/GraphicBlock/components/TextBlock.svelte
index b354973a..c7413fd5 100644
--- a/src/components/GraphicBlock/components/TextBlock.svelte
+++ b/src/components/GraphicBlock/components/TextBlock.svelte
@@ -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;