feat(status-badge): add new TEDI-Ready component #10

angular.json

@@ -48,7 +48,8 @@
             "outputDir": "dist/storybook-static",
             "styles": [
               "./src/styles/index",
-              "./node_modules/@tedi-design-system/core/index.scss"
+              "./node_modules/@tedi-design-system/core/index.scss",
+              "./node_modules/@tedi-design-system/core/tedi-storybook-styles.scss"
             ],
             "experimentalZoneless": true
           }

community/components/tags/status-badge/status-badge.component.ts

@@ -21,6 +21,9 @@ export type StatusBadgeStatus =
   | "inactive"
   | "none";
 
+/**
+ * @deprecated Use StatusBadge from TEDI-ready instead. This component will be removed from future versions.
+ */
 @Component({
   selector: "[tedi-status-badge]",
   templateUrl: "./status-badge.component.html",

community/components/tags/status-badge/status-badge.stories.ts

@@ -141,6 +141,9 @@ const meta: Meta<StatusBadgeComponent> = {
       type: "figma",
       url: "https://www.figma.com/file/jWiRIXhHRxwVdMSimKX2FF/TEDI-Design-System-(draft)?type=design&node-id=2385-24154&m=dev",
     },
+    status: {
+      type: ["deprecated", "existsInTediReady"],
+    },
   },
 };
 export default meta;

community/components/tags/tag/tag.stories.ts

@@ -63,6 +63,11 @@ export default {
       },
     },
   },
+  parameters: {
+    status: {
+      type: ["deprecated", "existsInTediReady"],
+    },
+  },
 } as Meta<TagComponent>;
 
 type Story = StoryObj<TagComponent>;

tedi/components/tags/status-badge/status-badge.component.html

@@ -0,0 +1,30 @@
+@if (title()) {
+  <abbr
+    [ngClass]="classes()"
+    [attr.id]="uniqueId"
+    [attr.title]="title()"
+    [attr.role]="role()"
+    [attr.aria-live]="ariaLive()"
+  >
+    <ng-container *ngTemplateOutlet="statusBadgeContent"></ng-container>
+  </abbr>
+} @else {
+  <div
+    [ngClass]="classes()"
+    [attr.id]="uniqueId"
+    [attr.role]="role()"
+    [attr.aria-live]="ariaLive()"
+  >
+    <ng-container *ngTemplateOutlet="statusBadgeContent"></ng-container>
+  </div>
+}
+
+<ng-template #statusBadgeContent>
+  @if (icon()) {
+    <tedi-icon class="tedi-status-badge__icon" [name]="icon()" [size]="16" />
+  }
+
+  @if (text()) {
+    <span class="tedi-status-badge__text">{{ text() }}</span>
+  }
+</ng-template>

tedi/components/tags/status-badge/status-badge.component.scss

@@ -0,0 +1,104 @@
+$badge-colors: (
+  "neutral",
+  "brand",
+  "accent",
+  "success",
+  "danger",
+  "warning",
+  "transparent"
+);
+$badge-variants: ("filled", "filled-bordered", "bordered");
+$badge-status-colors: ("inactive", "success", "danger", "warning");
+
+.tedi-status-badge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--tag-default-padding-y) var(--tag-default-padding-x);
+  font-size: var(--body-small-regular-size);
+  font-weight: var(--body-small-regular-weight);
+  line-height: var(--body-small-regular-line-height);
+  color: var(--_status-badge-text);
+  text-decoration: none;
+  background: var(--_status-badge-background);
+  border-radius: var(--tag-default-radius);
+  box-shadow: var(--_status-badge-box-shadow);
+
+  &__text {
+    min-width: fit-content;
+    padding: 0 var(--tag-default-padding-x);
+  }
+
+  &--large {
+    min-width: var(--tag-status-large-min-width);
+    padding: var(--tag-status-large-padding-y) var(--tag-status-large-padding-x);
+  }
+
+  @each $variant in $badge-variants {
+    &.tedi-status-badge--variant-#{$variant} {
+      @each $color in $badge-colors {
+        &.tedi-status-badge--color-#{$color} {
+          --_status-badge-text: var(--status-badge-text-#{$color});
+          --_status-badge-box-shadow: inset
+            0
+            0
+            0
+            1px
+            var(--status-badge-border-#{$color});
+
+          @if $variant == "bordered" {
+            --_status-badge-background: transparent;
+          } @else {
+            --_status-badge-background: var(
+              --status-badge-background-#{$color}
+            );
+          }
+
+          @if $variant == "filled" {
+            --_status-badge-box-shadow: none;
+          }
+        }
+      }
+    }
+  }
+
+  &--status {
+    &::before {
+      position: absolute;
+      top: -0.125rem;
+      right: -0.125rem;
+      z-index: 1;
+      width: var(--status-indicator-sm);
+      height: var(--status-indicator-sm);
+      content: "";
+      background-color: var(--_status-badge--indicator-background);
+      border: 1px solid var(--status-badge-indicator-border);
+      border-radius: 50%;
+    }
+
+    &.tedi-status-badge--large::before {
+      width: var(--status-indicator-lg);
+      height: var(--status-indicator-lg);
+    }
+
+    @each $status in $badge-status-colors {
+      &-#{$status}::before {
+        --_status-badge--indicator-background: var(
+          --status-badge-indicator-#{$status}
+        );
+      }
+    }
+  }
+
+  .tedi-status-badge__icon {
+    color: inherit;
+  }
+
+  &__icon-only {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--tag-status-icon-padding-y) var(--tag-status-icon-padding-x);
+    line-height: var(--body-small-regular-line-height);
+  }
+}

