feat(card): create examples and add localization to card component

projects/demo/src/app/components-example/card/card-appearance-example/card-appearance-example.component.html

@@ -0,0 +1,11 @@
+<div class="flex gap-ids-container-gap-12">
+  <ids-card appearance="filled">
+    <ids-card-body>{{ "EXAMPLES.CARD.APPEARANCES.CONTENT.FILLED" | translate }}</ids-card-body>
+  </ids-card>
+  <ids-card appearance="outlined">
+    <ids-card-body>{{ "EXAMPLES.CARD.APPEARANCES.CONTENT.OUTLINED" | translate }}</ids-card-body>
+  </ids-card>
+  <ids-card appearance="elevated">
+    <ids-card-body>{{ "EXAMPLES.CARD.APPEARANCES.CONTENT.ELEVATED" | translate }}</ids-card-body>
+  </ids-card>
+</div>

projects/demo/src/app/components-example/card/card-appearance-example/card-appearance-example.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { IdsCardComponent } from '@i-cell/ids-angular/card';
+import { IdsCardBodyDirective } from '@i-cell/ids-angular/card/card-body.directive';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-card-appearance-example',
+  imports: [
+    IdsCardComponent,
+    IdsCardBodyDirective,
+    TranslateModule,
+  ],
+  templateUrl: './card-appearance-example.component.html',
+})
+export class CardAppearanceExampleComponent {}

projects/demo/src/app/components-example/card/card-clickable-example/card-clickable-example.component.html

@@ -0,0 +1,9 @@
+<div class="flex flex-wrap items-start gap-ids-container-gap-12">
+  <ids-card appearance="elevated" (click)="onCardClick()">
+    <ids-card-body>{{ "EXAMPLES.CARD.CLICKABLE.CONTENT.CLICKABLE" | translate }}</ids-card-body>
+  </ids-card>
+
+  <ids-card appearance="elevated" [disabled]="true" (click)="onCardClick()">
+    <ids-card-body>{{ "EXAMPLES.CARD.CLICKABLE.CONTENT.DISABLED" | translate }}</ids-card-body>
+  </ids-card>
+</div>

projects/demo/src/app/components-example/card/card-clickable-example/card-clickable-example.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { IdsCardComponent } from '@i-cell/ids-angular/card';
+import { IdsCardBodyDirective } from '@i-cell/ids-angular/card/card-body.directive';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-card-clickable-example',
+  imports: [
+    IdsCardComponent,
+    IdsCardBodyDirective,
+    TranslateModule,
+  ],
+  templateUrl: './card-clickable-example.component.html',
+})
+export class CardClickableExampleComponent {
+  public onCardClick(): void {
+    console.info('Card clicked');
+  }
+}

projects/demo/src/app/components-example/card/card-examples.ts

@@ -0,0 +1,96 @@
+import { CardAppearanceExampleComponent } from './card-appearance-example/card-appearance-example.component';
+import { CardClickableExampleComponent } from './card-clickable-example/card-clickable-example.component';
+import { CardFullCompositionExampleComponent } from './card-full-composition-example/card-full-composition-example.component';
+import { CardMediaExampleComponent } from './card-media-example/card-media-example.component';
+import { CardOrientationExampleComponent } from './card-orientation-example/card-orientation-example.component';
+import { CardSizeExampleComponent } from './card-size-example/card-size-example.component';
+import { CardVariantsExampleComponent } from './card-variants-example/card-variants-example.component';
+
+import { IdsExampleDef } from '../../shared/ids-example-viewer/ids-example.model';
+
+export const CARD_EXAMPLES: IdsExampleDef[] = [
+  {
+    id: 'card-appearances',
+    title: 'EXAMPLES.CARD.APPEARANCES.TITLE',
+    description: 'EXAMPLES.CARD.APPEARANCES.DESCRIPTION',
+    component: CardAppearanceExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/card/card-appearance-example/card-appearance-example.component.html',
+        TSpath: 'assets/examples/card/card-appearance-example/card-appearance-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'card-variants',
+    title: 'EXAMPLES.CARD.VARIANTS.TITLE',
+    description: 'EXAMPLES.CARD.VARIANTS.DESCRIPTION',
+    component: CardVariantsExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/card/card-variants-example/card-variants-example.component.html',
+        TSpath: 'assets/examples/card/card-variants-example/card-variants-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'card-sizes',
+    title: 'EXAMPLES.CARD.SIZES.TITLE',
+    description: 'EXAMPLES.CARD.SIZES.DESCRIPTION',
+    component: CardSizeExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/card/card-size-example/card-size-example.component.html',
+        TSpath: 'assets/examples/card/card-size-example/card-size-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'card-orientation',
+    title: 'EXAMPLES.CARD.ORIENTATION.TITLE',
+    description: 'EXAMPLES.CARD.ORIENTATION.DESCRIPTION',
+    component: CardOrientationExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/card/card-orientation-example/card-orientation-example.component.html',
+        TSpath: 'assets/examples/card/card-orientation-example/card-orientation-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'card-media',
+    title: 'EXAMPLES.CARD.MEDIA.TITLE',
+    description: 'EXAMPLES.CARD.MEDIA.DESCRIPTION',
+    component: CardMediaExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/card/card-media-example/card-media-example.component.html',
+        TSpath: 'assets/examples/card/card-media-example/card-media-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'card-clickable',
+    title: 'EXAMPLES.CARD.CLICKABLE.TITLE',
+    description: 'EXAMPLES.CARD.CLICKABLE.DESCRIPTION',
+    component: CardClickableExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/card/card-clickable-example/card-clickable-example.component.html',
+        TSpath: 'assets/examples/card/card-clickable-example/card-clickable-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'card-full-composition',
+    title: 'EXAMPLES.CARD.FULL_COMPOSITION.TITLE',
+    description: 'EXAMPLES.CARD.FULL_COMPOSITION.DESCRIPTION',
+    component: CardFullCompositionExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/card/card-full-composition-example/card-full-composition-example.component.html',
+        TSpath: 'assets/examples/card/card-full-composition-example/card-full-composition-example.component.ts',
+      },
+    ],
+  },
+];

