@estiva-app/ui 0.13.0 → 0.13.1

package/package.json

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

package/src/Card.mdx

@@ -25,8 +25,10 @@ move it.
   hover.
 - `hover="fill"` — a card in a feed: it lights up when pointed at, so the light
   says which one you are on. `quietUntilHover` hides its hairline until then.
+- `hovered` — hold that look while the pointer is elsewhere: a card whose own
+  menu or picker is open stays lit, because the menu opens outside the card.
 - `selected` — the one you are on. `active` — the one being changed in place.
-  Neither answers the pointer.
+  Neither answers the pointer, and `hovered` changes neither.
 - `attention` — a hairline that asks to be looked at: `accent` for something
   new, `warning` for something urgent.
 - `unreadable` — it stands for something that could not be read: the hairline
@@ -60,8 +62,12 @@ import { Card } from '@estiva-app/ui'
 - With `href` it renders `Link`'s anchor, with every anchor prop passed through,
   so a router app takes the click and the address stays real.
 - Without `href`, a card that responds to a click gets `cursor-pointer` from its
-  `hover` and your `onClick`. Controls inside it should stop their own clicks
-  from reaching the card.
+  `hover` and your `onClick` — the selected one too, since it can open again;
+  the one being changed does not. Controls inside it should stop their own
+  clicks from reaching the card.
+- Keep a card lit while its menu is open by passing `hovered` from your own
+  state: set it when the pointer enters, and clear it when the pointer leaves
+  and nothing of the card's is open.
 
 ## Props
 

package/src/Card.stories.tsx

@@ -75,6 +75,9 @@ export const InAFeed: Story = {
   ),
 }
 
+/** Its menu is open: the pointer is on the menu, outside the card, and the card stays lit under it. */
+export const HeldWhileItsMenuIsOpen: Story = { args: { hover: 'fill', quietUntilHover: true, hovered: true, onClick: () => {}, className: 'p-3' } }
+
 /** Being changed in place: the selected fill and the accent hairline. */
 export const Active: Story = { args: { active: true, hover: 'fill' } }
 

package/src/Card.test.tsx

@@ -84,6 +84,47 @@ describe('Card', () => {
     expect(active.some((c) => c.startsWith('hover:'))).toBe(false)
   })
 
+  it('hovered holds the hover look without the pointer: a feed card stays lit, a link card keeps its stronger hairline', () => {
+    const feed = classesOf(card(<Card hover="fill" quietUntilHover hovered onClick={() => {}}>Item one</Card>))
+    expect(feed).toContain('bg-bg-hover')
+    expect(feed).toContain('border-border-default')
+    expect(feed).not.toContain('bg-bg-surface')
+    expect(feed).not.toContain('border-transparent')
+    cleanup()
+    const link = classesOf(card(<Card href="#" hovered>Item one</Card>))
+    expect(link).toContain('border-border-strong')
+    cleanup()
+    const inset = classesOf(card(<Card fill="inset" href="#" hovered>Item one</Card>))
+    expect(inset).toContain('border-border-default')
+    expect(inset).not.toContain('border-border-subtle')
+    cleanup()
+    // Nothing to hold on a card that does not answer the pointer.
+    const still = classesOf(card(<Card hovered>Item one</Card>))
+    expect(still).toContain('bg-bg-surface')
+    expect(still).not.toContain('bg-bg-hover')
+  })
+
+  it('hovered is ignored by the one you are on and the one being changed; attention still colours the hairline', () => {
+    const selected = classesOf(card(<Card hover="fill" hovered selected>Item one</Card>))
+    expect(selected).toContain('bg-bg-selected')
+    expect(selected).not.toContain('bg-bg-hover')
+    cleanup()
+    const active = classesOf(card(<Card hover="fill" hovered active>Item one</Card>))
+    expect(active).toContain('border-accent-primary')
+    expect(active).not.toContain('bg-bg-hover')
+    cleanup()
+    const urgent = classesOf(card(<Card hover="fill" quietUntilHover hovered attention="warning">Item one</Card>))
+    expect(urgent).toContain('bg-bg-hover')
+    expect(urgent).toContain('border-warning-muted')
+    expect(urgent).not.toContain('border-border-default')
+  })
+
+  it('the one you are on can still be clicked, and says so; the one being changed does not', () => {
+    expect(classesOf(card(<Card hover="fill" selected onClick={() => {}}>Item one</Card>))).toContain('cursor-pointer')
+    cleanup()
+    expect(classesOf(card(<Card hover="fill" active onClick={() => {}}>Item one</Card>))).not.toContain('cursor-pointer')
+  })
+
   it('attention recolours the hairline, at rest and on hover', () => {
     const classes = classesOf(card(<Card hover="fill" quietUntilHover attention="warning">Item one</Card>))
     expect(classes).toContain('border-warning-muted')

package/src/Card.tsx

@@ -44,6 +44,14 @@ const HAIRLINE_HOVER_CLASSES: Record<CardFill, string> = {
   none: 'hover:border-border-default',
 }
 
+/** The same step, held by `hovered` rather than by the pointer. */
+const HAIRLINE_HELD_CLASSES: Record<CardFill, string> = {
+  surface: 'border-border-strong',
+  elevated: 'border-border-strong',
+  inset: 'border-border-default',
+  none: 'border-border-default',
+}
+
 const ATTENTION_CLASSES: Record<CardAttention, string> = {
   accent: 'border-accent-muted hover:border-accent-muted',
   warning: 'border-warning-muted hover:border-warning-muted',
@@ -58,6 +66,12 @@ export interface CardProps extends ComponentPropsWithRef<'div'> {
   hover?: CardHover
   /** No hairline until it is pointed at — a row in a feed that shows its edge only when you are on it. */
   quietUntilHover?: boolean
+  /**
+   * Draw the hover look now, whatever the pointer does. For a card whose own menu or picker is open: the menu
+   * opens outside the card, so the pointer on it leaves the card, and the card would go dark under its own menu.
+   * Ignored while `selected` or `active`, like the pointer.
+   */
+  hovered?: boolean
   /** The one you are on: the selected fill, a subtle hairline, and no hover. */
   selected?: boolean
   /** Being changed in place: the selected fill with the accent hairline, and no hover. */
@@ -74,6 +88,7 @@ export function Card({
   href,
   hover = href ? 'hairline' : 'none',
   quietUntilHover = false,
+  hovered = false,
   selected = false,
   active = false,
   attention,
@@ -91,7 +106,10 @@ export function Card({
     quietUntilHover && 'border-transparent',
     !still && hover === 'hairline' && HAIRLINE_HOVER_CLASSES[fill],
     !still && hover === 'fill' && 'hover:bg-bg-hover hover:border-border-default',
-    !still && hover !== 'none' && !href && props.onClick && 'cursor-pointer',
+    !still && hovered && hover === 'hairline' && HAIRLINE_HELD_CLASSES[fill],
+    !still && hovered && hover === 'fill' && 'bg-bg-hover border-border-default',
+    // The one you are on can still be clicked (it opens again); the one being changed cannot.
+    !active && hover !== 'none' && !href && props.onClick && 'cursor-pointer',
     selected && 'bg-bg-selected border-border-subtle',
     active && 'bg-bg-selected border-accent-primary',
     !active && attention && ATTENTION_CLASSES[attention],