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

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

@@ -0,0 +1,304 @@
+import { h } from "@stencil/core";
+/**
+ * Duration in milliseconds for text enter/exit transitions.
+ */
+const ANIMATION_DURATION_MS = 250;
+/**
+ * Shared inline styles applied to the display container.
+ */
+const DISPLAY_CONTAINER_STYLE = {
+    '--vds-display-animation-duration': `${ANIMATION_DURATION_MS}ms`,
+};
+/**
+ * @component vds-display
+ * @description Compact status display that renders title, value and description fields and animates content changes.
+ * @example
+ * <vds-display display-title="Safety Standby" value="0" description="Speed mph"></vds-display>
+ * @example
+ * <vds-display display-title="Autonomous" value="48" description="Max Speed"></vds-display>
+ */
+export class VdsDisplay {
+    constructor() {
+        /**
+         * Sets the display value shown on the left side.
+         * @type {string}
+         * @default "0"
+         */
+        this.value = '0';
+        /**
+         * Incremental key used to retrigger title animation.
+         * @type {number}
+         * @default 0
+         */
+        this.titleAnimationCycle = 0;
+        /**
+         * Incremental key used to retrigger value animation.
+         * @type {number}
+         * @default 0
+         */
+        this.valueAnimationCycle = 0;
+        /**
+         * Incremental key used to retrigger description animation.
+         * @type {number}
+         * @default 0
+         */
+        this.descriptionAnimationCycle = 0;
+        /**
+         * Stores active timeout handles per animated part.
+         * @private
+         */
+        this.animationTimeouts = {
+            title: undefined,
+            value: undefined,
+            description: undefined,
+        };
+    }
+    /**
+     * Clears pending animation timeouts when the component is disconnected.
+     */
+    disconnectedCallback() {
+        this.clearAnimationTimeout('title');
+        this.clearAnimationTimeout('value');
+        this.clearAnimationTimeout('description');
+    }
+    /**
+     * Triggers title transition when the displayTitle prop changes.
+     * @param {string} newValue - Updated title.
+     * @param {string | undefined} oldValue - Previous title.
+     */
+    watchDisplayTitle(newValue, oldValue) {
+        if (oldValue !== undefined && oldValue !== newValue) {
+            this.triggerAnimation('title', oldValue);
+        }
+    }
+    /**
+     * Triggers value transition when the value prop changes.
+     * @param {string} newValue - Updated value.
+     * @param {string | undefined} oldValue - Previous value.
+     */
+    watchValue(newValue, oldValue) {
+        if (oldValue !== undefined && oldValue !== newValue) {
+            this.triggerAnimation('value', oldValue);
+        }
+    }
+    /**
+     * Triggers description transition when the description prop changes.
+     * @param {string} newValue - Updated description.
+     * @param {string | undefined} oldValue - Previous description.
+     */
+    watchDescription(newValue, oldValue) {
+        if (oldValue !== undefined && oldValue !== newValue) {
+            this.triggerAnimation('description', oldValue);
+        }
+    }
+    /**
+     * Increments the animation cycle counter for the selected part.
+     * @private
+     * @param {AnimationPart} part - Display section to update.
+     */
+    incrementAnimationCycle(part) {
+        if (part === 'title') {
+            this.titleAnimationCycle += 1;
+            return;
+        }
+        if (part === 'value') {
+            this.valueAnimationCycle += 1;
+            return;
+        }
+        this.descriptionAnimationCycle += 1;
+    }
+    /**
+     * Saves the previous content for a section while transition runs.
+     * @private
+     * @param {AnimationPart} part - Display section to update.
+     * @param {string | undefined} value - Previous value to store.
+     */
+    setPreviousValue(part, value) {
+        if (part === 'title') {
+            this.prevTitle = value;
+            return;
+        }
+        if (part === 'value') {
+            this.prevValue = value;
+            return;
+        }
+        this.prevDescription = value;
+    }
+    /**
+     * Clears an active timeout for the selected section.
+     * @private
+     * @param {AnimationPart} part - Display section timeout to clear.
+     */
+    clearAnimationTimeout(part) {
+        if (this.animationTimeouts[part] === undefined) {
+            return;
+        }
+        clearTimeout(this.animationTimeouts[part]);
+        this.animationTimeouts[part] = undefined;
+    }
+    /**
+     * Starts enter/exit animation bookkeeping for the selected section.
+     * @private
+     * @param {AnimationPart} part - Display section to animate.
+     * @param {string | undefined} previousValue - Previous content to animate out.
+     */
+    triggerAnimation(part, previousValue) {
+        this.setPreviousValue(part, previousValue);
+        this.incrementAnimationCycle(part);
+        this.clearAnimationTimeout(part);
+        this.animationTimeouts[part] = setTimeout(() => {
+            this.setPreviousValue(part, undefined);
+            this.animationTimeouts[part] = undefined;
+        }, ANIMATION_DURATION_MS);
+    }
+    /**
+     * Renders the title section and previous title exit node when needed.
+     * @private
+     * @returns The title wrapper when title content exists.
+     */
+    renderTitle() {
+        const hasCurrentTitle = !!this.displayTitle;
+        const hasPreviousTitle = this.prevTitle !== undefined;
+        const titleAnimateClass = this.titleAnimationCycle > 0 ? 'vds-display__title--animate' : '';
+        if (hasCurrentTitle || hasPreviousTitle) {
+            return (h("div", { class: "vds-display__title-wrapper" }, hasPreviousTitle && (h("div", { key: `title-prev-${this.titleAnimationCycle}`, class: "vds-display__title vds-display__title--exit" }, this.prevTitle)), hasCurrentTitle && (h("div", { key: `title-current-${this.titleAnimationCycle}`, class: `vds-display__title ${titleAnimateClass}` }, this.displayTitle))));
+        }
+    }
+    /**
+     * Renders the value section and previous value exit node when needed.
+     * @private
+     * @returns The value wrapper.
+     */
+    renderValue() {
+        const valueAnimateClass = this.valueAnimationCycle > 0 ? 'vds-display__value--animate' : '';
+        return (h("div", { class: "vds-display__value-wrapper" }, this.prevValue !== undefined && (h("div", { key: `value-prev-${this.valueAnimationCycle}`, class: "vds-display__value vds-display__value--exit" }, this.prevValue)), h("div", { key: `value-current-${this.valueAnimationCycle}`, class: `vds-display__value ${valueAnimateClass}` }, this.value)));
+    }
+    /**
+     * Renders the description section and previous description exit node when needed.
+     * @private
+     * @returns The description wrapper when description content exists.
+     */
+    renderDescription() {
+        const hasCurrentDescription = !!this.description;
+        const hasPreviousDescription = this.prevDescription !== undefined;
+        const descriptionAnimateClass = this.descriptionAnimationCycle > 0 ? 'vds-display__description--animate' : '';
+        if (hasCurrentDescription || hasPreviousDescription) {
+            return (h("div", { class: "vds-display__description-wrapper" }, hasPreviousDescription && (h("div", { key: `description-prev-${this.descriptionAnimationCycle}`, class: "vds-display__description vds-display__description--exit" }, this.prevDescription)), hasCurrentDescription && (h("div", { key: `description-current-${this.descriptionAnimationCycle}`, class: `vds-display__description ${descriptionAnimateClass}` }, this.description))));
+        }
+    }
+    /**
+     * Renders the display component.
+     * @returns The rendered display container.
+     */
+    render() {
+        return (h("div", { key: 'b3ccf43b4ee553df7054de2be59cada899253561', class: "vds-display__container", style: DISPLAY_CONTAINER_STYLE }, this.renderTitle(), h("div", { key: '1c6c79f0bed24c4c7b58c5fce191ae3f3d1c0f48', class: "vds-display__value-description-wrapper" }, this.renderValue(), this.renderDescription())));
+    }
+    static get is() { return "vds-display"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-display.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-display.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "displayTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Sets the display title shown on the top side."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-title"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"0\""
+                        }],
+                    "text": "Sets the display value shown on the left side."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'0'"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Sets the display description shown on the right side."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "titleAnimationCycle": {},
+            "valueAnimationCycle": {},
+            "descriptionAnimationCycle": {},
+            "prevTitle": {},
+            "prevValue": {},
+            "prevDescription": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "displayTitle",
+                "methodName": "watchDisplayTitle"
+            }, {
+                "propName": "value",
+                "methodName": "watchValue"
+            }, {
+                "propName": "description",
+                "methodName": "watchDescription"
+            }];
+    }
+}

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

