Target components into Storybook

src/common/dialog/SearchTipsDialog.svelte

@@ -1,6 +1,5 @@
 <script>
   import SearchExample from "@/common/SearchExample.svelte";
-  import Link from "@/router/Link.svelte";
 
   import { orgsAndUsers } from "@/manager/orgsAndUsers.js";
   import { slugify } from "@/util/string.js";
@@ -171,7 +170,7 @@
         {#if $orgsAndUsers.loggedIn}your account{:else}a user’s account{/if}
         for a specific project that contain the exact text “mueller report” and don’t
         have a page count of 448 (thus excluding the actual Mueller Report).
-        <Link color={true} toUrl="/help/search">Additional documentation</Link>
+        <a href="/help/search">Additional documentation</a>
       </p>
       <p>
         <b>Reference table:</b>
@@ -212,72 +211,75 @@
   </div>
 </div>
 
-<style lang="scss">
+<style>
+  a {
+    color: var(--primary);
+  }
+
   .padded {
     margin-bottom: 35px;
   }
 
   table {
-    $border: solid 1px gainsboro;
+    --border: solid 1px gainsboro;
     margin-top: -10px;
+  }
 
-    td,
-    th {
-      border-right: $border;
-      border-bottom: $border;
-      vertical-align: middle;
-      padding: 4px 8px;
+  table td,
+  table th {
+    border-right: var(--border);
+    border-bottom: var(--border);
+    vertical-align: middle;
+    padding: 4px 8px;
+  }
 
-      &:first-child {
-        border-left: $border;
-      }
-    }
+  table td:first-child,
+  table th:first-child {
+    border-left: var(--border);
+  }
 
-    .name {
-      padding: 8px;
+  table .name {
+    padding: 8px;
+  }
 
-      h4 {
-        font-size: 15px;
-        margin: 0 0 3px 0;
-      }
+  table .name h4 {
+    font-size: 15px;
+    margin: 0 0 3px 0;
+  }
 
-      p {
-        font-size: 13px;
-        margin: 0;
-      }
-    }
+  table .name p {
+    font-size: 13px;
+    margin: 0;
+  }
 
-    .filter {
-      padding-bottom: 0;
-      width: 50%;
-      max-width: 270px;
-      min-width: 200px;
-    }
+  table .filter {
+    padding-bottom: 0;
+    width: 50%;
+    max-width: 270px;
+    min-width: 200px;
+  }
 
-    tr:first-child {
-      td,
-      th {
-        border-top: $border;
-      }
-    }
+  table tr:first-child th,
+  table tr:first-child td {
+    border-top: var(--border);
+  }
 
-    th {
-      background: rgb(244, 244, 244);
-      font-size: 14px;
+  table th {
+    background: rgb(244, 244, 244);
+    font-size: 14px;
+  }
 
-      &.header {
-        background: white !important;
-        border: none !important;
-        padding: 0 !important;
+  table th.header {
+    background: white !important;
+    border: none !important;
+    padding: 0 !important;
+  }
 
-        > div {
-          background: $primary;
-          color: white;
-          padding: 6px 8px;
-          margin-top: 14px;
-          border-bottom: $border;
-        }
-      }
-    }
+  table th.header > div {
+    background: var(--primary);
+    color: white;
+    padding: 6px 8px;
+    margin-top: 14px;
+    border-bottom: var(--border);
   }
 </style>

src/common/dialog/stories/SearchTipsDialog.stories.svelte

@@ -0,0 +1,14 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import SearchTipsDialog from "../SearchTipsDialog.svelte";
+  import Modal from "../../Modal.svelte";
+
+  export const meta = {
+    title: "Common / Dialog / Search Tips Dialog",
+    component: SearchTipsDialog,
+  };
+</script>
+
+<Story name="default">
+  <Modal component={SearchTipsDialog} />
+</Story>

src/common/stories/ErrorData.stories.svelte

@@ -0,0 +1,17 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import ErrorData from "../ErrorData.svelte";
+
+  export const meta = {
+    title: "Common / Error Data",
+    component: ErrorData,
+  };
+
+  const error = {
+    errorData: {},
+  };
+</script>
+
+<Story name="default">
+  <ErrorData {error} />
+</Story>

src/common/stories/HtmlField.stories.svelte

@@ -0,0 +1,14 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import HtmlField from "../HtmlField.svelte";
+
+  export const meta = {
+    title: "Common / HTML Field",
+    component: HtmlField,
+  };
+</script>
+
+<!-- this will not render without mocking the router -->
+<Story name="default">
+  <HtmlField />
+</Story>

src/common/stories/Logo.stories.svelte

@@ -0,0 +1,27 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import Logo from "../Logo.svelte";
+
+  export const meta = {
+    title: "Common / Logo",
+    component: Logo,
+  };
+
+  const args = {
+    newPage: false,
+    nopadding: false,
+    homeLink: false,
+  };
+</script>
+
+<Template let:args>
+  <Logo {...args} />
+</Template>
+
+<Story name="default" {args} />
+
+<Story name="new page" args={{ ...args, newPage: true }} />
+
+<Story name="no padding" args={{ ...args, nopadding: true }} />
+
+<Story name="home link" args={{ ...args, homeLink: true }} />