update datawrapper iframe, headings, and logos

src/lib/DatawrapperIframe/DatawrapperIframe.docs.md

@@ -0,0 +1,11 @@
+Datawrapper iframe with [event dispatching](https://developer.datawrapper.de/docs/listening-to-chart-interaction-events) enabled. All interaction events are accessible via `on:eventname` (**no periods**) on the `DatawrapperIframe` Svelte component itself. The complete event list and associated descriptions can be found [here](https://developer.datawrapper.de/docs/listening-to-chart-interaction-events#visualization-events).
+
+Examples of how to setup "switching" between Datawrapper charts with a dropdown or button controls can be found [in the Examples section here](/docs/examples-datawrapper-switching--docs).
+
+In April 2024, the `vis.rendered` event was added to the Datawrapper event list (per the Urban team's request) in order to track when a visualization had been rendered/painted on the page. This is useful if there is a longer loading visualization (like a large map) and you'd like to indicate to the user that the visualization is still loading.
+
+The `startrender` event is available via the component's `beforeUpdate()` function in order to track when the iframe starts to load. This can be combined with the `vis.rendered` event to track when the visualization has been rendered/painted on the page in combination with the [LoadingWrapper](/docs/components-loadingwrapper--docs) component.
+
+```js
+import { DatawrapperIframe } from "@urbaninstitute/dataviz-components";
+```

src/lib/DatawrapperIframe/DatawrapperIframe.stories.svelte

@@ -1,16 +1,15 @@
 <script context="module">
   import DatawrapperIframe from "./DatawrapperIframe.svelte";
+  import docs from "./DatawrapperIframe.docs.md?raw";
 
   export const meta = {
     title: "Components/DatawrapperIframe",
-    description: "Datawrapper iframe",
     component: DatawrapperIframe,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component:
-            "Datawrapper iframe with <a href='https://developer.datawrapper.de/docs/listening-to-chart-interaction-events' target='_blank'>event dispatching</a> enabled. All interaction events are accessible via <code>on:eventname</code> (<b>no periods</b>) on the `DatawrapperIframe` Svelte component itself. The complete event list and associated descriptions can be found <a href='https://developer.datawrapper.de/docs/listening-to-chart-interaction-events#visualization-events' target='_blank'>here</a>.<br/><br/>Examples of how to setup \"switching\" between Datawrapper charts with a dropdown or button controls can be found <a href='/docs/examples-datawrapper-switching--docs'>in the Examples section here</a>.<br/><br/>In April 2024, the <code>vis.rendered</code> event was added to the Datawrapper event list (per the Urban team's request) in order to track when a visualization had been rendered/painted on the page. This is useful if there is a longer loading visualization (like a large map) and you'd like to indicate to the user that the visualization is still loading.<br><br>The `startrender` event is available via the component's `beforeUpdate()` function in order to track when the iframe starts to load. This can be combined with the `vis.rendered` event to track when the visualization has been rendered/painted on the page in combination with the <a href='/docs/components-loadingwrapper--docs' >LoadingWrapper</a> component."
+          component: docs
         }
       },
       githubLink: {

src/lib/HeadingAlt/HeadingAlt.docs.md

@@ -0,0 +1,5 @@
+Alternate title heading in all caps, useful for h2 tags and lower.
+
+```js
+import { HeadingAlt } from "@urbaninstitute/dataviz-components";
+```

src/lib/HeadingAlt/HeadingAlt.stories.svelte

@@ -1,15 +1,15 @@
 <script context="module">
   import Heading from "./HeadingAlt.svelte";
+  import docs from "./HeadingAlt.docs.md?raw";
 
   export const meta = {
     title: "Components/HeadingAlt",
-    description: "A block for an alternate heading",
     component: Heading,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component: "Alternate title heading in all caps, useful for h2 tags and lower."
+          component: docs
         }
       },
       githubLink: {

src/lib/Headline/Headline.docs.md

@@ -0,0 +1,5 @@
+A basic headline component.
+
+```js
+import { Headline } from "@urbaninstitute/dataviz-components";
+```

src/lib/Headline/Headline.stories.svelte

@@ -1,9 +1,9 @@
 <script context="module">
   import Headline from "./Headline.svelte";
+  import docs from "./Headline.docs.md?raw";
 
   export const meta = {
     title: "Components/Headline",
-    description: "A basic headline",
     component: Headline,
     tags: ["autodocs"],
     argTypes: {
@@ -28,7 +28,7 @@
       },
       docs: {
         description: {
-          component: "A basic headline component."
+          component: docs
         }
       },
       githubLink: {

src/lib/LoadingWrapper/LoadingWrapper.docs.md

@@ -0,0 +1,5 @@
+Wrapper to display a loading spinner graphic while content is loading. Exposes `setChildLoading()` and `setChildLoaded()` to be used by children as an alternative method of setting `isChildLoading` boolean. Accepts an alternative graphic for the "graphic" named slot.
+
+```js
+import { LoadingWrapper } from "@urbaninstitute/dataviz-components";
+```

src/lib/LoadingWrapper/LoadingWrapper.stories.svelte

@@ -3,17 +3,16 @@
   import LoadingWrapper from "./LoadingWrapper.svelte";
   import LogoUrbanWide from "../LogoUrbanWide/LogoUrbanWide.svelte";
   import DatawrapperIframe from "../DatawrapperIframe/DatawrapperIframe.svelte";
+  import docs from "./LoadingWrapper.docs.md?raw";
 
   export const meta = {
     title: "Components/LoadingWrapper",
-    description: "Wrapper to display a loading spinner graphic while content is loading",
     component: LoadingWrapper,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component:
-            'Wrapper to display a loading spinner graphic while content is loading. Exposes `setChildLoading()` and `setChildLoaded()` to be used by children as an alternative method of setting `isChildLoading` boolean. Accepts an alternative graphic for the "graphic" named slot.'
+          component: docs
         }
       },
       githubLink: {

src/lib/LogoTPCBadge/LogoTPCBadge.docs.md

@@ -0,0 +1,5 @@
+Tax Policy Center logo in square badge format.
+
+```js
+import { LogoTPCBadge } from "@urbaninstitute/dataviz-components";
+```

src/lib/LogoTPCBadge/LogoTPCBadge.stories.svelte

@@ -1,15 +1,15 @@
 <script context="module">
-  import Logo from "./LogoTPCBadge.svelte";
+  import LogoTPCBadge from "./LogoTPCBadge.svelte";
+  import docs from "./LogoTPCBadge.docs.md?raw";
 
   export const meta = {
     title: "Logos/LogoTPCBadge",
-    description: "A Tax Policy Center logo",
-    component: Logo,
+    component: LogoTPCBadge,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component: "Tax Policy Center logo in square badge format."
+          component: docs
         }
       },
       githubLink: {
@@ -24,7 +24,7 @@
 </script>
 
 <Template let:args>
-  <Logo {...args} />
+  <LogoTPCBadge {...args} />
 </Template>
 
 <Story name="Default" />

src/lib/LogoUrban/LogoUrban.docs.md

@@ -0,0 +1,5 @@
+Urban Institute logo in full width format.
+
+```js
+import { LogoUrban } from "@urbaninstitute/dataviz-components";
+```

src/lib/LogoUrban/LogoUrban.stories.svelte

@@ -1,10 +1,10 @@
 <script context="module">
-  import Logo from "./LogoUrban.svelte";
+  import LogoUrban from "./LogoUrban.svelte";
+  import docs from "./LogoUrban.docs.md?raw";
 
   export const meta = {
     title: "Logos/LogoUrban",
-    description: "An Urban Institute full logo",
-    component: Logo,
+    component: LogoUrban,
     tags: ["autodocs"],
     argTypes: {
       variant: {
@@ -22,7 +22,7 @@
       },
       docs: {
         description: {
-          component: "Urban Institute logo in full width format."
+          component: docs
         }
       },
       githubLink: {
@@ -37,7 +37,7 @@
 </script>
 
 <Template let:args>
-  <Logo {...args} />
+  <LogoUrban {...args} />
 </Template>
 
 <Story name="Default" />

src/lib/LogoUrbanAnimated/LogoUrbanAnimated.docs.md

@@ -0,0 +1,5 @@
+An animated Urban Institute logo icon.
+
+```js
+import { LogoUrbanAnimated } from "@urbaninstitute/dataviz-components";
+```

src/lib/LogoUrbanAnimated/LogoUrbanAnimated.stories.svelte

@@ -1,15 +1,15 @@
 <script context="module">
   import LogoUrbanAnimated from "./LogoUrbanAnimated.svelte";
+  import docs from "./LogoUrbanAnimated.docs.md?raw";
 
   export const meta = {
     title: "Logos/LogoUrbanAnimated",
-    description: "An animated Urban logo icon",
     component: LogoUrbanAnimated,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component: "An animated Urban Institute logo icon"
+          component: docs
         }
       },
       githubLink: {

src/lib/LogoUrbanBadge/LogoUrbanBadge.docs.md

@@ -0,0 +1,5 @@
+Urban Institute logo in square badge format.
+
+```js
+import { LogoUrbanBadge } from "@urbaninstitute/dataviz-components";
+```

src/lib/LogoUrbanBadge/LogoUrbanBadge.stories.svelte

@@ -1,15 +1,15 @@
 <script context="module">
-  import Logo from "./LogoUrbanBadge.svelte";
+  import LogoUrbanBadge from "./LogoUrbanBadge.svelte";
+  import docs from "./LogoUrbanBadge.docs.md?raw";
 
   export const meta = {
     title: "Logos/LogoUrbanBadge",
-    description: "An Urban Institute badge logo",
-    component: Logo,
+    component: LogoUrbanBadge,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component: "Urban Institute logo in square badge format."
+          component: docs
         }
       },
       githubLink: {
@@ -24,7 +24,7 @@
 </script>
 
 <Template let:args>
-  <Logo {...args} />
+  <LogoUrbanBadge {...args} />
 </Template>
 
 <Story name="Default" />

src/lib/LogoUrbanWide/LogoUrbanWide.docs.md

@@ -0,0 +1,5 @@
+Urban Institute logo in wide format.
+
+```js
+import { LogoUrbanWide } from "@urbaninstitute/dataviz-components";
+```

src/lib/LogoUrbanWide/LogoUrbanWide.stories.svelte

@@ -1,10 +1,10 @@
 <script context="module">
-  import Logo from "./LogoUrbanWide.svelte";
+  import LogoUrbanWide from "./LogoUrbanWide.svelte";
+  import docs from "./LogoUrbanWide.docs.md?raw";
 
   export const meta = {
     title: "Logos/LogoUrbanWide",
-    description: "An Urban Institute wide logo",
-    component: Logo,
+    component: LogoUrbanWide,
     tags: ["autodocs"],
     argTypes: {
       variant: {
@@ -22,7 +22,7 @@
       },
       docs: {
         description: {
-          component: "Urban Institute logo in wide format."
+          component: docs
         }
       },
       githubLink: {
@@ -37,7 +37,7 @@
 </script>
 
 <Template let:args>
-  <Logo {...args} />
+  <LogoUrbanWide {...args} />
 </Template>
 
 <Story name="Default" />