@duetds/components
Version:
This package includes Duet Core Components and related tools.
439 lines (438 loc) • 16.7 kB
JavaScript
import { Host, h } from "@stencil/core";
export class DuetHero {
constructor() {
/**
* Theme of the hero area. Can be one of: "default", "turva".
*/
this.theme = "";
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* The heading of the hero area, rendered in an H1 tag. P.S. you can control the level of the HTML heading by using “level” prop. If empty, heading will be hidden.
*/
this.heading = "";
/**
* The level of the heading. Can be one of: "h1", "h2", "h3", "h4", "h5", "h6".
*/
this.level = "h1";
/**
* The description of the hero area, rendered in a P tag. If empty, description will be hidden.
*/
this.description = "";
/**
* Icon to display to the left of the button content. If empty, icon will be hidden.
*/
this.icon = "";
/**
* Icon size for the button. Can be on of: "medium", "large".
*/
this.iconSize = "medium";
/**
* Show icon on the right side of the button content.
*/
this.iconRight = false;
/**
* Text label shown inside the button. If empty, button will be hidden.
*/
this.buttonLabel = "";
/**
* URL that the button links to.
*/
this.buttonUrl = "#";
/**
* ID for the button.
*/
this.buttonId = "";
/**
* URL of the image shown inside the hero area. The width of the displayed image should be 800px. Optimal aspect ratio is 3:2. If empty, image will be hidden.
*/
this.image = "";
/**
* Adjust hero area’s distance to duet navigation component using this property. Basically adds top margin that matches the sizing of Duet Navigation. Can be one of: "none", "with-links", "without-links".
*/
this.navDistance = "none";
/**
* Style variation of the hero area. Can be one of: "default", "light", "gray".
*/
this.variation = "default";
/**
* Component event handling.
*/
this.handleClick = (ev, data) => {
this.emitChange(ev, data);
ev.cancelBubble = true;
};
}
/**
* Component lifecycle events.
*/
componentWillLoad() {
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
}
/**
* Local methods
*/
emitChange(ev, data) {
if (!data) {
data = {};
}
data["label"] = this.buttonLabel;
data["href"] = this.buttonUrl;
data["id"] = this.buttonId || "No ID defined via buttonId prop";
this.duetClick.emit({
originalEvent: ev,
data: data,
component: "duet-hero-area",
});
}
/**
* render() function
* Always the last one in the class.
*/
render() {
const styles = {
backgroundImage: "url(" + this.image + ")",
};
let buttonVariation = this.theme === "turva" ? "negative" : "primary";
let textColor = "colorGrayLightest";
if (this.variation === "light" || this.variation === "gray") {
textColor = "colorSecondary";
if (this.theme === "turva") {
textColor = "colorSecondaryTurva";
buttonVariation = "primary";
}
}
return (h(Host, { class: { "duet-m-0": this.margin === "none" } },
h("div", { role: "region", class: {
"duet-hero": true,
"duet-theme-turva": this.theme === "turva",
"duet-with-links": this.navDistance === "with-links",
"duet-without-links": this.navDistance === "without-links",
"duet-hero-light": this.variation === "light",
"duet-hero-gray": this.variation === "gray",
} },
h("div", { class: "duet-hero-wrapper" },
this.variation === "gray" ? (h("div", null,
h("duet-icon", { class: "duet-hero-icon", size: "x-large", "mobile-size": "large", background: "color-category-pet", name: "category-pet" }))) : (""),
h("div", { class: "duet-hero-text" },
this.heading !== "" && this.variation === "light" ? (h("duet-heading", { theme: this.theme, level: this.level, "visual-level": "h1" }, this.heading)) : (""),
this.heading !== "" && this.variation === "default" ? (h("duet-heading", { theme: this.theme, color: "color-gray-lightest", level: this.level, "visual-level": "h1" }, this.heading)) : (""),
this.heading !== "" && this.variation === "gray" ? (h("duet-heading", { theme: this.theme, level: this.level, "visual-level": "h2" }, this.heading)) : (""),
this.description !== "" ? (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)) : (""),
this.buttonLabel !== "" ? (h("duet-button", { url: this.buttonUrl, icon: this.icon, "icon-right": this.iconRight, "icon-size": this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)) : ("")),
this.image !== "" ? h("div", { class: "duet-hero-image", style: styles }) : ""))));
}
static get is() { return "duet-hero"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["duet-hero.scss"]
}; }
static get styleUrls() { return {
"$": ["duet-hero.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 hero area. 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\""
},
"heading": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The heading of the hero area, rendered in an H1 tag. P.S. you can control the level of the HTML heading by using \u201Clevel\u201D prop. If empty, heading will be hidden."
},
"attribute": "heading",
"reflect": false,
"defaultValue": "\"\""
},
"level": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The level of the heading. Can be one of: \"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"."
},
"attribute": "level",
"reflect": false,
"defaultValue": "\"h1\""
},
"description": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The description of the hero area, rendered in a P tag. If empty, description will be hidden."
},
"attribute": "description",
"reflect": false,
"defaultValue": "\"\""
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Icon to display to the left of the button content. If empty, icon will be hidden."
},
"attribute": "icon",
"reflect": false,
"defaultValue": "\"\""
},
"iconSize": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Icon size for the button. Can be on of: \"medium\", \"large\"."
},
"attribute": "icon-size",
"reflect": false,
"defaultValue": "\"medium\""
},
"iconRight": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Show icon on the right side of the button content."
},
"attribute": "icon-right",
"reflect": false,
"defaultValue": "false"
},
"buttonLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Text label shown inside the button. If empty, button will be hidden."
},
"attribute": "button-label",
"reflect": false,
"defaultValue": "\"\""
},
"buttonUrl": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "URL that the button links to."
},
"attribute": "button-url",
"reflect": false,
"defaultValue": "\"#\""
},
"buttonId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "ID for the button."
},
"attribute": "button-id",
"reflect": false,
"defaultValue": "\"\""
},
"buttonData": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "object",
"resolved": "object",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "An object that includes any data you want to pass to the button. This data will be emitted when the button is clicked."
}
},
"back": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "object",
"resolved": "object",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "An object that includes mandatory \"label\" and \"href\" fields for the back link. Additionally, you can pass an \"id\" that is added as an HTML identifier for the element. If nothing is passed, back link won\u2019t be shown. **NOTE: The back link can be ONLY used in combination with \"gray\" style variation.**"
}
},
"image": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "URL of the image shown inside the hero area. The width of the displayed image should be 800px. Optimal aspect ratio is 3:2. If empty, image will be hidden."
},
"attribute": "image",
"reflect": false,
"defaultValue": "\"\""
},
"navDistance": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Adjust hero area\u2019s distance to duet navigation component using this property. Basically adds top margin that matches the sizing of Duet Navigation. Can be one of: \"none\", \"with-links\", \"without-links\"."
},
"attribute": "nav-distance",
"reflect": false,
"defaultValue": "\"none\""
},
"variation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Style variation of the hero area. Can be one of: \"default\", \"light\", \"gray\"."
},
"attribute": "variation",
"reflect": false,
"defaultValue": "\"default\""
}
}; }
static get events() { return [{
"method": "duetClick",
"name": "duetClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Callback for when an user clicks the hero area's action button. You can prevent the default browser functionality by calling **event.detail.originalEvent.preventDefault()** inside yout listener. Additionally, the passed data is available via **event.detail.data**."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}]; }
static get elementRef() { return "element"; }
}