Modus Side Navigation - Added collapseOnClickOutside configuration (#…

…1854)
trimble-oss · Nov 7, 2023 · 46a659d · 46a659d
1 parent 44d0429
commit 46a659d
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 27 deletions.
diff --git a/...ace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts b/...ace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts
@@ -960,14 +960,14 @@ export declare interface ModusSelect extends Components.ModusSelect {
 
 
 @ProxyCmp({
-  inputs: ['data', 'expanded', 'maxWidth', 'mode', 'targetContent']
+  inputs: ['collapseOnClickOutside', 'data', 'expanded', 'maxWidth', 'mode', 'targetContent']
 })
 @Component({
   selector: 'modus-side-navigation',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['data', 'expanded', 'maxWidth', 'mode', 'targetContent'],
+  inputs: ['collapseOnClickOutside', 'data', 'expanded', 'maxWidth', 'mode', 'targetContent'],
 })
 export class ModusSideNavigation {
   protected el: HTMLElement;

diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts
@@ -900,6 +900,10 @@ export namespace Components {
         "value": unknown;
     }
     interface ModusSideNavigation {
+        /**
+          * (optional) To choose whether to collapse the panel when clicked outside.
+         */
+        "collapseOnClickOutside": boolean;
         /**
           * (optional) Data property to create the items.
          */
@@ -2910,6 +2914,10 @@ declare namespace LocalJSX {
         "value"?: unknown;
     }
     interface ModusSideNavigation {
+        /**
+          * (optional) To choose whether to collapse the panel when clicked outside.
+         */
+        "collapseOnClickOutside"?: boolean;
         /**
           * (optional) Data property to create the items.
          */

diff --git a/stencil-workspace/src/components/modus-side-navigation/modus-side-navigation.e2e.ts b/stencil-workspace/src/components/modus-side-navigation/modus-side-navigation.e2e.ts
@@ -325,6 +325,29 @@ describe('modus-side-navigation-item', () => {
     expect(element).toBeTruthy();
   });
 
+  it('renders changes to collapseOnClickOutside prop', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<div><modus-side-navigation  collapse-on-click-outside="false" expanded="true" max-width="300px">
+    <modus-side-navigation-item label="Test">
+      <svg slot="menu-icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="24" width="24" viewBox="0 0 32 32">
+        <g>
+          <path d="m27.707 14.293-11-11a1 1 0 0 0-1.414 0l-11 11A1 1 0 0 0 5 16h5v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V16h5a1 1 0 0 0 .707-1.707z"/>
+        </g>
+      </svg>
+    </modus-side-navigation-item>
+  </modus-side-navigation>
+  <div id="content">Test</div>
+  </div>`);
+    const nav = await page.find('modus-side-navigation >>> nav');
+    const content = await page.find('#content');
+
+    expect(nav).toHaveClass('expanded');
+
+    content.click();
+    await page.waitForChanges();
+    expect(nav).toHaveClass('expanded');
+  });
+
   it('emits sideNavItemClicked event', async () => {
     const page = await newE2EPage();
 

diff --git a/stencil-workspace/src/components/modus-side-navigation/modus-side-navigation.tsx b/stencil-workspace/src/components/modus-side-navigation/modus-side-navigation.tsx
@@ -22,6 +22,9 @@ import { ModusSideNavigationItemInfo, ModusSideNavItemLevelInfo } from './modus-
 export class ModusSideNavigation {
   @Element() element: HTMLElement;
 
+  /** (optional) To choose whether to collapse the panel when clicked outside. */
+  @Prop() collapseOnClickOutside = true;
+
   /** (optional) Data property to create the items. */
   @Prop() data: ModusSideNavigationItemInfo[];
 
@@ -71,7 +74,7 @@ export class ModusSideNavigation {
 
   @Listen('click', { target: 'document' })
   documentClickHandler(event: MouseEvent): void {
-    if (this.element.contains(event.target as HTMLElement) || event.defaultPrevented) return;
+    if (!this.collapseOnClickOutside || this.element.contains(event.target as HTMLElement) || event.defaultPrevented) return;
 
     // Collapse when clicked outside
     this.expanded = false;

diff --git a/stencil-workspace/src/components/modus-side-navigation/readme.md b/stencil-workspace/src/components/modus-side-navigation/readme.md
@@ -7,13 +7,14 @@
 
 ## Properties
 
-| Property        | Attribute        | Description                                                                                                                               | Type                            | Default     |
-| --------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
-| `data`          | --               | (optional) Data property to create the items.                                                                                             | `ModusSideNavigationItemInfo[]` | `undefined` |
-| `expanded`      | `expanded`       | (optional) The expanded state of side navigation panel and items.                                                                         | `boolean`                       | `false`     |
-| `maxWidth`      | `max-width`      | (optional) Maximum width of the side navigation panel in an expanded state.                                                               | `string`                        | `'256px'`   |
-| `mode`          | `mode`           | Mode to make side navigation either overlay or push the content for the selector specified in `targetContent`                             | `"overlay" \| "push"`           | `'overlay'` |
-| `targetContent` | `target-content` | (optional) Specify the selector for the page's content for which paddings and margins will be set by side navigation based on the `mode`. | `string`                        | `undefined` |
+| Property                 | Attribute                   | Description                                                                                                                               | Type                            | Default     |
+| ------------------------ | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
+| `collapseOnClickOutside` | `collapse-on-click-outside` | (optional) To choose whether to collapse the panel when clicked outside.                                                                  | `boolean`                       | `true`      |
+| `data`                   | --                          | (optional) Data property to create the items.                                                                                             | `ModusSideNavigationItemInfo[]` | `undefined` |
+| `expanded`               | `expanded`                  | (optional) The expanded state of side navigation panel and items.                                                                         | `boolean`                       | `false`     |
+| `maxWidth`               | `max-width`                 | (optional) Maximum width of the side navigation panel in an expanded state.                                                               | `string`                        | `'256px'`   |
+| `mode`                   | `mode`                      | Mode to make side navigation either overlay or push the content for the selector specified in `targetContent`                             | `"overlay" \| "push"`           | `'overlay'` |
+| `targetContent`          | `target-content`            | (optional) Specify the selector for the page's content for which paddings and margins will be set by side navigation based on the `mode`. | `string`                        | `undefined` |
 
 
 ## Events

diff --git a/...ories/components/modus-side-navigation/modus-side-navigation-storybook-docs.mdx b/...ories/components/modus-side-navigation/modus-side-navigation-storybook-docs.mdx
@@ -348,13 +348,14 @@ Modus side navigation uses CSS variables for theming ex:`--modus-side-navigation
 
 #### Modus Side Navigation
 
-| Property        | Attribute        | Description                                                                                                                               | Type                            | Default     |
-| --------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
-| `data`          | --               | (optional) Data property to create the items.                                                                                             | `ModusSideNavigationItemInfo[]` | `undefined` |
-| `expanded`      | `expanded`       | (optional) The expanded state of side navigation panel and items.                                                                         | `boolean`                       | `false`     |
-| `maxWidth`      | `max-width`      | (optional) Maximum width of the side navigation panel in an expanded state.                                                               | `string`                        | `'256px'`   |
-| `mode`          | `mode`           | Mode to make side navigation either overlay or push the content for the selector specified in `targetContent`                             | `"overlay" \| "push"`           | `'overlay'` |
-| `targetContent` | `target-content` | (optional) Specify the selector for the page's content for which paddings and margins will be set by side navigation based on the `mode`. | `string`                        | `undefined` |
+| Property                 | Attribute                   | Description                                                                                                                               | Type                            | Default     |
+| ------------------------ | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
+| `collapseOnClickOutside` | `collapse-on-click-outside` | (optional) To choose whether to collapse the panel when clicked outside.                                                                  | `boolean`                       | `true`      |
+| `data`                   | --                          | (optional) Data property to create the items.                                                                                             | `ModusSideNavigationItemInfo[]` | `undefined` |
+| `expanded`               | `expanded`                  | (optional) The expanded state of side navigation panel and items.                                                                         | `boolean`                       | `false`     |
+| `maxWidth`               | `max-width`                 | (optional) Maximum width of the side navigation panel in an expanded state.                                                               | `string`                        | `'256px'`   |
+| `mode`                   | `mode`                      | Mode to make side navigation either overlay or push the content for the selector specified in `targetContent`                             | `"overlay" \| "push"`           | `'overlay'` |
+| `targetContent`          | `target-content`            | (optional) Specify the selector for the page's content for which paddings and margins will be set by side navigation based on the `mode`. | `string`                        | `undefined` |
 
 ## Events
 

diff --git a/...pace/storybook/stories/components/modus-side-navigation/modus-side-navigation.stories.tsx b/...pace/storybook/stories/components/modus-side-navigation/modus-side-navigation.stories.tsx
@@ -4,21 +4,81 @@ import { html } from 'lit-html';
 
 export default {
   title: 'Components/Side Navigation',
+  argTypes: {
+    collapseOnClickOutside: {
+      name: 'collapse-on-click-outside',
+      description: " To choose whether to collapse the panel when clicked outside",
+      table: {
+        type: { summary: 'boolean' },
+      },
+    },
+    data: {
+      description: 'Data property to create the side navigation items',
+      table: {
+        type: { summary: 'ModusSideNavigationItemInfo' },
+      },
+    },
+    maxWidth: {
+      name: 'max-width',
+      description: "Maximum width of the side navigation panel in an expanded state",
+      table: {
+        defaultValue: { summary: '256px' },
+        type: { summary: 'string' },
+      },
+    },
+    mode:
+    {
+      control: {
+        options: [
+          'overlay',
+          'push',
+        ],
+        type: 'select',
+      },
+      description: 'Mode to make side navigation either overlay or push the content for the selector specified in `targetContent`',
+      table: {
+        defaultValue: { summary: `'overlay'` },
+        type: {
+          summary: `'overlay' | 'push'`,
+        },
+      },
+    },
+    expanded: {
+      description: "The expanded state of side navigation panel and items",
+      table: {
+        type: { summary: 'boolean' },
+      },
+    },
+    targetContent: {
+      name: "target-content",
+      description: "Specify the selector for the page's content for which paddings and margins will be set by side navigation based on the `mode`",
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
   parameters: {
     docs: {
       page: docs,
     },
     options: {
       isToolshown: true,
     },
-    controls: {
-      disabled: true,
+    actions: {
+      handles: ['sideNavExpand', 'sideNavItemClicked', 'mainMenuClick'],
     },
+    controls: { expanded: true, sort: 'requiredFirst' },
     viewMode: 'docs',
   },
 };
 
-const DefaultTemplate = () => html`
+const DefaultTemplate = ({
+  collapseOnClickOutside,
+  maxWidth,
+  mode,
+  expanded,
+  targetContent,
+}) => html`
   <div id="defaultTemplate">
     <div
       style="width: 100%;align-items: center;height: 56px;box-shadow: 0 0 2px var(--modus-secondary)!important; margin-top: 50px;">
@@ -35,9 +95,12 @@ const DefaultTemplate = () => html`
       id="container"
       style="display:flex; min-height:500px; overflow-y: auto; position: relative;box-shadow: 0 0 2px var(--modus-secondary)!important;">
       <modus-side-navigation
-        max-width="300px"
+        max-width=${maxWidth}
         id="sideNav"
-        target-content="#defaultTemplate #panelcontent">
+        collapse-on-click-outside=${collapseOnClickOutside}
+        mode=${mode}
+        expanded=${expanded}
+        target-content=${targetContent}>
         <modus-side-navigation-item id="home-menu" label="Home page">
           <svg
             slot="menu-icon"
@@ -121,8 +184,21 @@ const DefaultTemplate = () => html`
   ${setJavascriptDefaultTemplate('defaultTemplate')}
 `;
 export const Default = DefaultTemplate.bind({});
+Default.args = {
+  collapseOnClickOutside: true,
+  maxWidth: '300px',
+  mode: 'overlay',
+  expanded: false,
+  targetContent: '#defaultTemplate #panelcontent',
+};
 
-const SideNavigationWithDataTemplate = () => html`
+const SideNavigationWithDataTemplate = ({
+  collapseOnClickOutside,
+  maxWidth,
+  mode,
+  expanded,
+  targetContent,
+}) => html`
   <div id="dataTemplate">
     <modus-switch id="switch-theme" label="Enable blue theme"></modus-switch>
     <br />
@@ -144,10 +220,12 @@ const SideNavigationWithDataTemplate = () => html`
       id="container"
       style="display:flex; min-height:500px; overflow-y: auto; position: relative;box-shadow: 0 0 2px var(--modus-secondary)!important;">
       <modus-side-navigation
-        max-width="300px"
-        id="sideNav"
-        target-content="#dataTemplate #panelcontent"
-        mode="overlay">
+      max-width=${maxWidth}
+      id="sideNav"
+      collapse-on-click-outside=${collapseOnClickOutside}
+      mode=${mode}
+      expanded=${expanded}
+      target-content=${targetContent}>
       </modus-side-navigation>
 
       <div