@kirbydesign/designsystem 0.0.0

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

@@ -0,0 +1,286 @@
+@use 'sass:map';
+@use '~@kirbydesign/core/src/scss/utils';
+
+$button-width: (
+  sm: 44px,
+  md: 88px,
+  lg: 220px,
+) !default;
+
+@function button-width($key) {
+  @return map.get($button-width, $key);
+}
+
+@mixin button-sm {
+  font-size: utils.font-size('xs');
+  height: utils.size('l');
+  min-width: button-width('sm');
+
+  &:not(.icon-only) {
+    padding-left: utils.size('s');
+    padding-right: utils.size('s');
+  }
+
+  &.icon-only {
+    width: utils.size('l');
+    min-width: unset;
+  }
+
+  &.icon-left,
+  &.icon-right {
+    --kirby-icon-font-size: #{utils.size('s')};
+
+    min-width: button-width('md');
+  }
+}
+
+@mixin button-lg {
+  font-size: utils.font-size('n');
+  height: utils.size('xxl');
+  min-width: button-width('lg');
+
+  &.icon-only {
+    width: utils.size('xxl');
+    min-width: unset;
+  }
+}
+
+@mixin button-attentionlevel1 {
+  --kirby-button-background-color: #{utils.get-color('primary')};
+  --kirby-button-color: #{utils.get-color('primary-contrast')};
+
+  &.destructive {
+    --kirby-button-background-color: #{utils.get-color('danger')};
+    --kirby-button-color: #{utils.get-color('danger-contrast')};
+  }
+}
+
+@mixin button-attentionlevel2 {
+  --kirby-button-background-color: #{utils.get-color('white')};
+  --kirby-button-color: #{utils.get-color('white-contrast')};
+
+  &.destructive {
+    --kirby-button-background-color: #{utils.get-color('light')};
+    --kirby-button-color: #{utils.get-color('danger')};
+  }
+}
+
+@mixin button-attentionlevel3 {
+  // Expect canvas underneath to be a light color
+  --kirby-button-background-color: transparent;
+  --kirby-button-color: #{utils.get-color('black')};
+  --kirby-button-border-color: #{utils.get-color('medium')};
+
+  &.destructive {
+    --kirby-button-color: #{utils.get-color('danger')};
+  }
+}
+
+@mixin button-attentionlevel4 {
+  // Expect canvas underneath to be a light color
+  --kirby-button-background-color: transparent;
+  --kirby-button-color: #{utils.get-color('black')};
+
+  &.destructive {
+    --kirby-button-color: #{utils.get-color('danger')};
+  }
+}
+
+:host {
+  @include utils.accessible-target-size;
+
+  font-family: var(--kirby-font-family);
+  background-color: var(--kirby-button-background-color, initial);
+  color: var(--kirby-button-color, inherit);
+  border-radius: utils.$border-radius-round;
+  box-sizing: border-box; // Ensure border is not added to button height
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 200ms linear;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  // we default to 'md' size.
+  font-size: utils.font-size('s');
+  height: utils.size('xl');
+  min-width: button-width('md');
+  padding: 0 utils.size('m');
+  margin: utils.size('xxxs');
+  line-height: utils.line-height('s');
+
+  // Outline is applied on button border instead,
+  // to keep the rounded shape:
+  outline: none;
+  border: 1px solid var(--kirby-button-border-color, transparent);
+
+  &.icon-left {
+    padding-left: utils.size('xs');
+    padding-right: utils.size('s');
+
+    --kirby-icon-margin-right: #{utils.size('xxs')};
+  }
+
+  &.icon-right {
+    padding-left: utils.size('s');
+    padding-right: utils.size('xs');
+
+    --kirby-icon-margin-left: #{utils.size('xxs')};
+  }
+
+  &.icon-only {
+    width: utils.size('xl');
+    padding: 0;
+    min-width: unset;
+  }
+
+  &.sm {
+    @include button-sm;
+  }
+
+  &.lg {
+    @include button-lg;
+  }
+
+  &.attention-level1 {
+    @include button-attentionlevel1;
+  }
+
+  &.attention-level2 {
+    @include button-attentionlevel2;
+  }
+
+  &.attention-level3 {
+    @include button-attentionlevel3;
+  }
+
+  &.attention-level4 {
+    @include button-attentionlevel4;
+  }
+
+  &[expand='block'] {
+    width: 100%;
+  }
+
+  // Only apply focus ring if pointer device can hover
+  // (effectively desktop/mouse devices):
+  @include utils.focus {
+    --kirby-button-border-color: #{utils.$focus-ring-color};
+  }
+
+  @include utils.hover {
+    opacity: 0.8;
+  }
+
+  &:active {
+    opacity: 0.8;
+  }
+
+  &:disabled {
+    background-color: utils.get-color('semi-light');
+    color: utils.get-color('semi-dark-shade');
+    border-color: transparent;
+    pointer-events: none;
+  }
+
+  :host-context(.default),
+  :host-context(.kirby-color-brightness-white) {
+    &.attention-level2 {
+      --kirby-button-background-color: #{utils.get-color('black')};
+      --kirby-button-color: #{utils.get-color('black-contrast')};
+    }
+  }
+
+  :host-context(.kirby-color-brightness-dark) {
+    &.attention-level3 {
+      --kirby-button-border-color: #{utils.get-color('white')};
+      --kirby-button-color: #{utils.get-color('white')};
+    }
+
+    &.attention-level4 {
+      --kirby-button-color: #{utils.get-color('white')};
+    }
+  }
+
+  &.floating {
+    $fab-size: 64px;
+
+    width: $fab-size !important;
+    height: $fab-size !important;
+    min-width: unset;
+
+    &:not(:disabled) {
+      box-shadow: utils.get-elevation(8);
+    }
+  }
+}
+
+:host-context(kirby-item)[slot='end'] {
+  margin-inline-start: utils.size('s');
+}
+
+:host-context(kirby-alert).ok-btn {
+  --kirby-button-background-color: #{utils.get-color('success')};
+  --kirby-button-color: #{utils.get-color('success-contrast')};
+}
+
+// Temp fix for https://github.com/angular/angular-cli/issues/13854#issuecomment-470831308
+
+/* clean-css ignore:start */
+:host-context(ion-toolbar kirby-page-actions) {
+  font-size: utils.font-size('s');
+  margin: 0;
+  height: utils.$fat-finger-size;
+
+  &.icon-only {
+    width: utils.$fat-finger-size;
+  }
+
+  &.attention-level1,
+  &.attention-level2,
+  &.attention-level3,
+  &.attention-level4 {
+    @include button-attentionlevel4;
+  }
+}
+
+/* clean-css ignore:end */
+
+// Temp fix for https://github.com/angular/angular-cli/issues/13854#issuecomment-470831308
+
+/* clean-css ignore:start */
+:host-context(.page-title kirby-page-actions) {
+  &.attention-level1,
+  &.attention-level2,
+  &.attention-level3,
+  &.attention-level4 {
+    @include button-attentionlevel2;
+  }
+}
+
+/* clean-css ignore:end */
+
+// Temp fix for https://github.com/angular/angular-cli/issues/13854#issuecomment-470831308
+
+/* clean-css ignore:start */
+:host-context(kirby-empty-state .content) {
+  @include button-lg;
+}
+
+/* clean-css ignore:end */
+
+:host-context(kirby-dropdown) {
+  justify-content: space-between;
+}
+
+:host-context(kirby-toggle-button) {
+  @each $color-name, $color-value in utils.$notification-colors {
+    &.#{$color-name} {
+      --kirby-button-background-color: #{utils.get-color($color-name)};
+      --kirby-button-color: #{utils.get-color($color-name + '-contrast')};
+    }
+  }
+}

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