projects/demo/src/app/components-example/card/card-full-composition-example/card-full-composition-example.component.html

@@ -0,0 +1,18 @@
+<ids-card appearance="elevated" class="max-w-64">
+  <header idsCardHeader>
+    <h2 idsCardTitle>{{ "EXAMPLES.CARD.FULL_COMPOSITION.CONTENT.TITLE" | translate }}</h2>
+    <h3 idsCardSubtitle>{{ "EXAMPLES.CARD.FULL_COMPOSITION.CONTENT.SUBTITLE" | translate }}</h3>
+  </header>
+  <img
+    idsCardMedia
+    class="h-32 object-cover"
+    src="https://images.photowall.com/products/50608/dandelion-meadow.jpg?h=699&q=85"
+    alt="Dandelion meadow"
+  />
+  <ids-card-body>
+    {{ "EXAMPLES.CARD.FULL_COMPOSITION.CONTENT.BODY" | translate }}
+  </ids-card-body>
+  <footer idsCardFooter>
+    <button type="button" idsButton appearance="text">{{ "EXAMPLES.CARD.FULL_COMPOSITION.CONTENT.FOOTER_BUTTON" | translate }}</button>
+  </footer>
+</ids-card>

projects/demo/src/app/components-example/card/card-full-composition-example/card-full-composition-example.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsCardComponent } from '@i-cell/ids-angular/card';
+import { IdsCardBodyDirective } from '@i-cell/ids-angular/card/card-body.directive';
+import { IdsCardFooterDirective } from '@i-cell/ids-angular/card/card-footer.directive';
+import { IdsCardHeaderComponent } from '@i-cell/ids-angular/card/card-header.component';
+import { IdsCardMediaDirective } from '@i-cell/ids-angular/card/card-media.directive';
+import { IdsCardSubtitleDirective } from '@i-cell/ids-angular/card/card-subtitle.directive';
+import { IdsCardTitleDirective } from '@i-cell/ids-angular/card/card-title.directive';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-card-full-composition-example',
+  imports: [
+    IdsCardComponent,
+    IdsCardHeaderComponent,
+    IdsCardTitleDirective,
+    IdsCardSubtitleDirective,
+    IdsCardMediaDirective,
+    IdsCardBodyDirective,
+    IdsCardFooterDirective,
+    IdsButtonComponent,
+    TranslateModule,
+  ],
+  templateUrl: './card-full-composition-example.component.html',
+})
+export class CardFullCompositionExampleComponent {}

projects/demo/src/app/components-example/card/card-media-example/card-media-example.component.html

