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

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

@@ -5,6 +5,10 @@ export class VdsHeader {
     constructor() {
         /** Allow hide/show User-Section */
         this.showUserSection = true;
+        /** Shows/hides badge dot to show notification or status */
+        this.showBadge = false;
+        /** Sets the status color for badge */
+        this.badgeStatusColor = "neutral";
         this.popupOpened = false;
     }
     handleClickOut(evt) {
@@ -30,15 +34,21 @@ export class VdsHeader {
             this.floatingCleanUp && this.floatingCleanUp();
         }
     }
+    renderAvatar() {
+        if (this.showBadge) {
+            return (h("vds-badge-dot", { overlap: true, statusColor: this.badgeStatusColor, "aria-label": this.badgeAriaLabel }, h("vds-avatar", { class: "vds__header--user-section-avatar", size: "20px", value: this.avatar })));
+        }
+        return (h("vds-avatar", { class: "vds__header--user-section-avatar", size: "20px", value: this.avatar }));
+    }
     render() {
         const showUserSection = this.showUserSection;
-        return (h(Host, { key: '2ab98d90cc6d0db48ce8665a5a0734a044b15acf' }, h("header", { key: '640ef1418597996f3e6f0e5754e4964f8cb72ad6', class: `vds__header` }, h("div", { key: '8d1abb4afad7d25aa655b7ea088bd1efcfc5ef88', class: `vds__header--app-name` }, h("span", { key: '973fef9767a61c5f3f6239f65cc294e1313b0227', class: "vds__header--app-name--content" }, this.value)), h("div", { key: 'af9e2c93a0be51abfde37e9aa1687cf5066a4273', class: "vds__header--content-section" }, h("slot", { key: '2620a1e1fba0644027bd2114540d5865ef4f4e15', name: "contentSection" })), showUserSection && h("div", { key: 'a3229550a19113a2ded1434433d8c89950de30d8', class: `vds__header--user-section` }, h("span", { key: 'acc1e0fda13fd12eb33b06d2089d0b369c7761d4', class: "vds__header--user-section-username" }, this.username), h("div", { key: 'e72b9b15b8a27ad8d73d87d7a59344c624bda023', class: "d-flex", onClick: (evt) => {
+        return (h(Host, { key: 'a3291b3058c67f138348fb64703cea5651a59a2b' }, h("header", { key: '9a35636a7a6da52b4a80f269a4faaa3e2ba49b6b', class: `vds__header` }, h("div", { key: 'b36225725e1afcf1482b128ea4cb4e1595294ce3', class: `vds__header--app-name` }, h("span", { key: '6611943c238d73ad428b0146e0d8710b0eae4db2', class: "vds__header--app-name--content" }, this.value)), h("div", { key: 'ec0370f117a8aa83618a2d0a8a0928d31cebee7d', class: "vds__header--content-section" }, h("slot", { key: '595b8d555aea0ec9779356c8767fb95e9bf62e37', name: "contentSection" })), showUserSection && h("div", { key: '9a3dbb4fd0c681ed6404c1a2fd42aff1ac89b5da', class: `vds__header--user-section` }, h("span", { key: '280025d03c5a217f0b8a3242becd6a4a9e1dba76', class: "vds__header--user-section-username" }, this.username), h("div", { key: 'efdbd24f2d71fd6f02b0932398d8f8e1f72a9d6f', class: "d-flex", onClick: (evt) => {
                 this.handleClick(evt);
-            } }, h("vds-avatar", { key: 'f718bf3260a74098c4a24bc3396a0550ec81534e', class: "vds__header--user-section-avatar", size: "20px", value: this.avatar }), h("span", { key: '9d6847b3d21e7af9501a122d6bb16176b2688268', class: "vds__header--user-section-action-icon" }, h("vds-icon", { key: '50714c7282ad4dae0299962b1f541f39c8f4b603', svgIcon: "caret-down-filled", size: "20px", color: "color-icon-medium" }))), h("div", { key: '5e36afc403a1dc598f41a2c91840f4cf89582871', ref: (el) => {
+            } }, this.renderAvatar(), h("span", { key: 'b45bda5a25d8b67360cd5e0e6a768a21d016cf74', class: "vds__header--user-section-action-icon" }, h("vds-icon", { key: 'e6d1c1120bc0a7a608f570a48b28bb490dd80592', svgIcon: "caret-down-filled", size: "20px", color: "color-icon-medium" }))), h("div", { key: '5f09dafc7325fab48c3ebc1881d87f8f005ccac1', ref: (el) => {
                 if (el) {
                     this.floatingMenuElementRef = el;
                 }
-            }, class: `${this.popupOpened ? 'vds__header--user-section-menu-container-opened' : 'vds__header--user-section-menu-container'}` }, h("span", { key: 'a5b53a11502e2207a3460d85275d74dae316ed61', class: "vds__header--arrow-right-align" }, h("svg", { key: '0bfa90892bb098069bc1097216a1482f65c67805', class: "triangle-rotated", width: "13", height: "6", viewBox: "0 0 13 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ed7dd36b4166f309431bccf154a037528b0f0c0c', id: "popover-carret-filled-large", d: "M0.5 0L6.5 6L12.5 0H0.5Z", fill: "var(--surface-neutral-default)" }))), h("div", { key: '2ea036d6d6ab6b35e15d54c7840e7679773845d6', class: "vds__header--user-section-menu-container-content" }, h("slot", { key: '29373a148a50776d4a7c2b20748a3c0423faaf68', name: "profilePopupContent" })))))));
+            }, class: `${this.popupOpened ? 'vds__header--user-section-menu-container-opened' : 'vds__header--user-section-menu-container'}` }, h("span", { key: '527dc8a69608f9a887b968b0109b7afea5a2dbe3', class: "vds__header--arrow-right-align" }, h("svg", { key: 'b30245f9f74110d8976114614c56d85015ffc11f', class: "triangle-rotated", width: "13", height: "6", viewBox: "0 0 13 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8eb365d561f34b824a14573297e473f22622ea0a', id: "popover-carret-filled-large", d: "M0.5 0L6.5 6L12.5 0H0.5Z", fill: "var(--surface-neutral-default)" }))), h("div", { key: '08c008f29c056164303ac6aaae56cffeba48c73b', class: "vds__header--user-section-menu-container-content" }, h("slot", { key: '63be2e6f58bba8ec3c964c77e4af57b9e7d69095', name: "profilePopupContent" })))))));
     }
     static get is() { return "vds-header"; }
     static get encapsulation() { return "shadow"; }
@@ -56,7 +66,6 @@ export class VdsHeader {
         return {
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -71,11 +80,11 @@ export class VdsHeader {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "avatar": {
                 "type": "string",
-                "attribute": "avatar",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -90,11 +99,11 @@ export class VdsHeader {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "avatar"
             },
             "username": {
                 "type": "string",
-                "attribute": "username",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -109,11 +118,11 @@ export class VdsHeader {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "username"
             },
             "showUserSection": {
                 "type": "boolean",
-                "attribute": "show-user-section",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -129,7 +138,73 @@ export class VdsHeader {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-user-section",
                 "defaultValue": "true"
+            },
+            "showBadge": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows/hides badge dot to show notification or status"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-badge",
+                "defaultValue": "false"
+            },
+            "badgeStatusColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"warning\" | \"danger\" | \"healthy\" | \"information\" | \"neutral\" | Colors",
+                    "resolved": "Colors | \"information\" | \"healthy\" | \"danger\" | \"warning\" | \"neutral\"",
+                    "references": {
+                        "Colors": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::Colors"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the status color for badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-status-color",
+                "defaultValue": "\"neutral\""
+            },
+            "badgeAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the aria label in badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-aria-label"
             }
         };
     }

package/dist/collection/components/header/vds-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"vds-header.js","sourceRoot":"","sources":["../../../src/components/header/vds-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, State, h, Element, Watch } from '@stencil/core';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { queryElementFromShadowRoot } from '../../utils/node-utils';\n\n@Component({\n  tag: 'vds-header',\n  styleUrl: 'vds-header.scss',\n  shadow: true,\n})\nexport class VdsHeader {\n  /** Defines app name for header */\n  @Prop() value: string;\n  /** Defines the value in the avatar component */\n  @Prop() avatar: string;\n  /** Defines the username at the left of the avatar */\n  @Prop() username!: string;\n  /** Allow hide/show User-Section */\n  @Prop() showUserSection: boolean = true;\n\n  @Element() hostEl: HTMLElement;\n\n  @State() popupOpened: boolean = false;\n\n  @Listen(\"click\", { target: \"window\" })\n\thandleClickOut(evt): void {\n    const isClickInside = this.hostEl.contains(evt.target as Node);\n    if (!isClickInside) {\n      this.popupOpened = false;\n    }\n\t}\n  private actionElementRef: HTMLElement;\n  private arrowElementRef: HTMLElement;\n  private floatingMenuElementRef: HTMLElement;\n\n  private floatingCleanUp: () => void;\n\n  componentDidLoad(){\n    this.actionElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__header--user-section-action-icon');\n    this.arrowElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__header--arrow-right-align');\n  }\n\n  private handleClick(_evt: MouseEvent): void {\n    _evt.stopPropagation();\n    _evt.preventDefault();\n    this.popupOpened = !this.popupOpened;\n  }\n\n  @Watch(\"popupOpened\")\n  async handlePopupOpened(): Promise<void> {\n    if (this.popupOpened) {\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.floatingMenuElementRef, this.arrowElementRef, \"bottom-start\", false);\n    } else {\n      this.floatingCleanUp && this.floatingCleanUp();\n    }\n  }\n\n  render() {\n    const showUserSection = this.showUserSection;\n    return (\n      <Host>\n        <header class={`vds__header`}>\n          <div class={`vds__header--app-name`}>\n            <span class=\"vds__header--app-name--content\">{this.value}</span>\n          </div>\n          <div class=\"vds__header--content-section\">\n            <slot name=\"contentSection\"></slot>\n          </div>\n          { showUserSection && <div class={`vds__header--user-section`}>\n            <span class=\"vds__header--user-section-username\">{this.username}</span>\n            <div class=\"d-flex\" onClick={(evt: MouseEvent) => {\n                this.handleClick(evt);\n              }}>\n              <vds-avatar class=\"vds__header--user-section-avatar\" size=\"20px\" value={this.avatar}></vds-avatar>\n              <span class=\"vds__header--user-section-action-icon\">\n                <vds-icon svgIcon=\"caret-down-filled\" size=\"20px\" color=\"color-icon-medium\"></vds-icon>\n              </span>\n            </div>\n\n            <div\n              ref={(el) => {\n                if (el) {\n                  this.floatingMenuElementRef = el;\n                }\n              }}\n              class={`${this.popupOpened ? 'vds__header--user-section-menu-container-opened' : 'vds__header--user-section-menu-container'}`}>\n              <span class=\"vds__header--arrow-right-align\">\n                <svg class=\"triangle-rotated\" width=\"13\" height=\"6\" viewBox=\"0 0 13 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path id=\"popover-carret-filled-large\" d=\"M0.5 0L6.5 6L12.5 0H0.5Z\" fill=\"var(--surface-neutral-default)\"/>\n                </svg>\n              </span>\n              <div\n                class=\"vds__header--user-section-menu-container-content\"\n              >\n                <slot name=\"profilePopupContent\"></slot>\n              </div>\n            </div>\n          </div> }\n        </header>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"vds-header.js","sourceRoot":"","sources":["../../../src/components/header/vds-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, State, h, Element, Watch } from '@stencil/core';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { queryElementFromShadowRoot } from '../../utils/node-utils';\nimport { Colors } from '../../components';\n\n@Component({\n  tag: 'vds-header',\n  styleUrl: 'vds-header.scss',\n  shadow: true,\n})\nexport class VdsHeader {\n  /** Defines app name for header */\n  @Prop() value: string;\n  /** Defines the value in the avatar component */\n  @Prop() avatar: string;\n  /** Defines the username at the left of the avatar */\n  @Prop() username!: string;\n  /** Allow hide/show User-Section */\n  @Prop() showUserSection: boolean = true;\n  /** Shows/hides badge dot to show notification or status */\n  @Prop() showBadge: boolean = false;\n  /** Sets the status color for badge */\n  @Prop() badgeStatusColor: \"warning\" | \"danger\" | \"healthy\" | \"information\" | \"neutral\" | Colors = \"neutral\";\n  /** Sets the aria label in badge */\n  @Prop() badgeAriaLabel:string;\n\n\n  @Element() hostEl: HTMLElement;\n\n  @State() popupOpened: boolean = false;\n\n  @Listen(\"click\", { target: \"window\" })\n\thandleClickOut(evt): void {\n    const isClickInside = this.hostEl.contains(evt.target as Node);\n    if (!isClickInside) {\n      this.popupOpened = false;\n    }\n\t}\n  private actionElementRef: HTMLElement;\n  private arrowElementRef: HTMLElement;\n  private floatingMenuElementRef: HTMLElement;\n\n  private floatingCleanUp: () => void;\n\n  componentDidLoad(){\n    this.actionElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__header--user-section-action-icon');\n    this.arrowElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__header--arrow-right-align');\n  }\n\n  private handleClick(_evt: MouseEvent): void {\n    _evt.stopPropagation();\n    _evt.preventDefault();\n    this.popupOpened = !this.popupOpened;\n  }\n\n  @Watch(\"popupOpened\")\n  async handlePopupOpened(): Promise<void> {\n    if (this.popupOpened) {\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.floatingMenuElementRef, this.arrowElementRef, \"bottom-start\", false);\n    } else {\n      this.floatingCleanUp && this.floatingCleanUp();\n    }\n  }\n\n  private renderAvatar() {\n    if (this.showBadge) {\n      return (\n        <vds-badge-dot overlap={true} statusColor={this.badgeStatusColor} aria-label={this.badgeAriaLabel}>\n          <vds-avatar class=\"vds__header--user-section-avatar\" size=\"20px\" value={this.avatar}></vds-avatar>\n        </vds-badge-dot>\n      );\n    }\n\n    return (\n      <vds-avatar class=\"vds__header--user-section-avatar\" size=\"20px\" value={this.avatar}></vds-avatar>\n    );\n  }\n\n  render() {\n    const showUserSection = this.showUserSection;\n    return (\n      <Host>\n        <header class={`vds__header`}>\n          <div class={`vds__header--app-name`}>\n            <span class=\"vds__header--app-name--content\">{this.value}</span>\n          </div>\n          <div class=\"vds__header--content-section\">\n            <slot name=\"contentSection\"></slot>\n          </div>\n          { showUserSection && <div class={`vds__header--user-section`}>\n            <span class=\"vds__header--user-section-username\">{this.username}</span>\n            <div class=\"d-flex\" onClick={(evt: MouseEvent) => {\n                this.handleClick(evt);\n              }}>\n              {this.renderAvatar()}\n              <span class=\"vds__header--user-section-action-icon\">\n                <vds-icon svgIcon=\"caret-down-filled\" size=\"20px\" color=\"color-icon-medium\"></vds-icon>\n              </span>\n            </div>\n\n            <div\n              ref={(el) => {\n                if (el) {\n                  this.floatingMenuElementRef = el;\n                }\n              }}\n              class={`${this.popupOpened ? 'vds__header--user-section-menu-container-opened' : 'vds__header--user-section-menu-container'}`}>\n              <span class=\"vds__header--arrow-right-align\">\n                <svg class=\"triangle-rotated\" width=\"13\" height=\"6\" viewBox=\"0 0 13 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path id=\"popover-carret-filled-large\" d=\"M0.5 0L6.5 6L12.5 0H0.5Z\" fill=\"var(--surface-neutral-default)\"/>\n                </svg>\n              </span>\n              <div\n                class=\"vds__header--user-section-menu-container-content\"\n              >\n                <slot name=\"profilePopupContent\"></slot>\n              </div>\n            </div>\n          </div> }\n        </header>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,3 +1,5 @@
+import variables from "../../constants/color-vars";
+const THEME_KEY = Object.keys(variables.theme);
 export default {
     title: 'VDS/Components/Header',
     parameters: {
@@ -5,6 +7,12 @@ export default {
             toc: true,
         },
     },
+    argTypes: {
+        badgeStatusColor: {
+            options: ["warning", "danger", "healthy", "information", "neutral", ...THEME_KEY],
+            control: { type: "select" }
+        },
+    }
 };
 const codeTemplate = args => {
     return `
@@ -14,6 +22,9 @@ const codeTemplate = args => {
         avatar="${args.avatar || 'User Demo'}"
         username="${args.username || 'User Demo'}"
         show-user-section="${args.showUserSection}"
+        ${args.showBadge ? `show-badge="${args.showBadge}"` : ''}"
+        badge-status-color="${args.badgeStatusColor}"
+        badge-aria-label="${args.badgeAriaLabel}"
     >
       <div class="vds-header_content-section" slot="contentSection">
         <div class="time-weather">
@@ -43,7 +54,10 @@ BasicUsage.args = {
     value: 'App Name',
     username: 'User Demo',
     avatar: 'User Demo',
-    showUserSection: true
+    showUserSection: true,
+    showBadge: true,
+    badgeStatusColor: 'healthy',
+    badgeAriaLabel: 'User status'
 };
 export const WithAvatarImageUsage = codeTemplate.bind({});
 WithAvatarImageUsage.args = {

package/dist/collection/components/header/vds-header.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"vds-header.stories.js","sourceRoot":"","sources":["../../../src/components/header/vds-header.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;;;iBAGQ,IAAI,CAAC,KAAK,IAAI,UAAU;kBACvB,IAAI,CAAC,MAAM,IAAI,WAAW;oBACxB,IAAI,CAAC,QAAQ,IAAI,WAAW;6BACnB,IAAI,CAAC,eAAe;;;;;;UAMvC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,yEAAyE,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;KAiB1G,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,WAAW;IACrB,MAAM,EAAE,WAAW;IACnB,eAAe,EAAE,IAAI;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE1D,oBAAoB,CAAC,IAAI,GAAG;IAC1B,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,WAAW;IACrB,MAAM,EAAE,uDAAuD;IAC/D,eAAe,EAAE,IAAI;CACtB,CAAC","sourcesContent":["export default {\n  title: 'VDS/Components/Header',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n  },\n};\n\nconst codeTemplate = args => {\n  return `\n  <div style=\"background-color:grey;height:250px;\">\n    <vds-header\n        value=\"${args.value || 'App Name'}\"\n        avatar=\"${args.avatar || 'User Demo'}\"\n        username=\"${args.username || 'User Demo'}\"\n        show-user-section=\"${args.showUserSection}\"\n    >\n      <div class=\"vds-header_content-section\" slot=\"contentSection\">\n        <div class=\"time-weather\">\n           <span>13:25 CST - 42°F</span>\n        </div>\n        ${args.showUserSection ? '<vds-divider orientation=\"vertical\" padding=\"spacing-00\"></vds-divider>' : ''}\n      </div>\n      <div slot=\"profilePopupContent\" >\n        <ul style=\"width:150px\">\n          <li>\n            <a href=\"www.google.com\" _target=\"blank\">Option 1</a>\n          </li>\n          <li>\n            <a href=\"#\">Option 2</a>\n          </li>\n          <li>\n            <a href=\"#\">Option 3</a>\n          </li>\n        </ul>\n      </div>\n    </<vds-header>\n  </div>\n    `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  value: 'App Name',\n  username: 'User Demo',\n  avatar: 'User Demo',\n  showUserSection: true\n};\n\nexport const WithAvatarImageUsage = codeTemplate.bind({});\n\nWithAvatarImageUsage.args = {\n  value: 'App Name',\n  username: 'User Demo',\n  avatar: 'https://cdn-icons-png.flaticon.com/512/149/149071.png',\n  showUserSection: true\n};\n"]}
+{"version":3,"file":"vds-header.stories.js","sourceRoot":"","sources":["../../../src/components/header/vds-header.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,4BAA4B,CAAC;AAEnD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AAE/C,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACD,QAAQ,EAAE;QACR,gBAAgB,EAAE;YAChB,OAAO,EAAE,CAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC;YAClF,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;;;iBAGQ,IAAI,CAAC,KAAK,IAAI,UAAU;kBACvB,IAAI,CAAC,MAAM,IAAI,WAAW;oBACxB,IAAI,CAAC,QAAQ,IAAI,WAAW;6BACnB,IAAI,CAAC,eAAe;UACvC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE;8BAClC,IAAI,CAAC,gBAAgB;4BACvB,IAAI,CAAC,cAAc;;;;;;UAMrC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,yEAAyE,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;KAiB1G,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,WAAW;IACrB,MAAM,EAAE,WAAW;IACnB,eAAe,EAAE,IAAI;IACrB,SAAS,EAAE,IAAI;IACf,gBAAgB,EAAE,SAAS;IAC3B,cAAc,EAAE,aAAa;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE1D,oBAAoB,CAAC,IAAI,GAAG;IAC1B,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,WAAW;IACrB,MAAM,EAAE,uDAAuD;IAC/D,eAAe,EAAE,IAAI;CACtB,CAAC","sourcesContent":["import variables from \"../../constants/color-vars\";\n\nconst THEME_KEY = Object.keys(variables.theme);\n\nexport default {\n  title: 'VDS/Components/Header',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n  },\n  argTypes: {\n    badgeStatusColor: {\n      options: [ \"warning\", \"danger\", \"healthy\", \"information\", \"neutral\", ...THEME_KEY],\n      control: { type: \"select\" }\n    },\n  }\n};\n\nconst codeTemplate = args => {\n  return `\n  <div style=\"background-color:grey;height:250px;\">\n    <vds-header\n        value=\"${args.value || 'App Name'}\"\n        avatar=\"${args.avatar || 'User Demo'}\"\n        username=\"${args.username || 'User Demo'}\"\n        show-user-section=\"${args.showUserSection}\"\n        ${args.showBadge ? `show-badge=\"${args.showBadge}\"` : ''}\"\n        badge-status-color=\"${args.badgeStatusColor}\"\n        badge-aria-label=\"${args.badgeAriaLabel}\"\n    >\n      <div class=\"vds-header_content-section\" slot=\"contentSection\">\n        <div class=\"time-weather\">\n           <span>13:25 CST - 42°F</span>\n        </div>\n        ${args.showUserSection ? '<vds-divider orientation=\"vertical\" padding=\"spacing-00\"></vds-divider>' : ''}\n      </div>\n      <div slot=\"profilePopupContent\" >\n        <ul style=\"width:150px\">\n          <li>\n            <a href=\"www.google.com\" _target=\"blank\">Option 1</a>\n          </li>\n          <li>\n            <a href=\"#\">Option 2</a>\n          </li>\n          <li>\n            <a href=\"#\">Option 3</a>\n          </li>\n        </ul>\n      </div>\n    </<vds-header>\n  </div>\n    `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  value: 'App Name',\n  username: 'User Demo',\n  avatar: 'User Demo',\n  showUserSection: true,\n  showBadge: true,\n  badgeStatusColor: 'healthy',\n  badgeAriaLabel: 'User status'\n};\n\nexport const WithAvatarImageUsage = codeTemplate.bind({});\n\nWithAvatarImageUsage.args = {\n  value: 'App Name',\n  username: 'User Demo',\n  avatar: 'https://cdn-icons-png.flaticon.com/512/149/149071.png',\n  showUserSection: true\n};\n"]}