@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-card-header/bh-card-header.css

@@ -0,0 +1,68 @@
+:host {
+  display: block;
+}
+
+.card-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  background: var(--color-white);
+}
+
+.card-header-content {
+  display: flex;
+  gap: var(--spacing-md);
+  align-items: flex-start;
+  padding: var(--spacing-lg) var(--spacing-xl) 0 var(--spacing-xl);
+}
+
+.card-header-text-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 0;
+  gap: var(--spacing-xxs);
+  min-width: 0;
+}
+
+.card-header-title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+}
+
+.card-header-title {
+  font-family: var(--font-inter);
+  font-size: var(--text-md-size);
+  font-weight: var(--weight-semibold);
+  line-height: var(--text-md-line);
+  color: var(--color-neutral-900);
+}
+
+.card-header-supporting-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  width: 100%;
+}
+
+.card-header-spacer {
+  width: 32px;
+  flex-shrink: 0;
+}
+
+.card-header-supporting-text {
+  flex: 1 0 0;
+  font-family: var(--font-inter);
+  font-size: var(--text-sm-size);
+  font-weight: var(--weight-regular);
+  line-height: var(--text-sm-line);
+  color: var(--color-neutral-500);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-header-divider {
+  height: 1px;
+  background: var(--color-neutral-200);
+}

package/collection/components/bh-card-header/bh-card-header.js

@@ -0,0 +1,348 @@
+import { h, Host } from "@stencil/core";
+export class BhCardHeader {
+    /**
+     * Whether to show the featured icon
+     */
+    showFeaturedIcon = true;
+    /**
+     * The Material Symbol icon name for the featured icon
+     */
+    featuredIcon = 'star';
+    /**
+     * The style of the featured icon
+     */
+    featuredIconStyle = 'outlined';
+    /**
+     * The color of the featured icon
+     */
+    featuredIconColor = 'gray';
+    /**
+     * Whether to show the title
+     */
+    showTitle = true;
+    /**
+     * The title text
+     */
+    headerTitle = 'Card title';
+    /**
+     * Whether to show the badge
+     */
+    showBadge = false;
+    /**
+     * The badge text
+     */
+    badgeText = '';
+    /**
+     * Whether to show the supporting text
+     */
+    showSupportingText = true;
+    /**
+     * The supporting text (description)
+     */
+    supportingText = 'Card description';
+    /**
+     * Whether to show the dropdown menu button
+     */
+    showDropdown = true;
+    /**
+     * Whether to show the divider
+     */
+    showDivider = true;
+    /**
+     * Emitted when the dropdown button is clicked
+     */
+    bhDropdownClick;
+    handleDropdownClick = () => {
+        this.bhDropdownClick.emit();
+    };
+    render() {
+        return (h(Host, { key: '58db2d5c1ca47600da5c07ea2750ecb1c2f2a4a7' }, h("div", { key: '70cbc0d9779b1f5e75a774f40715001c904f2670', class: "card-header" }, h("div", { key: 'fb602ff3a92aa06d51df870ea4e5b3a6f11e9309', class: "card-header-content" }, h("div", { key: '00a315a07bc10dc72c36cbc79e0d24c9570dcdc7', class: "card-header-text-container" }, h("div", { key: '42d15bc872bf00216be3fcff6bee772bcab7b14e', class: "card-header-title-row" }, this.showFeaturedIcon && (h("bh-featured-icon", { key: 'd9294c5035425329806b0b575cf4799defed83f9', size: "sm", icon: this.featuredIcon, iconStyle: this.featuredIconStyle, color: this.featuredIconColor })), this.showTitle && (h("span", { key: '96399bb209d70a9694fab80e0e0c4ece3025ade5', class: "card-header-title" }, this.headerTitle)), this.showBadge && this.badgeText && (h("bh-badge", { key: 'e030d01179a3e0cc3dbbc972a7251dd49a661533', variant: "blue", size: "sm", emphasis: "medium", label: this.badgeText }))), this.showSupportingText && (h("div", { key: 'e4a1253d649a77d9d6a5f12313f279e18b509304', class: "card-header-supporting-row" }, this.showFeaturedIcon && h("div", { key: 'bf5f6482b25ad7c35f6f42f18001064f1a5f8be9', class: "card-header-spacer" }), h("span", { key: '256fa43537b957a80190ce8683484cbaef0ade56', class: "card-header-supporting-text" }, this.supportingText)))), this.showDropdown && (h("bh-button-icon", { key: 'ab3df5c4b4fd8dbeb56c1860d2b38334ed6fa29e', hierarchy: "quaternary", size: "sm", iconName: "more_vert", ariaLabel: "More options", onBhClick: this.handleDropdownClick }))), h("slot", { key: '836d525ba14a3f7020fecdcf3660e2e50353a9de', name: "tabs" }), this.showDivider && h("div", { key: '9b96114d09fb987fe710de8a6438141c380c07e3', class: "card-header-divider" }))));
+    }
+    static get is() { return "bh-card-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-card-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-card-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "showFeaturedIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the featured icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-featured-icon",
+                "defaultValue": "true"
+            },
+            "featuredIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The Material Symbol icon name for the featured icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "featured-icon",
+                "defaultValue": "'star'"
+            },
+            "featuredIconStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CardHeaderFeaturedIconStyle",
+                    "resolved": "\"filled\" | \"outlined\"",
+                    "references": {
+                        "CardHeaderFeaturedIconStyle": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-card-header/bh-card-header.tsx",
+                            "id": "src/components/bh-card-header/bh-card-header.tsx::CardHeaderFeaturedIconStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The style of the featured icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "featured-icon-style",
+                "defaultValue": "'outlined'"
+            },
+            "featuredIconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CardHeaderFeaturedIconColor",
+                    "resolved": "\"brand\" | \"error\" | \"gray\" | \"highlight\" | \"success\" | \"warning\"",
+                    "references": {
+                        "CardHeaderFeaturedIconColor": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-card-header/bh-card-header.tsx",
+                            "id": "src/components/bh-card-header/bh-card-header.tsx::CardHeaderFeaturedIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the featured icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "featured-icon-color",
+                "defaultValue": "'gray'"
+            },
+            "showTitle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-title",
+                "defaultValue": "true"
+            },
+            "headerTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header-title",
+                "defaultValue": "'Card title'"
+            },
+            "showBadge": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-badge",
+                "defaultValue": "false"
+            },
+            "badgeText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The badge text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-text",
+                "defaultValue": "''"
+            },
+            "showSupportingText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the supporting text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-supporting-text",
+                "defaultValue": "true"
+            },
+            "supportingText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The supporting text (description)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "supporting-text",
+                "defaultValue": "'Card description'"
+            },
+            "showDropdown": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the dropdown menu button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-dropdown",
+                "defaultValue": "true"
+            },
+            "showDivider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the divider"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-divider",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhDropdownClick",
+                "name": "bhDropdownClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dropdown button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=bh-card-header.js.map

