wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

package/dist/collection/components/sidenav-item/vds-sidenav-item.js

@@ -1,49 +1,219 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @component vds-sidenav-item
+ * @description A navigation item component for side navigation menus. Supports expanded/collapsed states, icons, links, active states, and nested children. Designed for application navigation and hierarchical menu structures.
+ *
+ * @example
+ * <!-- Basic sidenav item (collapsed) -->
+ * <vds-sidenav-item icon="home" value="Home"></vds-sidenav-item>
+ *
+ * @example
+ * <!-- Expanded sidenav item -->
+ * <vds-sidenav-item
+ *   icon="dashboard"
+ *   value="Dashboard"
+ *   expanded="true">
+ * </vds-sidenav-item>
+ *
+ * @example
+ * <!-- Active sidenav item -->
+ * <vds-sidenav-item
+ *   icon="module-settings"
+ *   value="Settings"
+ *   expanded="true"
+ *   is-active="true">
+ * </vds-sidenav-item>
+ *
+ * @example
+ * <!-- Sidenav item as link -->
+ * <vds-sidenav-item
+ *   icon="information"
+ *   value="Documentation"
+ *   expanded="true"
+ *   link_href="https://example.com/docs"
+ *   link_target="_blank"
+ *   link_rel="noopener noreferrer">
+ * </vds-sidenav-item>
+ *
+ * @example
+ * <!-- Sidenav item with children indicator -->
+ * <vds-sidenav-item
+ *   icon="folder-closed"
+ *   value="Projects"
+ *   expanded="true"
+ *   has-children="true">
+ * </vds-sidenav-item>
+ *
+ * @example
+ * <!-- Static sidenav item (always visible, no collapse) -->
+ * <vds-sidenav-item
+ *   icon="star"
+ *   value="Favorites"
+ *   is-static="true">
+ * </vds-sidenav-item>
+ *
+ * @example
+ * <!-- Disabled sidenav item -->
+ * <vds-sidenav-item
+ *   icon="lock-closed"
+ *   value="Premium Feature"
+ *   expanded="true"
+ *   disabled="true">
+ * </vds-sidenav-item>
+ *
+ * @example
+ * <!-- Sidenav item with right slot (badge, counter) -->
+ * <vds-sidenav-item
+ *   icon="bell"
+ *   value="Notifications"
+ *   expanded="true">
+ *   <vds-badge-pill slot="rightSlot" value="5"></vds-badge-pill>
+ * </vds-sidenav-item>
+ *
+ * @example
+ * <!-- Collapsed navigation with icons only -->
+ * <nav>
+ *   <vds-sidenav-item icon="home" value="Home"></vds-sidenav-item>
+ *   <vds-sidenav-item icon="user" value="Profile"></vds-sidenav-item>
+ *   <vds-sidenav-item icon="module-settings" value="Settings"></vds-sidenav-item>
+ * </nav>
+ *
+ * @example
+ * <!-- Complete side navigation example -->
+ * <nav style="width: 240px;">
+ *   <vds-sidenav-item icon="home" value="Home" expanded="true" is-active="true"></vds-sidenav-item>
+ *   <vds-sidenav-item icon="folder-closed" value="Projects" expanded="true" has-children="true"></vds-sidenav-item>
+ *   <vds-sidenav-item icon="user-group" value="Team" expanded="true"></vds-sidenav-item>
+ *   <vds-sidenav-item icon="module-settings" value="Settings" expanded="true"></vds-sidenav-item>
+ * </nav>
+ *
+ * @slot rightSlot - Slot for additional content on the right side (badges, counters, indicators)
+ */
 export class VdsSidenavItem {
     constructor() {
-        /** Puts the navItem in disabled state */
+        /**
+         * Set sidenav-item's size
+         * @type {"large" | "medium" }
+         * @default "medium"
+         */
+        this.size = "medium";
+        /**
+         * Puts the navItem in disabled state
+         * @type {boolean}
+         * @default false
+         */
         this.disabled = false;
-        /** When true expands the nav item to show both text and icon. When false, only shows the icon */
+        /**
+         * When true expands the nav item to show both text and icon. When false, only shows the icon
+         * @type {boolean}
+         * @default false
+         */
         this.expanded = false;
-        /** Define item as active when is true */
+        /**
+         * Define the icon value
+         * @type {string}
+         */
+        this.icon = "";
+        /**
+         * Define item as active when is true
+         * @type {boolean}
+         * @default false
+         */
         this.isActive = false;
-        /** Toggles static mode in nav-item */
+        /**
+         * Toggles static mode in nav-item
+         * @type {boolean}
+         * @default false
+         */
         this.isStatic = false;
-        /** Shows arrow when there are children */
+        /**
+         * Shows arrow when there are children
+         * @type {boolean}
+         * @default false
+         */
         this.hasChildren = false;
-        /** Defines the element as a link */
-        this.link_href = null;
-        /** Sets the target value */
+        /**
+         * Defines the element as a link
+         * @type {string}
+         * @default null
+         */
+        this.link_href = "";
+        /**
+         * Sets the target value
+         * @type {'_self' | '_blank' | '_parent' | '_top'}
+         * @default '_self'
+         */
         this.link_target = '_self';
-        /** Sets the link rel value */
-        this.link_rel = null;
+        /**
+         * Sets the link rel value
+         * @type {string}
+         * @default null
+         */
+        this.link_rel = "";
+        /**
+         * Define text value
+         * @type {string}
+         */
+        this.value = "";
     }
+    /**
+     * Handle click event on sidenav item
+     * @private
+     * @param {MouseEvent} evt - The mouse event
+     */
     handleClick(evt) {
         this.clicked.emit(evt);
     }
+    /**
+     * Generate right slot container for badges and additional content
+     * @private
+     * @returns {HTMLStencilElement | null} Right slot element or null
+     */
     generateRightSlot() {
         return (this.expanded && !this.isStatic ?
             h("span", { class: "vds__sidenav-item--interaction-right-slot" }, h("slot", { name: "rightSlot" }))
             : null);
     }
+    /**
+     * Get icon size based on the sidenav item size
+     * @private
+     * @returns {string} Icon size
+     */
+    get iconSize() {
+        return this.size === 'large' ? '1.5rem' : '1.25rem';
+    }
+    /**
+     * Generate children indicator icon (chevron) when item has children
+     * @private
+     * @returns {HTMLStencilElement | null} Children icon element or null
+     */
     generateChildrenIcon() {
         if (this.hasChildren && (this.isStatic || this.expanded)) {
-            return (h("span", { class: "vds__sidenav-item--interaction-icon" }, h("vds-icon", { "svg-icon": "chevron-right", size: '1.25rem', color: this.disabled ? 'color-icon-disabled' : this.isActive ? 'color-icon-brand-press' : 'color-icon-medium', alt: "Open menu" })));
+            return (h("span", { class: "vds__sidenav-item--interaction-icon" }, h("vds-icon", { "svg-icon": "chevron-right", size: this.iconSize, color: this.disabled ? 'color-icon-disabled' : this.isActive ? 'color-icon-brand-press' : 'color-icon-medium', alt: "Open menu" })));
         }
     }
+    /**
+     * Generate informative icon for the sidenav item
+     * @private
+     * @returns {HTMLStencilElement | null} Informative icon element or null
+     */
     generateInformativeIcon() {
         if (this.icon) {
             return (h("span", { class: `${this.isStatic ? "vds__sidenav-item--static-informative-icon" :
                     this.expanded ? "vds__sidenav-item--expanded-informative-icon" :
-                        "vds__sidenav-item--collapsed-informative-icon"}` }, h("vds-icon", { "svg-icon": this.icon, size: '1.25rem', color: this.disabled ? 'color-icon-disabled' : this.isActive ? 'color-icon-brand-press' : 'color-icon-medium', alt: this.value })));
+                        "vds__sidenav-item--collapsed-informative-icon"}` }, h("vds-icon", { "svg-icon": this.icon, size: this.iconSize, color: this.disabled ? 'color-icon-disabled' : this.isActive ? 'color-icon-brand-press' : 'color-icon-medium', alt: this.value })));
         }
     }
+    /**
+     * Render the sidenav item component
+     * @returns {HTMLStencilElement} The rendered sidenav item element
+     */
     render() {
         const Element = this.link_href ? "a" : "button";
-        const href = this.link_href ? this.link_href : null;
-        const target = this.link_href ? this.link_target : null;
-        const rel = this.link_href ? this.link_rel : null;
-        return (h(Host, { key: 'e712d4afbe752521a2cf2557f52dede3299d41af', class: this.disabled ? 'vds__sidenav-item--disabled' : '' }, h(Element, { key: '0ce43e3d72b54ad1bdbadf49b6243df776ff83af', onClick: (evt) => {
+        const href = this.link_href ? this.link_href : undefined;
+        const target = this.link_href ? this.link_target : undefined;
+        const rel = this.link_href ? this.link_rel : undefined;
+        return (h(Host, { key: 'e38fb933349f92a35c437e9c89449852ef3d9684', class: this.disabled ? 'vds__sidenav-item--disabled' : '' }, h(Element, { key: '50a013166fa8eb3b407baacc1fcc7f6bc29e495a', onClick: (evt) => {
                 if (this.disabled) {
                     evt.stopPropagation();
                     evt.preventDefault();
@@ -55,6 +225,7 @@ export class VdsSidenavItem {
                      ${this.isStatic ? 'vds__sidenav-item--static' : this.expanded ? 'vds__sidenav-item--expanded' : 'vds__sidenav-item--collapsed'}
                      ${this.disabled ? 'vds__sidenav-item--disabled' : ''}
                      ${this.isActive && !this.disabled ? 'vds__sidenav-item--active' : ''}
+                     ${this.size === 'large' ? 'vds__sidenav-item--large' : 'vds__sidenav-item--medium'}
                 ` }, this.generateInformativeIcon(), this.expanded || this.isStatic ? (h("span", { class: `
                     ${this.isStatic ? 'vds__sidenav-item--static-label' : 'vds__sidenav-item--expanded-label'}
                     ${this.disabled ? 'vds__sidenav-item--label-disabled' : ''}
@@ -76,6 +247,32 @@ export class VdsSidenavItem {
     }
     static get properties() {
         return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"large\" | \"medium\"",
+                    "resolved": "\"large\" | \"medium\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"large\" | \"medium\" }"
+                        }, {
+                            "name": "default",
+                            "text": "\"medium\""
+                        }],
+                    "text": "Set sidenav-item's size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"medium\""
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": true,
@@ -87,7 +284,13 @@ export class VdsSidenavItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Puts the navItem in disabled state"
                 },
                 "getter": false,
@@ -107,7 +310,13 @@ export class VdsSidenavItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "When true expands the nav item to show both text and icon. When false, only shows the icon"
                 },
                 "getter": false,
@@ -127,13 +336,17 @@ export class VdsSidenavItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Define the icon value"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon"
+                "attribute": "icon",
+                "defaultValue": "\"\""
             },
             "isActive": {
                 "type": "boolean",
@@ -146,7 +359,13 @@ export class VdsSidenavItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Define item as active when is true"
                 },
                 "getter": false,
@@ -166,7 +385,13 @@ export class VdsSidenavItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Toggles static mode in nav-item"
                 },
                 "getter": false,
@@ -186,7 +411,13 @@ export class VdsSidenavItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Shows arrow when there are children"
                 },
                 "getter": false,
@@ -206,14 +437,20 @@ export class VdsSidenavItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "null"
+                        }],
                     "text": "Defines the element as a link"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "link_href",
-                "defaultValue": "null"
+                "defaultValue": "\"\""
             },
             "link_target": {
                 "type": "string",
@@ -226,7 +463,13 @@ export class VdsSidenavItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{'_self' | '_blank' | '_parent' | '_top'}"
+                        }, {
+                            "name": "default",
+                            "text": "'_self'"
+                        }],
                     "text": "Sets the target value"
                 },
                 "getter": false,
@@ -246,14 +489,20 @@ export class VdsSidenavItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "null"
+                        }],
                     "text": "Sets the link rel value"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "link_rel",
-                "defaultValue": "null"
+                "defaultValue": "\"\""
             },
             "value": {
                 "type": "string",
@@ -266,13 +515,17 @@ export class VdsSidenavItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Define text value"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value"
+                "attribute": "value",
+                "defaultValue": "\"\""
             }
         };
     }
@@ -284,7 +537,13 @@ export class VdsSidenavItem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "clicked"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<MouseEvent>}"
+                        }],
                     "text": "Emits event when item gets clicked"
                 },
                 "complexType": {
@@ -300,4 +559,3 @@ export class VdsSidenavItem {
             }];
     }
 }
-//# sourceMappingURL=vds-sidenav-item.js.map

package/dist/collection/components/sidenav-item/vds-sidenav-item.stories.js

@@ -5,13 +5,18 @@ export default {
             toc: true,
         },
     },
+    argTypes: {
+        size: {
+            options: ["large", "medium"],
+            control: { type: "select" }
+        },
+    }
 };
 const styles = `
     .container {
-        position: relative;
+        padding: 1rem;
         width: 25%;
         height: 50px;
-        background-color: light-grey;
     }    
 `;
 const codeTemplate = args => {
@@ -21,6 +26,7 @@ const codeTemplate = args => {
     <vds-sidenav-item
         value="${args.value || 'Sidenav Item'}"    
         icon="${args.icon}"
+        size="${args.size || 'medium'}"
         expanded="${args.expanded || false}"
         disabled="${args.disabled || false}"
         has-children="${args.hasChildren || false}"
@@ -40,6 +46,7 @@ ExpandableUsage.args = {
     value: 'Sidenav Item',
     expanded: true,
     icon: 'desktop-computer',
+    size: 'medium',
     isActive: false,
 };
 export const ExpandableWithChildrenUsage = codeTemplate.bind({});
@@ -48,6 +55,7 @@ ExpandableWithChildrenUsage.args = {
     disabled: false,
     value: 'Sidenav Item',
     icon: 'desktop-computer',
+    size: 'medium',
     hasChildren: true,
     isActive: false,
 };
@@ -56,6 +64,7 @@ StaticUsage.args = {
     disabled: false,
     value: 'Sidenav Item',
     icon: 'desktop-computer',
+    size: 'medium',
     isStatic: true,
     isActive: false,
 };
@@ -65,6 +74,7 @@ ExpandableAsLinkUsage.args = {
     disabled: false,
     value: 'Sidenav Item',
     icon: 'desktop-computer',
+    size: 'medium',
     isStatic: false,
     isActive: false,
     link_href: 'http://example.com',
@@ -78,6 +88,7 @@ const codeTemplateWithSlot = args => {
     <vds-sidenav-item
         value="${args.value || 'Sidenav Item'}"    
         icon="${args.icon || 'desktop-computer'}"
+      size="${args.size || 'medium'}"
         expanded="${args.expanded || false}"
         disabled="${args.disabled || false}"
         has-children="${args.hasChildren || false}"
@@ -103,9 +114,19 @@ ExpandableWithRightSlotUsage.args = {
     disabled: false,
     value: 'Sidenav Item',
     icon: 'desktop-computer',
+    size: 'medium',
     hasChildren: false,
     isActive: false,
 };
+export const LargeStaticUsage = codeTemplate.bind({});
+LargeStaticUsage.args = {
+    disabled: false,
+    value: 'Sidenav Item',
+    icon: 'desktop-computer',
+    size: 'large',
+    isStatic: true,
+    isActive: false,
+};
 const codeCustomWidthTemplate = args => {
     return `
 <style>
@@ -119,6 +140,7 @@ const codeCustomWidthTemplate = args => {
   padding: 5px;
   value="${args.value || 'Sidenav Item'}"    
   icon="${args.icon}"
+  size="${args.size || 'medium'}"
   expanded="${args.expanded || false}"
   is-static="${args.isStatic || false}"
   is-active="${args.isActive || false}"
@@ -133,8 +155,8 @@ CustomWidthUsage.args = {
     expanded: true,
     isActive: false,
     isStatic: false,
+    size: 'medium',
     ExpandedWidth: '17.5rem',
     StaticWidth: '3.75rem',
     CollapsedWidth: '3.5rem',
 };
-//# sourceMappingURL=vds-sidenav-item.stories.js.map

package/dist/collection/components/sidenav-item-app/vds-sidenav-item-app.css

@@ -509,6 +509,7 @@
   --spacing-18:4.25rem;
   --spacing-19:4.5rem;
   --spacing-20:4.75rem;
+  --spacing-21:5rem;
   --opacity-64:0.64;
   --opacity-32:0.32;
   --opacity-16:0.16;
@@ -761,6 +762,11 @@
   --elevation-layer-3:6;
   --elevation-layer-4:8;
   --elevation-layer-5:12;
+  --elevation-layer-6:16;
+  --elevation-layer-7:20;
+  --elevation-layer-8:24;
+  --elevation-layer-9:28;
+  --elevation-layer-10:32;
   --border-thickness-01:0.0625rem;
   --border-thickness-02:0.078125rem;
   --border-thickness-03:0.09375rem;
@@ -770,6 +776,16 @@
   --border-thickness-07:0.15625rem;
   --border-thickness-08:0.171875rem;
   --border-thickness-09:0.1875rem;
+  --duration-instant:0ms;
+  --duration-short:100ms;
+  --duration-medium:200ms;
+  --duration-long:300ms;
+  --duration-extra-long:500ms;
+  --easing-standard:cubic-bezier(0.2, 0, 0, 1);
+  --easing-emphasized:cubic-bezier(0.2, 0, 0, 1);
+  --easing-decelerate:cubic-bezier(0, 0, 0, 1);
+  --easing-accelerate:cubic-bezier(0.3, 0, 1, 1);
+  --easing-linear:linear;
 }
 
 :root body .vds-font-display-large {
@@ -893,21 +909,6 @@
   gap: var(--spacing-03);
 }
 
-.vds__menu--backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: grayscale(100%) opacity(0.5);
-  pointer-events: auto;
-}
-
-/* This mixing can be used to implement font styling. 
- * to do so, you need to import the scss file and used @include font-style(title, medium);
- * This will implement styling according to the $volt-font-styles map
- */
 :host {
   display: block;
   --vds-sidenav-item-app-expanded-width: var(--vds-sidenav-expanded-width, 17.5rem);