@kirbydesign/designsystem 0.0.0

package/src/lib/components/chart-deprecated/options/donut.ts

@@ -0,0 +1,118 @@
+import { InjectionToken } from '@angular/core';
+import { Options } from 'highcharts';
+
+export const DONUT_OPTIONS = new InjectionToken<Options>('DonutOptions');
+export const DonutOptions: Options = {
+  chart: {
+    style: {
+      fontFamily: 'Roboto',
+      fontWeight: '300',
+    },
+    backgroundColor: 'transparent',
+    type: '',
+  },
+  accessibility: {
+    description: 'Donut chart',
+  },
+  title: {
+    text: '',
+  },
+  tooltip: {
+    enabled: false,
+    animation: false,
+  },
+  legend: {
+    layout: 'vertical',
+    symbolRadius: 0,
+    itemStyle: {
+      fontSize: '.875rem',
+    },
+  },
+  plotOptions: {
+    pie: {
+      colors: ['#015132', '#B2D1BF', '#AABC08', '#1FA05A', 'yellowgreen'],
+      allowPointSelect: false,
+      cursor: 'pointer',
+      showInLegend: true,
+      borderColor: null,
+      dataLabels: {
+        format: '{point.label}',
+        enabled: true,
+        connectorWidth: 0,
+        distance: 5,
+        style: {
+          fontSize: '1rem',
+          fontWeight: '200',
+        },
+      },
+      point: {
+        events: {
+          legendItemClick: () => {
+            // Prevent the default behavior (toggle visibility of slices when clicking on legends)
+            return false;
+          },
+        },
+      },
+      states: {
+        hover: {
+          enabled: false,
+        },
+      },
+    },
+    series: {
+      animation: true,
+      dataLabels: {},
+      states: {
+        hover: {
+          enabled: false,
+        },
+        inactive: {
+          opacity: 1,
+        },
+      },
+    },
+  },
+  series: [
+    {
+      name: '',
+      type: 'pie',
+    },
+  ],
+  credits: {
+    enabled: false,
+  },
+  exporting: {
+    enabled: false,
+  },
+  responsive: {
+    rules: [
+      {
+        condition: {
+          minWidth: 640,
+        },
+        chartOptions: {
+          legend: {
+            layout: 'vertical',
+            align: 'right',
+            verticalAlign: 'middle',
+            itemMarginTop: 12,
+            symbolRadius: 0,
+            symbolWidth: 14,
+            symbolHeight: 14,
+            x: -100,
+          },
+        },
+      },
+      {
+        condition: {
+          minWidth: 0,
+        },
+        chartOptions: {
+          legend: {
+            symbolRadius: 0,
+          },
+        },
+      },
+    ],
+  },
+};

package/src/lib/components/chart-deprecated/options/timeseries.ts

