@stubber/ui 1.2.0 → 1.4.0

package/dist/components/ProfileMenu.svelte

@@ -29,7 +29,7 @@
       <span slot="tooltip"> Copy stubberhandle </span>
     </Tooltip>
     <a class="mt-[17px] w-full" href={manageLink}>
-      <PrimaryButton label="Manage Stubber" variant="secondary-transparent" width="full" />
+      <PrimaryButton label="Personal Settings" variant="secondary-transparent" width="full" />
     </a>
   </div>
   <a href={documentationLink}>

package/dist/components/SideNav/SideNavExample.svelte

@@ -5,13 +5,21 @@
     This component is *not* exported to the npm package.
 -->
 <script>
+  import { setContext } from "svelte";
   import SideNavItem from "./SideNavItem.svelte";
   import SideNavTitle from "./SideNavTitle.svelte";
+
+  setContext("side_nav_context", {
+    bg_color: "bg-red-500",
+    selected_bg_color: "bg-yellow-500",
+    hover_bg_color: "hover:bg-orange-500 hover:bg-opacity-[0.5]",
+    active_bg_color: "active:bg-surface-100",
+  });
 </script>
 
-<div class="p-4 bg-[#F0F6FC]">
+<div class="p-4 bg-white border-r border-suface-100 h-full w-[250px]">
   <SideNavTitle title="General" />
-  <SideNavItem label="Recent" href="/" icon="far fa-home" />
+  <SideNavItem label="Recent" href="/" icon="far fa-home" is_selected={true} />
   <SideNavItem label="Archive" href="/" icon="far fa-archive" />
   <SideNavItem label="By Stub" href="/" icon="far fa-tilde" />
 

package/dist/components/SideNav/SideNavItem.svelte

@@ -1,10 +1,28 @@
 <script>
+  import { Label } from "../label/index.ts";
+  import { Button } from "../button/index.ts";
+  import { getContext } from "svelte";
+
   export let label;
   export let href;
   export let icon;
   export let indent_children = true;
   export let is_selected = false;
 
+  let bg_color = "bg-transparent";
+  let selected_bg_color = "bg-surface-100";
+  let hover_bg_color = "hover:bg-surface-100 hover:bg-opacity-[0.5]";
+  let active_bg_color = "active:bg-surface-100";
+
+  // you can set the color for all nav items once using the context
+  const side_nav_context = getContext("side_nav_context");
+  if (side_nav_context) {
+    bg_color = side_nav_context.bg_color || bg_color;
+    selected_bg_color = side_nav_context.selected_bg_color || selected_bg_color;
+    hover_bg_color = side_nav_context.hover_bg_color || hover_bg_color;
+    active_bg_color = side_nav_context.active_bg_color || active_bg_color;
+  }
+
   //states
   let is_expanded = false;
 
@@ -13,30 +31,33 @@
   }
 </script>
 
-<!-- If $$slots.default == true, then it means this SideNavItem is a group item, i.e it has child elements in <slots/> -->
+<!-- If $slots.default == true, then it means this SideNavItem is a group item, i.e it has child elements in <slots/> -->
 
-<button
+<Button
   on:click={handle_click}
-  class="group h-10 my-2.5 w-full flex items-center {is_selected
-    ? 'bg-white'
-    : 'bg-transparent hover:bg-white hover:bg-opacity-[0.5]'} rounded-lg hover:bg active:bg-white"
+  variant="ghost"
+  class="group h-10 my-1 w-full flex items-center {is_selected
+    ? selected_bg_color
+    : bg_color} {hover_bg_color} {active_bg_color}"
 >
   {#if $$slots.default}
-    <div class="h-10 pl-2 w-2.5 flex items-center justify-center">
+    <div class="h-10 w-2.5 flex items-center justify-center">
       <i class="fas fa-caret-right {is_expanded ? 'rotate down' : 'rotate'}" />
     </div>
   {/if}
-  <a class="{$$slots.default ? '' : 'pl-2.5'} w-full flex items-center" {href}>
-    <div class="text-surface-900 w-fit flex items-center">
+  <a class="{$$slots.default ? '' : ''} w-full flex items-center" {href}>
+    <div class="text-surface-900 w-fit flex items-center gap-2">
       <div class="h-10 aspect-square flex items-center justify-center">
-        <i class={icon} />
+        <div class="bg-white rounded border w-7 h-7 flex items-center justify-center">
+          <i class="{icon} text-xs" />
+        </div>
       </div>
-      <span class="text-button font-normal">
+      <Label class=" font-medium">
         {label}
-      </span>
+      </Label>
     </div>
   </a>
-</button>
+</Button>
 {#if $$slots.default && is_expanded}
   <div class={indent_children === true ? "ml-4" : ""}>
     <slot />

package/dist/components/SideNav/SideNavTitle.svelte

@@ -1,7 +1,9 @@
 <script>
+  import { Label } from "../label/index.ts";
+
   export let title;
 </script>
 
 <div class="h-10 w-full flex items-center">
-  <h2 class="text-small font-normal text-surface-700">{title}</h2>
+  <Label class="ml-2 text-small font-medium text-surface-500">{title}</Label>
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/ui",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && pnpm run package && node ./fix_dts_imports.js",