add githubLink to all components

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/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/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/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"
       }
     }
   };

src/lib/Scorecard/Scorecard.stories.svelte

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

src/lib/Scrolly/Scrolly.stories.svelte

@@ -18,6 +18,11 @@
         options: ["center", "left", "right"],
         control: { type: "select" }
       }
+    },
+    parameters: {
+      githubLink: {
+        url: "/Scrolly/Scrolly.svelte"
+      }
     }
   };
 </script>

src/lib/SectionBreak/SectionBreak.stories.svelte

@@ -12,6 +12,9 @@
           component:
             "Section break element that includes a number, a subhead and a horizontal rule."
         }
+      },
+      githubLink: {
+        url: "/SectionBreak/SectionBreak.svelte"
       }
     }
   };

src/lib/SocialShare/SocialShare.stories.svelte

@@ -29,6 +29,9 @@
         description: {
           component: "Social share icons, available in light or dark mode."
         }
+      },
+      githubLink: {
+        url: "/SocialShare/SocialShare.svelte"
       }
     }
   };

src/lib/TextBlock/TextBlock.stories.svelte

@@ -30,6 +30,9 @@
         description: {
           component: "A basic text block."
         }
+      },
+      githubLink: {
+        url: "/TextBlock/TextBlock.svelte"
       }
     }
   };

src/lib/Theme/Theme.stories.svelte

@@ -15,7 +15,6 @@
       slot_default: {
         control: { type: "text" }
       }
-          
     },
     parameters: {
       backgrounds: {
@@ -27,8 +26,12 @@
       },
       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```"
+          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"
       }
     }
   };
@@ -39,8 +42,7 @@
 </script>
 
 <Template let:args>
-  <Theme/>
+  <Theme />
 </Template>
 
 <Story name="Default" />
-

src/lib/Toggle/Toggle.stories.svelte

@@ -20,6 +20,9 @@
         description: {
           component: "Toggle component adhering to Urban styles."
         }
+      },
+      githubLink: {
+        url: "/Toggle/Toggle.svelte"
       }
     }
   };