feat(adoption): adding card page

Signed-off-by: Bogdan Bogdanov <bbogdanov@vmware.com>

apps/adoption/src/app/app-routing.module.ts

@@ -27,6 +27,7 @@ import { RangePage } from './pages/range.page';
 import { SelectPage } from './pages/select.page';
 import { TextareaPage } from './pages/textarea.page';
 import { TogglePage } from './pages/toggle.page';
+import { CardPage } from './pages/card.page';
 
 const routes: Routes = [
   { path: '', redirectTo: '/getting-started', pathMatch: 'full' },
@@ -35,6 +36,7 @@ const routes: Routes = [
   { path: 'alert', component: AlertPage },
   { path: 'badge', component: BadgePage },
   { path: 'button', component: ButtonPage },
+  { path: 'card', component: CardPage },
   { path: 'checkbox', component: CheckboxPage },
   { path: 'datalist', component: DatalistPage },
   { path: 'form', component: FormPage },

apps/adoption/src/app/app.component.html

@@ -36,6 +36,7 @@
           <a routerLink="/alert" routerLinkActive="active" clrVerticalNavLink>Alert</a>
           <a routerLink="/badge" routerLinkActive="active" clrVerticalNavLink>Badge</a>
           <a routerLink="/button" routerLinkActive="active" clrVerticalNavLink>Button</a>
+          <a routerLink="/card" routerLinkActive="active" clrVerticalNavLink>Card</a>
           <a routerLink="/checkbox" routerLinkActive="active" clrVerticalNavLink>Checkbox</a>
           <a routerLink="/datalist" routerLinkActive="active" clrVerticalNavLink>Datalist</a>
           <a routerLink="/form" routerLinkActive="active" clrVerticalNavLink>Form</a>

apps/adoption/src/app/app.module.ts

@@ -38,6 +38,7 @@ import { RangePage } from './pages/range.page';
 import { SelectPage } from './pages/select.page';
 import { TextareaPage } from './pages/textarea.page';
 import { TogglePage } from './pages/toggle.page';
+import { CardPage } from './pages/card.page';
 
 @NgModule({
   declarations: [
@@ -49,6 +50,7 @@ import { TogglePage } from './pages/toggle.page';
     AlertPage,
     BadgePage,
     ButtonPage,
+    CardPage,
     CheckboxPage,
     DatalistPage,
     FormPage,

apps/adoption/src/app/migrations/card/card.1.angular.txt

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <div class="card">
+      <div class="card-header">
+        <h3>Card title</h3>
+      </div>
+      <div class="card-block">
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut adipisci distinctio error, totam tempore iusto,
+          quaerat nisi quam dicta, sapiente ratione rem mollitia laudantium at magni quas in ullam. Adipisci?
+        </p>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        margin: 1rem;
+        justify-content: center;
+      }
+    `,
+  ],
+})
+export class AppComponent {}

apps/adoption/src/app/migrations/card/card.1.core.txt

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+import '@cds/core/card/register.js';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <cds-card aria-labelledby="cardWithLayout">
+      <div cds-layout="vertical gap:md">
+        <h2 id="cardWithLayout" cds-text="section" cds-layout="p-y:sm">Card Title</h2>
+
+        <cds-divider cds-card-remove-margin></cds-divider>
+
+        <div cds-text="body light" cds-layout="p-y:lg">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut adipisci distinctio error, totam tempore iusto,
+          quaerat nisi quam dicta, sapiente ratione rem mollitia laudantium at magni quas in ullam. Adipisci?
+        </div>
+      </div>
+    </cds-card>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        margin: 1rem;
+        justify-content: center;
+      }
+    `,
+  ],
+})
+export class AppComponent {}

apps/adoption/src/app/migrations/card/card.2.angular.txt

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <div class="card">
+      <div class="card-header">
+        Header
+      </div>
+      <div class="card-block">
+        <div class="card-media-block">
+          <img src="..." class="card-media-image" />
+          <div class="card-media-description">
+            <span class="card-media-title">
+              Project A
+            </span>
+            <span class="card-media-text">
+              Owner: John Doe
+            </span>
+          </div>
+        </div>
+        <div class="card-text">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt excepturi labore explicabo temporibus, enim
+          voluptate saepe corrupti illum earum eveniet ab veniam vel nisi fugit accusantium perferendis quas facilis
+          quod.
+        </div>
+      </div>
+      <div class="card-footer">
+        <button class="btn btn-sm btn-link">Action</button>
+      </div>
+    </div>
+  `,
+})
+export class AppComponent {}

apps/adoption/src/app/migrations/card/card.2.core.txt

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+
+import '@cds/core/alert/register.js';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <cds-card>
+      <div cds-layout="vertical gap:md">
+        <h2 id="containerOfCards1" cds-text="section" cds-layout="horizontal align:vertical-center">
+          Header
+        </h2>
+
+        <cds-divider cds-card-remove-margin></cds-divider>
+
+        <div cds-text="body light" cds-layout="p-y:lg">
+          <div cds-layout="horizontal gap:md p-b:md">
+            <img width="60" src="..." />
+            <div cds-layout="vertical gap:md">
+              <span>
+                Project A
+              </span>
+              <span>
+                Owner: John Doe
+              </span>
+            </div>
+          </div>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt excepturi labore explicabo temporibus, enim
+          voluptate saepe corrupti illum earum eveniet ab veniam vel nisi fugit accusantium perferendis quas facilis
+          quod.
+        </div>
+
+        <cds-divider cds-card-remove-margin></cds-divider>
+
+        <div cds-layout="horizontal gap:sm p-y:sm align:vertical-center">
+          <cds-button action="flat-inline"> Action </cds-button>
+        </div>
+      </div>
+    </cds-card>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        margin: 1rem;
+        justify-content: center;
+      }
+    `,
+  ],
+})
+export class AppComponent {}

