@kirbydesign/designsystem 0.0.0

package/src/lib/components/icon/icon.component.spec.ts

@@ -0,0 +1,254 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { IonIcon } from '@ionic/angular';
+import { mockProvider, SpyObject } from '@ngneat/spectator';
+import { MockComponent } from 'ng-mocks';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { ThemeColorDirective } from '../../directives/theme-color/theme-color.directive';
+
+import { IconRegistryService } from './icon-registry.service';
+import { IconComponent, IconSize } from './icon.component';
+
+const { getColor, iconFontSize } = DesignTokenHelper;
+
+describe('IconComponent', () => {
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        IconComponent,
+        ThemeColorDirective,
+        TestWrapperComponent,
+        MockComponent(IonIcon),
+      ],
+      providers: [mockProvider(IconRegistryService)],
+    });
+  }));
+
+  it('should compile with custom hardcoded directives', () => {
+    const fixture = createTestComponent('<kirby-icon themeColor="primary"></kirby-icon>');
+
+    expect(fixture).toBeDefined();
+  });
+
+  it('should compile with custom dynamic bound directives', () => {
+    const fixture = createTestComponent('<kirby-icon [themeColor]="\'primary\'"></kirby-icon>');
+
+    expect(fixture).toBeDefined();
+  });
+
+  it('should create component instance', () => {
+    const fixture = createTestComponent('<kirby-icon></kirby-icon>');
+    const component = fixture.debugElement.query(By.directive(IconComponent)).componentInstance;
+
+    expect(component).toBeTruthy();
+  });
+
+  describe('icons', () => {
+    it('should set default icon by default', () => {
+      const fixture = createTestComponent('<kirby-icon></kirby-icon>');
+      const component = fixture.debugElement.query(By.directive(IconComponent)).componentInstance;
+
+      expect(component.name).toBe(undefined);
+      expect(component.icon.name).toBe(component.defaultIcon.name);
+    });
+
+    it('should set default icon if icon name not found', () => {
+      const noExistingIconName = 'no-existing-icon-name';
+      const fixture = createTestComponent(`<kirby-icon name="${noExistingIconName}"></kirby-icon>`);
+      const component = fixture.debugElement.query(By.directive(IconComponent)).componentInstance;
+
+      expect(component.name).toBe(noExistingIconName);
+      expect(component.icon.name).toBe(component.defaultIcon.name);
+    });
+
+    it('should warn if icon name not found', () => {
+      spyOn(console, 'warn');
+      const noExistingIconName = 'no-existing-icon-name';
+      const fixture = createTestComponent(`<kirby-icon name="${noExistingIconName}"></kirby-icon>`);
+
+      fixture.detectChanges();
+
+      expect(console.warn).toHaveBeenCalledWith(
+        `Built-in icon with name "${noExistingIconName}" was not found. 
+        Do you have a typo in 'name' or
+        did you mean to use a custom icon? If so, please use: 
+        <kirby-icon customName="${noExistingIconName}"></kirby-icon>`
+      );
+    });
+
+    it('should set default icon if custom icon name not found', () => {
+      const noExistingIconName = 'no-existing-custom-icon-name';
+      const fixture = createTestComponent(
+        `<kirby-icon customName="${noExistingIconName}"></kirby-icon>`
+      );
+      const component = fixture.debugElement.query(By.directive(IconComponent)).componentInstance;
+
+      expect(component.customName).toBe(noExistingIconName);
+      expect(component.icon.name).toBe(component.defaultIcon.name);
+    });
+
+    it('should warn if custom icon name not found', () => {
+      spyOn(console, 'warn');
+      const noExistingIconName = 'no-existing-custom-icon-name';
+      const fixture = createTestComponent(
+        `<kirby-icon customName="${noExistingIconName}"></kirby-icon>`
+      );
+      fixture.detectChanges();
+
+      expect(console.warn).toHaveBeenCalledWith(
+        `Custom icon with name "${noExistingIconName}" was not found. 
+        Do you have a typo in 'customName' or
+        forgot to configure the custom icon through the 'IconRegistryService'?`
+      );
+    });
+
+    it('should use default icons from Kirby icon settings', () => {
+      const fixture = createTestComponent('<kirby-icon name="verify"></kirby-icon>');
+      fixture.detectChanges();
+      const component = fixture.debugElement.query(By.directive(IconComponent)).componentInstance;
+
+      expect(component.icon.name).toBe('verify');
+    });
+
+    it('should use custom icon from IconRegistryService', () => {
+      const fixture = createTestComponent(
+        `<kirby-icon customName="customIconNameFromIconRegistry"></kirby-icon>`
+      );
+      const iconRegistrySpy = TestBed.inject(IconRegistryService) as SpyObject<IconRegistryService>;
+      iconRegistrySpy.getIcon.and.returnValue({
+        name: 'customIconNameFromIconRegistry',
+        svg: 'customIconSvgFromIconRegistry',
+      });
+      fixture.detectChanges();
+      const component = fixture.debugElement.query(By.directive(IconComponent)).componentInstance;
+
+      expect(component.icon.name).toBe('customIconNameFromIconRegistry');
+      expect(component.icon.svg).toBe('customIconSvgFromIconRegistry');
+    });
+  });
+
+  describe('color', () => {
+    it('should be rendered with default text color by default', () => {
+      const fixture = createTestComponent('<kirby-icon></kirby-icon>');
+      fixture.detectChanges();
+      const el = fixture.debugElement.query(By.directive(IconComponent));
+
+      expect(el.nativeElement.className).toBe('kirby-icon');
+
+      const expectedColor = window.getComputedStyle(window.document.body)['color'];
+
+      expect(el.nativeElement).toHaveComputedStyle({
+        color: expectedColor,
+      });
+    });
+
+    it('should be rendered with primary color when theme color is set to primary', () => {
+      const fixture = createTestComponent('<kirby-icon [themeColor]="\'primary\'"></kirby-icon>');
+      fixture.detectChanges();
+      const el = fixture.debugElement.query(By.directive(IconComponent));
+
+      expect(el.nativeElement).toHaveComputedStyle({
+        color: getColor('primary'),
+      });
+    });
+
+    it('should be rendered with secondary color when theme color is set to secondary', () => {
+      const fixture = createTestComponent('<kirby-icon themeColor="secondary"></kirby-icon>');
+      fixture.detectChanges();
+      const el = fixture.debugElement.query(By.directive(IconComponent));
+
+      expect(el.nativeElement).toHaveComputedStyle({
+        color: getColor('secondary'),
+      });
+    });
+
+    it('should be rendered with tertiary color when theme color is set to tertiary', () => {
+      const fixture = createTestComponent('<kirby-icon themeColor="tertiary"></kirby-icon>');
+      fixture.detectChanges();
+      const el = fixture.debugElement.query(By.directive(IconComponent));
+
+      expect(el.nativeElement).toHaveComputedStyle({
+        color: getColor('tertiary'),
+      });
+    });
+
+    it('should be rendered with warning color when theme color is set to warning', () => {
+      const fixture = createTestComponent('<kirby-icon themeColor="warning"></kirby-icon>');
+      fixture.detectChanges();
+      const el = fixture.debugElement.query(By.directive(IconComponent));
+
+      expect(el.nativeElement).toHaveComputedStyle({
+        color: getColor('warning'),
+      });
+    });
+
+    it('should be rendered with success color when theme color is set to success', () => {
+      const fixture = createTestComponent('<kirby-icon themeColor="success"></kirby-icon>');
+      fixture.detectChanges();
+      const el = fixture.debugElement.query(By.directive(IconComponent));
+
+      expect(el.nativeElement).toHaveComputedStyle({
+        color: getColor('success'),
+      });
+    });
+
+    it('should be rendered with danger color when theme color is set to danger', () => {
+      const fixture = createTestComponent('<kirby-icon themeColor="danger"></kirby-icon>');
+      fixture.detectChanges();
+      const el = fixture.debugElement.query(By.directive(IconComponent));
+
+      expect(el.nativeElement).toHaveComputedStyle({
+        color: getColor('danger'),
+      });
+    });
+  });
+
+  it('should default to size = sm', () => {
+    const fixture = createTestComponent('<kirby-icon></kirby-icon>');
+    fixture.detectChanges();
+    const el = fixture.debugElement.query(By.directive(IconComponent));
+
+    expect(el.nativeElement).toHaveComputedStyle({
+      'font-size': iconFontSize('sm'),
+    });
+  });
+
+  const sizes = Object.values(IconSize);
+
+  sizes.forEach((size) => {
+    it(`should render with correct font-size for size = ${size}`, () => {
+      const fixture = createTestComponent(`<kirby-icon size="${size}"></kirby-icon>`);
+      fixture.detectChanges();
+      const el = fixture.debugElement.query(By.directive(IconComponent));
+
+      expect(el.nativeElement).toHaveComputedStyle({
+        'font-size': iconFontSize(size),
+      });
+    });
+  });
+});
+
+/*
+ * Shell component that will be used to test with theme-color directive
+ */
+@Component({
+  selector: 'kirby-test-component',
+  template: '<span>PlaceHolder HTML to be Replaced</span>',
+})
+export class TestWrapperComponent {}
+
+/*
+ * Custom Helper function to quickly create a `fixture` instance based on
+ * the 'TestWrapperComponent' class
+ */
+
+function createTestComponent(template: string): ComponentFixture<TestWrapperComponent> {
+  return TestBed.overrideComponent(TestWrapperComponent, {
+    set: {
+      template: template,
+    },
+  }).createComponent(TestWrapperComponent);
+}

