Add "backgroundImageUrl" and custom css properties for controlling background of the card component

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

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { KirbyModule } from '@kirbydesign/designsystem';
+
+import { CardExampleComponent } from './card-example.component';
+import { CardBackgroundImageExampleComponent } from './examples/card-background-image-example';
+import { CardClickableExampleComponent } from './examples/card-clickable-example/card-clickable-example.component';
+import { CardCssBackgroundImageExampleComponent } from './examples/card-css-background-image-example';
+import { CardElevationsExampleComponent } from './examples/card-elevations-example/card-elevations-example.component';
+import { CardThemecolorExampleComponent } from './examples/card-themecolor-example/card-themecolor-example.component';
+
+const COMPONENT_DECLARATIONS = [
+  CardExampleComponent,
+  CardClickableExampleComponent,
+  CardElevationsExampleComponent,
+  CardThemecolorExampleComponent,
+  CardBackgroundImageExampleComponent,
+  CardCssBackgroundImageExampleComponent,
+];
+
+@NgModule({
+  declarations: COMPONENT_DECLARATIONS,
+  imports: [CommonModule, KirbyModule],
+  exports: COMPONENT_DECLARATIONS,
+})
+export class CardExampleModule {}

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

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+
+const config = {
+  selector: 'cookbook-card-background-image-example',
+  template: `<kirby-card
+  [hasPadding]="true"
+  themeColor="dark"
+  backgroundImageUrl="https://images.unsplash.com/photo-1512917774080-9991f1c4c750"
+>
+  <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>`,
+  style: `kirby-card {
+  min-height: 300px;
+}
+`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+  styles: [config.style],
+})
+export class CardBackgroundImageExampleComponent {
+  template: string = config.template;
+  style: string = config.style;
+}

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

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+
+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: `kirby-card {
+  --kirby-card-background-image: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(0, 0, 0, 0.6) 100%
+    ),
+    url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750');
+  min-height: 300px;
+}
+`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+  styles: [config.style],
+})
+export class CardCssBackgroundImageExampleComponent {
+  template: string = config.template;
+  style: string = config.style;
+}

apps/cookbook/src/app/examples/examples.common.ts

@@ -10,10 +10,6 @@ import { AvatarExampleComponent } from './avatar-example/avatar-example.componen
 import { ButtonExampleComponent } from './button-example/button-example.component';
 import { CalendarCardExampleComponent } from './calendar-example/calendar-card-example.component';
 import { CalendarExampleComponent } from './calendar-example/calendar-example.component';
-import { CardExampleComponent } from './card-example/card-example.component';
-import { CardClickableExampleComponent } from './card/card-clickable-example/card-clickable-example.component';
-import { CardElevationsExampleComponent } from './card/card-elevations-example/card-elevations-example.component';
-import { CardThemecolorExampleComponent } from './card/card-themecolor-example/card-themecolor-example.component';
 import { CheckboxExampleComponent } from './checkbox-example/checkbox-example.component';
 import { ChipExampleComponent } from './chip-example/chip-example.component';
 import { DividerExampleComponent } from './divider-example/divider-example.component';
