@purpurds/badge 3.0.0

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-badge_yhork_1{font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-medium);font-size:var(--purpur-typography-scale-75);min-height:var(--purpur-spacing-200);border-radius:var(--purpur-border-radius-xs);line-height:1;padding:var(--purpur-spacing-50) var(--purpur-spacing-100);display:inline-flex;align-items:center;gap:var(--purpur-spacing-50)}._purpur-badge--attention_yhork_13{background-color:var(--purpur-color-background-status-attention);color:var(--purpur-color-text-status-attention)}._purpur-badge--special_yhork_17{background-color:var(--purpur-color-background-status-special);color:var(--purpur-color-text-status-special)}._purpur-badge--neutral_yhork_21{background-color:var(--purpur-color-background-status-neutral);color:var(--purpur-color-text-status-neutral)}._purpur-badge--information_yhork_25{background-color:var(--purpur-color-background-status-info-strong);color:var(--purpur-color-text-status-info-strong)}._purpur-badge--success_yhork_29{background-color:var(--purpur-color-background-status-success-strong);color:var(--purpur-color-text-status-success-strong)}._purpur-badge--warning_yhork_33{background-color:var(--purpur-color-background-status-warning-strong);color:var(--purpur-color-text-status-warning-strong)}._purpur-badge--error_yhork_37{background-color:var(--purpur-color-background-status-error-strong);color:var(--purpur-color-text-status-error-strong)}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@purpurds/badge",
+  "version": "3.0.0",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/badge.cjs.js",
+  "types": "./dist/badge.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/badge.cjs.js",
+      "systemjs": "./dist/badge.system.js",
+      "types": "./dist/badge.d.ts",
+      "default": "./dist/badge.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/badge.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/icon": "3.0.0",
+    "@purpurds/tokens": "3.0.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.7.0",
+    "@storybook/blocks": "~7.6.0",
+    "@storybook/react": "~7.6.0",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.3.0",
+    "@testing-library/react": "~14.1.2",
+    "@types/node": "18",
+    "@types/react-dom": "~18.2.17",
+    "@types/react": "~18.2.42",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "~8.56.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "typescript": "~5.2.2",
+    "vite": "~5.0.6",
+    "vitest": "~1.2.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "rm -rf dist && vite build && vite build --mode systemjs",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/readme.mdx

