@kirbydesign/designsystem 0.0.0

package/src/lib/components/chip/chip.component.integration.spec.ts

@@ -0,0 +1,111 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { BadgeComponent } from '../../index';
+import { TestHelper } from '../../testing/test-helper';
+import { ChipComponent } from '../chip/chip.component';
+import { SegmentItem } from '../segmented-control/segment-item';
+import {
+  SegmentedControlComponent,
+  SegmentedControlMode,
+} from '../segmented-control/segmented-control.component';
+
+const getColor = DesignTokenHelper.getColor;
+
+describe('ChipComponent in SegmentedControlComponent', () => {
+  let spectator: SpectatorHost<SegmentedControlComponent>;
+  let items: SegmentItem[] = [
+    {
+      text: 'Chip-1',
+      id: '1',
+    },
+  ];
+
+  const createHost = createHostFactory({
+    component: SegmentedControlComponent,
+    declarations: [ChipComponent, BadgeComponent],
+    imports: [TestHelper.ionicModuleForTest],
+  });
+
+  describe("when mode is 'compactChip'", () => {
+    let chip: HTMLElement;
+
+    beforeEach(() => {
+      spectator = createHost(
+        `<kirby-segmented-control [mode]="mode" [items]="items" selectedIndex="1">
+         </kirby-segmented-control>`,
+        {
+          hostProps: {
+            items: items,
+            mode: SegmentedControlMode.compactChip,
+          },
+        }
+      );
+      chip = spectator.queryHost('kirby-chip');
+    });
+
+    it('should render with correct inline margin', () => {
+      expect(chip).toHaveComputedStyle({
+        'margin-inline-start': DesignTokenHelper.size('xxxxs'),
+        'margin-inline-end': DesignTokenHelper.size('xxxxs'),
+      });
+    });
+
+    it('should render with correct padding', () => {
+      expect(chip).toHaveComputedStyle({
+        'padding-left': '13px',
+        'padding-right': '13px',
+      });
+    });
+
+    it('should render with correct minimum width', () => {
+      expect(chip).toHaveComputedStyle({
+        'min-width': '44px',
+      });
+    });
+
+    it('should not shrink', () => {
+      expect(chip).toHaveComputedStyle({
+        'flex-shrink': '0',
+      });
+    });
+
+    it('should render with correct colors', () => {
+      expect(chip).toHaveComputedStyle({
+        'background-color': 'transparent',
+        color: getColor('black'),
+      });
+    });
+
+    describe('and the chip is selected', () => {
+      beforeEach(() => {
+        spectator.setInput('selectedIndex', 0);
+      });
+
+      it('should render with correct colors', () => {
+        expect(chip).toHaveComputedStyle({
+          'background-color': getColor('black'),
+          color: getColor('white'),
+        });
+      });
+    });
+
+    describe('and the screen size is <=320px', () => {
+      beforeEach(() => {
+        TestHelper.resizeTestWindow(TestHelper.screensize.phonesmall);
+      });
+
+      afterEach(() => {
+        TestHelper.resetTestWindow();
+      });
+
+      it('should render with no inline margin', () => {
+        expect(chip).toHaveComputedStyle({
+          'margin-inline-start': '0px',
+          'margin-inline-end': '0px',
+        });
+      });
+    });
+  });
+});

package/src/lib/components/chip/chip.component.scss

@@ -0,0 +1,49 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+@mixin selected-and-hover($background-color) {
+  &.is-selected {
+    @include utils.theme-background($background-color);
+  }
+
+  @include utils.hover {
+    @include utils.theme-background($background-color);
+  }
+}
+
+:host {
+  @include utils.theme-background('white');
+  @include selected-and-hover('black');
+  @include utils.accessible-target-size;
+
+  white-space: nowrap;
+  padding: 0 var(--inline-padding, utils.size('s'));
+  height: utils.size('l');
+  font-size: utils.font-size('xs');
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  border-radius: utils.$border-radius-round;
+  margin: utils.size('xxxs') var(--inline-margin, utils.size('xxxs'));
+  cursor: pointer;
+  user-select: none;
+
+  :host-context(.kirby-color-brightness-dark) {
+    @include utils.theme-background(transparent, 'white');
+    @include selected-and-hover('white');
+  }
+
+  :host-context(kirby-segmented-control.compact) {
+    min-width: 44px;
+    flex-shrink: 0;
+    justify-content: center;
+
+    --inline-margin: #{utils.size('xxxxs')};
+    --inline-padding: #{13px};
+    @include utils.theme-background(transparent);
+    @include selected-and-hover('black');
+
+    @include utils.media('<=small') {
+      --inline-margin: 0;
+    }
+  }
+}

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