@@ -0,0 +1,23 @@
+<div class="flex flex-wrap items-start gap-ids-container-gap-12">
+  <ids-card class="max-w-64" appearance="elevated">
+    <img
+      idsCardMedia
+      class="h-32 object-cover"
+      src="https://images.photowall.com/products/50608/dandelion-meadow.jpg?h=699&q=85"
+      alt=""
+      [stretch]="true"
+    />
+    <ids-card-body>{{ "EXAMPLES.CARD.MEDIA.CONTENT.STRETCHED" | translate }}</ids-card-body>
+  </ids-card>
+
+  <ids-card class="max-w-64" appearance="elevated">
+    <img
+      idsCardMedia
+      class="h-32 object-cover"
+      src="https://images.photowall.com/products/50608/dandelion-meadow.jpg?h=699&q=85"
+      alt=""
+      [stretch]="false"
+    />
+    <ids-card-body>{{ "EXAMPLES.CARD.MEDIA.CONTENT.NON_STRETCHED" | translate }}</ids-card-body>
+  </ids-card>
+</div>

projects/demo/src/app/components-example/card/card-media-example/card-media-example.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { IdsCardComponent } from '@i-cell/ids-angular/card';
+import { IdsCardBodyDirective } from '@i-cell/ids-angular/card/card-body.directive';
+import { IdsCardMediaDirective } from '@i-cell/ids-angular/card/card-media.directive';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-card-media-example',
+  imports: [
+    IdsCardComponent,
+    IdsCardBodyDirective,
+    IdsCardMediaDirective,
+    TranslateModule,
+  ],
+  templateUrl: './card-media-example.component.html',
+})
+export class CardMediaExampleComponent {}

projects/demo/src/app/components-example/card/card-orientation-example/card-orientation-example.component.html

@@ -0,0 +1,20 @@
+<div class="flex flex-wrap items-start gap-ids-container-gap-12">
+  <ids-card orientation="vertical" class="max-w-64" appearance="elevated">
+    <header idsCardHeader>
+      <h2 idsCardTitle>{{ "EXAMPLES.CARD.ORIENTATION.CONTENT.VERTICAL_TITLE" | translate }}</h2>
+      <h3 idsCardSubtitle>{{ "EXAMPLES.CARD.ORIENTATION.CONTENT.VERTICAL_SUBTITLE" | translate }}</h3>
+    </header>
+    <img idsCardMedia class="h-32 object-cover" src="https://images.photowall.com/products/50608/dandelion-meadow.jpg?h=699&q=85" alt="" />
+    <ids-card-body>{{ "EXAMPLES.CARD.ORIENTATION.CONTENT.VERTICAL_BODY" | translate }}</ids-card-body>
+  </ids-card>
+
+  <ids-card orientation="horizontal" class="max-w-96" appearance="elevated">
+    <img
+      idsCardMedia
+      class="w-32 h-32 object-cover"
+      src="https://images.photowall.com/products/50608/dandelion-meadow.jpg?h=699&q=85"
+      alt=""
+    />
+    <ids-card-body>{{ "EXAMPLES.CARD.ORIENTATION.CONTENT.HORIZONTAL_BODY" | translate }}</ids-card-body>
+  </ids-card>
+</div>

projects/demo/src/app/components-example/card/card-orientation-example/card-orientation-example.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { IdsCardComponent } from '@i-cell/ids-angular/card';
+import { IdsCardBodyDirective } from '@i-cell/ids-angular/card/card-body.directive';
+import { IdsCardHeaderComponent } from '@i-cell/ids-angular/card/card-header.component';
+import { IdsCardMediaDirective } from '@i-cell/ids-angular/card/card-media.directive';
+import { IdsCardSubtitleDirective } from '@i-cell/ids-angular/card/card-subtitle.directive';
+import { IdsCardTitleDirective } from '@i-cell/ids-angular/card/card-title.directive';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-card-orientation-example',
+  imports: [
+    IdsCardComponent,
+    IdsCardHeaderComponent,
+    IdsCardBodyDirective,
+    IdsCardMediaDirective,
+    IdsCardTitleDirective,
+    IdsCardSubtitleDirective,
+    TranslateModule,
+  ],
+  templateUrl: './card-orientation-example.component.html',
+})
+export class CardOrientationExampleComponent {}

projects/demo/src/app/components-example/card/card-size-example/card-size-example.component.html

