@talelk/newui-organisms 1.0.0 → 2.1.0

package/src/organisms/Section/Section.a11y.test.tsx

@@ -0,0 +1,49 @@
+import { render } from '@solidjs/testing-library'
+import axe, { type AxeResults } from 'axe-core'
+import { describe, expect, it } from 'vitest'
+import { Section } from './Section'
+
+const AXE_OPTIONS = {
+  rules: {
+    'color-contrast': { enabled: false },
+    region: { enabled: false },
+  },
+}
+
+function summarize(results: AxeResults) {
+  return results.violations.map((violation) => ({
+    id: violation.id,
+    impact: violation.impact,
+    targets: violation.nodes.map((node) => node.target),
+  }))
+}
+
+describe('Section accessibility', () => {
+  it('has no axe violations for the full region anatomy', async () => {
+    const { container } = render(() => (
+      <Section
+        id="expenses"
+        title="Pending expenses"
+        description="Waiting for approval"
+        actions={<button type="button">Export</button>}
+        toolbar={<div>Filters</div>}
+        footer={<span>18 records</span>}
+      >
+        <ul>
+          <li>Taxi to client</li>
+          <li>Team lunch</li>
+        </ul>
+      </Section>
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+
+  it('has no axe violations when named by label alone', async () => {
+    const { container } = render(() => (
+      <Section label="Recent activity" headingLevel={3} surface="card">
+        <p>Nothing today.</p>
+      </Section>
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+})

package/src/organisms/Section/Section.browser.test.tsx

@@ -0,0 +1,63 @@
+import { render } from '@solidjs/testing-library'
+import { describe, expect, it } from 'vitest'
+import { Section } from './Section'
+
+describe('Section (browser, real CSS)', () => {
+  it('sits the footer under a real rule', () => {
+    const { container } = render(() => (
+      <Section title="Ledger" footer={<span>18 records</span>}>
+        <div>Body</div>
+      </Section>
+    ))
+    const footer = Array.from(container.querySelectorAll('div')).find(
+      (node) => node.textContent === '18 records',
+    ) as HTMLElement
+    const style = getComputedStyle(footer)
+    // "Pagination, totals or selection feedback, under a rule" — the rule is
+    // the contract; losing it strands the footer in the body.
+    expect(style.borderTopStyle).toBe('solid')
+    expect(Number.parseFloat(style.borderTopWidth)).toBeGreaterThan(0)
+    expect(Number.parseFloat(style.paddingTop)).toBeGreaterThan(0)
+  })
+
+  it('paints the card surface and leaves the plain one bare', () => {
+    const card = render(() => (
+      <Section surface="card" title="Ledger">
+        <div>Body</div>
+      </Section>
+    ))
+    const cardBox = card.container.querySelector(
+      '[data-slot="section"]',
+    ) as HTMLElement
+    const cardStyle = getComputedStyle(cardBox)
+    expect(cardStyle.backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+    expect(Number.parseFloat(cardStyle.borderRadius)).toBeGreaterThan(0)
+    expect(Number.parseFloat(cardStyle.paddingTop)).toBeGreaterThan(0)
+    card.unmount()
+
+    const plain = render(() => (
+      <Section title="Ledger">
+        <div>Body</div>
+      </Section>
+    ))
+    const plainBox = plain.container.querySelector(
+      '[data-slot="section"]',
+    ) as HTMLElement
+    expect(getComputedStyle(plainBox).backgroundColor).toBe('rgba(0, 0, 0, 0)')
+    expect(getComputedStyle(plainBox).paddingTop).toBe('0px')
+  })
+
+  it('renders the heading in its type scale', () => {
+    const { container } = render(() => (
+      <Section title="Pending expenses">
+        <div>Body</div>
+      </Section>
+    ))
+    const heading = container.querySelector('h2') as HTMLElement
+    // `text-section` — a dropped scale utility drops the heading into body text.
+    expect(
+      Number.parseFloat(getComputedStyle(heading).fontSize),
+    ).toBeGreaterThan(16)
+    expect(heading.getBoundingClientRect().height).toBeGreaterThan(0)
+  })
+})

package/src/organisms/Section/Section.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@solidjs/testing-library'
+import { describe, expect, it } from 'vitest'
+import { Section } from './Section'
+
+describe('Section', () => {
+  it('renders a default H2 and the four region slots', () => {
+    render(() => (
+      <Section
+        title="Pending expenses"
+        description="Waiting for approval"
+        actions={<button type="button">Export</button>}
+        toolbar={<div>Filters</div>}
+        footer={<span>18 records</span>}
+      >
+        <div>Body</div>
+      </Section>
+    ))
+    expect(screen.getByRole('heading', { level: 2 }).textContent).toBe(
+      'Pending expenses',
+    )
+    expect(screen.getByText('Waiting for approval')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Export' })).toBeTruthy()
+    expect(screen.getByText('Filters')).toBeTruthy()
+    expect(screen.getByText('Body')).toBeTruthy()
+    expect(screen.getByText('18 records')).toBeTruthy()
+  })
+
+  it('honours the heading level and compact density', () => {
+    const { container } = render(() => (
+      <Section title="Ledger" headingLevel={3} density="compact">
+        <div />
+      </Section>
+    ))
+    expect(screen.getByRole('heading', { level: 3 }).textContent).toBe('Ledger')
+    expect(
+      container
+        .querySelector('[data-slot="section"]')
+        ?.getAttribute('data-density'),
+    ).toBe('compact')
+  })
+})

package/src/organisms/Section/Section.tsx

@@ -0,0 +1,108 @@
+import { cn } from '@talelk/newui-atoms'
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+
+export type SectionHeadingLevel = 1 | 2 | 3 | 4
+
+export interface SectionProps {
+  title?: JSX.Element
+  description?: JSX.Element
+  /** Page or section actions, rendered opposite the title. */
+  actions?: JSX.Element
+  /** Controls that change the data, between the header and the body. */
+  toolbar?: JSX.Element
+  /** Pagination, totals or selection feedback, under a rule. */
+  footer?: JSX.Element
+  /** @default 2 */
+  headingLevel?: SectionHeadingLevel
+  /** Explicit id for the rendered heading. Defaults to `<id>-title`. */
+  headingId?: string
+  /** Accessible name when the section has no visible title. */
+  label?: string
+  /** Id of the element that names the region; beats `label`/the heading id. */
+  labelledBy?: string
+  /** Surface treatment. @default 'plain' */
+  surface?: 'plain' | 'card' | 'inset'
+  /** @default 'comfortable' */
+  density?: 'comfortable' | 'compact'
+  id?: string
+  class?: string
+  children: JSX.Element
+}
+
+const HEADING: Record<SectionHeadingLevel, string> = {
+  1: 'text-heading',
+  2: 'text-section',
+  3: 'text-base-medium',
+  4: 'text-interface font-medium',
+}
+
+/**
+ * One page-region anatomy: header, optional toolbar, body, optional footer.
+ *
+ * Data organisms should not each invent their own title row or footer rule.
+ * `Section` owns the region; the organism owns the data surface inside it.
+ */
+export function Section(props: SectionProps): JSX.Element {
+  const surface = () => props.surface ?? 'plain'
+  const density = () => props.density ?? 'comfortable'
+  const hasHeader = () =>
+    Boolean(props.title || props.description || props.actions)
+  const headingId = () =>
+    props.headingId ?? (props.id ? `${props.id}-title` : undefined)
+  const labelledBy = () =>
+    props.labelledBy ?? (props.title ? headingId() : undefined)
+  return (
+    <section
+      id={props.id}
+      aria-label={props.label}
+      aria-labelledby={labelledBy()}
+      data-slot="section"
+      data-surface={surface()}
+      data-density={density()}
+      class={cn(
+        'flex min-w-0 flex-col',
+        density() === 'compact' ? 'gap-2' : 'gap-3',
+        surface() === 'card' &&
+          'rounded-card border border-outline-gray-1 bg-surface-elevation-1 p-card-pad',
+        surface() === 'inset' && 'rounded-card bg-surface-gray-1 p-card-pad',
+        props.class,
+      )}
+    >
+      <Show when={hasHeader()}>
+        <div class="flex flex-wrap items-start justify-between gap-3">
+          <div class="flex min-w-0 flex-col gap-1">
+            <Show when={props.title}>
+              <Dynamic
+                component={`h${props.headingLevel ?? 2}`}
+                id={headingId()}
+                class={cn(
+                  'min-w-0 text-ink-gray-9',
+                  HEADING[props.headingLevel ?? 2],
+                )}
+              >
+                {props.title}
+              </Dynamic>
+            </Show>
+            <Show when={props.description}>
+              <p class="max-w-[56ch] text-caption text-ink-gray-7">
+                {props.description}
+              </p>
+            </Show>
+          </div>
+          <Show when={props.actions}>
+            <div class="flex shrink-0 flex-wrap items-center gap-2">
+              {props.actions}
+            </div>
+          </Show>
+        </div>
+      </Show>
+      <Show when={props.toolbar}>{props.toolbar}</Show>
+      <div class="min-w-0">{props.children}</div>
+      <Show when={props.footer}>
+        <div class="border-t border-outline-gray-1 pt-3">{props.footer}</div>
+      </Show>
+    </section>
+  )
+}

package/src/organisms/Section/index.ts

@@ -0,0 +1 @@
+export { Section, type SectionHeadingLevel, type SectionProps } from './Section'

package/src/organisms/SelectionBar/SelectionBar.a11y.test.tsx

@@ -0,0 +1,48 @@
+import { render } from '@solidjs/testing-library'
+import axe, { type AxeResults } from 'axe-core'
+import { describe, expect, it } from 'vitest'
+import { SelectionBar } from './SelectionBar'
+
+const AXE_OPTIONS = {
+  rules: {
+    'color-contrast': { enabled: false },
+    region: { enabled: false },
+  },
+}
+
+function summarize(results: AxeResults) {
+  return results.violations.map((violation) => ({
+    id: violation.id,
+    impact: violation.impact,
+    targets: violation.nodes.map((node) => node.target),
+  }))
+}
+
+describe('SelectionBar accessibility', () => {
+  it('has no axe violations with a primary action and clear', async () => {
+    const { container } = render(() => (
+      <SelectionBar
+        count={3}
+        summary="$14,650"
+        primary={{ label: 'Approve expenses', onClick: () => {} }}
+        onClear={() => {}}
+      />
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+
+  it('has no axe violations with a secondary control and no summary', async () => {
+    const { container } = render(() => (
+      <SelectionBar
+        count={12}
+        primary={{
+          label: 'Archive',
+          onClick: () => {},
+          disabled: true,
+        }}
+        secondary={<button type="button">Merge</button>}
+      />
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+})

package/src/organisms/SelectionBar/SelectionBar.browser.test.tsx

@@ -0,0 +1,57 @@
+import { render } from '@solidjs/testing-library'
+import { describe, expect, it } from 'vitest'
+import { SelectionBar } from './SelectionBar'
+
+describe('SelectionBar (browser, real CSS)', () => {
+  it('paints a raised card over the data', () => {
+    const { container } = render(() => <SelectionBar count={3} />)
+    const bar = container.querySelector(
+      '[data-slot="selection-bar"]',
+    ) as HTMLElement
+    const style = getComputedStyle(bar)
+    expect(style.backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+    // `shadow-sm` is what lifts it off the table it covers.
+    expect(style.boxShadow).not.toBe('none')
+    expect(Number.parseFloat(style.borderRadius)).toBeGreaterThan(0)
+    expect(bar.getBoundingClientRect().height).toBeGreaterThanOrEqual(24)
+  })
+
+  it('sets the count in the medium interface weight', () => {
+    const { container } = render(() => (
+      <SelectionBar count={3} summary="$14,650" />
+    ))
+    const count = Array.from(container.querySelectorAll('span')).find(
+      (node) => node.textContent === '3 selected',
+    ) as HTMLElement
+    expect(
+      Number.parseInt(getComputedStyle(count).fontWeight, 10),
+    ).toBeGreaterThanOrEqual(500)
+    // The summary is a quieter line: it must not match the count's colour.
+    const summary = Array.from(container.querySelectorAll('span')).find(
+      (node) => node.textContent === '$14,650',
+    ) as HTMLElement
+    expect(getComputedStyle(summary).color).not.toBe(
+      getComputedStyle(count).color,
+    )
+  })
+
+  it('pins a sticky bar above the bottom edge on the harness phone viewport', () => {
+    // This project renders at 414px — below the `sm` breakpoint, which is
+    // exactly where `placement="sticky"` becomes `max-sm:fixed`.
+    const { container } = render(() => (
+      <SelectionBar count={3} placement="sticky" />
+    ))
+    const bar = container.querySelector(
+      '[data-slot="selection-bar"]',
+    ) as HTMLElement
+    expect(getComputedStyle(bar).position).toBe('fixed')
+    expect(Number.parseFloat(getComputedStyle(bar).bottom)).toBeGreaterThan(0)
+
+    // The inline default stays in flow at the same width.
+    const inline = render(() => <SelectionBar count={3} />)
+    const inlineBar = inline.container.querySelector(
+      '[data-slot="selection-bar"]',
+    ) as HTMLElement
+    expect(getComputedStyle(inlineBar).position).not.toBe('fixed')
+  })
+})

package/src/organisms/SelectionBar/SelectionBar.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@solidjs/testing-library'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { SelectionBar } from './SelectionBar'
+
+describe('SelectionBar', () => {
+  it('renders nothing without a selection', () => {
+    const { container } = render(() => <SelectionBar count={0} />)
+    expect(container.querySelector('[data-slot="selection-bar"]')).toBeNull()
+  })
+
+  it('shows the count, action and clear control', async () => {
+    const onAction = vi.fn()
+    const onClear = vi.fn()
+    render(() => (
+      <SelectionBar
+        count={3}
+        summary="$14,650"
+        primary={{ label: 'Approve expenses', onClick: onAction }}
+        onClear={onClear}
+      />
+    ))
+    expect(
+      screen.getByRole('region', { name: 'Selection actions' }),
+    ).toBeTruthy()
+    expect(screen.getByText('3 selected')).toBeTruthy()
+    expect(screen.getByText('$14,650')).toBeTruthy()
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Approve expenses' }),
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Clear' }))
+    expect(onAction).toHaveBeenCalled()
+    expect(onClear).toHaveBeenCalled()
+  })
+})

package/src/organisms/SelectionBar/SelectionBar.tsx

@@ -0,0 +1,84 @@
+import { Button, cn, type IconProp } from '@talelk/newui-atoms'
+import { type JSX, Show } from 'solid-js'
+
+export interface SelectionPrimaryAction {
+  label: string
+  onClick: () => void
+  icon?: IconProp
+  disabled?: boolean
+}
+
+export interface SelectionBarProps {
+  count: number
+  /** Context beside the count, e.g. a total or a scope. */
+  summary?: JSX.Element
+  primary?: SelectionPrimaryAction
+  secondary?: JSX.Element
+  onClear?: () => void
+  /** `sticky` fixes the bar to the bottom below `sm`. @default 'inline' */
+  placement?: 'inline' | 'sticky'
+  class?: string
+}
+
+/**
+ * The one bulk-action surface for a data region.
+ *
+ * Inline on desktop, fixed above the bottom edge on a phone, so selecting a
+ * row far down a card list never requires scrolling back to a toolbar.
+ */
+export function SelectionBar(props: SelectionBarProps): JSX.Element {
+  return (
+    <Show when={props.count > 0}>
+      <section
+        aria-label="Selection actions"
+        data-slot="selection-bar"
+        data-placement={props.placement ?? 'inline'}
+        class={cn(
+          'flex flex-wrap items-center justify-between gap-2 rounded-card border border-outline-gray-1 bg-surface-elevation-1 p-2 shadow-sm',
+          props.placement === 'sticky' &&
+            'max-sm:fixed max-sm:inset-x-4 max-sm:bottom-4 max-sm:z-top max-sm:shadow-lg',
+          props.class,
+        )}
+      >
+        <div class="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5">
+          <span class="text-interface font-medium text-ink-gray-9">
+            {props.count} selected
+          </span>
+          <Show when={props.summary}>
+            <span class="text-caption tabular-nums text-ink-gray-7">
+              {props.summary}
+            </span>
+          </Show>
+        </div>
+        <div class="flex flex-wrap items-center gap-2">
+          {props.secondary}
+          <Show when={props.onClear}>
+            <Button
+              variant="ghost"
+              size="sm"
+              class="max-sm:h-10"
+              onClick={props.onClear}
+            >
+              Clear
+            </Button>
+          </Show>
+          <Show when={props.primary}>
+            {(primary) => (
+              <Button
+                variant="solid"
+                theme="blue"
+                size="sm"
+                class="max-sm:h-10"
+                iconLeft={primary().icon}
+                disabled={primary().disabled}
+                onClick={primary().onClick}
+              >
+                {primary().label}
+              </Button>
+            )}
+          </Show>
+        </div>
+      </section>
+    </Show>
+  )
+}

package/src/organisms/SelectionBar/index.ts

@@ -0,0 +1,5 @@
+export {
+  SelectionBar,
+  type SelectionBarProps,
+  type SelectionPrimaryAction,
+} from './SelectionBar'

package/src/organisms/SettingsDialog/SettingsDialog.tsx

@@ -97,7 +97,8 @@ const Root: ParentComponent<SettingsDialogProps> = (props) => {
         <Dialog.Content
           class={cn(
             'flex h-[100dvh] min-h-0 w-screen max-w-none flex-col overflow-hidden rounded-none p-0',
-            'sm:h-[min(860px,calc(100vh-8rem))] sm:max-h-[calc(100vh_-_8rem)] sm:min-h-[560px] sm:w-auto sm:max-w-4xl sm:flex-row sm:rounded-overlay',
+            'max-sm:fixed max-sm:inset-0',
+            'sm:h-[min(860px,calc(100vh-8rem))] sm:max-h-[calc(100vh_-_8rem)] sm:min-h-[560px] sm:w-[min(56rem,calc(100vw-2rem))] sm:max-w-4xl sm:flex-row sm:rounded-overlay',
             local.class,
           )}
         >
@@ -108,6 +109,10 @@ const Root: ParentComponent<SettingsDialogProps> = (props) => {
             {local.description ??
               'Manage your settings across the panels in this dialog.'}
           </Dialog.Description>
+          <Dialog.Close class="absolute end-2 top-2 z-raised grid size-10 place-items-center rounded-control text-ink-gray-6 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-9 focus-visible:focus-ring sm:size-8">
+            <span class="sr-only">Close settings</span>
+            <span class="lucide-x size-4" aria-hidden="true" />
+          </Dialog.Close>
           {local.children}
         </Dialog.Content>
       </SettingsDialogContext.Provider>
@@ -116,6 +121,8 @@ const Root: ParentComponent<SettingsDialogProps> = (props) => {
 }
 
 export interface SettingsSidebarProps {
+  /** Accessible name for the vertical tablist. @default 'Settings' */
+  label?: string
   /** Merged into the sidebar. */
   class?: string
   children?: JSX.Element
@@ -128,11 +135,12 @@ export interface SettingsSidebarProps {
 const Sidebar: ParentComponent<SettingsSidebarProps> = (props) => (
   <div
     role="tablist"
+    aria-label={props.label ?? 'Settings'}
     aria-orientation="vertical"
     data-slot="settings-sidebar"
     class={cn(
       'flex max-h-[38vh] w-full shrink-0 flex-col gap-4 overflow-y-auto border-b border-outline-gray-1 bg-surface-sidebar p-2',
-      'sm:max-h-none sm:w-[220px] sm:border-b-0 sm:border-r',
+      'max-sm:pe-12 sm:max-h-none sm:w-[220px] sm:border-b-0 sm:border-e',
       props.class,
     )}
   >
@@ -241,8 +249,9 @@ const NavItem: ParentComponent<SettingsNavItemProps> = (props) => {
       class={cn(
         'flex min-h-8 w-full items-center gap-2 rounded-control px-2 py-1 text-start text-interface text-ink-gray-7 transition-colors motion-reduce:transition-none',
         'focus-visible:focus-ring',
+        'min-h-10 sm:min-h-8',
         'data-[state=inactive]:hover:bg-surface-gray-2',
-        'data-[state=active]:bg-surface-elevation-3 data-[state=active]:shadow-sm',
+        'data-[state=active]:bg-surface-elevation-3 data-[state=active]:text-ink-gray-9 data-[state=active]:shadow-sm',
         'disabled:cursor-not-allowed disabled:text-ink-gray-4',
         local.class,
       )}
@@ -377,7 +386,7 @@ export interface SettingsHeaderProps {
 const Header: ParentComponent<SettingsHeaderProps> = (props) => (
   <div
     data-slot="settings-header"
-    class={cn('shrink-0 px-4 pt-6 sm:px-6', props.class)}
+    class={cn('shrink-0 ps-4 pe-12 pt-6 sm:ps-6', props.class)}
   >
     <Show
       when={props.children}

package/src/organisms/Sidebar/Sidebar.a11y.test.tsx

@@ -0,0 +1,71 @@
+import { render } from '@solidjs/testing-library'
+import axe, { type AxeResults } from 'axe-core'
+import { describe, expect, it } from 'vitest'
+import {
+  Sidebar,
+  SidebarCard,
+  SidebarHeader,
+  SidebarItem,
+  SidebarSearch,
+  SidebarSection,
+  SidebarTrigger,
+} from './Sidebar'
+
+const AXE_OPTIONS = {
+  rules: {
+    'color-contrast': { enabled: false },
+    region: { enabled: false },
+  },
+}
+
+function summarize(results: AxeResults) {
+  return results.violations.map((violation) => ({
+    id: violation.id,
+    impact: violation.impact,
+    targets: violation.nodes.map((node) => node.target),
+  }))
+}
+
+describe('Sidebar accessibility', () => {
+  it('has no axe violations for an expanded workspace sidebar', async () => {
+    const { container } = render(() => (
+      <Sidebar ariaLabel="Main">
+        <SidebarHeader title="Acme" subtitle="Production" />
+        <SidebarTrigger />
+        <SidebarSearch placeholder="Filter pages" />
+        <SidebarItem route="/inbox" icon="lucide-inbox" active>
+          Inbox
+        </SidebarItem>
+        <SidebarItem route="/drafts" icon="lucide-file-pen">
+          Drafts
+        </SidebarItem>
+        <SidebarSection label="Projects" collapsible>
+          <SidebarItem route="/website">Website</SidebarItem>
+          <SidebarItem route="/app">App</SidebarItem>
+        </SidebarSection>
+        <SidebarCard
+          title="Trial ends soon"
+          description="Upgrade to keep your workspace."
+          dismissible
+          action={{ label: 'Upgrade' }}
+        />
+      </Sidebar>
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+
+  it('has no axe violations for the collapsed rail of named icons', async () => {
+    const { container } = render(() => (
+      <Sidebar collapsed ariaLabel="Main">
+        <SidebarHeader title="Acme" logo="https://example.com/logo.png" />
+        <SidebarItem label="Inbox" route="/inbox" icon="lucide-inbox" active>
+          Inbox
+        </SidebarItem>
+        <SidebarItem label="Drafts" route="/drafts" icon="lucide-file-pen">
+          Drafts
+        </SidebarItem>
+      </Sidebar>
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+})