package/src/lib/components/icon/icon.component.ts

@@ -0,0 +1,89 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+
+import { IconRegistryService } from './icon-registry.service';
+import { Icon } from './icon-settings';
+import { kirbyIconSettings } from './kirby-icon-settings';
+
+export enum IconSize {
+  XS = 'xs',
+  SM = 'sm',
+  MD = 'md',
+  LG = 'lg',
+}
+
+@Component({
+  selector: 'kirby-icon',
+  templateUrl: './icon.component.html',
+  styleUrls: ['./icon.component.scss'],
+  // tslint:disable-next-line: no-host-metadata-property
+  host: { '[class.kirby-icon]': 'true' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class IconComponent implements OnChanges {
+  defaultIcon: Icon = this.findIcon(kirbyIconSettings.icons, 'cog');
+  private _icon = (this.icon = this.defaultIcon);
+  @HostBinding('class')
+  @Input()
+  size: IconSize | `${IconSize}`;
+
+  @Input() name: string;
+  @Input() customName: string;
+
+  get icon(): Icon {
+    return this._icon;
+  }
+
+  set icon(icon: Icon) {
+    // If icon are not found, set default icon
+    if (!icon && (this.name || this.customName)) {
+      this.warnAboutMissingIcon();
+
+      icon = this.defaultIcon;
+
+      // If default icon are not found
+      if (!icon) {
+        console.warn('Default icon was not found.');
+        return;
+      }
+    }
+
+    // Set icon if it's found
+    if (icon) {
+      this._icon = icon;
+    }
+  }
+
+  private warnAboutMissingIcon(): void {
+    if (this.customName) {
+      console.warn(`Custom icon with name "${this.customName}" was not found. 
+        Do you have a typo in 'customName' or
+        forgot to configure the custom icon through the 'IconRegistryService'?`);
+    } else {
+      console.warn(`Built-in icon with name "${this.name}" was not found. 
+        Do you have a typo in 'name' or
+        did you mean to use a custom icon? If so, please use: 
+        <kirby-icon customName="${this.name}"></kirby-icon>`);
+    }
+  }
+
+  constructor(private iconRegistryService: IconRegistryService) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.name && changes.name.currentValue) {
+      this.icon = this.findIcon(kirbyIconSettings.icons, changes.name.currentValue);
+    } else if (changes.customName && changes.customName.currentValue) {
+      this.icon = this.iconRegistryService.getIcon(changes.customName.currentValue);
+    }
+  }
+
+  private findIcon(icons, name: string): Icon {
+    return icons.find((icon) => icon.name === name);
+  }
+}

package/src/lib/components/icon/icon.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+
+import { IconComponent } from './icon.component';
+
+@NgModule({
+  imports: [IonicModule],
+  declarations: [IconComponent],
+  exports: [IconComponent],
+})
+export class IconModule {}

package/src/lib/components/icon/index.ts

@@ -0,0 +1,5 @@
+export { IconComponent, IconSize } from './icon.component';
+export { IconModule } from './icon.module';
+export { IconSettings, Icon } from './icon-settings';
+export { defaultIcons } from './kirby-icon-settings';
+export { IconRegistryService } from './icon-registry.service';

package/src/lib/components/icon/kirby-icon-settings.ts

@@ -0,0 +1,65 @@
+import { IconSettings } from './icon-settings';
+
+// tslint:disable:prettier
+export const kirbyIconSettings: IconSettings = {
+  icons: [
+    { name: 'accounts-outline', svg: 'assets/kirby/icons/svg/accounts-outline.svg' },
+    { name: 'accounts', svg: 'assets/kirby/icons/svg/accounts.svg' },
+    { name: 'add', svg: 'assets/kirby/icons/svg/add.svg' },
+    { name: 'remove', svg: 'assets/kirby/icons/svg/remove.svg' },
+    { name: 'unsubscribe', svg: 'assets/kirby/icons/svg/unsubscribe.svg' },
+    { name: 'arrow-back', svg: 'assets/kirby/icons/svg/arrow-back.svg' },
+    { name: 'arrow-down', svg: 'assets/kirby/icons/svg/arrow-down.svg' },
+    { name: 'arrow-more', svg: 'assets/kirby/icons/svg/arrow-more.svg' },
+    { name: 'arrow-up', svg: 'assets/kirby/icons/svg/arrow-up.svg' },
+    { name: 'attach', svg: 'assets/kirby/icons/svg/attach.svg' },
+    { name: 'backspace', svg: 'assets/kirby/icons/svg/backspace.svg' },
+    { name: 'calendar', svg: 'assets/kirby/icons/svg/calendar.svg' },
+    { name: 'camera', svg: 'assets/kirby/icons/svg/camera.svg' },
+    { name: 'checkbox-outline', svg: 'assets/kirby/icons/svg/checkbox-outline.svg' },
+    { name: 'checkbox', svg: 'assets/kirby/icons/svg/checkbox.svg' },
+    { name: 'checkmark-selected', svg: 'assets/kirby/icons/svg/checkmark-selected.svg' },
+    { name: 'close', svg: 'assets/kirby/icons/svg/close.svg' },
+    { name: 'cog', svg: 'assets/kirby/icons/svg/cog.svg' },
+    { name: 'copy', svg: 'assets/kirby/icons/svg/copy.svg' },
+    { name: 'flag', svg: 'assets/kirby/icons/svg/flag.svg' },
+    { name: 'edit', svg: 'assets/kirby/icons/svg/edit.svg' },
+    { name: 'filter', svg: 'assets/kirby/icons/svg/filter.svg' },
+    { name: 'flash-off', svg: 'assets/kirby/icons/svg/flash-off.svg' },
+    { name: 'flash', svg: 'assets/kirby/icons/svg/flash.svg' },
+    { name: 'moneybag', svg: 'assets/kirby/icons/svg/moneybag.svg' },
+    { name: 'help', svg: 'assets/kirby/icons/svg/help.svg' },
+    { name: 'home', svg: 'assets/kirby/icons/svg/home.svg' },
+    { name: 'inbox', svg: 'assets/kirby/icons/svg/inbox.svg' },
+    { name: 'inbox-outline', svg: 'assets/kirby/icons/svg/inbox-outline.svg' },
+    { name: 'information', svg: 'assets/kirby/icons/svg/information.svg' },
+    { name: 'investment', svg: 'assets/kirby/icons/svg/investment.svg' },
+    { name: 'kirby', svg: 'assets/kirby/icons/svg/kirby.svg' },
+    { name: 'link', svg: 'assets/kirby/icons/svg/link.svg' },
+    { name: 'log-out', svg: 'assets/kirby/icons/svg/log-out.svg' },
+    { name: 'menu-outline', svg: 'assets/kirby/icons/svg/menu-outline.svg' },
+    { name: 'menu', svg: 'assets/kirby/icons/svg/menu.svg' },
+    { name: 'misc', svg: 'assets/kirby/icons/svg/misc.svg' },
+    { name: 'more', svg: 'assets/kirby/icons/svg/more.svg' },
+    { name: 'move', svg: 'assets/kirby/icons/svg/move.svg' },
+    { name: 'payment-card', svg: 'assets/kirby/icons/svg/payment-card.svg' },
+    { name: 'pension', svg: 'assets/kirby/icons/svg/pension.svg' },
+    { name: 'person-outline', svg: 'assets/kirby/icons/svg/person-outline.svg' },
+    { name: 'person', svg: 'assets/kirby/icons/svg/person.svg' },
+    { name: 'qr', svg: 'assets/kirby/icons/svg/QR.svg' },
+    { name: 'search', svg: 'assets/kirby/icons/svg/search.svg' },
+    { name: 'share', svg: 'assets/kirby/icons/svg/share.svg' },
+    { name: 'sort', svg: 'assets/kirby/icons/svg/sort.svg' },
+    { name: 'support', svg: 'assets/kirby/icons/svg/support.svg' },
+    { name: 'swap', svg: 'assets/kirby/icons/svg/swap.svg' },
+    { name: 'trash', svg: 'assets/kirby/icons/svg/trash.svg' },
+    { name: 'foreign-payment', svg: 'assets/kirby/icons/svg/foreign-payment.svg' },
+    { name: 'clock', svg: 'assets/kirby/icons/svg/clock.svg' },
+    { name: 'verify', svg: 'assets/kirby/icons/svg/verify.svg' },
+    { name: 'warning', svg: 'assets/kirby/icons/svg/warning.svg' },
+    { name: 'write-message', svg: 'assets/kirby/icons/svg/write-message.svg' },
+    { name: 'reorder', svg: 'assets/kirby/icons/svg/reorder.svg' },
+  ],
+};
+
+export const defaultIcons = kirbyIconSettings.icons.map((icon) => icon.name);

package/src/lib/components/icon/readme.md

@@ -0,0 +1,16 @@
+# Add new icons
+
+To add new icons, you should use the [icomoon app](https://icomoon.io).
+
+## Generate font from svg's
+
+1. Upload selection.json to get existing icons and settings
+2. Upload new icons
+3. Download Font
+
+## Update kirby icons
+
+1. Replace src/kirby/icon/selection.json, with newly generated selection.json
+2. Replace src/fonts/kirby.ttf, with newly generated kirby.ttf
+3. Update kirby-custom-icon-settings.ts with new icons (old icons should not have changed)
+4. Add new icon svg's to src/assets/icons/kirby