@linktr.ee/messaging-react 4.2.0-rc-1787083791 → 4.2.0-rc-1787181113

package/src/components/LinkAttachment/components/_shared/CardBody.test.tsx

@@ -0,0 +1,248 @@
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders, screen, fireEvent } from '../../../../test/utils'
+
+import CardBody from './CardBody'
+
+describe('CardBody', () => {
+  it('collapses to nothing when there is no text, url or cta', () => {
+    const { container } = renderWithProviders(<CardBody variant="light" />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('treats whitespace-only text as absent', () => {
+    const { container } = renderWithProviders(
+      <CardBody variant="light" title="  " description="  " url="   " />
+    )
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('renders the chin when any single slot has content', () => {
+    const { container: withUrl } = renderWithProviders(
+      <CardBody variant="light" url="tr.ee/a" />
+    )
+    expect(withUrl).not.toBeEmptyDOMElement()
+
+    const { container: withDescription } = renderWithProviders(
+      <CardBody variant="light" description="Get answers" />
+    )
+    expect(withDescription).not.toBeEmptyDOMElement()
+
+    const { container: withCta } = renderWithProviders(
+      <CardBody variant="light" cta={{ label: 'View FAQs' }} />
+    )
+    expect(withCta).not.toBeEmptyDOMElement()
+  })
+
+  it('shows the placeholder title on dark cards only', () => {
+    renderWithProviders(
+      <CardBody variant="dark" placeholderTitle="Add a title" />
+    )
+    expect(screen.getByText('Add a title')).toBeInTheDocument()
+
+    const { container } = renderWithProviders(
+      <CardBody variant="light" placeholderTitle="Add a title" />
+    )
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('dims the placeholder title but not a real one', () => {
+    renderWithProviders(
+      <CardBody variant="dark" placeholderTitle="Add a title" />
+    )
+    expect(screen.getByText('Add a title').className).toContain('text-white/30')
+
+    renderWithProviders(<CardBody variant="dark" title="Brie’s FAQ" />)
+    const title = screen.getByText('Brie’s FAQ')
+    expect(title.className).toContain('text-white')
+    expect(title.className).not.toContain('text-white/30')
+  })
+
+  it('inks the light variant against its pale surface', () => {
+    renderWithProviders(
+      <CardBody variant="light" title="Brie’s FAQ" url="tr.ee/a" />
+    )
+    expect(screen.getByText('Brie’s FAQ').className).toContain('text-black/90')
+    expect(screen.getByTestId('link-attachment-url').className).toContain(
+      'text-black/55'
+    )
+  })
+
+  it('inks the dark variant against its dark surface', () => {
+    renderWithProviders(
+      <CardBody variant="dark" title="Brie’s FAQ" url="tr.ee/a" />
+    )
+    expect(screen.getByTestId('link-attachment-url').className).toContain(
+      'text-white/55'
+    )
+  })
+
+  it('replaces the variant ink with chinTextColor on every chin line', () => {
+    renderWithProviders(
+      <CardBody
+        variant="dark"
+        chinTextColor="#040403"
+        title="Brie’s FAQ"
+        description="Get answers"
+        url="tr.ee/a"
+      />
+    )
+    const title = screen.getByText('Brie’s FAQ')
+    const description = screen.getByText('Get answers')
+    const url = screen.getByTestId('link-attachment-url')
+
+    for (const node of [title, description, url]) {
+      expect(node.style.color).toBe('rgb(4, 4, 3)')
+      expect(node.className).not.toContain('text-white')
+    }
+  })
+
+  it('truncates the description to one line by default and clamps beyond that', () => {
+    renderWithProviders(
+      <CardBody variant="light" description="Get answers to every question" />
+    )
+    const single = screen.getByText('Get answers to every question')
+    expect(single.className).toContain('truncate')
+    expect(single.style.display).toBe('')
+
+    renderWithProviders(
+      <CardBody
+        variant="light"
+        description="A long prose body"
+        descriptionLines={3}
+      />
+    )
+    const clamped = screen.getByText('A long prose body')
+    expect(clamped.className).not.toContain('truncate')
+    expect(clamped.style.display).toBe('-webkit-box')
+    expect(clamped.style.getPropertyValue('-webkit-line-clamp')).toBe('3')
+    expect(clamped.style.overflow).toBe('hidden')
+  })
+
+  it('keeps the chin ink while clamping a multi-line description', () => {
+    renderWithProviders(
+      <CardBody
+        variant="dark"
+        chinTextColor="#FFFFFF"
+        description="A long prose body"
+        descriptionLines={2}
+      />
+    )
+    const clamped = screen.getByText('A long prose body')
+    expect(clamped.style.color).toBe('rgb(255, 255, 255)')
+    expect(clamped.style.getPropertyValue('-webkit-line-clamp')).toBe('2')
+  })
+
+  it('renders the trimmed url footer, and drops it entirely for a cta', () => {
+    renderWithProviders(<CardBody variant="light" url="  tr.ee/briemix  " />)
+    expect(screen.getByTestId('link-attachment-url').textContent).toBe(
+      'tr.ee/briemix'
+    )
+
+    const { container } = renderWithProviders(
+      <CardBody
+        variant="light"
+        url="tr.ee/briemix"
+        cta={{ label: 'View FAQs' }}
+      />
+    )
+    expect(
+      container.querySelector('[data-testid="link-attachment-url"]')
+    ).toBeNull()
+    expect(screen.getByText('View FAQs')).toBeInTheDocument()
+  })
+
+  it('paints the cta against ctaSurface rather than the card variant', () => {
+    renderWithProviders(
+      <CardBody
+        variant="dark"
+        ctaSurface="light"
+        cta={{ label: 'Play', variant: 'secondary' }}
+      />
+    )
+    // The audio strip is a light surface under a nominally dark card.
+    expect(screen.getByText('Play').className).toContain('bg-black/[0.06]')
+
+    renderWithProviders(
+      <CardBody variant="dark" cta={{ label: 'View FAQs' }} />
+    )
+    expect(screen.getByText('View FAQs').className).toContain('bg-white')
+  })
+
+  it('renders the app icon before the title and the trailing action beside it', () => {
+    renderWithProviders(
+      <CardBody
+        variant="dark"
+        title="Spotify"
+        appIcon={<span data-testid="app-icon">icon</span>}
+        trailingAction={<button type="button">Edit</button>}
+      />
+    )
+    const icon = screen.getByTestId('app-icon')
+    const title = screen.getByText('Spotify')
+    expect(icon.parentElement?.className).toContain('shrink-0')
+    expect(
+      icon.compareDocumentPosition(title) & Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy()
+    expect(screen.getByText('Edit').parentElement?.className).toContain(
+      'shrink-0'
+    )
+  })
+
+  it('omits the title row entirely when there is no title', () => {
+    renderWithProviders(
+      <CardBody
+        variant="light"
+        description="Get answers"
+        appIcon={<span data-testid="app-icon">icon</span>}
+      />
+    )
+    expect(screen.queryByTestId('app-icon')).not.toBeInTheDocument()
+  })
+
+  it('renders two variant-aware skeleton bars instead of text while loading', () => {
+    const { container: dark } = renderWithProviders(
+      <CardBody variant="dark" title="Brie’s FAQ" url="tr.ee/a" isLoading />
+    )
+    expect(screen.queryByText('Brie’s FAQ')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('link-attachment-url')).not.toBeInTheDocument()
+
+    const darkBars = dark.querySelectorAll('div.animate-pulse')
+    expect(darkBars).toHaveLength(2)
+    expect(darkBars[0].className).toContain('h-5 w-3/4')
+    expect(darkBars[1].className).toContain('h-4 w-1/2')
+    for (const bar of darkBars) {
+      expect(bar.className).toContain('rounded')
+      expect(bar.className).toContain('bg-white/25')
+      expect(bar.getAttribute('aria-hidden')).toBe('true')
+    }
+
+    const { container: light } = renderWithProviders(
+      <CardBody variant="light" isLoading />
+    )
+    for (const bar of light.querySelectorAll('div.animate-pulse')) {
+      expect(bar.className).toContain('bg-black/15')
+    }
+  })
+
+  it('renders the skeleton even when there is nothing else to show', () => {
+    const { container } = renderWithProviders(
+      <CardBody variant="light" isLoading />
+    )
+    expect(container).not.toBeEmptyDOMElement()
+  })
+
+  it('keeps the cta interactive alongside the chin text', () => {
+    const onClick = vi.fn()
+    renderWithProviders(
+      <CardBody
+        variant="light"
+        title="FAQ"
+        cta={{ label: 'View FAQs', onClick }}
+      />
+    )
+    fireEvent.click(screen.getByText('View FAQs'))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})

package/src/components/LinkAttachment/components/_shared/CardCta.test.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders, screen, fireEvent } from '../../../../test/utils'
+
+import CardCta from './CardCta'
+
+describe('CardCta', () => {
+  it('renders an external anchor when the cta carries an href', () => {
+    renderWithProviders(
+      <CardCta variant="dark" cta={{ label: 'View FAQs', href: 'tr.ee/faq' }} />
+    )
+    const cta = screen.getByText('View FAQs')
+    expect(cta.tagName).toBe('A')
+    // Normalized like the shell anchor so a bare host opens externally.
+    expect(cta.getAttribute('href')).toBe('https://tr.ee/faq')
+    expect(cta.getAttribute('target')).toBe('_blank')
+    expect(cta.getAttribute('rel')).toBe('noopener noreferrer')
+    expect(cta.className).toContain('no-underline')
+  })
+
+  it('renders a button when the href is missing or unsafe', () => {
+    renderWithProviders(<CardCta variant="dark" cta={{ label: 'Plain' }} />)
+    expect(screen.getByText('Plain').tagName).toBe('BUTTON')
+    expect(screen.getByText('Plain').getAttribute('type')).toBe('button')
+
+    renderWithProviders(
+      <CardCta
+        variant="dark"
+        cta={{ label: 'Unsafe', href: 'javascript:alert(1)' }}
+      />
+    )
+    expect(screen.getByText('Unsafe').tagName).toBe('BUTTON')
+  })
+
+  it.each([
+    ['anchor', 'tr.ee/faq'],
+    ['button', undefined],
+  ])(
+    'fires the cta callback from the %s without bubbling to the card',
+    (_shape, href) => {
+      const ctaOnClick = vi.fn()
+      const cardOnClick = vi.fn()
+      renderWithProviders(
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- stands in for the card anchor the CTA must not bubble to
+        <div onClick={cardOnClick}>
+          <CardCta
+            variant="light"
+            cta={{ label: 'Act', href, onClick: ctaOnClick }}
+          />
+        </div>
+      )
+      fireEvent.click(screen.getByText('Act'))
+      expect(ctaOnClick).toHaveBeenCalledTimes(1)
+      expect(cardOnClick).not.toHaveBeenCalled()
+    }
+  )
+
+  it.each([
+    ['anchor', 'tr.ee/faq'],
+    ['button', undefined],
+  ])('tolerates a %s cta with no callback', (_shape, href) => {
+    const cardOnClick = vi.fn()
+    renderWithProviders(
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- stands in for the card anchor the CTA must not bubble to
+      <div onClick={cardOnClick}>
+        <CardCta variant="light" cta={{ label: 'Act', href }} />
+      </div>
+    )
+    fireEvent.click(screen.getByText('Act'))
+    expect(cardOnClick).not.toHaveBeenCalled()
+  })
+
+  it.each([
+    ['dark', 'primary', 'bg-white text-[#121110]'],
+    ['dark', 'secondary', 'bg-white/15 text-white'],
+    ['light', 'primary', 'bg-[#121110] text-white'],
+    ['light', 'secondary', 'bg-black/[0.06] text-[#121110]'],
+  ] as const)(
+    'paints the %s surface %s emphasis',
+    (variant, emphasis, expected) => {
+      renderWithProviders(
+        <CardCta variant={variant} cta={{ label: 'Act', variant: emphasis }} />
+      )
+      expect(screen.getByText('Act').className).toContain(expected)
+    }
+  )
+
+  it('defaults to the filled primary emphasis', () => {
+    renderWithProviders(<CardCta variant="light" cta={{ label: 'Act' }} />)
+    const cta = screen.getByText('Act')
+    expect(cta.className).toContain('bg-[#121110] text-white')
+    expect(cta.className).not.toContain('bg-black/[0.06]')
+  })
+
+  it('spans its row by default and renders the label verbatim', () => {
+    renderWithProviders(<CardCta variant="light" cta={{ label: 'Act' }} />)
+    const cta = screen.getByText('Act')
+    expect(cta.className).toContain('w-full')
+    expect(cta.querySelector('span')).toBeNull()
+  })
+
+  it('sizes to its content and truncates the label when fullWidth is off', () => {
+    renderWithProviders(
+      <CardCta variant="light" cta={{ label: 'Act' }} fullWidth={false} />
+    )
+    const label = screen.getByText('Act')
+    expect(label.tagName).toBe('SPAN')
+    expect(label.className).toContain('min-w-0 truncate')
+    expect(label.parentElement?.className).toContain('min-w-0')
+    expect(label.parentElement?.className).not.toContain('w-full')
+  })
+
+  it('offsets itself below the description unless the caller owns spacing', () => {
+    renderWithProviders(<CardCta variant="light" cta={{ label: 'Spaced' }} />)
+    expect(screen.getByText('Spaced').className).toContain('mt-2')
+
+    renderWithProviders(
+      <CardCta variant="light" cta={{ label: 'Standalone' }} standalone />
+    )
+    expect(screen.getByText('Standalone').className).not.toContain('mt-2')
+  })
+})

package/src/components/LinkAttachment/components/_shared/CardShell.test.tsx

@@ -0,0 +1,193 @@
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders, screen, fireEvent } from '../../../../test/utils'
+
+import CardShell, { LOADING_LABEL } from './CardShell'
+
+const shellOf = (testId = 'shell') => screen.getByTestId(testId)
+
+describe('CardShell', () => {
+  it('renders a non-interactive div when neither href nor onClick is set', () => {
+    renderWithProviders(
+      <CardShell variant="light" data-testid="shell">
+        body
+      </CardShell>
+    )
+    const shell = shellOf()
+    expect(shell.tagName).toBe('DIV')
+    expect(shell.className).not.toContain('cursor-pointer')
+    expect(shell.className).not.toContain('focus-ring')
+    expect(shell.getAttribute('data-variant')).toBe('light')
+  })
+
+  it('renders an external anchor when href is set and fires onClick alongside navigation', () => {
+    const onClick = vi.fn()
+    renderWithProviders(
+      <CardShell
+        variant="dark"
+        href="https://tr.ee/briemix"
+        onClick={onClick}
+        data-testid="shell"
+      >
+        body
+      </CardShell>
+    )
+    const shell = shellOf()
+    expect(shell.tagName).toBe('A')
+    expect(shell.getAttribute('href')).toBe('https://tr.ee/briemix')
+    expect(shell.getAttribute('target')).toBe('_blank')
+    expect(shell.getAttribute('rel')).toBe('noopener noreferrer')
+    expect(shell.className).toContain('cursor-pointer')
+    expect(shell.className).toContain('no-underline')
+    expect(shell.className).toContain('focus-ring')
+    fireEvent.click(shell)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders a labelled button when onClick is set without href', () => {
+    const onClick = vi.fn()
+    renderWithProviders(
+      <CardShell
+        variant="light"
+        onClick={onClick}
+        ariaLabel="Open attachment preview"
+        data-testid="shell"
+      >
+        body
+      </CardShell>
+    )
+    const shell = shellOf()
+    expect(shell.tagName).toBe('BUTTON')
+    expect(shell.getAttribute('type')).toBe('button')
+    expect(shell.getAttribute('aria-label')).toBe('Open attachment preview')
+    // The button's own centring is overridden so the chin still reads left-aligned.
+    expect(shell.className).toContain('text-left')
+    fireEvent.click(shell)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('paints the variant bubble fill and lets bgClassName override it', () => {
+    const { unmount } = renderWithProviders(
+      <CardShell variant="dark" data-testid="shell">
+        body
+      </CardShell>
+    )
+    expect(shellOf().className).toContain('bg-[#1e2330]')
+    expect(shellOf().className).toContain('rounded-[20px]')
+    unmount()
+
+    renderWithProviders(
+      <CardShell variant="light" data-testid="light">
+        body
+      </CardShell>
+    )
+    expect(shellOf('light').className).toContain('bg-[#f1f0ee]')
+
+    renderWithProviders(
+      <CardShell variant="dark" bgClassName="bg-[#F2F3F4]" data-testid="audio">
+        body
+      </CardShell>
+    )
+    const audio = shellOf('audio')
+    expect(audio.className).toContain('bg-[#F2F3F4]')
+    expect(audio.className).not.toContain('bg-[#1e2330]')
+  })
+
+  it('locks to the 250px column only when fixedHeight is set', () => {
+    renderWithProviders(
+      <CardShell variant="dark" fixedHeight data-testid="fixed">
+        body
+      </CardShell>
+    )
+    expect(shellOf('fixed').className).toContain('flex h-[250px] flex-col')
+    expect(shellOf('fixed').className).not.toContain('block')
+
+    renderWithProviders(
+      <CardShell variant="dark" data-testid="intrinsic">
+        body
+      </CardShell>
+    )
+    expect(shellOf('intrinsic').className).toContain('block')
+    expect(shellOf('intrinsic').className).not.toContain('h-[250px]')
+  })
+
+  it('exposes a labelled busy region only while busy', () => {
+    renderWithProviders(
+      <CardShell variant="dark" busy data-testid="busy">
+        body
+      </CardShell>
+    )
+    const busy = shellOf('busy')
+    expect(busy.getAttribute('role')).toBe('status')
+    expect(busy.getAttribute('aria-busy')).toBe('true')
+    expect(busy.getAttribute('aria-label')).toBe(LOADING_LABEL)
+    expect(LOADING_LABEL).toBe('Loading link preview')
+
+    renderWithProviders(
+      <CardShell variant="dark" data-testid="ready">
+        body
+      </CardShell>
+    )
+    const ready = shellOf('ready')
+    expect(ready.getAttribute('role')).toBeNull()
+    expect(ready.getAttribute('aria-busy')).toBeNull()
+    expect(ready.getAttribute('aria-label')).toBeNull()
+  })
+
+  it('publishes the accent as a custom property, and nothing without one', () => {
+    renderWithProviders(
+      <CardShell variant="dark" accentHex="#7008E7" data-testid="accented">
+        body
+      </CardShell>
+    )
+    expect(shellOf('accented').style.getPropertyValue('--accent')).toBe(
+      '#7008E7'
+    )
+
+    renderWithProviders(
+      <CardShell variant="dark" data-testid="plain">
+        body
+      </CardShell>
+    )
+    expect(shellOf('plain').style.getPropertyValue('--accent')).toBe('')
+  })
+
+  it('renders the topRight slot pinned to the corner above the content', () => {
+    renderWithProviders(
+      <CardShell
+        variant="dark"
+        topRight={<button type="button">Dismiss</button>}
+        data-testid="shell"
+      >
+        body
+      </CardShell>
+    )
+    const corner = screen.getByText('Dismiss').parentElement
+    expect(corner?.className).toContain('absolute right-3 top-3')
+    expect(corner?.className).toContain('z-10')
+  })
+
+  it('omits the corner wrapper when no topRight is provided', () => {
+    const { container } = renderWithProviders(
+      <CardShell variant="dark" data-testid="shell">
+        body
+      </CardShell>
+    )
+    expect(container.querySelectorAll('div.absolute')).toHaveLength(0)
+  })
+
+  it.each([
+    ['anchor', { href: 'https://tr.ee/a' }],
+    ['button', { onClick: () => {} }],
+    ['div', {}],
+  ])('forwards rootRef for the %s shape', (_shape, props) => {
+    const ref = React.createRef<HTMLElement>()
+    renderWithProviders(
+      <CardShell variant="dark" rootRef={ref} data-testid="shell" {...props}>
+        body
+      </CardShell>
+    )
+    expect(ref.current).toBe(shellOf())
+  })
+})