@estiva-app/ui 0.60.2 → 0.61.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.60.2",
+  "version": "0.61.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.60.2",
+    "packageVersion": "0.61.0",
     "exports": 134,
     "typeExports": 141,
     "files": null
@@ -5872,6 +5872,12 @@
           "required": false,
           "note": "What the content sits on, for the fade to end in: a panel's `surface` (default), or an inset card's `inset`."
         },
+        {
+          "name": "action",
+          "takes": "anything",
+          "required": false,
+          "note": "A small muted `Button` with a leading icon, at the right of the toggle's row: the way out to where the content lives."
+        },
         {
           "name": "className",
           "takes": "text",

package/src/ShowMore.mdx

@@ -42,6 +42,13 @@ import { ShowMore } from '@estiva-app/ui'
   (a panel, the default) or `inset` (inside an inset card). A fade into the
   wrong colour shows as a band.
 - `maxHeight` is in px, 96 by default.
+- The toggle is a small outlined `Button` with a chevron: down on "Show more",
+  up on "Show less". Its edge starts where the content does.
+- `action` is one more small muted `Button`, with a leading icon, on the toggle's row, at its
+  right: the way out to where the content lives ("Open in Estiva Ship"). The
+  row is drawn for it even when the content fits and there is no toggle.
+
+<Canvas of={ShowMoreStories.WithAnAction} />
 
 <Canvas of={ShowMoreStories.InACard} />
 

package/src/ShowMore.stories.tsx

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { IconExternalLink } from '@tabler/icons-react'
+import { Button } from './Button'
 import { Card } from './Card'
 import { ShowMore } from './ShowMore'
 
@@ -37,3 +39,15 @@ export const InACard: Story = {
     </Card>
   ),
 }
+
+/** `action`: one more small button, level with Show more at the right of its row. */
+export const WithAnAction: Story = {
+  args: { surface: 'inset', action: <Button size="small" leadingIcon={<IconExternalLink stroke={1.5} className="size-3.5" />}>Open in Estiva Ship</Button> },
+  render: InACard.render,
+}
+
+/** Short content with an action: no toggle, and the action keeps its place at the right. */
+export const ShortWithAnAction: Story = {
+  args: { ...WithAnAction.args, children: <p className="text-caption text-text-secondary">One line of description.</p> },
+  render: InACard.render,
+}

package/src/ShowMore.test.tsx

@@ -6,6 +6,7 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { Button } from './Button'
 import { ShowMore } from './ShowMore'
 
 afterEach(() => {
@@ -41,4 +42,19 @@ describe('ShowMore', () => {
     expect(screen.queryByRole('button')).toBeNull()
     expect(screen.getByText('Short').parentElement!.style.maxHeight).toBe('')
   })
+
+  it('puts an action level with the toggle, at the right of its row', () => {
+    contentHeight(300)
+    render(<ShowMore maxHeight={96} action={<Button>Open</Button>}><p>Long</p></ShowMore>)
+    const row = screen.getByRole('button', { name: 'Show more' }).parentElement!
+    expect(row.contains(screen.getByRole('button', { name: 'Open' }))).toBe(true)
+    expect(row.className).toMatch(/justify-between/)
+  })
+
+  it('keeps the action when the content fits, with no toggle', () => {
+    contentHeight(40)
+    render(<ShowMore maxHeight={96} action={<Button>Open</Button>}><p>Short</p></ShowMore>)
+    expect(screen.queryByRole('button', { name: /Show/ })).toBeNull()
+    expect(screen.getByRole('button', { name: 'Open' })).toBeTruthy()
+  })
 })

package/src/ShowMore.tsx

@@ -1,4 +1,5 @@
 import { useLayoutEffect, useRef, useState, type ReactNode } from 'react'
+import { IconChevronDown, IconChevronUp } from '@tabler/icons-react'
 import { Button } from './Button'
 import { cn } from './cn'
 
@@ -17,6 +18,10 @@ import { cn } from './cn'
  *
  * Focus arriving inside the cut content opens it: a field or a link there,
  * reached by Tab or a click, is never worked on out of sight.
+ *
+ * `action` is one more small button on the toggle's row, at its right
+ * (Katerina, 8 October: Peek's block card puts "Open in Estiva Ship" level with
+ * Show more). The row is drawn for it whether or not the content is cut.
  */
 export interface ShowMoreProps {
   children: ReactNode
@@ -24,12 +29,14 @@ export interface ShowMoreProps {
   maxHeight?: number
   /** What the content sits on, for the fade to end in: a panel's `surface` (default), or an inset card's `inset`. */
   surface?: 'surface' | 'inset'
+  /** A small muted `Button` with a leading icon, at the right of the toggle's row: the way out to where the content lives. Its words end where the content does. */
+  action?: ReactNode
   className?: string
 }
 
 const FADE_CLASSES = { surface: 'from-bg-surface', inset: 'from-bg-inset' } as const
 
-export function ShowMore({ children, maxHeight = 96, surface = 'surface', className }: ShowMoreProps) {
+export function ShowMore({ children, maxHeight = 96, surface = 'surface', action, className }: ShowMoreProps) {
   const box = useRef<HTMLDivElement>(null)
   const [open, setOpen] = useState(false)
   const [overflows, setOverflows] = useState(false)
@@ -52,12 +59,36 @@ export function ShowMore({ children, maxHeight = 96, surface = 'surface', classN
         {children}
         {cut && <div aria-hidden className={cn('pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t to-transparent', FADE_CLASSES[surface])} />}
       </div>
-      {overflows && (
-        // `-ml-1.5`: the small button's own 6px inset, so its words start where the content's do.
-        <Button variant="muted" size="small" className="-ml-1.5 mt-1" aria-expanded={open} onClick={() => setOpen((o) => !o)}>
-          {open ? 'Show less' : 'Show more'}
-        </Button>
+      {action ? (
+        <div className={cn('mt-1 flex w-full items-center gap-2', overflows ? 'justify-between' : 'justify-end')}>
+          {overflows && <Toggle open={open} onToggle={() => setOpen((o) => !o)} />}
+          {/* `-mr-2`: a small button's 8px right inset beside a leading icon, so its words end where the content's do. */}
+          <div className="-mr-2 flex shrink-0">{action}</div>
+        </div>
+      ) : (
+        overflows && <Toggle open={open} onToggle={() => setOpen((o) => !o)} className="mt-1" />
       )}
     </div>
   )
 }
+
+/**
+ * Outlined, with a chevron that says which way it goes (Katerina, 8 October):
+ * the one control of the part, so it has an edge. Its edge starts where the
+ * content does.
+ */
+function Toggle({ open, onToggle, className }: { open: boolean; onToggle: () => void; className?: string }) {
+  const Icon = open ? IconChevronUp : IconChevronDown
+  return (
+    <Button
+      variant="outlined"
+      size="small"
+      leadingIcon={<Icon stroke={1.5} className="size-3.5" />}
+      className={className}
+      aria-expanded={open}
+      onClick={onToggle}
+    >
+      {open ? 'Show less' : 'Show more'}
+    </Button>
+  )
+}