update description import: analytics, basicdropdown, block, button, c…

…hartblock

src/lib/Analytics/Analytics.docs.mdx

@@ -1,13 +1,24 @@
 import * as Stories from "./Analytics.stories.svelte";
-import { Meta, Story, Stories as StoriesDocBlock, Canvas, Controls, Primary, Source } from '@storybook/blocks';
-
+import {
+  Meta,
+  Story,
+  Stories as StoriesDocBlock,
+  Canvas,
+  Controls,
+  Primary,
+  Source
+} from "@storybook/blocks";
 
 <Meta title="Components/Analytics" of={Stories} />
 
 # Analytics
 
 A component that adds Urban Institute's Google Analytics to your page. This will enable tracking of page views and custom events in your project.
 
+```js
+import { Analytics } from "@urbaninstitute/dataviz-components";
+```
+
 ## Properties
 
 The `Analytics` component has the following properties.
@@ -18,47 +29,54 @@ The `Analytics` component has the following properties.
 
 By default, this will add Google analytics' `gtag` to your page and fire a page view. If you are using Urban Institute's dataviz project template, you'll likely want to include this in your `+layout.svelte` or on your `+page.svelte` routes.
 
-<Source dark code={`
+<Source
+  dark
+  code={`
 <script>
 import { Analytics } from "@urbaninstitute/dataviz-components";
 </script>
 <Analytics title="My project title" />
-`} language="html"/>
+`}
+  language="html"
+/>
 
 If you'd like to avoid firing a pageview because you're creating an en embed or for any other reason, you can do so by setting `sendPageview` to `false`.
 
-<Source dark code={`
+<Source
+  dark
+  code={`
 <script>
 import { Analytics } from "@urbaninstitute/dataviz-components";
 </script>
 <Analytics title="My project title" sendPageview={false}/>
-`} language="html"/>
+`}
+  language="html"
+/>
 
 Anytime you have an event handler, use this one-line function call to send relevant data through to Google Analytics:
 
 <Source dark code={`
 import { logClickToGA } from "@urbaninstitute/dataviz-components";
 
-/**
- * sends event data to GTM and GA. call in event handlers for each event type you wish to track.
- * A function that logs a click event to Google Analytics.
- * @param {HTMLElement} target The DOM element that triggered the event.
- * @param {string} eventName A string in the format "event_name--event_specifics" where "event_name is the type of event, such as "map_click" or "dropdown_select" and "event_specifics" refers to the selected option, region, or specific function.
- */
-logClickToGA(target, eventName);
-`} language="js"/>
+/\*\*
+
+- sends event data to GTM and GA. call in event handlers for each event type you wish to track.
+- A function that logs a click event to Google Analytics.
+- @param {HTMLElement} target The DOM element that triggered the event.
+- @param {string} eventName A string in the format "event_name--event_specifics" where "event_name is the type of event, such as "map_click" or "dropdown_select" and "event_specifics" refers to the selected option, region, or specific function.
+  \*/
+  logClickToGA(target, eventName);
+  `} language="js"/>
 
 An example of logClickToGA in action:
 
 <Source dark code={`
 import { logClickToGA } from "@urbaninstitute/dataviz-components";
 
 myElement.addEventListener("click", (e) => {
-  logClickToGA(
-    e.target,
-    "map_click--" + e.detail.hoverData.hoverCounty + ", " + e.detail.hoverData.hoverStateName
-  );
+logClickToGA(
+e.target,
+"map_click--" + e.detail.hoverData.hoverCounty + ", " + e.detail.hoverData.hoverStateName
+);
 });
 `} language="js"/>
-
-

src/lib/BasicDropdown/BasicDropdown.docs.md

@@ -0,0 +1,5 @@
+Basic HTML dropdown adhering to Urban styles.
+
+```js
+import { BasicDropdown } from "@urbaninstitute/dataviz-components";
+```

src/lib/BasicDropdown/BasicDropdown.stories.svelte

@@ -2,10 +2,10 @@
   import BasicDropdown from "./BasicDropdown.svelte";
   import IconDownload from "$lib/Button/IconDownload.svelte";
   import urbanColors from "$lib/utils/urbanColors.js";
+  import docs from "./BasicDropdown.docs.md?raw";
 
   export const meta = {
     title: "Components/BasicDropdown",
-    description: "A basic dropdown component that uses a <select> element under the hood.",
     component: BasicDropdown,
     tags: ["autodocs"],
     argTypes: {
@@ -21,7 +21,7 @@
     parameters: {
       docs: {
         description: {
-          component: "Basic HTML dropdown adhering to Urban styles."
+          component: docs
         }
       },
       githubLink: {

src/lib/Block/Block.docs.md

@@ -0,0 +1,5 @@
+A basic content block with several width options. This helps when building a page layout if you'd like to place your own components inside a container that aligns with the body well of a typical urban.org layout, a wider block, or a full width block.
+
+```js
+import { Block } from "@urbaninstitute/dataviz-components";
+```

src/lib/Block/Block.stories.svelte

@@ -1,9 +1,9 @@
 <script context="module">
   import Block from "./Block.svelte";
+  import docs from "./Block.docs.md?raw";
 
   export const meta = {
     title: "Components/Block",
-    description: "A basic building block of a page",
     component: Block,
     tags: ["autodocs"],
     argTypes: {
@@ -16,8 +16,7 @@
     parameters: {
       docs: {
         description: {
-          component:
-            "A basic content block with several width options. This helps when building a page layout if you'd like to place your own components inside a container that aligns with the body well of a typical urban.org layout, a wider block, or a full width block."
+          component: docs
         }
       },
       githubLink: {

src/lib/Button/Button.docs.md

@@ -0,0 +1,5 @@
+Basic HTML Button adhering to Urban styles.
+
+```js
+import { Button } from "@urbaninstitute/dataviz-components";
+```

src/lib/Button/Button.stories.svelte

@@ -1,10 +1,10 @@
 <script context="module">
   import Button from "./Button.svelte";
   import IconDownload from "./IconDownload.svelte";
+  import docs from "./Button.docs.md?raw";
 
   export const meta = {
     title: "Components/Button",
-    description: "A basic button component.",
     component: Button,
     tags: ["autodocs"],
     argTypes: {
@@ -22,7 +22,7 @@
     parameters: {
       docs: {
         description: {
-          component: "Basic HTML Button adhering to Urban styles."
+          component: docs
         }
       },
       githubLink: {

src/lib/ChartBlock/ChartBlock.docs.md

@@ -0,0 +1,5 @@
+A basic wrapper for charts that includes, title, description, source, and notes. The default slot can be used to include any type of content or visualization between the provided text.
+
+```js
+import { ChartBlock } from "@urbaninstitute/dataviz-components";
+```

src/lib/ChartBlock/ChartBlock.stories.svelte

@@ -1,10 +1,10 @@
 <script context="module">
   import ChartBlock from "./ChartBlock.svelte";
   import DatawrapperIframe from "../DatawrapperIframe/DatawrapperIframe.svelte";
+  import docs from "./ChartBlock.docs.md?raw";
 
   export const meta = {
     title: "Components/ChartBlock",
-    description: "A basic wrapper for charts that includes, title, description, source, and notes.",
     component: ChartBlock,
     tags: ["autodocs"],
     argTypes: {
@@ -24,8 +24,7 @@
       },
       docs: {
         description: {
-          component:
-            "A basic wrapper for charts that includes, title, description, source, and notes. The default slot can be used to include any type of content or visualization between the provided text."
+          component: docs
         }
       },
       githubLink: {