@discuss-ds/ui 0.4.2 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @discuss-ds/ui
 
+## 0.6.0
+
+### Minor Changes
+
+- [#29](https://github.com/TamyresLucas/Discuss-UI-Storybook/pull/29) [`1dd39c5`](https://github.com/TamyresLucas/Discuss-UI-Storybook/commit/1dd39c577a5fa4b96effedd38f1eb5003529c544) Thanks [@TamyresLucas](https://github.com/TamyresLucas)! - `ActivityStructure` can now be a single-purpose widget: it renders `children` under its title, stats and sections, and no longer renders an empty stats grid when `stats` is empty. `<ActivityStructure title="Research Goal" stats={[]}>…</ActivityStructure>` has the same card, title style and colour as the full Activity Summary. Existing usage is unchanged.
+
+## 0.5.0
+
+### Minor Changes
+
+- [#27](https://github.com/TamyresLucas/Discuss-UI-Storybook/pull/27) [`1a4ff8c`](https://github.com/TamyresLucas/Discuss-UI-Storybook/commit/1a4ff8c0c8b485a7edaf27bd0d327a9005f902e7) Thanks [@TamyresLucas](https://github.com/TamyresLucas)! - `QuestionHeader` and `QuestionEditorCard` get an optional `dragHandleProps` that turns the "Question N" tag into a drag handle. It is spread onto the tag, so it accepts what a drag-and-drop library provides (`ref`, `role`, `tabIndex`, pointer and keyboard listeners, aria attributes). With it the tag shows a grab cursor, is keyboard focusable, shows the grip icon on focus and is labelled "Reorder question N". Without it nothing changes.
+  
+  `ActivityStructure`: the card corner radius is now 16px (was 24px) to match the question cards, and the title uses the primary foreground colour.
+
 ## 0.4.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -2649,7 +2649,7 @@ var import_react19 = require("@phosphor-icons/react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var eyebrow = "text-ui-caption uppercase text-secondary-muted-foreground";
 var QuestionHeader = React40.forwardRef(
-  ({ className, number, title, required, error, onDismissError, editor, onTitleChange, actions, maxLength = 2e3, active, showCounter = true, ...props }, ref) => {
+  ({ className, number, title, required, error, onDismissError, editor, onTitleChange, actions, maxLength = 2e3, active, showCounter = true, dragHandleProps, ...props }, ref) => {
     const [draft, setDraft] = React40.useState(null);
     const label = String(number).padStart(2, "0");
     const showError = error !== void 0 && error !== false;
@@ -2661,12 +2661,23 @@ var QuestionHeader = React40.forwardRef(
           /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
             "span",
             {
+              "aria-label": dragHandleProps ? `Reorder question ${number}` : void 0,
+              ...dragHandleProps,
               className: cn(
                 "group/handle inline-flex h-6 items-center gap-1 rounded-sm px-2.5 text-ui-caption hover:pl-1",
-                active ? "bg-accent-soft text-accent-soft-foreground" : "bg-secondary bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 text-surface-foreground"
+                active ? "bg-accent-soft text-accent-soft-foreground" : "bg-secondary bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 text-surface-foreground",
+                dragHandleProps && "cursor-grab touch-none select-none focus-visible:pl-1",
+                dragHandleProps?.className
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react19.DotsSixVertical, { size: 16, "aria-hidden": true, className: "hidden shrink-0 group-hover/handle:block" }),
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  import_react19.DotsSixVertical,
+                  {
+                    size: 16,
+                    "aria-hidden": true,
+                    className: "hidden shrink-0 group-hover/handle:block group-focus-visible/handle:block"
+                  }
+                ),
                 "Question ",
                 number
               ]
@@ -2736,6 +2747,7 @@ var QuestionEditorCard = React41.forwardRef(
     onAdd,
     onPaste,
     note,
+    dragHandleProps,
     children,
     ...props
   }, ref) => {
@@ -2766,6 +2778,7 @@ var QuestionEditorCard = React41.forwardRef(
                         onTitleChange,
                         active,
                         showCounter: !!active,
+                        dragHandleProps,
                         maxLength,
                         actions: actions ?? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
                           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -3394,15 +3407,15 @@ EditableTag.displayName = "EditableTag";
 // src/components/Research-Specific/ActivityStructure.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var ActivityStructure = React51.forwardRef(
-  ({ className, title = "Activity Structure", stats, sections, onRemoveTag, onAddTag, addTagLabel = "Add tag", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  ({ className, title = "Activity Structure", stats, sections, onRemoveTag, onAddTag, addTagLabel = "Add tag", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "section",
     {
       ref,
-      className: cn("flex w-full max-w-96.5 flex-col gap-4 rounded-2xl bg-surface p-4", className),
+      className: cn("flex w-full max-w-96.5 flex-col gap-4 rounded-xl bg-surface p-4", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("h3", { className: "text-heading-h3 text-surface-foreground", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "grid grid-cols-2 gap-3", children: stats.map(({ id, ...stat }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(StatCard, { ...stat }, id)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("h3", { className: "text-heading-h3 text-primary", children: title }),
+        stats.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "grid grid-cols-2 gap-3", children: stats.map(({ id, ...stat }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(StatCard, { ...stat }, id)) }),
         sections?.map(({ id, heading, body, tags }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("h4", { className: "text-heading-h4 text-surface-foreground", children: heading }),
           /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "text-body-base text-surface-foreground", children: body }),
@@ -3410,7 +3423,8 @@ var ActivityStructure = React51.forwardRef(
             tags?.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(EditableTag, { type: "editable", onRemove: onRemoveTag && (() => onRemoveTag(id, tag)), children: tag }, tag)),
             onAddTag && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(EditableTag, { type: "add", onClick: () => onAddTag(id), children: addTagLabel })
           ] })
-        ] }, id))
+        ] }, id)),
+        children
       ]
     }
   )