oramasearch · rjborba · Jul 16, 2024 · Jul 15, 2024
diff --git a/apps/storybook/stories/orama-navigation-bar.stories.tsx b/apps/storybook/stories/orama-navigation-bar.stories.tsx
@@ -0,0 +1,14 @@
+import type { StoryObj, Meta } from '@storybook/web-components'
+import type { Components } from 'ui-stencil'
+
+const meta: Meta<Components.OramaNavigationBar> = {
+  title: 'Internal/OramaNavigationBar',
+  component: 'orama-navigation-bar',
+}
+
+export default meta
+type Story = StoryObj<Components.OramaNavigationBar>
+
+export const OramaNavigationBar: Story = {
+  args: {},
+}
diff --git a/packages/ui-stencil-react/src/components/stencil-generated/index.ts b/packages/ui-stencil-react/src/components/stencil-generated/index.ts
@@ -14,6 +14,7 @@ export const OramaChatMessagesContainer = /*@__PURE__*/createReactComponent<JSX.
 export const OramaChatUserMessage = /*@__PURE__*/createReactComponent<JSX.OramaChatUserMessage, HTMLOramaChatUserMessageElement>('orama-chat-user-message');
 export const OramaFacets = /*@__PURE__*/createReactComponent<JSX.OramaFacets, HTMLOramaFacetsElement>('orama-facets');
 export const OramaInput = /*@__PURE__*/createReactComponent<JSX.OramaInput, HTMLOramaInputElement>('orama-input');
+export const OramaNavigationBar = /*@__PURE__*/createReactComponent<JSX.OramaNavigationBar, HTMLOramaNavigationBarElement>('orama-navigation-bar');
 export const OramaSearch = /*@__PURE__*/createReactComponent<JSX.OramaSearch, HTMLOramaSearchElement>('orama-search');
 export const OramaSearchResults = /*@__PURE__*/createReactComponent<JSX.OramaSearchResults, HTMLOramaSearchResultsElement>('orama-search-results');
 export const OramaText = /*@__PURE__*/createReactComponent<JSX.OramaText, HTMLOramaTextElement>('orama-text');

diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts
@@ -51,6 +51,9 @@ export const OramaInput = /*@__PURE__*/ defineContainer<JSX.OramaInput>('orama-i
 ]);
 
 
+export const OramaNavigationBar = /*@__PURE__*/ defineContainer<JSX.OramaNavigationBar>('orama-navigation-bar', undefined);
+
+
 export const OramaSearch = /*@__PURE__*/ defineContainer<JSX.OramaSearch>('orama-search', undefined);
 
 

diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts
@@ -50,6 +50,8 @@ export namespace Components {
         "size"?: InputProps['size'];
         "type"?: InputProps['type'];
     }
