Adds an active state to SidebarItem

Also allows for customized colors
MuckRock · Apr 12, 2024 · 475bb2d · 475bb2d
1 parent 9006ea5
commit 475bb2d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/src/lib/components/sidebar/SidebarItem.svelte b/src/lib/components/sidebar/SidebarItem.svelte
@@ -2,6 +2,7 @@
   export let disabled = false;
   export let small = false;
   export let hover = false;
+  export let active = false;
   // handling link behavior
   export let href: string = undefined;
   export let target: string = undefined;
@@ -18,13 +19,14 @@
     class="container"
     class:disabled
     class:small
+    class:active
     on:click
     on:keydown
   >
     <slot />
   </a>
 {:else}
-  <span class="container" class:hover class:disabled class:small>
+  <span class="container" class:active class:hover class:disabled class:small>
     <slot />
   </span>
 {/if}
@@ -39,9 +41,9 @@
     border-radius: 0.25rem;
     border: none;
 
-    color: inherit;
-    fill: inherit;
-    background: transparent;
+    color: var(--color, inherit);
+    fill: var(--fill, inherit);
+    background: var(--background, transparent);
 
     font-family: var(--font-sans, "Source Sans Pro");
     font-size: var(--font-m, 1rem);
@@ -57,7 +59,9 @@
   .container.hover:hover,
   .container.hover:focus {
     cursor: pointer;
-    background: var(--gray-2, #d8dee2);
+    background: var(--hover-background, var(--gray-2, #d8dee2));
+    color: var(--hover-color, var(--color, inherit));
+    fill: var(--hover-fill, var(--fill, inherit));
   }
   @media (hover: none) {
     a.container:hover,
@@ -74,6 +78,13 @@
     background: transparent;
   }
 
+  /* Active */
+  .container.active {
+    background: var(--active-background, var(--blue-2, #b5ceed));
+    color: var(--active-color, var(--color, inherit));
+    fill: var(--active-fill, var(--fill, inherit));
+  }
+
   /* Small */
   .container.small {
     font-size: var(--font-s, 0.875rem);

diff --git a/src/lib/components/sidebar/stories/SidebarItem.stories.svelte b/src/lib/components/sidebar/stories/SidebarItem.stories.svelte
@@ -1,8 +1,9 @@
 <script context="module" lang="ts">
   import { Story } from "@storybook/addon-svelte-csf";
   import { action } from "@storybook/addon-actions";
+  import { Comment16, Home16, Link16, Paintbrush16 } from "svelte-octicons";
   import SidebarItem from "../SidebarItem.svelte";
-  import { Comment16, Home16 } from "svelte-octicons";
+  import Flex from "../../common/Flex.svelte";
 
   export const meta = {
     title: "Components / Sidebar / Item",
@@ -37,6 +38,23 @@
   </SidebarItem>
 </Story>
 
+<Story name="Active">
+  <Flex>
+    <SidebarItem active>Static</SidebarItem>
+    <SidebarItem active href="#">
+      <Link16 /> Link
+    </SidebarItem>
+    <SidebarItem
+      active
+      --active-background="var(--orange-light)"
+      --active-color="var(--orange-dark)"
+      --active-fill="var(--orange)"
+    >
+      <Paintbrush16 /> Custom Active Colors
+    </SidebarItem>
+  </Flex>
+</Story>
+
 <Story name="Small">
   <SidebarItem small>
     <Comment16 /> Add a note…