@flywheel-io/vision 2.1.0-beta.0 → 2.1.0-beta.1

package/src/components/card/card-header/card-header.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FwCardHeaderComponent } from './card-header.component';
-
-describe('FwCardHeaderComponent', () => {
-  let component: FwCardHeaderComponent;
-  let fixture: ComponentFixture<FwCardHeaderComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [FwCardHeaderComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(FwCardHeaderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/components/card/card-header/card-header.component.ts

@@ -1,15 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-import { IconType } from '../../icon/icon.types';
-
-@Component({
-  selector: 'fw-card-header',
-  templateUrl: './card-header.component.html',
-  styleUrls: ['./card-header.component.scss'],
-})
-export class FwCardHeaderComponent {
-  @Input() title?: string;
-  @Input() description?: string;
-  @Input() leftIcon?: IconType;
-  @Input() iconColor?: 'primary' | 'secondary' | 'red' | 'orange' | 'green' | 'slate' | 'muted' | 'typography' = 'primary';
-}

package/src/components/card/card-header/card-header.stories.ts

@@ -1,58 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { FwAvatarModule } from '../../avatar/avatar.module';
-import { FwButtonModule } from '../../button/button.module';
-import { FwChipModule } from '../../chip/chip.module';
-import { FwIconModule } from '../../icon/icon.module';
-import { FwCardModule } from '../card.module';
-import { FwCardHeaderComponent } from './card-header.component';
-
-export default {
-  title: 'Components/Card',
-  component: FwCardHeaderComponent,
-  parameters: {
-    controls: {},
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4964-73586&mode=design&t=kKJ9B1V6klFufk0T-11',
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FwAvatarModule,
-        FwButtonModule,
-        FwCardModule,
-        FwChipModule,
-        FwIconModule,
-      ],
-    }),
-  ],
-
-} as Meta;
-
-type Story = StoryObj<FwCardHeaderComponent & {
-  'children'?: unknown,
-}>;
-
-export const CardHeader: Story = {
-  args: {
-    title: 'Title',
-    description: 'description',
-    leftIcon: 'icon-placeholder',
-    iconColor: 'primary',
-    children:
-      '<span>Key</span><fw-chip title="Status"></fw-chip><fw-icon style="color: var(--orange-base); font-size: 24px">information-circle</fw-icon>',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-        <fw-card-header [title]="title" [description]="description" [iconColor]="iconColor" [leftIcon]="leftIcon">
-            ${args.children}
-        </fw-card-header>
-        `,
-  }),
-};

package/src/components/card/card.component.html

@@ -1,12 +0,0 @@
-<div
-  class="fw-card"
-  [class.focused]="focused"
-  [class.constrained]="constrained"
-  [class.selectable]="selectable"
-  [class.disabled]="disabled"
-  (click)="select && selectable && !disabled ? select.emit(value) : undefined">
-  <ng-content select="fw-card-header"></ng-content>
-  <ng-content select="fw-card-author"></ng-content>
-  <ng-content select="fw-card-content"></ng-content>
-  <ng-content select="fw-card-footer"></ng-content>
-</div>

package/src/components/card/card.component.scss

@@ -1,40 +0,0 @@
-@use "../../scss/config/shadows";
-
-.fw-card {
-  display: flex;
-  padding: 16px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 16px;
-  flex: 1 0 0;
-  align-self: stretch;
-  border-radius: 8px;
-  border: 1px solid var(--separations-base, #e3e6ea);
-  background: var(--card-background, #ffffff);
-
-  &.focused {
-    border: 1px solid var(--primary-border, rgba(27, 105, 250, 0.40));
-    background: var(--primary-hover, rgba(27, 105, 250, 0.05));
-    @extend .vision-shadow-large !optional;
-  }
-
-  &.constrained {
-    max-width: 320px;
-    max-height: 320px;
-  }
-
-  &.selectable {
-    cursor: pointer;
-
-    &:hover:not(.disabled) {
-      border: 1px solid var(--primary-border, rgba(27, 105, 250, 0.40));
-      background: var(--primary-hover, rgba(27, 105, 250, 0.05));
-      @extend .vision-shadow-large !optional;
-    }
-  }
-
-  &.disabled {
-    opacity: .4;
-    cursor: not-allowed;
-  }
-}

package/src/components/card/card.component.spec.ts

@@ -1,34 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FwCardComponent } from './card.component';
-import { FwCardAttributeComponent } from './card-attribute/card-attribute.component';
-import { FwCardAuthorComponent } from './card-author/card-author.component';
-import { FwCardContentComponent } from './card-content/card-content.component';
-import { FwCardFooterComponent } from './card-footer/card-footer.component';
-import { FwCardHeaderComponent } from './card-header/card-header.component';
-
-describe('FwCardComponent', () => {
-  let component: FwCardComponent;
-  let fixture: ComponentFixture<FwCardComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [
-        FwCardComponent,
-        FwCardHeaderComponent,
-        FwCardAuthorComponent,
-        FwCardContentComponent,
-        FwCardFooterComponent,
-        FwCardAttributeComponent,
-      ],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(FwCardComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/components/card/card.component.ts

@@ -1,16 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'fw-card',
-  templateUrl: './card.component.html',
-  styleUrls: ['./card.component.scss'],
-})
-export class FwCardComponent {
-  @Input() value?: object | string;
-  @Input() disabled?: boolean;
-  @Input() focused?: boolean;
-  @Input() constrained?: boolean;
-  @Input() selectable?: boolean;
-  // eslint-disable-next-line @angular-eslint/no-output-native
-  @Output() select: EventEmitter<object | string> = new EventEmitter<object | string>();
-}

package/src/components/card/card.mdx

@@ -1,128 +0,0 @@
-import {Canvas, Controls, Meta} from '@storybook/addon-docs';
-import * as CardStories from './card.stories'
-import * as CardHeaderStories from "./card-header/card-header.stories";
-import * as CardAuthorStories from "./card-author/card-author.stories";
-import * as CardContentStories from "./card-content/card-content.stories";
-import * as CardFooterStories from "./card-footer/card-footer.stories";
-
-<Meta of={CardStories}/>
-
-# Card
-
-This is the new Vision **Card** layout component `fw-card`
-
-It is built via an assembly of the components `fw-card-header, fw-card-author, fw-card-content, fw-card-footer`
-
-- has the [inputs](/story/vision-card--card-header) of `constrained, selectable, focused, disabled, value`
-- has the [output events](/story/vision-card--card-header) of `select`, which is dependant on selectable being true and value being set
-
-## Basic Usage
-
-First import the card module into your `app.module.ts`
-
-```ts filename="app.module.ts"
-// app.module.ts
-
-import { FwCardModule } from '@flywheel-io/vision';
-
-@NgModule({
-  imports: [
-      FwCardModule
-  ]
-})
-```
-
-### Custom Component Approach
-
-Assemble the html layout for the `<fw-card></fw-card>` component by adding the card child components that you want to use to it.
-
-```html title="your.component.html"
-<!-- your.component.html -->
-
-<fw-card [constrained]="true" [selectable]="true">
-  <fw-card-header title="Title">
-      <fw-icon>information-circle</fw-icon>
-  </fw-card-header>
-  <fw-card-author name="Jane Doe" details="Last Modified • 2h ago">
-      <fw-avatar size="medium" variant="circular" content="initial" initial="JD"></fw-avatar>
-  </fw-card-author>
-  <fw-card-content>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-  </fw-card-content>
-  <fw-card-footer>
-      <fw-card-attr icon="file-text" title="dicom"></fw-card-attr>
-      <fw-card-attr icon="databases-server">2.4TB</fw-card-attr>
-      <fw-card-attr icon="user-group">621</fw-card-attr>
-      <fw-card-attr icon="download">1.2k</fw-card-attr>
-  </fw-card-footer>
-</fw-card>`,
-```
-<Canvas of={CardStories.Card}/>
-
-## Child Components
-
-### Card Header `<fw-card-header>`
-- accepts child objects of any kind and will put those right/top justified in the key area on the right
-<Canvas of={CardHeaderStories.CardHeader}/>
-
-<Controls of={CardHeaderStories.CardHeader}/>
-
-### Card Author `<fw-card-author>`
-- accepts only a child tag of type `fw-avatar` and will position that in the left start area
-<Canvas of={CardAuthorStories.CardAuthor}/>
-
-<Controls of={CardAuthorStories.CardAuthor}/>
-
-### Card Content `<fw-card-content>`
-- has no direct [inputs](/story/vision-card--card-content)
-- accepts child objects of any kind and will display those inline
-- will clamp any child `p` tags at 8 lines and apply the `vision-p2` styling
-- will max-width an `img` tag to card width and add a slight border radius
-<Canvas of={CardContentStories.CardContent}/>
-
-### Card Footer `<fw-card-footer>`
-- has no [inputs](/story/vision-card--card-footer)
-- accepts child objects of any kind and will display those in a row flex
-- will justify child objects with `space-between`
-<Canvas of={CardFooterStories.CardFooter}/>
-
-## Selectable Card Example
-
-```html title="your.component.html"
-<!-- your.component.html -->
- <fw-card
-  [selectable]="true"
-  [value]="'card1'"
-  (select)="yourSelectAction($event)">
-  <fw-card-header title="Card 1"></fw-card-header>
-  <fw-card-content>
-      <p style="-webkit-line-clamp: 3">
-      Lorem ipsum dolor sit amet consectetur. Ut quam commodo lectus pellentesque in gravida sit.
-      </p>
-  </fw-card-content>
-</fw-card>
-```
-
-```ts title="your.component.ts"
-// your.component.ts
-yourSelectAction(value): void {
-  this.router.navigate(['path', value]).then();
-}
-```
-
-<Canvas of={CardStories.CardSelectable}/>
-
-## Other Examples
-
-### Card with buttons and overflowing title
-<Canvas of={CardStories.CardWithButtons}/>
-
-### Card Blog Summary
-<Canvas of={CardStories.CardBlogSummary}/>
-
-### Card with an author and title and icon button
-<Canvas of={CardStories.CardAuthorAction}/>
-
-### Card with no content, no footer, no title
-<Canvas of={CardStories.CardNoContent}/>
-

package/src/components/card/card.module.ts

@@ -1,37 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { FwAvatarModule } from '../avatar/avatar.module';
-import { FwIconModule } from '../icon/icon.module';
-import { FwCardComponent } from './card.component';
-import { FwCardAttributeComponent } from './card-attribute/card-attribute.component';
-import { FwCardAuthorComponent } from './card-author/card-author.component';
-import { FwCardContentComponent } from './card-content/card-content.component';
-import { FwCardFooterComponent } from './card-footer/card-footer.component';
-import { FwCardHeaderComponent } from './card-header/card-header.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FwIconModule,
-    FwAvatarModule,
-  ],
-  exports: [
-    FwCardHeaderComponent,
-    FwCardAuthorComponent,
-    FwCardContentComponent,
-    FwCardAttributeComponent,
-    FwCardFooterComponent,
-    FwCardComponent, // needs to be declared in order of usage
-  ],
-  declarations: [
-    FwCardHeaderComponent,
-    FwCardAuthorComponent,
-    FwCardContentComponent,
-    FwCardAttributeComponent,
-    FwCardFooterComponent,
-    FwCardComponent, // needs to be declared in order of usage
-  ],
-})
-export class FwCardModule {
-}