@@ -0,0 +1,96 @@
+import { InjectionToken } from '@angular/core';
+import { dateFormat, Options } from 'highcharts';
+
+export const TIMESERIES_OPTIONS = new InjectionToken<Options>('TimeSeriesOptions');
+export const TimeSeriesOptions: Options = {
+  chart: {
+    backgroundColor: {
+      linearGradient: { x1: 0, x2: 0, y1: 0, y2: 3 },
+      stops: [
+        [0, '#F6F6F6'],
+        [1, '#808080'],
+      ],
+    },
+    zoomType: 'x',
+    type: 'timeseries',
+    borderWidth: 0,
+    plotBorderWidth: 0,
+    margin: 0,
+    marginTop: 48,
+  },
+  accessibility: {
+    description: '',
+  },
+  title: {
+    text: '',
+  },
+  subtitle: {
+    text: '',
+  },
+  tooltip: {
+    shadow: false,
+    formatter: function () {
+      // @ts-ignore
+      return dateFormat('%e. %b', new Date(this.x)) + '.' + '<br/><b>' + this.y + '</b>';
+    },
+    //xDateFormat: '%d/%m',
+    positioner: function (_labelWidth, _labelHeight, point) {
+      return { x: point.x, y: 0 };
+    },
+    borderWidth: 0,
+  },
+  xAxis: {
+    visible: false,
+    lineColor: '#FFFFFF',
+    tickColor: '#FFFFFF',
+    labels: {
+      style: {
+        color: 'white',
+      },
+    },
+    opposite: true,
+    crosshair: {
+      zIndex: 3,
+      width: 1,
+      color: '#00E89A',
+    },
+    type: 'datetime',
+    tickInterval: 1,
+  },
+  yAxis: {
+    visible: false,
+  },
+  legend: {
+    enabled: false,
+  },
+  plotOptions: {
+    area: {
+      fillColor: '#01352C',
+      marker: {
+        lineWidth: 14,
+        lineColor: 'rgba(255,255,255,0.2)',
+        radius: 6,
+        fillColor: '#00E89A',
+      },
+      lineColor: '#01352C',
+      lineWidth: 1,
+      states: {
+        hover: {
+          lineWidth: 1,
+        },
+      },
+      threshold: null,
+    },
+    series: {
+      marker: {
+        enabledThreshold: 50,
+      },
+    },
+  },
+  series: [
+    {
+      type: 'area',
+      name: 'USD to EUR',
+    },
+  ],
+};

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

@@ -0,0 +1,10 @@
+<div class="wrapper">
+  <ion-checkbox
+    mode="md"
+    [checked]="checked"
+    [disabled]="disabled"
+    (ionChange)="onChecked($event.detail.checked)"
+    [attr.aria-labelledby]="text ? _labelId : null"
+  ></ion-checkbox>
+  <span [id]="_labelId" *ngIf="text">{{ text }}</span>
+</div>

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

@@ -0,0 +1,59 @@
+import { IonCheckbox, IonItem } from '@ionic/angular';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { MockComponents } from 'ng-mocks';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { ItemComponent } from '../item';
+
+import { CheckboxComponent } from './checkbox.component';
+
+const size = DesignTokenHelper.size;
+
+describe('CheckboxComponent in Item', () => {
+  let spectator: SpectatorHost<CheckboxComponent>;
+  let ionCheckbox: HTMLIonCheckboxElement;
+
+  const createHost = createHostFactory({
+    component: CheckboxComponent,
+    declarations: MockComponents(ItemComponent, IonItem, IonCheckbox),
+  });
+
+  describe('by default', () => {
+    beforeEach(() => {
+      spectator = createHost(`
+    <kirby-item>
+      <kirby-checkbox></kirby-checkbox>
+    </kirby-item>`);
+      ionCheckbox = spectator.query('ion-checkbox');
+    });
+
+    it(`icon should not have any margin`, () => {
+      expect(ionCheckbox).toHaveComputedStyle({
+        margin: '0px',
+      });
+    });
+
+    it(`should have z-index`, () => {
+      expect(spectator.element).toHaveComputedStyle({
+        'z-index': '1',
+      });
+    });
+  });
+
+  describe('slotted start', () => {
+    beforeEach(() => {
+      spectator = createHost(`
+    <kirby-item>
+      <kirby-checkbox slot="start"></kirby-checkbox>
+    </kirby-item>`);
+      ionCheckbox = spectator.query('ion-checkbox');
+    });
+
+    it(`should have correct vertical spacing`, () => {
+      expect(spectator.element).toHaveComputedStyle({
+        'margin-inline-end': size('xs'),
+      });
+    });
+  });
+});

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

