@mediaradar/design-components 0.13.0 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +13 -5
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +12 -2
  4. package/dist/index.d.ts +12 -2
  5. package/dist/index.js +193 -185
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -163,6 +163,14 @@ interface BadgeProps {
163
163
  tone?: BadgeTone;
164
164
  /** Shape and case. `count` for a number, `eyebrow` for a category label. */
165
165
  kind?: BadgeKind;
166
+ /**
167
+ * Draws a small filled dot before the label, in the tone's own ink. For a
168
+ * status that is scanned down a column rather than read -- the dot is what
169
+ * the eye follows, and it carries the colour at a size the text cannot.
170
+ * Purely decorative: the label is the accessible content, so the dot is
171
+ * hidden from assistive tech rather than announced as a second thing.
172
+ */
173
+ dot?: boolean;
166
174
  /** Text, or an icon plus text. Keep it to a few words -- a badge annotates, it does not explain. */
167
175
  children: ReactNode;
168
176
  className?: string;
@@ -176,8 +184,9 @@ interface BadgeProps {
176
184
  * @props
177
185
  * tone?: 'neutral' | 'brand' | 'brandSolid' | 'success' | 'warning' | 'danger' | 'ai' | 'overlay' (default 'neutral')
178
186
  * kind?: 'label' | 'count' | 'eyebrow' (default 'label')
187
+ * dot?: boolean (default false) -- a filled dot before the label, in the tone's ink
179
188
  * children: ReactNode
180
- * @tokens text-micro, rounded-full, bg-subtle, bg-brand-primarySoft, bg-brand-primaryAction,
189
+ * @tokens text-micro, rounded-full, bg-current, bg-subtle, bg-brand-primarySoft, bg-brand-primaryAction,
181
190
  * bg-status-success/15, bg-status-warning/30, bg-status-danger/15, bg-scrim,
182
191
  * text-text-secondary, text-brand-primaryAction, text-text-success,
183
192
  * text-text-warning, text-text-danger, text-ai-ontint, text-brand-onprimary,
@@ -213,11 +222,12 @@ interface BadgeProps {
213
222
  * <Badge>Financial Services</Badge>
214
223
  * <Badge tone="brandSolid" kind="count">{activeFilters}</Badge>
215
224
  * <Badge tone="warning">Partial month</Badge>
225
+ * <Badge tone="success" dot>Completed</Badge>
216
226
  * <Badge kind="eyebrow" tone="neutral">Saved view</Badge>
217
227
  * <Badge tone="brand"><Check size={11} aria-hidden="true" />Primary</Badge>
218
228
  * ```
219
229
  */
220
- declare function Badge({ tone, kind, children, className }: BadgeProps): react.JSX.Element;
230
+ declare function Badge({ tone, kind, dot, children, className }: BadgeProps): react.JSX.Element;
221
231
 
222
232
  /**
223
233
  * @pattern CheckBox
package/dist/index.d.ts CHANGED
@@ -163,6 +163,14 @@ interface BadgeProps {
163
163
  tone?: BadgeTone;
164
164
  /** Shape and case. `count` for a number, `eyebrow` for a category label. */
165
165
  kind?: BadgeKind;
166
+ /**
167
+ * Draws a small filled dot before the label, in the tone's own ink. For a
168
+ * status that is scanned down a column rather than read -- the dot is what
169
+ * the eye follows, and it carries the colour at a size the text cannot.
170
+ * Purely decorative: the label is the accessible content, so the dot is
171
+ * hidden from assistive tech rather than announced as a second thing.
172
+ */
173
+ dot?: boolean;
166
174
  /** Text, or an icon plus text. Keep it to a few words -- a badge annotates, it does not explain. */
167
175
  children: ReactNode;
168
176
  className?: string;
@@ -176,8 +184,9 @@ interface BadgeProps {
176
184
  * @props
177
185
  * tone?: 'neutral' | 'brand' | 'brandSolid' | 'success' | 'warning' | 'danger' | 'ai' | 'overlay' (default 'neutral')
178
186
  * kind?: 'label' | 'count' | 'eyebrow' (default 'label')
187
+ * dot?: boolean (default false) -- a filled dot before the label, in the tone's ink
179
188
  * children: ReactNode
180
- * @tokens text-micro, rounded-full, bg-subtle, bg-brand-primarySoft, bg-brand-primaryAction,
189
+ * @tokens text-micro, rounded-full, bg-current, bg-subtle, bg-brand-primarySoft, bg-brand-primaryAction,
181
190
  * bg-status-success/15, bg-status-warning/30, bg-status-danger/15, bg-scrim,
182
191
  * text-text-secondary, text-brand-primaryAction, text-text-success,
183
192
  * text-text-warning, text-text-danger, text-ai-ontint, text-brand-onprimary,
@@ -213,11 +222,12 @@ interface BadgeProps {
213
222
  * <Badge>Financial Services</Badge>
214
223
  * <Badge tone="brandSolid" kind="count">{activeFilters}</Badge>
215
224
  * <Badge tone="warning">Partial month</Badge>
225
+ * <Badge tone="success" dot>Completed</Badge>
216
226
  * <Badge kind="eyebrow" tone="neutral">Saved view</Badge>
217
227
  * <Badge tone="brand"><Check size={11} aria-hidden="true" />Primary</Badge>
218
228
  * ```
219
229
  */
220
- declare function Badge({ tone, kind, children, className }: BadgeProps): react.JSX.Element;
230
+ declare function Badge({ tone, kind, dot, children, className }: BadgeProps): react.JSX.Element;
221
231
 
222
232
  /**
223
233
  * @pattern CheckBox