feat: badge component

Author: olaf-k

packages/common/qds-core/src/badge/badge.api.ts

@@ -0,0 +1,77 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {booleanDataAttr} from "@qualcomm-ui/utils/attributes"
+import type {PropNormalizer} from "@qualcomm-ui/utils/machine"
+
+import {badgeClasses} from "./badge.classes"
+import type {
+  QdsBadgeApi,
+  QdsBadgeApiProps,
+  QdsBadgeCountProps,
+  QdsBadgeIconBindings,
+  QdsBadgeIconProps,
+  QdsBadgeRootBindings,
+  QdsBadgeStatusProps,
+  QdsBadgeTextProps,
+} from "./badge.types"
+
+export function createQdsBadgeApi(
+  props: QdsBadgeApiProps,
+  normalize: PropNormalizer,
+): QdsBadgeApi {
+  const type = props.type || "text"
+  const size = props.size || "md"
+
+  let emphasis: string | undefined
+  let variant: string | undefined
+  let overflow = false
+  let displayCount: number | string | null = null
+
+  if (type === "count") {
+    const countProps = props as QdsBadgeCountProps
+    variant = countProps.variant || "neutral"
+    if (countProps.count != null) {
+      const max = countProps.max ?? 99
+      overflow = countProps.count > max
+      displayCount = overflow ? `${max}+` : countProps.count
+    }
+  } else if (type === "status") {
+    emphasis = (props as QdsBadgeStatusProps).emphasis || "neutral"
+    variant = (props as QdsBadgeStatusProps).variant || "filled"
+  } else if (type === "icon") {
+    emphasis = (props as QdsBadgeIconProps).emphasis || "neutral"
+    variant = (props as QdsBadgeIconProps).variant || "default"
+  } else {
+    emphasis = (props as QdsBadgeTextProps).emphasis || "neutral"
+    variant = (props as QdsBadgeTextProps).variant || "default"
+  }
+
+  return {
+    getDisplayCount(): number | string | null {
+      return displayCount
+    },
+    getIconBindings(): QdsBadgeIconBindings {
+      return normalize.element({
+        className: badgeClasses.icon,
+        "data-part": "icon",
+        "data-scope": "badge",
+        "data-size": size,
+      })
+    },
+    getRootBindings(): QdsBadgeRootBindings {
+      return normalize.element({
+        className: badgeClasses.root,
+        "data-disabled": booleanDataAttr(props.disabled),
+        "data-emphasis": emphasis,
+        "data-overflow": booleanDataAttr(overflow),
+        "data-part": "root",
+        "data-scope": "badge",
+        "data-size": size,
+        "data-type": type,
+        "data-variant": variant,
+      })
+    },
+    type,
+  }
+}

packages/common/qds-core/src/badge/badge.classes.ts

@@ -0,0 +1,7 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+export const badgeClasses = {
+  icon: "qui-badge__icon",
+  root: "qui-badge__root",
+} as const

packages/common/qds-core/src/badge/badge.types.ts

