chore(icon): add icon type support (#656)

Co-authored-by: Aykut Saraç <[email protected]>
Trendyol · Jul 14, 2023 · fc9af92 · fc9af92
1 parent 369750a
commit fc9af92
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 11 deletions.
diff --git a/src/components/badge/bl-badge.ts b/src/components/badge/bl-badge.ts
@@ -2,6 +2,7 @@ import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import style from './bl-badge.css';
 import '../icon/bl-icon';
+import { BaklavaIcon } from '../icon/icon-list';
 
 export type BadgeSize = 'small' | 'medium' | 'large';
 
@@ -29,7 +30,7 @@ export default class BlBadge extends LitElement {
    * Sets the name of the icon
    */
   @property({ type: String })
-  icon?: string;
+  icon?: BaklavaIcon;
 
   render(): TemplateResult {
     const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : '';

diff --git a/src/components/button/bl-button.ts b/src/components/button/bl-button.ts
@@ -6,6 +6,7 @@ import { submit } from '@open-wc/form-helpers';
 import { event, EventDispatcher } from '../../utilities/event';
 import style from './bl-button.css';
 import '../icon/bl-icon';
+import { BaklavaIcon } from '../icon/icon-list';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 export type ButtonKind = 'default' | 'neutral' | 'success' | 'danger';
@@ -78,7 +79,7 @@ export default class BlButton extends LitElement {
    * Sets the icon name. Shows icon with bl-icon component
    */
   @property({ type: String })
-  icon?: string;
+  icon?: BaklavaIcon;
 
   /**
    * Sets the anchor target. Used when `href` is set.

diff --git a/src/components/dropdown/item/bl-dropdown-item.ts b/src/components/dropdown/item/bl-dropdown-item.ts
@@ -12,6 +12,7 @@ import style from './bl-dropdown-item.css';
 import '../../button/bl-button';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import BlButton from '../../button/bl-button';
+import { BaklavaIcon } from '../../icon/icon-list';
 
 export const blDropdownItemTag = 'bl-dropdown-item';
 
@@ -30,7 +31,7 @@ export default class BlDropdownItem extends LitElement {
    */
 
   @property({ type: String })
-  icon?: string;
+  icon?: BaklavaIcon;
 
   @event('bl-dropdown-item-click') private onClick: EventDispatcher<string>;
 

diff --git a/src/components/icon/bl-icon.ts b/src/components/icon/bl-icon.ts
@@ -5,6 +5,7 @@ import { getIconPath } from '../../utilities/asset-paths';
 import { event, EventDispatcher } from '../../utilities/event';
 
 import style from './bl-icon.css';
+import { BaklavaIcon } from './icon-list';
 
 const requestMap = new Map<string, Promise<Response>>();
 
@@ -21,17 +22,17 @@ export default class BlIcon extends LitElement {
     return [style];
   }
 
-  private _iconName: string;
+  private _iconName: BaklavaIcon;
 
   /**
    * Name of the icon to show
    */
   @property()
-  get name(): string {
+  get name(): BaklavaIcon {
     return this._iconName;
   }
 
-  set name(value: string) {
+  set name(value: BaklavaIcon) {
     if (value !== this._iconName) {
       this._iconName = value;
       this.load();
@@ -60,7 +61,7 @@ export default class BlIcon extends LitElement {
 
     try {
       const iconRequest = await requestMap.get(fileUrl);
-      const res = await iconRequest?.clone();
+      const res = iconRequest?.clone();
 
       if (res?.ok) {
         this.svg = await res.text();

diff --git a/src/components/icon/icon-list.ts b/src/components/icon/icon-list.ts
@@ -1,4 +1,4 @@
-export default [
+const icons = [
   'academy',
   'account',
   'add_note',
@@ -202,4 +202,9 @@ export default [
   'youtube',
   'zoom_in',
   'zoom_out',
-];
+] as const;
+
+type BaklavaIcon = typeof icons[number];
+
+export type { BaklavaIcon }
+export default icons;
diff --git a/src/components/input/bl-input.ts b/src/components/input/bl-input.ts
@@ -12,6 +12,7 @@ import '../icon/bl-icon';
 import '../button/bl-button';
 
 import style from './bl-input.css';
+import { BaklavaIcon } from '../icon/icon-list';
 
 export type InputSize = 'small' | 'medium' | 'large';
 /**
@@ -127,7 +128,7 @@ export default class BlInput extends FormControlMixin(LitElement) {
    * Sets the custom icon name. `bl-icon` component is used to show an icon
    */
   @property({ type: String, reflect: true })
-  icon?: string;
+  icon?: BaklavaIcon;
 
   /**
    * Sets input size.

diff --git a/src/components/tab-group/tab/bl-tab.ts b/src/components/tab-group/tab/bl-tab.ts
@@ -4,6 +4,7 @@ import { event, EventDispatcher } from '../../../utilities/event';
 
 import style from './bl-tab.css';
 import type BlTabGroup from '../bl-tab-group';
+import { BaklavaIcon } from '../../icon/icon-list';
 
 /**
  * @tag bl-tab
@@ -54,7 +55,7 @@ export default class BlTab extends LitElement {
    * Name of the icon which display on the left side of the tab.
    */
   @property({ type: String })
-  icon = '';
+  icon?: BaklavaIcon;
 
   /**
    * Shows notification dot.