@duetds/components
Version:
This package includes Duet Core Components and related tools.
155 lines (154 loc) • 5.1 kB
JavaScript
import { h } from "@stencil/core";
import { convertToCamelCase } from "@duetds/js-utils";
import tokens from "@duetds/tokens";
export class DuetParagraph {
constructor() {
/**
* Theme of the card. Can be one of: "default", "turva".
*/
this.theme = "";
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* Controls the size of the paragraph. Can be one of: "medium", "small".
*/
this.size = "medium";
/**
* Style variation of the paragraph. Can be one of: "default", "intro".
*/
this.variation = "default";
/**
* Custom color to be used for text, as a design token entered in camelCase or kebab-case.
* Example: "color-primary".
*/
this.color = "";
}
/**
* 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 styles = {
color: tokens[convertToCamelCase(this.color)],
};
return (h("p", { class: {
"duet-paragraph": true,
"duet-paragraph-small": this.size === "small",
"duet-m-0": this.margin === "none",
[this.variation]: true,
"duet-theme-turva": this.theme === "turva",
}, style: styles },
h("slot", null)));
}
static get is() { return "duet-paragraph"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["duet-paragraph.scss"]
}; }
static get styleUrls() { return {
"$": ["duet-paragraph.css"]
}; }
static get properties() { return {
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Theme of the card. Can be one of: \"default\", \"turva\"."
},
"attribute": "theme",
"reflect": false,
"defaultValue": "\"\""
},
"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\""
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Controls the size of the paragraph. Can be one of: \"medium\", \"small\"."
},
"attribute": "size",
"reflect": false,
"defaultValue": "\"medium\""
},
"variation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Style variation of the paragraph. Can be one of: \"default\", \"intro\"."
},
"attribute": "variation",
"reflect": false,
"defaultValue": "\"default\""
},
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Custom color to be used for text, as a design token entered in camelCase or kebab-case.\nExample: \"color-primary\"."
},
"attribute": "color",
"reflect": false,
"defaultValue": "\"\""
}
}; }
static get elementRef() { return "element"; }
}