@limetech/lime-elements
Version:
202 lines (201 loc) • 6.83 kB
JavaScript
import { h } from '@stencil/core';
import { getIconName } from '../icon/get-icon-props';
/**
* A header is the top most visual element in a component, page, card, or a view.
*
* ## Usage
* A header is the first thing that clarifies a context for users.
* Due to their positions in the UI hierarchy, headers are the most
* prominent elements of a user interface; and because of that, they carry both
* vital information and fundamental controls for the area of the interface
* they represent.
*
* For example, when a header is placed on top of a card, it should quickly
* explain the card to the user. When placed on top of a modal, it should easily
* clarify what the modal is about. When displayed on top of a fullscreen view,
* it should indicate where in the system users are, and what part of the app
* they are looking at.
*
*
* ## Layout
* The vital information in a header is usually manifested in form of an icon,
* and a heading. A subheading also could be added to provide supplementary
* information. There is also a third place for displaying supplementary information
* or "supporting text", which will be rendered as a part of the subheading.
* Along with this information, headers can also include actions, controls, or
* menus.
*
* :::important
* Such actions or menus must affect the entire section of the interface
* which the header is representing. For example, a _Delete_ button on a card
* header must delete that entire card and its respective contents all together,
* not for example a selected item which is visible in the content of that card.
* :::
*
*
* :::warning
* Do not user background color on icons in the headers. It is much better and
* much easier for the eye if your icon itself has a color.
* Background colors behind icons make them look like "call to action" buttons
* and take a lot of attention from users.
* :::
*
* @exampleComponent limel-example-header
* @exampleComponent limel-example-header-slot-actions
* @exampleComponent limel-example-header-colors
* @exampleComponent limel-example-header-responsive
* @exampleComponent limel-example-header-narrow
* @slot actions - Content (actions) to be put inside the far right surface of
* the header
* @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This
* behavior has been deprecated, and support will be dropped in a future
* version. Please add `slot="actions"` to your elements to ensure your code
* will continue to work with future versions of Lime Elements.
*/
export class Header {
constructor() {
this.icon = undefined;
this.heading = undefined;
this.subheading = undefined;
this.supportingText = undefined;
this.subheadingDivider = '·';
}
render() {
return [
h("div", { class: "information" }, this.renderIcon(), h("div", { class: "headings" }, h("h1", { class: "heading", title: this.heading }, this.heading), h("h2", { class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))),
h("slot", { name: "actions" }, h("slot", null)),
];
}
renderIcon() {
var _a, _b, _c, _d, _e;
const icon = getIconName(this.icon);
if (!icon) {
return;
}
return (h("limel-icon", { class: "icon", badge: true, name: icon, style: {
'--limel-header-icon-color': `${(_b = (_a = this.icon) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : ''}`,
'--limel-header-icon-background-color': `${(_d = (_c = this.icon) === null || _c === void 0 ? void 0 : _c.backgroundColor) !== null && _d !== void 0 ? _d : ''}`,
title: `${(_e = this.icon) === null || _e === void 0 ? void 0 : _e.title}`,
} }));
}
renderSupportingText() {
if (!this.supportingText) {
return;
}
return (h("span", { class: "subheading__supporting-text" }, this.renderSubheadingDivider(), this.supportingText));
}
renderSubheadingDivider() {
if (!this.subheadingDivider) {
return;
}
return h("span", null, this.subheadingDivider);
}
static get is() { return "limel-header"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["header.scss"]
};
}
static get styleUrls() {
return {
"$": ["header.css"]
};
}
static get properties() {
return {
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | Icon",
"resolved": "Icon | string",
"references": {
"Icon": {
"location": "import",
"path": "../../global/shared-types/icon.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Icon to display"
},
"attribute": "icon",
"reflect": false
},
"heading": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Title to display"
},
"attribute": "heading",
"reflect": false
},
"subheading": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Subheading to display"
},
"attribute": "subheading",
"reflect": false
},
"supportingText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "An extra string of text to display along with with the Subheading"
},
"attribute": "supporting-text",
"reflect": false
},
"subheadingDivider": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The visual divider that separates the `subheading` and the `supportingText`.\nIt must be a single character such as `-` or `,`."
},
"attribute": "subheading-divider",
"reflect": false,
"defaultValue": "'\u00B7'"
}
};
}
}
//# sourceMappingURL=header.js.map