From 5e773acbd543d5497d265447c09798a6c5d989f6 Mon Sep 17 00:00:00 2001
From: RasmusKjeldgaard <rkk@bankdata.dk>
Date: Thu, 6 Feb 2025 14:32:04 +0100
Subject: [PATCH] More details

---
 .../angular/skeleton-loader/src/index.ts      |  2 +-
 .../src/skeleton-loader.component.scss        | 57 ++++++++++++-----
 .../src/skeleton-loader.component.stories.ts  | 63 +++++++++++++------
 .../src/skeleton-loader.component.ts          | 18 ++++--
 4 files changed, 100 insertions(+), 40 deletions(-)

diff --git a/libs/extensions/angular/skeleton-loader/src/index.ts b/libs/extensions/angular/skeleton-loader/src/index.ts
index 21cf5fc797..8ea16d5b95 100644
--- a/libs/extensions/angular/skeleton-loader/src/index.ts
+++ b/libs/extensions/angular/skeleton-loader/src/index.ts
@@ -1 +1 @@
-export { SkeletonLoaderComponent, SkeletonLoaderTheme } from './skeleton-loader.component';
+export { SkeletonLoaderComponent } from './skeleton-loader.component';
diff --git a/libs/extensions/angular/skeleton-loader/src/skeleton-loader.component.scss b/libs/extensions/angular/skeleton-loader/src/skeleton-loader.component.scss
index f22c60cf63..bacf4b7b51 100644
--- a/libs/extensions/angular/skeleton-loader/src/skeleton-loader.component.scss
+++ b/libs/extensions/angular/skeleton-loader/src/skeleton-loader.component.scss
@@ -1,30 +1,36 @@
 @use '@kirbydesign/core/src/scss/utils';
 
+$dark-theme-gradient: linear-gradient(
+  to right,
+  rgb(255 255 255 / 16%) 0%,
+  rgb(255 255 255 / 28%) 25%,
+  rgb(255 255 255 / 16%) 50%
+);
+$light-theme-gradient: linear-gradient(
+  to right,
+  rgb(40 40 40 / 6%) 0%,
+  rgb(40 40 40 / 12%) 25%,
+  rgb(40 40 40 / 6%) 50%
+);
+
 :host {
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: var(--kirby-border-radius-xs);
   height: var(--kirby-font-size-n);
 }
 
