Merge pull request #394 from MuckRock/386-common-router

More common components into Storybook
MuckRock · Dec 18, 2023 · aca7b13 · aca7b13
2 parents da1b62d + 2569cde
commit aca7b13
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 70 deletions.
diff --git a/src/common/dialog/SearchTipsDialog.svelte b/src/common/dialog/SearchTipsDialog.svelte
@@ -1,14 +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";
-
-  $: userExample =
-    $orgsAndUsers.me != null
-      ? `user:${slugify($orgsAndUsers.me.name, $orgsAndUsers.me.id)}`
-      : "user:example-123";
 
   const table = [
     // Basic usage
@@ -155,7 +146,7 @@
 
 <div>
   <div class="mcontent">
-    <h1>Search Tips</h1>
+    <h2>Search Tips</h2>
     <div class="padded">
       <p>
         The search bar is a flexible and powerful tool for searching your
@@ -164,18 +155,16 @@
         display your documents, but you can do a lot more.
       </p>
       <SearchExample
-        content={`${userExample} "mueller report" project:test-345  -pages:448`}
+        content={`"user:example-123" "mueller report" project:test-345  -pages:448`}
       />
       <p>
-        The above example, for instance, searches all documents within
-        {#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>
-      </p>
-      <p>
-        <b>Reference table:</b>
+        The above example, for instance, searches all documents within a user’s
+        account 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).
+        <a target="_blank" href="/help/search">Additional documentation</a>
       </p>
+      <h3>Reference table:</h3>
 
       <table cellspacing="0">
         {#each table as row}
@@ -212,72 +201,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>
diff --git a/src/common/dialog/stories/SearchTipsDialog.stories.svelte b/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>
diff --git a/src/common/stories/ErrorData.stories.svelte b/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>
diff --git a/src/common/stories/HtmlField.stories.svelte b/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>
diff --git a/src/common/stories/Logo.stories.svelte b/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 }} />