@mediaradar/design-components 0.12.0 → 0.14.0

package/dist/index.d.cts

@@ -151,7 +151,7 @@ declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps):
  * colour do I want" -- a caller reaching for `danger` because red looks good
  * is the start of the drift this component replaces.
  */
-type BadgeTone = "neutral" | "brand" | "success" | "warning" | "danger" | "ai" | "overlay";
+type BadgeTone = "neutral" | "brand" | "brandSolid" | "success" | "warning" | "danger" | "ai" | "overlay";
 /**
  * Shape and case. Orthogonal to tone: any tone can be any kind, which is what
  * keeps this two small props instead of one list of every combination the
@@ -163,6 +163,14 @@ interface BadgeProps {
     tone?: BadgeTone;
     /** Shape and case. `count` for a number, `eyebrow` for a category label. */
     kind?: BadgeKind;
+    /**
+     * Draws a small filled dot before the label, in the tone's own ink. For a
+     * status that is scanned down a column rather than read -- the dot is what
+     * the eye follows, and it carries the colour at a size the text cannot.
+     * Purely decorative: the label is the accessible content, so the dot is
+     * hidden from assistive tech rather than announced as a second thing.
+     */
+    dot?: boolean;
     /** Text, or an icon plus text. Keep it to a few words -- a badge annotates, it does not explain. */
     children: ReactNode;
     className?: string;