@@ -0,0 +1,130 @@
+@use 'sass:map';
+@use '~@kirbydesign/core/src/scss/utils';
+
+utils.$border-radius: 6px;
+
+$checkbox-icon-size: utils.size('m');
+$spacing-to-edge: map.get(utils.$checkbox-radio-spacing, 'to-edge');
+$spacing-to-label: map.get(utils.$checkbox-radio-spacing, 'to-label');
+$default-checkbox-radio-size: map.get(utils.$checkbox-radio-sizes, 'md');
+
+@function get-vertical-padding($target-height) {
+  @return ($target-height - $checkbox-icon-size) * 0.5;
+}
+
+:host {
+  display: inline-block;
+
+  &.attention-level1 ion-checkbox {
+    --checkmark-color: #{utils.get-color('black')};
+    --background-checked: #{utils.get-color('success')};
+    --border-color-checked: #{utils.get-color('success')};
+
+    &:active {
+      --background-checked: #{utils.get-color('success-shade')};
+      --border-color-checked: #{utils.get-color('success-shade')};
+    }
+  }
+
+  &.attention-level2 ion-checkbox {
+    --checkmark-color: #{utils.get-color('white')};
+    --background-checked: #{utils.get-color('black')};
+    --border-color-checked: #{utils.get-color('black')};
+
+    &:active {
+      --checkmark-color: #{utils.get-color('white-shade')};
+      --background-checked: #{utils.get-color('black-tint')};
+      --border-color-checked: #{utils.get-color('black-tint')};
+    }
+  }
+
+  &.error ion-checkbox {
+    --border-color: #{utils.get-color('danger')};
+  }
+
+  &[disabled] {
+    color: #{utils.get-text-color('semi-dark')};
+
+    ion-checkbox {
+      opacity: 1;
+
+      --checkmark-color: #{utils.get-color('semi-dark')};
+      --background: #{utils.get-color('semi-light')};
+      --background-checked: #{utils.get-color('semi-light')};
+      --border-color: #{utils.get-color('medium')};
+      --border-color-checked: #{utils.get-color('semi-light')};
+    }
+  }
+
+  ion-checkbox {
+    --size: #{$checkbox-icon-size};
+    --checkmark-width: #{utils.size('xxxs')};
+    --background: #{utils.get-color('white')};
+    --border-width: 1px;
+    --border-color: #{utils.get-color('semi-dark')};
+    --border-radius: #{utils.$border-radius};
+
+    margin-left: $spacing-to-edge;
+    margin-right: $spacing-to-label;
+
+    &::part(container) {
+      padding: utils.size('xxxs'); // Spacing between checkmark and container box
+    }
+
+    &:focus-within::part(container) {
+      @media (hover: hover) {
+        box-shadow: 0 0 0 1px var(--kirby-background-color), 0 0 0 2px #{utils.$focus-ring-color};
+        border-radius: utils.$border-radius;
+      }
+    }
+
+    &:active {
+      --background: #{utils.get-color('white-shade')};
+    }
+  }
+
+  &.has-label {
+    display: block;
+    line-height: utils.line-height('n');
+    white-space: pre-line;
+
+    .wrapper {
+      position: relative;
+      display: inline-flex;
+      align-items: flex-start;
+      vertical-align: top;
+      padding: get-vertical-padding($default-checkbox-radio-size) 0;
+      padding-right: $spacing-to-label; // Ensure same padding on right side of label
+    }
+
+    @each $size, $height in utils.$checkbox-radio-sizes {
+      :host-context(.checkbox-#{$size}),
+      &.#{$size} {
+        .wrapper {
+          $vertical-padding: get-vertical-padding($height);
+
+          padding-top: $vertical-padding;
+          padding-bottom: $vertical-padding;
+        }
+      }
+    }
+
+    ion-checkbox {
+      position: static;
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
+  }
+}
+
+:host-context(kirby-item) {
+  z-index: utils.z('default'); // Makes whole kirby-item clickable above item-inner.
+
+  ion-checkbox {
+    margin: 0;
+  }
+
+  &[slot='start'] {
+    margin-inline-end: $spacing-to-label;
+  }
+}

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

@@ -0,0 +1,205 @@
+import { IonicModule } from '@ionic/angular';
+import { createComponentFactory, Spectator } from '@ngneat/spectator';
+
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+import { TestHelper } from '../../testing/test-helper';
+
+import { CheckboxComponent } from './checkbox.component';
+
+const size = DesignTokenHelper.size;
+const getColor = DesignTokenHelper.getColor;
+const getTextColor = DesignTokenHelper.getTextColor;
+const fatFingerSize = DesignTokenHelper.fatFingerSize();
+const checkboxIconSize = size('m');
+const checkboxSizeXs = size('l');
+const checkboxSizeSm = fatFingerSize;
+const checkboxSizeMd = size('xxxl');
+
+describe('CheckboxComponent', () => {
+  const createComponent = createComponentFactory({
+    component: CheckboxComponent,
+    imports: [IonicModule.forRoot({ mode: 'ios', _testing: true })],
+  });
+
+  let spectator: Spectator<CheckboxComponent>;
+  let ionCheckbox: HTMLIonCheckboxElement;
+  let label: HTMLSpanElement;
+
+  beforeEach(async () => {
+    spectator = createComponent({ props: { text: 'test' } });
+    ionCheckbox = spectator.query('ion-checkbox');
+    await TestHelper.whenReady(ionCheckbox);
+    label = spectator.query('span');
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  describe('by default', () => {
+    it('should have attention level 2', () => {
+      expect(spectator.component.attentionLevel).toBe('2');
+      expect(spectator.element).toHaveClass('attention-level2');
+    });
+
+    it('should have correct icon styling', () => {
+      expect(ionCheckbox).toHaveComputedStyle({
+        '--size': checkboxIconSize,
+        '--checkmark-color': getColor('white'),
+        '--background-checked': getColor('black'),
+        '--border-color-checked': getColor('black'),
+      });
+    });
+
+    it('should have correct vertical spacing', () => {
+      expect(ionCheckbox).toHaveComputedStyle({
+        'margin-left': size('s'),
+        'margin-right': size('xs'),
+      });
+    });
+
+    it('should have minimum fat finger size', () => {
+      expect(spectator.element).toHaveComputedStyle({
+        height: `>=${fatFingerSize}`,
+        width: `>=${fatFingerSize}`,
+      });
+    });
+
+    it('should have have correct label font-size ', () => {
+      expect(label).toHaveComputedStyle({ 'font-size': '16px' });
+    });
+
+    it('should have have correct label line-height', () => {
+      expect(label).toHaveComputedStyle({ 'line-height': '24px' });
+    });
+
+    it('should not be checked', () => {
+      expect(spectator.component.checked).toBe(false);
+    });
+
+    it('should not be disabled', () => {
+      expect(spectator.component.disabled).toBe(false);
+    });
+
+    it('should not have error', () => {
+      expect(spectator.component.hasError).toBe(false);
+    });
+  });
+
+  describe('when configured', () => {
+    it('should have correct icon styling when attentionLevel is 1', () => {
+      spectator.setInput('attentionLevel', '1');
+      spectator.detectChanges();
+      expect(ionCheckbox).toHaveComputedStyle({
+        '--checkmark-color': getColor('black'),
+        '--background-checked': getColor('success'),
+        '--border-color-checked': getColor('success'),
+      });
+    });
+
+    it('should set the [checked] input on ion-checkbox', () => {
+      spectator.setInput('checked', true);
+      expect(ionCheckbox.checked).toBe(true);
+
+      spectator.setInput('checked', false);
+      expect(ionCheckbox.checked).toBe(false);
+    });
+
+    describe('with size', () => {
+      it(`should have 'md' size by default`, () => {
+        expect(spectator.element).toHaveComputedStyle({
+          height: checkboxSizeMd,
+        });
+      });
+
+      it(`should have correct size when size = 'xs'`, () => {
+        spectator.setInput('size', 'xs');
+        spectator.detectChanges();
+
+        expect(spectator.element).toHaveComputedStyle({
+          height: checkboxSizeXs,
+        });
+      });
+
+      it(`should have correct size when size = 'sm'`, () => {
+        spectator.setInput('size', 'sm');
+        spectator.detectChanges();
+
+        expect(spectator.element).toHaveComputedStyle({
+          height: checkboxSizeSm,
+        });
+      });
+
+      it(`should have correct size when size = 'md'`, () => {
+        spectator.setInput('size', 'md');
+        spectator.detectChanges();
+
+        expect(spectator.element).toHaveComputedStyle({
+          height: checkboxSizeMd,
+        });
+      });
+    });
+
+    describe('when disabled', () => {
+      it('should set the [disabled] input on ion-checkbox', () => {
+        spectator.setInput('disabled', true);
+        expect(ionCheckbox.disabled).toBe(true);
+
+        spectator.setInput('disabled', false);
+        expect(ionCheckbox.disabled).toBe(false);
+      });
+
+      it('should have correct text styling', () => {
+        spectator.setInput('disabled', true);
+        spectator.detectChanges();
+        expect(spectator.element).toHaveComputedStyle({
+          color: getTextColor('semi-dark'),
+        });
+      });
+
+      it('should have correct icon styling', () => {
+        spectator.setInput('disabled', true);
+        spectator.detectChanges();
+        expect(ionCheckbox).toHaveComputedStyle({
+          '--checkmark-color': getColor('semi-dark'),
+          '--background': getColor('semi-light'),
+          '--background-checked': getColor('semi-light'),
+          '--border-color': getColor('medium'),
+          '--border-color-checked': getColor('semi-light'),
+        });
+      });
+    });
+
+    it('should have correct icon styling when checkbox has error', () => {
+      spectator.setInput('hasError', true);
+      spectator.detectChanges();
+      expect(ionCheckbox).toHaveComputedStyle({
+        '--border-color': getColor('danger'),
+      });
+    });
+
+    it('should have the text when [text] input is set', () => {
+      spectator.setInput('text', 'test');
+      expect(spectator.element).toHaveText('test');
+    });
+  });
+
+  describe('when checking checkbox', () => {
+    it('should emit true with event checkedChange when checked', () => {
+      spyOn(spectator.component.checkedChange, 'emit');
+      spectator.component.onChecked(true);
+
+      expect(spectator.component.checkedChange.emit).toHaveBeenCalledTimes(1);
+      expect(spectator.component.checkedChange.emit).toHaveBeenCalledWith(true);
+    });
+
+    it('should emit false with event checkedChange when unchecked', () => {
+      spyOn(spectator.component.checkedChange, 'emit');
+      spectator.component.onChecked(false);
+
+      expect(spectator.component.checkedChange.emit).toHaveBeenCalledTimes(1);
+      expect(spectator.component.checkedChange.emit).toHaveBeenCalledWith(false);
+    });
+  });
+});

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

@@ -0,0 +1,56 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  Output,
+} from '@angular/core';
+
+import { UniqueIdGenerator } from '../../helpers/unique-id-generator.helper';
+
+@Component({
+  selector: 'kirby-checkbox',
+  templateUrl: './checkbox.component.html',
+  styleUrls: ['./checkbox.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CheckboxComponent {
+  @Input() checked: boolean = false;
+  @Input() attentionLevel: '1' | '2' = '2';
+
+  @HostBinding('class.has-label')
+  @Input()
+  text: string;
+
+  @HostBinding('class')
+  @Input()
+  size?: 'xs' | 'sm' | 'md';
+
+  @HostBinding('class.error')
+  @Input()
+  hasError: boolean = false;
+
+  @Input() disabled = false;
+  @HostBinding('attr.disabled')
+  get _isDisabled() {
+    return this.disabled ? 'disabled' : null;
+  }
+
+  @HostBinding('class.attention-level1') get isAttentionLevel1() {
+    return this.attentionLevel === '1';
+  }
+  @HostBinding('class.attention-level2') get isAttentionLevel2() {
+    return this.attentionLevel === '2';
+  }
+
+  @Output() checkedChange = new EventEmitter<boolean>();
+
+  onChecked(checked: boolean): void {
+    this.checked = checked;
+    this.checkedChange.emit(this.checked);
+  }
+
+  // IDs used for a11y labelling
+  _labelId = UniqueIdGenerator.scopedTo('kirby-checkbox-label').next();
+}

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

@@ -0,0 +1 @@
+<span>{{ text }}</span>