Merge pull request #107 from UrbanInstitute/feature-source-link

Feature: sourcecode link for components

.storybook/main.js

@@ -6,7 +6,8 @@ const config = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/addon-svelte-csf",
-    "@storybook/addon-a11y"
+    "@storybook/addon-a11y",
+    "@etchteam/storybook-addon-github-link"
   ],
   framework: {
     name: "@storybook/sveltekit",

.storybook/preview.js

@@ -67,6 +67,10 @@ const preview = {
           }
         }
       }
+    },
+    githubLink: {
+      baseURL: "https://github.com/UrbanInstitute/dataviz-components/tree/main/src/lib/",
+      auto: false
     }
   },
   decorators: [() => Theme]

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Next
 
+- Feature: GitHub source links for components via [@etchteam/storybook-addon-github-link](https://storybook.js.org/addons/@etchteam/storybook-addon-github-link) in storybook docs
+
 ## v0.10.2
 
 - Patch: Run Vitest tests in CI

package.json

@@ -54,6 +54,7 @@
     "svelte": "^4.0.0"
   },
   "devDependencies": {
+    "@etchteam/storybook-addon-github-link": "^1.0.1",
     "@storybook/addon-a11y": "^8.0.5",
     "@storybook/addon-essentials": "^8.0.5",
     "@storybook/addon-interactions": "^8.0.5",

src/lib/Analytics/Analytics.stories.svelte

@@ -10,6 +10,9 @@
         description: {
           component: "A component that provides Google Analytics functionality to your page."
         }
+      },
+      githubLink: {
+        url: "/Analytics/Analytics.svelte"
       }
     }
   };
@@ -27,6 +30,6 @@
   name="Default"
   args={{
     title: "Urban Institute dataviz components storybook",
-    mode: "development",
+    mode: "development"
   }}
 />

src/lib/BasicDropdown/BasicDropdown.stories.svelte

@@ -23,6 +23,9 @@
         description: {
           component: "Basic HTML dropdown adhering to Urban styles."
         }
+      },
+      githubLink: {
+        url: "/BasicDropdown/BasicDropdown.svelte"
       }
     }
   };

src/lib/Block/Block.stories.svelte

@@ -16,8 +16,12 @@
     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:
+            "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."
         }
+      },
+      githubLink: {
+        url: "/Block/Block.svelte"
       }
     }
   };

src/lib/Button/Button.stories.svelte

@@ -24,6 +24,9 @@
         description: {
           component: "Basic HTML Button adhering to Urban styles."
         }
+      },
+      githubLink: {
+        url: "/Button/Button.svelte"
       }
     }
   };

src/lib/ChartBlock/ChartBlock.stories.svelte

@@ -24,8 +24,12 @@
       },
       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:
+            "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."
         }
+      },
+      githubLink: {
+        url: "/ChartBlock/ChartBlock.svelte"
       }
     }
   };
@@ -60,7 +64,12 @@
   args={{ ...chartArgs, color: "#FFFFFF" }}
 />
 <Story name="With a Datawrapper chart" args={{ ...chartArgs, color: "#FFFFFF" }}>
-  <ChartBlock title="Datawrapper chart" description="This is what a Datawrapper looks like inside this component." source="Chart source" notes="Chart notes">
+  <ChartBlock
+    title="Datawrapper chart"
+    description="This is what a Datawrapper looks like inside this component."
+    source="Chart source"
+    notes="Chart notes"
+  >
     <DatawrapperIframe
       title="Datawrapper title"
       ariaLabel="This is an accessible title for the visualization"

src/lib/DatawrapperIframe/DatawrapperIframe.stories.svelte

@@ -12,6 +12,9 @@
           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."
         }
+      },
+      githubLink: {
+        url: "/DatawrapperIframe/DatawrapperIframe.svelte"
       }
     }
   };

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:

src/lib/HeadingAlt/HeadingAlt.stories.svelte

@@ -11,6 +11,9 @@
         description: {
           component: "Alternate title heading in all caps, useful for h2 tags and lower."
         }
+      },
+      githubLink: {
+        url: "/HeadingAlt/HeadingAlt.svelte"
       }
     }
   };

src/lib/Headline/Headline.stories.svelte

@@ -30,16 +30,19 @@
         description: {
           component: "A basic headline component."
         }
+      },
+      githubLink: {
+        url: "/Headline/Headline.svelte"
       }
-    },
+    }
   };
 </script>
 
 <script>
   import { Story, Template } from "@storybook/addon-svelte-csf";
   import { Button } from "$lib";
 
-  const hed = "Urban Institute Data Visualization Project Headline"
+  const hed = "Urban Institute Data Visualization Project Headline";
 </script>
 
 <Template let:args>
@@ -62,7 +65,8 @@
     headline: hed,
     date: "January 1, 1968",
     eyebrow: "Data tool",
-    description: "The Urban Institute is a nonprofit research organization that provides data and evidence to help advance upward mobility and equity.",
+    description:
+      "The Urban Institute is a nonprofit research organization that provides data and evidence to help advance upward mobility and equity.",
     shareUrl: "https://urban.org"
   }}
 />
@@ -101,7 +105,7 @@
   args={{
     headline: hed,
     date: "January 1, 1968",
-    eyebrow: "Data tool",
+    eyebrow: "Data tool"
   }}
 />
 
