@kirbydesign/designsystem 0.0.0

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

@@ -0,0 +1,177 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import {
+  CardComponent,
+  IconComponent,
+  InfiniteScrollDirective,
+  ItemComponent,
+  ListComponent,
+  ListItemColorDirective,
+  ListItemTemplateDirective,
+  SpinnerComponent,
+} from '..';
+import { TestHelper } from '../../testing/test-helper';
+import { WindowRef } from '../../types/window-ref';
+
+import { ListItemComponent } from './list-item/list-item.component';
+
+const { fontWeight, size } = DesignTokenHelper;
+
+describe('ListComponent', () => {
+  let ionList: HTMLElement;
+  let itemsInList: HTMLElement[];
+
+  let spectator: SpectatorHost<ListComponent>;
+  const createHost = createHostFactory({
+    component: ListComponent,
+    imports: [TestHelper.ionicModuleForTest],
+    providers: [
+      {
+        provide: WindowRef,
+        useValue: <WindowRef>{ nativeWindow: window },
+      },
+    ],
+    declarations: [
+      ItemComponent,
+      SpinnerComponent,
+      IconComponent,
+      CardComponent,
+      InfiniteScrollDirective,
+      ListItemColorDirective,
+      ListItemTemplateDirective,
+      ListItemComponent,
+    ],
+  });
+
+  describe('with kirby-item', () => {
+    let itemTexts: HTMLElement[];
+
+    beforeEach(async () => {
+      spectator = createHost<ListComponent>(
+        `
+        <kirby-list [items]="[{ name: 'Item1' }, { name: 'Item2' }, { name: 'Item3' }]" (itemSelect)="($event)">
+          <kirby-item *kirbyListItemTemplate="let item"><h3>{{ item.name }}</h3></kirby-item>
+        </kirby-list>
+        `
+      );
+      ionList = spectator.queryHost('ion-list');
+      await TestHelper.whenReady(ionList);
+      itemsInList = spectator.queryAll('ion-list ion-item');
+      itemTexts = spectator.queryAll('ion-list ion-item h3');
+    });
+
+    it('should create list wrapper', () => {
+      expect(spectator.component).toBeTruthy();
+    });
+
+    it('should render items in list', () => {
+      expect(itemsInList).not.toBeEmpty();
+      itemsInList.forEach((item) => {
+        expect(item.shadowRoot.hasChildNodes()).toBeTrue();
+      });
+    });
+
+    it('should render first and last item with correct padding', async () => {
+      const firstItem = itemsInList[0].shadowRoot.querySelector('.item-native');
+      const lastItem = itemsInList[itemsInList.length - 1].shadowRoot.querySelector('.item-native');
+      expect(firstItem).toHaveComputedStyle({ 'padding-top': size('xxs') });
+      expect(lastItem).toHaveComputedStyle({ 'padding-bottom': size('xxs') });
+    });
+
+    it('should highlight selected item in bold text', () => {
+      const selectItem = itemsInList[1];
+      spectator.click(selectItem);
+
+      for (let i = 0; i < itemTexts.length; i++) {
+        const fontWeightExpected = itemsInList[i] === selectItem ? 'bold' : 'normal';
+        expect(itemTexts[i]).toHaveComputedStyle({ 'font-weight': fontWeight(fontWeightExpected) });
+      }
+    });
+
+    it('should not highlight selected item in bold text on disableSelectionHighlight', () => {
+      spectator.setInput('disableSelectionHighlight', true);
+      spectator.detectChanges();
+
+      const selectItem = itemsInList[1];
+      spectator.click(selectItem);
+
+      for (let i = 0; i < itemTexts.length; i++) {
+        expect(itemTexts[i]).toHaveComputedStyle({ 'font-weight': fontWeight('normal') });
+      }
+    });
+
+    describe('with hasItemSpacing set to true', () => {
+      it('should apply spacing to all but the last item', () => {
+        spectator.setInput('hasItemSpacing', true);
+        spectator.detectChanges();
+        const kirbyItemsInList = spectator.queryAll('kirby-list-item:not(:last-child)');
+
+        expect(kirbyItemsInList).not.toBeEmpty();
+        kirbyItemsInList.forEach((item) => {
+          expect(item).toHaveComputedStyle({ 'margin-bottom': size('s') });
+        });
+      });
+
+      it('should not apply spacing to the last item', () => {
+        spectator.setInput('hasItemSpacing', true);
+        spectator.detectChanges();
+        const kirbyItemsInList = spectator.queryAll('kirby-list-item:last-child');
+
+        expect(kirbyItemsInList).not.toBeEmpty();
+        kirbyItemsInList.forEach((item) => {
+          expect(item).toHaveComputedStyle({ 'margin-bottom': '0px' });
+        });
+      });
+    });
+
+    describe('with hasItemSpacing set to false', () => {
+      it('should not apply spacing to items', () => {
+        spectator.setInput('hasItemSpacing', false);
+        spectator.detectChanges();
+        const kirbyItemsInList = spectator.queryAll('kirby-list-item');
+
+        expect(kirbyItemsInList).not.toBeEmpty();
+        kirbyItemsInList.forEach((item) => {
+          expect(item).toHaveComputedStyle({ 'margin-bottom': '0px' });
+        });
+      });
+    });
+  });
+
+  describe('with kirby-item inside kirby-card', () => {
+    beforeEach(async () => {
+      spectator = createHost<ListComponent>(
+        `
+        <kirby-list [items]="[{ name: 'Item1' }, { name: 'Item2' }, { name: 'Item3' }]">
+          <kirby-card *kirbyListItemTemplate="let item">
+            <kirby-item>{{ item.name }}</kirby-item>
+          </kirby-card>
+        </kirby-list>
+        `
+      );
+      ionList = spectator.queryHost('ion-list');
+      await TestHelper.whenReady(ionList);
+      itemsInList = spectator.queryAll('ion-list ion-item');
+    });
+
+    it('should create list wrapper', () => {
+      expect(spectator.component).toBeTruthy();
+    });
+
+    it('should render items in list', () => {
+      expect(itemsInList).not.toBeEmpty();
+      itemsInList.forEach((item) => {
+        expect(item.shadowRoot.hasChildNodes()).toBeTrue();
+      });
+    });
+
+    it('should render first and last item without padding top/bottom', async () => {
+      const firstItem = itemsInList[0].shadowRoot.querySelector('.item-native');
+      const lastItem = itemsInList[itemsInList.length - 1].shadowRoot.querySelector('.item-native');
+      expect(firstItem).toHaveComputedStyle({ 'padding-top': '0px' });
+      expect(lastItem).toHaveComputedStyle({ 'padding-bottom': '0px' });
+    });
+  });
+});

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