apps/adoption/src/app/pages/adoption-tooling.page.ts

@@ -17,6 +17,7 @@ const eslintRules: Record<string, { name: string; errorLevel: string; fixer: boo
   'no-clr-alert': { name: 'Alert', errorLevel: 'warn', fixer: false },
   'no-clr-badge': { name: 'Badge', errorLevel: 'warn', fixer: true },
   'no-clr-button': { name: 'Button', errorLevel: 'warn', fixer: false },
+  'no-clr-card': { name: 'Card', errorLevel: 'warn', fixer: false },
   'no-clr-checkbox': { name: 'Checkbox', errorLevel: 'warn', fixer: false },
   'no-clr-datalist': { name: 'Datalist', errorLevel: 'warn', fixer: false },
   'no-clr-form': { name: 'Form', errorLevel: 'warn', fixer: false },

apps/adoption/src/app/pages/card.page.ts

@@ -0,0 +1,55 @@
+import { Component } from '@angular/core';
+import { DemoTabData } from '../components/demo.component';
+
+@Component({
+  selector: 'app-card',
+  template: `
+    <h1>Card</h1>
+
+    <demo [tabs]="demo1">
+      <h2>Basic</h2>
+    </demo>
+    <demo [tabs]="demo2">
+      <h2>Card media block</h2>
+    </demo>
+  `,
+})
+export class CardPage {
+  demo1: DemoTabData[] = [
+    {
+      name: 'Angular',
+      files: {
+        'src/app/app.component.ts': 'card/card.1.angular.txt',
+      },
+      language: 'ts',
+      template: 'angular',
+    },
+    {
+      name: 'Core',
+      files: {
+        'src/app/app.component.ts': 'card/card.1.core.txt',
+      },
+      language: 'ts',
+      template: 'core',
+    },
+  ];
+
+  demo2: DemoTabData[] = [
+    {
+      name: 'Angular',
+      files: {
+        'src/app/app.component.ts': 'card/card.2.angular.txt',
+      },
+      language: 'ts',
+      template: 'angular',
+    },
+    {
+      name: 'Core',
+      files: {
+        'src/app/app.component.ts': 'card/card.2.core.txt',
+      },
+      language: 'ts',
+      template: 'core',
+    },
+  ];
+}