WIP: adds Navigation component

brave · Oct 26, 2023 · 20b3d6f · 20b3d6f
1 parent 6dbc431
commit 20b3d6f
Show file tree

Hide file tree

Showing 6 changed files with 233 additions and 0 deletions.
diff --git a/src/components/navigation/navigation.stories.svelte b/src/components/navigation/navigation.stories.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { Meta, Story, Template } from '@storybook/addon-svelte-csf'
+
+  import Navigation from './navigation.svelte'
+  import SlotInfo from '../../storyHelpers/SlotInfo.svelte'
+  import Slot from '../../storyHelpers/Slot.svelte'
+  import NavigationItem from './navigationItem.svelte'
+  import NavigationHeader from './navigationHeader.svelte'
+  import NavigationActions from './navigationActions.svelte'
+  import Icon from '../icon/icon.svelte'
+</script>
+
+<Meta
+  title="Components/Navigation"
+  component={Navigation}
+  argTypes={{}}
+  args={{}}
+/>
+
+<Template let:args>
+  <Navigation {...args}>
+    <NavigationHeader slot="header">
+      <Icon slot="logo" name="social-brave-release-favicon-fullheight-color" />
+      <h1><span class="logo-mark">Brave</span> Accounts</h1>
+    </NavigationHeader>
+
+    {#each [1, 2, 3, 4, 5] as item}
+      <NavigationItem href="#" icon="browser-ntp-widget" isActive={item === 3}
+        >Item {item}</NavigationItem
+      >
+    {/each}
+    <NavigationItem href="#" icon="browser-ntp-widget">
+      Item with sub nav
+      <ul slot="subnav">
+        <NavigationItem href="#" icon="agenda" isActive={true}
+          >Testing</NavigationItem
+        >
+
+        <NavigationItem href="#" icon="browser-ntp-widget">
+          Item with sub nav
+          <ul slot="subnav">
+            <NavigationItem href="#" icon="agenda" isActive={true}
+              >Testing</NavigationItem
+            >
+          </ul>
+        </NavigationItem>
+      </ul>
+    </NavigationItem>
+  </Navigation>
+</Template>
+
+<Story name="Primary" let:args />
+
+<style>
+  h1 {
+    font: var(--leo-font-primary-heading-h4);
+    margin: 0;
+  }
+
+  .logo-mark {
+    color: var(--leo-color-text-secondary);
+  }
+</style>
diff --git a/src/components/navigation/navigation.svelte b/src/components/navigation/navigation.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  export let kind: 'vertical' | 'horizontal' = 'vertical'
+</script>
+
+<nav
+  class="leo-navigation"
+  class:isVertical={kind === 'vertical'}
+  class:isHorizontal={kind === 'horizontal'}
+>
+  {#if $$slots.header}
+    <slot name="header" />
+  {/if}
+
+  <ul>
+    <slot />
+  </ul>
+
+  {#if $$slots.actions}
+    <slot name="actions" />
+  {/if}
+</nav>
+
+<style lang="scss">
+  .leo-navigation {
+    --nav-direction: row;
+    display: flex;
+    flex-direction: var(--nav-direction);
+
+    :global(ul) {
+      display: flex;
+      flex-direction: var(--nav-direction);
+      gap: var(--leo-spacing-m);
+      margin: 0;
+      padding: var(--leo-spacing-2xl) 0;
+      list-style: none;
+    }
+
+    &.isVertical {
+      --nav-direction: column;
+    }
+  }
+</style>
diff --git a/src/components/navigation/navigationActions.svelte b/src/components/navigation/navigationActions.svelte
@@ -0,0 +1,10 @@
+<footer class="leo-navigation-actions">
+  <slot />
+</footer>
+
+<style>
+  .leo-navigation-actions {
+    margin-top: auto;
+    padding: var(--leo-spacing-2xl) var(--leo-spacing-xl);
+  }
+</style>
diff --git a/src/components/navigation/navigationHeader.svelte b/src/components/navigation/navigationHeader.svelte
@@ -0,0 +1,14 @@
+<header class="leo-navigation-header">
+  <slot name="logo" />
+  <slot />
+</header>
+
+<style>
+  .leo-navigation-header {
+    display: flex;
+    gap: var(--leo-spacing-m);
+    align-items: center;
+    justify-self: self-start;
+    padding: var(--leo-spacing-2xl) 20px;
+  }
+</style>
diff --git a/src/components/navigation/navigationItem.svelte b/src/components/navigation/navigationItem.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { SvelteHTMLElements } from 'svelte/elements'
+  import type { IconName } from '../../../icons/meta'
+  import Icon from '../icon/icon.svelte'
+
+  type Href = $$Generic<string | undefined>
+
+  type $$Props = Omit<SvelteHTMLElements['a'], 'class' | 'href'> & {
+    href: Href
+    icon?: IconName
+    isActive?: boolean
+  }
+
+  export let href: Href
+  export let icon: IconName = undefined
+  export let isActive: boolean = false
+</script>
+
+<li class="leo-navigation-item">
+  <a {href} {...$$restProps} class:isActive>
+    {#if icon}
+      <Icon name={icon} />
+    {/if}
+    <slot />
+  </a>
+
+  {#if $$slots.subnav}
+    <slot name="subnav" />
+  {/if}
+</li>
+
+<style lang="scss">
+  .leo-navigation-item {
+    --color: var(--leo-color-text-secondary);
+    --leo-icon-color: var(--leo-color-icon-default);
+
+    a {
+      cursor: pointer;
+      display: flex;
+      gap: var(--leo-spacing-xl);
+      align-items: center;
+      height: 48px;
+      padding-left: var(--leo-spacing-2xl);
+      padding-right: var(--leo-spacing-m);
+      border-radius: 0;
+      outline: none;
+      position: relative;
+      text-decoration: none;
+
+      font: var(--leo-font-components-button-default);
+      color: var(--color);
+
+      &:hover {
+        background: var(--leo-color-container-highlight);
+      }
+
+      &:focus-visible {
+        box-shadow: var(--leo-effect-focus-state);
+      }
+
+      &.isActive {
+        --color: var(--leo-color-text-interactive);
+        --leo-icon-color: var(--leo-color-icon-interactive);
+
+        &::before {
+          content: '';
+          width: 4px;
+          height: 76%;
+          border-top-right-radius: var(--leo-radius-xs);
+          border-bottom-right-radius: var(--leo-radius-xs);
+          background: var(--leo-color-text-interactive);
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+    }
+
+    :global(ul) {
+      padding: var(--leo-spacing-m) 0 0;
+      margin-left: 35px;
+      border-left: 1px solid var(--leo-color-divider-subtle);
+    }
+  }
+</style>
diff --git a/src/tokens/transformation/tailwind/static/plugins/components/index.ts b/src/tokens/transformation/tailwind/static/plugins/components/index.ts
@@ -0,0 +1,18 @@
+const components: string[] = []
+
+// Prevent global issues with TS
+;(function () {
+  const { readdirSync } = require('fs')
+  const { parse } = require('path')
+
+  for (const file of readdirSync(__dirname, { withFileTypes: true })) {
+    const { name } = parse(file.name)
+    if (file.isFile() && name !== 'index' && !name.startsWith('_')) {
+      components.push(name)
+    }
+  }
+})()
+
+module.exports = components.map((file) => {
+  return require(`./${file}`)
+})