@salla.sa/twilight-components
Version:
Salla Web Component
118 lines (117 loc) • 3.58 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { h } from "@stencil/core";
import { cva } from "class-variance-authority";
const badge = cva('s-badge-base', {
variants: {
size: {
xs: 's-badge-xs',
sm: 's-badge-sm',
md: 's-badge-md',
},
bg: {
transparent: 's-badge-transparent',
light: 's-badge-light',
'primary-100': 's-badge-primary-100',
},
color: {
black: 's-badge-black',
'primary-900': 's-badge-color-primary-900',
},
},
});
export class SallaBadge {
constructor() {
/**
* The size of the badge
*/
this.size = 'sm';
/**
* The text color of the badge
*/
this.color = 'black';
/**
* The background color of the badge
*/
this.bg = 'light';
}
render() {
return (h("div", { key: '9d81a7c592a57a533e2b8a48f015e2f9e796be51', class: badge({ size: this.size, bg: this.bg, color: this.color }) }, h("slot", { key: '999e75ec14a8346d84dbfc5122c448999d4fc481' })));
}
static get is() { return "salla-badge"; }
static get originalStyleUrls() {
return {
"$": ["salla-badge.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-badge.css"]
};
}
static get properties() {
return {
"size": {
"type": "string",
"attribute": "size",
"mutable": false,
"complexType": {
"original": "'xs' | 'sm' | 'md'",
"resolved": "\"md\" | \"sm\" | \"xs\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The size of the badge"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'sm'"
},
"color": {
"type": "string",
"attribute": "color",
"mutable": false,
"complexType": {
"original": "'black' | 'primary-900'",
"resolved": "\"black\" | \"primary-900\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The text color of the badge"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'black'"
},
"bg": {
"type": "string",
"attribute": "bg",
"mutable": false,
"complexType": {
"original": "'transparent' | 'light' | 'primary-100'",
"resolved": "\"light\" | \"primary-100\" | \"transparent\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The background color of the badge"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'light'"
}
};
}
}