@triptease/tt-navbar 0.0.6 → 0.0.8

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent tt-navbar following open-wc recommendations",
   "license": "MIT",
   "author": "tt-navbar",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/src/TtNavbar.ts

@@ -8,10 +8,10 @@ export class TtNavbar extends LitElement {
   @property({ type: Function })
   navigate: ((e: MouseEvent) => void) | undefined;
 
-  @property({ type: String })
+  @property({ type: String, attribute: 'base-url' })
   baseUrl?: string;
 
-  @property({ type: String })
+  @property({ type: String, attribute: 'client-key' })
   clientKey?: string;
 
   private buildUrl = (path: string): string => {

package/src/styles.ts

@@ -1,10 +1,30 @@
 import { css } from 'lit';
 
 export const styles = css`
+  :host {
+    --nav-bar-width: 260px;
+
+    display: block;
+    height: 100vh;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
   nav {
-    max-width: 260px;
+    min-width: var(--nav-bar-width);
+    width: var(--nav-bar-width);
+    min-height: 100vh;
+    height: max-content;
     display: flex;
+    align-items: start;
+    gap: var(--space-scale-3-5);
     flex-direction: column;
+    background-color: var(--color-surface-inverted-100);
+    color: var(--color-text-inverted-400);
+    padding-top: var(--space-scale-2);
+    padding-bottom: var(--space-scale-2);
   }
 
   nav details div {
@@ -13,9 +33,127 @@ export const styles = css`
   }
 
   hr {
-    background: black;
     width: 100%;
     height: 1px;
+    background-color: var(--color-surface-inverted-200);
     border: none;
   }
+
+  #tertiary-nav {
+    display: flex;
+    flex-direction: column;
+    margin-top: auto;
+    gap: var(--space-scale-2);
+    width: 100%;
+
+    .external-link {
+      font-size: var(--font-size-100);
+      line-height: var(--font-line-height-100);
+
+      .icon {
+        width: var(--space-scale-2);
+        height: var(--space-scale-2);
+      }
+    }
+  }
+
+  .icon {
+    width: var(--space-scale-3);
+    height: var(--space-scale-3);
+    display: inline;
+    color: var(--nav-item-color);
+  }
+
+  a {
+    font-size: var(--font-size-100);
+    line-height: var(--font-line-height-100);
+    gap: var(--space-scale-1-5);
+    border-radius: var(--border-radius-100);
+    color: var(--nav-item-color);
+    text-decoration: none;
+    padding: var(--space-scale-1);
+    width: 100%;
+  }
+
+  details {
+    width: 100%;
+    border-radius: var(--border-radius-100);
+
+    summary {
+      font-size: var(--font-size-100);
+      line-height: var(--font-line-height-100);
+      position: relative;
+      display: flex;
+      align-items: baseline;
+
+      &::marker {
+        content: '';
+      }
+    }
+
+    svg.chevron {
+      margin-left: auto;
+      margin-right: var(--space-scale-1);
+      width: var(--space-scale-2);
+    }
+
+    &[open] svg.chevron {
+      transform: rotate(180deg);
+    }
+
+    .dropdown-items {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  details > summary {
+    display: flex;
+    gap: var(--space-scale-1-5);
+    padding: var(--space-scale-1);
+    border-radius: var(--border-radius-100);
+    color: var(--nav-item-color);
+    align-items: center;
+
+    a {
+      color: var(--nav-item-color);
+    }
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--color-surface-inverted-200);
+      border-radius: var(--border-radius-100);
+      text-decoration: none;
+    }
+  }
+
+  .sub-nav-item {
+    padding-left: 44px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    color: var(--color-text-inverted-400);
+    font-size: var(--font-size-100);
+    line-height: var(--font-line-height-100);
+
+    button {
+      color: var(--color-text-inverted-400);
+      padding: 0;
+    }
+  }
+
+  .sub-nav-item:hover,
+  .sub-nav-item:focus-visible,
+  a:hover,
+  a:focus-visible {
+    background-color: var(--color-surface-inverted-200);
+    border-radius: var(--border-radius-100);
+    text-decoration: none;
+    color: var(--color-text-inverted-400);
+
+    .icon {
+      color: var(--color-text-inverted-400);
+    }
+  }
+
+
 `;

package/stories/index.stories.ts

@@ -6,18 +6,14 @@ export default {
   component: 'tt-navbar',
 };
 
-
-
-
 const Template = () => html`
   <div>
-    <tt-navbar clientKey="zxd47KQGAP">
+    <tt-navbar client-key="zxd47KQGAP">
       <div slot="clientSelector">
         <p>My Cool Client Selector</p>
       </div>
     </tt-navbar>
   </div>
-
 `;
 
 export const Regular = Template.bind({});

package/test/tt-navbar.test.ts

@@ -25,7 +25,7 @@ describe('TtNavbar', () => {
   });
   it('should render with the default links', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar clientKey=${CLIENT_KEY}></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
     );
     const links = navbar.shadowRoot?.querySelectorAll('a');
 
@@ -54,7 +54,7 @@ describe('TtNavbar', () => {
   it('should render platform URLs against the base URL when it is defined', async () => {
     const baseUrl = 'https://app.triptease.io';
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar clientKey=${CLIENT_KEY} baseUrl="${baseUrl}"></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY} base-url="${baseUrl}"></tt-navbar>`,
     );
     const links = navbar.shadowRoot?.querySelectorAll('a');
 
@@ -75,7 +75,7 @@ describe('TtNavbar', () => {
     };
 
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar clientKey=${CLIENT_KEY}></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
     );
     navbar.navigate = onNavigate;
     await navbar.updateComplete;
@@ -91,7 +91,7 @@ describe('TtNavbar', () => {
 
   it('should render the given client selector', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar clientKey=${CLIENT_KEY}><div slot="clientSelector"><div id="myCoolClientSelector"></div></div></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY}><div slot="clientSelector"><div id="myCoolClientSelector"></div></div></tt-navbar>`,
     );
 
     const clientSelector = navbar.querySelector('#myCoolClientSelector');

package/demo/index.html

@@ -1,30 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-  <style>
-    body {
-      background: #fafafa;
-    }
-  </style>
-</head>
-<body>
-  <div id="demo"></div>
-
-  <script type="module">
-    import { html, render } from 'lit';
-    import '../dist/src/tt-navbar.js';
-
-    const header = 'Hello owc World!';
-    render(
-      html`
-        <tt-navbar .header=${header}>
-          some light-dom
-        </tt-navbar>
-      `,
-      document.querySelector('#demo')
-    );
-  </script>
-</body>
-</html>