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

package/dist/collection/components/footer/vds-footer.js

@@ -1,33 +1,135 @@
 import { Host, h } from "@stencil/core";
 import { setNodeObserver } from "../../utils/node-utils";
+/**
+ * @component vds-footer
+ * @description Footer component that provides default, expandable, or custom footer layouts with app version, copyright, and powered by sections
+ * @slot default - Default slot for footer links (used in default and expandable types)
+ * @slot expandable-content - Content shown when footer is expanded (expandable type only)
+ * @slot start - Left section content (custom type only)
+ * @slot center - Center section content (custom type only)
+ * @slot end - Right section content (custom type only)
+ * @example
+ * <!-- Default footer with links -->
+ * <vds-footer
+ *   app-version="v1.2.3"
+ *   central-text="Wabtec Corporation. All rights reserved."
+ *   powered-by-text="Powered by">
+ *   <vds-link href="/privacy">Privacy Policy</vds-link>
+ *   <vds-link href="/terms">Terms of Service</vds-link>
+ *   <vds-link href="/contact">Contact</vds-link>
+ * </vds-footer>
+ *
+ * <!-- Expandable footer with bottom position -->
+ * <vds-footer
+ *   type="expandable"
+ *   app-version="v2.0.0"
+ *   expanded-content-position="bottom">
+ *   <vds-link href="/help">Help</vds-link>
+ *   <vds-link href="/support">Support</vds-link>
+ *   <div slot="expandable-content">
+ *     <p>Additional footer information here</p>
+ *   </div>
+ * </vds-footer>
+ *
+ * <!-- Expandable footer with top position -->
+ * <vds-footer
+ *   type="expandable"
+ *   expanded-content-position="top">
+ *   <div slot="expandable-content">
+ *     <vds-menu-list>
+ *       <vds-menu-item>Item 1</vds-menu-item>
+ *       <vds-menu-item>Item 2</vds-menu-item>
+ *     </vds-menu-list>
+ *   </div>
+ * </vds-footer>
+ *
+ * <!-- Custom footer with three sections -->
+ * <vds-footer type="custom">
+ *   <div slot="start">
+ *     <span>© 2026 Company</span>
+ *   </div>
+ *   <div slot="center">
+ *     <vds-link href="/about">About</vds-link>
+ *   </div>
+ *   <div slot="end">
+ *     <span>Version 1.0</span>
+ *   </div>
+ * </vds-footer>
+ */
 export class VdsFooter {
     constructor() {
         /**
-         *  Sets the type for the footer, expandable shows an extra layer of the footer.
-         *  Default is only what is visible.
-         *  and custom allows to set the content of the footer.
+         * Sets the type for the footer
+         * - default: Shows standard footer layout
+         * - expandable: Includes expandable section with toggle button
+         * - custom: Allows custom content via slots
+         * @type {'default' | 'expandable' | 'custom'}
+         * @default 'default'
          */
         this.type = 'default';
-        /** Sets the expanded content position, default is bottom */
+        /**
+         * Sets the expanded content position relative to the footer
+         * @type {'top' | 'bottom'}
+         * @default 'bottom'
+         */
         this.expandedContentPosition = 'bottom';
-        /** Defines the text in the central block of the footer */
+        /**
+         * Defines the text in the central block of the footer
+         * @type {string}
+         * @default 'Wabtec Corporation. All rights reserved.'
+         */
         this.centralText = 'Wabtec Corporation. All rights reserved.';
-        /** Modify the text in the "powered by" section of the footer */
+        /**
+         * Modifies the text in the "powered by" section of the footer
+         * @type {string}
+         * @default 'Powered by'
+         */
         this.poweredByText = 'Powered by';
+        /**
+         * Controls whether the expandable section is currently expanded
+         * @type {boolean}
+         * @default false
+         */
         this.isExpanded = false;
     }
+    /**
+     * Lifecycle hook that runs before component renders
+     * Sets up footer options and separators
+     * @returns {void}
+     */
     componentWillRender() {
         this.setFooterOptions();
     }
+    /**
+     * Lifecycle hook that runs before component loads
+     * Initializes the current year
+     * @returns {void}
+     */
     componentWillLoad() {
         this.setCurrentYear();
     }
+    /**
+     * Lifecycle hook that runs after component is loaded
+     * Sets up mutation observer for slot changes
+     * @returns {void}
+     */
     componentDidLoad() {
         this.observer = setNodeObserver(this.setFooterOptions, this.host, this);
     }
+    /**
+     * Lifecycle hook that runs when component is disconnected
+     * Cleans up mutation observer
+     * @returns {void}
+     */
     disconnectedCallback() {
         this.observer.disconnect();
     }
+    /**
+     * Sets footer options based on type and manages slotted children
+     * Removes non-link children for default/expandable types and adds separators
+     * @private
+     * @returns {void}
+     */
     setFooterOptions() {
         if (this.type !== 'custom') {
             Array.from(this.host.children).forEach(child => {
@@ -38,6 +140,11 @@ export class VdsFooter {
         }
         this.setSeparators();
     }
+    /**
+     * Adds divider elements between link elements in the footer
+     * @private
+     * @returns {void}
+     */
     setSeparators() {
         const linkElements = Array.from(this.host.children).filter((child) => child.nodeName === 'VDS-LINK');
         if (linkElements.length <= 1)
@@ -50,22 +157,46 @@ export class VdsFooter {
             this.host.insertBefore(divider, linkElements[i]);
         }
     }
+    /**
+     * Sets the current year for copyright display
+     * @private
+     * @returns {void}
+     */
     setCurrentYear() {
         this.currentYear = new Date().getFullYear();
     }
+    /**
+     * Toggles the expanded state of the footer
+     * @private
+     * @returns {void}
+     */
     toggleExpand() {
         this.isExpanded = !this.isExpanded;
     }
+    /**
+     * Renders the expandable toggle button for expandable footer type
+     * @private
+     * @returns {HTMLStencilElement} The expand/collapse button element
+     */
     renderExpandableButton() {
         if (this.type === 'expandable') {
             return (h("vds-icon-button", { class: "vds__footer--expand-button", variant: "secondary", size: "small", onClick: () => this.toggleExpand(), icon: this.isExpanded ? 'chevron-up' : 'chevron-down' }));
         }
     }
+    /**
+     * Renders the custom footer layout with start, center, and end slots
+     * @private
+     * @returns {HTMLElement} The custom footer container
+     */
     renderCustomFooter() {
         return (h("div", { class: "vds__footer--container" }, h("div", { class: "vds__footer--slot-start" }, h("slot", { name: "start" })), h("div", { class: "vds__footer--slot-center" }, h("slot", { name: "center" })), h("div", { class: "vds__footer--slot-end" }, h("slot", { name: "end" }))));
     }
+    /**
+     * Renders the component
+     * @returns {HTMLStencilElement} The rendered component
+     */
     render() {
-        return (h(Host, { key: '1dee5304ff56ab8439681fe735cb57b90649a722' }, this.type === 'expandable' && this.expandedContentPosition === 'top' && this.isExpanded && (h("div", { key: 'b64defa7afd3919b7cce983af4f33b51dd6b3936', class: "vds__footer--expandable top" }, h("slot", { key: '5fa14243f860574dd44829cf3c3d35dde6305668', name: "expandable-content" }))), this.type === 'custom' ? (this.renderCustomFooter()) : (h("div", { class: 'vds__footer--container' }, h("div", { class: 'vds__footer--app-version' }, this.appVersion), h("div", { class: 'vds__footer--info' }, h("div", null, "\u00A9 ", this.currentYear, " ", this.centralText), h("div", { class: 'vds__footer--powerby' }, h("span", null, this.poweredByText), h("vds-icon", { size: "2.95775rem,1rem", color: "color-icon-medium", svgIcon: 'wabtec-grey-logo' }))), h("div", { class: `vds__footer--slot ${this.type === 'expandable' ? 'has-expandable-button' : ''}` }, h("slot", null), this.renderExpandableButton()))), this.type === 'expandable' && this.expandedContentPosition === 'bottom' && this.isExpanded && (h("div", { key: '1b7b8351a5a93a52d2b835ed2489dc26af66f07c', class: "vds__footer--expandable bottom" }, h("slot", { key: '85d75bc2b1b7fe67f66021deda4009cf8219511f', name: "expandable-content" })))));
+        return (h(Host, { key: '6eccaea8ce98996883b899d368ab074c9ff71aa5' }, this.type === 'expandable' && this.expandedContentPosition === 'top' && this.isExpanded && (h("div", { key: 'e5b0ae72fb2b4c74a61ec86b5219643a540857e9', class: "vds__footer--expandable top" }, h("slot", { key: '61a233737ac39ccb4fb163e7b9839708b6802a70', name: "expandable-content" }))), this.type === 'custom' ? (this.renderCustomFooter()) : (h("div", { class: 'vds__footer--container' }, h("div", { class: 'vds__footer--app-version' }, this.appVersion), h("div", { class: 'vds__footer--info' }, h("div", null, "\u00A9 ", this.currentYear, " ", this.centralText), h("div", { class: 'vds__footer--powerby' }, h("span", null, this.poweredByText), h("vds-icon", { size: "2.95775rem,1rem", color: "color-icon-medium", svgIcon: 'wabtec-grey-logo' }))), h("div", { class: `vds__footer--slot ${this.type === 'expandable' ? 'has-expandable-button' : ''}` }, h("slot", null), this.renderExpandableButton()))), this.type === 'expandable' && this.expandedContentPosition === 'bottom' && this.isExpanded && (h("div", { key: '2cd6e9893fc3ad1ffe189987ad7fd9b9a4df74ca', class: "vds__footer--expandable bottom" }, h("slot", { key: 'ce3f8de858519db44f2955386ffdb39463612378', name: "expandable-content" })))));
     }
     static get is() { return "vds-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -92,8 +223,14 @@ export class VdsFooter {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the type for the footer, expandable shows an extra layer of the footer.\nDefault is only what is visible.\nand custom allows to set the content of the footer."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{'default' | 'expandable' | 'custom'}"
+                        }, {
+                            "name": "default",
+                            "text": "'default'"
+                        }],
+                    "text": "Sets the type for the footer\n- default: Shows standard footer layout\n- expandable: Includes expandable section with toggle button\n- custom: Allows custom content via slots"
                 },
                 "getter": false,
                 "setter": false,
@@ -112,8 +249,11 @@ export class VdsFooter {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the app version to be display in the footer"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Sets the app version to be displayed in the footer"
                 },
                 "getter": false,
                 "setter": false,
@@ -131,8 +271,14 @@ export class VdsFooter {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the expanded content position, default is bottom"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{'top' | 'bottom'}"
+                        }, {
+                            "name": "default",
+                            "text": "'bottom'"
+                        }],
+                    "text": "Sets the expanded content position relative to the footer"
                 },
                 "getter": false,
                 "setter": false,