@@ -0,0 +1,56 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as BadgeStories from "./src/badge.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/Badge" of={BadgeStories} />
+
+# Badge
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+<ArgTypes />
+
+### Installation
+
+#### Via NPM, in the monorepo
+
+Add the dependency to your consumer app like `"@purpurds/badge": "x.y.z"`
+
+### Via NPM, outside the monorepo (build-time)
+
+To install this package, you need to setup access to the new artifactory. [Click here to go to the guide on how to do that](https://github.com/telia-company/jfrog-documentation/blob/main/doc/JFrog/JFrog_Onboarding.md#getting-access-to-artifactory-and-other-jfrog-applications).
+
+---
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/badge/styles";
+```
+
+and
+
+```tsx
+import "@purpurds/badge/styles";
+```
+
+In MyComponent.tsx
+
+```tsx
+import { Badge } from "@purpurds/badge";
+
+export const MyComponent = () => {
+  return (
+    <div>
+      <Badge {...someProps}>Some content</Badge>
+    </div>
+  );
+};
+```

package/src/badge.module.scss

@@ -0,0 +1,49 @@
+.purpur-badge {
+  font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-medium);
+  font-size: var(--purpur-typography-scale-75);
+
+  min-height: var(--purpur-spacing-200);
+  border-radius: var(--purpur-border-radius-xs);
+  line-height: 1;
+  padding: var(--purpur-spacing-50) var(--purpur-spacing-100);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--purpur-spacing-50);
+
+  &--attention {
+    background-color: var(--purpur-color-background-status-attention);
+    color: var(--purpur-color-text-status-attention);
+  }
+
+  &--special {
+    background-color: var(--purpur-color-background-status-special);
+    color: var(--purpur-color-text-status-special);
+  }
+
+  &--neutral {
+    background-color: var(--purpur-color-background-status-neutral);
+    color: var(--purpur-color-text-status-neutral);
+  }
+
+  &--information {
+    background-color: var(--purpur-color-background-status-info-strong);
+    color: var(--purpur-color-text-status-info-strong);
+  }
+
+  &--success {
+    background-color: var(--purpur-color-background-status-success-strong);
+    color: var(--purpur-color-text-status-success-strong);
+  }
+
+  &--warning {
+    background-color: var(--purpur-color-background-status-warning-strong);
+    color: var(--purpur-color-text-status-warning-strong);
+  }
+
+  &--error {
+    background-color: var(--purpur-color-background-status-error-strong);
+    color: var(--purpur-color-text-status-error-strong);
+  }
+}

package/src/badge.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import "@purpurds/icon/styles";
+import { Badge, BADGE_VARIANT } from "./badge";
+
+const meta: Meta<typeof Badge> = {
+  title: "Components/Badge",
+  component: Badge,
+  parameters: {
+    design: [
+      {
+        name: "Badge",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=951%3A86&mode=design&t=Mx6nWh1kDdDxw6h1-1",
+      },
+    ],
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Showcase: Story = {
+  args: {
+    variant: BADGE_VARIANT.SUCCESS,
+    children: "Badge",
+    showIcon: true,
+  },
+};

package/src/badge.test.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { fiveg, Icon } from "@purpurds/icon";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { Badge } from "./badge";
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("Badge", () => {
+  it("should render with badge variant with default icon", () => {
+    render(
+      <Badge data-testid="badge" variant="success" allyLabel="Testing badge">
+        Badge test
+      </Badge>
+    );
+
+    expect(screen.getByTestId("badge")).toHaveTextContent("Badge test");
+    expect(screen.getByTestId("badge").className).toContain("success");
+    expect(screen.getByTestId("badge-icon")).toBeInTheDocument();
+    expect(screen.getByTestId("badge-icon")).toHaveAttribute("aria-label", "Testing badge");
+  });
+
+  it("should render with badge variant without default icon", () => {
+    render(
+      <Badge data-testid="badge" variant="special" allyLabel="Testing badge">
+        Badge test
+      </Badge>
+    );
+
+    expect(screen.getByTestId("badge")).toHaveTextContent("Badge test");
+    expect(screen.getByTestId("badge").className).toContain("special");
+    expect(screen.queryByTestId("badge-icon")).not.toBeInTheDocument();
+  });
+
+  it("should render with custom icon", () => {
+    render(
+      <Badge data-testid="badge" variant="neutral" allyLabel="Testing badge">
+        <>
+          <Icon svg={fiveg} size="xs" data-testid="badge-custom-icon" />
+          Badge test
+        </>
+      </Badge>
+    );
+
+    expect(screen.getByTestId("badge")).toHaveTextContent("Badge test");
+    expect(screen.getByTestId("badge").className).toContain("neutral");
+    expect(screen.getByTestId("badge-custom-icon")).toBeInTheDocument();
+  });
+});

package/src/badge.tsx

@@ -0,0 +1,64 @@
+import React, { ReactNode } from "react";
+import { alert, checkCircle, error, Icon } from "@purpurds/icon";
+import c from "classnames";
+
+import styles from "./badge.module.scss";
+const rootClassName = "purpur-badge";
+
+export const BADGE_VARIANT = {
+  ATTENTION: "attention",
+  SPECIAL: "special",
+  NEUTRAL: "neutral",
+  INFORMATION: "information",
+  SUCCESS: "success",
+  WARNING: "warning",
+  ERROR: "error",
+} as const;
+
+export const badgeVariants = Object.values(BADGE_VARIANT);
+export type BadgeVariant = (typeof BADGE_VARIANT)[keyof typeof BADGE_VARIANT];
+
+const getIcon = (variant: BadgeVariant) => {
+  switch (variant) {
+    case BADGE_VARIANT.SUCCESS:
+      return checkCircle;
+    case BADGE_VARIANT.WARNING:
+      return alert;
+    case BADGE_VARIANT.ERROR:
+      return error;
+    default:
+      return;
+  }
+};
+
+export type BadgeProps = {
+  children: ReactNode;
+  showIcon?: boolean;
+  variant: BadgeVariant;
+  ["data-testid"]?: string;
+  allyLabel?: string;
+  className?: string;
+};
+
+export const Badge = ({
+  children,
+  showIcon = true,
+  variant,
+  ["data-testid"]: dataTestid,
+  allyLabel,
+  className = "",
+  ...props
+}: BadgeProps) => {
+  const icon = getIcon(variant);
+
+  const classes = c([className, styles[rootClassName], styles[`${rootClassName}--${variant}`]]);
+
+  return (
+    <span aria-label={allyLabel} className={classes} data-testid={dataTestid} {...props}>
+      {showIcon && icon && (
+        <Icon data-testid={`${dataTestid}-icon`} allyTitle={allyLabel} size="xs" svg={icon} />
+      )}
+      {children}
+    </span>
+  );
+};

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}