@scania/tegel
Version:
Tegel Design System
270 lines (269 loc) • 9.95 kB
JavaScript
import { h, Host } from "@stencil/core";
import hasSlot from "../../utils/hasSlot";
/**
* @slot label - Slot for the text injection. Serves as alternative to text prop.
* @slot icon - Slot used to display an Icon in the Button.
*/
export class TdsButton {
constructor() {
this.text = undefined;
this.type = 'button';
this.variant = 'primary';
this.size = 'lg';
this.disabled = false;
this.fullbleed = false;
this.modeVariant = null;
this.animation = 'none';
this.tdsAriaLabel = undefined;
this.name = undefined;
this.value = undefined;
this.onlyIcon = false;
}
connectedCallback() {
if (this.onlyIcon && !this.tdsAriaLabel) {
console.warn('Tegel button component: please specify the tdsAriaLabel prop when you have the onlyIcon attribute set to true');
}
}
render() {
const hasLabelSlot = hasSlot('label', this.host);
const hasIconSlot = hasSlot('icon', this.host);
if (!this.text && !hasLabelSlot) {
this.onlyIcon = true;
}
return (h(Host, { key: 'd6f3f193c3050d8eab6220cadd05847cbb528f3e', class: {
[`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
disabled: Boolean(this.disabled),
fullbleed: Boolean(this.fullbleed),
}, disabled: this.disabled }, h("button", Object.assign({ key: '4b548051c9eeaf43d63a5173e08f0263896626b9', type: this.type, name: this.name ? this.name : undefined, value: this.value ? this.value : undefined, disabled: this.disabled, class: {
'primary': this.variant === 'primary',
'secondary': this.variant === 'secondary',
'ghost': this.variant === 'ghost',
'danger': this.variant === 'danger',
'lg': this.size === 'lg',
'md': this.size === 'md',
'sm': this.size === 'sm',
'xs': this.size === 'xs',
'disabled': this.disabled,
'fullbleed': this.fullbleed,
'icon': hasIconSlot,
'only-icon': this.onlyIcon,
[`animation-${this.animation}`]: this.animation !== 'none',
} }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '0f85ffc90d0328c14ffd4696a3b305a1ff144253', name: "label" }), hasIconSlot && h("slot", { key: 'a0434202a202f7996174233b18eff6e4361df146', name: "icon" }))));
}
static get is() { return "tds-button"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() {
return {
"$": ["button.scss"]
};
}
static get styleUrls() {
return {
"$": ["button.css"]
};
}
static get properties() {
return {
"text": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Text displayed inside the Button"
},
"attribute": "text",
"reflect": false
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'button' | 'submit' | 'reset'",
"resolved": "\"button\" | \"reset\" | \"submit\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Button's type"
},
"attribute": "type",
"reflect": false,
"defaultValue": "'button'"
},
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'primary' | 'secondary' | 'ghost' | 'danger'",
"resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Variation of Button's design"
},
"attribute": "variant",
"reflect": false,
"defaultValue": "'primary'"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'xs' | 'sm' | 'md' | 'lg'",
"resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Size of a Button"
},
"attribute": "size",
"reflect": false,
"defaultValue": "'lg'"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Control for disabled state of a component"
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"fullbleed": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When enabled, the Button takes 100% width"
},
"attribute": "fullbleed",
"reflect": false,
"defaultValue": "false"
},
"modeVariant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'primary' | 'secondary'",
"resolved": "\"primary\" | \"secondary\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set the mode variant of the Button."
},
"attribute": "mode-variant",
"reflect": false,
"defaultValue": "null"
},
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'none' | 'fade'",
"resolved": "\"fade\" | \"none\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Determines if and how the button should animate."
},
"attribute": "animation",
"reflect": false,
"defaultValue": "'none'"
},
"tdsAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The value to be used for the aria-label attribute if onlyIcon is set to true"
},
"attribute": "tds-aria-label",
"reflect": false
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The name attribute allows for different ways of accessing the button element"
},
"attribute": "name",
"reflect": false
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The value attribute can be used when handling a form submission"
},
"attribute": "value",
"reflect": false
}
};
}
static get states() {
return {
"onlyIcon": {}
};
}
static get elementRef() { return "host"; }
}