@@ -114,21 +118,29 @@
     eyebrow: "Data tool",
     shareUrl: "https://urban.org",
     variant: "light"
-  }}/>
+  }}
+/>
 
 <Story name="With custom slots">
-  <Headline  shareUrl="https://urban.org">
+  <Headline shareUrl="https://urban.org">
     <div slot="eyebrow">
-      <img src="urban-logo.svg" alt="An Urban institute logo" width="120px"/>
+      <img src="urban-logo.svg" alt="An Urban institute logo" width="120px" />
     </div>
-    <h1 style="color: var(--color-blue); text-transform: uppercase; font-weight: var(--font-weight-bold)" slot="headline">Custom headline slot</h1>
+    <h1
+      style="color: var(--color-blue); text-transform: uppercase; font-weight: var(--font-weight-bold)"
+      slot="headline"
+    >
+      Custom headline slot
+    </h1>
     <div slot="description">
       <p>This is a custom description slot</p>
     </div>
     <p slot="date">Custom date slot: January 1, 1968</p>
     <div slot="extra">
       <Button>Extra slot</Button>
-      <p style="font-size: var(--font-size-small); color: var(--color-gray-darker)">(Custom button)</p>
+      <p style="font-size: var(--font-size-small); color: var(--color-gray-darker)">
+        (Custom button)
+      </p>
     </div>
   </Headline>
 </Story>

src/lib/LoadingWrapper/LoadingWrapper.stories.svelte

@@ -15,6 +15,9 @@
           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.'
         }
+      },
+      githubLink: {
+        url: "/LoadingWrapper/LoadingWrapper.svelte"
       }
     }
   };

src/lib/LogoTPCBadge/LogoTPCBadge.stories.svelte

@@ -11,6 +11,9 @@
         description: {
           component: "Tax Policy Center logo in square badge format."
         }
+      },
+      githubLink: {
+        url: "/LogoTPCBadge/LogoTPCBadge.svelte"
       }
     }
   };

src/lib/LogoUrban/LogoUrban.stories.svelte

@@ -24,6 +24,9 @@
         description: {
           component: "Urban Institute logo in full width format."
         }
+      },
+      githubLink: {
+        url: "/LogoUrban/LogoUrban.svelte"
       }
     }
   };

src/lib/LogoUrbanAnimated/LogoUrbanAnimated.stories.svelte

@@ -11,6 +11,9 @@
         description: {
           component: "An animated Urban Institute logo icon"
         }
+      },
+      githubLink: {
+        url: "/LogoUrbanAnimated/LogoUrbanAnimated.svelte"
       }
     }
   };

src/lib/LogoUrbanBadge/LogoUrbanBadge.stories.svelte

@@ -11,6 +11,9 @@
         description: {
           component: "Urban Institute logo in square badge format."
         }
+      },
+      githubLink: {
+        url: "/LogoUrbanBadge/LogoUrbanBadge.svelte"
       }
     }
   };

src/lib/LogoUrbanWide/LogoUrbanWide.stories.svelte

@@ -24,6 +24,9 @@
         description: {
           component: "Urban Institute logo in wide format."
         }
+      },
+      githubLink: {
+        url: "/LogoUrbanWide/LogoUrbanWide.svelte"
       }
     }
   };

src/lib/Meta/Meta.stories.svelte

@@ -20,8 +20,12 @@
     parameters: {
       docs: {
         description: {
-          component: "This component uses Svelt's built-in `<svelte:head>` component to include important metadata for your HTML page."
+          component:
+            "This component uses Svelt's built-in `<svelte:head>` component to include important metadata for your HTML page."
         }
+      },
+      githubLink: {
+        url: "/Meta/Meta.svelte"
       }
     }
   };
@@ -35,13 +39,15 @@
   <Meta />
 </Template>
 
-<Story name="Default" args={{
-  title: "",
-  description: "",
-  url: "",
-  siteName: "Urban Institute",
-  authors: ["Author Name", "Author Name"],
-  keywords: ["keyword1", "keyword2"],
-  socialImage: ""
-}}>Nothing to see here</Story>
-
+<Story
+  name="Default"
+  args={{
+    title: "",
+    description: "",
+    url: "",
+    siteName: "Urban Institute",
+    authors: ["Author Name", "Author Name"],
+    keywords: ["keyword1", "keyword2"],
+    socialImage: ""
+  }}>Nothing to see here</Story
+>

src/lib/Navbar/Navbar.stories.svelte

@@ -19,6 +19,9 @@
           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."
         }
+      },
+      githubLink: {
+        url: "/Navbar/Navbar.svelte"
       }
     }
   };

src/lib/ProjectCredits/ProjectCredits.stories.svelte

@@ -11,6 +11,9 @@
         description: {
           component: "A block for project credits."
         }
+      },
+      githubLink: {
+        url: "/ProjectCredits/ProjectCredits.svelte"
       }
     }
   };

src/lib/Pym/PymChild.stories.svelte

@@ -10,6 +10,9 @@
         description: {
           component: "A basic headline component."
         }
+      },
+      githubLink: {
+        url: "/Pym/PymChild.svelte"
       }
     }
   };

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).

src/lib/ReturnTop/ReturnTop.stories.svelte

@@ -11,6 +11,9 @@
         description: {
           component: "A button for moving the browser to a specified element ID."
         }
+      },
+      githubLink: {
+        url: "/ReturnTop/ReturnTop.svelte"
       }
     }
   };