@@ -0,0 +1,192 @@
+export default {
+    title: 'VDS/Components/Display',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/86PvOmqGyBQbQUM8zaJonu/RAILGHOST-HMI-Version-1.0?node-id=3166-81591&m=dev',
+        },
+    },
+};
+const styles = `
+vds-display {
+    width: 116px;
+    margin: 10px;
+}
+
+.button-group {
+  margin: 10px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+`;
+const codeTemplate = args => {
+    return `
+<style>${styles}</style>
+<div>
+  <vds-display
+      display-title="${args.displayTitle}"
+      value="${args.value}"
+      description="${args.description}"
+  ></vds-display>
+  
+  <div class="button-group">
+    <vds-button onclick="updateTitle()">Change Title</vds-button>
+    <vds-button onclick="updateValue()">Increment Value</vds-button>
+    <vds-button onclick="decreaseValue()">Decrement Value</vds-button>
+    <vds-button onclick="updateDescription()">Change Description</vds-button>
+    <vds-button onclick="resetAll()">Reset All</vds-button>
+  </div>
+</div>
+
+<script>
+  (function() {
+    const display = document.querySelector('vds-display');
+    let valueNum = 0;
+    let titleIdx = 0;
+    let descIdx = 0;
+    
+    const titles = ['Safety Standby', 'Standby', 'Autonomous', 'Manual Mode', 'Engineering'];
+    const descriptions = ['Speed mph', 'Max Speed'];
+    
+    window.updateTitle = function() {
+      titleIdx = (titleIdx + 1) % titles.length;
+      display.displayTitle = titles[titleIdx];
+    };
+    
+    window.updateValue = function() {
+      valueNum++;
+      display.value = valueNum.toString();
+    };
+
+    window.decreaseValue = function() {
+      valueNum = Math.max(0, valueNum - 1);
+      display.value = valueNum.toString();
+    };
+
+    window.updateDescription = function() {
+      descIdx = (descIdx + 1) % descriptions.length;
+      display.description = descriptions[descIdx];
+    };
+    
+    window.resetAll = function() {
+      valueNum = 0;
+      titleIdx = 0;
+      descIdx = 0;
+      display.displayTitle = '${args.displayTitle}';
+      display.value = '${args.value}';
+      display.description = '${args.description}';
+    };
+  })();
+</script>
+    `;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    displayTitle: 'Safety Standby',
+    value: '0',
+    description: 'Speed mph',
+};
+const StylesCustom = `
+vds-display {
+  --vds-display-background-color: #1a1a1acc;
+  --vds-display-title-color: var(--static-dataviz-cat-malachite);
+  --vds-display-value-color: var(--static-white);
+  --vds-display-description-color: #ffffff66;
+}
+`;
+const customColorsTemplate = args => {
+    return `
+<style>${styles}</style>
+<style>${StylesCustom}</style>
+<div>
+  <vds-display
+      display-title="${args.displayTitle}"
+      value="${args.value}"
+      description="${args.description}"
+  ></vds-display>
+  
+  <div class="button-group">
+    <vds-button onclick="updateTitle()">Change Title</vds-button>
+    <vds-button onclick="updateValue()">Increment Value</vds-button>
+    <vds-button onclick="decreaseValue()">Decrement Value</vds-button>
+    <vds-button onclick="updateDescription()">Change Description</vds-button>
+    <vds-button onclick="resetAll()">Reset All</vds-button>
+  </div>
+</div>
+
+<script>
+  (function() {
+    const display = document.querySelector('vds-display');
+    const titles = ['Safety Standby', 'Standby', 'Autonomous', 'Manual Mode', 'Engineering'];
+    const descriptions = ['Speed mph', 'Max Speed'];
+    const titleColors = {
+      'Safety Standby': 'var(--static-dataviz-cat-malachite)',
+      Standby: 'var(--static-dataviz-cat-malachite)',
+      Autonomous: 'var(--static-dataviz-cat-tropical-indigo)',
+      'Manual Mode': 'var(--static-dataviz-cat-azure)',
+      Engineering: 'var(--static-dataviz-seq-rose-300)',
+    };
+
+    let valueNum = Number('${args.value}') || 0;
+    let titleIdx = Math.max(0, titles.indexOf('${args.displayTitle}'));
+    let descIdx = Math.max(0, descriptions.indexOf('${args.description}'));
+
+    const applyColorsByTitle = title => {
+      const isSafetyStandby = title === 'Safety Standby';
+      const titleColor = titleColors[title] || 'var(--static-dataviz-cat-malachite)';
+      const valueColor = isSafetyStandby ? 'rgba(255, 255, 255, 0.4)' : 'var(--static-white)';
+      const descriptionColor = isSafetyStandby ? 'rgba(255, 255, 255, 0.4)' : 'rgba(255, 255, 255, 0.6)';
+
+      display.style.setProperty('--vds-display-title-color', titleColor);
+      display.style.setProperty('--vds-display-value-color', valueColor);
+      display.style.setProperty('--vds-display-description-color', descriptionColor);
+    };
+
+    window.updateTitle = function() {
+      titleIdx = (titleIdx + 1) % titles.length;
+      display.displayTitle = titles[titleIdx];
+      applyColorsByTitle(display.displayTitle);
+    };
+
+    window.updateValue = function() {
+      valueNum++;
+      display.value = valueNum.toString();
+    };
+
+    window.decreaseValue = function() {
+      valueNum = Math.max(0, valueNum - 1);
+      display.value = valueNum.toString();
+    };
+
+    window.updateDescription = function() {
+      descIdx = (descIdx + 1) % descriptions.length;
+      display.description = descriptions[descIdx];
+    };
+
+    window.resetAll = function() {
+      valueNum = Number('${args.value}') || 0;
+      titleIdx = Math.max(0, titles.indexOf('${args.displayTitle}'));
+      descIdx = Math.max(0, descriptions.indexOf('${args.description}'));
+
+      display.displayTitle = '${args.displayTitle}';
+      display.value = '${args.value}';
+      display.description = '${args.description}';
+      applyColorsByTitle(display.displayTitle);
+    };
+
+    applyColorsByTitle(display.displayTitle);
+  })();
+</script>
+    `;
+};
+export const CustomColors = customColorsTemplate.bind({});
+CustomColors.args = {
+    displayTitle: 'Safety Standby',
+    value: '0',
+    description: 'Speed mph',
+};

package/dist/collection/components/divider/vds-divider.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,17 +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;
-}
-
 :host(.horizontal) {
   width: 100%;
   height: fit-content;