update rest of components and some stories

src/docs/stories/BasicPage.stories.svelte

@@ -1,14 +1,6 @@
 <script context="module">
   export const meta = {
-    title: "Examples/Stories/BasicPage",
-    description: "An example of collecting several components into a basic page",
-    parameters: {
-      docs: {
-        description: {
-          component: "a basic content block."
-        }
-      }
-    }
+    title: "Examples/Stories/BasicPage"
   };
 </script>
 

src/docs/stories/CustomSVGMap.stories.svelte

@@ -1,25 +1,13 @@
 <script context="module">
   export const meta = {
-    title: "Examples/Stories/CustomSVGMap",
-    parameters: {
-      docs: {
-        description: {
-          component: "An custom SVGMap with a ColorLegend and tooltip."
-        }
-      }
-    }
+    title: "Examples/Stories/CustomSVGMap"
   };
 </script>
 
 <script>
   import { Story, Template } from "@storybook/addon-svelte-csf";
   import { ChartBlock } from "$lib";
-  import {
-    SVGPolygonLayer,
-    SVGLabelLayer,
-    SVGPointLayer,
-    SVGMap
-  } from "$lib/maps";
+  import { SVGPolygonLayer, SVGLabelLayer, SVGPointLayer, SVGMap } from "$lib/maps";
   import ColorLegend from "$lib/maps/ColorLegend/ColorLegend.svelte";
   import county_air_quality_topo from "../../docs/sample-data/county_air_quality_topo.json";
   import { urbanColors } from "$lib/utils";
@@ -33,7 +21,6 @@
   let airQualityScale = scaleQuantile()
     .domain(county_air_quality.features.map((d) => d.properties.index_air_quality))
     .range(urbanColors.getDivergingColors());
-
 </script>
 
 <Template></Template>

src/docs/stories/DatawrapperSwitching.stories.svelte

@@ -1,7 +1,6 @@
 <script context="module">
   export const meta = {
-    title: "Examples/Stories/Datawrapper Switching",
-    description: "Examples of switching between Datawrapper iframes"
+    title: "Examples/Stories/Datawrapper Switching"
   };
 </script>
 

src/docs/stories/DynamicInfoStores.stories.svelte

@@ -1,7 +1,6 @@
 <script context="module">
   export const meta = {
-    title: "Examples/Stories/Dynamic Info With Stores",
-    description: "Example of writable/derived Svelte store for dynamic data lookup"
+    title: "Examples/Stories/Dynamic Info With Stores"
   };
 </script>
 

src/lib/Analytics/Analytics.stories.svelte

