feat(card): update samples content

live-editing/configs/CardConfigGenerator.ts

@@ -1,11 +1,9 @@
 import { IgxAvatarModule } from 'igniteui-angular/avatar';
-import { IgxButtonModule, IgxDividerModule, IgxLayoutModule, IgxRippleModule } from 'igniteui-angular/directives';
+import { IgxButtonModule, IgxDividerModule, IgxRippleModule } from 'igniteui-angular/directives';
 import { IgxCardModule } from 'igniteui-angular/card';
 import { IgxChipsModule } from 'igniteui-angular/chips';
-import { IgxExpansionPanelModule } from 'igniteui-angular/expansion-panel';
 import { IgxIconModule } from 'igniteui-angular/icon';
-import { IgxListModule } from 'igniteui-angular/list';
-import { IgxSliderModule } from 'igniteui-angular/slider';
+import { IgxSwitchModule } from 'igniteui-angular/switch';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class CardConfigGenerator implements IConfigGenerator {
@@ -14,63 +12,53 @@ export class CardConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        // card sample
+        // card overview
         configs.push(new Config({
-            component: 'CardComponent',
+            component: 'CardOverviewComponent',
             appConfig: BaseAppConfig,
-            additionalFiles: [
-                "/src/app/layouts/card/card.blueprint.ts"
-            ],
             shortenComponentPathBy: "/layouts/card/"
         }));
 
-        // card sample 1
+        // card actions
         configs.push(new Config({
-            component: 'CardSample1Component',
+            component: 'CardActionsComponent',
             appConfig: BaseAppConfig,
             additionalFiles: [
-                "/src/app/layouts/card/card.blueprint.ts"
+                "/src/app/layouts/card/card-actions/icons.ts"
             ],
             shortenComponentPathBy: "/layouts/card/"
         }));
 
-        // card sample 2
+        // card media
         configs.push(new Config({
-            component: 'CardSample2Component',
+            component: 'CardMediaComponent',
             appConfig: BaseAppConfig,
             additionalFiles: [
-                "/src/app/layouts/card/card.blueprint.ts"
+                "/src/app/layouts/card/card-media/icons.ts"
             ],
             shortenComponentPathBy: "/layouts/card/"
         }));
 
-        // card sample 3
+        // card media position
         configs.push(new Config({
-            component: 'CardSample3Component',
+            component: 'CardPositionComponent',
             appConfig: BaseAppConfig,
-            additionalFiles: [
-                "/src/app/layouts/card/card.blueprint.ts"
-            ],
             shortenComponentPathBy: "/layouts/card/"
         }));
 
-        // card sample 4
+        // card styling
         configs.push(new Config({
-            component: 'CardSample4Component',
+            component: 'CardStylingComponent',
             appConfig: BaseAppConfig,
-            additionalFiles: [
-                "/src/app/layouts/card/card.blueprint.ts"
-            ],
             shortenComponentPathBy: "/layouts/card/"
         }));
 
-        // card styling sample
+        // card tailwind styling
         configs.push(new Config({
-            component: 'CardStylingSampleComponent',
+            component: 'CardTailwindStylingComponent',
             appConfig: BaseAppConfig,
             additionalFiles: [
-                "/src/app/layouts/card/card.blueprint.ts",
-                "/src/app/layouts/card/card-styling-sample/layout.scss"
+                "/src/app/layouts/card/card-tailwind-styling/icons.ts"
             ],
             shortenComponentPathBy: "/layouts/card/"
         }));

live-editing/configs/OverlayConfigGenerator.ts

@@ -25,11 +25,11 @@ export class OverlayConfigGenerator implements IConfigGenerator {
 
         configs.push(new Config({
             component: 'OverlaySampleMain2Component',
-            additionalFiles: ["/src/app/layouts/card/card-sample-1/card-sample-1.component.ts",
-            "/src/app/layouts/card/card-sample-1/card-sample-1.component.scss",
-            "/src/app/layouts/card/card-sample-1/card-sample-1.component.html",
-            "/src/app/layouts/card/card.blueprint.ts"],
-            appConfig: BaseAppConfig
+            additionalFiles: ["/src/app/interactions/overlay/overlay-dynamic-card/overlay-dynamic-card.component.ts",
+            "/src/app/interactions/overlay/overlay-dynamic-card/overlay-dynamic-card.component.scss",
+            "/src/app/interactions/overlay/overlay-dynamic-card/overlay-dynamic-card.component.html"],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/interactions/overlay/"
         }));
 
         configs.push(new Config({

src/app/interactions/overlay/overlay-main-2/overlay-main-sample-2.component.ts

@@ -1,7 +1,7 @@
 import { Component, ElementRef, OnDestroy, ViewChild, ViewContainerRef, inject } from '@angular/core';
 import { ConnectedPositioningStrategy, IgxOverlayService } from 'igniteui-angular/core';
 import { IgxButtonDirective } from 'igniteui-angular/directives';
-import { CardSample1Component } from '../../../layouts/card/card-sample-1/card-sample-1.component';
+import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic-card.component';
 // tslint:disable:object-literal-sort-keys
 @Component({
     selector: 'app-overlay-sample',
@@ -23,7 +23,7 @@ export class OverlaySampleMain2Component implements OnDestroy {
         if (this._cardHidden) {
             if (!this._overlayId) {
                 const positionStrategy = new ConnectedPositioningStrategy();
-                this._overlayId = this.overlayService.attach(CardSample1Component, this.viewContainerRef, {
+                this._overlayId = this.overlayService.attach(MyDynamicCardComponent, this.viewContainerRef, {
                     target: this.buttonElement.nativeElement,
                     positionStrategy,
                     modal: false,

src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.html

@@ -2,5 +2,5 @@
     <button #buttonElement igxButton (click)="showOverlay()">
         Show Card
     </button>
-    <app-igx-card-simple #card class="card"></app-igx-card-simple>
+    <app-overlay-dynamic-card-component #card class="card"></app-overlay-dynamic-card-component>
 </div>

src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.ts

@@ -1,13 +1,13 @@
 import { Component, ElementRef, OnDestroy, ViewChild, inject } from '@angular/core';
 import { ConnectedPositioningStrategy, IgxOverlayService } from 'igniteui-angular/core';
 import { IgxButtonDirective } from 'igniteui-angular/directives';
-import { CardSample1Component } from '../../../layouts/card/card-sample-1/card-sample-1.component';
+import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic-card.component';
 // tslint:disable:object-literal-sort-keys
 @Component({
     selector: 'app-overlay-sample',
     templateUrl: `overlay-main-sample-3.component.html`,
     styleUrls: ['overlay-main-sample-3.component.scss'],
-    imports: [IgxButtonDirective, CardSample1Component]
+    imports: [IgxButtonDirective, MyDynamicCardComponent]
 })
 export class OverlaySampleMain3Component implements OnDestroy {
     private overlayService = inject<IgxOverlayService>(IgxOverlayService);

src/app/layouts/card/card-actions/card-actions.component.html

@@ -0,0 +1,74 @@
+<div class="card-item">
+    <span class="card-item__label">Horizontal actions (default)</span>
+
+    <igx-card class="post-card">
+        <igx-card-header>
+            <igx-avatar
+                igxCardThumbnail
+                shape="circle"
+                src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
+                alt="A profile photo of Lena Fischer.">
+            </igx-avatar>
+            <span igxCardHeaderTitle>Lena Fischer</span>
+            <span igxCardHeaderSubtitle>&#64;lena &middot; 2h ago</span>
+        </igx-card-header>
+        <igx-card-content>
+            <p>
+                Just shipped our new design system &#128640; Six months of tokens,
+                components, and documentation &mdash; and it&rsquo;s finally live.
+                So proud of the team.
+            </p>
+        </igx-card-content>
+        <igx-card-actions [vertical]="false">
+            <button igxIconButton="flat" igxEnd aria-label="Like">
+                <igx-icon>favorite_border</igx-icon>
+            </button>
+            <button igxIconButton="flat" igxEnd aria-label="Save">
+                <igx-icon>bookmark</igx-icon>
+            </button>
+            <button igxIconButton="flat" igxEnd aria-label="Share on LinkedIn">
+                <igx-icon name="linkedin" family="material"></igx-icon>
+            </button>
+        </igx-card-actions>
+    </igx-card>
+</div>
+
+<div class="card-item">
+    <span class="card-item__label">Vertical actions</span>
+
+    <igx-card class="post-card post-card--vertical" [horizontal]="true">
+        <div class="post-card__body">
+            <igx-card-header>
+                <igx-avatar
+                    igxCardThumbnail
+                    shape="circle"
+                    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
+                    alt="A profile photo of Lena Fischer.">
+                </igx-avatar>
+                <span igxCardHeaderTitle>Lena Fischer</span>
+                <span igxCardHeaderSubtitle>&#64;lena &middot; 2h ago</span>
+            </igx-card-header>
+            <igx-card-content>
+                <p>
+                    Just shipped our new design system &#128640; Six months of tokens,
+                    components, and documentation &mdash; and it&rsquo;s finally live.
+                    So proud of the team.
+                </p>
+            </igx-card-content>
+        </div>
+
+        <igx-card-actions [vertical]="true">
+            <div class="post-card__actions">
+                <button igxIconButton="flat" aria-label="Like">
+                    <igx-icon>favorite_border</igx-icon>
+                </button>
+                <button igxIconButton="flat" aria-label="Save">
+                    <igx-icon>bookmark</igx-icon>
+                </button>
+                <button igxIconButton="flat" aria-label="Share on LinkedIn">
+                    <igx-icon name="linkedin" family="material"></igx-icon>
+                </button>
+            </div>
+        </igx-card-actions>
+    </igx-card>
+</div>

src/app/layouts/card/card-actions/card-actions.component.scss

@@ -0,0 +1,107 @@
+@use "igniteui-theming/sass/typography" as *;
+
+:host {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+    justify-content: center;
+    box-sizing: border-box;
+    height: 100vh;
+    gap: rem(48px);
+    padding: rem(40px) rem(24px);
+}
+
+.card-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: rem(20px);
+}
+
+.card-item__label {
+    @include type-style("body-2") {
+        margin: 0;
+    }
+
+    color: var(--ig-gray-600);
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: rem(13px);
+    font-weight: 400;
+    line-height: rem(20px);
+    letter-spacing: rem(0.3px);
+}
+
+.post-card {
+    --ig-card-border-radius: #{rem(8px)};
+
+    width: rem(310px);
+
+    igx-card-header {
+        padding: rem(16px) rem(16px) 0;
+    }
+
+    [igxCardHeaderTitle] {
+        color: var(--ig-gray-900);
+        font-size: rem(20px);
+        font-weight: 600;
+        line-height: rem(24px);
+        letter-spacing: rem(0.15px);
+    }
+
+    [igxCardHeaderSubtitle] {
+        color: var(--ig-gray-600);
+        font-size: rem(14px);
+        font-weight: 600;
+        line-height: rem(24px);
+        letter-spacing: rem(0.1px);
+    }
+
+    igx-card-content {
+        padding: rem(24px) rem(16px) 0;
+        overflow: visible;
+
+        p {
+            margin: 0;
+            color: var(--ig-gray-700);
+            font-size: rem(14px);
+            font-weight: 400;
+            line-height: rem(20px);
+            letter-spacing: rem(0.25px);
+        }
+    }
+
+    igx-card-actions {
+        padding: rem(12px) rem(16px) rem(8px);
+    }
+
+    [igxIconButton] {
+        --ig-size: var(--ig-size-small);
+        --ig-flat-icon-button-foreground: var(--ig-gray-900);
+    }
+}
+
+.post-card--vertical {
+    width: rem(390px);
+
+    igx-card-content {
+        padding-block-end: rem(16px);
+    }
+
+    igx-card-actions {
+        justify-content: flex-start;
+        padding: rem(16px) rem(16px) rem(16px) 0;
+    }
+}
+
+.post-card__body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.post-card__actions {
+    display: flex;
+    flex-direction: column;
+    gap: rem(8px);
+}

src/app/layouts/card/card-actions/card-actions.component.ts

@@ -0,0 +1,41 @@
+import { Component, inject } from '@angular/core';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+import {
+    IgxCardActionsComponent,
+    IgxCardComponent,
+    IgxCardContentDirective,
+    IgxCardHeaderComponent,
+    IgxCardHeaderSubtitleDirective,
+    IgxCardHeaderTitleDirective,
+    IgxCardThumbnailDirective
+} from 'igniteui-angular/card';
+import { IgxIconButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
+import { IgxSuffixDirective } from 'igniteui-angular/input-group';
+import { linkedinIcon } from './icons';
+
+@Component({
+    selector: 'app-card-actions',
+    styleUrls: ['./card-actions.component.scss'],
+    templateUrl: './card-actions.component.html',
+    imports: [
+        IgxAvatarComponent,
+        IgxCardActionsComponent,
+        IgxCardComponent,
+        IgxCardContentDirective,
+        IgxCardHeaderComponent,
+        IgxCardHeaderSubtitleDirective,
+        IgxCardHeaderTitleDirective,
+        IgxCardThumbnailDirective,
+        IgxIconButtonDirective,
+        IgxIconComponent,
+        IgxSuffixDirective
+    ]
+})
+export class CardActionsComponent {
+    private iconService = inject(IgxIconService);
+
+    constructor() {
+        this.iconService.addSvgIconFromText('linkedin', linkedinIcon, 'material');
+    }
+}

src/app/layouts/card/card-actions/icons.ts

@@ -0,0 +1 @@
+export const linkedinIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"></path></svg>';