Revert "Patch for datawrapperswitching"

UrbanInstitute · Jan 10, 2025 · 5ed49b0 · 5ed49b0
1 parent 7259b8b
commit 5ed49b0
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 54 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,9 +2,6 @@
 
 ## 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,20 +34,7 @@
     }
   ];
 
-  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);
+  let selectedChartLoading = "WsGs1";
 </script>
 
 <Story
@@ -87,13 +74,13 @@
   placeholder={null}
 />
 
-{#if selectedChartMetaData}
+{#key selectedChart}
   <DatawrapperIframe
     datawrapperId={selectedChartMetadata.value}
     title={selectedChartMetadata.label}
     ariaLabel={selectedChartMetadata.ariaLabel}
   />
-{/if}
+{/key}
 `}
 >
   <BasicDropdown
@@ -103,13 +90,13 @@
     bind:value={selectedChart}
     placeholder={null}
   />
-  {#if selectedChartMetadata}
+  {#key selectedChart}
     <DatawrapperIframe
       datawrapperId={selectedChartMetadata.value}
       title={selectedChartMetadata.label}
       ariaLabel={selectedChartMetadata.ariaLabel}
     />
-  {/if}
+  {/key}
 </Story>
 
 <Story
@@ -124,25 +111,21 @@
 <Button on:click={() => (selectedChart = "91Q0t")}>Chart #2</Button>
 <Button on:click={() => (selectedChart = "eaD2D")}>Chart #3</Button>
 
-{#if selectedChartMetadata}
+{#key selectedChart}
   <DatawrapperIframe
     datawrapperId={selectedChartMetadata.value}
     title={selectedChartMetadata.label}
     ariaLabel={selectedChartMetadata.ariaLabel}
   />
-{/if}
+{/key}
   `}
 >
   <Button on:click={() => (selectedChart = "AHpJL")}>Chart #1</Button>
   <Button on:click={() => (selectedChart = "91Q0t")}>Chart #2</Button>
   <Button on:click={() => (selectedChart = "eaD2D")}>Chart #3</Button>
-  {#if selectedChart}
-    <DatawrapperIframe
-      datawrapperId={selectedChartMetadata.value}
-      title={selectedChartMetadata.label}
-      ariaLabel={selectedChartMetadata.ariaLabel}
-    />
-  {/if}
+  {#key selectedChart}
+    <DatawrapperIframe datawrapperId={selectedChart} />
+  {/key}
 </Story>
 
 <Story
@@ -156,33 +139,29 @@
 <Button on:click={() => (selectedChart = "Toh1S")}>Chart #1</Button>
 <Button on:click={() => (selectedChart = "rgLU1")}>Chart #2</Button>
 
-  {#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}
+{#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}
 `}
 >
-  <Button on:click={() => (selectedChartLoading = "Toh1S")}>Chart #1</Button>
-  <Button on:click={() => (selectedChartLoading = "rgLU1")}>Chart #2</Button>
+  <Button on:click={() => (selectedChart = "Toh1S")}>Chart #1</Button>
+  <Button on:click={() => (selectedChart = "rgLU1")}>Chart #2</Button>
 
-  {#if selectedChartLoadingMetadata}
+  {#key selectedChart}
     <LoadingWrapper let:setChildLoaded let:setChildLoading>
-      {#key selectedChartLoading}
-        <DatawrapperIframe
-          datawrapperId={selectedChartLoadingMetadata.value}
-          on:startrender={setChildLoading}
-          on:visrendered={setChildLoaded}
-        />
-      {/key}
+      <DatawrapperIframe
+        datawrapperId={selectedChartLoading}
+        on:startrender={setChildLoading}
+        on:visrendered={setChildLoaded}
+      />
     </LoadingWrapper>
-  {/if}
+  {/key}
 </Story>