@@ -0,0 +1,84 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { ChipComponent } from './chip.component';
+
+const { getColor, fatFingerSize } = DesignTokenHelper;
+
+describe('ChipComponent', () => {
+  let spectator: SpectatorHost<ChipComponent>;
+
+  const createHost = createHostFactory({
+    component: ChipComponent,
+  });
+
+  beforeEach(() => {
+    spectator = createHost(`<kirby-chip></kirby-chip>`, {
+      props: { text: 'Test' },
+    });
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  it('should have the configured text', () => {
+    const expectedText = 'Test';
+    expect(spectator.component.text).toEqual(expectedText);
+    expect(spectator.element).toHaveText(expectedText, true);
+  });
+
+  it('should not be selected', () => {
+    expect(spectator.component.isSelected).toBeFalsy();
+  });
+
+  it('should render with correct theme-color', () => {
+    expect(spectator.element).toHaveComputedStyle({
+      'background-color': getColor('white'),
+      color: getColor('white', 'contrast'),
+    });
+  });
+
+  it('should have touch area with minimum size equal to fat finger size', () => {
+    const touchArea = window.getComputedStyle(spectator.element, '::after');
+
+    expect(parseInt(touchArea.height)).toBeGreaterThanOrEqual(parseInt(fatFingerSize()));
+    expect(parseInt(touchArea.width)).toBeGreaterThanOrEqual(parseInt(fatFingerSize()));
+  });
+
+  describe('when selected', () => {
+    it('should render with correct theme-color', () => {
+      spectator.setInput('isSelected', true);
+      spectator.detectChanges();
+      expect(spectator.element).toHaveComputedStyle({
+        'background-color': getColor('black'),
+        color: getColor('black', 'contrast'),
+      });
+    });
+  });
+
+  describe('inside host with .kirby-color-brightness-dark class', () => {
+    beforeEach(() => {
+      spectator.hostElement.className = 'kirby-color-brightness-dark';
+    });
+
+    it('should render with correct theme-color', () => {
+      expect(spectator.element).toHaveComputedStyle({
+        'background-color': 'transparent',
+        color: getColor('white'),
+      });
+    });
+
+    describe('when selected', () => {
+      it('should render with correct theme-color', () => {
+        spectator.setInput('isSelected', true);
+        spectator.detectChanges();
+        expect(spectator.element).toHaveComputedStyle({
+          'background-color': getColor('white'),
+          color: getColor('white', 'contrast'),
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+
+@Component({
+  selector: 'kirby-chip',
+  templateUrl: './chip.component.html',
+  styleUrls: ['./chip.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChipComponent {
+  @Input() text: string;
+
+  @Input()
+  @HostBinding('attr.aria-selected')
+  @HostBinding('class.is-selected')
+  isSelected: boolean;
+}

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

@@ -0,0 +1 @@
+<hr [class.no-margin]="!hasMargin" />

package/src/lib/components/divider/divider.component.scss

@@ -0,0 +1,22 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host-context(kirby-card),
+:host-context(.kirby-color-brightness-white) {
+  --kirby-divider-color: #{utils.get-color('background-color')};
+}
+
+:host-context(.kirby-color-brightness-light) {
+  --kirby-divider-color: #{utils.get-color('medium')};
+}
+
+hr {
+  margin-top: utils.size('xxs');
+  margin-bottom: utils.size('xxs');
+  border: 0;
+  border-top: 1px solid var(--kirby-divider-color, utils.get-color('medium'));
+
+  &.no-margin {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}

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

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { DividerComponent } from './divider.component';
+
+describe('DividerComponent', () => {
+  let component: DividerComponent;
+  let fixture: ComponentFixture<DividerComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [DividerComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DividerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'kirby-divider',
+  templateUrl: './divider.component.html',
+  styleUrls: ['./divider.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DividerComponent {
+  @Input()
+  hasMargin: boolean;
+}

package/src/lib/components/dropdown/dropdown-popover.component.integration.spec.ts

@@ -0,0 +1,177 @@
+/* 
+  This file has been created to contain unit tests for the new dropdown utilizing popover 
+  instead of mixing them in with the ones for the old version. Having an additional file with 
+  almost identic tests should make it easier to remove the ones for the old version when we have 
+  to deprecate it. 
+*/
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { fakeAsync, tick } from '@angular/core/testing';
+import { IonItem } from '@ionic/angular';
+import { createHostFactory, Spectator } from '@ngneat/spectator';
+import { MockComponents } from 'ng-mocks';
+
+import { ButtonComponent, CardComponent, IconComponent, ItemComponent } from '..';
+import { PopoverComponent } from '../popover/popover.component';
+
+import { DropdownComponent } from './dropdown.component';
+
+@Component({
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class OnPushHostComponent {}
+
+describe('DropdownComponent + PopoverComponent', () => {
+  const items = [
+    { text: 'Item 1', value: 1 },
+    { text: 'Item 2', value: 2 },
+    { text: 'Item 3', value: 3 },
+    { text: 'Item 4', value: 4 },
+    { text: 'Item 5', value: 5 },
+  ];
+  const openDelayInMs = DropdownComponent.OPEN_DELAY_IN_MS;
+
+  let spectator: Spectator<DropdownComponent>;
+  let buttonElement: HTMLButtonElement;
+  let cardElement: HTMLElement;
+
+  afterEach(() => {
+    spectator.query('kirby-popover').remove();
+  });
+
+  describe('with default change detection strategy', () => {
+    const createHost = createHostFactory({
+      component: DropdownComponent,
+      declarations: [
+        ItemComponent,
+        MockComponents(ButtonComponent, IconComponent, IonItem),
+        PopoverComponent,
+        CardComponent,
+      ],
+    });
+
+    describe('when configured with popout direction', () => {
+      beforeEach(() => {
+        spectator = createHost(
+          `<kirby-dropdown [usePopover]="true" popout="right"></kirby-dropdown>`,
+          {
+            props: {
+              items: items,
+            },
+          }
+        );
+        buttonElement = spectator.query('button[kirby-button]');
+      });
+
+      it('should open card to the right when popout=right', fakeAsync(() => {
+        spectator.component.open();
+        tick(openDelayInMs);
+
+        const buttonRect = buttonElement.getBoundingClientRect();
+        const card = spectator.query('kirby-card');
+        const cardRect = card.getBoundingClientRect();
+
+        expect(cardRect.left).toEqual(buttonRect.left);
+      }));
+    });
+
+    describe('when configured with expand=block', () => {
+      beforeEach(() => {
+        spectator = createHost(
+          `<kirby-dropdown [usePopover]="true" expand="block"></kirby-dropdown>`,
+          {
+            props: {
+              items: items,
+            },
+          }
+        );
+        buttonElement = spectator.query('button[kirby-button]');
+      });
+
+      it('should render button with full width', () => {
+        const componentWidth = spectator.element.clientWidth;
+        const buttonWidth = buttonElement.getBoundingClientRect().width;
+        expect(buttonWidth).toEqual(componentWidth);
+      });
+
+      it('should render dropdown with full width', fakeAsync(() => {
+        spectator.component.ngAfterViewInit();
+
+        spectator.component.open();
+        tick(openDelayInMs);
+
+        const card = spectator.query('kirby-card');
+        const componentWidth = spectator.element.clientWidth;
+        const cardWidth = card.getBoundingClientRect().width;
+        expect(cardWidth).toEqual(componentWidth);
+        expect(card).toHaveComputedStyle({
+          'min-width': '0px',
+          'max-width': 'none',
+        });
+      }));
+    });
+
+    describe('when aligned to right side of viewport', () => {
+      beforeEach(() => {
+        spectator = createHost(`<kirby-dropdown [usePopover]="true"></kirby-dropdown>`, {
+          props: {
+            items: items,
+          },
+        });
+        spectator.element.style.cssFloat = 'right';
+        buttonElement = spectator.query('button[kirby-button]');
+      });
+
+      it('should align the dropdown to the right side of button and component container ', fakeAsync(() => {
+        spectator.component.open();
+        spectator.detectChanges();
+        tick(openDelayInMs);
+        spectator.detectChanges();
+
+        const card = spectator.query('kirby-card');
+        const cardClientRect = card.getClientRects()[0];
+        const buttonClientRect = buttonElement.getClientRects()[0];
+        expect(cardClientRect.right).toEqual(buttonClientRect.right);
+      }));
+    });
+  });
+
+  describe("with 'OnPush' change detection strategy", () => {
+    const createOnPushHost = createHostFactory({
+      component: DropdownComponent,
+      declarations: [
+        PopoverComponent,
+        MockComponents(ButtonComponent, CardComponent, ItemComponent, IconComponent),
+      ],
+      host: OnPushHostComponent,
+    });
+
+    beforeEach(fakeAsync(() => {
+      spectator = createOnPushHost(`<kirby-dropdown [usePopover]="true"></kirby-dropdown>`, {
+        props: {
+          items: items,
+        },
+      });
+      cardElement = spectator.query('kirby-card');
+
+      // Assert that card is initially hidden:
+      expect(cardElement).toBeHidden();
+
+      spectator.click('button');
+      tick(openDelayInMs);
+      spectator.detectChanges();
+    }));
+
+    it('should open dropdown', () => {
+      expect(spectator.component.isOpen).toBeTruthy();
+    });
+
+    it(`should have '.is-open' css class`, () => {
+      expect(spectator.element).toHaveClass('is-open');
+    });
+
+    it('should have options be visible', () => {
+      expect(cardElement).toBeVisible();
+    });
+  });
+});