@@ -75,10 +71,6 @@ export const COMPONENT_DECLARATIONS: any[] = [
   ExamplesComponent,
   ButtonExampleComponent,
   SlideButtonExampleComponent,
-  CardExampleComponent,
-  CardClickableExampleComponent,
-  CardThemecolorExampleComponent,
-  CardElevationsExampleComponent,
   ListExampleComponent,
   ListLoadOnDemandExampleComponent,
   ListSwipeExampleComponent,

apps/cookbook/src/app/examples/examples.module.ts

@@ -8,6 +8,7 @@ import { AccordionExampleModule } from './accordion-example/accordion-example.mo
 import { AvatarExampleModule } from './avatar-example/avatar-example.module';
 import { BadgeExampleModule } from './badge-example/badge-example.module';
 import { CardExampleComponent } from './card-example/card-example.component';
+import { CardExampleModule } from './card-example/card-example.module';
 import { ChartDeprecatedExampleModule } from './chart-deprecated-example/chart-deprecated-example.module';
 import { ChartExampleModule } from './chart-example/chart-example.module';
 import { CheckboxExampleModule } from './checkbox-example/checkbox-example.module';
@@ -41,6 +42,7 @@ const IMPORTS = [
   SegmentedControlExampleModule,
   ChartDeprecatedExampleModule,
   ChartExampleModule,
+  CardExampleModule,
   ItemSlidingExampleModule,
   BadgeExampleModule,
   ProgressCircleExampleModule,

apps/cookbook/src/app/showcase/card-showcase/card-showcase.component.html

@@ -59,14 +59,58 @@
     ></cookbook-card-example>
   </div>
   <cookbook-code-viewer [html]="exampleHtml"></cookbook-code-viewer>
-  <h4>Properties:</h4>
+  <h2>Colors</h2>
+  <p>
+    <cookbook-card-themecolor-example></cookbook-card-themecolor-example>
+  </p>
+
+  <h2>Elevation</h2>
+  <p>
+    <cookbook-card-elevations-example></cookbook-card-elevations-example>
+  </p>
+
+  <h2>Clickable</h2>
+  <p>
+    <cookbook-card-clickable-example></cookbook-card-clickable-example>
+  </p>
+
+  <h2>Background image</h2>
+  <p>
+    The card can use an image as a background by either using the
+    <code>backgroundImageUrl</code> input property or the
+    <code>--kirby-card-background-image</code> custom css property.
+  </p>
+  <p>
+    <cookbook-example-viewer
+      [html]="cssBackgroundImageExample.template"
+      [css]="cssBackgroundImageExample.style"
+    >
+      <cookbook-card-css-background-image-example
+        #cssBackgroundImageExample
+      ></cookbook-card-css-background-image-example>
+    </cookbook-example-viewer>
+    <cookbook-example-viewer
+      [html]="backgroundImageExample.template"
+      [css]="backgroundImageExample.style"
+    >
+      <cookbook-card-background-image-example #backgroundImageExample>
+      </cookbook-card-background-image-example>
+    </cookbook-example-viewer>
+  </p>
+
+  <br />
+
+  <kirby-divider [hasMargin]="true"></kirby-divider>
+
+  <h2>API Description</h2>
+  <h3>Properties:</h3>
   <cookbook-api-description-properties
     [properties]="properties"
   ></cookbook-api-description-properties>
-  <h4>Colors:</h4>
-  <cookbook-card-themecolor-example></cookbook-card-themecolor-example>
-  <h4>Elevation:</h4>
-  <cookbook-card-elevations-example></cookbook-card-elevations-example>
-  <h4>Clickable:</h4>
-  <cookbook-card-clickable-example></cookbook-card-clickable-example>
+  <h3>Css Custom Properties</h3>
+  <cookbook-api-description-properties
+    [properties]="customCssProperties"
+    [columns]="customCssPropertiesColumns"
+  >
+  </cookbook-api-description-properties>
 </div>

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

@@ -1,5 +1,8 @@
 import { Component } from '@angular/core';
-import { ApiDescriptionProperty } from '~/app/shared/api-description/api-description-properties/api-description-properties.component';
+import {
+  ApiDescriptionProperty,
+  ApiDescriptionPropertyColumns,
+} from '~/app/shared/api-description/api-description-properties/api-description-properties.component';
 
 @Component({
   selector: 'cookbook-card-showcase',
@@ -22,6 +25,12 @@ export class CardShowcaseComponent {
       defaultValue: 'null',
       type: ['string'],
     },
+    {
+      name: 'backgroundImageUrl',
+      description: '(Optional) Provided a valid URL will set the background image of the card.',
+      defaultValue: '',
+      type: ['string'],
+    },
     {
       name: 'mode',
       description:
@@ -52,4 +61,32 @@ export class CardShowcaseComponent {
       ],
     },
   ];
+
+  customCssPropertiesColumns: ApiDescriptionPropertyColumns = {
+    name: 'Attribute',
+    description: 'Description',
+    default: 'Default',
+  };
+
+  customCssProperties: ApiDescriptionProperty[] = [
+    {
+      name: '--kirby-card-background-image',
+      description: "Sets the 'background-image' property of the card.",
+    },
+    {
+      name: '--kirby-card-background-repeat',
+      description: "Sets the 'background-repeat' property of the card",
+      defaultValue: 'no-repeat',
+    },
+    {
+      name: '--kirby-card-background-position',
+      description: "Sets the 'background-position' property of the card",
+      defaultValue: 'center',
+    },
+    {
+      name: '--kirby-card-background-size',
+      description: "Sets the 'background-size' property of the card",
+      defaultValue: 'cover',
+    },
+  ];
 }

libs/designsystem/src/lib/components/card/card.component.scss

@@ -10,6 +10,10 @@
   box-shadow: utils.get-elevation(2);
   color: var(--kirby-card-main-color);
   background-color: var(--kirby-card-main-background-color);
+  background-image: var(--kirby-card-background-image);
+  background-repeat: var(--kirby-card-background-repeat, no-repeat);
+  background-position: var(--kirby-card-background-position, center);
+  background-size: var(--kirby-card-background-size, cover);
   display: flex;
   flex-direction: column;
   justify-content: space-between;

libs/designsystem/src/lib/components/card/card.component.spec.ts

@@ -22,6 +22,30 @@ describe('CardComponent', () => {
     });
   });
 
+  describe("with 'backgroundImageUrl' set", () => {
+    const testUrl = 'https://notarealurl/';
+    let cardElement: HTMLElement;
+
+    beforeEach(() => {
+      spectator = createHost(`<kirby-card backgroundImageUrl='${testUrl}'></kirby-card>`);
+      cardElement = spectator.queryHost('kirby-card');
+    });
+
+    it("should use the url for the 'background-image' property", () => {
+      expect(cardElement).toHaveComputedStyle({
+        'background-image': `url("${testUrl}")`,
+      });
+    });
+
+    it('should have correct defaults for properties related to background', () => {
+      expect(cardElement).toHaveComputedStyle({
+        'background-repeat': 'no-repeat',
+        'background-position': '50% 50%',
+        'background-size': 'cover',
+      });
+    });
+  });
+
   describe('with mode attribute', () => {
     beforeEach(() => {
       spectator = createHost('<kirby-card mode="flat"></kirby-card>');

libs/designsystem/src/lib/components/card/card.component.ts

@@ -20,6 +20,14 @@ export class CardComponent implements OnInit, OnDestroy {
   @Input() title: string;
   @Input() subtitle: string;
 
+  @HostBinding('style.--kirby-card-background-image')
+  _backgroundImage: string;
+
+  @Input()
+  set backgroundImageUrl(value: string) {
+    this._backgroundImage = `url('${value}')`;
+  }
+
   @Input()
   hasPadding: boolean;