@duetds/components
Version:
This package includes Duet Core Components and related tools.
173 lines (172 loc) • 5.91 kB
JavaScript
import { h } from "@stencil/core";
import { sanitizeString, convertToCamelCase } from "@duetds/js-utils";
import tokens from "@duetds/tokens";
export class DuetHeading {
constructor() {
/**
* The actual heading level used in the HTML markup. Can be one of: "h1", "h2", "h3", "h4", "h5", "h6".
*/
this.level = "h2";
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* Enable or disable the border underneath the heading.
*/
this.border = false;
/**
* Custom color for the heading as a design token entered in camelCase or kebab-case.
* Example: "color-primary".
*/
this.color = "";
/**
* Theme of the heading. Can be one of: "default", "turva".
*/
this.theme = "";
}
/**
* Component lifecycle events.
*/
componentWillLoad() {
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
}
/**
* render() function
* Always the last one in the class.
*/
render() {
const headingStyles = {
color: tokens[convertToCamelCase(this.color)],
};
const TagName = sanitizeString(this.level);
return (h(TagName, { class: {
"duet-heading": true,
"duet-heading-border": this.border,
"duet-m-0": this.margin === "none",
[this.visualLevel ? this.visualLevel : this.level]: true,
"duet-theme-turva": this.theme === "turva",
}, style: headingStyles },
h("slot", null)));
}
static get is() { return "duet-heading"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["duet-heading.scss"]
}; }
static get styleUrls() { return {
"$": ["duet-heading.css"]
}; }
static get properties() { return {
"level": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The actual heading level used in the HTML markup. Can be one of: \"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"."
},
"attribute": "level",
"reflect": true,
"defaultValue": "\"h2\""
},
"margin": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Controls the margin of the component. Can be one of: \"auto\", \"none\"."
},
"attribute": "margin",
"reflect": false,
"defaultValue": "\"auto\""
},
"visualLevel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Make the visual style mimic a specific heading level. This option allows you to make e.g. h1 visually look like h3, but still keep it h1 in the markup. Can be one of: \"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"."
},
"attribute": "visual-level",
"reflect": false
},
"border": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Enable or disable the border underneath the heading."
},
"attribute": "border",
"reflect": false,
"defaultValue": "false"
},
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Custom color for the heading as a design token entered in camelCase or kebab-case.\nExample: \"color-primary\"."
},
"attribute": "color",
"reflect": false,
"defaultValue": "\"\""
},
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Theme of the heading. Can be one of: \"default\", \"turva\"."
},
"attribute": "theme",
"reflect": false,
"defaultValue": "\"\""
}
}; }
static get elementRef() { return "element"; }
}