@temp-spotwork/ui 1.8.2 → 1.9.0

package/dist/components/molecules/collapsible-card/collapsible-card.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { AvatarProps } from '../../atoms/avatar';
 import { ButtonProps } from '../button';
+import { GlyphColor } from '../../styles/colors/colormap';
 import { ProgressBarProps } from '../dataviz/progress-bar';
 
 export type CollapsibleCardProps = {
@@ -13,13 +14,22 @@ export type CollapsibleCardProps = {
      */
     setOpen: () => void;
     /**
-     * The avatar to be displayed on the card (object).
+     * The avatar to be displayed on the card (object). Omit it when using `leadingContent` instead.
      */
-    avatar: AvatarProps;
+    avatar?: AvatarProps;
+    /**
+     * Optional interactive content (e.g. a select-all checkbox) rendered before the title, in the
+     * avatar's place. Clicks inside it don't toggle the card open/closed.
+     */
+    leadingContent?: ReactNode;
     /**
      * The title of the card.
      */
     title: string;
+    /**
+     * Text color for the title. Defaults to 'active'.
+     */
+    titleColor?: GlyphColor;
     /**
      * An optional subtitle for the card.
      */
@@ -41,4 +51,4 @@ export type CollapsibleCardProps = {
      */
     expandedContent: ReactNode;
 };
-export declare function CollapsibleCard({ open, setOpen, avatar, title, subtitle, buttonGroup, dataViz, expandedContent, additionalHeaderRightSideContent, }: CollapsibleCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollapsibleCard({ open, setOpen, avatar, leadingContent, title, titleColor, subtitle, buttonGroup, dataViz, expandedContent, additionalHeaderRightSideContent, }: CollapsibleCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/collapsible-card/collapsible-card.js

@@ -1,21 +1,23 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { Avatar as h } from "../../atoms/avatar/avatar.js";
-import { Icons as w } from "../../atoms/icons/icons.js";
+import { Avatar as w } from "../../atoms/avatar/avatar.js";
+import { Icons as x } from "../../atoms/icons/icons.js";
 import "../../atoms/icons/iconsSVGs/Large/Profile.js";
 import "../../atoms/icons/iconsSVGs/Small/Profile.js";
-import { Button as x } from "../button/button.js";
-import { Typography as c } from "../../styles/typography/typography.js";
-import { ProgressBar as p } from "../dataviz/progress-bar/progress-bar.js";
-function b({
-  open: l,
-  setOpen: i,
-  avatar: d,
-  title: n,
-  subtitle: s,
-  buttonGroup: o,
-  dataViz: a,
-  expandedContent: f,
-  additionalHeaderRightSideContent: t
+import { Button as v } from "../button/button.js";
+import { Typography as n } from "../../styles/typography/typography.js";
+import { ProgressBar as C } from "../dataviz/progress-bar/progress-bar.js";
+function D({
+  open: i,
+  setOpen: o,
+  avatar: c,
+  leadingContent: m,
+  title: f,
+  titleColor: t = "active",
+  subtitle: a,
+  buttonGroup: s,
+  dataViz: d,
+  expandedContent: h,
+  additionalHeaderRightSideContent: p
 }) {
   return /* @__PURE__ */ r(
     "div",
@@ -27,24 +29,26 @@ function b({
             "div",
             {
               className: "flex flex-row gap-[1rem] items-center cursor-pointer min-w-0 grow",
-              onClick: i,
+              onClick: o,
               children: [
-                /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(h, { ...d }) }),
+                m && // The whole header toggles the card; stop clicks on interactive leading content from bubbling into it.
+                /* @__PURE__ */ e("div", { onClick: (l) => l.stopPropagation(), children: m }),
+                c && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(w, { ...c }) }),
                 /* @__PURE__ */ r("div", { className: "flex flex-col justify-between min-w-0", children: [
                   /* @__PURE__ */ e(
-                    c,
+                    n,
                     {
                       swStyle: 8,
-                      children: n,
-                      color: "active",
+                      children: f,
+                      color: t,
                       className: "whitespace-nowrap overflow-hidden text-ellipsis"
                     }
                   ),
-                  s && !l && /* @__PURE__ */ e(
-                    c,
+                  a && !i && /* @__PURE__ */ e(
+                    n,
                     {
                       swStyle: 1,
-                      children: s,
+                      children: a,
                       color: "subdued",
                       className: "whitespace-nowrap overflow-hidden text-ellipsis"
                     }
@@ -54,34 +58,34 @@ function b({
             }
           ),
           /* @__PURE__ */ r("div", { className: "flex flex-row gap-[2rem] items-center flex-shrink-0", children: [
-            t,
-            !l && a && /* @__PURE__ */ e(
+            p,
+            !i && d && /* @__PURE__ */ e(
               "div",
               {
                 className: "w-[16rem] flex-shrink-0 cursor-pointer",
-                onClick: i,
-                children: /* @__PURE__ */ e(p, { hasTotalCount: !0, ...a })
+                onClick: o,
+                children: /* @__PURE__ */ e(C, { hasTotalCount: !0, ...d })
               }
             ),
             /* @__PURE__ */ r("div", { className: "flex flex-row gap-[1rem]", children: [
-              o == null ? void 0 : o.map((m) => /* @__PURE__ */ e(x, { ...m }, m.text)),
+              s == null ? void 0 : s.map((l) => /* @__PURE__ */ e(v, { ...l }, l.text)),
               /* @__PURE__ */ e(
-                w,
+                x,
                 {
-                  id: l ? "ChevronUp" : "ChevronDown",
-                  icon: l ? "ChevronUp" : "ChevronDown",
+                  id: i ? "ChevronUp" : "ChevronDown",
+                  icon: i ? "ChevronUp" : "ChevronDown",
                   button: !0,
-                  handleClick: i
+                  handleClick: o
                 }
               )
             ] })
           ] })
         ] }),
-        l && f
+        i && h
       ]
     }
   );
 }
 export {
-  b as CollapsibleCard
+  D as CollapsibleCard
 };

package/dist/components/molecules/filter/segmented-control/segmented-control.d.ts

@@ -1,6 +1,10 @@
 export type SegmentedControlOption = {
     id: string;
     label: string;
+    /**
+     * Optional count/status badge rendered after the label (design-system Badge)
+     */
+    badgeText?: string;
 };
 export type SegmentedControlProps = {
     /**

package/dist/components/molecules/filter/segmented-control/segmented-control.js

@@ -1,36 +1,46 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Typography as i } from "../../../styles/typography/typography.js";
-import { getStyles as p, getContainerStyles as f } from "./styles.js";
-import { t as n } from "../../../../bundle-mjs-BjFsLjkg.js";
-function C({
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { Typography as d } from "../../../styles/typography/typography.js";
+import { getStyles as g, getContainerStyles as u } from "./styles.js";
+import { t as i } from "../../../../bundle-mjs-BjFsLjkg.js";
+import { Badge as v } from "../../../atoms/badge/badge.js";
+function w({
   segments: a,
-  handleClick: l,
-  inline: o = !1,
-  activeSegment: t
+  handleClick: m,
+  inline: s = !1,
+  activeSegment: c
 }) {
-  const s = p(o);
-  return /* @__PURE__ */ e(
+  const n = g(s);
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: n(
-        s.container,
-        s.segmentsBorder
+      className: i(
+        n.container,
+        n.segmentsBorder
       ),
-      children: a.map(({ id: r, label: c }) => {
-        const m = f(o, r === t);
-        return /* @__PURE__ */ e(
+      children: a.map(({ id: r, label: l, badgeText: e }) => {
+        const t = r === c, f = u(s, t);
+        return /* @__PURE__ */ p(
           "div",
           {
-            className: n("cursor-pointer", m.container),
-            onClick: () => l(r),
-            children: /* @__PURE__ */ e(
-              i,
-              {
-                children: c,
-                color: r === t ? "active" : "default",
-                swStyle: 1
-              }
-            )
+            className: i("cursor-pointer", f.container),
+            onClick: () => m(r),
+            children: [
+              /* @__PURE__ */ o(
+                d,
+                {
+                  children: l,
+                  color: t ? "active" : "default",
+                  swStyle: 1
+                }
+              ),
+              e != null && e !== "" && /* @__PURE__ */ o(
+                v,
+                {
+                  text: e,
+                  color: t ? "affirmativeInverted" : "affirmative"
+                }
+              )
+            ]
           },
           r
         );
@@ -39,5 +49,5 @@ function C({
   );
 }
 export {
-  C as SegmentedControl
+  w as SegmentedControl
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@temp-spotwork/ui",
   "private": false,
-  "version": "1.8.2",
+  "version": "1.9.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",