add github link manually in .docs.mdx files

UrbanInstitute · Jul 12, 2024 · 6a152d3 · 6a152d3
1 parent 7e49c89
commit 6a152d3
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 84 deletions.
diff --git a/src/lib/Fonts/Fonts.docs.mdx b/src/lib/Fonts/Fonts.docs.mdx
@@ -4,6 +4,8 @@ import { Meta } from "@storybook/blocks";
 
 # Font loading
 
+[![github](https://badgen.net/badge/icon/GitHub?icon=github&label)](https://github.com/UrbanInstitute/dataviz-components/tree/b02e4223ae34b4d0c5d4e2b0ef30bde606801806/src/lib/Fonts)
+
 If you need to load the Urban brand fonts in your SvelteKit-powered project, you can use the font components included in this library.
 
 Import and use either `<FontsUrban />` or `<FontsWorkrise />` to add the necessary markup to the `<head>` of you html like so:

diff --git a/src/lib/Pym/pymChildStore.docs.mdx b/src/lib/Pym/pymChildStore.docs.mdx
@@ -4,6 +4,8 @@ import { Meta } from "@storybook/blocks";
 
 # pymChildStore
 
+[![github](https://badgen.net/badge/icon/GitHub?icon=github&label)](https://github.com/UrbanInstitute/dataviz-components/blob/main/src/lib/Pym/stores.js)
+
 A Svelte store that exposes a Pym.js child instance. Used in conjuction with the `<PymChild />` component.
 
 [Read more about how to use the PymChild component here](/docs/components-pymchild--docs).
diff --git a/src/lib/Theme/Theme.docs.mdx b/src/lib/Theme/Theme.docs.mdx
@@ -5,6 +5,8 @@ import { Meta, Controls, Markdown } from "@storybook/blocks";
 
 # Theme
 
+[![github](https://badgen.net/badge/icon/GitHub?icon=github&label)](https://github.com/UrbanInstitute/dataviz-components/blob/main/src/lib/Theme/Theme.svelte)
+
 A theme wrapper that provides shared styles for children components. These styles are primarily made up of a series of CSS variables that represent Urban's design system. They also includes some default typographic styling applied to html headings. Components in this library make use of these variables and styles and expect them to be defined, and won't display correctly outside of a parent `<Theme />` component.
 
 All of the `Theme` styles are scoped and won't be applied to content outside of the `<Theme />` itself.
@@ -19,7 +21,7 @@ You get everything you need out of the box by importing and using these componen
 </script>
 <FontsUrban />
 <Theme>
-  <Button />
+  <button />
 </Theme>
 ```
 

diff --git a/src/lib/actions/resizeObserver.docs.mdx b/src/lib/actions/resizeObserver.docs.mdx
@@ -4,6 +4,8 @@ import { Meta } from "@storybook/blocks";
 
 # resizeObserver action
 
+[![github](https://badgen.net/badge/icon/GitHub?icon=github&label)](https://github.com/UrbanInstitute/dataviz-components/blob/main/src/lib/actions/resizeObserver.js)
+
 An action you can use to easily to check when a DOM element's dimensions change using the Resize Observer API. Sometimes is more efficient and less bug prone than Svelte's built-in `bind:clientWidth` approach. This may change when [Svelte 5 switches to using resize observer instead of iframes under the hood](https://github.com/sveltejs/svelte/issues/7583#issuecomment-1905763916).
 
 ## Usage
@@ -19,4 +21,3 @@ An action you can use to easily to check when a DOM element's dimensions change
   My width is: {width}
 </div>
 ```
-
diff --git a/src/lib/stores/reducedMotion.docs.mdx b/src/lib/stores/reducedMotion.docs.mdx
@@ -4,6 +4,8 @@ import { Meta } from "@storybook/blocks";
 
 # prefers-reduced-motion Svelte Store
 
+[![github](https://badgen.net/badge/icon/GitHub?icon=github&label)](https://github.com/UrbanInstitute/dataviz-components/blob/main/src/lib/stores/reducedMotion.js)
+
 A Svelte store that tracks the user's preference for reduced motion, adapted from [Geoff Rich's Accessible Svelte Transitions article](https://geoffrich.net/posts/accessible-svelte-transitions/).
 
 Sometimes users may turn on "prefers-reduced-motion" in their accessibility settings. If this is this is the case, they expect to see no animations or transitions. This store uses `window.matchMedia()` to track the user's preference for reduced motion and can be used for conditional rendering.

diff --git a/src/lib/utils/TPCColors.docs.mdx b/src/lib/utils/TPCColors.docs.mdx
@@ -5,6 +5,8 @@ import { tpcColors } from "$lib/utils";
 
 # Colors
 
+[![github](https://badgen.net/badge/icon/GitHub?icon=github&label)](https://github.com/UrbanInstitute/dataviz-components/blob/main/src/lib/utils/tpcColors.js)
+
 The colors utility module provides easy access to the Tax Policy Center's brand colors. For best practices on selecting colors for data visualizations, see the [Tax Policy Center data visualizaton styleguide](https://apps.urban.org/tpc-styleguide/public.html).
 
 To use these, utilities, import the module like so:
@@ -31,7 +33,6 @@ import { tpcColors } from "@urbaninstitute/dataviz-components/utils";
 
 </ColorPalette>
 
-
 Any color can be used directly from the `tpcColors` object:
 
 ```js
@@ -42,23 +43,17 @@ const blue = tpcColors.blue;
 const yellow = tpcColors.yellow;
 ```
 
-
 ## Color shades
 
 TPC Blue has an array of 6 shades for sequential usage.
 
-
 <ColorPalette>
-  <ColorItem
-    title="Blue shades"
-     subtitle=""
-     colors={tpcColors.getBlues()}
-  />
+  <ColorItem title="Blue shades" subtitle="" colors={tpcColors.getBlues()} />
 </ColorPalette>
 
 Usage:
+
 ```js
 // returns ["#cae0e7","#95c0cf","#60a1b6","#008bb0","#1d5669","#0e2b35"]
 tpcColors.getBlues();
 ```
-