Merge pull request #2442 from kirbydesign/release/v7.0.0

Release v7.0.0

.stylelintrc

@@ -26,6 +26,12 @@
       {
         "ignore": ["custom-properties"]
       }
+    ],
+    "declaration-block-no-redundant-longhand-properties": [
+      true,
+      {
+        "ignoreShorthands": ["transition"]
+      }
     ]
   }
 }

CHANGELOG.md

@@ -2,6 +2,52 @@
 
 Notable changes to the project will be documented in this file.
 
+## [7.0.0](https://github.com/kirbydesign/designsystem/pull/2442) (16-09-2022)
+
+### Breaking Changes
+
+- **button** - deprecate attention-level 4 on kirby-button ([#1993](https://github.com/kirbydesign/designsystem/pull/1993))
+- **chart** - remove deprecated Highchart variants ([#2334](https://github.com/kirbydesign/designsystem/pull/2334))
+
+### Deprecations
+
+- **chip** - deprecate chip component ([#2391](https://github.com/kirbydesign/designsystem/pull/2391))
+
+### Features
+
+- **card** - make it possible to use alternative hover and active on dark cards ([#2469](https://github.com/kirbydesign/designsystem/pull/2469))
+- **stock-chart** - add stock chart component ([#2377](https://github.com/kirbydesign/designsystem/pull/2377))
+- **interaction-states** - hover, active, pressed and focussed state for our interative components has been implemented where relevant:
+
+  | Component         | Hover | Active | Focus `TAB` | `ENTER` / `SPACE` |
+  | :---------------- | :---: | :----: | :---------: | :---------------: |
+  | Accordion         |  ✅   |   ✅   |     ✅      |        ✅         |
+  | Action Sheet      |  ✅   |   ✅   |     ✅      |        ✅         |
+  | Alert             |  ✅   |   ✅   |     ✅      |        ✅         |
+  | Button            |  ✅   |   ✅   |     ✅      |        ✅         |
+  | Calendar          |  ✅   |   ✅   |             |                   |
+  | Card              |  ✅   |   ✅   |     ✅      |        ✅         |
+  | Chart             |  ✅   |        |             |                   |
+  | Checkbox          |  ✅   |   ✅   |     ✅      |                   |
+  | Chip              |  ✅   |   ✅   |     ✅      |        ✅         |
+  | Dropdown          |  ✅   |   ✅   |     ✅      |        ✅         |
+  | Fab Sheet         |  ✅   |   ✅   |             |                   |
+  | Form Field        |  ✅   |   ✅   |     ✅      |                   |
+  | Item - Picker     |  ✅   |   ✅   |             |        ✅         |
+  | Link              |  ✅   |   ✅   |     ✅      |        ✅         |
+  | List              |  ✅   |   ✅   |     ✅      |        ✅         |
+  | List Swipe        |       |        |             |                   |
+  | Modal             |       |        |             |                   |
+  | Radio             |  ✅   |   ✅   |     ✅      |        ✅         |
+  | Range             |  ✅   |   ✅   |     ✅      |        ✅         |
+  | Reorder List      |       |        |             |                   |
+  | Segmented Control |  ✅   |   ✅   |     ✅      |        ✅         |
+  | Slide Button      |  ✅   |   ✅   |             |                   |
+  | Slides            |       |        |             |                   |
+  | Tabs              |  ✅   |   ✅   |     ✅      |        ✅         |
+  | Toggle            |  ✅   |   ✅   |     ✅      |        ✅         |
+  | Toggle Button     |  ✅   |   ✅   |     ✅      |        ✅         |
+
 ## [6.4.1](https://github.com/kirbydesign/designsystem/pull/2470) (09-09-2022)
 
 ### Bugfixes

angular.json

@@ -70,19 +70,7 @@
                   "with": "apps/cookbook/src/environments/environment.prod.ts"
                 }
               ],
-              "outputHashing": "all",
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
-                }
-              ]
+              "outputHashing": "all"
             }
           }
         },

apps/cookbook/src/app/examples/button-example/button-example.component.html

@@ -18,22 +18,14 @@ <h2>Sizes</h2>
 
 <h2>Block button</h2>
 <button kirby-button [size]="buttonSize" expand="block">Block Button</button>
-<h2>Destructive Button</h2>
-<button kirby-button [size]="buttonSize" attentionLevel="1" isDestructive="true">
-  Destructive Level 1
-</button>
-<button kirby-button [size]="buttonSize" attentionLevel="2" isDestructive="true">
-  Destructive Level 2
-</button>
-<button kirby-button [size]="buttonSize" attentionLevel="3" isDestructive="true">
-  Destructive Level 3
-</button>
-<button kirby-button [size]="buttonSize" attentionLevel="4" isDestructive="true">
-  Destructive Level 4
-</button>
-<button kirby-button [size]="buttonSize" disabled>Disabled Button</button>
 
 <h2>Button with icon only</h2>
+<div class="button-example-container">
+  <button kirby-button [size]="buttonSize" [noDecoration]="true">
+    <kirby-icon name="close"></kirby-icon>
+  </button>
+  <label>Undecorated</label>
+</div>
 <div class="button-example-container">
   <button kirby-button [size]="buttonSize">
     <kirby-icon name="close"></kirby-icon>
@@ -52,19 +44,19 @@ <h2>Button with icon only</h2>
   </button>
   <label>Attention Level 3</label>
 </div>
-<div class="button-example-container">
-  <button kirby-button [size]="buttonSize" attentionLevel="4">
-    <kirby-icon name="close"></kirby-icon>
-  </button>
-  <label>Attention Level 4</label>
-</div>
 <div class="button-example-container">
   <button kirby-button [size]="buttonSize" disabled>
     <kirby-icon name="close"></kirby-icon>
   </button>
   <label>Disabled</label>
 </div>
 
+<p class="kirby-text-small">
+  <em>
+    <strong>Please note:</strong> The undecorated button is solely intended for use with icon only.
+  </em>
+</p>
+
 <h3>Custom Icon</h3>
 <div class="button-example-container">
   <button kirby-button [size]="buttonSize">
@@ -84,12 +76,6 @@ <h3>Custom Icon</h3>
   </button>
   <label>Attention Level 3</label>
 </div>
-<div class="button-example-container">
-  <button kirby-button [size]="buttonSize" attentionLevel="4">
-    <kirby-icon customName="football"></kirby-icon>
-  </button>
-  <label>Attention Level 4</label>
-</div>
 <div class="button-example-container">
   <button kirby-button [size]="buttonSize" disabled>
     <kirby-icon customName="football"></kirby-icon>
@@ -160,7 +146,4 @@ <h2>Button with attention level</h2>
   <button kirby-button [size]="buttonSize" attentionLevel="3" expand="block">
     Attention Level 3
   </button>
-  <button kirby-button [size]="buttonSize" attentionLevel="4" expand="block">
-    Attention Level 4
-  </button>
 </kirby-card>

apps/cookbook/src/app/examples/card-example/card-example.module.ts

@@ -4,7 +4,7 @@ import { NgModule } from '@angular/core';
 import { KirbyModule } from '@kirbydesign/designsystem';
 
 import { CardExampleComponent } from './card-example.component';
-import { CardBackgroundImageExampleComponent } from './examples/card-background-image-example.component';
+import { CardBackgroundImageExampleComponent } from './examples/card-background-image-example/card-background-image-example.component';
 import { CardClickableExampleComponent } from './examples/card-clickable-example/card-clickable-example.component';
 import { CardCssBackgroundImageExampleComponent } from './examples/card-css-background-image-example/card-css-background-image-example.component';
 import { CardElevationsExampleComponent } from './examples/card-elevations-example/card-elevations-example.component';

apps/cookbook/src/app/examples/card-example/examples/card-background-image-example/card-background-image-example.component.html

@@ -0,0 +1,14 @@
+<kirby-card
+  [hasPadding]="true"
+  backgroundImageUrl="https://images.unsplash.com/photo-1560840067-ddcaeb7831d2"
+  themeColor="dark"
+  (click)="noop()"
+  [hasDarkBackgroundColor]="true"
+>
+  <h3>Example using input property to set background</h3>
+  <p>
+    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia facere molestias recusandae
+    necessitatibus ab veniam repellendus doloremque culpa quam libero, est quo accusamus cumque, in
+    quia itaque cupiditate ratione repellat!
+  </p>
+</kirby-card>

apps/cookbook/src/app/examples/card-example/examples/card-background-image-example/card-background-image-example.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { noop } from 'rxjs';
+
+const config = {
+  selector: 'cookbook-card-background-image-example',
+  style: `kirby-card {
+  min-height: 300px;
+}
+`,
+};
+
+@Component({
+  selector: config.selector,
+  templateUrl: './card-background-image-example.component.html',
+  styles: [config.style],
+})
+export class CardBackgroundImageExampleComponent {
+  style: string = config.style;
+  noop: () => void = noop;
+}

apps/cookbook/src/app/examples/card-example/examples/card-clickable-example/card-clickable-example.component.html

@@ -1,4 +1,4 @@
-<kirby-card (click)="function()">
+<kirby-card (click)="noop()">
   <kirby-card-header title="Clickable"></kirby-card-header>
   <div class="card-content">
     <p>

apps/cookbook/src/app/examples/card-example/examples/card-clickable-example/card-clickable-example.component.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
+import { noop } from 'rxjs';
 
 @Component({
   selector: 'cookbook-card-clickable-example',
   templateUrl: './card-clickable-example.component.html',
   styleUrls: ['./card-clickable-example.component.scss'],
 })
 export class CardClickableExampleComponent {
-  function() {}
+  noop: () => void = noop;
 }

apps/cookbook/src/app/examples/card-example/examples/card-css-background-image-example/card-css-background-image-example.component.html

@@ -0,0 +1,8 @@
+<kirby-card [hasPadding]="true" themeColor="dark" (click)="noop()" [hasDarkBackgroundColor]="true">
+  <h3>Example using custom css property to set background</h3>
+  <p>
+    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia facere molestias recusandae
+    necessitatibus ab veniam repellendus doloremque culpa quam libero, est quo accusamus cumque, in
+    quia itaque cupiditate ratione repellat!
+  </p>
+</kirby-card>

apps/cookbook/src/app/examples/card-example/examples/card-css-background-image-example/card-css-background-image-example.component.ts

@@ -1,17 +1,8 @@
 import { Component } from '@angular/core';
+import { noop } from 'rxjs';
 
 const config = {
   selector: 'cookbook-card-css-background-image-example',
-  template: `
-<kirby-card [hasPadding]="true" themeColor="dark">
-  <h3>
-    Example using custom css property to set background
-  </h3>
-  <p> 
-    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia facere molestias recusandae necessitatibus ab veniam repellendus doloremque culpa quam libero, est quo accusamus cumque, in quia itaque cupiditate ratione repellat!
-  </p>
-</kirby-card>
-  `,
   style: `@use '~@kirbydesign/core/src/scss/utils';
 
 kirby-card {
@@ -37,10 +28,10 @@ kirby-card {
 
 @Component({
   selector: config.selector,
-  template: config.template,
+  templateUrl: './card-css-background-image-example.component.html',
   styleUrls: ['./card-css-background-image-example.component.scss'],
 })
 export class CardCssBackgroundImageExampleComponent {
-  template: string = config.template;
   style: string = config.style;
+  noop: () => void = noop;
 }

apps/cookbook/src/app/examples/card-example/examples/card-themecolor-example/card-themecolor-example.component.html

@@ -6,7 +6,12 @@
   </div>
 </kirby-card>
 
-<kirby-card [hasPadding]="true" themeColor="secondary">
+<kirby-card
+  [hasPadding]="true"
+  themeColor="secondary"
+  (click)="noop()"
+  [hasDarkBackgroundColor]="true"
+>
   <kirby-card-header title="Secondary" subtitle='themeColor="secondary"'></kirby-card-header>
   <div>
     Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia facere molestias recusandae

apps/cookbook/src/app/examples/card-example/examples/card-themecolor-example/card-themecolor-example.component.ts

@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
+import { noop } from 'rxjs';
 
 @Component({
   selector: 'cookbook-card-themecolor-example',
   templateUrl: './card-themecolor-example.component.html',
   styleUrls: ['./card-themecolor-example.component.scss'],
 })
-export class CardThemecolorExampleComponent {}
+export class CardThemecolorExampleComponent {
+  noop: () => void = noop;
+}