@@ -3,14 +3,8 @@
 
   export const meta = {
     title: "Components/Analytics",
-    description: "A component that provides Google Analytics functionality to your page.",
     component: Analytics,
     parameters: {
-      docs: {
-        description: {
-          component: "A component that provides Google Analytics functionality to your page."
-        }
-      },
       githubLink: {
         url: "/Analytics/Analytics.svelte"
       }

src/lib/Meta/Meta.stories.svelte

@@ -3,7 +3,6 @@
 
   export const meta = {
     title: "Components/Meta",
-    description: "A component to manage meta tags for the HTML document.",
     component: Meta,
     argTypes: {
       authors: {
@@ -18,12 +17,6 @@
       }
     },
     parameters: {
-      docs: {
-        description: {
-          component:
-            "This component uses Svelt's built-in `<svelte:head>` component to include important metadata for your HTML page."
-        }
-      },
       githubLink: {
         url: "/Meta/Meta.svelte"
       }

src/lib/Navbar/Navbar.docs.md

@@ -0,0 +1,5 @@
+Full width navigation bar for top of page. Includes `brand` and `sticky` properties for Urban/TPC logo and absolute position controls respectively.
+
+```js
+import { Navbar } from "@urbaninstitute/dataviz-components";
+```

src/lib/Navbar/Navbar.stories.svelte

@@ -1,9 +1,9 @@
 <script context="module">
   import Navbar from "./Navbar.svelte";
+  import docs from "./Navbar.docs.md?raw";
 
   export const meta = {
     title: "Components/Navbar",
-    description: "A basic navbar",
     component: Navbar,
     tags: ["autodocs"],
     argTypes: {
@@ -16,8 +16,7 @@
     parameters: {
       docs: {
         description: {
-          component:
-            "Full width navigation bar for top of page. Includes <code>brand</code> and <code>sticky</code> properties for Urban/TPC logo and absolute position controls respectively."
+          component: docs
         }
       },
       githubLink: {

src/lib/ProjectCredits/ProjectCredits.docs.md

@@ -0,0 +1,5 @@
+A block for project credits.
+
+```js
+import { ProjectCredits } from "@urbaninstitute/dataviz-components";
+```

src/lib/ProjectCredits/ProjectCredits.stories.svelte

@@ -1,15 +1,15 @@
 <script context="module">
   import ProjectCredits from "./ProjectCredits.svelte";
+  import docs from "./ProjectCredits.docs.md?raw";
 
   export const meta = {
     title: "Components/ProjectCredits",
-    description: "A block for project credits",
     component: ProjectCredits,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component: "A block for project credits."
+          component: docs
         }
       },
       githubLink: {

src/lib/Pym/PymChild.stories.svelte

@@ -3,14 +3,8 @@
 
   export const meta = {
     title: "Components/PymChild",
-    description: "A component that adds PymChild support to a page",
     component: PymChild,
     parameters: {
-      docs: {
-        description: {
-          component: "A basic headline component."
-        }
-      },
       githubLink: {
         url: "/Pym/PymChild.svelte"
       }

src/lib/ReturnTop/ReturnTop.docs.md

@@ -0,0 +1,5 @@
+A button for moving the browser to a specified element ID.
+
+```js
+import { ReturnTop } from "@urbaninstitute/dataviz-components";
+```

src/lib/ReturnTop/ReturnTop.stories.svelte

@@ -1,15 +1,15 @@
 <script context="module">
   import ReturnTop from "./ReturnTop.svelte";
+  import docs from "./ReturnTop.docs.md?raw";
 
   export const meta = {
     title: "Components/ReturnTop",
-    description: "A button for moving the browser to a specified element ID",
     component: ReturnTop,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component: "A button for moving the browser to a specified element ID."
+          component: docs
         }
       },
       githubLink: {

src/lib/Scorecard/Scorecard.docs.md

@@ -0,0 +1,5 @@
+Scorecard element, which displays a value and a label, originally developed for [this project](https://www.urban.org/policy-centers/center-labor-human-services-and-population/projects/apprenticeship-support).
+
+```js
+import { Scorecard } from "@urbaninstitute/dataviz-components";
+```

src/lib/Scorecard/Scorecard.stories.svelte

@@ -1,16 +1,15 @@
 <script context="module">
   import Scorecard from "./Scorecard.svelte";
+  import docs from "./Scorecard.docs.md?raw";
 
   export const meta = {
     title: "Components/Scorecard",
-    description: "A scorecard that displays a value and a label",
     component: Scorecard,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component:
-            "Scorecard element, which displays a value and a label, originally developed for <a href='https://www.urban.org/policy-centers/center-labor-human-services-and-population/projects/apprenticeship-support' target='_blank'>this project</a>."
+          component: docs
         }
       },
       githubLink: {

src/lib/SectionBreak/SectionBreak.docs.md

@@ -0,0 +1,5 @@
+Section break element that includes a number, a subhead and a horizontal rule.
+
+```js
+import { SectionBreak } from "@urbaninstitute/dataviz-components";
+```

src/lib/SectionBreak/SectionBreak.stories.svelte

@@ -1,16 +1,15 @@
 <script context="module">
   import SectionBreak from "./SectionBreak.svelte";
+  import docs from "./SectionBreak.docs.md?raw";
 
   export const meta = {
     title: "Components/SectionBreak",
-    description: "Section break element that includes a number, a subhead and a horizontal rule.",
     component: SectionBreak,
     tags: ["autodocs"],
     parameters: {
       docs: {
         description: {
-          component:
-            "Section break element that includes a number, a subhead and a horizontal rule."
+          component: docs
         }
       },
       githubLink: {

src/lib/SocialShare/SocialShare.docs.md

@@ -0,0 +1,5 @@
+Social share icons, available in light or dark mode.
+
+```js
+import { SocialShare } from "@urbaninstitute/dataviz-components";
+```

src/lib/SocialShare/SocialShare.stories.svelte

@@ -1,10 +1,10 @@
 <script context="module">
   import SocialShare from "./SocialShare.svelte";
+  import docs from "./SocialShare.docs.md?raw";
   import { fn, userEvent, within, expect } from "@storybook/test";
 
   export const meta = {
     title: "Components/SocialShare",
-    description: "Social media share buttons",
     component: SocialShare,
     tags: ["autodocs"],
     args: {
@@ -27,7 +27,7 @@
       },
       docs: {
         description: {
-          component: "Social share icons, available in light or dark mode."
+          component: docs
         }
       },
       githubLink: {

src/lib/TextBlock/TextBlock.docs.md

@@ -0,0 +1,5 @@
+A basic text block.
+
+```js
+import { TextBlock } from "@urbaninstitute/dataviz-components";
+```

src/lib/TextBlock/TextBlock.stories.svelte

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

src/lib/Theme/Theme.stories.svelte

@@ -3,7 +3,6 @@
 
   export const meta = {
     title: "Theming/Theme",
-    description: "A theme wrapper that provides styles for children components.",
     component: Theme,
     // tags: ["autodocs"],
     argTypes: {
@@ -24,12 +23,6 @@
           { name: "dark", value: "#0A4C6A" }
         ]
       },
-      docs: {
-        description: {
-          component:
-            "A theme wrapper that provides styles for children components. All of the components in this library rely on CSS provided by this <Theme> component. If you are working on a project that depends on this library, you should probably wrap your entire page inside of a `<Theme></Theme>`. If you are pulling in just a component or two to a project that otherwise doesn't use this library, you'll want to wrap those components directly in a `<Theme>`.\n\n```html\n<Theme>\n  <ChildComponent />\n  <ChildComponent />\n</Theme>\n```"
-        }
-      },
       githubLink: {
         url: "/Theme/Theme.svelte"
       }

src/lib/Toggle/Toggle.docs.md

@@ -0,0 +1,5 @@
+A toggle component that uses a `<button>` element with ARIA role `"switch"`. See [ARIA docs](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) for more information on the switch pattern.
+
+```js
+import { Toggle } from "@urbaninstitute/dataviz-components";
+```

src/lib/Toggle/Toggle.stories.svelte

@@ -1,10 +1,9 @@
 <script context="module">
   import Toggle from "./Toggle.svelte";
+  import docs from "./Toggle.docs.md?raw";
 
   export const meta = {
     title: "Components/Toggle",
-    description:
-      'A toggle component that uses a <button> element with ARIA role "switch". See <a href="https://www.w3.org/WAI/ARIA/apg/patterns/switch/">ARIA docs</a> for more information on the switch pattern.',
     component: Toggle,
     tags: ["autodocs"],
     argTypes: {
@@ -18,7 +17,7 @@
     parameters: {
       docs: {
         description: {
-          component: "Toggle component adhering to Urban styles."
+          component: docs
         }
       },
       githubLink: {

src/lib/maps/ColorLegend/ColorLegend.docs.md

@@ -0,0 +1,5 @@
+This component generates a color legend based on a D3 scale.
+
+```js
+import { ColorLegend } from "@urbaninstitute/dataviz-components/maps";
+```

src/lib/maps/ColorLegend/ColorLegend.stories.svelte

@@ -1,6 +1,7 @@
 <script context="module">
   import ColorLegend from "./ColorLegend.svelte";
   import urbanColors from "$lib/utils/urbanColors.js";
+  import docs from "./ColorLegend.docs.md?raw";
 
   export const meta = {
     title: "Maps/ColorLegend",
@@ -37,7 +38,7 @@
     parameters: {
       docs: {
         description: {
-          component: "This component generates a color legend based on a D3 scale."
+          component: docs
         }
       },
       githubLink: {