Issue-97: Include additional stories for variants

src/components/edit-on-github/edit-on-github.js

@@ -16,7 +16,11 @@ function convertRouteToSubLink(route) {
 
 export default class EditOnGitHub extends HTMLElement {
   connectedCallback() {
-    const label = this.getAttribute("label") || "Edit on GitHub";
+    // protect against strigified "undefined"; occurs when the prop value is undefined in JS, but a string in HTML
+    const label =
+      this.hasAttribute("label") && this.getAttribute("label") !== "undefined"
+        ? this.getAttribute("label")
+        : "Edit on GitHub";
     const route = this.getAttribute("route");
     const href = `${REPO_PREFIX}${convertRouteToSubLink(route)}`;
 

src/components/edit-on-github/edit-on-github.stories.js

@@ -3,6 +3,7 @@ import pages from "../../stories/mocks/graph.json";
 
 export default {
   title: "Components/Edit on GitHub",
+  component: "app-edit-on-github",
   parameters: {
     fetchMock: {
       mocks: [
@@ -19,6 +20,48 @@ export default {
   },
 };
 
-const Template = () => "<app-edit-on-github route='/guides/getting-started/'></app-edit-on-github>";
+const Template = (props) => {
+  return `
+    <div style="margin:1em 0;"><p>Linked File: ${props.args.route}</p></div>
+    <app-edit-on-github label="${props.args.label}" route="${props.args.route}"></app-edit-on-github>
+  `;
+};
+
+export const DefaultLabel = Template.bind(
+  {},
+  {
+    args: {
+      route: "/",
+    },
+  },
+);
+
+export const Root = Template.bind(
+  {},
+  {
+    args: {
+      route: "/",
+      label: "Edit Root Page",
+    },
+  },
+);
+
+export const Directory = Template.bind(
+  {},
+  {
+    args: {
+      route: "/guides/hosting/",
+      label: "Edit Directory Page",
+    },
+  },
+);
 
-export const Primary = Template.bind({});
+export const Static = Template.bind(
+  {},
+  {
+    args: {
+      route: "/guides/hosting/netlify",
+      label: "Edit Static Page",
+    },
+  },
+);