Added inline style for kirby-modal-footer (#1982)

* updated modal-footer component ts, scss and corresponding tests. Updated showcase component.

* corrected test

* rephrased description

* Change type inline/fixed

* removed f in fdescribe, refactor of hostbinding

apps/cookbook/src/app/showcase/modal-showcase/modal-showcase.component.ts

@@ -101,6 +101,13 @@ export class ModalShowcaseComponent implements AfterViewInit {
       type: ['white', 'light'],
       defaultValue: 'white',
     },
+    {
+      name: 'type',
+      description:
+        'Sets the type of the footer. When inline the footer will have a transparent background and no shadow.',
+      type: ['fixed', 'inline'],
+      defaultValue: 'fixed',
+    },
   ];
 
   events: ApiDescriptionEvent[] = [

libs/designsystem/src/lib/components/modal/footer/modal-footer.component.scss

@@ -47,3 +47,8 @@ ion-footer {
 :host(.light) ion-footer {
   background-color: utils.get-color('background-color');
 }
+
+:host(.inline) ion-footer {
+  background: transparent;
+  box-shadow: none;
+}

libs/designsystem/src/lib/components/modal/footer/modal-footer.component.spec.ts

@@ -167,6 +167,31 @@ describe('ModalFooterComponent', () => {
     });
   });
 
+  describe('when inline type is set', () => {
+    it('should have a transparent background color', () => {
+      spectator = createHost(`<kirby-modal-footer type="inline"></kirby-modal-footer>`);
+      expect(spectator.query('ion-footer')).toHaveComputedStyle({
+        'background-color': 'transparent',
+      });
+    });
+
+    it('should have a transparent background even when themeColor is specified', () => {
+      spectator = createHost(
+        `<kirby-modal-footer type="inline" themeColor="primary"></kirby-modal-footer>`
+      );
+      expect(spectator.query('ion-footer')).toHaveComputedStyle({
+        'background-color': 'transparent',
+      });
+    });
+
+    it('should not show a box shadow', () => {
+      spectator = createHost(`<kirby-modal-footer type="inline"></kirby-modal-footer>`);
+      expect(spectator.query('ion-footer')).toHaveComputedStyle({
+        'box-shadow': 'none',
+      });
+    });
+  });
+
   // utility functions
   function setSafeAreaBottom() {
     modalFooterElement.style.setProperty('--kirby-safe-area-bottom', SAFE_AREA_BOTTOM_PX);

libs/designsystem/src/lib/components/modal/footer/modal-footer.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, HostBinding } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'kirby-modal-footer',
@@ -9,4 +9,8 @@ export class ModalFooterComponent {
   @HostBinding('class.snap-to-keyboard')
   @Input()
   snapToKeyboard = false;
+
+  @HostBinding('class')
+  @Input()
+  type: 'inline' | 'fixed' = 'fixed';
 }