Merge branch 'develop' into bug/4518-combobox-module

Author: HootERasmus

.npmrc

@@ -1 +1,2 @@
+registry=https://registry.npmjs.org/
 engine-strict = true

.stylelintrc

@@ -1,6 +1,8 @@
 {
   "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"],
+  "plugins": ["@kirbydesign/stylelint-plugin"],
   "rules": {
+    "kirby/use-design-tokens": true,
     "scss/at-mixin-pattern": [
       "^(-?_?[a-z][a-z0-9]*)(-[a-z0-9]+)*$",
       {

apps/cookbook/src/app/examples/card-example/examples/card-example-variant.scss

@@ -1,6 +1,7 @@
 @use '@kirbydesign/core/src/scss/utils';
 @use './card-example.shared';
 
+/* stylelint-disable-next-line kirby/use-design-tokens */
 $card-gap: utils.size(
   's'
 ); // use scss variable instead of custom property here for container query compatability

apps/cookbook/src/app/examples/modal-example/modal-example-advanced.component.ts

@@ -149,14 +149,13 @@ ngOnInit() {
 ngOnInit() {
   this.modal?.willClose.then(() => console.log('this modal is about to close'));
 }`,
-  embeddedCodeSnippet: `import { Component, Inject } from '@angular/core';
+  embeddedCodeSnippet: `import { Component, inject } from '@angular/core';
 import { COMPONENT_PROPS } from '@kirbydesign/designsystem';
 
 @Component()
 export class EmbeddedComponent() {
-  constructor(@Inject(COMPONENT_PROPS) private componentProps) {
-    this.props = componentProps;
-  }
+  private readonly componentProps = inject<{ myType: MyType }>(COMPONENT_PROPS);
+  protected readonly myType = this.componentProps.myType;
 }`,
   closeModalCodeSnippet: `import { Component, Optional, SkipSelf } from '@angular/core';
 import { Modal } from '@kirbydesign/designsystem';

apps/cookbook/src/app/examples/page-example/fixed-footer-tabs/tab/fixed-footer-tab-example.component.ts

@@ -1,9 +1,11 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { PageFooterComponent } from '@kirbydesign/designsystem';
-
-import { PageComponent, PageContentComponent } from '@kirbydesign/designsystem/page';
+import {
+  PageComponent,
+  PageContentComponent,
+  PageFooterComponent,
+} from '@kirbydesign/designsystem/page';
 import { NgTemplateOutlet } from '@angular/common';
 import { ButtonComponent } from '@kirbydesign/designsystem/button';
 import { IconComponent } from '@kirbydesign/designsystem/icon';
@@ -69,6 +71,7 @@ const config = {
     ItemComponent,
     ToggleComponent,
     PageContentComponent,
+    PageFooterComponent,
   ],
 })
 export class PageFixedFooterTabExampleComponent extends BasePageExampleComponent implements OnInit {

apps/cookbook/src/app/examples/progress-circle-example/examples/avatar.ts

@@ -28,18 +28,7 @@ const config = {
 @Component({
   selector: config.selector,
   template: config.template,
-  styles: [
-    `
-      :host {
-        display: flex !important;
-        align-items: center;
-      }
-
-      kirby-progress-circle {
-        margin-right: 20px;
-      }
-    `,
-  ],
+  styleUrls: ['./progress-circle-examples.shared.scss'],
   imports: [ProgressCircleComponent, AvatarComponent, ThemeColorDirective, IconComponent],
 })
 export class ProgressCircleExampleContentAvatarComponent {

apps/cookbook/src/app/examples/progress-circle-example/examples/card.ts

@@ -43,7 +43,7 @@ const config = {
       }
 
       kirby-card:not(:first-of-type) {
-        margin-top: 12px;
+        margin-top: var(--kirby-spacing-xs);
       }
     `,
   ],

apps/cookbook/src/app/examples/progress-circle-example/examples/content-steps.ts

@@ -3,14 +3,20 @@ import { ProgressCircleComponent } from '@kirbydesign/designsystem/progress-circ
 
 const config = {
   selector: 'cookbook-progress-circle-example-content-steps',
-  template: `<kirby-progress-circle aria-label="Your investment savings" themeColor="warning" value="50" size="sm" class="kirby-text-xsmall">
-  2/4
+  template: `<kirby-progress-circle aria-label="Your investment savings" themeColor="warning" value="50" size="sm" class="kirby-text-xsmall">2/4
+</kirby-progress-circle> 
+
+<kirby-progress-circle aria-label="Your investment savings" themeColor="warning" value="50" size="md">2/4
+</kirby-progress-circle>
+
+<kirby-progress-circle aria-label="Your investment savings" themeColor="warning" value="50" size="lg">2/4
 </kirby-progress-circle>`,
 };
 
 @Component({
   selector: config.selector,
   template: config.template,
+  styleUrls: ['./progress-circle-examples.shared.scss'],
   imports: [ProgressCircleComponent],
 })
 export class ProgressCircleExampleContentStepsComponent {

apps/cookbook/src/app/examples/progress-circle-example/examples/default.ts

@@ -9,6 +9,7 @@ const config = {
 @Component({
   selector: config.selector,
   template: config.template,
+  styleUrls: ['./progress-circle-examples.shared.scss'],
   imports: [ProgressCircleComponent],
 })
 export class ProgressCircleExampleDefaultComponent {

apps/cookbook/src/app/examples/progress-circle-example/examples/progress-circle-examples.shared.scss

@@ -0,0 +1,21 @@
+:host {
+  display: flex !important;
+  align-items: center;
+}
+
+kirby-progress-circle {
+  margin-right: var(--kirby-spacing-m);
+}
+
+kirby-progress-circle p {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  text-align: center;
+  font-size: var(--kirby-font-size-s);
+  line-height: var(--kirby-font-size-n);
+}