@limetech/lime-elements
Version:
160 lines (159 loc) • 5.98 kB
JavaScript
import { h, Host } from "@stencil/core";
/**
* A good design is self-explanatory! However, sometimes concepts are
* too complex to understand, no matter how well-designed a user interface is.
* In such cases, contextual help can be a great way to provide users with
* help precisely where and when users need it.
*
* In app interface design, providing contextual help emerges as a viable practice
* for enhancing user experience and usability.
* Contextual help serves as a quick-to-access guiding,
* empowering users to more easily understand and navigate through
* the intricacies of an application.
*
* Using this component designers empower users to grasp the functionality
* of an app more effortlessly, minimizes the learning curve,
* transforming complex features into accessible opportunities for exploration.
*
* @exampleComponent limel-example-help-basic
* @exampleComponent limel-example-read-more
* @exampleComponent limel-example-open-direction
* @exampleComponent limel-example-placement
*/
export class HelpComponent {
constructor() {
/**
* {@inheritdoc Help.trigger}
*/
this.trigger = '?';
/**
* {@inheritdoc Help.openDirection}
*/
this.openDirection = 'top-start';
this.isOpen = false;
this.openPopover = (event) => {
event.stopPropagation();
this.isOpen = true;
};
this.onPopoverClose = (event) => {
event.stopPropagation();
this.isOpen = false;
};
}
render() {
return (h(Host, { key: 'a52d9b4c220e21005011449735b97599cffb542e' }, h("limel-popover", { key: '8b6690894351ec32f5b982ca5d3aeac7300f5576', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: '98e5dc4abcff54df74b02c737e4889e17639ddc6', slot: "trigger", type: "button", onClick: this.openPopover, class: {
'is-open': this.isOpen,
} }, this.trigger), h("limel-help-content", { key: '10b2d483aa459403b3d922add805bf6f64ae66e3', value: this.value, readMoreLink: this.readMoreLink }))));
}
static get is() { return "limel-help"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["help.scss"]
};
}
static get styleUrls() {
return {
"$": ["help.css"]
};
}
static get properties() {
return {
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "{@inheritdoc Help.value}"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "value"
},
"trigger": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "{@inheritdoc Help.trigger}"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "trigger",
"defaultValue": "'?'"
},
"readMoreLink": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Link",
"resolved": "Link",
"references": {
"Link": {
"location": "import",
"path": "../../global/shared-types/link.types",
"id": "src/global/shared-types/link.types.ts::Link",
"referenceLocation": "Link"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "{@inheritdoc Help.readMoreLink}"
},
"getter": false,
"setter": false
},
"openDirection": {
"type": "string",
"mutable": false,
"complexType": {
"original": "OpenDirection",
"resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
"references": {
"OpenDirection": {
"location": "import",
"path": "../menu/menu.types",
"id": "src/components/menu/menu.types.ts::OpenDirection",
"referenceLocation": "OpenDirection"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "{@inheritdoc Help.openDirection}"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "open-direction",
"defaultValue": "'top-start'"
}
};
}
static get states() {
return {
"isOpen": {}
};
}
}