tedi/components/tags/status-badge/status-badge.component.spec.ts

@@ -0,0 +1,115 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { StatusBadgeComponent } from "./status-badge.component";
+
+describe("StatusBadgeComponent", () => {
+  let fixture: ComponentFixture<StatusBadgeComponent>;
+  let component: StatusBadgeComponent;
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [StatusBadgeComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(StatusBadgeComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+  });
+
+  it("should create the component", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("renders a div if title is not provided", () => {
+    fixture.componentRef.setInput("text", "Text");
+    fixture.detectChanges();
+
+    const div = element.querySelector("div.tedi-status-badge");
+    expect(div).not.toBeNull();
+    expect(element.querySelector("abbr")).toBeNull();
+  });
+
+  it("renders the text when provided", () => {
+    fixture.componentRef.setInput("text", "Text");
+    fixture.detectChanges();
+
+    const span = element.querySelector(".tedi-status-badge__text");
+    expect(span).not.toBeNull();
+    expect(span?.textContent).toBe("Text");
+  });
+
+  it("renders an abbr if title is provided", () => {
+    fixture.componentRef.setInput("title", "Title");
+    fixture.componentRef.setInput("text", "Text");
+    fixture.detectChanges();
+
+    const abbr = element.querySelector("abbr.tedi-status-badge");
+    expect(abbr).not.toBeNull();
+    expect(abbr?.getAttribute("title")).toBe("Title");
+  });
+
+  it("applies classes for color, variant, size, and status", () => {
+    fixture.componentRef.setInput("color", "brand");
+    fixture.componentRef.setInput("variant", "filled-bordered");
+    fixture.componentRef.setInput("size", "large");
+    fixture.componentRef.setInput("status", "success");
+    fixture.detectChanges();
+
+    const badge = element.querySelector(".tedi-status-badge");
+    expect(badge).not.toBeNull();
+
+    expect(badge?.classList.contains("tedi-status-badge--color-brand")).toBe(
+      true,
+    );
+    expect(
+      badge?.classList.contains("tedi-status-badge--variant-filled-bordered"),
+    ).toBe(true);
+    expect(badge?.classList.contains("tedi-status-badge--large")).toBe(true);
+    expect(badge?.classList.contains("tedi-status-badge--status")).toBe(true);
+    expect(badge?.classList.contains("tedi-status-badge--status-success")).toBe(
+      true,
+    );
+  });
+
+  it("computes aria-live based on role", () => {
+    fixture.componentRef.setInput("role", "alert");
+    fixture.detectChanges();
+    expect(component.ariaLive()).toBe("assertive");
+
+    fixture.componentRef.setInput("role", "status");
+    fixture.detectChanges();
+    expect(component.ariaLive()).toBe("polite");
+
+    fixture.componentRef.setInput("role", "");
+    fixture.detectChanges();
+    expect(component.ariaLive()).toBeNull();
+  });
+
+  it("renders icon when icon is provided", () => {
+    fixture.componentRef.setInput("icon", "edit");
+    fixture.detectChanges();
+
+    const icon = element.querySelector("tedi-icon");
+    expect(icon).not.toBeNull();
+  });
+
+  it("adds icon-only class when only icon is present", () => {
+    fixture.componentRef.setInput("icon", "edit");
+    fixture.componentRef.setInput("text", "");
+    fixture.detectChanges();
+
+    const badge = element.querySelector(".tedi-status-badge");
+    expect(badge).not.toBeNull();
+    expect(badge?.classList.contains("tedi-status-badge__icon-only")).toBe(
+      true,
+    );
+  });
+
+  it("should include custom class in computed classes", () => {
+    fixture.componentRef.setInput("class", "custom-class");
+    fixture.detectChanges();
+
+    const classes = component.classes();
+    expect(classes).toContain("custom-class");
+  });
+});