-:host.dark ion-skeleton-text {
-  background-image: linear-gradient(
-    to right,
-    rgb(40 40 40 / 6%) 0%,
-    rgb(40 40 40 / 12%) 25%,
-    rgb(40 40 40 / 6%) 50%
-  );
+:host.rectangle {
+  border-radius: var(--kirby-border-radius-xs);
 }
 
-:host.light ion-skeleton-text {
-  background-image: linear-gradient(
-    to right,
-    rgb(255 255 255 / 16%) 0%,
-    rgb(255 255 255 / 28%) 25%,
-    rgb(255 255 255 / 16%) 50%
-  );
+:host.circle {
+  border-radius: var(--kirby-border-radius-circle);
+}
+
+:host.pill {
+  border-radius: var(--kirby-border-radius-pill);
 }
 
 ion-skeleton-text {
@@ -32,3 +38,24 @@ ion-skeleton-text {
   animation-duration: 1.5s;
   background-clip: border-box;
 }
+
+:host.dark ion-skeleton-text {
+  background-image: $dark-theme-gradient;
+}
+
+:host.light ion-skeleton-text {
+  background-image: $light-theme-gradient;
+}
+
+:host-context(.kirby-color-brightness-white),
+:host-context(.kirby-color-brightness-light) {
+  ion-skeleton-text {
+    background-image: $light-theme-gradient;
+  }
+}
+
+:host-context(.kirby-color-brightness-dark) {
+  ion-skeleton-text {
+    background-image: $dark-theme-gradient;
+  }
+}
diff --git a/libs/extensions/angular/skeleton-loader/src/skeleton-loader.component.stories.ts b/libs/extensions/angular/skeleton-loader/src/skeleton-loader.component.stories.ts
index dd33cbf064..6692ce63e1 100644
--- a/libs/extensions/angular/skeleton-loader/src/skeleton-loader.component.stories.ts
+++ b/libs/extensions/angular/skeleton-loader/src/skeleton-loader.component.stories.ts
@@ -36,8 +36,12 @@ const meta: Meta<SkeletonLoaderComponent> = {
       imports: [ButtonComponent, CardModule, ItemModule],
     }),
   ],
+  args: {
+    theme: 'light',
+    shape: 'rectangle',
+  },
   argTypes: {
-    themeColor: {
+    theme: {
       control: {
         type: 'select',
         options: ['light', 'dark'],
@@ -49,7 +53,7 @@ export default meta;
 type Story = StoryObj<SkeletonLoaderComponent>;
 
 /**
- * By default the skeleton loader uses the dark theme, and fills its parent containers width, while maintaining a height matching the browsers base font size.
+ * By default the skeleton loader fills its parent containers width, while maintaining a height matching the browsers base font size.
  */
 export const Default: Story = {
   render: (args) => ({
@@ -60,13 +64,29 @@ export const Default: Story = {
   }),
 };
 
+/**
+ * The skeleton loader can be styled as a rectangle, pill or circle.
+ */
+export const Shape: Story = {
+  render: (args) => ({
+    props: args,
+    styles: ['div { display: flex; gap: var(--kirby-spacing-xs); flex-direction: column; }'],
+    template: `<div>
+      <kirby-x-skeleton-loader style="width: 100px;" shape="rectangle"></kirby-x-skeleton-loader>
+      <kirby-x-skeleton-loader style="width: 100px; height: var(--kirby-spacing-l);" shape="pill"></kirby-x-skeleton-loader>
+      <kirby-x-skeleton-loader style="height: var(--kirby-spacing-xxxl); width: var(--kirby-spacing-xxxl);" shape="circle"></kirby-x-skeleton-loader>
+    </div>`,
+  }),
+  argTypes: {
+    theme: { control: { disable: true } },
+    shape: { control: { disable: true } },
+  },
+};
+
 /**
  * A light skeleton loader on a dark background.
  */
 export const DarkCard: Story = {
-  args: {
-    themeColor: 'light',
-  },
   render: (args) => ({
     props: args,
     styles: [
@@ -74,31 +94,32 @@ export const DarkCard: Story = {
       ' .text { display: flex; flex-direction: column; justify-content: space-evenly; height: 50px; }',
       ' .end { align-items: flex-end }',
     ],
-    template: `<kirby-card [themeColor]="'dark'" class="skeleton-card">
+    template: `<kirby-card themeColor="dark" class="skeleton-card">
       <kirby-item style="--kirby-item-background: transparent;">
         <div slot="start">
-          <kirby-x-skeleton-loader style="height: var(--kirby-spacing-xxxl); width: var(--kirby-spacing-xxxl); border-radius: var(--kirby-border-radius-circle);" ${argsToTemplate(args)}></kirby-x-skeleton-loader>
+          <kirby-x-skeleton-loader style="height: var(--kirby-spacing-xxxl); width: var(--kirby-spacing-xxxl); border-radius: var(--kirby-border-radius-circle);"></kirby-x-skeleton-loader>
         </div>
         <div class="text">
-          <kirby-x-skeleton-loader style="height: var(--kirby-font-size-m); width: 100px;" ${argsToTemplate(args)}></kirby-x-skeleton-loader>
-          <kirby-x-skeleton-loader style="height: var(--kirby-font-size-n); width: 50px;" ${argsToTemplate(args)}></kirby-x-skeleton-loader>
+          <kirby-x-skeleton-loader style="height: var(--kirby-font-size-m); width: 100px;"></kirby-x-skeleton-loader>
+          <kirby-x-skeleton-loader style="width: 50px;"></kirby-x-skeleton-loader>
         </div>
         <div class="text end" slot="end">
-          <kirby-x-skeleton-loader style="height: var(--kirby-font-size-m); width: 100px;" ${argsToTemplate(args)}></kirby-x-skeleton-loader>
-          <kirby-x-skeleton-loader style="height: var(--kirby-font-size-n); width: 50px;" ${argsToTemplate(args)}></kirby-x-skeleton-loader>
+          <kirby-x-skeleton-loader style="height: var(--kirby-font-size-m); width: 100px;"></kirby-x-skeleton-loader>
+          <kirby-x-skeleton-loader style="width: 50px;"></kirby-x-skeleton-loader>
         </div>
       </kirby-item>
     </kirby-card>`,
   }),
+  argTypes: {
+    theme: { control: { disable: true } },
+    shape: { control: { disable: true } },
+  },
 };
 
 /**
  * A dark skeleton loader on a light background.
  */
 export const LightCard: Story = {
-  args: {
-    themeColor: 'dark',
-  },
   render: (args) => ({
     props: args,
     styles: [
@@ -109,17 +130,21 @@ export const LightCard: Story = {
     template: `<kirby-card class="skeleton-card">
       <kirby-item style="--kirby-item-background: transparent;">
         <div slot="start">
-          <kirby-x-skeleton-loader style="height: var(--kirby-spacing-xxxl); width: var(--kirby-spacing-xxxl); border-radius: var(--kirby-border-radius-circle);" ${argsToTemplate(args)}></kirby-x-skeleton-loader>
+          <kirby-x-skeleton-loader style="height: var(--kirby-spacing-xxxl); width: var(--kirby-spacing-xxxl); border-radius: var(--kirby-border-radius-circle);"></kirby-x-skeleton-loader>
         </div>
         <div class="text">
-          <kirby-x-skeleton-loader style="height: var(--kirby-font-size-m); width: 100px;" ${argsToTemplate(args)}></kirby-x-skeleton-loader>
-          <kirby-x-skeleton-loader style="height: var(--kirby-font-size-n); width: 50px;" ${argsToTemplate(args)}></kirby-x-skeleton-loader>
+          <kirby-x-skeleton-loader style="height: var(--kirby-font-size-m); width: 100px;"></kirby-x-skeleton-loader>
+          <kirby-x-skeleton-loader style="width: 50px;"></kirby-x-skeleton-loader>
         </div>
         <div class="text end" slot="end">
-          <kirby-x-skeleton-loader style="height: var(--kirby-font-size-m); width: 100px;" ${argsToTemplate(args)}></kirby-x-skeleton-loader>
-          <kirby-x-skeleton-loader style="height: var(--kirby-font-size-n); width: 50px;" ${argsToTemplate(args)}></kirby-x-skeleton-loader>
+          <kirby-x-skeleton-loader style="height: var(--kirby-font-size-m); width: 100px;"></kirby-x-skeleton-loader>
+          <kirby-x-skeleton-loader style="width: 50px;"></kirby-x-skeleton-loader>
         </div>
       </kirby-item>
     </kirby-card>`,
   }),
+  argTypes: {
+    theme: { control: { disable: true } },
+    shape: { control: { disable: true } },
+  },
 };
diff --git a/libs/extensions/angular/skeleton-loader/src/skeleton-loader.component.ts b/libs/extensions/angular/skeleton-loader/src/skeleton-loader.component.ts
index 6db9b97f0e..a17a06ec52 100644
--- a/libs/extensions/angular/skeleton-loader/src/skeleton-loader.component.ts
+++ b/libs/extensions/angular/skeleton-loader/src/skeleton-loader.component.ts
@@ -4,8 +4,6 @@ import { CardModule } from '@kirbydesign/designsystem/card';
 import { IconModule } from '@kirbydesign/designsystem/icon';
 import { IonSkeletonText } from '@ionic/angular/standalone';
 
-export type SkeletonLoaderTheme = 'light' | 'dark';
-
 @Component({
   selector: 'kirby-x-skeleton-loader',
   standalone: true,
@@ -15,9 +13,19 @@ export type SkeletonLoaderTheme = 'light' | 'dark';
 })
 export class SkeletonLoaderComponent {
   /**
-   * The theme for the skeleton loader to use for gradient color.
+   * The theme for the skeleton loader to use for gradient color. Theme is automatically set when used inside a themed kirby-card.
+   */
+  @Input()
+  theme: 'light' | 'dark' = 'light';
+
+  /**
+   * The shape of the skeleton loader.
    */
-  @HostBinding('class')
   @Input()
-  themeColor: SkeletonLoaderTheme = 'dark';
+  shape: 'rectangle' | 'circle' | 'pill' = 'rectangle';
+
+  @HostBinding('class')
+  get _cssClass() {
+    return [this.theme, this.shape].filter((cssClass) => !!cssClass);
+  }
 }