updated the card wizard badge and tab from main repo

projects/dxc-ngx-cdk/src/lib/dxc-badge/dxc-badge.component.html

@@ -0,0 +1 @@
+<span>{{notificationText}}</span>

projects/dxc-ngx-cdk/src/lib/dxc-badge/dxc-badge.component.ts

@@ -0,0 +1,77 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  SimpleChanges,
+  HostBinding,
+} from "@angular/core";
+import { BehaviorSubject } from "rxjs";
+import { css } from "emotion";
+import { CssUtils } from "../utils";
+@Component({
+  selector: "dxc-badge",
+  templateUrl: "./dxc-badge.component.html",
+  providers: [CssUtils],
+})
+export class DxcBadgeComponent implements OnInit {
+  @HostBinding("class") className;
+  @Input()
+  notificationText: any;
+
+  defaultInputs = new BehaviorSubject<any>({});
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if(this.notificationText > 99) {
+      this.notificationText = "+99";
+    }
+    const inputs = Object.keys(changes).reduce((result, item) => {
+      result[item] = changes[item].currentValue;
+      return result;
+    }, {});
+    this.defaultInputs.next({ ...this.defaultInputs.getValue(), ...inputs });
+    this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
+  }
+
+  constructor(private utils: CssUtils) {}
+
+  ngOnInit() {
+    this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
+  }
+
+  getDynamicStyle(inputs) {
+    return css`
+      display: flex;
+      padding-bottom: 1px;
+      padding-right: 1px;
+      flex-wrap: wrap;
+      box-sizing: border-box;
+      align-items: center;
+      line-height: 1;
+      align-content: center;
+      flex-direction: row;
+      justify-content: center;
+      background-color: var(--tabs-badgeBackgroundColor);
+      font-family: var(--tabs-badgeFontFamily);
+      font-size: var(--tabs-badgeFontSize);
+      font-style: var(--tabs-badgeFontStyle);
+      font-weight: var(--tabs-badgeFontWeight);
+      color: var(--tabs-badgeFontColor);
+      letter-spacing: var("--tabs-badgeLetterSpacing);
+      width: ${
+        !this.notificationText
+          ? "var(--tabs-badgeWidth)"
+          : "var(--tabs-badgeWidthWithNotificationNumber)"
+      };
+      height: ${
+        !this.notificationText
+          ? "var(--tabs-badgeHeight)"
+          : "var(--tabs-badgeHeightWithNotificationNumber)"
+      };
+      border-radius: ${
+        !this.notificationText
+          ? "var(--tabs-badgeRadius)"
+          : "var(--tabs-badgeRadiusWithNotificationNumber)"
+      };
+    `;
+  }
+}

projects/dxc-ngx-cdk/src/lib/dxc-badge/dxc-badge.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from "@angular/core";
+import { DxcBadgeComponent } from "./dxc-badge.component";
+import { CommonModule } from "@angular/common";
+
+@NgModule({
+  declarations: [DxcBadgeComponent],
+  imports: [CommonModule],
+  exports: [DxcBadgeComponent],
+})
+export class DxcBadgeModule {}

projects/dxc-ngx-cdk/src/lib/dxc-card/dxc-card.component.html

@@ -1,5 +1,9 @@
-<mat-card
+
+<dxc-box [shadowDepth]="getShadowDepth()">
+  <mat-card
   (click)="onClickHandler($event)"
+  (mouseEnter)="changeIsHovered(true)"
+  (mouseLeave)="changeIsHovered(false)"
   [ngClass]="[
     imagePosition === 'before'
       ? 'before'
@@ -9,10 +13,12 @@
   ]"
   [tabindex]="tabIndexValue"
 >
-  <div class="imageContainer" *ngIf="imageSrc">
+  <div class="imageContainer" *ngIf="imageSrc" >
     <img src="{{ imageSrc }}" />
   </div>
   <div class="content" #content>
     <ng-content></ng-content>
   </div>
 </mat-card>
+
+</dxc-box>

projects/dxc-ngx-cdk/src/lib/dxc-card/dxc-card.component.spec.ts

@@ -1,30 +1,46 @@
 import { render, fireEvent } from "@testing-library/angular";
 import { DxcCardComponent } from "./dxc-card.component";
 import { MatCardModule } from "@angular/material/card";
+import { DxcBoxModule } from "../dxc-box/dxc-box.module";
+import { TestBed } from "@angular/core/testing";
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from "@angular/platform-browser-dynamic/testing";
+import { screen } from "@testing-library/dom";
+import { BackgroundProviderModule } from "../background-provider/background-provider.module";
+
+TestBed.initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
 
 describe("DxcCardComponent tests", () => {
   test("should render dxc-card", async () => {
     const projection = "Content inside the ng-content!";
-    const dxcCard = await render(DxcCardComponent, {
-      template: `<dxc-card>${projection}</dxc-card>`,
+    await render(`<dxc-card>${projection}</dxc-card>`, {
+      imports: [BackgroundProviderModule, DxcBoxModule],
       componentProperties: {},
-      imports: [MatCardModule],
+      declarations: [DxcCardComponent],
     });
 
-    expect(dxcCard.getByText(projection));
+    expect(screen.getByText(projection));
   });
 
   test("dxc-card onClick", async () => {
     const projection = "Content inside the ng-content!";
     const onClickFunction = jest.fn();
-    const dxcCard = await render(DxcCardComponent, {
-      template: `<dxc-card (onClick)="onClickFunction($event)">${projection}</dxc-card>`,
-      componentProperties: { onClickFunction },
-      imports: [MatCardModule],
-    });
+    await render(
+      `<dxc-card (onClick)="onClickFunction($event)">${projection}</dxc-card>`,
+      {
+        imports: [BackgroundProviderModule, DxcBoxModule],
+        componentProperties: { onClickFunction },
+        declarations: [DxcCardComponent],
+      }
+    );
 
-    expect(dxcCard.getByText(projection));
-    fireEvent.click(dxcCard.getByText(projection));
+    expect(screen.getByText(projection));
+    fireEvent.click(screen.getByText(projection));
     expect(onClickFunction).toHaveBeenCalled();
   });
 });