@scania/tegel
Version:
Tegel Design System
179 lines (178 loc) • 11.3 kB
JavaScript
// Check status of webFont solution
import { h, Host } from "@stencil/core";
import { iconsCollection as scaniaIcons } from "./scaniaIconsArray";
import { iconsCollection as tratonIcons } from "./tratonIconsArray";
const brandIconMap = {
scania: scaniaIcons,
traton: tratonIcons,
// Add new brands here in the future
// Example: newBrand: newBrandIcons,
};
export class Icon {
constructor() {
/** Pass the name of the icon.
* For icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library */
this.name = 'truck';
/** Pass a size of icon as a string, for example, 32px, 1rem, 4em... */
this.size = '16px';
/** Set aria-hidden attribute on svg */
this.tdsAriaHidden = false;
this.icons_object = '';
this.arrayOfIcons = [];
this.setIcons = () => this.arrayOfIcons.map((element) => {
if (element.name === this.name) {
return (h("svg", { "aria-hidden": this.tdsAriaHidden, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": this.svgTitle ? `title-${this.name}` : undefined, "aria-describedby": this.svgDescription ? `desc-${this.name}` : undefined, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, this.svgTitle && h("title", { id: `title-${this.name}` }, this.svgTitle), this.svgDescription && h("desc", { id: `desc-${this.name}` }, this.svgDescription), h("path", { fill: "currentColor", d: element.definition })));
}
});
}
componentWillLoad() {
this.detectAndSetBrand();
}
detectAndSetBrand() {
const brandClasses = Object.keys(brandIconMap);
const matchingBrand = brandClasses.find((brand) => this.host.closest(`.${brand}`));
// Set the icons_object based on the found brand or default to scania
this.icons_object = matchingBrand ? brandIconMap[matchingBrand] : scaniaIcons;
this.arrayDataWatcher(this.icons_object);
}
arrayDataWatcher(newValue) {
if (typeof newValue === 'string') {
this.arrayOfIcons = JSON.parse(newValue);
}
else {
this.arrayOfIcons = newValue;
}
this.arrayOfIcons = [...this.arrayOfIcons];
}
render() {
return h(Host, { key: '7ba84958ddfe1af185f27aa1dd5c4458c6a005d3' }, this.setIcons());
}
static get is() { return "tds-icon"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["icon.scss"]
};
}
static get styleUrls() {
return {
"$": ["icon.css"]
};
}
static get properties() {
return {
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "IconNames",
"resolved": "\"24v_battery\" | \"24v_battery_inactive\" | \"acceleration\" | \"acceleration_inactive\" | \"adblue\" | \"adblue_inactive\" | \"arrow_diagonal\" | \"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"audio\" | \"audio_inactive\" | \"award\" | \"back\" | \"backward\" | \"backward_inactive\" | \"bento\" | \"bug\" | \"bug_inactive\" | \"burger\" | \"bus\" | \"bus_inactive\" | \"cab_door\" | \"calendar\" | \"calendar_inactive\" | \"camera\" | \"camera_inactive\" | \"card\" | \"cart\" | \"charging_complete\" | \"charging_failed\" | \"charging_speed\" | \"charging_speed_inactive\" | \"charging_stopped\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"clock\" | \"clock_inactive\" | \"configurator\" | \"contact\" | \"contact_inactive\" | \"cookie\" | \"cookie_inactive\" | \"coolant_level\" | \"coolant_level_inactive\" | \"copy\" | \"cross\" | \"cup\" | \"cup_inactive\" | \"dashboard\" | \"department\" | \"department_inactive\" | \"departure_scheduling\" | \"departure_scheduling_inactive\" | \"diamond\" | \"diamond_inactive\" | \"document\" | \"document_check\" | \"document_doc\" | \"document_eye\" | \"document_pdf\" | \"document_plus\" | \"document_plus_inactive\" | \"document_ppt\" | \"document_tool\" | \"document_wrong\" | \"document_xls\" | \"dollar\" | \"doner\" | \"double_kebab\" | \"download\" | \"driving_licence\" | \"driving_licence_inactive\" | \"drop\" | \"drop_inactive\" | \"edit\" | \"edit_inactive\" | \"email\" | \"engine\" | \"engine_inactive\" | \"environment\" | \"environment_inactive\" | \"error\" | \"exit\" | \"expand\" | \"expand_inactive\" | \"export\" | \"export_inactive\" | \"eye\" | \"eye_inactive\" | \"face_dissatisfied\" | \"face_neutral\" | \"face_satisfied\" | \"factory\" | \"factory_inactive\" | \"ferry\" | \"ferry_inactive\" | \"filters\" | \"filters_inactive\" | \"flash\" | \"flash_inactive\" | \"folder\" | \"forward\" | \"forward_inactive\" | \"fuel\" | \"fuel_gauge\" | \"fuel_gauge_inactive\" | \"fuel_inactive\" | \"gift\" | \"gift_inactive\" | \"global\" | \"guided_tour\" | \"guided_tour_inactive\" | \"hatch_open\" | \"hatch_open_1\" | \"hatch_open_2\" | \"hatch_open_inactive\" | \"heart\" | \"heart_inactive\" | \"heating_inactive_screen\" | \"history\" | \"history_inactive\" | \"home\" | \"home_inactive\" | \"idea\" | \"idea_inactive\" | \"image\" | \"image_add\" | \"image_inactive\" | \"image_set\" | \"info\" | \"insights\" | \"kebab\" | \"key\" | \"key_inactive\" | \"language\" | \"layer\" | \"layer_inactive\" | \"link\" | \"link_broken\" | \"list\" | \"list_inactive\" | \"lock\" | \"lock_inactive\" | \"map_cursor\" | \"map_cursor_inactive\" | \"maximize_fullscreen\" | \"meatballs\" | \"merge\" | \"merge_inactive\" | \"message\" | \"message_inactive\" | \"microphone\" | \"microphone_inactive\" | \"mileage\" | \"mileage_inactive\" | \"minimize_fullscreen\" | \"minus\" | \"navigate\" | \"navigate_inactive\" | \"notification\" | \"notification_inactive\" | \"notification_snooze\" | \"oil_level\" | \"oil_level_inactive\" | \"paperclip\" | \"pause\" | \"pause_inactive\" | \"phone\" | \"phone_inactive\" | \"pie_chart\" | \"pin\" | \"pin_inactive\" | \"placeholder\" | \"play\" | \"play_inactive\" | \"plus\" | \"powerplug\" | \"powerplug_inactive\" | \"print\" | \"print_inactive\" | \"privacy\" | \"privacy_inactive\" | \"profile\" | \"profile_inactive\" | \"prohibited\" | \"proportions\" | \"proportions_inactive\" | \"range\" | \"range_inactive\" | \"redirect\" | \"refresh\" | \"refresh_inactive\" | \"reload\" | \"reload_inactive\" | \"repeat\" | \"report\" | \"report_inactive\" | \"route\" | \"route_inactive\" | \"save\" | \"save_inactive\" | \"search\" | \"send\" | \"send_inactive\" | \"settings\" | \"share\" | \"shuffle\" | \"skip_backwards\" | \"skip_forward\" | \"smartphone\" | \"smartphone_inactive\" | \"sorting\" | \"speedometer\" | \"speedometer_inactive\" | \"star\" | \"support\" | \"target\" | \"target_inactive\" | \"temperature\" | \"temperature_inactive\" | \"text\" | \"text_inactive\" | \"thumbs_down\" | \"thumbs_up\" | \"tick\" | \"timer\" | \"tool\" | \"tool_inactive\" | \"trailer\" | \"trailer_inactive\" | \"trash\" | \"trash_inactive\" | \"truck\" | \"truck_inactive\" | \"undo\" | \"undo_inactive\" | \"unlock\" | \"upload\" | \"video\" | \"video_inactive\" | \"wallet\" | \"warning\" | \"weight\" | \"weight_inactive\" | \"wifi\" | \"wifi_inactive\" | \"windscreen_heating\" | \"windscreen_heating_inactive\"",
"references": {
"IconNames": {
"location": "import",
"path": "../../types/Icons",
"id": "src/types/Icons.ts::IconNames",
"referenceLocation": "IconNames"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Pass the name of the icon.\nFor icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "name",
"defaultValue": "'truck'"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Pass a size of icon as a string, for example, 32px, 1rem, 4em..."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "size",
"defaultValue": "'16px'"
},
"svgTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Override the default title for the svg. Also used by aria-labelledby."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "svg-title"
},
"tdsAriaHidden": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set aria-hidden attribute on svg"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-aria-hidden",
"defaultValue": "false"
},
"svgDescription": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set description for the svg. Also used by aria-describedby."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "svg-description"
}
};
}
static get states() {
return {
"icons_object": {},
"arrayOfIcons": {}
};
}
static get elementRef() { return "host"; }
}