package/src/components/card/card.stories.ts

@@ -1,240 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { action } from '@storybook/addon-actions';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { FwAppIconModule } from '../app-icon/app-icon.module';
-import { FwAvatarModule } from '../avatar/avatar.module';
-import { FwButtonModule } from '../button/button.module';
-import { FwChipModule } from '../chip/chip.module';
-import { FwIconModule } from '../icon/icon.module';
-import { FwIconButtonModule } from '../icon-button/icon-button.module';
-import { FwLayoutsModule } from '../layouts/layouts.module';
-import { FwCardComponent } from './card.component';
-import { FwCardModule } from './card.module';
-
-export default {
-  title: 'Components/Card',
-  component: FwCardComponent,
-  parameters: {
-    controls: {},
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=4964-73586&mode=design&t=kKJ9B1V6klFufk0T-11',
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        FwAvatarModule,
-        FwButtonModule,
-        FwChipModule,
-        FwIconModule,
-        FwIconButtonModule,
-        FwCardModule,
-        FwAppIconModule,
-        FwLayoutsModule,
-      ],
-    }),
-  ],
-
-} as Meta;
-
-type Story = StoryObj<FwCardComponent>;
-
-export const Card: Story = {
-  args: {
-    constrained: true,
-    disabled: false,
-    focused: false,
-    selectable: true,
-    value: 'my-id',
-  },
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <fw-card [constrained]="constrained" [focused]="focused" [disabled]="disabled" [selectable]="selectable">
-        <fw-card-header title="Title">
-            <fw-icon style="color: var(--orange-base);font-size: 22px">information-circle</fw-icon>
-        </fw-card-header>
-        <fw-card-author name="Jane Doe" details="Last Modified &bull; 2h ago">
-            <fw-avatar size="medium" variant="circular" content="initial" initial="JD"></fw-avatar>
-        </fw-card-author>
-        <fw-card-content>
-            <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </fw-card-content>
-        <fw-card-footer>
-            <fw-card-attr icon="file-text" title="dicom"></fw-card-attr>
-            <fw-card-attr icon="databases-server" title="2.4TB"></fw-card-attr>
-            <fw-card-attr icon="user-group" title="621"></fw-card-attr>
-            <fw-card-attr icon="download" title="1.2k"></fw-card-attr>
-        </fw-card-footer>
-      </fw-card>`,
-  }),
-};
-
-export const CardWithButtons: Story = {
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <fw-card constrained="true">
-        <fw-card-header title="Cards can fit a grid or scale with few overrides Cards can fit a grid or scale with few overrides">
-            <fw-chip color="orange" title="Pending"></fw-chip>
-        </fw-card-header>
-        <fw-card-content>
-            <p >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-        </fw-card-content>
-        <fw-card-footer>
-            <fw-button [fullWidth]="true" leftIcon="trash-delete" color="danger" variant="outline">Remove</fw-button>
-            <fw-button [fullWidth]="true" leftIcon="open">Open</fw-button>
-        </fw-card-footer>
-      </fw-card>`,
-  }),
-};
-
-export const CardAuthorAction: Story = {
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <div style="width: 450px;">
-      <fw-card>
-        <fw-card-header title="Favorite this data">
-            <fw-icon-button icon="star" color="orange" size="medium"></fw-icon-button>
-        </fw-card-header>
-        <fw-card-author name="Jane Doe" details="Last Modified &bull; 2h ago">
-            <fw-avatar size="medium" variant="circular" content="initial" initial="JD"></fw-avatar>
-        </fw-card-author>
-        <fw-card-footer>
-            <fw-card-attr icon="file-text" title="dicom"></fw-card-attr>
-            <fw-card-attr icon="databases-server" title="2.4TB"></fw-card-attr>
-            <fw-card-attr icon="user-group" title="621"></fw-card-attr>
-        </fw-card-footer>
-      </fw-card>
-      </div>`,
-  }),
-};
-
-export const CardNoContent: Story = {
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <div style="width: 450px;">
-      <fw-card>
-        <fw-card-header leftIcon="user-group" description="Users">
-            <fw-icon-button icon="menu-vertical"></fw-icon-button>
-        </fw-card-header>
-      </fw-card>
-      </div>`,
-  }),
-};
-
-export const CardApp: Story = {
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <div style="width: 450px;">
-      <fw-card>
-        <fw-card-header title="Exchange" description="description">
-            <fw-app-icon icon="flywheel-mark-logo" size="large" variant="static" color="primary"></fw-app-icon>
-        </fw-card-header>
-        <fw-card-content>
-            <p style="-webkit-line-clamp: 3">
-            Lorem ipsum dolor sit amet consectetur. Ut quam commodo lectus pellentesque in gravida sit. Proin et sit morbi ornare viverra nec tristique congue. Eu enim ullamcorper et nunc sed maecenas. Quis sed cursus elit sit. Nibh cras tempor sem vitae. Mauris justo fames egestas augue ultricies fusce. Nibh vel non dui dolor fermentum augue lectus aliquam scelerisque. Eu vel nulla vulputate semper. Sem duis id eget quam donec iaculis. Volutpat integer tellus turpis et sociis nulla odio bibendum. Ipsum leo maecenas faucibus augue viverra. Libero eu malesuada tristique ultrices sit velit in sit eu. Tortor ullamcorper turpis dolor et consequat sed in risus. Egestas lectus quis cursus ante hac accumsan odio.
-            </p>
-        </fw-card-content>
-        <fw-card-footer>
-            <fw-button [fullWidth]="true" variant="outline">Learn More</fw-button>
-            <fw-button [fullWidth]="true">Launch</fw-button>
-        </fw-card-footer>
-      </fw-card>
-      </div>`,
-  }),
-};
-
-export const CardBlogSummary: Story = {
-  render: (args) => ({
-    props: args,
-    controls: { disabled: false },
-    template: `
-      <div style="width: 450px;">
-      <fw-card>
-        <fw-card-header title="Example Title">
-        </fw-card-header>
-        <fw-card-content>
-            <img src="https://picsum.photos/id/4/800/300" alt="sample image">
-            <p style="-webkit-line-clamp: 3">
-            Lorem ipsum dolor sit amet consectetur. Ut quam commodo lectus pellentesque in gravida sit. Proin et sit morbi ornare viverra nec tristique congue. Eu enim ullamcorper et nunc sed maecenas. Quis sed cursus elit sit. Nibh cras tempor sem vitae. Mauris justo fames egestas augue ultricies fusce. Nibh vel non dui dolor fermentum augue lectus aliquam scelerisque. Eu vel nulla vulputate semper. Sem duis id eget quam donec iaculis. Volutpat integer tellus turpis et sociis nulla odio bibendum. Ipsum leo maecenas faucibus augue viverra. Libero eu malesuada tristique ultrices sit velit in sit eu. Tortor ullamcorper turpis dolor et consequat sed in risus. Egestas lectus quis cursus ante hac accumsan odio.
-            </p>
-        </fw-card-content>
-        <fw-card-footer>
-            <fw-button [fullWidth]="true" variant="outline">View</fw-button>
-        </fw-card-footer>
-      </fw-card>
-      </div>`,
-  }),
-};
-
-export const CardSelectable: Story = {
-  render: (args) => ({
-    props: {
-      ...args,
-      onSelectAction: action('onSelectAction'),
-    },
-    controls: { disabled: false },
-    template: `
-      <div style="display: flex; gap: 15px">
-        <fw-card
-          style="height: 100%; display: contents"
-          [selectable]="true"
-          [value]="'card1'"
-          (select)="onSelectAction($event)">
-          <fw-card-header title="Card 1">
-          </fw-card-header>
-          <fw-card-content>
-              <img src="https://picsum.photos/id/4/800/300" alt="sample image">
-              <p style="-webkit-line-clamp: 5">
-              Lorem ipsum dolor sit amet consectetur. Ut quam commodo lectus pellentesque in gravida sit. Proin et sit morbi ornare viverra nec tristique congue. Eu enim ullamcorper et nunc sed maecenas. Quis sed cursus elit sit. Nibh cras tempor sem vitae. Mauris justo fames egestas augue ultricies fusce. Nibh vel non dui dolor fermentum augue lectus aliquam scelerisque. Eu vel nulla vulputate semper. Sem duis id eget quam donec iaculis. Volutpat integer tellus turpis et sociis nulla odio bibendum. Ipsum leo maecenas faucibus augue viverra. Libero eu malesuada tristique ultrices sit velit in sit eu. Tortor ullamcorper turpis dolor et consequat sed in risus. Egestas lectus quis cursus ante hac accumsan odio.
-              </p>
-          </fw-card-content>
-        </fw-card>
-         <fw-card
-          style="height: 100%; display: contents"
-          [selectable]="true"
-          [value]="'card2'"
-          (select)="onSelectAction($event)">
-          <fw-card-header title="Card 2">
-          </fw-card-header>
-          <fw-card-content>
-              <img src="https://picsum.photos/id/5/800/300" alt="sample image">
-              <p style="-webkit-line-clamp: 3">
-              Lorem ipsum dolor sit amet consectetur. Ut quam commodo lectus pellentesque in gravida sit. Proin et sit morbi ornare viverra nec tristique congue. Eu enim ullamcorper et nunc sed maecenas. Quis sed cursus elit sit. Nibh cras tempor sem vitae. Mauris justo fames egestas augue ultricies fusce. Nibh vel non dui dolor fermentum augue lectus aliquam scelerisque. Eu vel nulla vulputate semper. Sem duis id eget quam donec iaculis. Volutpat integer tellus turpis et sociis nulla odio bibendum. Ipsum leo maecenas faucibus augue viverra. Libero eu malesuada tristique ultrices sit velit in sit eu. Tortor ullamcorper turpis dolor et consequat sed in risus. Egestas lectus quis cursus ante hac accumsan odio.
-              </p>
-          </fw-card-content>
-        </fw-card>
-         <fw-card
-          style="height: 100%; display: contents"
-          [selectable]="true"
-          [value]="'card3'"
-          (select)="onSelectAction($event)">
-          <fw-card-header title="Card 3">
-          </fw-card-header>
-          <fw-card-content>
-              <img src="https://picsum.photos/id/6/800/300" alt="sample image">
-              <p style="-webkit-line-clamp: 4">
-              Lorem ipsum dolor sit amet consectetur. Ut quam commodo lectus pellentesque in gravida sit. Proin et sit morbi ornare viverra nec tristique congue. Eu enim ullamcorper et nunc sed maecenas. Quis sed cursus elit sit. Nibh cras tempor sem vitae. Mauris justo fames egestas augue ultricies fusce. Nibh vel non dui dolor fermentum augue lectus aliquam scelerisque. Eu vel nulla vulputate semper. Sem duis id eget quam donec iaculis. Volutpat integer tellus turpis et sociis nulla odio bibendum. Ipsum leo maecenas faucibus augue viverra. Libero eu malesuada tristique ultrices sit velit in sit eu. Tortor ullamcorper turpis dolor et consequat sed in risus. Egestas lectus quis cursus ante hac accumsan odio.
-              </p>
-          </fw-card-content>
-        </fw-card>
-      </div>`,
-  }),
-};
-