More details

kirbydesign · Feb 6, 2025 · 5e773ac · 5e773ac
1 parent 1a4e723
commit 5e773ac
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 40 deletions.
diff --git 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
@@ -1,34 +1,61 @@
 @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 {
   position: relative;
   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
@@ -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,45 +64,62 @@ 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: [
       ' .skeleton-card { width: 350px; padding: 6px 0; }',
       ' .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
@@ -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);
+  }
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { SkeletonLoaderComponent, SkeletonLoaderTheme } from './skeleton-loader.component';
		export { SkeletonLoaderComponent } from './skeleton-loader.component';