@kirbydesign/designsystem 0.0.0

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

@@ -0,0 +1,207 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+
+import { ColorHelper, DesignTokenHelper, ThemeColorExtended } from '@kirbydesign/core';
+
+import { ThemeColorDirective } from '../../directives';
+import { TestHelper } from '../../testing/test-helper';
+import { IconComponent } from '../icon/icon.component';
+import { ProgressCircleRingComponent } from '../progress-circle/progress-circle-ring.component';
+import { ProgressCircleComponent } from '../progress-circle/progress-circle.component';
+
+import { AvatarComponent } from './avatar.component';
+
+const getColor = DesignTokenHelper.getColor;
+const size = DesignTokenHelper.size;
+const avatarSize = DesignTokenHelper.avatarSize;
+
+describe('AvatarComponent', () => {
+  let spectator: SpectatorHost<AvatarComponent>;
+
+  const createHost = createHostFactory({
+    component: AvatarComponent,
+    declarations: [
+      IconComponent,
+      ThemeColorDirective,
+      ProgressCircleComponent,
+      ProgressCircleRingComponent,
+    ],
+    imports: [TestHelper.ionicModuleForTest],
+  });
+
+  it('should create', () => {
+    spectator = createHost(`
+    <kirby-avatar size="lg" overlay="true">
+      <kirby-icon name="qr"></kirby-icon>
+    </kirby-avatar>
+    `);
+    expect(spectator.component).toBeTruthy();
+  });
+
+  it('should render with correct default colors', async () => {
+    spectator = createHost(`
+    <kirby-avatar>
+      <kirby-icon name="qr"></kirby-icon>
+    </kirby-avatar>
+    `);
+
+    const avatar = spectator.queryHost<HTMLElement>('.avatar');
+    expect(avatar).toHaveComputedStyle({
+      'background-color': getColor('white'),
+      color: getColor('light', 'contrast'),
+    });
+  });
+
+  describe('when rendering Avatar within Progress Circle', () => {
+    it(`should have correct size when Progress Circle size = 'sm'`, async () => {
+      spectator = createHost(`
+      <kirby-progress-circle size="sm">
+        <kirby-avatar>
+          <kirby-icon name="qr"></kirby-icon>
+        </kirby-avatar>
+      </kirby-progress-circle>
+      `);
+
+      const avatar = spectator.queryHost<HTMLElement>('.avatar');
+      const ionIcon = spectator.queryHost<HTMLElement>('ion-icon');
+      await TestHelper.whenReady(ionIcon);
+
+      expect(avatar).toHaveComputedStyle({ width: avatarSize('s'), height: avatarSize('s') });
+      expect(ionIcon).toHaveComputedStyle({ width: size('m'), height: size('m') });
+    });
+
+    it(`should have correct size when size = 'sm'`, () => {
+      spectator = createHost(`<kirby-avatar size="sm"></kirby-avatar>`);
+      const avatar = spectator.queryHost<HTMLElement>('.avatar');
+      expect(avatar).toHaveComputedStyle({ width: avatarSize('s'), height: avatarSize('s') });
+    });
+
+    it(`should have correct size when size = 'md'`, () => {
+      spectator = createHost(`<kirby-avatar size="md"></kirby-avatar>`);
+      const avatar = spectator.queryHost<HTMLElement>('.avatar');
+      expect(avatar).toHaveComputedStyle({ width: avatarSize('m'), height: avatarSize('m') });
+    });
+
+    it(`should have correct size when size = 'lg'`, () => {
+      spectator = createHost(`<kirby-avatar size="lg"></kirby-avatar>`);
+      const avatar = spectator.queryHost<HTMLElement>('.avatar');
+      expect(avatar).toHaveComputedStyle({ width: avatarSize('l'), height: avatarSize('l') });
+    });
+  });
+
+  describe('when rendering Avatar with icon', () => {
+    it(`icon should have correct size when Avatar size = 'sm'`, async () => {
+      spectator = createHost(`
+      <kirby-avatar size="sm" overlay="true">
+        <kirby-icon name="qr"></kirby-icon>
+      </kirby-avatar>
+      `);
+
+      const ionIcon = spectator.queryHost<HTMLElement>('ion-icon');
+      await TestHelper.whenReady(ionIcon);
+
+      expect(ionIcon).toHaveComputedStyle({ width: size('m'), height: size('m') });
+    });
+
+    it(`icon should have correct size when Avatar size = 'md'`, async () => {
+      spectator = createHost(`
+      <kirby-avatar size="md" overlay="true">
+        <kirby-icon name="qr"></kirby-icon>
+      </kirby-avatar>
+      `);
+
+      const ionIcon = spectator.queryHost<HTMLElement>('ion-icon');
+      await TestHelper.whenReady(ionIcon);
+
+      expect(ionIcon).toHaveComputedStyle({ width: size('l'), height: size('l') });
+    });
+
+    it(`icon should have correct size when Avatar size = 'lg'`, async () => {
+      spectator = createHost(`
+      <kirby-avatar size="lg" overlay="true">
+        <kirby-icon name="qr"></kirby-icon>
+      </kirby-avatar>
+      `);
+
+      const ionIcon = spectator.queryHost<HTMLElement>('ion-icon');
+      await TestHelper.whenReady(ionIcon);
+
+      expect(ionIcon).toHaveComputedStyle({ width: size('xxxl'), height: size('xxxl') });
+    });
+  });
+
+  describe('when rendering Avatar within Progress Circle', () => {
+    it(`should have correct size when Progress Circle size = 'sm'`, async () => {
+      spectator = createHost(`
+      <kirby-progress-circle size="sm">
+        <kirby-avatar>
+          <kirby-icon name="qr"></kirby-icon>
+        </kirby-avatar>
+      </kirby-progress-circle>
+      `);
+
+      const avatar = spectator.queryHost<HTMLElement>('.avatar');
+      const ionIcon = spectator.queryHost<HTMLElement>('ion-icon');
+      await TestHelper.whenReady(ionIcon);
+
+      expect(avatar).toHaveComputedStyle({ width: avatarSize('s'), height: avatarSize('s') });
+      expect(ionIcon).toHaveComputedStyle({ width: size('m'), height: size('m') });
+    });
+
+    it(`should have correct size when Progress Circle size = 'md'`, async () => {
+      spectator = createHost(`
+      <kirby-progress-circle size="md">
+        <kirby-avatar>
+          <kirby-icon name="qr"></kirby-icon>
+        </kirby-avatar>
+      </kirby-progress-circle>
+      `);
+
+      const avatar = spectator.queryHost<HTMLElement>('.avatar');
+      const ionIcon = spectator.queryHost<HTMLElement>('ion-icon');
+      await TestHelper.whenReady(ionIcon);
+
+      expect(avatar).toHaveComputedStyle({ width: avatarSize('m'), height: avatarSize('m') });
+      expect(ionIcon).toHaveComputedStyle({ width: size('l'), height: size('l') });
+    });
+
+    it(`should have correct size when Progress Circle size = 'lg'`, async () => {
+      spectator = createHost(`
+      <kirby-progress-circle size="lg">
+        <kirby-avatar>
+          <kirby-icon name="qr"></kirby-icon>
+        </kirby-avatar>
+      </kirby-progress-circle>
+      `);
+
+      const avatar = spectator.queryHost<HTMLElement>('.avatar');
+      const ionIcon = spectator.queryHost<HTMLElement>('ion-icon');
+      await TestHelper.whenReady(ionIcon);
+
+      expect(avatar).toHaveComputedStyle({ width: avatarSize('l'), height: avatarSize('l') });
+      expect(ionIcon).toHaveComputedStyle({ width: size('xxxl'), height: size('xxxl') });
+    });
+  });
+
+  describe(`when rendering Avatar with themeColor`, () => {
+    const colors = [
+      ...ColorHelper.mainColors,
+      DesignTokenHelper.getColor('white'),
+      DesignTokenHelper.getColor('semi-light'),
+    ];
+    colors.forEach((color) => {
+      it(`should render with correct colors when themeColor = '${color.name}'`, async () => {
+        spectator = createHost(`
+        <kirby-avatar themeColor="${color.name}">
+          <kirby-icon name="qr"></kirby-icon>
+        </kirby-avatar>
+        `);
+
+        const avatar = spectator.queryHost<HTMLElement>('.avatar');
+        expect(avatar).toHaveComputedStyle({
+          'background-color': getColor(color.name as ThemeColorExtended),
+          color: getColor(color.name as ThemeColorExtended, 'contrast'),
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+
+import { BrandColor, NotificationColor } from '@kirbydesign/core';
+
+export enum AvatarSize {
+  XS = 'xs',
+  SM = 'sm',
+  MD = 'md',
+  LG = 'lg',
+}
+
+@Component({
+  selector: 'kirby-avatar',
+  templateUrl: './avatar.component.html',
+  styleUrls: ['./avatar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AvatarComponent {
+  @Input() imageSrc: string;
+  @Input() altText: string;
+  @Input() shadow: boolean;
+  @Input() text: string;
+  @Input() overlay: boolean;
+  @Input() size: AvatarSize | `${AvatarSize}` = AvatarSize.SM;
+  @Input()
+  themeColor: NotificationColor | BrandColor | 'medium' | 'white' | 'dark' | 'light' | 'semi-light';
+
+  @HostBinding('class')
+  get _cssClass() {
+    return [this.themeColor, this.size].filter((cssClass) => !!cssClass);
+  }
+}

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

@@ -0,0 +1,78 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+
+import { customElementsInitializer } from '../../custom-elements-initializer';
+import { BadgeComponent } from '../../index';
+import { TestHelper } from '../../testing/test-helper';
+
+describe('BadgeComponent', () => {
+  let spectator: SpectatorHost<BadgeComponent>;
+  let ionBadge: HTMLIonBadgeElement;
+
+  let createHost = createHostFactory({
+    component: BadgeComponent,
+    imports: [TestHelper.ionicModuleForTest],
+    providers: [customElementsInitializer()],
+  });
+
+  describe('by default', () => {
+    beforeEach(async () => {
+      spectator = createHost('<kirby-badge></kirby-badge>');
+      await TestHelper.whenReady(spectator.element);
+    });
+
+    it('should create', () => {
+      expect(spectator.component).toBeTruthy();
+    });
+
+    it("should have size 'md'", () => {
+      expect(spectator.component.size).toBe('md');
+    });
+
+    it("should have 'md' class ", () => {
+      expect(spectator.element).toHaveClass('md');
+    });
+  });
+
+  describe('when one character is slotted', () => {
+    beforeEach(async () => {
+      spectator = createHost('<kirby-badge></kirby-badge>', { props: { text: 'x' } });
+      await TestHelper.whenReady(spectator.element);
+
+      ionBadge = spectator.element.shadowRoot.querySelector('ion-badge');
+      await TestHelper.whenReady(ionBadge);
+    });
+
+    it('should be rendered with width: 16px', () => {
+      expect(ionBadge).toHaveComputedStyle({ width: '16px' });
+    });
+
+    it('should be rendered with height: 16px', () => {
+      expect(ionBadge).toHaveComputedStyle({ height: '16px' });
+    });
+  });
+
+  describe("when size is 'sm'", () => {
+    beforeEach(async () => {
+      spectator = createHost(`<kirby-badge [size]="'sm'">Slotted Text</kirby-badge>`);
+      await TestHelper.whenReady(spectator.element);
+
+      ionBadge = spectator.element.shadowRoot.querySelector('ion-badge');
+      await TestHelper.whenReady(ionBadge);
+    });
+
+    it("should have the 'sm' class applied", () => {
+      expect(spectator.element).toHaveClass('sm');
+    });
+
+    it('should be rendered with correct dimensions', () => {
+      expect(ionBadge).toHaveComputedStyle({
+        width: '8px',
+        height: '8px',
+      });
+    });
+
+    it('should render without slotted text', () => {
+      expect(spectator.element.innerText).toBe('');
+    });
+  });
+});

package/src/lib/components/button/button.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>