wrap in details/summary

MuckRock · Apr 20, 2024 · fdfcaec · fdfcaec
1 parent 7217c03
commit fdfcaec
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 21 deletions.
diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
@@ -14,12 +14,13 @@
 
   import { onMount } from "svelte";
   import { _ } from "svelte-i18n";
+  import { Search24 } from "svelte-octicons";
 
-  import DocumentListItem from "./DocumentListItem.svelte";
   import Button from "../common/Button.svelte";
-  import Flex from "../common/Flex.svelte";
-  import { Search24 } from "svelte-octicons";
+  import DocumentListItem from "./DocumentListItem.svelte";
   import Empty from "../common/Empty.svelte";
+  import Flex from "../common/Flex.svelte";
+  import SearchHighlights from "./SearchHighlights.svelte";
 
   export let results: Document[] = [];
   export let count: number = undefined;
@@ -96,6 +97,8 @@
         />
       </label>
       <DocumentListItem {document} />
+
+      <SearchHighlights {document} highlights={document.highlights} />
     </Flex>
   {:else}
     <Empty icon={Search24}>

diff --git a/src/lib/components/documents/SearchHighlights.svelte b/src/lib/components/documents/SearchHighlights.svelte
@@ -1,22 +1,31 @@
+<!--
+  @component
+  Highlights from search results in document text.
+  A highlight looks like this:
+  ```json
+  {
+  "page_no_1": [
+      ". - Suite 1402 West Tower - Atlanta, GA 30334\nEffective as of\n\n01/31/2016\n\nSherry <em>Boston</em>\nP.O. "
+    ]
+  }
+  ```
+-->
+
 <script lang="ts">
   import type { Document, Highlights } from "$lib/api/types";
 
   import { _ } from "svelte-i18n";
 
   import { pageUrl } from "$lib/api/documents";
 
-  /*
-  {
-  "page_no_1": [
-      ". - Suite 1402 West Tower - Atlanta, GA 30334\nEffective as of\n\n01/31/2016\n\nSherry <em>Boston</em>\nP.O. "
-    ]
-  }
-  */
   export let highlights: Highlights;
   export let document: Document;
+  export let open = false;
 
   const PAGE_NO_RE = /^page_no_(\d+)$/;
 
+  $: count = Object.keys(highlights).length;
+
   function pageLink(page: string): [number, string] {
     const match = PAGE_NO_RE.exec(page);
     if (!match) return [NaN, ""];
@@ -26,15 +35,21 @@
   }
 </script>
 
-{#each Object.entries(highlights) as [page, segments]}
-  {@const [number, href] = pageLink(page)}
-  <h4><a {href}>{$_("document.page")} {number}</a></h4>
-  <blockquote class="highlight">
-    {#each segments as segment}
-      <p class="segment">{@html segment}</p>
+{#if count}
+  <details class="highlights" bind:open>
+    <summary>{$_("document.matchingPages", { values: { n: count } })}</summary>
+
+    {#each Object.entries(highlights) as [page, segments]}
+      {@const [number, href] = pageLink(page)}
+      <h4><a {href}>{$_("document.page")} {number}</a></h4>
+      <blockquote class="highlight">
+        {#each segments as segment}
+          <p class="segment">{@html segment}</p>
+        {/each}
+      </blockquote>
     {/each}
-  </blockquote>
-{/each}
+  </details>
+{/if}
 
 <style>
   .segment :global(em) {

diff --git a/src/lib/components/documents/stories/ResultsList.stories.svelte b/src/lib/components/documents/stories/ResultsList.stories.svelte
@@ -1,10 +1,11 @@
 <script context="module" lang="ts">
-  import type { Document, DocumentResults } from "@/lib/api/types";
+  import type { Document } from "@/lib/api/types";
+
   import { Story } from "@storybook/addon-svelte-csf";
   import ResultsList from "../ResultsList.svelte";
 
   // typescript complains without the type assertion
-  import searchResults from "../../../api/fixtures/documents/search-highlight.json";
+  import searchResults from "$lib/api/fixtures/documents/search-highlight.json";
   const results = searchResults.results as Document[];
   const count = searchResults.count;
   const next = searchResults.next;
@@ -28,3 +29,7 @@
 <Story name="Infinite">
   <div style="width: 36rem"><ResultsList {results} {count} {next} auto /></div>
 </Story>
+
+<Story name="Highlighted">
+  <div style="width: 36rem"><ResultsList {results} {count} {next} /></div>
+</Story>
diff --git a/src/lib/components/documents/stories/SearchHighlights.stories.svelte b/src/lib/components/documents/stories/SearchHighlights.stories.svelte
@@ -18,6 +18,10 @@
   };
 </script>
 
-<Story name="default">
+<Story name="closed">
   <SearchHighlights {document} {highlights} />
 </Story>
+
+<Story name="open">
+  <SearchHighlights {document} {highlights} open />
+</Story>