From c5827babd48d9ee304351bcc4c8ca2f073740a95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Jos=C3=A9=20Borba=20Fernandes?= Date: Mon, 15 Jul 2024 18:05:10 -0300 Subject: [PATCH] feat: add navigation bar --- .../stories/orama-navigation-bar.stories.tsx | 14 ++++++ .../src/components/stencil-generated/index.ts | 1 + packages/ui-stencil-vue/lib/components.ts | 3 ++ packages/ui-stencil/src/components.d.ts | 13 ++++++ .../orama-navigation-bar.scss | 46 +++++++++++++++++++ .../orama-navigation-bar.tsx | 35 ++++++++++++++ .../internal/orama-navigation-bar/readme.md | 28 +++++++++++ .../orama-search-results.tsx | 2 - .../src/components/orama-toggler/readme.md | 4 +- .../src/components/search-box/readme.md | 5 +- .../src/components/search-box/search-box.scss | 1 - .../src/components/search-box/search-box.tsx | 15 +----- .../ui-stencil/src/styles/_typography.scss | 2 + 13 files changed, 148 insertions(+), 21 deletions(-) create mode 100644 apps/storybook/stories/orama-navigation-bar.stories.tsx create mode 100644 packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.scss create mode 100644 packages/ui-stencil/src/components/internal/orama-navigation-bar/orama-navigation-bar.tsx create mode 100644 packages/ui-stencil/src/components/internal/orama-navigation-bar/readme.md diff --git a/apps/storybook/stories/orama-navigation-bar.stories.tsx b/apps/storybook/stories/orama-navigation-bar.stories.tsx new file mode 100644 index 00000000..f3a04840 --- /dev/null +++ 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 = { + title: 'Internal/OramaNavigationBar', + component: 'orama-navigation-bar', +} + +export default meta +type Story = StoryObj + +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 index 6620bfc0..f957ba4c 100644 --- 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('orama-chat-user-message'); export const OramaFacets = /*@__PURE__*/createReactComponent('orama-facets'); export const OramaInput = /*@__PURE__*/createReactComponent('orama-input'); +export const OramaNavigationBar = /*@__PURE__*/createReactComponent('orama-navigation-bar'); export const OramaSearch = /*@__PURE__*/createReactComponent('orama-search'); export const OramaSearchResults = /*@__PURE__*/createReactComponent('orama-search-results'); export const OramaText = /*@__PURE__*/createReactComponent('orama-text'); diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index 3760c06e..a5ebc042 100644 --- 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('orama-i ]); +export const OramaNavigationBar = /*@__PURE__*/ defineContainer('orama-navigation-bar', undefined); + + export const OramaSearch = /*@__PURE__*/ defineContainer('orama-search', undefined); diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index 38dc3e76..88e86265 100644 --- 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; "orama-facets": LocalJSX.OramaFacets & JSXBase.HTMLAttributes; "orama-input": LocalJSX.OramaInput & JSXBase.HTMLAttributes; + "orama-navigation-bar": LocalJSX.OramaNavigationBar & JSXBase.HTMLAttributes; "orama-search": LocalJSX.OramaSearch & JSXBase.HTMLAttributes; "orama-search-results": LocalJSX.OramaSearchResults & JSXBase.HTMLAttributes; "orama-text": LocalJSX.OramaText & JSXBase.HTMLAttributes; 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 new file mode 100644 index 00000000..0c7acb1a --- /dev/null +++ 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 new file mode 100644 index 00000000..d89fc288 --- /dev/null +++ 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 ( + +
+ +
+
+ +
+
+ + +
+ + ) + } +} 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 new file mode 100644 index 00000000..ed602585 --- /dev/null +++ b/packages/ui-stencil/src/components/internal/orama-navigation-bar/readme.md @@ -0,0 +1,28 @@ +# orama-navigation-bar + + + + + + +## 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 index 8621f74e..1b73613c 100644 --- 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 - @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 index f6ebcf17..7178818e 100644 --- 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 index 3af03cf6..30038c3d 100644 --- a/packages/ui-stencil/src/components/search-box/readme.md +++ b/packages/ui-stencil/src/components/search-box/readme.md @@ -18,7 +18,7 @@ ### 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) @@ -26,10 +26,11 @@ ### 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 index 0ec66648..c53ed167 100644 --- 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 index 5d3e6205..51283c64 100644 --- 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 (
- {/* NAVIGATION - to replace with component */} -
-
- -
-
- -
-
-
...
-
-
+ {/* MAIN CONTENT */}
diff --git a/packages/ui-stencil/src/styles/_typography.scss b/packages/ui-stencil/src/styles/_typography.scss index a934e53a..978662b0 100644 --- 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,