From 481ee54c00ef62d99f6cac11baa5b971c3accc24 Mon Sep 17 00:00:00 2001
From: abajak <aleszu.bajak@gmail.com>
Date: Wed, 8 Jan 2025 15:31:32 -0500
Subject: [PATCH 1/3] trying to patch datawrapperswitching

---
 CHANGELOG.md                                         | 3 +++
 src/docs/stories/DatawrapperSwitching.stories.svelte | 8 ++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9cd51aa..29906eb 100644
--- 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
index 9f6e09d..995a4c4 100644
--- a/src/docs/stories/DatawrapperSwitching.stories.svelte
+++ b/src/docs/stories/DatawrapperSwitching.stories.svelte
@@ -90,13 +90,13 @@
     bind:value={selectedChart}
     placeholder={null}
   />
-  {#key selectedChart}
+  {#if selectedChart}
     <DatawrapperIframe
       datawrapperId={selectedChartMetadata.value}
       title={selectedChartMetadata.label}
       ariaLabel={selectedChartMetadata.ariaLabel}
     />
-  {/key}
+  {/if}
 </Story>
 
 <Story
@@ -155,7 +155,7 @@
   <Button on:click={() => (selectedChart = "Toh1S")}>Chart #1</Button>
   <Button on:click={() => (selectedChart = "rgLU1")}>Chart #2</Button>
 
-  {#key selectedChart}
+  {#if selectedChart}
     <LoadingWrapper let:setChildLoaded let:setChildLoading>
       <DatawrapperIframe
         datawrapperId={selectedChartLoading}
@@ -163,5 +163,5 @@
         on:visrendered={setChildLoaded}
       />
     </LoadingWrapper>
-  {/key}
+  {/if}
 </Story>

From 167124417a5d3c03760d31b17ae14b54d5f7ec5d Mon Sep 17 00:00:00 2001
From: mitchthorson <mitchell@mitchellthorson.com>
Date: Fri, 10 Jan 2025 12:25:17 -0500
Subject: [PATCH 2/3] Update documentation and usage of {#if} and {#keys}

Both the simple and the more complex exmamples on this page now work as
expected.

Updated the example code to more closely match the stories themselves as
well.
---
 .../DatawrapperSwitching.stories.svelte       | 79 ++++++++++++-------
 1 file changed, 51 insertions(+), 28 deletions(-)

diff --git a/src/docs/stories/DatawrapperSwitching.stories.svelte b/src/docs/stories/DatawrapperSwitching.stories.svelte
index 995a4c4..04e7740 100644
--- a/src/docs/stories/DatawrapperSwitching.stories.svelte
+++ b/src/docs/stories/DatawrapperSwitching.stories.svelte
@@ -34,7 +34,22 @@
     }
   ];
 
-  let selectedChartLoading = "WsGs1";
+  // <Button on:click={() => (selectedChart = "toh1s")}>Chart #1</Button>
+  // <Button on:click={() => (selectedChart = "rgLU1")}>Chart #2</Button>
+  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 +89,13 @@
   placeholder={null}
 />
 
-{#key selectedChart}
+{#if selectedChartMetaData}
   <DatawrapperIframe
     datawrapperId={selectedChartMetadata.value}
     title={selectedChartMetadata.label}
     ariaLabel={selectedChartMetadata.ariaLabel}
   />
-{/key}
+{/if}
 `}
 >
   <BasicDropdown
@@ -90,7 +105,7 @@
     bind:value={selectedChart}
     placeholder={null}
   />
-  {#if selectedChart}
+  {#if selectedChartMetadata}
     <DatawrapperIframe
       datawrapperId={selectedChartMetadata.value}
       title={selectedChartMetadata.label}
@@ -111,21 +126,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 +158,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>
 
-  {#if 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>
   {/if}
 </Story>

From b19b9f3e077a9d8ed38f401191346ce8c9acc7b4 Mon Sep 17 00:00:00 2001
From: mitchthorson <mitchell@mitchellthorson.com>
Date: Fri, 10 Jan 2025 12:27:29 -0500
Subject: [PATCH 3/3] Clean up and format code

---
 src/docs/stories/DatawrapperSwitching.stories.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/docs/stories/DatawrapperSwitching.stories.svelte b/src/docs/stories/DatawrapperSwitching.stories.svelte
index 04e7740..62ada00 100644
--- a/src/docs/stories/DatawrapperSwitching.stories.svelte
+++ b/src/docs/stories/DatawrapperSwitching.stories.svelte
@@ -34,8 +34,6 @@
     }
   ];
 
-  // <Button on:click={() => (selectedChart = "toh1s")}>Chart #1</Button>
-  // <Button on:click={() => (selectedChart = "rgLU1")}>Chart #2</Button>
   const loadingChartData = [
     {
       value: "Toh1S",
@@ -46,7 +44,7 @@
       value: "rgLU1",
       label: "Chart #2",
       ariaLabel: "Quis id magna ut esse qui nostrud magna."
-    },
+    }
   ];
   let selectedChartLoading = "Toh1S";
   $: selectedChartLoadingMetadata = loadingChartData.find((d) => d.value === selectedChartLoading);