@scania/tegel
Version:
Tegel Design System
265 lines (264 loc) • 10.5 kB
JavaScript
import { h, Host } from "@stencil/core";
import generateUniqueId from "../../utils/generateUniqueId";
import hasSlot from "../../utils/hasSlot";
/**
* @slot header - Slot for the Card header.
* @slot subheader - Slot for the Card subheader.
* @slot thumbnail - Slot for the Card thumbnail.
* @slot body - Slot for the body section of the Card.
* @slot body-image - Slot for the body section of the Card, used for image.
* @slot actions - Slot for the bottom section of the Card, used for buttons .
*/
export class TdsCard {
constructor() {
this.handleClick = () => {
this.tdsClick.emit({
cardId: this.cardId,
});
};
this.getCardHeader = () => {
const usesHeaderSlot = hasSlot('header', this.host);
const usesSubheaderSlot = hasSlot('subheader', this.host);
const usesThumbnailSlot = hasSlot('thumbnail', this.host);
return (h("div", { class: "card-header" }, usesThumbnailSlot && h("slot", { name: "thumbnail" }), h("div", { class: "header-subheader", id: `header-${this.cardId}` }, this.header && h("span", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("span", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" }))));
};
this.getCardContent = () => {
const usesBodySlot = hasSlot('body', this.host);
const usesBodyImageSlot = hasSlot('body-image', this.host);
const usesActionsSlot = hasSlot('actions', this.host);
const bodyId = `body-${this.cardId}`;
return (h("div", { class: this.stretch && 'stretch', "aria-describedby": usesBodySlot ? bodyId : null }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: "card-body", id: bodyId }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
};
this.modeVariant = null;
this.imagePlacement = 'below-header';
this.header = undefined;
this.subheader = undefined;
this.bodyImg = undefined;
this.bodyImgAlt = undefined;
this.bodyDivider = false;
this.clickable = false;
this.stretch = false;
this.cardId = generateUniqueId();
}
render() {
const cardStyle = {
card: true,
clickable: this.clickable,
[this.imagePlacement]: !this.stretch,
[`${this.imagePlacement}-stretch`]: this.stretch,
};
const ariaLabel = this.header ? this.header : `Card ${this.cardId}`;
return (h(Host, { key: '39dde374a44320884af4b8a0da33e24c983417c5', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
}
static get is() { return "tds-card"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["card.scss"]
};
}
static get styleUrls() {
return {
"$": ["card.css"]
};
}
static get properties() {
return {
"modeVariant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'primary' | 'secondary'",
"resolved": "\"primary\" | \"secondary\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Variant of the Card based on the theme used."
},
"attribute": "mode-variant",
"reflect": false,
"defaultValue": "null"
},
"imagePlacement": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'above-header' | 'below-header'",
"resolved": "\"above-header\" | \"below-header\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Placement of the header"
},
"attribute": "image-placement",
"reflect": false,
"defaultValue": "'below-header'"
},
"header": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Text in the header"
},
"attribute": "header",
"reflect": false
},
"subheader": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Subheader text in the header"
},
"attribute": "subheader",
"reflect": false
},
"bodyImg": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Body image src"
},
"attribute": "body-img",
"reflect": false
},
"bodyImgAlt": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Alt text for the body image"
},
"attribute": "body-img-alt",
"reflect": false
},
"bodyDivider": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Divider for the body"
},
"attribute": "body-divider",
"reflect": false,
"defaultValue": "false"
},
"clickable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Makes the Card clickable."
},
"attribute": "clickable",
"reflect": false,
"defaultValue": "false"
},
"stretch": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "stretch",
"reflect": false,
"defaultValue": "false"
},
"cardId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "ID for the Card, must be unique.\n\n**NOTE**: If you're listening for Card events, you need to set this ID yourself to identify the Card,\nas the default ID is random and will be different every time."
},
"attribute": "card-id",
"reflect": false,
"defaultValue": "generateUniqueId()"
}
};
}
static get events() {
return [{
"method": "tdsClick",
"name": "tdsClick",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Sends unique Card identifier when the Card is clicked, if clickable=true"
},
"complexType": {
"original": "{\n cardId: string;\n }",
"resolved": "{ cardId: string; }",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
}