Update header and button (#52)

# Problem - The mobile nav menu icon colors were not working - The header needed an active button state option
frequency-chain · Nov 11, 2024 · cb5fa0a · cb5fa0a
1 parent 2f792d4
commit cb5fa0a
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 11 deletions.
diff --git a/src/lib/assets/Assets.stories.svelte b/src/lib/assets/Assets.stories.svelte
@@ -64,7 +64,7 @@
           <aside>Click it!</aside>
           <svelte:component this={Icon} class="mb-1 h-8 w-auto stroke-black" isDemo={true} />
         {:else}
-          <svelte:component this={Icon} class="mb-1 h-8 w-auto" isDemo={true} />
+          <svelte:component this={Icon} class="mb-1 h-8 w-auto stroke-black" isDemo={true} />
         {/if}
       </div>
     {/each}

diff --git a/src/lib/assets/icons/HamburgerMenu.svelte b/src/lib/assets/icons/HamburgerMenu.svelte
@@ -1,7 +1,7 @@
 <svg viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg" class={$$restProps.class}>
   <path
     d="M2 20H25.625M2 11H25.625M2 2H25.625"
-    stroke="black"
+    stroke="currentColor"
     stroke-width="3.375"
     stroke-linecap="round"
     stroke-linejoin="round"

diff --git a/src/lib/atoms/Button.stories.svelte b/src/lib/atoms/Button.stories.svelte
@@ -10,6 +10,7 @@
 <Story name="PrimaryButton">
   <div class="flex flex-col gap-f8">
     <Button size="xs">P-XS</Button>
+    <Button size="xs" active="true">P-XS Active</Button>
     <Button size="sm">Primary SM</Button>
     <Button size="normal">Primary Normal</Button>
     <Button size="md">Primary MD</Button>
@@ -36,6 +37,7 @@
 <Story name="Secondary">
   <div class="flex flex-col gap-f8">
     <Button type="secondary" size="xs">S-XS</Button>
+    <Button type="secondary" size="xs" active="true">S-XS Active</Button>
     <Button type="secondary" size="sm">Secondary SM</Button>
     <Button type="secondary" size="normal">Secondary Normal</Button>
     <Button type="secondary" size="md">Secondary MD</Button>
@@ -49,6 +51,7 @@
 <Story name="Disabled">
   <div class="flex flex-col gap-f8">
     <Button size="xs" disabled={true}>P-XS</Button>
+    <Button size="xs" disabled={true} active="true">P-XS</Button>
     <Button size="sm" disabled={true}>Primary SM</Button>
     <Button size="normal" disabled={true}>Primary Normal</Button>
     <Button size="md" disabled={true}>Primary MD</Button>

diff --git a/src/lib/atoms/Button.svelte b/src/lib/atoms/Button.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import Typography from '../typography/Typography.svelte';
+  import { cn } from '../utils/utils';
 
   export let onClick = () => {};
 
@@ -20,17 +21,20 @@
    */
   export let disabled: boolean = false;
 
+  /**
+   * Specify if the component is supposed to be active.
+   */
+  export let active: boolean = false;
+
   // Define button type classes
   $: typeClass =
     type === 'primary'
       ? 'bg-teal text-navy hover:bg-tealDark hover:text-black hover:shadow-md'
       : 'bg-transparent border border-white hover:border-navy hover:text-navy';
 
-  // Define disabled classes
+  // Define classes
   $: disabledClass = disabled ? 'bg-gray3 text-white cursor-default pointer-events-none' : '';
-
-  // Define final brn style classes
-  $: btnStylesClass = disabled ? disabledClass : typeClass;
+  $: activeClass = active ? (type === 'primary' ? 'bg-navyLight text-teal shadow-md' : 'border-navy text-navy') : '';
 
   // Define button size classes
   $: btnSizeClass =
@@ -50,7 +54,14 @@
   <a {...$$restProps} {href} class={disabled ? 'pointer-events-none block' : 'pointer-events-auto block'}>
     <button
       {...$$restProps}
-      class={`rounded-full px-f24 py-f8 text-center transition-all ${btnStylesClass} ${btnSizeClass} ${$$restProps.class ?? ''}`}
+      class={cn(
+        'rounded-full px-f24 py-f8 text-center transition-all',
+        typeClass,
+        activeClass,
+        disabledClass,
+        btnSizeClass,
+        $$restProps.class
+      )}
       {disabled}
     >
       <Typography bold={true} class="flex items-center justify-center gap-f8 font-sans">
@@ -62,7 +73,14 @@
   <button
     {...$$restProps}
     on:click|preventDefault={onClick}
-    class={`rounded-full p-f8 text-center transition-all ${btnStylesClass} ${btnSizeClass} ${$$restProps.class ?? ''}`}
+    class={cn(
+      'rounded-full p-f8 text-center transition-all',
+      typeClass,
+      activeClass,
+      disabledClass,
+      btnSizeClass,
+      $$restProps.class
+    )}
     {disabled}
   >
     <Typography bold={true} class="flex items-center justify-center gap-f8 font-sans">

diff --git a/src/lib/features/NavMenu.stories.svelte b/src/lib/features/NavMenu.stories.svelte
@@ -10,13 +10,14 @@
     { label: 'Partners', href: '#partners', viewportHighlightId: 'partners' },
     { label: 'External', href: 'https://www.google.com/', isExternal: true },
     { label: 'Developer Portal', href: '/', isButton: true },
+    { label: 'Portal Active', href: '/', isButton: true, isActive: true },
   ];
 </script>
 
 <Meta title="UI Components/Features/NavMenu" component={NavMenu} />
 
 <Story name="NavMenu" id="navMenu">
