New Kirby Slides design (#2949)

Co-authored-by: Jakob Engelbrecht <[email protected]>

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

@@ -40,7 +40,8 @@ import { ReorderListExampleComponent } from './reorder-list-example/reorder-list
 import { SectionHeaderExampleComponent } from './section-header-example/section-header-example.component';
 import { SegmentedControlExampleComponent } from './segmented-control-example/segmented-control-example.component';
 import { SlideButtonExampleComponent } from './slide-button-example/slide-button-example.component';
-import { SlidesExampleComponent } from './slides-example/slides-example.component';
+import { SlidesSimpleExampleComponent } from './slides-example/slides-simple-example/slides-simple-example.component';
+import { SlidesAdvancedExampleComponent } from './slides-example/slides-advanced-example/slides-advanced-example.component';
 import { SpinnerExampleComponent } from './spinner-example/spinner-example.component';
 import { StylingHtmlListsExampleComponent } from './styling-html-lists-example/styling-html-lists-example.component';
 import { TabExampleComponent } from './tabs-example/tab/tab-example.component';
@@ -107,7 +108,8 @@ export const COMPONENT_DECLARATIONS: any[] = [
   DropdownExampleComponent,
   ProgressCircleExampleComponent,
   FlagExampleComponent,
-  SlidesExampleComponent,
+  SlidesSimpleExampleComponent,
+  SlidesAdvancedExampleComponent,
   AccordionExampleComponent,
   LinkExampleComponent,
   PagePullToRefreshExampleComponent,

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

@@ -65,7 +65,8 @@ import { ReorderListExampleComponent } from './reorder-list-example/reorder-list
 import { SectionHeaderExampleComponent } from './section-header-example/section-header-example.component';
 import { SegmentedControlExampleComponent } from './segmented-control-example/segmented-control-example.component';
 import { SlideButtonExampleComponent } from './slide-button-example/slide-button-example.component';
-import { SlidesExampleComponent } from './slides-example/slides-example.component';
+import { SlidesSimpleExampleComponent } from './slides-example/slides-simple-example/slides-simple-example.component';
+import { SlidesAdvancedExampleComponent } from './slides-example/slides-advanced-example/slides-advanced-example.component';
 import { SpinnerExampleComponent } from './spinner-example/spinner-example.component';
 import { StylingHtmlListsExampleComponent } from './styling-html-lists-example/styling-html-lists-example.component';
 import { TabExampleComponent } from './tabs-example/tab/tab-example.component';
@@ -531,7 +532,11 @@ export const routes: Routes = [
   },
   {
     path: 'slides',
-    component: SlidesExampleComponent,
+    component: SlidesSimpleExampleComponent,
+  },
+  {
+    path: 'slides-advanced',
+    component: SlidesAdvancedExampleComponent,
   },
   {
     path: 'accordion',

apps/cookbook/src/app/examples/slides-example/slides-advanced-example/slides-advanced-example.component.html

@@ -0,0 +1,22 @@
+<kirby-slides
+  [slidesOptions]="config"
+  [slides]="slides"
+  [showNavigation]="true"
+  [title]="'Title'"
+  (slideChange)="getDataFromActiveSlide($event)"
+  #slidesInstance
+>
+  <kirby-card *kirbySlide="let slide; let i = index" [hasPadding]="true">
+    <kirby-card-header [title]="slide.title" [subtitle]="slide.subtitle"></kirby-card-header>
+    <div>{{ slide.cardContent }}</div>
+  </kirby-card>
+  <button kirby-button attentionLevel="3" size="xs" (click)="showAll()">See all</button>
+</kirby-slides>
+
+<button
+  kirby-button
+  (click)="slidesInstance.slideTo(3)"
+  style="display: block; margin: 24px auto 0"
+>
+  Activate slide no. 4
+</button>

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

@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { KirbySwiperOptions, SelectedSlide } from '@kirbydesign/designsystem/slide';
+import { ToastConfig, ToastController } from '@kirbydesign/designsystem/toast';
+
+@Component({
+  styleUrls: ['../slides-example.shared.scss'],
+  templateUrl: './slides-advanced-example.component.html',
+})
+export class SlidesAdvancedExampleComponent {
+  constructor(private toastController: ToastController) {}
+
+  config: KirbySwiperOptions = {
+    slidesPerView: 1.1,
+    breakpoints: {
+      768: {
+        centeredSlides: false,
+        slidesPerView: 2,
+        slidesPerGroup: 1,
+      },
+    },
+  };
+
+  slides = [...Array(9).keys()].map((number) => ({
+    title: `Slide ${number + 1}`,
+    subtitle: `Subtitle ${number + 1}`,
+    cardContent: `Lorem ipsum dolor sit amet consectetur adipisicing elit.`,
+  }));
+
+  getDataFromActiveSlide(selectedSlide: SelectedSlide) {
+    const config: ToastConfig = {
+      message: `Changed to ${selectedSlide.slide.title}`,
+      messageType: 'success',
+      durationInMs: 1000,
+    };
+    this.toastController.showToast(config);
+  }
+
+  showAll() {
+    const config: ToastConfig = {
+      message: `See all... (your handler here)`,
+      messageType: 'success',
+      durationInMs: 2000,
+    };
+    this.toastController.showToast(config);
+  }
+}

apps/cookbook/src/app/examples/slides-example/slides-code-snippets.ts

@@ -0,0 +1,76 @@
+import { DesignTokenHelper } from '@kirbydesign/designsystem/helpers';
+
+const desktopBreakpoint = parseInt(DesignTokenHelper.breakpoints.medium) - 1;
+const spaceBetween = parseInt(DesignTokenHelper.size('s'));
+const transitionDuration = parseInt(DesignTokenHelper.transitionDuration('long'));
+
+export const slidesDefaultConfig = `defaultConfig: KirbySwiperOptions = {
+  centeredSlides: true,
+  centeredSlidesBounds: true,
+  slidesPerView: 1.2,
+  slidesPerGroup: 1,
+  breakpoints: {
+    ${desktopBreakpoint}: {
+      centeredSlides: false,
+      slidesPerView: 3,
+      slidesPerGroup: 3,
+    },
+  },
+  spaceBetween: ${spaceBetween},
+  speed: ${transitionDuration},
+  pagination: {
+    el: '.pagination',
+    type: 'bullets',
+  },
+  navigation: {
+    nextEl: '.swiper-button-prev',
+    prevEl: '.swiper-button-next',
+  },
+  on: {
+    slideChange: (swiper) => {
+      this.slideChange.emit({
+        slide: this.slides[swiper.activeIndex],
+        index: swiper.activeIndex,
+      });
+    },
+  },
+};`;
+
+export const defaultExampleComponentHTML = `<kirby-slides [slides]="slides" [title]="'Title'" [showNavigation]="true">
+  <kirby-card *kirbySlide="let slide; let i = index" [hasPadding]="true">
+    <kirby-card-header [title]="slide.title" [subtitle]="slide.subtitle"></kirby-card-header>
+    <div>{{ slide.cardContent }}</div>
+  </kirby-card>
+</kirby-slides>`;
+
+export const advancedExampleComponentHTML = `<kirby-slides
+  [slides]="slides"
+  (slideChange)="getDataFromActiveSlide($event)"
+  [slidesOptions]="customConfig"
+  [showNavigation]="true"
+  [title]="'Title'"
+  #slidesInstance>
+
+  <kirby-card *kirbySlide="let slide; let i = index" [hasPadding]="true">
+    <kirby-card-header [title]="slide.title" [subtitle]="slide.subtitle"></kirby-card-header>
+    <div>{{ slide.cardContent }}</div>
+  </kirby-card>
+
+  <button kirby-button attentionLevel="3" size="xs" (click)="showAll()">See all</button>
+
+</kirby-slides>
+
+<button kirby-button (click)="slidesInstance.slideTo(3)" style="display: block; margin: 24px auto 0">
+  Activate slide no. 4
+</button>`;
+
+export const customConfigExample = `customConfig: KirbySwiperOptions = {
+  slidesPerView: 1.1,
+  breakpoints: {
+    768: {
+      centeredSlides: false,
+      slidesPerView: 2,
+      slidesPerGroup: 1,
+    },
+  },
+};`;

apps/cookbook/src/app/examples/slides-example/slides-example.shared.scss

@@ -0,0 +1,10 @@
+@use '@kirbydesign/core/src/scss/utils';
+@use '../examples.shared';
+
+:host {
+  // We need to set these in the examples to ensure Slides on small screens
+  // stretch to viewport edges, i.e. they are used to create negative margins
+  // to counteract page padding (when used within kirby-page these vars are already set):
+  --padding-start: #{utils.size('s')};
+  --padding-end: #{utils.size('s')};
+}

apps/cookbook/src/app/examples/slides-example/slides-simple-example/slides-simple-example.component.html

@@ -0,0 +1,8 @@
+<kirby-slides [slides]="slides" [title]="'Title'" [showNavigation]="true">
+  <kirby-card *kirbySlide="let slide; let i = index" [hasPadding]="true">
+    <kirby-card-header [title]="slide.title" [subtitle]="slide.subtitle"></kirby-card-header>
+    <div class="card-content">
+      {{ slide.cardContent }}
+    </div>
+  </kirby-card>
+</kirby-slides>

apps/cookbook/src/app/examples/slides-example/slides-simple-example/slides-simple-example.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { SelectedSlide } from '@kirbydesign/designsystem/slide';
+import { ToastConfig, ToastController } from '@kirbydesign/designsystem/toast';
+
+@Component({
+  styleUrls: ['../slides-example.shared.scss'],
+  templateUrl: './slides-simple-example.component.html',
+})
+export class SlidesSimpleExampleComponent {
+  constructor(private toastController: ToastController) {}
+
+  slides = [...Array(9).keys()].map((number) => ({
+    title: `Slide ${number + 1}`,
+    subtitle: `Subtitle ${number + 1}`,
+    cardContent: `Lorem ipsum dolor sit amet consectetur adipisicing elit.`,
+  }));
+
+  getDataFromActiveSlide(selectedSlide: SelectedSlide) {
+    const config: ToastConfig = {
+      message: `Changed to ${selectedSlide.slide.title}`,
+      messageType: 'success',
+      durationInMs: 1000,
+    };
+    this.toastController.showToast(config);
+  }
+}