@@ -151,7 +297,13 @@ export class VdsFooter {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "'Wabtec Corporation. All rights reserved.'"
+                        }],
                     "text": "Defines the text in the central block of the footer"
                 },
                 "getter": false,
@@ -171,8 +323,14 @@ export class VdsFooter {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Modify the text in the \"powered by\" section of the footer"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "'Powered by'"
+                        }],
+                    "text": "Modifies the text in the \"powered by\" section of the footer"
                 },
                 "getter": false,
                 "setter": false,
@@ -189,4 +347,3 @@ export class VdsFooter {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=vds-footer.js.map

package/dist/collection/components/footer/vds-footer.stories.js

@@ -74,4 +74,3 @@ CustomUsage.argTypes = {
 CustomUsage.args = {
     type: 'custom',
 };
-//# sourceMappingURL=vds-footer.stories.js.map

package/dist/collection/components/header/utils/utils.js

@@ -1,2 +1 @@
 export const popoverCaretFilledLarge = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEyIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDBMNiA2TDEyIDBIMFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=';
-//# sourceMappingURL=utils.js.map

package/dist/collection/components/header/vds-header.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,23 +909,15 @@
   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-header-background-color: var(--surface-lower);
+  --vds-header-content-section-justify-content: end;
+  --vds-header-content-color: var(--color-text-medium);
+  --vds-header-user-section-icon-color: var(--color-icon-medium);
+  --vds-header-user-section-hover-color: var(--color-interaction-black-lowest);
+  --vds-header-user-section-background-color: var(--surface-neutral-default);
+  --vds-header-user-section-z-index: var(--elevation-layer-2);
 }
 :host .vds__header {
   display: flex;
@@ -919,16 +927,16 @@
   flex: 1 0 0;
   align-self: stretch;
   border-radius: var(--radius-sharp);
-  background: var(--surface-lower);
+  background: var(--vds-header-background-color);
   justify-content: end;
 }
 :host .vds__header--content-section {
   display: flex;
   width: 100%;
-  justify-content: end;
+  justify-content: var(--vds-header-content-section-justify-content);
 }
 :host .vds__header--content-section > * {
-  color: var(--color-text-medium);
+  color: var(--vds-header-content-color);
   font-feature-settings: "clig" off, "liga" off;
   font-family: "Roboto Flex", sans-serif;
   font-size: 0.75rem;
@@ -947,7 +955,7 @@
   flex-shrink: 0;
 }
 :host .vds__header--app-name--content {
-  color: var(--color-text-medium);
+  color: var(--vds-header-content-color);
   font-feature-settings: "clig" off, "liga" off;
   font-family: "Roboto Flex", sans-serif;
   font-size: 0.75rem;
@@ -964,10 +972,14 @@
   gap: var(--spacing-02);
   align-self: stretch;
   text-wrap: nowrap;
+  cursor: pointer;
 }
 :host .vds__header--user-section:hover {
   border-radius: var(--radius-medium);
-  background: var(--color-interaction-black-lowest);
+  background: var(--vds-header-user-section-hover-color);
+}
+:host .vds__header--user-section:has(.vds__header--user-section-menu-container-opened:hover) {
+  background: transparent;
 }
 :host .vds__header--user-section:focus {
   border: solid;
@@ -977,7 +989,7 @@
 :host .vds__header--user-section-username {
   align-items: center;
   display: flex;
-  color: var(--color-text-medium);
+  color: var(--vds-header-content-color);
   font-feature-settings: "clig" off, "liga" off;
   font-family: "Roboto Flex", sans-serif;
   font-size: 0.75rem;
@@ -986,16 +998,15 @@
   letter-spacing: 0.00875rem;
   white-space: nowrap;
 }
-:host .vds__header--user-section-avatar {
-  cursor: pointer;
-}
 :host .vds__header--user-section-action-icon {
   align-items: center;
   display: flex;
   width: var(--spacing-06);
   height: var(--spacing-06);
   border-radius: var(--radius-medium);
-  cursor: pointer;
+}
+:host .vds__header--user-section-action-icon vds-icon {
+  fill: var(--vds-header-user-section-icon-color);
 }
 :host .d-flex {
   display: flex;
@@ -1008,11 +1019,11 @@
   position: absolute;
   right: -1.5rem;
   top: var(--spacing-08);
-  z-index: 3;
+  z-index: var(--vds-header-user-section-z-index);
+  cursor: auto;
 }
 :host .vds__header--user-section-menu-container-opened .vds__header--user-section-menu-container-content {
-  margin-top: 6px;
-  background: var(--surface-neutral-default);
+  background: var(--vds-header-user-section-background-color);
   padding: var(--spacing-06) var(--spacing-05);
   border-radius: var(--radius-medium);
   box-shadow: 0px 6px 6px 0px rgba(29, 46, 64, 0.1019607843);
@@ -1022,11 +1033,13 @@
   margin-right: 24px;
   margin-bottom: 6px;
 }
+:host .vds__header--user-section-menu-container-opened span .triangle-rotated path {
+  fill: var(--vds-header-user-section-background-color);
+}
 :host .vds__header--user-section-menu-container-opened .vds__header--arrow-right-align {
   display: flex;
   justify-content: flex-end;
   position: absolute;
   top: 0;
   right: 8px;
-  z-index: 1;
 }