@limetech/lime-elements
Version:
147 lines (146 loc) • 4.33 kB
JavaScript
import { h } 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
* @exampleComponent limel-example-read-more
* @exampleComponent limel-example-open-direction
* @exampleComponent limel-example-placement
*/
export class HelpComponent {
constructor() {
this.openPopover = (event) => {
event.stopPropagation();
this.isOpen = true;
};
this.onPopoverClose = (event) => {
event.stopPropagation();
this.isOpen = false;
};
this.value = undefined;
this.trigger = '?';
this.readMoreLink = undefined;
this.openDirection = 'top-start';
this.isOpen = false;
}
render() {
return [
h("limel-popover", { open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { slot: "trigger", onClick: this.openPopover, class: {
'is-open': this.isOpen,
} }, this.trigger), h("limel-help-content", { 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}"
},
"attribute": "value",
"reflect": false
},
"trigger": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "{@inheritdoc Help.trigger}"
},
"attribute": "trigger",
"reflect": false,
"defaultValue": "'?'"
},
"readMoreLink": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Link",
"resolved": "Link",
"references": {
"Link": {
"location": "import",
"path": "../../global/shared-types/link.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "{@inheritdoc Help.readMoreLink}"
}
},
"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"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "{@inheritdoc Help.openDirection}"
},
"attribute": "open-direction",
"reflect": true,
"defaultValue": "'top-start'"
}
};
}
static get states() {
return {
"isOpen": {}
};
}
}
//# sourceMappingURL=help.js.map