Merge pull request #130 from UrbanInstitute/patch_datawrapperswitching

Patch for datawrapperswitching
UrbanInstitute · Jan 10, 2025 · 7259b8b · 7259b8b
2 parents 79890cb + b19b9f3
commit 7259b8b
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Next
 
+## v0.12.6
+- Patch: DatawrapperSwitching story to wrap the bottom block in `if` instead of `key`. 
+
 ## v0.12.5
 - Patch: Headline eyebrows in Drupal include a link to the Story or Data tool homepage; tweaked Headline component to do the same.
 - Fix: CSS Theme variable --color-green was #ffb748, which is a kind of yellow. Changed to match style guide.

diff --git a/src/docs/stories/DatawrapperSwitching.stories.svelte b/src/docs/stories/DatawrapperSwitching.stories.svelte
@@ -34,7 +34,20 @@
     }
   ];
 
-  let selectedChartLoading = "WsGs1";
+  const loadingChartData = [
+    {
+      value: "Toh1S",
+      label: "Chart #1",
+      ariaLabel: "Quis id magna ut esse qui nostrud magna."
+    },
+    {
+      value: "rgLU1",
+      label: "Chart #2",
+      ariaLabel: "Quis id magna ut esse qui nostrud magna."
+    }
+  ];
+  let selectedChartLoading = "Toh1S";
+  $: selectedChartLoadingMetadata = loadingChartData.find((d) => d.value === selectedChartLoading);
 </script>
 
 <Story
@@ -74,13 +87,13 @@
   placeholder={null}
 />
 
-{#key selectedChart}
+{#if selectedChartMetaData}
   <DatawrapperIframe
     datawrapperId={selectedChartMetadata.value}
     title={selectedChartMetadata.label}
     ariaLabel={selectedChartMetadata.ariaLabel}
   />
-{/key}
+{/if}
 `}
 >
   <BasicDropdown
@@ -90,13 +103,13 @@
     bind:value={selectedChart}
     placeholder={null}
   />
-  {#key selectedChart}
+  {#if selectedChartMetadata}
     <DatawrapperIframe
       datawrapperId={selectedChartMetadata.value}
       title={selectedChartMetadata.label}
       ariaLabel={selectedChartMetadata.ariaLabel}
     />
-  {/key}
+  {/if}
 </Story>
 
 <Story
@@ -111,21 +124,25 @@
 <Button on:click={() => (selectedChart = "91Q0t")}>Chart #2</Button>
 <Button on:click={() => (selectedChart = "eaD2D")}>Chart #3</Button>
 
-{#key selectedChart}
+{#if selectedChartMetadata}
   <DatawrapperIframe
     datawrapperId={selectedChartMetadata.value}
     title={selectedChartMetadata.label}
     ariaLabel={selectedChartMetadata.ariaLabel}
   />
-{/key}
+{/if}
   `}
 >
   <Button on:click={() => (selectedChart = "AHpJL")}>Chart #1</Button>
   <Button on:click={() => (selectedChart = "91Q0t")}>Chart #2</Button>
   <Button on:click={() => (selectedChart = "eaD2D")}>Chart #3</Button>
-  {#key selectedChart}
-    <DatawrapperIframe datawrapperId={selectedChart} />
-  {/key}
+  {#if selectedChart}
+    <DatawrapperIframe
+      datawrapperId={selectedChartMetadata.value}
+      title={selectedChartMetadata.label}
+      ariaLabel={selectedChartMetadata.ariaLabel}
+    />
+  {/if}
 </Story>
 
 <Story
@@ -139,29 +156,33 @@
 <Button on:click={() => (selectedChart = "Toh1S")}>Chart #1</Button>
 <Button on:click={() => (selectedChart = "rgLU1")}>Chart #2</Button>
 
-{#key selectedChart}
-  <LoadingWrapper let:setChildLoaded let:setChildLoading>
-    <DatawrapperIframe
-      datawrapperId={selectedChartMetadata.value}
-      title={selectedChartMetadata.label}
-      ariaLabel={selectedChartMetadata.ariaLabel}
-      on:startrender={setChildLoading}
-      on:visrendered={setChildLoaded}
-    />
-  </LoadingWrapper>
-{/key}
+  {#if selectedChartMetadata}
+    <LoadingWrapper let:setChildLoaded let:setChildLoading>
+      {#key selectedChart}
+        <DatawrapperIframe
+          datawrapperId={selectedChartMetadata.value}
+          title={selectedChartMetadata.label}
+          ariaLabel={selectedChartMetadata.ariaLabel}
+          on:startrender={setChildLoading}
+          on:visrendered={setChildLoaded}
+        />
+      {/key}
+    </LoadingWrapper>
+  {/if}
 `}
 >
-  <Button on:click={() => (selectedChart = "Toh1S")}>Chart #1</Button>
-  <Button on:click={() => (selectedChart = "rgLU1")}>Chart #2</Button>
+  <Button on:click={() => (selectedChartLoading = "Toh1S")}>Chart #1</Button>
+  <Button on:click={() => (selectedChartLoading = "rgLU1")}>Chart #2</Button>
 
-  {#key selectedChart}
+  {#if selectedChartLoadingMetadata}
     <LoadingWrapper let:setChildLoaded let:setChildLoading>
-      <DatawrapperIframe
-        datawrapperId={selectedChartLoading}
-        on:startrender={setChildLoading}
-        on:visrendered={setChildLoaded}
-      />
+      {#key selectedChartLoading}
+        <DatawrapperIframe
+          datawrapperId={selectedChartLoadingMetadata.value}
+          on:startrender={setChildLoading}
+          on:visrendered={setChildLoaded}
+        />
+      {/key}
     </LoadingWrapper>
-  {/key}
+  {/if}
 </Story>