@postnord/web-components
Version:
PostNord Web Components
133 lines (132 loc) • 5.7 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 looks for any `black` and `#000` values and replaces it with the value from `color`.
* If you use flags from pn-design-assets, the color feature will not overwrite the flags color.
**/
export class PnIcon {
/**
* The SVG content of the icon you want to use.
*
* Flags cannot be colored.
*
* @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-icon--docs|PostNord Icons (Storybook)}
* @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs|PostNord Flags (Storybook)}
**/
icon = '';
/** Make the icon small (16 instead of 24px). */
small = false;
/**
* Color the icon with one of the follwing colors from our library.
* @see {@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs|PostNord Colors (Storybook)}
**/
color = 'gray900';
getIcon() {
if (/pn-icon-flag/.test(this.icon))
return this.icon;
// The replace is just setting the fill attribute on the SVG to the color passed to the component
return this.icon.replace(/(black|#000)/g, colors[this.color]);
}
render() {
return h(Host, { key: '0faec19408b9494ceadcd19dc33a6a1d666b5b1b', role: "presentation", class: `pn-icon ${this.small ? 'small' : ''}`, innerHTML: this.getIcon() });
}
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 PostNord Icons (Storybook)}"
}, {
"name": "see",
"text": "{@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-flag--docs PostNord Flags (Storybook)}"
}],
"text": "The SVG content of the icon you want to use.\n\nFlags cannot be colored."
},
"getter": false,
"setter": false,
"attribute": "icon",
"reflect": false,
"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,
"attribute": "small",
"reflect": false,
"defaultValue": "false"
},
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "PnColors",
"resolved": "\"warning\" | \"black\" | \"gray900\" | \"gray700\" | \"gray400\" | \"gray200\" | \"gray100\" | \"gray50\" | \"gray25\" | \"white\" | \"blue900\" | \"blue700\" | \"blue400\" | \"blue200\" | \"blue50\" | \"blue25\" | \"coral900\" | \"coral700\" | \"coral400\" | \"coral200\" | \"coral50\" | \"coral25\" | \"orange900\" | \"orange700\" | \"orange500\" | \"orange400\" | \"orange200\" | \"orange50\" | \"orange25\" | \"green900\" | \"green700\" | \"green500\" | \"green400\" | \"green200\" | \"green50\" | \"green25\"",
"references": {
"PnColors": {
"location": "import",
"path": "@/index",
"id": "src/index.ts::PnColors"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "see",
"text": "{@link https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs PostNord Colors (Storybook)}"
}],
"text": "Color the icon with one of the follwing colors from our library."
},
"getter": false,
"setter": false,
"attribute": "color",
"reflect": false,
"defaultValue": "'gray900'"
}
};
}
}
//# sourceMappingURL=pn-icon.js.map