@@ -0,0 +1,404 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
+import { MockComponent } from 'ng-mocks';
+
+import { DesignTokenHelper } from '../../helpers/design-token-helper';
+import { IconComponent } from '../icon/icon.component';
+
+import { ButtonComponent, ButtonSize } from './button.component';
+
+const { getColor, size, fontSize, fatFingerSize } = DesignTokenHelper;
+
+describe('ButtonComponent', () => {
+  let spectator: SpectatorHost<ButtonComponent>;
+  let element: HTMLButtonElement;
+
+  const createHost = createHostFactory({
+    component: ButtonComponent,
+    declarations: [MockComponent(IconComponent)],
+  });
+
+  describe('by default', () => {
+    beforeEach(() => {
+      spectator = createHost('<button kirby-button>Test</button>');
+      element = spectator.element as HTMLButtonElement;
+    });
+
+    it('should create', () => {
+      expect(spectator.component).toBeTruthy();
+    });
+
+    it('should render with correct background-color', () => {
+      expect(element).toHaveComputedStyle({
+        'background-color': getColor('primary'),
+      });
+    });
+
+    it('should render with correct color', () => {
+      expect(element).toHaveComputedStyle({ color: getColor('primary', 'contrast') });
+    });
+
+    it('should render with transparent border', () => {
+      expect(element).toHaveComputedStyle({
+        'border-width': '1px',
+        'border-style': 'solid',
+        'border-color': 'transparent',
+      });
+    });
+
+    it('should render without outline', () => {
+      expect(element).toHaveComputedStyle({
+        'outline-width': '0px',
+        'outline-style': 'none',
+      });
+    });
+
+    it('should render with correct border-radius', () => {
+      const expected = DesignTokenHelper.borderRadiusRound();
+
+      expect(element).toHaveComputedStyle({ 'border-radius': expected });
+    });
+
+    it('should render with correct font-size', () => {
+      expect(element).toHaveComputedStyle({ 'font-size': fontSize('s') });
+    });
+
+    it('should render with correct height', () => {
+      expect(element).toHaveComputedStyle({ height: size('xl') });
+    });
+
+    it('should render with correct margin', () => {
+      expect(element).toHaveComputedStyle({ margin: size('xxxs') });
+    });
+
+    it('should have touch area with minimum size equal to fat finger size', () => {
+      const touchArea = window.getComputedStyle(element, '::after');
+
+      expect(parseInt(touchArea.height)).toBeGreaterThanOrEqual(parseInt(fatFingerSize()));
+      expect(parseInt(touchArea.width)).toBeGreaterThanOrEqual(parseInt(fatFingerSize()));
+    });
+
+    describe('when disabled', () => {
+      beforeEach(() => {
+        element.disabled = true;
+      });
+
+      it('should render with correct background-color', () => {
+        expect(element).toHaveComputedStyle({
+          'background-color': getColor('semi-light'),
+        });
+      });
+
+      it('should render with correct color', () => {
+        expect(element).toHaveComputedStyle({
+          color: getColor('semi-dark', 'shade'),
+        });
+      });
+
+      it('should render with transparent border', () => {
+        expect(element).toHaveComputedStyle({
+          'border-width': '1px',
+          'border-style': 'solid',
+          'border-color': 'transparent',
+        });
+      });
+    });
+
+    describe('when configured with attentionlevel 1', () => {
+      beforeEach(() => {
+        spectator.component.attentionLevel = '1';
+        spectator.detectChanges();
+      });
+
+      it('should render with correct background-color', () => {
+        expect(element).toHaveComputedStyle({
+          'background-color': getColor('primary'),
+        });
+      });
+
+      it('should render with correct color', () => {
+        expect(element).toHaveComputedStyle({
+          color: getColor('primary', 'contrast'),
+        });
+      });
+
+      it('should render with transparent border', () => {
+        expect(element).toHaveComputedStyle({
+          'border-width': '1px',
+          'border-style': 'solid',
+          'border-color': 'transparent',
+        });
+      });
+
+      describe('and is destructive', () => {
+        beforeEach(() => {
+          spectator.component.isDestructive = true;
+          spectator.detectChanges();
+        });
+
+        it('should render with correct background-color', () => {
+          expect(element).toHaveComputedStyle({
+            'background-color': getColor('danger'),
+          });
+        });
+
+        it('should render with correct color', () => {
+          expect(element).toHaveComputedStyle({
+            color: getColor('danger', 'contrast'),
+          });
+        });
+
+        it('should render with transparent border', () => {
+          expect(element).toHaveComputedStyle({
+            'border-width': '1px',
+            'border-style': 'solid',
+            'border-color': 'transparent',
+          });
+        });
+      });
+    });
+
+    describe('when configured with attentionlevel 2', () => {
+      beforeEach(() => {
+        spectator.component.attentionLevel = '2';
+        spectator.detectChanges();
+      });
+
+      it('should render with correct background-color', () => {
+        expect(element).toHaveComputedStyle({
+          'background-color': getColor('white'),
+        });
+      });
+
+      it('should render with correct color', () => {
+        expect(element).toHaveComputedStyle({
+          color: getColor('white', 'contrast'),
+        });
+      });
+
+      it('should render with transparent border', () => {
+        expect(element).toHaveComputedStyle({
+          'border-width': '1px',
+          'border-style': 'solid',
+          'border-color': 'transparent',
+        });
+      });
+
+      describe('and is destructive', () => {
+        beforeEach(() => {
+          spectator.component.isDestructive = true;
+          spectator.detectChanges();
+        });
+
+        it('should render with correct background-color', () => {
+          expect(element).toHaveComputedStyle({
+            'background-color': getColor('light'),
+          });
+        });
+
+        it('should render with correct color', () => {
+          expect(element).toHaveComputedStyle({
+            color: getColor('danger'),
+          });
+        });
+
+        it('should render with transparent border', () => {
+          expect(element).toHaveComputedStyle({
+            'border-width': '1px',
+            'border-style': 'solid',
+            'border-color': 'transparent',
+          });
+        });
+      });
+    });
+
+    describe('when configured with attentionlevel 3', () => {
+      beforeEach(() => {
+        spectator.component.attentionLevel = '3';
+        spectator.detectChanges();
+      });
+
+      it('should render with no background-color', () => {
+        expect(element).toHaveComputedStyle({ 'background-color': 'transparent' });
+      });
+
+      it('should render with correct border', () => {
+        expect(element).toHaveComputedStyle({
+          'border-color': getColor('medium'),
+          'border-width': '1px',
+          'border-style': 'solid',
+        });
+      });
+
+      it('should render with correct color', () => {
+        expect(element).toHaveComputedStyle({
+          color: getColor('black'),
+        });
+      });
+
+      describe('and is destructive', () => {
+        beforeEach(() => {
+          spectator.component.isDestructive = true;
+          spectator.detectChanges();
+        });
+
+        it('should render with correct background-color', () => {
+          expect(element).toHaveComputedStyle({ 'background-color': 'transparent' });
+        });
+
+        it('should render with correct border-color', () => {
+          expect(element).toHaveComputedStyle({
+            'border-color': getColor('medium'),
+          });
+        });
+
+        it('should render with correct color', () => {
+          expect(element).toHaveComputedStyle({
+            color: getColor('danger'),
+          });
+        });
+      });
+
+      describe('and is disabled', () => {
+        beforeEach(() => {
+          element.disabled = true;
+        });
+
+        it('should render with transparent border', () => {
+          expect(element).toHaveComputedStyle({
+            'border-width': '1px',
+            'border-style': 'solid',
+            'border-color': 'transparent',
+          });
+        });
+      });
+    });
+
+    describe('when configured with attentionlevel 4', () => {
+      beforeEach(() => {
+        spectator.component.attentionLevel = '4';
+        spectator.detectChanges();
+      });
+
+      it('should render with no background-color', () => {
+        expect(element).toHaveComputedStyle({ 'background-color': 'transparent' });
+      });
+
+      it('should render with transparent border', () => {
+        expect(element).toHaveComputedStyle({
+          'border-width': '1px',
+          'border-style': 'solid',
+          'border-color': 'transparent',
+        });
+      });
+
+      it('should render with correct color', () => {
+        expect(element).toHaveComputedStyle({
+          color: getColor('black'),
+        });
+      });
+
+      describe('and is destructive', () => {
+        beforeEach(() => {
+          spectator.component.isDestructive = true;
+          spectator.detectChanges();
+        });
+
+        it('should render with no background-color', () => {
+          expect(element).toHaveComputedStyle({ 'background-color': 'transparent' });
+        });
+
+        it('should render with transparent border', () => {
+          expect(element).toHaveComputedStyle({
+            'border-width': '1px',
+            'border-style': 'solid',
+            'border-color': 'transparent',
+          });
+        });
+
+        it('should render with correct color', () => {
+          expect(element).toHaveComputedStyle({ color: getColor('danger') });
+        });
+      });
+    });
+  });
+
+  const testScenarios: { size: ButtonSize; expected: any }[] = [
+    {
+      size: ButtonSize.SM,
+      expected: { fontSize: fontSize('xs'), height: size('l'), minWidth: '44px' },
+    },
+    {
+      size: ButtonSize.MD,
+      expected: { fontSize: fontSize('s'), height: size('xl'), minWidth: '88px' },
+    },
+    {
+      size: ButtonSize.LG,
+      expected: { fontSize: fontSize('n'), height: size('xxl'), minWidth: '220px' },
+    },
+  ];
+  testScenarios.forEach((scenario) => {
+    describe(`when configured with size = ${scenario.size}`, () => {
+      describe(`through one-time string initialization`, () => {
+        beforeEach(() => {
+          spectator = createHost(
+            `<button kirby-button size="${scenario.size}"><span>Text</span></button>`
+          );
+          element = spectator.element as HTMLButtonElement;
+        });
+        it('should render with correct font-size', () => {
+          expect(element).toHaveComputedStyle({ 'font-size': scenario.expected.fontSize });
+        });
+
+        it('should render with correct height', () => {
+          expect(element).toHaveComputedStyle({ height: scenario.expected.height });
+        });
+
+        it('should render with correct min-width', () => {
+          expect(element).toHaveComputedStyle({ 'min-width': scenario.expected.minWidth });
+        });
+      });
+
+      describe(`through an input property`, () => {
+        beforeEach(() => {
+          spectator = createHost(`<button kirby-button><span>Text</span></button>`, {
+            props: {
+              size: scenario.size,
+            },
+          });
+          element = spectator.element as HTMLButtonElement;
+        });
+        it('should render with correct font-size', () => {
+          expect(element).toHaveComputedStyle({ 'font-size': scenario.expected.fontSize });
+        });
+
+        it('should render with correct height', () => {
+          expect(element).toHaveComputedStyle({ height: scenario.expected.height });
+        });
+
+        it('should render with correct min-width', () => {
+          expect(element).toHaveComputedStyle({ 'min-width': scenario.expected.minWidth });
+        });
+      });
+
+      describe(`through template property binding`, () => {
+        beforeEach(() => {
+          spectator = createHost(
+            `<button kirby-button [size]="'${scenario.size}'"><span>Text</span></button>`
+          );
+          element = spectator.element as HTMLButtonElement;
+        });
+        it('should render with correct font-size', () => {
+          expect(element).toHaveComputedStyle({ 'font-size': scenario.expected.fontSize });
+        });
+
+        it('should render with correct height', () => {
+          expect(element).toHaveComputedStyle({ height: scenario.expected.height });
+        });
+
+        it('should render with correct min-width', () => {
+          expect(element).toHaveComputedStyle({ 'min-width': scenario.expected.minWidth });
+        });
+      });
+    });
+  });
+});