@@ -174,10 +182,11 @@ interface BadgeProps {
  * props -- `tone` (what kind of thing) and `kind` (shape and case) -- which
  * between them cover every badge treatment in the product.
  * @props
- * tone?: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'ai' | 'overlay' (default 'neutral')
+ * tone?: 'neutral' | 'brand' | 'brandSolid' | 'success' | 'warning' | 'danger' | 'ai' | 'overlay' (default 'neutral')
  * kind?: 'label' | 'count' | 'eyebrow' (default 'label')
+ * dot?: boolean (default false) -- a filled dot before the label, in the tone's ink
  * children: ReactNode
- * @tokens text-micro, rounded-full, bg-subtle, bg-brand-primarySoft,
+ * @tokens text-micro, rounded-full, bg-current, bg-subtle, bg-brand-primarySoft, bg-brand-primaryAction,
  * bg-status-success/15, bg-status-warning/30, bg-status-danger/15, bg-scrim,
  * text-text-secondary, text-brand-primaryAction, text-text-success,
  * text-text-warning, text-text-danger, text-ai-ontint, text-brand-onprimary,
@@ -189,6 +198,7 @@ interface BadgeProps {
  * that competes with the content it annotates has stopped being a badge.
  * @variant neutral - Default. A category, a count of something unremarkable, a quiet flag.
  * @variant brand - This item is special in a way the product cares about -- primary, selected, yours.
+ * @variant brandSolid - Full brand fill, for a count that has to be noticed: active filters, unread, selected.
  * @variant success - A finished or healthy state. Never just "green because it is good news".
  * @variant warning - Needs attention but is not broken. Partial data, an approaching limit.
  * @variant danger - Failed, expired, or over a hard limit. Not merely "important".
@@ -210,13 +220,14 @@ interface BadgeProps {
  * @usage
  * ```tsx
  * <Badge>Financial Services</Badge>
- * <Badge tone="brand" kind="count">{selected.length}</Badge>
+ * <Badge tone="brandSolid" kind="count">{activeFilters}</Badge>
  * <Badge tone="warning">Partial month</Badge>
+ * <Badge tone="success" dot>Completed</Badge>
  * <Badge kind="eyebrow" tone="neutral">Saved view</Badge>
  * <Badge tone="brand"><Check size={11} aria-hidden="true" />Primary</Badge>
  * ```
  */
-declare function Badge({ tone, kind, children, className }: BadgeProps): react.JSX.Element;
+declare function Badge({ tone, kind, dot, children, className }: BadgeProps): react.JSX.Element;
 
 /**
  * @pattern CheckBox

package/dist/index.d.ts

@@ -151,7 +151,7 @@ declare function AdvertiserSearchPrompt({ label }: AdvertiserSearchPromptProps):
  * colour do I want" -- a caller reaching for `danger` because red looks good
  * is the start of the drift this component replaces.
  */
-type BadgeTone = "neutral" | "brand" | "success" | "warning" | "danger" | "ai" | "overlay";
+type BadgeTone = "neutral" | "brand" | "brandSolid" | "success" | "warning" | "danger" | "ai" | "overlay";
 /**
  * Shape and case. Orthogonal to tone: any tone can be any kind, which is what
  * keeps this two small props instead of one list of every combination the
@@ -163,6 +163,14 @@ interface BadgeProps {
     tone?: BadgeTone;
     /** Shape and case. `count` for a number, `eyebrow` for a category label. */
     kind?: BadgeKind;
+    /**
+     * Draws a small filled dot before the label, in the tone's own ink. For a
+     * status that is scanned down a column rather than read -- the dot is what
+     * the eye follows, and it carries the colour at a size the text cannot.
+     * Purely decorative: the label is the accessible content, so the dot is
+     * hidden from assistive tech rather than announced as a second thing.
+     */
+    dot?: boolean;
     /** Text, or an icon plus text. Keep it to a few words -- a badge annotates, it does not explain. */
     children: ReactNode;
     className?: string;
@@ -174,10 +182,11 @@ interface BadgeProps {
  * props -- `tone` (what kind of thing) and `kind` (shape and case) -- which
  * between them cover every badge treatment in the product.
  * @props
- * tone?: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'ai' | 'overlay' (default 'neutral')
+ * tone?: 'neutral' | 'brand' | 'brandSolid' | 'success' | 'warning' | 'danger' | 'ai' | 'overlay' (default 'neutral')
  * kind?: 'label' | 'count' | 'eyebrow' (default 'label')
+ * dot?: boolean (default false) -- a filled dot before the label, in the tone's ink
  * children: ReactNode
- * @tokens text-micro, rounded-full, bg-subtle, bg-brand-primarySoft,
+ * @tokens text-micro, rounded-full, bg-current, bg-subtle, bg-brand-primarySoft, bg-brand-primaryAction,
  * bg-status-success/15, bg-status-warning/30, bg-status-danger/15, bg-scrim,
  * text-text-secondary, text-brand-primaryAction, text-text-success,
  * text-text-warning, text-text-danger, text-ai-ontint, text-brand-onprimary,
@@ -189,6 +198,7 @@ interface BadgeProps {
  * that competes with the content it annotates has stopped being a badge.
  * @variant neutral - Default. A category, a count of something unremarkable, a quiet flag.
  * @variant brand - This item is special in a way the product cares about -- primary, selected, yours.
+ * @variant brandSolid - Full brand fill, for a count that has to be noticed: active filters, unread, selected.
  * @variant success - A finished or healthy state. Never just "green because it is good news".
  * @variant warning - Needs attention but is not broken. Partial data, an approaching limit.
  * @variant danger - Failed, expired, or over a hard limit. Not merely "important".
@@ -210,13 +220,14 @@ interface BadgeProps {
  * @usage
  * ```tsx
  * <Badge>Financial Services</Badge>
- * <Badge tone="brand" kind="count">{selected.length}</Badge>
+ * <Badge tone="brandSolid" kind="count">{activeFilters}</Badge>
  * <Badge tone="warning">Partial month</Badge>
+ * <Badge tone="success" dot>Completed</Badge>
  * <Badge kind="eyebrow" tone="neutral">Saved view</Badge>
  * <Badge tone="brand"><Check size={11} aria-hidden="true" />Primary</Badge>
  * ```
  */
-declare function Badge({ tone, kind, children, className }: BadgeProps): react.JSX.Element;
+declare function Badge({ tone, kind, dot, children, className }: BadgeProps): react.JSX.Element;
 
 /**
  * @pattern CheckBox