-  <div class="sticky top-0">
+  <div class="sticky top-0 bg-white">
     <NavMenu {menuItems} />
     <p class="block md:hidden">*** If you are not seeing the menu, try increasing the window size.</p>
   </div>

diff --git a/src/lib/features/NavMenu.svelte b/src/lib/features/NavMenu.svelte
@@ -48,7 +48,12 @@
   {#each menuItems as item}
     {#if item.isButton}
       <div class="content-center">
-        <Button size="auto" href={item.href} target={item.isExternal ? '_blank' : '_self'}>
+        <Button
+          size="auto"
+          active={item.isActive || false}
+          href={item.href}
+          target={item.isExternal ? '_blank' : '_self'}
+        >
           {item.label}
         </Button>
       </div>

diff --git a/src/lib/features/NavMenuMobile.svelte b/src/lib/features/NavMenuMobile.svelte
@@ -14,7 +14,7 @@
 
 <input type="checkbox" class="peer hidden" bind:checked={isOpen} id={toggleIdentifier} />
 <OpenClose
-  classes="cursor-pointer stroke-navy peer-checked:stroke-white peer-checked:hover:stroke-teal hover:stroke-teal flex self-center lg:hidden"
+  classes="cursor-pointer text-navy peer-checked:text-white peer-checked:hover:text-teal hover:text-teal flex self-center lg:hidden"
 />
 <div
   class="z-1 fixed right-0 top-0 z-10 flex h-0 w-[100vw] flex-col justify-between gap-f24 overflow-y-scroll bg-navy px-[12%] transition-[height] duration-[1s] peer-checked:h-[100vh] lg:hidden"

diff --git a/src/lib/styles/tailwindColors.ts b/src/lib/styles/tailwindColors.ts
@@ -1,6 +1,7 @@
 export default {
   //Branding Colors
   navy: '#14313F',
+  navyLight: '#18465E',
   teal: '#55B1AB',
   // Neutral Colors
   black: '#000000',

diff --git a/src/lib/utils/types.ts b/src/lib/utils/types.ts
@@ -3,6 +3,8 @@ export type MenuItem = {
   href: string;
   isExternal?: boolean;
   isButton?: boolean;
+  // Show the active state (buttons only)
+  isActive?: boolean;
   // Optional id to highlight if in the viewport
   viewportHighlightId?: string;
 };