@kirbydesign/designsystem 0.0.0

package/src/lib/components/card/card-header/card-header.component.scss

@@ -0,0 +1,63 @@
+@use 'sass:map';
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host {
+  display: block;
+  border-top-left-radius: utils.$border-radius;
+  border-top-right-radius: utils.$border-radius;
+  text-align: center;
+  padding: var(--kirby-internal-card-header-padding, utils.size('s'));
+  color: var(--kirby-card-header-color);
+  background-color: var(--kirby-card-header-background-color);
+}
+
+h2 {
+  font-size: utils.font-size('n');
+  font-weight: utils.font-weight('normal');
+  margin: 0 0 var(--kirby-internal-card-header-margin-bottom, utils.size('xxs'));
+  line-height: var(--kirby-internal-card-header-line-height, utils.line-height('l'));
+
+  &.bold {
+    font-weight: utils.font-weight('bold');
+  }
+}
+
+h4 {
+  font-size: utils.font-size('s');
+  margin: 0;
+  font-weight: utils.font-weight('normal');
+}
+
+// Flagged card headers
+
+// key = level, value = color-name
+$notification-levels: (
+  'info': 'semi-light',
+);
+
+@each $color-name, $color-value in utils.$notification-colors {
+  $notification-levels: map.merge(
+    (
+      $color-name: $color-name,
+    ),
+    $notification-levels
+  );
+}
+
+@each $level, $color-name in $notification-levels {
+  :host(.#{$level}) {
+    --kirby-card-header-background-color: #{utils.get-color($color-name)};
+    --kirby-card-header-color: #{utils.get-color($color-name + '-contrast')};
+  }
+}
+
+$notification-levels-class-selectors: utils.keys-to-classes($notification-levels);
+
+:host(#{$notification-levels-class-selectors}) {
+  --kirby-internal-card-header-padding: #{utils.size('xxxxs')} #{utils.size('xxs')};
+
+  h2 {
+    --kirby-internal-card-header-line-height: #{utils.line-height('n')};
+    --kirby-internal-card-header-margin-bottom: 0px;
+  }
+}