package/collection/components/bh-card-header/bh-card-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-card-header.js","sourceRoot":"","sources":["../../../src/components/bh-card-header/bh-card-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAU9E,MAAM,OAAO,YAAY;IACvB;;OAEG;IACK,gBAAgB,GAAY,IAAI,CAAC;IAEzC;;OAEG;IACK,YAAY,GAAW,MAAM,CAAC;IAEtC;;OAEG;IACK,iBAAiB,GAAgC,UAAU,CAAC;IAEpE;;OAEG;IACK,iBAAiB,GAAgC,MAAM,CAAC;IAEhE;;OAEG;IACK,SAAS,GAAY,IAAI,CAAC;IAElC;;OAEG;IACK,WAAW,GAAW,YAAY,CAAC;IAE3C;;OAEG;IACK,SAAS,GAAY,KAAK,CAAC;IAEnC;;OAEG;IACK,SAAS,GAAW,EAAE,CAAC;IAE/B;;OAEG;IACK,kBAAkB,GAAY,IAAI,CAAC;IAE3C;;OAEG;IACK,cAAc,GAAW,kBAAkB,CAAC;IAEpD;;OAEG;IACK,YAAY,GAAY,IAAI,CAAC;IAErC;;OAEG;IACK,WAAW,GAAY,IAAI,CAAC;IAEpC;;OAEG;IACM,eAAe,CAAsB;IAEtC,mBAAmB,GAAG,GAAG,EAAE;QACjC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,aAAa;gBACtB,4DAAK,KAAK,EAAC,qBAAqB;oBAC9B,4DAAK,KAAK,EAAC,4BAA4B;wBACrC,4DAAK,KAAK,EAAC,uBAAuB;4BAC/B,IAAI,CAAC,gBAAgB,IAAI,CACxB,yEACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,SAAS,EAAE,IAAI,CAAC,iBAAiB,EACjC,KAAK,EAAE,IAAI,CAAC,iBAAiB,GAC7B,CACH;4BACA,IAAI,CAAC,SAAS,IAAI,CACjB,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC1D;4BACA,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,CACnC,iEACE,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAE,IAAI,CAAC,SAAS,GACrB,CACH,CACG;wBACL,IAAI,CAAC,kBAAkB,IAAI,CAC1B,4DAAK,KAAK,EAAC,4BAA4B;4BACpC,IAAI,CAAC,gBAAgB,IAAI,4DAAK,KAAK,EAAC,oBAAoB,GAAG;4BAC5D,6DAAM,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,cAAc,CAAQ,CAClE,CACP,CACG;oBACL,IAAI,CAAC,YAAY,IAAI,CACpB,uEACE,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,WAAW,EACpB,SAAS,EAAC,cAAc,EACxB,SAAS,EAAE,IAAI,CAAC,mBAAmB,GACnC,CACH,CACG;gBACN,6DAAM,IAAI,EAAC,MAAM,GAAG;gBACnB,IAAI,CAAC,WAAW,IAAI,4DAAK,KAAK,EAAC,qBAAqB,GAAG,CACpD,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type CardHeaderFeaturedIconStyle = 'outlined' | 'filled';\nexport type CardHeaderFeaturedIconColor = 'brand' | 'gray' | 'error' | 'warning' | 'success' | 'highlight';\n\n@Component({\n  tag: 'bh-card-header',\n  styleUrl: 'bh-card-header.css',\n  shadow: true,\n})\nexport class BhCardHeader {\n  /**\n   * Whether to show the featured icon\n   */\n  @Prop() showFeaturedIcon: boolean = true;\n\n  /**\n   * The Material Symbol icon name for the featured icon\n   */\n  @Prop() featuredIcon: string = 'star';\n\n  /**\n   * The style of the featured icon\n   */\n  @Prop() featuredIconStyle: CardHeaderFeaturedIconStyle = 'outlined';\n\n  /**\n   * The color of the featured icon\n   */\n  @Prop() featuredIconColor: CardHeaderFeaturedIconColor = 'gray';\n\n  /**\n   * Whether to show the title\n   */\n  @Prop() showTitle: boolean = true;\n\n  /**\n   * The title text\n   */\n  @Prop() headerTitle: string = 'Card title';\n\n  /**\n   * Whether to show the badge\n   */\n  @Prop() showBadge: boolean = false;\n\n  /**\n   * The badge text\n   */\n  @Prop() badgeText: string = '';\n\n  /**\n   * Whether to show the supporting text\n   */\n  @Prop() showSupportingText: boolean = true;\n\n  /**\n   * The supporting text (description)\n   */\n  @Prop() supportingText: string = 'Card description';\n\n  /**\n   * Whether to show the dropdown menu button\n   */\n  @Prop() showDropdown: boolean = true;\n\n  /**\n   * Whether to show the divider\n   */\n  @Prop() showDivider: boolean = true;\n\n  /**\n   * Emitted when the dropdown button is clicked\n   */\n  @Event() bhDropdownClick!: EventEmitter<void>;\n\n  private handleDropdownClick = () => {\n    this.bhDropdownClick.emit();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"card-header\">\n          <div class=\"card-header-content\">\n            <div class=\"card-header-text-container\">\n              <div class=\"card-header-title-row\">\n                {this.showFeaturedIcon && (\n                  <bh-featured-icon\n                    size=\"sm\"\n                    icon={this.featuredIcon}\n                    iconStyle={this.featuredIconStyle}\n                    color={this.featuredIconColor}\n                  />\n                )}\n                {this.showTitle && (\n                  <span class=\"card-header-title\">{this.headerTitle}</span>\n                )}\n                {this.showBadge && this.badgeText && (\n                  <bh-badge\n                    variant=\"blue\"\n                    size=\"sm\"\n                    emphasis=\"medium\"\n                    label={this.badgeText}\n                  />\n                )}\n              </div>\n              {this.showSupportingText && (\n                <div class=\"card-header-supporting-row\">\n                  {this.showFeaturedIcon && <div class=\"card-header-spacer\" />}\n                  <span class=\"card-header-supporting-text\">{this.supportingText}</span>\n                </div>\n              )}\n            </div>\n            {this.showDropdown && (\n              <bh-button-icon\n                hierarchy=\"quaternary\"\n                size=\"sm\"\n                iconName=\"more_vert\"\n                ariaLabel=\"More options\"\n                onBhClick={this.handleDropdownClick}\n              />\n            )}\n          </div>\n          <slot name=\"tabs\" />\n          {this.showDivider && <div class=\"card-header-divider\" />}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}