@@ -0,0 +1,243 @@
+@use 'sass:map';
+@use '~@kirbydesign/core/src/scss/utils';
+@use '../item-sliding/item-sliding.shared.scss';
+
+$divider-color: utils.get-color('background-color');
+$shadow: utils.get-elevation(2);
+$item-height: utils.size('xxxl');
+
+:host {
+  display: block;
+}
+
+.list {
+  box-shadow: $shadow;
+  background: transparent;
+  contain: inherit;
+  padding: 0;
+}
+
+ion-list-header {
+  background-color: utils.get-color('white');
+  border-bottom: 1px solid $divider-color;
+  padding: 0;
+  text-transform: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  min-height: 0;
+  overflow: inherit;
+}
+
+ion-item {
+  --background: #{utils.get-color('white')};
+  --background-activated: #{utils.get-color('white-shade')};
+  --background-hover: #{utils.get-color('background-color')};
+  --background-focused: #{utils.get-color('background-color')};
+  --inner-border-width: 0;
+  --ion-safe-area-right: 0;
+  --min-height: #{$item-height};
+  --padding-bottom: #{utils.size('xxs')};
+  --padding-end: #{utils.size('s')};
+  --padding-start: #{utils.size('s')};
+  --padding-top: #{utils.size('xxs')};
+
+  display: flex;
+  font-size: utils.font-size('s');
+  min-height: $item-height;
+  overflow: visible;
+  width: 100%;
+}
+
+ion-item-sliding {
+  &.item-sliding-active-slide {
+    // backface-visibility and transform, to fix clipping issue on iOS see https://stackoverflow.com/a/16681137 and https://github.com/kirbydesign/designsystem/issues/863
+    backface-visibility: hidden;
+    transform: translate3d(0, 0, 0);
+  }
+
+  $list-colors: ('light'); // add supported list item theme colors here
+  @each $color-name, $color-value in $list-colors {
+    &.#{$color-name} {
+      --kirby-item-background: #{utils.get-color($color-name)};
+      --kirby-item-background-activated: #{utils.get-color($color-name + '-shade')};
+      --kirby-item-background-focused: #{utils.get-color($color-name + '-shade')};
+      --kirby-item-background-hover: #{utils.get-color($color-name + '-tint')};
+
+      ion-item {
+        --background: #{utils.get-color($color-name)};
+        --color: #{utils.get-color($color-name + '-contrast')};
+        --background-activated: #{utils.get-color($color-name + '-shade')};
+        --background-focused: #{utils.get-color($color-name + '-shade')};
+        --background-hover: #{utils.get-color($color-name + '-tint')};
+      }
+    }
+  }
+}
+
+ion-item-group {
+  margin-bottom: utils.size('m');
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+ion-item-divider {
+  --inner-padding-end: 0;
+  --color: unset;
+
+  background-color: transparent;
+  border-color: transparent;
+  min-height: 0;
+  padding: 0 utils.size('s') utils.size('xxs') utils.size('s');
+  font-weight: inherit;
+}
+
+.footer {
+  background-color: utils.get-color('white');
+  border-top: 1px solid $divider-color;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.no-more-items,
+.loading {
+  width: 100%;
+  padding: utils.size('m') 0;
+  text-align: center;
+}
+
+.swipe-action {
+  display: flex;
+  color: #{utils.get-color('black')};
+  background-color: transparent;
+
+  ion-item-option {
+    height: 100%;
+    display: inline-block;
+    text-align: center;
+  }
+
+  .item-content {
+    display: inline-grid;
+    min-width: 70px;
+    flex-direction: column;
+
+    ion-label {
+      --background: unset;
+      --color: unset;
+    }
+  }
+}
+
+ion-item-options[side='end'] {
+  border-bottom-width: 0;
+}
+
+:host-context(.has-sections) {
+  .list {
+    box-shadow: none;
+  }
+
+  .list-items {
+    box-shadow: $shadow;
+    border-radius: utils.$border-radius;
+  }
+
+  .footer {
+    background-color: transparent;
+    border-top: none;
+  }
+
+  ion-list-header {
+    background-color: transparent;
+    border-bottom: none;
+  }
+}
+
+:host-context(.shape-rounded) {
+  .list,
+  .list-items {
+    border-radius: utils.$border-radius;
+  }
+
+  ion-item.first,
+  ion-item-sliding.first,
+  ion-list-header {
+    border-top-left-radius: utils.$border-radius;
+    border-top-right-radius: utils.$border-radius;
+    mask-image: radial-gradient(
+      white,
+      black
+    ); // Solves issues with round borders at iOS in certain scenarios
+  }
+
+  ion-item-sliding > ion-item,
+  &:not(.has-sections) .has-header ion-item,
+  &:not(.has-sections) .has-header ion-item-sliding {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  ion-item.last,
+  ion-item-sliding.last,
+  .footer {
+    border-bottom-left-radius: utils.$border-radius;
+    border-bottom-right-radius: utils.$border-radius;
+    mask-image: radial-gradient(
+      white,
+      black
+    ); // Solves issues with round borders at iOS in certain scenarios
+  }
+
+  ion-item-sliding > ion-item,
+  &:not(.has-sections) .has-footer ion-item,
+  &:not(.has-sections) .has-footer ion-item-sliding {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+:host-context(.shape-none) {
+  .list,
+  .list-items {
+    box-shadow: none;
+    border-radius: unset;
+  }
+
+  .list {
+    ion-item,
+    ion-item-sliding {
+      --padding-start: 0;
+      --padding-end: 0;
+      --padding-top: 0;
+      --padding-bottom: 0;
+      --inner-padding-start: 0;
+      --inner-padding-end: 0;
+      --inner-padding-top: 0;
+      --inner-padding-bottom: 0;
+      --background: none;
+      --background-activated: none;
+      --background-hover: none;
+      --background-focused: none;
+
+      overflow: visible;
+    }
+  }
+}
+
+:host-context(.item-spacing) {
+  .list {
+    kirby-list-item {
+      margin-bottom: utils.size('s');
+
+      & > ion-item,
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,219 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * as ionic from '@ionic/angular';
+import { createComponentFactory, Spectator } from '@ngneat/spectator';
+import { MockComponent } from 'ng-mocks';
+
+import { WindowRef } from '../../types/window-ref';
+import { SpinnerComponent } from '../spinner/spinner.component';
+
+import { InfiniteScrollDirective } from './directives/infinite-scroll.directive';
+import { ListItemColorDirective } from './directives/list-item-color.directive';
+import { ListHelper } from './helpers/list-helper';
+import { ListItemComponent } from './list-item/list-item.component';
+import { ListComponent } from './list.component';
+import { LoadOnDemandEvent } from './list.event';
+import { GroupByPipe } from './pipes/group-by.pipe';
+
+const TEST_ITEMS: any[] = [
+  {
+    id: 0,
+    title: 'Vestas Wind Systems has a very long name',
+    subTitle: '2000 pcs',
+    amount: '5.587.218.309 DKK',
+    detail: 225,
+    color: 'default',
+  },
+  {
+    id: 1,
+    title: 'Cypress Semiconductor Corporation',
+    subTitle: '1827 pcs',
+    amount: '76.980 DKK',
+    detail: -3,
+    color: 'light',
+  },
+  {
+    id: 2,
+    title: 'Ultragenyx Pharmaceutical Inc.',
+    subTitle: '787 pcs',
+    amount: '83.004 DKK',
+    detail: -115,
+    color: 'white',
+  },
+  {
+    id: 3,
+    title: 'Trans World Entertainment Corp.',
+    subTitle: '467 pcs',
+    amount: '60.963 DKK',
+    detail: 6,
+    color: 'light',
+  },
+];
+
+describe('ListComponent', () => {
+  let spectator: Spectator<ListComponent>;
+  let component: ListComponent;
+
+  const createHost = createComponentFactory({
+    component: ListComponent,
+    declarations: [
+      ListComponent,
+      GroupByPipe,
+      SpinnerComponent,
+      InfiniteScrollDirective,
+      ListItemColorDirective,
+      ListItemComponent,
+      MockComponent(ionic.IonList),
+      MockComponent(ionic.IonListHeader),
+      MockComponent(ionic.IonLabel),
+      MockComponent(ionic.IonItem),
+      MockComponent(ionic.IonItemDivider),
+      MockComponent(ionic.IonItemGroup),
+      MockComponent(ionic.IonItemSliding),
+    ],
+    providers: [
+      ListHelper,
+      GroupByPipe,
+      {
+        provide: WindowRef,
+        useValue: <WindowRef>{ nativeWindow: window },
+      },
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  });
+
+  beforeEach(() => {
+    spectator = createHost({});
+    component = spectator.component;
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  describe('items', () => {
+    it('should accept null items without errors', () => {
+      spectator.setInput({
+        items: null,
+      });
+
+      expect(spectator.component.items).toBe(null);
+    });
+  });
+
+  describe('sections', () => {
+    it('should be disabled if no section callback is defined', () => {
+      spectator.setInput({
+        getSectionName: undefined,
+      });
+
+      expect(spectator.component._isSectionsEnabled).toBeFalsy();
+    });
+
+    it('should be enabled if a section callback is defined', () => {
+      spectator.setInput({
+        items: TEST_ITEMS,
+        getSectionName: (_item: any) => 'this is a test',
+      });
+
+      expect(spectator.component._isSectionsEnabled).toBeTruthy();
+    });
+
+    it('should have no groupedItems when last item in items input is removed', () => {
+      spectator.setInput({
+        items: [TEST_ITEMS[0]],
+        getSectionName: (_item: any) => 'this is a test',
+      });
+
+      expect(spectator.component._groupedItems).toHaveLength(1);
+
+      spectator.setInput({ items: [] });
+
+      expect(spectator.component._groupedItems).toHaveLength(0);
+    });
+  });
+
+  describe('divider', () => {
+    it('should set class "has-divider" on list element when showDivider is true', () => {
+      spectator.setInput({
+        items: TEST_ITEMS,
+        showDivider: true,
+      });
+
+      const list = spectator.query('ion-list');
+      expect(list.classList).toContain('has-divider');
+    });
+
+    it('should not set class "has-divider" on list element when showDivider is false', () => {
+      spectator.setInput({
+        items: TEST_ITEMS,
+        showDivider: false,
+      });
+
+      const list = spectator.query('ion-list');
+      expect(list.classList).not.toContain('has-divider');
+    });
+  });
+
+  describe('function: onItemSelect', () => {
+    it('should emit the selected item and mark it as selected', () => {
+      spyOn(component.itemSelect, 'emit');
+      const itemToBeSelected = { value: 'this is a dummy item' };
+      component.items = [itemToBeSelected];
+
+      component.onItemSelect(itemToBeSelected);
+
+      expect(component.itemSelect.emit).toHaveBeenCalledTimes(1);
+      expect(component.itemSelect.emit).toHaveBeenCalledWith(itemToBeSelected);
+    });
+  });
+
+  describe('function: ngOnInit', () => {
+    describe('when there is a subscriber to the loadMore event', () => {
+      beforeEach(() => {
+        component.loadOnDemand.subscribe((_: LoadOnDemandEvent) => {});
+      });
+
+      it('should enable load more, if isLoadOnDemandEnabled is not set', () => {
+        component.isLoadOnDemandEnabled = undefined;
+
+        component.ngOnInit();
+
+        expect(component.isLoadOnDemandEnabled).toBeTrue();
+      });
+
+      it('should enable load more, if isLoadOnDemandEnabled is set to true', () => {
+        component.isLoadOnDemandEnabled = undefined;
+
+        component.ngOnInit();
+
+        expect(component.isLoadOnDemandEnabled).toBeTrue();
+      });
+
+      it('should disable load more, if isLoadOnDemandEnabled is set to false', () => {
+        component.isLoadOnDemandEnabled = false;
+
+        component.ngOnInit();
+
+        expect(component.isLoadOnDemandEnabled).toBeFalse();
+      });
+    });
+
+    describe('when there is no subscriber to the loadMore event', () => {
+      it('should disable load more, if isLoadOnDemandEnabled is not set', () => {
+        component.isLoadOnDemandEnabled = undefined;
+
+        component.ngOnInit();
+
+        expect(component.isLoadOnDemandEnabled).toBeFalse();
+      });
+
+      it('should disable load more, if isLoadOnDemandEnabled is set to false', () => {
+        component.isLoadOnDemandEnabled = false;
+
+        component.ngOnInit();
+
+        expect(component.isLoadOnDemandEnabled).toBeFalse();
+      });
+    });
+  });
+});