docs(elements/ino-nav-drawer): update docs to clarify usage (#1382)

Closes #1207
inovex · Apr 19, 2024 · 6ddff0e · 6ddff0e
1 parent e7acf68
commit 6ddff0e
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 31 deletions.
diff --git a/packages/elements/src/components.d.ts b/packages/elements/src/components.d.ts
@@ -1045,9 +1045,11 @@ export namespace Components {
         "placement": Placement;
     }
     /**
-     * A navigation drawer component with different variants, setting up the base layout for your app.
+     * A navigation drawer component designed to organize and facilitate user navigation in your app.
      * It functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.
-     * > Note: The navigation drawer works best with `ino-list` and `ino-nav-item`s inside.
+     * Usage Note:
+     * - This component is intended exclusively for navigation purposes. It is optimized for holding items like `ino-list` and `ino-nav-item` for effective user guidance.
+     * - To maintain a clean and organized app structure, `ino-nav-drawer` should be used once per application. This ensures a consistent and predictable navigation experience across different parts of the app.
      */
     interface InoNavDrawer {
         /**
@@ -2337,9 +2339,11 @@ declare global {
         "openChange": boolean;
     }
     /**
-     * A navigation drawer component with different variants, setting up the base layout for your app.
+     * A navigation drawer component designed to organize and facilitate user navigation in your app.
      * It functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.
-     * > Note: The navigation drawer works best with `ino-list` and `ino-nav-item`s inside.
+     * Usage Note:
+     * - This component is intended exclusively for navigation purposes. It is optimized for holding items like `ino-list` and `ino-nav-item` for effective user guidance.
+     * - To maintain a clean and organized app structure, `ino-nav-drawer` should be used once per application. This ensures a consistent and predictable navigation experience across different parts of the app.
      */
     interface HTMLInoNavDrawerElement extends Components.InoNavDrawer, HTMLStencilElement {
         addEventListener<K extends keyof HTMLInoNavDrawerElementEventMap>(type: K, listener: (this: HTMLInoNavDrawerElement, ev: InoNavDrawerCustomEvent<HTMLInoNavDrawerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3862,9 +3866,11 @@ declare namespace LocalJSX {
         "placement"?: Placement;
     }
     /**
-     * A navigation drawer component with different variants, setting up the base layout for your app.
+     * A navigation drawer component designed to organize and facilitate user navigation in your app.
      * It functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.
-     * > Note: The navigation drawer works best with `ino-list` and `ino-nav-item`s inside.
+     * Usage Note:
+     * - This component is intended exclusively for navigation purposes. It is optimized for holding items like `ino-list` and `ino-nav-item` for effective user guidance.
+     * - To maintain a clean and organized app structure, `ino-nav-drawer` should be used once per application. This ensures a consistent and predictable navigation experience across different parts of the app.
      */
     interface InoNavDrawer {
         /**
@@ -4820,9 +4826,11 @@ declare module "@stencil/core" {
              */
             "ino-menu": LocalJSX.InoMenu & JSXBase.HTMLAttributes<HTMLInoMenuElement>;
             /**
-             * A navigation drawer component with different variants, setting up the base layout for your app.
+             * A navigation drawer component designed to organize and facilitate user navigation in your app.
              * It functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.
-             * > Note: The navigation drawer works best with `ino-list` and `ino-nav-item`s inside.
+             * Usage Note:
+             * - This component is intended exclusively for navigation purposes. It is optimized for holding items like `ino-list` and `ino-nav-item` for effective user guidance.
+             * - To maintain a clean and organized app structure, `ino-nav-drawer` should be used once per application. This ensures a consistent and predictable navigation experience across different parts of the app.
              */
             "ino-nav-drawer": LocalJSX.InoNavDrawer & JSXBase.HTMLAttributes<HTMLInoNavDrawerElement>;
             /**

diff --git a/packages/elements/src/components/ino-nav-drawer/ino-nav-drawer.tsx b/packages/elements/src/components/ino-nav-drawer/ino-nav-drawer.tsx
@@ -15,15 +15,17 @@ import { NavDrawerAnchor, NavDrawerVariant, NavDrawerLabels } from '../types';
 import classNames from 'classnames';
 
 /**
- * A navigation drawer component with different variants, setting up the base layout for your app.
+ * A navigation drawer component designed to organize and facilitate user navigation in your app.
  * It functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.
  *
- * > Note: The navigation drawer works best with `ino-list` and `ino-nav-item`s inside.
+ * Usage Note:
+ * - This component is intended exclusively for navigation purposes. It is optimized for holding items like `ino-list` and `ino-nav-item` for effective user guidance.
+ * - To maintain a clean and organized app structure, `ino-nav-drawer` should be used once per application. This ensures a consistent and predictable navigation experience across different parts of the app.
  *
- * @slot header - For a custom header on top of the navigation bar
- * @slot logo - For the logo on top of the navigation bar (cannot be used with the `header` slot)
+ * @slot header - For a custom header on top of the navigation drawer
+ * @slot logo - For the logo on top of the navigation drawer (cannot be used with the `header` slot)
  * @slot subtitle - For the element just below the logo (cannot be used with the `header` slot)
- * @slot content - For the content of the navigation bar (usually used with `ino-list` and `ino-nav-item`)
+ * @slot content - For the content of the navigation drawer (usually used with `ino-list` and `ino-nav-item`)
  * @slot footer - For elements below the content slot
  * @slot app - For the application located next to this nav-drawer
  */

diff --git a/packages/elements/src/components/ino-nav-drawer/readme.md b/packages/elements/src/components/ino-nav-drawer/readme.md
@@ -6,10 +6,12 @@
 
 ## Overview
 
-A navigation drawer component with different variants, setting up the base layout for your app.
+A navigation drawer component designed to organize and facilitate user navigation in your app.
 It functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.
 
-> Note: The navigation drawer works best with `ino-list` and `ino-nav-item`s inside.
+Usage Note:
+- This component is intended exclusively for navigation purposes. It is optimized for holding items like `ino-list` and `ino-nav-item` for effective user guidance.
+- To maintain a clean and organized app structure, `ino-nav-drawer` should be used once per application. This ensures a consistent and predictable navigation experience across different parts of the app.
 
 ## Properties
 
@@ -30,14 +32,14 @@ It functions as a wrapper around the material [drawer](https://github.com/materi
 
 ## Slots
 
-| Slot         | Description                                                                             |
-| ------------ | --------------------------------------------------------------------------------------- |
-| `"app"`      | For the application located next to this nav-drawer                                     |
-| `"content"`  | For the content of the navigation bar (usually used with `ino-list` and `ino-nav-item`) |
-| `"footer"`   | For elements below the content slot                                                     |
-| `"header"`   | For a custom header on top of the navigation bar                                        |
-| `"logo"`     | For the logo on top of the navigation bar (cannot be used with the `header` slot)       |
-| `"subtitle"` | For the element just below the logo (cannot be used with the `header` slot)             |
+| Slot         | Description                                                                                |
+| ------------ | ------------------------------------------------------------------------------------------ |
+| `"app"`      | For the application located next to this nav-drawer                                        |
+| `"content"`  | For the content of the navigation drawer (usually used with `ino-list` and `ino-nav-item`) |
+| `"footer"`   | For elements below the content slot                                                        |
+| `"header"`   | For a custom header on top of the navigation drawer                                        |
+| `"logo"`     | For the logo on top of the navigation drawer (cannot be used with the `header` slot)       |
+| `"subtitle"` | For the element just below the logo (cannot be used with the `header` slot)                |
 
 
 ## CSS Custom Properties

diff --git a/packages/storybook/elements-stencil-docs.json b/packages/storybook/elements-stencil-docs.json
@@ -6625,25 +6625,25 @@
       "fileName": "ino-nav-drawer.tsx",
       "tag": "ino-nav-drawer",
       "readme": "# ino-nav-drawer\n\n",
-      "overview": "A navigation drawer component with different variants, setting up the base layout for your app.\nIt functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.\n\n> Note: The navigation drawer works best with `ino-list` and `ino-nav-item`s inside.",
+      "overview": "A navigation drawer component designed to organize and facilitate user navigation in your app.\nIt functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.\n\nUsage Note:\n- This component is intended exclusively for navigation purposes. It is optimized for holding items like `ino-list` and `ino-nav-item` for effective user guidance.\n- To maintain a clean and organized app structure, `ino-nav-drawer` should be used once per application. This ensures a consistent and predictable navigation experience across different parts of the app.",
       "usage": {},
-      "docs": "A navigation drawer component with different variants, setting up the base layout for your app.\nIt functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.\n\n> Note: The navigation drawer works best with `ino-list` and `ino-nav-item`s inside.",
+      "docs": "A navigation drawer component designed to organize and facilitate user navigation in your app.\nIt functions as a wrapper around the material [drawer](https://github.com/material-components/material-components-web/blob/master/packages/mdc-drawer/) component.\n\nUsage Note:\n- This component is intended exclusively for navigation purposes. It is optimized for holding items like `ino-list` and `ino-nav-item` for effective user guidance.\n- To maintain a clean and organized app structure, `ino-nav-drawer` should be used once per application. This ensures a consistent and predictable navigation experience across different parts of the app.",
       "docsTags": [
         {
           "name": "slot",
-          "text": "header - For a custom header on top of the navigation bar"
+          "text": "header - For a custom header on top of the navigation drawer"
         },
         {
           "name": "slot",
-          "text": "logo - For the logo on top of the navigation bar (cannot be used with the `header` slot)"
+          "text": "logo - For the logo on top of the navigation drawer (cannot be used with the `header` slot)"
         },
         {
           "name": "slot",
           "text": "subtitle - For the element just below the logo (cannot be used with the `header` slot)"
         },
         {
           "name": "slot",
-          "text": "content - For the content of the navigation bar (usually used with `ino-list` and `ino-nav-item`)"
+          "text": "content - For the content of the navigation drawer (usually used with `ino-list` and `ino-nav-item`)"
         },
         {
           "name": "slot",
@@ -6858,19 +6858,19 @@
         },
         {
           "name": "content",
-          "docs": "For the content of the navigation bar (usually used with `ino-list` and `ino-nav-item`)"
+          "docs": "For the content of the navigation drawer (usually used with `ino-list` and `ino-nav-item`)"
         },
         {
           "name": "footer",
           "docs": "For elements below the content slot"
         },
         {
           "name": "header",
-          "docs": "For a custom header on top of the navigation bar"
+          "docs": "For a custom header on top of the navigation drawer"
         },
         {
           "name": "logo",
-          "docs": "For the logo on top of the navigation bar (cannot be used with the `header` slot)"
+          "docs": "For the logo on top of the navigation drawer (cannot be used with the `header` slot)"
         },
         {
           "name": "subtitle",