@discuss-ds/ui 0.8.2 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @discuss-ds/ui
 
+## 0.9.0
+
+### Minor Changes
+
+- [#47](https://github.com/TamyresLucas/Discuss-UI-Storybook/pull/47) [`d3b3a44`](https://github.com/TamyresLucas/Discuss-UI-Storybook/commit/d3b3a442602a7c398972449ebb23db7229b92573) Thanks [@TamyresLucas](https://github.com/TamyresLucas)! - `StimulusCard`: follows the updated Figma for responsiveness. The card has a minimum height of 86px, the thumbnail is square and as tall as the text beside it (so it grows when the caption wraps onto more lines, from 80px up to 240px), and the text column is centred with 8px of vertical padding. New `maxLength` and `showCounter` props add the same live "n/2000 characters" counter the question text has, under an editable caption. A one-line caption looks the same as before. The thumbnail is sized from the measured text height because that is circular in plain CSS.
+
 ## 0.8.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -3198,7 +3198,12 @@ RatingScale.displayName = "RatingScale";
 // src/components/Question Types/StimulusCard.tsx
 var React47 = __toESM(require("react"), 1);
 var import_react25 = require("@phosphor-icons/react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime48 = (
+  // Out of flow, so the image's own size never sets the thumbnail's size.
+  require("react/jsx-runtime")
+);
+var MIN_THUMBNAIL = 80;
+var MAX_THUMBNAIL = 240;
 var StimulusCard = React47.forwardRef(
   ({
     className,
@@ -3210,6 +3215,8 @@ var StimulusCard = React47.forwardRef(
     caption,
     onCaptionChange,
     captionPlaceholder = "Click to write what the AI moderator says",
+    maxLength,
+    showCounter = true,
     onRemove,
     removeLabel = "Remove stimulus",
     ...props
@@ -3217,27 +3224,41 @@ var StimulusCard = React47.forwardRef(
     const [failedSrc, setFailedSrc] = React47.useState();
     const error = status === "error" || thumbnail !== void 0 && failedSrc === thumbnail;
     const showImage = thumbnail !== void 0 && !error;
+    const [draft, setDraft] = React47.useState(null);
+    const count = (draft ?? caption ?? "").length;
+    const textRef = React47.useRef(null);
+    const [thumbnailSize, setThumbnailSize] = React47.useState(MIN_THUMBNAIL);
+    React47.useEffect(() => {
+      const el = textRef.current;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(() => {
+        setThumbnailSize(Math.min(MAX_THUMBNAIL, Math.max(MIN_THUMBNAIL, Math.ceil(el.getBoundingClientRect().height))));
+      });
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, []);
     return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
       "div",
       {
         ref,
         "data-status": error ? "error" : "default",
-        className: cn("flex w-full items-center gap-4 rounded-md border border-border p-0.5 pr-4", className),
+        className: cn("flex min-h-21.5 w-full items-center gap-4 rounded-md border border-border p-0.5 pr-4", className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
             /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               "span",
               {
+                style: { width: thumbnailSize, height: thumbnailSize },
                 className: cn(
-                  "flex size-20 shrink-0 items-center justify-center overflow-hidden rounded-sm border",
+                  "relative flex shrink-0 items-center justify-center overflow-hidden rounded-sm border",
                   error ? "border-destructive-soft-border bg-destructive-soft bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 text-destructive" : "border-border bg-background bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 text-surface-foreground",
                   showImage && "bg-none"
                 ),
-                children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("img", { src: thumbnail, alt: thumbnailAlt, className: "size-full object-cover", onError: () => setFailedSrc(thumbnail) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react25.ImageBroken, { size: 24, "aria-hidden": true }) : icon ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react25.Image, { size: 24, "aria-hidden": true })
+                children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("img", { src: thumbnail, alt: thumbnailAlt, className: "absolute inset-0 size-full object-cover", onError: () => setFailedSrc(thumbnail) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react25.ImageBroken, { size: 24, "aria-hidden": true }) : icon ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react25.Image, { size: 24, "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2 text-surface-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { ref: textRef, className: "flex min-w-0 flex-1 flex-col justify-center gap-2 py-2 text-surface-foreground", children: [
               /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "w-full text-ui-label", children: label }),
               onCaptionChange ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 InlineEdit,
@@ -3248,10 +3269,21 @@ var StimulusCard = React47.forwardRef(
                   "aria-label": "Stimulus caption",
                   value: caption ?? "",
                   placeholder: captionPlaceholder,
+                  maxLength,
                   onValueChange: onCaptionChange,
+                  onDraftChange: setDraft,
+                  onEditingChange: (editing) => {
+                    if (!editing) setDraft(null);
+                  },
                   textClassName: "text-body-base"
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "w-full text-body-base [word-break:break-word]", children: caption })
+              ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "w-full text-body-base [word-break:break-word]", children: caption }),
+              onCaptionChange && showCounter && maxLength !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("p", { className: "text-ui-caption text-secondary-muted-foreground", children: [
+                count,
+                "/",
+                maxLength,
+                " characters"
+              ] })
             ] })
           ] }),
           onRemove && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Button, { type: "button", variant: "destructive", size: "icon-sm", "aria-label": removeLabel, onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react25.Trash, { size: 16, "aria-hidden": true }) })