@@ -0,0 +1,14 @@
+<div class="flex items-start gap-ids-container-gap-12">
+  <ids-card size="dense" appearance="elevated"
+    ><ids-card-body>{{ "EXAMPLES.CARD.SIZES.CONTENT.DENSE" | translate }}</ids-card-body></ids-card
+  >
+  <ids-card size="compact" appearance="elevated"
+    ><ids-card-body>{{ "EXAMPLES.CARD.SIZES.CONTENT.COMPACT" | translate }}</ids-card-body></ids-card
+  >
+  <ids-card size="comfortable" appearance="elevated"
+    ><ids-card-body>{{ "EXAMPLES.CARD.SIZES.CONTENT.COMFORTABLE" | translate }}</ids-card-body></ids-card
+  >
+  <ids-card size="spacious" appearance="elevated"
+    ><ids-card-body>{{ "EXAMPLES.CARD.SIZES.CONTENT.SPACIOUS" | translate }}</ids-card-body></ids-card
+  >
+</div>

projects/demo/src/app/components-example/card/card-size-example/card-size-example.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { IdsCardComponent } from '@i-cell/ids-angular/card';
+import { IdsCardBodyDirective } from '@i-cell/ids-angular/card/card-body.directive';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-card-size-example',
+  imports: [
+    IdsCardComponent,
+    IdsCardBodyDirective,
+    TranslateModule,
+  ],
+  templateUrl: './card-size-example.component.html',
+})
+export class CardSizeExampleComponent {}

projects/demo/src/app/components-example/card/card-variants-example/card-variants-example.component.html

@@ -0,0 +1,36 @@
+<div class="flex flex-col gap-ids-container-gap-12">
+  <div class="flex flex-wrap gap-ids-container-gap-12">
+    <ids-card variant="primary" appearance="elevated"
+      ><ids-card-body>{{ "EXAMPLES.CARD.VARIANTS.CONTENT.PRIMARY" | translate }}</ids-card-body></ids-card
+    >
+    <ids-card variant="secondary" appearance="elevated"
+      ><ids-card-body>{{ "EXAMPLES.CARD.VARIANTS.CONTENT.SECONDARY" | translate }}</ids-card-body></ids-card
+    >
+    <ids-card variant="brand" appearance="elevated"
+      ><ids-card-body>{{ "EXAMPLES.CARD.VARIANTS.CONTENT.BRAND" | translate }}</ids-card-body></ids-card
+    >
+    <ids-card variant="surface" appearance="elevated"
+      ><ids-card-body>{{ "EXAMPLES.CARD.VARIANTS.CONTENT.SURFACE" | translate }}</ids-card-body></ids-card
+    >
+    <ids-card variant="success" appearance="elevated"
+      ><ids-card-body>{{ "EXAMPLES.CARD.VARIANTS.CONTENT.SUCCESS" | translate }}</ids-card-body></ids-card
+    >
+  </div>
+  <div class="flex flex-wrap gap-ids-container-gap-12">
+    <ids-card variant="warning" appearance="elevated"
+      ><ids-card-body>{{ "EXAMPLES.CARD.VARIANTS.CONTENT.WARNING" | translate }}</ids-card-body></ids-card
+    >
+    <ids-card variant="error" appearance="elevated"
+      ><ids-card-body>{{ "EXAMPLES.CARD.VARIANTS.CONTENT.ERROR" | translate }}</ids-card-body></ids-card
+    >
+    <ids-card variant="info" appearance="elevated"
+      ><ids-card-body>{{ "EXAMPLES.CARD.VARIANTS.CONTENT.INFO" | translate }}</ids-card-body></ids-card
+    >
+    <ids-card variant="light" appearance="elevated"
+      ><ids-card-body>{{ "EXAMPLES.CARD.VARIANTS.CONTENT.LIGHT" | translate }}</ids-card-body></ids-card
+    >
+    <ids-card variant="dark" appearance="elevated"
+      ><ids-card-body>{{ "EXAMPLES.CARD.VARIANTS.CONTENT.DARK" | translate }}</ids-card-body></ids-card
+    >
+  </div>
+</div>

projects/demo/src/app/components-example/card/card-variants-example/card-variants-example.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { IdsCardComponent } from '@i-cell/ids-angular/card';
+import { IdsCardBodyDirective } from '@i-cell/ids-angular/card/card-body.directive';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-card-variants-example',
+  imports: [
+    IdsCardComponent,
+    IdsCardBodyDirective,
+    TranslateModule,
+  ],
+  templateUrl: './card-variants-example.component.html',
+})
+export class CardVariantsExampleComponent {}

projects/demo/src/app/pages/card/card-demo.component.html

@@ -90,3 +90,9 @@ <h3 idsCardSubtitle>This is the subtitle</h3>
     </app-tryout-controls>
   </div>
 </app-demo-and-code>
+
+<div examples class="flex flex-col gap-6 w-full pt-6">
+  @for (example of cardExamples; track example.id) {
+    <ids-example-viewer [example]="example" />
+  }
+</div>