diff --git a/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts b/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts index 9b07ca521..f5762e03d 100644 --- a/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts +++ b/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts @@ -254,14 +254,14 @@ export declare interface ModusCheckbox extends Components.ModusCheckbox { @ProxyCmp({ - inputs: ['ariaLabel', 'chipStyle', 'disabled', 'hasError', 'imageUrl', 'showCheckmark', 'showClose', 'size', 'value'] + inputs: ['ariaLabel', 'chipStyle', 'disabled', 'hasError', 'imageUrl', 'maxWidth', 'showCheckmark', 'showClose', 'size', 'value'] }) @Component({ selector: 'modus-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['ariaLabel', 'chipStyle', 'disabled', 'hasError', 'imageUrl', 'showCheckmark', 'showClose', 'size', 'value'], + inputs: ['ariaLabel', 'chipStyle', 'disabled', 'hasError', 'imageUrl', 'maxWidth', 'showCheckmark', 'showClose', 'size', 'value'], }) export class ModusChip { protected el: HTMLElement; diff --git a/stencil-workspace/package-lock.json b/stencil-workspace/package-lock.json index da195ed53..9022c6c90 100644 --- a/stencil-workspace/package-lock.json +++ b/stencil-workspace/package-lock.json @@ -9,6 +9,7 @@ "version": "0.5.1", "license": "MIT", "dependencies": { + "@popperjs/core": "^2.11.8", "@stencil/core": "^3.3.0", "@tanstack/table-core": "^8.8.5" }, @@ -1306,6 +1307,15 @@ "node": ">= 8" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@puppeteer/browsers": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-0.5.0.tgz", diff --git a/stencil-workspace/package.json b/stencil-workspace/package.json index 5770d7c4a..94ca051b3 100644 --- a/stencil-workspace/package.json +++ b/stencil-workspace/package.json @@ -39,6 +39,7 @@ "start-storybook": "npm run build && cd storybook && npm run storybook" }, "dependencies": { + "@popperjs/core": "^2.11.8", "@stencil/core": "^3.3.0", "@tanstack/table-core": "^8.8.5" }, diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index 3ad014eb2..b198d63b9 100644 --- a/stencil-workspace/src/components.d.ts +++ b/stencil-workspace/src/components.d.ts @@ -299,6 +299,10 @@ export namespace Components { * (optional) The image's url. */ "imageUrl": string; + /** + * (optional) Maximum width for the Chip's text and shows ellipsis when truncated + */ + "maxWidth": string; /** * (optional) Whether to show the checkmark. */ @@ -1346,7 +1350,7 @@ export namespace Components { /** * (optional) The tooltip's position relative to its content. */ - "position": 'bottom' | 'left' | 'right' | 'top'; + "position": ToolTipPlacement; /** * The tooltip's text. */ @@ -2207,6 +2211,10 @@ declare namespace LocalJSX { * (optional) The image's url. */ "imageUrl"?: string; + /** + * (optional) Maximum width for the Chip's text and shows ellipsis when truncated + */ + "maxWidth"?: string; /** * An event that fires on chip click. */ @@ -3425,7 +3433,7 @@ declare namespace LocalJSX { /** * (optional) The tooltip's position relative to its content. */ - "position"?: 'bottom' | 'left' | 'right' | 'top'; + "position"?: ToolTipPlacement; /** * The tooltip's text. */ diff --git a/stencil-workspace/src/components/modus-navbar/modus-navbar.e2e.ts b/stencil-workspace/src/components/modus-navbar/modus-navbar.e2e.ts index 32d0e70b1..d589e1ac9 100644 --- a/stencil-workspace/src/components/modus-navbar/modus-navbar.e2e.ts +++ b/stencil-workspace/src/components/modus-navbar/modus-navbar.e2e.ts @@ -184,15 +184,17 @@ describe('modus-navbar', () => { navbar.setProperty('searchTooltip', { text: 'Search' }); await page.waitForChanges(); - const tooltip = await page.find('modus-navbar >>> :first-child'); - const tooltipText = await tooltip.find('modus-tooltip >>> .text'); - expect(await tooltipText.isVisible()).toBe(false); + const tooltip = await searchIcon.find('modus-tooltip >>> .tooltip'); + expect(tooltip.getAttribute('data-show')).toBeNull(); - await searchIcon.find('modus-tooltip >>> .modus-tooltip').then((e) => e.hover()); + await searchIcon.hover(); await page.waitForChanges(); - expect(await tooltipText.isVisible()).toBe(true); - expect(tooltipText.innerText).toBe('Search'); + await new Promise((r) => setTimeout(r, 500)); + expect(tooltip.getAttribute('data-show')).not.toBeNull(); + + const tooltipText = await page.$eval('modus-navbar >>> modus-tooltip >>> .tooltip', (tooltip) => tooltip.textContent); + expect(tooltipText).toBe('Search'); }); it('should show searchoverlay on search button click', async () => { @@ -301,7 +303,7 @@ describe('modus-navbar', () => { expect(await productLogo.isVisible()).toBe(true); }); - it('should show tooltip on hover of profile menu', async () => { + it('should show tooltip on hover of profile menu and hide it when menu is open', async () => { const page = await newE2EPage(); await page.setContent(''); @@ -312,66 +314,22 @@ describe('modus-navbar', () => { await page.waitForChanges(); const profileMenuButton = await page.find('modus-navbar >>> .profile-menu'); - const tooltipText = await profileMenuButton.find('modus-tooltip >>> .text'); - - expect(await tooltipText.isVisible()).toBe(false); - - await profileMenuButton.find('modus-tooltip >>> .modus-tooltip').then((e) => e.hover()); - - await page.waitForChanges(); - - expect(await tooltipText.isVisible()).toBe(true); - expect(tooltipText.innerText).toBe('Modus User'); - }); - - it('should hide tooltip on hovering over of profile menu', async () => { - const page = await newE2EPage(); - await page.setContent(''); - - await page.waitForChanges(); - - const navbar = await page.find('modus-navbar'); - navbar.setProperty('profileMenuOptions', { tooltip: { text: 'Modus User' } }); - await page.waitForChanges(); - - const profileMenuButton = await page.find('modus-navbar >>> .profile-menu'); - const tooltipText = await profileMenuButton.find('modus-tooltip >>> .text'); - - await profileMenuButton.find('modus-tooltip >>> .modus-tooltip').then((e) => e.hover()); - await page.waitForChanges(); - - page.mouse.move(0, 0); - - await page.waitForChanges(); - expect(await tooltipText.isVisible()).toBe(false); - }); - - it('should hide tooltip while profile menu open', async () => { - const page = await newE2EPage(); - await page.setContent(''); - - await page.waitForChanges(); + const tooltip = await profileMenuButton.find('modus-tooltip >>> .tooltip'); + expect(tooltip.getAttribute('data-show')).toBeNull(); - const navbar = await page.find('modus-navbar'); - navbar.setProperty('profileMenuOptions', { tooltip: { text: 'Modus User' } }); + await profileMenuButton.hover(); await page.waitForChanges(); - const profileMenuButton = await page.find('modus-navbar >>> .profile-menu'); - const tooltipText = await profileMenuButton.find('modus-tooltip >>> .text'); + await new Promise((r) => setTimeout(r, 500)); + expect(tooltip.getAttribute('data-show')).not.toBeNull(); - await profileMenuButton.find('modus-tooltip >>> .modus-tooltip').then((e) => e.hover()); - - await page.waitForChanges(); + const tooltipText = await page.$eval('modus-navbar >>> modus-tooltip >>> .tooltip', (tooltip) => tooltip.textContent); + expect(tooltipText).toBe('Modus User'); await profileMenuButton.click(); - - await page.waitForChanges(); - - const profileMenu = await page.find('modus-navbar >>> modus-navbar-profile-menu'); - - expect(await profileMenu.isVisible()).toBe(true); - expect(await tooltipText.isVisible()).toBe(false); + await new Promise((r) => setTimeout(r, 500)); + expect(tooltip.getAttribute('data-show')).toBeNull(); }); it('should render primary logo in all screen when secondary logo not provided', async () => { diff --git a/stencil-workspace/src/components/modus-side-navigation/modus-side-navigation-item/modus-side-navigation-item.tsx b/stencil-workspace/src/components/modus-side-navigation/modus-side-navigation-item/modus-side-navigation-item.tsx index b89a6e102..98bfd2db4 100644 --- a/stencil-workspace/src/components/modus-side-navigation/modus-side-navigation-item/modus-side-navigation-item.tsx +++ b/stencil-workspace/src/components/modus-side-navigation/modus-side-navigation-item/modus-side-navigation-item.tsx @@ -93,31 +93,31 @@ export class ModusSideNavigationItem { const classes = `side-nav-item${this.expanded ? ' expanded' : ''}${this.selected ? ' selected' : ''}${ this.disabled ? ' disabled' : '' }`; - const menuIconTooltip = this.expanded || this.disabled ? null : this.label; + const menuIconTooltip = this.label; return ( -
  • (this._itemRef = el)} - tabIndex={this.disabled ? -1 : 0} - class={classes} - onClick={() => this.handleClick()} - onKeyDown={(e) => this.handleKeyDown(e)} - aria-disabled={this.disabled ? 'true' : null} - aria-label={this.label} - aria-current={this.selected ? 'true' : null} - onFocus={() => this.sideNavItemFocus.emit({ id: this.element.id })}> -
    this.sideNavItemFocus.emit({ id: this.element.id })}> - + +
  • (this._itemRef = el)} + tabIndex={this.disabled ? -1 : 0} + class={classes} + onClick={() => this.handleClick()} + onKeyDown={(e) => this.handleKeyDown(e)} + aria-disabled={this.disabled ? 'true' : null} + aria-label={this.label} + aria-current={this.selected ? 'true' : null} + onFocus={() => this.sideNavItemFocus.emit({ id: this.element.id })}> +
    this.sideNavItemFocus.emit({ id: this.element.id })}> {this.menuIcon && } - -
    + - {this.expanded &&
    {this.label}
    } + {this.expanded &&
    {this.label}
    } -
    {this.showExpandIcon && }
    -
    • +
    {this.showExpandIcon && }
    + + ); } } diff --git a/stencil-workspace/src/components/modus-side-navigation/modus-side-navigation.spec.tsx b/stencil-workspace/src/components/modus-side-navigation/modus-side-navigation.spec.tsx index ac1e1d669..7d936e79b 100644 --- a/stencil-workspace/src/components/modus-side-navigation/modus-side-navigation.spec.tsx +++ b/stencil-workspace/src/components/modus-side-navigation/modus-side-navigation.spec.tsx @@ -71,15 +71,15 @@ describe('modus-side-navigation-item', () => { expect(page.root).toEqualHtml(` +
  • - -
    • +     `); diff --git a/stencil-workspace/src/components/modus-tooltip/modus-tooltip.e2e.ts b/stencil-workspace/src/components/modus-tooltip/modus-tooltip.e2e.ts index e7c30e664..8d54e3765 100644 --- a/stencil-workspace/src/components/modus-tooltip/modus-tooltip.e2e.ts +++ b/stencil-workspace/src/components/modus-tooltip/modus-tooltip.e2e.ts @@ -12,29 +12,35 @@ describe('modus-tooltip', () => { it('renders changes to text', async () => { const page = await newE2EPage(); - await page.setContent(''); + await page.setContent(''); - let text = await page.find('modus-tooltip >>> .text'); - expect(text.textContent).toEqual('Hello'); + let text = await page.find('modus-tooltip >>> .tooltip'); + expect(text).toHaveClass('hide'); const tooltip = await page.find('modus-tooltip'); - tooltip.setProperty('text', 'Something else'); + tooltip.setProperty('text', 'Something'); await page.waitForChanges(); - text = await page.find('modus-tooltip >>> .text'); - expect(text.textContent).toEqual('Something else'); + + text = await page.find('modus-tooltip >>> .tooltip'); + expect(text.textContent).toEqual('Something'); }); it('renders changes to the position', async () => { const page = await newE2EPage(); - await page.setContent(''); + await page.setContent(` + + Button + + `); const component = await page.find('modus-tooltip'); - const element = await page.find('modus-tooltip >>> .modus-tooltip'); - expect(element).toHaveClass('top'); + let element = await page.find('modus-tooltip >>> .tooltip'); + expect(element.getAttribute('data-popper-placement')).toEqual('top'); component.setProperty('position', 'bottom'); await page.waitForChanges(); - expect(element).toHaveClass('bottom'); + element = await page.find('modus-tooltip >>> .tooltip'); + expect(element.getAttribute('data-popper-placement')).toEqual('bottom'); }); it('tooltip should show or hide if disabled prop set', async () => { @@ -44,12 +50,32 @@ describe('modus-tooltip', () => { tooltip.setProperty('disabled', false); await page.waitForChanges(); - let text = await page.find('modus-tooltip >>> .text'); - expect(text.textContent).toEqual('Hello'); + let text = await page.find('modus-tooltip >>> .tooltip'); + expect(text).not.toHaveClass('hide'); tooltip.setProperty('disabled', true); await page.waitForChanges(); - text = await page.find('modus-tooltip >>> .text'); - expect(text).toEqual(null); + text = await page.find('modus-tooltip >>> .tooltip'); + expect(text).toHaveClass('hide'); + }); + + it('should display tooltip on hover', async () => { + const page = await newE2EPage(); + + await page.setContent(` + + Button + + `); + await page.hover('modus-button'); // Hover over the element that triggers the tooltip + await new Promise((r) => setTimeout(r, 500)); + + const tooltip = await page.find('modus-tooltip >>> .tooltip'); + expect(tooltip.getAttribute('data-show')).not.toBeNull(); + + const button = await page.find('modus-button >>> button'); + await button.click(); + await new Promise((r) => setTimeout(r, 500)); + expect(tooltip.getAttribute('data-show')).toBeNull(); }); }); diff --git a/stencil-workspace/src/components/modus-tooltip/modus-tooltip.scss b/stencil-workspace/src/components/modus-tooltip/modus-tooltip.scss index cd6460ded..5f27416d5 100644 --- a/stencil-workspace/src/components/modus-tooltip/modus-tooltip.scss +++ b/stencil-workspace/src/components/modus-tooltip/modus-tooltip.scss @@ -1,88 +1,52 @@ @import './modus-tooltip.vars'; -.modus-tooltip { - align-items: center; - display: inline-flex; +.tooltip { + background: $modus-tooltip-bg; + border-radius: $rem-2px; + color: $modus-tooltip-color; + display: none; font-family: $primary-font; - justify-content: center; - position: relative; - - .text { - background-color: $modus-tooltip-bg; - border-radius: $rem-2px; - color: $modus-tooltip-color; - display: none; - font-size: $rem-12px; - opacity: 0; - padding: $rem-4px $rem-8px; - position: absolute; - text-align: center; - transition: opacity 0.3s ease-in-out; - width: max-content; - z-index: 1; - } - - .text::after { - border-style: solid; - border-width: $rem-5px; - content: ''; - position: absolute; - } - - &.top { - .text { - top: -2.125rem; - } + font-size: $rem-12px; + max-width: none; + padding: $rem-4px $rem-8px; + white-space: nowrap; + z-index: 1; +} - .text::after { - border-color: $modus-tooltip-bg transparent transparent transparent; - left: 50%; - margin-left: -0.313rem; - top: 100%; - } - } +.tooltip[data-show]:not(.hide) { + display: block; +} - &.bottom { - .text { - bottom: -2.125rem; - } +#arrow, +#arrow::before { + background: inherit; + height: 8px; + position: absolute; + width: 8px; +} - .text::after { - border-color: transparent transparent $modus-tooltip-bg transparent; - bottom: 100%; - left: 50%; - margin-left: -0.313rem; - } - } +#arrow { + visibility: hidden; +} - &.left { - .text { - right: calc(100% + 0.375rem); - } +#arrow::before { + content: ''; + transform: rotate(45deg); + visibility: visible; +} - .text::after { - border-color: transparent transparent transparent $modus-tooltip-bg; - left: 100%; - margin-top: -0.313rem; - top: 50%; - } - } +.tooltip[data-popper-placement^='top'] > #arrow { + bottom: -4px; +} - &.right { - .text { - left: calc(100% + 0.375rem); - } +.tooltip[data-popper-placement^='bottom'] > #arrow { + top: -4px; +} - .text::after { - border-color: transparent $modus-tooltip-bg transparent transparent; - margin-top: -0.313rem; - right: 100%; - top: 50%; - } - } +.tooltip[data-popper-placement^='left'] > #arrow { + right: -4px; +} - &:hover .text { - display: unset; - opacity: 1; - } +.tooltip[data-popper-placement^='right'] > #arrow { + left: -4px; } diff --git a/stencil-workspace/src/components/modus-tooltip/modus-tooltip.spec.ts b/stencil-workspace/src/components/modus-tooltip/modus-tooltip.spec.ts index bee0d576b..32af62e0c 100644 --- a/stencil-workspace/src/components/modus-tooltip/modus-tooltip.spec.ts +++ b/stencil-workspace/src/components/modus-tooltip/modus-tooltip.spec.ts @@ -10,10 +10,11 @@ describe('modus-tooltip', () => { expect(root).toEqualHtml(` -
    - -
    +     `); diff --git a/stencil-workspace/src/components/modus-tooltip/modus-tooltip.tsx b/stencil-workspace/src/components/modus-tooltip/modus-tooltip.tsx index 37fb79f58..7292efb08 100644 --- a/stencil-workspace/src/components/modus-tooltip/modus-tooltip.tsx +++ b/stencil-workspace/src/components/modus-tooltip/modus-tooltip.tsx @@ -1,5 +1,8 @@ // eslint-disable-next-line -import { Component, h, Prop } from '@stencil/core'; +import { Component, Element, Fragment, h, Prop, Watch } from '@stencil/core'; +import { createPopper, Instance } from '@popperjs/core'; + +type ToolTipPlacement = 'bottom' | 'left' | 'right' | 'top' | 'auto'; @Component({ tag: 'modus-tooltip', @@ -7,30 +10,145 @@ import { Component, h, Prop } from '@stencil/core'; shadow: true, }) export class ModusTooltip { + @Element() element: HTMLElement; /** (optional) The tooltip's aria-label. */ @Prop() ariaLabel: string | null; /** (optional) The tooltip's position relative to its content. */ - @Prop() position: 'bottom' | 'left' | 'right' | 'top' = 'top'; + @Prop() position: ToolTipPlacement = 'top'; + @Watch('position') + handlePositionChange(newValue: ToolTipPlacement) { + if (this.popperInstance) { + this.popperInstance.setOptions((options) => ({ + ...options, + placement: newValue, + modifiers: [...options.modifiers], + })); + } else this.initializePopper(newValue); + } /** The tooltip's text. */ @Prop() text: string; + @Watch('text') onTextChange(newValue: string) { + if (newValue?.length > 1) { + this.initializePopper(this.position); + } else { + this.cleanupPopper(); + } + } /** Hide the tooltip */ @Prop() disabled: boolean; + @Watch('disabled') onDisabledChange(newValue: boolean) { + if (!newValue) { + this.initializePopper(this.position); + } else { + this.cleanupPopper(); + } + } + + private popperInstance: Instance; + private tooltipElement: HTMLDivElement; + private readonly showEvents = ['mouseenter', 'focus']; + private readonly hideEvents = ['mouseleave', 'blur', 'click']; + private showEventsListener = () => this.show(); + private hideEventsListener = () => this.hide(); + + componentDidLoad(): void { + this.tooltipElement = this.element.shadowRoot.querySelector('.tooltip') as HTMLDivElement; + if (!this.disabled && this.text?.length > 1) { + this.initializePopper(this.position); + } + } + + disconnectedCallback(): void { + this.cleanupPopper(); + } + + initializePopper(position: ToolTipPlacement): void { + if (this.popperInstance) { + this.cleanupPopper(); + } + + const target = this.element.firstElementChild; + if (!target || !this.tooltipElement) return; + + this.popperInstance = createPopper(target, this.tooltipElement, { + placement: position, + modifiers: [ + { + name: 'offset', + options: { + offset: [0, 8], + }, + }, + ], + }); + + this.showEvents.forEach((event) => { + target.addEventListener(event, this.showEventsListener); + }); + + this.hideEvents.forEach((event) => { + target.addEventListener(event, this.hideEventsListener); + }); + } + + cleanupPopper(): void { + const target = this.element.firstElementChild; + if (target) { + this.showEvents.forEach((event) => { + target.removeEventListener(event, this.showEventsListener); + }); + + this.hideEvents.forEach((event) => { + target.removeEventListener(event, this.hideEventsListener); + }); + } + + this.popperInstance?.destroy(); + this.popperInstance = null; + } + + show(): void { + if (this.popperInstance) { + // Make the tooltip visible + this.tooltipElement.setAttribute('data-show', ''); + + // Enable the event listeners + this.popperInstance.setOptions((options) => ({ + ...options, + modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }], + })); + + // Update its position + this.popperInstance.update(); + } + } + + hide(): void { + if (this.popperInstance) { + // Hide the tooltip + this.tooltipElement.removeAttribute('data-show'); + + // Disable the event listeners + this.popperInstance.setOptions((options) => ({ + ...options, + modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }], + })); + } + } render(): unknown { - const className = `modus-tooltip ${this.position}`; - const showTooltip = !this.disabled && this.text; + const hidden = this.disabled || !(this.text?.length > 1); return ( -
    + - {showTooltip && ( - - )} -
    + + ); } } diff --git a/stencil-workspace/src/components/modus-tooltip/readme.md b/stencil-workspace/src/components/modus-tooltip/readme.md index bb18e49e7..3807d90d6 100644 --- a/stencil-workspace/src/components/modus-tooltip/readme.md +++ b/stencil-workspace/src/components/modus-tooltip/readme.md @@ -7,12 +7,12 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------- | ------------ | ---------------------------------------------------------- | ---------------------------------------- | ----------- | -| `ariaLabel` | `aria-label` | (optional) The tooltip's aria-label. | `string` | `undefined` | -| `disabled` | `disabled` | Hide the tooltip | `boolean` | `undefined` | -| `position` | `position` | (optional) The tooltip's position relative to its content. | `"bottom" \| "left" \| "right" \| "top"` | `'top'` | -| `text` | `text` | The tooltip's text. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------- | ------------ | ---------------------------------------------------------- | -------------------------------------------------- | ----------- | +| `ariaLabel` | `aria-label` | (optional) The tooltip's aria-label. | `string` | `undefined` | +| `disabled` | `disabled` | Hide the tooltip | `boolean` | `undefined` | +| `position` | `position` | (optional) The tooltip's position relative to its content. | `"auto" \| "bottom" \| "left" \| "right" \| "top"` | `'top'` | +| `text` | `text` | The tooltip's text. | `string` | `undefined` | ## Dependencies diff --git a/stencil-workspace/src/index.html b/stencil-workspace/src/index.html index 59a52b5d2..daffa794f 100644 --- a/stencil-workspace/src/index.html +++ b/stencil-workspace/src/index.html @@ -16,6 +16,182 @@ - + Toggle +
    + + + Button + +
    + + +
    + +
    + +
    + + +
    + +
    + + + +
    +
    +

    + The side navigation of an application provides context through + accessible menu options and positions a consistent component to + connect to various pages in the application. +

    +

    + The side navigation is a collapsible side content of the site’s pages. + It is located alongside the page’s primary content. The component is + designed to add side content to a fullscreen application. It is + activated through the “hamburger” menu in the Navbar. +

    +
    +
    +
    +
    + + diff --git a/stencil-workspace/storybook/stories/components/modus-navbar/modus-navbar.stories.tsx b/stencil-workspace/storybook/stories/components/modus-navbar/modus-navbar.stories.tsx index e0c08254b..66951b7d1 100644 --- a/stencil-workspace/storybook/stories/components/modus-navbar/modus-navbar.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-navbar/modus-navbar.stories.tsx @@ -1,7 +1,6 @@ // @ts-ignore: JSX/MDX with Stencil import docs from './modus-navbar-storybook-docs.mdx'; import { html } from 'lit-html'; -import { ModusNavbarButton } from '../../../../src/components/modus-navbar/modus-navbar.models'; export default { title: 'Components/Navbar', @@ -23,17 +22,17 @@ export default { }, }, profileMenuOptions: { - name: 'profileMenuOptions', + name: 'profile-menu-options', description: 'Set the options for profile menu', table: { - type: { summary: 'object' }, + type: { summary: 'ModusProfileMenuOptions' }, }, }, buttons: { name: 'buttons', description: 'To add icon buttons dynamically to the Navbar, create an array of ModusNavbarButton.', table: { - type: { summary: 'object' }, + type: { summary: 'ModusNavbarButton[]' }, }, }, }, @@ -59,7 +58,6 @@ const Template = ({ profileMenuOptions, buttons, showSearch, enableSearchOverlay enable-search-overlay=${enableSearchOverlay} show-search=${showSearch} show-apps-menu - show-help show-main-menu>
    Render your own main menu.
    @@ -89,10 +87,17 @@ Default.args = { display: "Link 2", icon: "sun" } - ] + ], + tooltip: { + text: 'User Profile Menu', + } }, buttons: [ - { id: 'addMenu', icon: 'add' }, + { id: 'addMenu', icon: 'add', + tooltip: { + text: 'Add', + } + }, { id: 'notificationMenu', icon: 'notifications' }, ], showSearch: false, @@ -164,7 +169,7 @@ const setNavbar = ( profileMenuOptions, logoUrl = '', iconUrl = '', - buttons: ModusNavbarButton[] + buttons: [] ) => { const tag = document.createElement('script'); profileMenuOptions.avatarUrl = workingAvatar diff --git a/stencil-workspace/storybook/stories/components/modus-side-navigation/modus-side-navigation.stories.tsx b/stencil-workspace/storybook/stories/components/modus-side-navigation/modus-side-navigation.stories.tsx index 7c3da345b..9f9965875 100644 --- a/stencil-workspace/storybook/stories/components/modus-side-navigation/modus-side-navigation.stories.tsx +++ b/stencil-workspace/storybook/stories/components/modus-side-navigation/modus-side-navigation.stories.tsx @@ -370,6 +370,7 @@ const setJavascriptDataTemplate = (containerId) => { { id:'home-menu', menuIcon: "${homeIcon}", + disabled: true, label: 'Home page 1', children: [ {