+    interface OramaNavigationBar {
+    }
     interface OramaSearch {
     }
     interface OramaSearchResults {
@@ -156,6 +158,12 @@ declare global {
         prototype: HTMLOramaInputElement;
         new (): HTMLOramaInputElement;
     };
+    interface HTMLOramaNavigationBarElement extends Components.OramaNavigationBar, HTMLStencilElement {
+    }
+    var HTMLOramaNavigationBarElement: {
+        prototype: HTMLOramaNavigationBarElement;
+        new (): HTMLOramaNavigationBarElement;
+    };
     interface HTMLOramaSearchElement extends Components.OramaSearch, HTMLStencilElement {
     }
     var HTMLOramaSearchElement: {
@@ -217,6 +225,7 @@ declare global {
         "orama-chat-user-message": HTMLOramaChatUserMessageElement;
         "orama-facets": HTMLOramaFacetsElement;
         "orama-input": HTMLOramaInputElement;
+        "orama-navigation-bar": HTMLOramaNavigationBarElement;
         "orama-search": HTMLOramaSearchElement;
         "orama-search-results": HTMLOramaSearchResultsElement;
         "orama-text": HTMLOramaTextElement;
@@ -258,6 +267,8 @@ declare namespace LocalJSX {
         "size"?: InputProps['size'];
         "type"?: InputProps['type'];
     }
+    interface OramaNavigationBar {
+    }
     interface OramaSearch {
     }
     interface OramaSearchResults {
@@ -310,6 +321,7 @@ declare namespace LocalJSX {
         "orama-chat-user-message": OramaChatUserMessage;
         "orama-facets": OramaFacets;
         "orama-input": OramaInput;
+        "orama-navigation-bar": OramaNavigationBar;
         "orama-search": OramaSearch;
         "orama-search-results": OramaSearchResults;
         "orama-text": OramaText;
@@ -330,6 +342,7 @@ declare module "@stencil/core" {
             "orama-chat-user-message": LocalJSX.OramaChatUserMessage & JSXBase.HTMLAttributes<HTMLOramaChatUserMessageElement>;
             "orama-facets": LocalJSX.OramaFacets & JSXBase.HTMLAttributes<HTMLOramaFacetsElement>;
             "orama-input": LocalJSX.OramaInput & JSXBase.HTMLAttributes<HTMLOramaInputElement>;
+            "orama-navigation-bar": LocalJSX.OramaNavigationBar & JSXBase.HTMLAttributes<HTMLOramaNavigationBarElement>;
             "orama-search": LocalJSX.OramaSearch & JSXBase.HTMLAttributes<HTMLOramaSearchElement>;
             "orama-search-results": LocalJSX.OramaSearchResults & JSXBase.HTMLAttributes<HTMLOramaSearchResultsElement>;
             "orama-text": LocalJSX.OramaText & JSXBase.HTMLAttributes<HTMLOramaTextElement>;

diff --git a/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.scss b/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.scss
@@ -0,0 +1,46 @@
+:host {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-s, $spacing-s) var(--spacing-l, $spacing-l);
+  background-color: var(--background-color-primary, background-color('primary'));
+}
+
+.corner-section {
+  flex: 1;
+  display: flex;
+  gap: var(--spacing-xs, $spacing-xs);
+
+  &.start {
+    display: flex;
+    justify-content: flex-start;
+  }
+
+  &.center {
+    display: flex;
+    justify-content: 'center';
+  }
+
+  &.end {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+// TODO: We may want to create a Icon variant for button and use it here
+.navbar-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+
+  color: var(--icon-color-tertiary, text-color('tertiary'));
+  font-size: var(--font-size-lg, $font-size-lg);
+  padding: var(--spacing-s, $spacing-s);
+  border-radius: var(--radius-s, $radius-s);
+
+  &:hover {
+    background-color: var(--background-color-fourth, background-color('fourth'));
+  }
+}
diff --git a/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.tsx b/packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.tsx
@@ -0,0 +1,35 @@
+import { Component, Host, h } from '@stencil/core'
+import '@phosphor-icons/webcomponents/PhClock'
+import '@phosphor-icons/webcomponents/PhPlus'
+import '@phosphor-icons/webcomponents/PhCaretLeft'
+import { globalContext } from '@/context/GlobalContext'
+
+@Component({
+  tag: 'orama-navigation-bar',
+  styleUrl: 'orama-navigation-bar.scss',
+  shadow: true,
+})
+export class OramaNavigationBar {
+  render() {
+    return (
+      <Host>
+        <div class="corner-section start">
+          <button class="navbar-button" type="button" onClick={() => (globalContext.open = false)}>
+            <ph-caret-left />
+          </button>
+        </div>
+        <div class="section center">
+          <orama-toggler />
+        </div>
+        <div class="corner-section end">
+          <button class="navbar-button" type="button">
+            <ph-clock />
+          </button>
+          <button class="navbar-button" type="button">
+            <ph-plus />
+          </button>
+        </div>
+      </Host>
+    )
+  }
+}
diff --git a/packages/ui-stencil/src/components/internal/orama-navigation-bar/readme.md b/packages/ui-stencil/src/components/internal/orama-navigation-bar/readme.md
@@ -0,0 +1,28 @@
+# orama-navigation-bar
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Dependencies
+
+### Used by
+
+ - [search-box](../../search-box)
+
+### Depends on
+
+- [orama-toggler](../../orama-toggler)
+
+### Graph
+```mermaid
+graph TD;
+  orama-navigation-bar --> orama-toggler
+  search-box --> orama-navigation-bar
+  style orama-navigation-bar fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx b/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx
@@ -12,9 +12,7 @@ export type SearchResultsProps = {
 })
 export class SearchResults {
   @Element() el: HTMLUListElement
-
   @Event() oramaItemClick: EventEmitter<SearchResult>
-
   @Prop() sections: SearchResultBySection[] = []
   @Prop() searchTerm: SearchResultsProps['searchTerm']
 

diff --git a/packages/ui-stencil/src/components/orama-toggler/readme.md b/packages/ui-stencil/src/components/orama-toggler/readme.md
@@ -16,12 +16,12 @@
 
 ### Used by
 
- - [search-box](../search-box)
+ - [orama-navigation-bar](../internal/orama-navigation-bar)
 
 ### Graph
 ```mermaid
 graph TD;
-  search-box --> orama-toggler
+  orama-navigation-bar --> orama-toggler
   style orama-toggler fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/ui-stencil/src/components/search-box/readme.md b/packages/ui-stencil/src/components/search-box/readme.md
@@ -18,18 +18,19 @@
 
 ### Depends on
 
-- [orama-toggler](../orama-toggler)
+- [orama-navigation-bar](../internal/orama-navigation-bar)
 - [orama-search](../internal/orama-search)
 - [orama-chat](../internal/orama-chat)
 - [orama-text](../internal/orama-text)
 
 ### Graph
 ```mermaid
 graph TD;
-  search-box --> orama-toggler
+  search-box --> orama-navigation-bar
   search-box --> orama-search
   search-box --> orama-chat
   search-box --> orama-text
+  orama-navigation-bar --> orama-toggler
   orama-search --> orama-input
   orama-search --> orama-facets
   orama-search --> orama-search-results

diff --git a/packages/ui-stencil/src/components/search-box/search-box.scss b/packages/ui-stencil/src/components/search-box/search-box.scss
@@ -10,7 +10,6 @@
   z-index: 1000;
   flex-direction: column;
   justify-content: space-between;
-  padding: var(--spacing-s, $spacing-s) 0;
   &.hidden {
     display: none;
   }

diff --git a/packages/ui-stencil/src/components/search-box/search-box.tsx b/packages/ui-stencil/src/components/search-box/search-box.tsx
@@ -58,20 +58,7 @@ export class SearchBox {
     return (
       <Host>
         <div class={{ 'orama-container': true, hidden: !globalContext.open }}>
-          {/* NAVIGATION - to replace with component */}
-          <div style={{ display: 'flex', padding: '8px' }}>
-            <div style={{ flex: '1' }}>
-              <button type="button" onClick={() => (globalContext.open = false)}>
-                Back
-              </button>
-            </div>
-            <div style={{ display: 'flex', justifyContent: 'center', flexGrow: '1' }}>
-              <orama-toggler />
-            </div>
-            <div style={{ display: 'flex', flex: '1', justifyContent: 'end' }}>
-              <div>...</div>
-            </div>
-          </div>
+          <orama-navigation-bar />
           {/* MAIN CONTENT */}
           <div class="main">
             <orama-search style={{ display: globalContext.selectedTab === 'search' ? 'flex' : 'none' }} />

diff --git a/packages/ui-stencil/src/styles/_typography.scss b/packages/ui-stencil/src/styles/_typography.scss
@@ -5,6 +5,7 @@ $font-primary: 'Instrument Sans', sans-serif;
 $font-size-xs: pxToRem(12);
 $font-size-sm: pxToRem(14);
 $font-size-md: pxToRem(16);
+$font-size-lg: pxToRem(20);
 
 // FONT WEIGHT
 $font-weight-normal: 400;
@@ -19,6 +20,7 @@ $theme-typography: (
   '--font-size-xs': $font-size-xs,
   '--font-size-sm': $font-size-sm,
   '--font-size-md': $font-size-md,
+  '--font-size-lg': $font-size-lg,
   '--font-weight-normal': $font-weight-normal,
   '--font-weight-semibold': $font-weight-semibold,
   '--font-line-height-s': $font-line-height-s,
Original file line number	Diff line number	Diff line change
Expand Up		@@ -51,6 +51,9 @@ export const OramaInput = /@__PURE__/ defineContainer<JSX.OramaInput>('orama-i
		]);


		export const OramaNavigationBar = /@__PURE__/ defineContainer<JSX.OramaNavigationBar>('orama-navigation-bar', undefined);


		export const OramaSearch = /@__PURE__/ defineContainer<JSX.OramaSearch>('orama-search', undefined);


Expand Down