package/src/lib/components/card/card-header/card-header.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+
+import { NotificationColor } from '@kirbydesign/core';
+
+export type CardFlagLevel = NotificationColor | 'info' | null;
+
+@Component({
+  selector: 'kirby-card-header',
+  templateUrl: './card-header.component.html',
+  styleUrls: ['./card-header.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CardHeaderComponent {
+  @Input() title: string;
+  @Input() subtitle: string;
+  @Input() isTitleBold: boolean;
+  @HostBinding('class')
+  @Input()
+  flagged: CardFlagLevel = null;
+}

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

@@ -0,0 +1,5 @@
+<ng-content select="kirby-card-header"></ng-content>
+<div class="content-wrapper" [class.padding]="hasPadding">
+  <ng-content></ng-content>
+</div>
+<ng-content select="kirby-card-footer"></ng-content>

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

@@ -0,0 +1,56 @@
+@use '~@kirbydesign/core/src/scss/utils';
+
+:host {
+  --kirby-card-main-background-color: #{utils.get-color('white')};
+  --kirby-card-main-color: #{utils.get-color('white-contrast')};
+  --kirby-card-footer-background-color: #{utils.get-color('white')};
+  --kirby-card-footer-color: #{utils.get-color('white-contrast')};
+
+  border-radius: utils.$border-radius;
+  box-shadow: utils.get-elevation(2);
+  color: var(--kirby-card-main-color);
+  background-color: var(--kirby-card-main-background-color);
+  background-image: var(--kirby-card-background-image);
+  background-repeat: var(--kirby-card-background-repeat, no-repeat);
+  background-position: var(--kirby-card-background-position, center);
+  background-size: var(--kirby-card-background-size, cover);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+  position: relative;
+  z-index: utils.z('default');
+  width: var(--kirby-card-width, auto);
+
+  .content-wrapper {
+    &.padding {
+      padding: utils.size('s');
+    }
+  }
+
+  &.highlighted {
+    box-shadow: utils.get-elevation(4);
+  }
+
+  &.flat {
+    box-shadow: none;
+  }
+
+  &[role='button'] {
+    cursor: pointer;
+    outline-offset: utils.size('xxxxs');
+  }
+}
+
+:host-context(.swiper-slide-active) {
+  box-shadow: utils.get-elevation(4);
+  transition: all 0.5s;
+  transform: translateY(-3px);
+}
+
+@each $color-name, $color-value in utils.$main-colors {
+  :host(.#{$color-name}) {
+    --kirby-card-main-background-color: #{utils.get-color($color-name)};
+    --kirby-card-main-color: #{utils.get-color($color-name + '-contrast')};
+  }
+}

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

@@ -0,0 +1,81 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+
+import { TestHelper } from '../../testing/test-helper';
+
+import { CardComponent } from './card.component';
+
+describe('CardComponent', () => {
+  let spectator: SpectatorHost<CardComponent>;
+
+  const createHost = createHostFactory({
+    component: CardComponent,
+    imports: [TestHelper.ionicModuleForTest],
+  });
+
+  describe('by default', () => {
+    beforeEach(() => {
+      spectator = createHost('<kirby-card></kirby-card>');
+    });
+
+    it('should create', () => {
+      expect(spectator.component).toBeTruthy();
+    });
+  });
+
+  describe("with 'backgroundImageUrl' set", () => {
+    const testUrl = 'https://notarealurl/';
+    let cardElement: HTMLElement;
+
+    beforeEach(() => {
+      spectator = createHost(`<kirby-card backgroundImageUrl='${testUrl}'></kirby-card>`);
+      cardElement = spectator.queryHost('kirby-card');
+    });
+
+    it("should use the url for the 'background-image' property", () => {
+      expect(cardElement).toHaveComputedStyle({
+        'background-image': `url("${testUrl}")`,
+      });
+    });
+
+    it('should have correct defaults for properties related to background', () => {
+      expect(cardElement).toHaveComputedStyle({
+        'background-repeat': 'no-repeat',
+        'background-position': '50% 50%',
+        'background-size': 'cover',
+      });
+    });
+  });
+
+  describe('with mode attribute', () => {
+    beforeEach(() => {
+      spectator = createHost('<kirby-card mode="flat"></kirby-card>');
+    });
+
+    it('should create', () => {
+      expect(spectator.component).toBeTruthy();
+    });
+  });
+
+  describe('with mode attribute and nested Ionic component', () => {
+    beforeEach(() => {
+      spectator = createHost(
+        `<kirby-card mode="flat">
+           <ion-badge>Test</ion-badge>
+         </kirby-card>`
+      );
+    });
+
+    it('should create', () => {
+      expect(spectator.component).toBeTruthy();
+    });
+
+    it('should create nested Ionic component with default Ionic mode', async () => {
+      const document = spectator.query<HTMLElement>('html', { root: true });
+      const ionicGlobalMode = document.getAttribute('mode');
+      const ionBadgeElement = spectator.query<HTMLElement>('ion-badge');
+      expect(ionBadgeElement).toBeTruthy();
+      await TestHelper.whenReady(ionBadgeElement);
+      expect(ionBadgeElement).toHaveClass('hydrated', ionicGlobalMode);
+    });
+  });
+});

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

@@ -0,0 +1,95 @@
+import {
+  Component,
+  ElementRef,
+  HostBinding,
+  Input,
+  OnDestroy,
+  OnInit,
+  Renderer2,
+} from '@angular/core';
+
+import { ResizeObserverService } from '../shared/resize-observer/resize-observer.service';
+import { ResizeObserverEntry } from '../shared/resize-observer/types/resize-observer-entry';
+
+@Component({
+  selector: 'kirby-card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.scss'],
+})
+export class CardComponent implements OnInit, OnDestroy {
+  @Input() title: string;
+  @Input() subtitle: string;
+
+  @HostBinding('style.--kirby-card-background-image')
+  _backgroundImage: string;
+
+  @Input()
+  set backgroundImageUrl(value: string) {
+    this._backgroundImage = `url('${value}')`;
+  }
+
+  @Input()
+  hasPadding: boolean;
+
+  private sizesSortedByBreakpoint = this.sortSizesByBreakpoint({
+    small: 360,
+    medium: 720,
+    large: 1024,
+  });
+
+  @Input()
+  set sizes(value: { [size: string]: number }) {
+    if (typeof value === 'string') {
+      console.error(
+        'Sizes property cannot be a string. Please ensure the size property is bound as an expression:\n[sizes]="{...}"'
+      );
+    }
+    this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);
+  }
+
+  @HostBinding('class.flat')
+  flat: boolean = false;
+  @HostBinding('class.highlighted')
+  highlighted: boolean = false;
+  @Input() set mode(value: 'flat' | 'highlighted') {
+    this.flat = value === 'flat';
+    this.highlighted = value === 'highlighted';
+  }
+
+  constructor(
+    private elementRef: ElementRef,
+    private resizeObserverService: ResizeObserverService,
+    private renderer: Renderer2
+  ) {}
+
+  ngOnInit() {
+    this.resizeObserverService.observe(this.elementRef, (entry) => this.handleResize(entry));
+  }
+
+  ngOnDestroy() {
+    this.resizeObserverService.unobserve(this.elementRef);
+  }
+
+  private sortSizesByBreakpoint(sizes: { [size: string]: number }): [string, number][] {
+    return Object.entries(sizes).sort(this.compareSizesByBreakpoint);
+  }
+
+  private compareSizesByBreakpoint(a: [string, number], b: [string, number]): number {
+    return a[1] > b[1] ? 1 : b[1] > a[1] ? -1 : 0;
+  }
+
+  private handleResize(entry: ResizeObserverEntry) {
+    const sizeAttributeName = 'size';
+    const smallestBreakpointName = this.sizesSortedByBreakpoint[0][0];
+    const smallestBreakpointWidth = this.sizesSortedByBreakpoint[0][1];
+    if (entry.contentRect.width < smallestBreakpointWidth) {
+      this.renderer.setAttribute(entry.target, sizeAttributeName, `<${smallestBreakpointName}`);
+    } else {
+      this.sizesSortedByBreakpoint.forEach(([size, width]) => {
+        if (entry.contentRect.width >= width) {
+          this.renderer.setAttribute(entry.target, sizeAttributeName, size);
+        }
+      });
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+export { CardComponent } from './card.component';
+export { CardFooterComponent } from './card-footer/card-footer.component';
+export { CardFlagLevel, CardHeaderComponent } from './card-header/card-header.component';

package/src/lib/components/chart/chart-js/chart-js.service.integration.spec.ts

@@ -0,0 +1,320 @@
+import { ElementRef } from '@angular/core';
+import { createServiceFactory, SpectatorService } from '@ngneat/spectator';
+import { Chart, FontSpec } from 'chart.js';
+
+import { ColorHelper } from '../../../helpers';
+import { ChartConfigService } from '../configs/chart-config.service';
+
+import { ChartJSService } from './chart-js.service';
+
+describe('ChartJSService with ChartConfigService', () => {
+  let spectator: SpectatorService<ChartJSService>;
+  let chartJSService: ChartJSService;
+  let canvasElement: ElementRef<HTMLCanvasElement>;
+
+  const createService = createServiceFactory({
+    service: ChartJSService,
+    providers: [ChartConfigService],
+  });
+
+  beforeEach(() => {
+    spectator = createService();
+    const nativeElement = document.createElement('canvas');
+
+    chartJSService = spectator.service;
+    canvasElement = new ElementRef<HTMLCanvasElement>(nativeElement);
+  });
+
+  describe('function: renderChart', () => {
+    describe('when type is "column"', () => {
+      let chart: Chart;
+      it('should use correct ChartJS type', () => {
+        chartJSService.renderChart({
+          targetElement: canvasElement,
+          type: 'column',
+          data: [1, 2, 3],
+        });
+        const chart = chartJSService['chart'];
+
+        /* Our 'column' chart is a chart.js 'bar' type chart 
+        with it's indexAxis set to y; therefore testing if 
+        bar is being used. */
+        expect(chart.config.type).toBe('bar');
+      });
+
+      describe('and no custom options are passed', () => {
+        beforeEach(() => {
+          chartJSService.renderChart({
+            targetElement: canvasElement,
+            type: 'column',
+            data: [1, 2, 3],
+            labels: ['one', 'two', 'three'],
+          });
+          chart = chartJSService['chart'];
+        });
+
+        it('should draw without an axis line', () => {
+          expect(chart.options.scales['x'].grid.drawBorder).toBeFalse();
+        });
+
+        it('should have correct barPercentage', () => {
+          expect(chart.options.datasets.bar.barPercentage).toBe(0.6);
+        });
+
+        it('should have correct background color for elements', () => {
+          expect(chart.options.elements.bar.backgroundColor).toEqual(
+            ColorHelper.getThemeColorHexString('secondary')
+          );
+        });
+
+        it('should be rendered with correct typography for data labels', () => {
+          const { size } = chart.options.scales['x'].ticks.font as FontSpec;
+          const { color } = chart.options;
+          expect(size).toBe(12);
+          expect(color).toBe(ColorHelper.getThemeColorHexString('black'));
+        });
+
+        it('should have no hover background color for elements', () => {
+          expect(chart.options.elements.bar.hoverBackgroundColor).toBeUndefined();
+        });
+
+        it('should have no grid', () => {
+          expect(chart.options.scales.linear.display).toBeFalse();
+          expect(chart.options.scales.linear.ticks.display).toBeFalse();
+          expect(chart.options.scales.category.grid.display).toBeFalse();
+        });
+
+        it('should have no legend', () => {
+          expect(chart.options.plugins.legend.display).toBeFalse();
+        });
+      });
+
+      describe('and onClick is set via custom options', () => {
+        beforeEach(() => {
+          chartJSService.renderChart({
+            targetElement: canvasElement,
+            type: 'column',
+            data: [1, 2, 3],
+            labels: ['one', 'two', 'three'],
+            customOptions: {
+              onClick: () => console.log('testing'),
+            },
+          });
+          chart = chartJSService['chart'];
+        });
+
+        it('should have correct hover background color', () => {
+          expect(chart.options.elements.bar.hoverBackgroundColor).toBe('#00e89a');
+        });
+      });
+    });
+
+    describe('when type is "line"', () => {
+      it('should use correct ChartJS type', () => {
+        chartJSService.renderChart({
+          targetElement: canvasElement,
+          type: 'line',
+          data: [1, 2, 3],
+        });
+        const chart = chartJSService['chart'];
+
+        expect(chart.config.type).toBe('line');
+      });
+
+      describe('and no custom options are passed', () => {
+        let chart: Chart;
+
+        beforeEach(() => {
+          chartJSService.renderChart({
+            targetElement: canvasElement,
+            type: 'line',
+            data: [1, 2, 3],
+            labels: ['one', 'two', 'three'],
+          });
+          chart = chartJSService['chart'];
+        });
+
+        it('should hide point elements', () => {
+          expect(chart.options.elements.point.radius).toBe(0);
+        });
+
+        it('should have correct tension', () => {
+          expect(chart.options.elements.line.tension).toBe(0.3);
+        });
+
+        it('should draw the line with correct color', () => {
+          expect(chart.options.elements.line.borderColor).toBe(
+            ColorHelper.getThemeColorHexString('secondary')
+          );
+        });
+
+        it('should not display the y-axis', () => {
+          expect(chart.options.scales['y'].display).toBeFalse();
+        });
+
+        it('should have no grid', () => {
+          expect(chart.options.scales.linear.display).toBeFalse();
+          expect(chart.options.scales.linear.ticks.display).toBeFalse();
+          expect(chart.options.scales.category.grid.display).toBeFalse();
+        });
+
+        it('should have no legend', () => {
+          expect(chart.options.plugins.legend.display).toBeFalse();
+        });
+
+        it('should have no hover color for line', () => {
+          expect(chart.options.elements.line.hoverBackgroundColor).toBeUndefined();
+        });
+
+        it('should be rendered with correct typography for data labels', () => {
+          const { size } = chart.options.scales['x'].ticks.font as FontSpec;
+          const { color } = chart.options;
+          expect(size).toBe(12);
+          expect(color).toBe(ColorHelper.getThemeColorHexString('black'));
+        });
+
+        it('should be rendered with correctly styled x-axis line', () => {
+          expect(chart.options.scales.x.grid.borderColor).toBe(
+            ColorHelper.getThemeColorHexString('medium')
+          );
+          expect(chart.options.scales.x.grid.borderWidth).toBe(1);
+        });
+
+        it('should render line elements with correct width', () => {
+          expect(chart.options.elements.line.borderWidth).toBe(2);
+        });
+      });
+    });
+
+    describe('when type is "bar"', () => {
+      let chart: Chart;
+
+      it('should use correct ChartJS type', () => {
+        chartJSService.renderChart({
+          targetElement: canvasElement,
+          type: 'bar',
+          data: [1, 2, 3],
+        });
+        const chart = chartJSService['chart'];
+
+        expect(chart.config.type).toBe('bar');
+      });
+
+      describe('and no custom options are passed', () => {
+        beforeEach(() => {
+          chartJSService.renderChart({
+            targetElement: canvasElement,
+            type: 'bar',
+            data: [1, 2, 3],
+            labels: ['one', 'two', 'three'],
+          });
+          chart = chartJSService['chart'];
+        });
+
+        it('should draw without an axis line', () => {
+          expect(chart.options.scales['y'].grid.drawBorder).toBeFalse();
+        });
+
+        it('should have correct background color for elements', () => {
+          expect(chart.options.elements.bar.backgroundColor).toEqual(
+            ColorHelper.getThemeColorHexString('secondary')
+          );
+        });
+
+        it('should be rendered with correct typography for data labels', () => {
+          const { size } = chart.options.scales['y'].ticks.font as FontSpec;
+          const { color } = chart.options;
+          expect(size).toBe(14);
+          expect(color).toBe(ColorHelper.getThemeColorHexString('black'));
+        });
+
+        it('should have correct barPercentage', () => {
+          expect(chart.options.datasets.bar.barPercentage).toBe(0.6);
+        });
+
+        it('should have no hover background color for elements', () => {
+          expect(chart.options.elements.bar.hoverBackgroundColor).toBeUndefined();
+        });
+
+        it('should have no grid', () => {
+          expect(chart.options.scales.linear.display).toBeFalse();
+          expect(chart.options.scales.linear.ticks.display).toBeFalse();
+          expect(chart.options.scales.category.grid.display).toBeFalse();
+        });
+
+        it('should have no legend', () => {
+          expect(chart.options.plugins.legend.display).toBeFalse();
+        });
+      });
+
+      describe('and onClick is set via custom options', () => {
+        beforeEach(() => {
+          chartJSService.renderChart({
+            targetElement: canvasElement,
+            type: 'bar',
+            data: [1, 2, 3],
+            labels: ['one', 'two', 'three'],
+            customOptions: {
+              onClick: () => console.log('testing'),
+            },
+          });
+          chart = chartJSService['chart'];
+        });
+
+        it('should have correct hover background color', () => {
+          expect(chart.options.elements.bar.hoverBackgroundColor).toBe('#00e89a');
+        });
+      });
+    });
+
+    describe('when type is "stock"', () => {
+      let chart: Chart;
+
+      beforeEach(() => {
+        chartJSService.renderChart({
+          targetElement: canvasElement,
+          type: 'stock',
+          data: [
+            {
+              data: [
+                { x: 10, y: 5 },
+                { x: 11, y: 6 },
+              ],
+            },
+          ],
+          dataLabelOptions: {
+            locale: 'da-DK',
+            valueSuffix: '%',
+            showMin: true,
+          },
+        });
+        chart = chartJSService['chart'];
+      });
+
+      it('should use correct ChartJS type', () => {
+        expect(chart.config.type).toBe('line');
+      });
+
+      it('should have correct tension', () => {
+        expect(chart.options.elements.line.tension).toBe(0);
+      });
+
+      it('should have datalabels configuration', () => {
+        expect(chart.options.plugins.datalabels).toBeTruthy();
+      });
+
+      describe('when ChartDataLabelOptions is passed', () => {
+        it('chart should have locale if ChartDataLabelOptions.locale', () => {
+          expect(chart.options.locale).toBe('da-DK');
+        });
+
+        it('chart data should have suffix if ChartDataLabelOptions.valueSuffix', () => {
+          const dataItemWithLabel: any = chart.data.datasets[0].data.find(
+            (dataItem) => (dataItem as any).datalabel
+          );
+          expect(dataItemWithLabel.datalabel.value).toContain('%');
+        });
+      });
+    });
+  });
+});