@kahitsan/ksui 0.38.1 → 0.38.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.38.1",
+  "version": "0.38.2",
   "description": "ksui is a standalone set of SolidJS UI components for KahitSan/Hilinga and any SolidJS app. Published to the public npm registry and consumed as a normal dependency. Ships source under a `solid` export condition so the consumer's vite-plugin-solid compiles it with only solid-js externalized; it depends on nothing but solid-js + lucide-solid and injects its own CSS.",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/composite/VoucherPicker.test.tsx

@@ -112,10 +112,11 @@ describe("VoucherPicker dialog", () => {
     await waitFor(() => expect(getByTestId("voucher-picker-result-1")).toBeTruthy());
     expect(getByTestId("voucher-picker-popup").closest("dialog")).not.toBeNull();
 
-    // Staging a row must not reach the consumer yet.
+    // Staging a row must not reach the consumer yet; the footer no longer
+    // repeats the code (it's in the listing), so the confirm enabling is the signal.
     fireEvent.click(getByTestId("voucher-picker-result-1"));
     expect(onChange).not.toHaveBeenCalled();
-    expect(getByTestId("voucher-picker-draft-summary").textContent).toContain("SAVE20");
+    expect(getByTestId("voucher-picker-confirm").hasAttribute("disabled")).toBe(false);
 
     fireEvent.click(getByTestId("voucher-picker-confirm"));
     expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ id: 1, code: "SAVE20" }));
@@ -147,9 +148,10 @@ describe("VoucherPicker dialog", () => {
     await waitFor(() => expect(getByTestId("voucher-picker-result-1")).toBeTruthy());
 
     fireEvent.click(getByTestId("voucher-picker-result-1"));
-    expect(getByTestId("voucher-picker-draft-summary").textContent).toContain("SAVE20");
+    expect(getByTestId("voucher-picker-confirm").hasAttribute("disabled")).toBe(false);
 
     fireEvent.click(getByTestId("voucher-picker-result-1"));
+    expect(getByTestId("voucher-picker-confirm").hasAttribute("disabled")).toBe(true);
     expect(getByTestId("voucher-picker-draft-summary").textContent).toContain("No voucher selected");
   });
 
@@ -175,7 +177,7 @@ describe("VoucherPicker dialog", () => {
     expect(mark!.textContent?.toLowerCase()).toBe("partner");
   });
 
-  it("shows the voucher description in the row and the staged summary", async () => {
+  it("shows the voucher description in the row and the footer draft", async () => {
     mockPagedFetch([
       voucher({ id: 50, code: "PARTNER_ACES", notes: "BISCAST ACES outreach discount" }),
     ]);
@@ -190,7 +192,8 @@ describe("VoucherPicker dialog", () => {
     );
 
     fireEvent.click(getByTestId("voucher-picker-result-50"));
-    expect(getByTestId("voucher-picker-draft-summary").textContent).toContain(
+    // The footer shows the description under the summary, beside the buttons.
+    expect(getByTestId("voucher-picker-draft-description").textContent).toContain(
       "BISCAST ACES outreach discount",
     );
   });

package/src/components/composite/VoucherPicker.tsx

@@ -185,6 +185,10 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
   const [total, setTotal] = createSignal(0);
   // Staged choice. `props.selected` only changes on Confirm.
   const [draft, setDraft] = createSignal<VoucherOption | null>(null);
+  // Footer description popup: clamped to two lines, "More" only when it overflows.
+  const [descOpen, setDescOpen] = createSignal(false);
+  const [descOverflowing, setDescOverflowing] = createSignal(false);
+  let descEl: HTMLSpanElement | undefined;
 
   // Signal, not a plain ref: the sentinel mounts only once the first page
   // reveals there are more, which is after the observer effect first runs.
@@ -370,7 +374,7 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
   });
 
   const metaLine = (v: VoucherOption): string =>
-    [formatVoucherDescription(v), formatExpiry(v.valid_until, today()), formatUsage(v)]
+    [formatExpiry(v.valid_until, today()), formatUsage(v)]
       .filter(Boolean)
       .join(" · ");
 
@@ -381,6 +385,18 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
     return n ? n : null;
   });
 
+  // The footer clamps the description to two lines; offer "More" only when the
+  // text actually overflowed. Re-measured whenever the staged description changes.
+  createEffect(() => {
+    const notes = draftNotes();
+    const el = descEl;
+    if (!notes || !el) {
+      setDescOverflowing(false);
+      return;
+    }
+    setDescOverflowing(el.scrollHeight > el.clientHeight);
+  });
+
   const expiresSoon = (v: VoucherOption): boolean => {
     if (!v.valid_until) return false;
     const days = daysUntil(toDay(v.valid_until), today());
@@ -514,7 +530,12 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
                             selected(),
                         }}
                       >
-                        <Ticket size={18} class="shrink-0 text-[var(--ks-success-fg,#34d399)]" aria-hidden="true" />
+                        <span class="flex flex-col items-center gap-1 shrink-0">
+                          <Ticket size={18} class="text-[var(--ks-success-fg,#34d399)]" aria-hidden="true" />
+                          <span class="text-[11px] leading-tight text-center text-[var(--ks-success-fg,#34d399)]">
+                            {formatVoucherDescription(v)}
+                          </span>
+                        </span>
                         <span class="flex-1 min-w-0">
                           <span class="block text-sm font-medium text-[var(--ks-fg,#ffffff)] truncate">
                             {highlightMatch(v.code, debouncedQuery())}
