@postnord/web-components
Version:
PostNord Web Components
139 lines (138 loc) • 5.79 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host } from "@stencil/core";
import * as colors from "pn-design-assets/pn-assets/colors.js";
/**
* The `pn-icon` is a wrapper for an SVG string.
* While its built with PostNords specific icon dimensions in mind (24x24px), you can use any SVG content in this component.
* As long as its 3x3 in size, there should be no problem.
*
* The color feature will not overwrite the color of flags.
**/
export class PnIcon {
hostElement;
/**
* The SVG content of the icon you want to use.
* @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs|Icons (Storybook)}
* @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs|Flags (Storybook)}
**/
icon = '';
/** Make the icon small (16 instead of 24px). */
small = false;
/**
* Color the icon with one of the following colors from our library.
* Has no effects if you use flags from our library.
* @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs|Colors (Storybook)}
**/
color = 'gray900';
handleColor() {
const color = colors[this.color] || colors.gray900;
this.hostElement.style.setProperty('--pn-icon-color', color);
}
componentWillLoad() {
this.handleColor();
}
render() {
return (h(Host, { key: 'f4d252ce71c0e0c83d352447bdd0c195de49196f' }, h("span", { key: 'adc6e3dd5d4d45ed9a154f07bd3e3fce8dbf6981', role: "presentation", class: "pn-icon", "data-small": this.small, innerHTML: this.icon })));
}
static get is() { return "pn-icon"; }
static get originalStyleUrls() {
return {
"$": ["pn-icon.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-icon.css"]
};
}
static get properties() {
return {
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "see",
"text": "{@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs Icons (Storybook)}"
}, {
"name": "see",
"text": "{@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs Flags (Storybook)}"
}],
"text": "The SVG content of the icon you want to use."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "icon",
"defaultValue": "''"
},
"small": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Make the icon small (16 instead of 24px)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "small",
"defaultValue": "false"
},
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "PnColors",
"resolved": "\"black\" | \"blue200\" | \"blue25\" | \"blue400\" | \"blue50\" | \"blue700\" | \"blue900\" | \"coral200\" | \"coral25\" | \"coral400\" | \"coral50\" | \"coral700\" | \"coral900\" | \"gray100\" | \"gray200\" | \"gray25\" | \"gray400\" | \"gray50\" | \"gray700\" | \"gray900\" | \"green200\" | \"green25\" | \"green400\" | \"green50\" | \"green500\" | \"green700\" | \"green900\" | \"orange200\" | \"orange25\" | \"orange400\" | \"orange50\" | \"orange500\" | \"orange700\" | \"orange900\" | \"warning\" | \"white\"",
"references": {
"PnColors": {
"location": "import",
"path": "@/index",
"id": "src/index.ts::PnColors",
"referenceLocation": "PnColors"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "see",
"text": "{@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs Colors (Storybook)}"
}],
"text": "Color the icon with one of the following colors from our library.\nHas no effects if you use flags from our library."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color",
"defaultValue": "'gray900'"
}
};
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "color",
"methodName": "handleColor"
}];
}
}