Merge pull request #503 from MuckRock/488-sidebaritem-should-handle-l…

…inks Use SidebarItem as links in viewer sidebars
MuckRock · Apr 2, 2024 · 8421ee3 · 8421ee3
2 parents d6ece9d + e416fe0
commit 8421ee3
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 11 deletions.
diff --git a/src/lib/components/sidebar/SidebarItem.svelte b/src/lib/components/sidebar/SidebarItem.svelte
@@ -2,11 +2,25 @@
   export let disabled = false;
   export let small = false;
   export let hover = false;
+  // handling link behavior
   export let href: string = undefined;
+  export let target: string = undefined;
+  export let rel: string = undefined;
+  export let download: boolean | string = undefined;
 </script>
 
 {#if href}
-  <a {href} class="container" class:disabled class:small on:click on:keydown>
+  <a
+    {href}
+    {target}
+    {rel}
+    {download}
+    class="container"
+    class:disabled
+    class:small
+    on:click
+    on:keydown
+  >
     <slot />
   </a>
 {:else}

diff --git a/src/lib/components/sidebar/stories/SidebarItem.stories.svelte b/src/lib/components/sidebar/stories/SidebarItem.stories.svelte
@@ -7,6 +7,7 @@
   export const meta = {
     title: "Components / Sidebar / Item",
     component: SidebarItem,
+    tags: ["autodocs"],
     parameters: { layout: "centered" },
   };
 

diff --git a/src/routes/documents/[id]-[slug]/sidebar/Actions.svelte b/src/routes/documents/[id]-[slug]/sidebar/Actions.svelte
@@ -44,14 +44,14 @@
     </SignedIn>
   </SidebarItem>
 
-  <SidebarItem>
+  <SidebarItem href={revisions}>
     <History16 />
-    <a href={revisions}>Revision History</a>
+    Revision History
   </SidebarItem>
 
-  <SidebarItem>
+  <SidebarItem href={pdf} download>
     <Download16 />
-    <a target="_blank" rel="noopener noreferrer" href={pdf}>Download PDF</a>
+    Download File
   </SidebarItem>
 </Flex>
 
@@ -61,19 +61,19 @@
     Share &hellip;
   </SidebarItem>
 
-  <SidebarItem>
+  <SidebarItem href={annotate}>
     <Comment16 />
-    <a href={annotate}>Add a note &hellip;</a>
+    Add a note &hellip;
   </SidebarItem>
 
-  <SidebarItem>
+  <SidebarItem href={redact}>
     <EyeClosed16 />
-    <a href={redact}>Redact &hellip;</a>
+    Redact &hellip;
   </SidebarItem>
 
-  <SidebarItem>
+  <SidebarItem href={modify}>
     <Apps16 />
-    <a href={modify}>Modify Pages &hellip;</a>
+    Modify Pages &hellip;
   </SidebarItem>
 </Flex>