@@ -562,7 +583,12 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
                         class="w-full text-left px-3 py-3 mb-1 rounded-lg border border-transparent flex items-center gap-3 opacity-60 cursor-not-allowed"
                         aria-disabled="true"
                       >
-                        <Ticket size={18} class="shrink-0 text-[var(--ks-fg-subtle,#71717a)]" aria-hidden="true" />
+                        <span class="flex flex-col items-center gap-1 shrink-0">
+                          <Ticket size={18} class="text-[var(--ks-fg-subtle,#71717a)]" aria-hidden="true" />
+                          <span class="text-[11px] leading-tight text-center text-[var(--ks-fg-subtle,#71717a)]">
+                            {formatVoucherDescription(entry.voucher)}
+                          </span>
+                        </span>
                         <span class="flex-1 min-w-0">
                           <span class="block text-sm text-[var(--ks-fg,#ffffff)] truncate">
                             {highlightMatch(entry.voucher.code, debouncedQuery())}
@@ -605,20 +631,42 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
             {/* Bled to the card edges so the rule spans the full width, matching
                 the header. */}
             <div class="-mx-6 -mb-6 mt-4 px-5 sm:px-6 py-3 border-t border-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] flex items-center justify-between gap-3 shrink-0">
-              <span
-                data-testid="voucher-picker-draft-summary"
-                class="text-xs text-[var(--ks-fg-subtle,#71717a)] min-w-0 truncate"
-              >
-                <Show when={draft()} fallback="No voucher selected">
-                  <span class="text-[var(--ks-fg,#ffffff)]">{draft()!.code}</span>
+              <div class="min-w-0 flex flex-col gap-1">
+                <Show
+                  when={draft()}
+                  fallback={
+                    <span
+                      data-testid="voucher-picker-draft-summary"
+                      class="text-xs text-[var(--ks-fg-subtle,#71717a)]"
+                    >
+                      No voucher selected
+                    </span>
+                  }
+                >
                   <Show when={draftNotes()}>
-                    {" · "}
-                    <span class="text-[var(--ks-fg-muted,#a1a1aa)]">{draftNotes()}</span>
+                    <span class="flex flex-col items-start gap-0.5 min-w-0">
+                      <span
+                        ref={descEl}
+                        data-testid="voucher-picker-draft-description"
+                        class="min-w-0 text-xs text-[var(--ks-fg-muted,#a1a1aa)] whitespace-pre-line line-clamp-2"
+                      >
+                        {draftNotes()}
+                      </span>
+                      <Show when={descOverflowing()}>
+                        <button
+                          type="button"
+                          data-testid="voucher-picker-expand-description"
+                          onClick={() => setDescOpen(true)}
+                          class="text-xs leading-tight text-[var(--ks-primary,#c9a961)] hover:underline transition-colors cursor-pointer"
+                          aria-label="Show full description"
+                        >
+                          See more
+                        </button>
+                      </Show>
+                    </span>
                   </Show>
-                  {" · "}
-                  {discountLabel(draft()!).replace("−", "")} off
                 </Show>
-              </span>
+              </div>
               <div class="flex items-center gap-2 shrink-0">
                 <Show when={props.selected && draft()}>
                   <button
@@ -656,6 +704,43 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
           </div>
         </Modal>
       </Show>
+
+      {/* Full-description popup: "More" in the footer only appears when the
+          clamped text overflowed, but the popup itself is reachable whenever a
+          staged description exists. */}
+      <Show when={descOpen() && draftNotes()}>
+        <Modal onClose={() => setDescOpen(false)} size="md" ariaLabel="Voucher description">
+          <div data-testid="voucher-picker-description-popup" class="flex flex-col gap-4">
+            <div class="flex items-center justify-between gap-3">
+              <h2 class="m-0 text-base font-semibold text-[var(--ks-fg,#ffffff)]">
+                Voucher description
+              </h2>
+              <button
+                type="button"
+                data-testid="voucher-picker-close-description"
+                onClick={() => setDescOpen(false)}
+                class="w-8 h-8 flex items-center justify-center rounded text-[var(--ks-fg-muted,#a1a1aa)] hover:text-[var(--ks-fg,#ffffff)] hover:bg-[color-mix(in_srgb,var(--ks-surface-raised,#1a1a1a)_50%,transparent)] transition-colors cursor-pointer shrink-0"
+                aria-label="Close"
+              >
+                <X size={16} />
+              </button>
+            </div>
+            <p class="m-0 text-sm text-[var(--ks-fg,#ffffff)] whitespace-pre-line">
+              {draftNotes()}
+            </p>
+            <div class="flex justify-end">
+              <button
+                type="button"
+                data-testid="voucher-picker-description-close"
+                onClick={() => setDescOpen(false)}
+                class="px-4 py-2 rounded-lg text-sm font-medium bg-[var(--ks-primary,#c9a961)] text-[var(--ks-fg-on-accent,#0a0a0a)] hover:opacity-90 transition-opacity cursor-pointer"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </Modal>
+      </Show>
     </>
   );
 }