@@ -0,0 +1,203 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import type {BooleanDataAttr} from "@qualcomm-ui/utils/attributes"
+
+import type {badgeClasses} from "./badge.classes"
+
+export type QdsBadgeType = "count" | "icon" | "text" | "status"
+
+export type QdsBadgeBasicSize = "sm" | "md" | "lg"
+export type QdsBadgeExtendedSize = "xs" | QdsBadgeBasicSize | "xl"
+export type QdsBadgeIconSize = "xxs" | QdsBadgeExtendedSize
+
+export type QdsBadgeSize =
+  | QdsBadgeBasicSize
+  | QdsBadgeExtendedSize
+  | QdsBadgeIconSize
+
+export type QdsBadgeSemanticEmphasis =
+  | "neutral"
+  | "brand"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger"
+
+export type QdsBadgeCategoryEmphasis =
+  | "cat-1"
+  | "cat-2"
+  | "cat-3"
+  | "cat-4"
+  | "cat-5"
+  | "cat-6"
+  | "cat-7"
+  | "cat-8"
+  | "cat-9"
+  | "cat-10"
+
+export type QdsBadgeCountVariant =
+  | "neutral"
+  | "neutral-outline"
+  | "brand"
+  | "brand-outline"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger"
+  | "persistent-black"
+  | "persistent-white"
+
+export type QdsBadgeStatusEmphasis = QdsBadgeSemanticEmphasis
+export type QdsBadgeStatusVariant = "filled" | "outlined"
+
+export type QdsBadgeIconTextEmphasis =
+  | QdsBadgeSemanticEmphasis
+  | QdsBadgeCategoryEmphasis
+export type QdsBadgeIconTextVariant = "default" | "subtle"
+
+interface QdsBadgeBaseProps {
+  /**
+   * The badge disabled state.
+   */
+  disabled?: boolean
+}
+
+export interface QdsBadgeCountProps extends QdsBadgeBaseProps {
+  /**
+   * The numeric count to display.
+   */
+  count?: number
+
+  /**
+   * Maximum count to display.
+   * @default 99
+   */
+  max?: number
+
+  /**
+   * Governs the size of the badge.
+   * @default 'md'
+   */
+  size?: QdsBadgeBasicSize
+
+  /**
+   * The badge type.
+   */
+  type: "count"
+
+  /**
+   * Governs the color and style of the count badge.
+   * @default 'neutral'
+   */
+  variant?: QdsBadgeCountVariant
+}
+
+export interface QdsBadgeStatusProps extends QdsBadgeBaseProps {
+  /**
+   * Governs the color of the status badge.
+   * @default 'neutral'
+   */
+  emphasis?: QdsBadgeStatusEmphasis
+
+  /**
+   * Governs the size of the badge.
+   * @default 'md'
+   */
+  size?: QdsBadgeExtendedSize
+
+  /**
+   * The badge type.
+   */
+  type: "status"
+
+  /**
+   * Governs the style of the status badge.
+   * @default 'filled'
+   */
+  variant?: QdsBadgeStatusVariant
+}
+
+export interface QdsBadgeIconProps extends QdsBadgeBaseProps {
+  /**
+   * Governs the color of the icon badge.
+   * @default 'neutral'
+   */
+  emphasis?: QdsBadgeIconTextEmphasis
+
+  /**
+   * Governs the size of the badge.
+   * @default 'md'
+   */
+  size?: QdsBadgeIconSize
+
+  /**
+   * The badge type.
+   */
+  type: "icon"
+
+  /**
+   * Governs the style of the icon badge.
+   * @default 'default'
+   */
+  variant?: QdsBadgeIconTextVariant
+}
+
+export interface QdsBadgeTextProps extends QdsBadgeBaseProps {
+  /**
+   * Governs the color of the text badge.
+   * @default 'neutral'
+   */
+  emphasis?: QdsBadgeIconTextEmphasis
+
+  /**
+   * Governs the size of the badge.
+   * @default 'md'
+   */
+  size?: QdsBadgeBasicSize
+
+  /**
+   * The badge type.
+   */
+  type?: "text"
+
+  /**
+   * Governs the style of the text badge.
+   * @default 'default'
+   */
+  variant?: QdsBadgeIconTextVariant
+}
+
+export type QdsBadgeApiProps =
+  | QdsBadgeCountProps
+  | QdsBadgeStatusProps
+  | QdsBadgeIconProps
+  | QdsBadgeTextProps
+
+type BadgeClasses = typeof badgeClasses
+
+export interface QdsBadgeRootBindings {
+  className: BadgeClasses["root"]
+  "data-disabled": BooleanDataAttr
+  "data-emphasis"?: string
+  "data-overflow": BooleanDataAttr
+  "data-part": "root"
+  "data-scope": "badge"
+  "data-size": QdsBadgeSize
+  "data-type": QdsBadgeType
+  "data-variant"?: string
+}
+
+export interface QdsBadgeIconBindings {
+  className: BadgeClasses["icon"]
+  "data-part": "icon"
+  "data-scope": "badge"
+  "data-size": QdsBadgeSize
+}
+
+export interface QdsBadgeApi {
+  getDisplayCount(): number | string | null
+  getIconBindings(): QdsBadgeIconBindings
+  getRootBindings(): QdsBadgeRootBindings
+  type: QdsBadgeType
+}

packages/common/qds-core/src/badge/index.ts

@@ -0,0 +1,3 @@
+export * from "./badge.api"
+export * from "./badge.classes"
+export type * from "./badge.types"