@tribepad/themis 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Accessible React component library built on React Aria primitives",
   "author": "Tribepad <mbasford@tribepad.com>",
   "license": "MIT",
@@ -250,6 +250,11 @@
       "name": "Sidebar only",
       "path": "dist/elements/Sidebar/index.mjs",
       "limit": "35 KB"
+    },
+    {
+      "name": "PageTitle only",
+      "path": "dist/elements/PageTitle/index.mjs",
+      "limit": "60 KB"
     }
   ],
   "keywords": [

package/src/elements/PageTitle/PageTitle.stories.tsx

@@ -0,0 +1,288 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Plus } from 'lucide-react';
+import { Button } from '../Button';
+import { PageTitle } from './PageTitle';
+
+const BREADCRUMB_ITEMS = [
+  { id: 'home', label: 'Dashboard', href: '/' },
+  { id: 'forms', label: 'Forms' },
+];
+
+const LONG_BREADCRUMB_ITEMS = [
+  { id: 'home', label: 'Dashboard', href: '/' },
+  { id: 'bp', label: 'Blueprint', href: '/blueprint' },
+  { id: 'fields', label: 'Field library' },
+];
+
+const meta = {
+  title: 'Elements/PageTitle',
+  component: PageTitle,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Accessible page header for listing and landing pages. Two variants — `default` (light card) and `feature` (primary gradient). Compound sub-components: `PageTitle.Breadcrumbs`, `PageTitle.Heading`, `PageTitle.Description`, `PageTitle.Actions`, `PageTitle.Tabs`. Renders as a semantic `<header>` landmark.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof PageTitle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// =============================================================================
+// Default variant
+// =============================================================================
+
+export const Default: Story = {
+  render: () => (
+    <PageTitle variant="default">
+      <PageTitle.Breadcrumbs items={BREADCRUMB_ITEMS} />
+      <PageTitle.Heading>Forms</PageTitle.Heading>
+      <PageTitle.Description>
+        Build and manage reusable forms for applications, interviews, screening, and onboarding.
+      </PageTitle.Description>
+      <PageTitle.Actions>
+        <Button size="default">
+          <Plus aria-hidden="true" />
+          Create Form
+        </Button>
+      </PageTitle.Actions>
+    </PageTitle>
+  ),
+};
+
+export const DefaultMinimal: Story = {
+  render: () => (
+    <PageTitle variant="default">
+      <PageTitle.Heading>Dashboard</PageTitle.Heading>
+    </PageTitle>
+  ),
+};
+
+export const DefaultNoDescription: Story = {
+  render: () => (
+    <PageTitle variant="default">
+      <PageTitle.Breadcrumbs items={BREADCRUMB_ITEMS} />
+      <PageTitle.Heading>Forms</PageTitle.Heading>
+      <PageTitle.Actions>
+        <Button size="default">
+          <Plus aria-hidden="true" />
+          Create Form
+        </Button>
+      </PageTitle.Actions>
+    </PageTitle>
+  ),
+};
+
+export const DefaultNoActions: Story = {
+  render: () => (
+    <PageTitle variant="default">
+      <PageTitle.Breadcrumbs items={BREADCRUMB_ITEMS} />
+      <PageTitle.Heading>Forms</PageTitle.Heading>
+      <PageTitle.Description>
+        A read-only listing page — no primary action.
+      </PageTitle.Description>
+    </PageTitle>
+  ),
+};
+
+export const DefaultWithTabs: Story = {
+  render: () => (
+    <PageTitle variant="default">
+      <PageTitle.Breadcrumbs
+        items={[
+          { id: 'home', label: 'Settings', href: '/settings' },
+          { id: 'careers', label: 'Careers Site' },
+        ]}
+      />
+      <PageTitle.Heading as="h2">Careers Site</PageTitle.Heading>
+      <PageTitle.Description>
+        Manage the public careers site pages and branding.
+      </PageTitle.Description>
+      <PageTitle.Tabs>
+        <nav aria-label="Site sections" className="flex gap-4 border-b border-[var(--border)]">
+          <a href="/pages" className="px-3 py-2 border-b-2 border-[var(--primary)]">
+            Page Builder
+          </a>
+          <a href="/pages/theme" className="px-3 py-2">
+            Theme
+          </a>
+          <a href="/pages/domain" className="px-3 py-2">
+            Domain
+          </a>
+        </nav>
+      </PageTitle.Tabs>
+    </PageTitle>
+  ),
+};
+
+// =============================================================================
+// Feature variant
+// =============================================================================
+
+export const Feature: Story = {
+  render: () => (
+    <PageTitle variant="feature">
+      <PageTitle.Breadcrumbs items={BREADCRUMB_ITEMS} />
+      <PageTitle.Heading>Forms</PageTitle.Heading>
+      <PageTitle.Description>
+        Build and manage reusable forms for applications, interviews, screening, and onboarding.
+      </PageTitle.Description>
+      <PageTitle.Actions>
+        <Button size="default">
+          <Plus aria-hidden="true" />
+          Create Form
+        </Button>
+      </PageTitle.Actions>
+    </PageTitle>
+  ),
+};
+
+export const FeatureMinimal: Story = {
+  render: () => (
+    <PageTitle variant="feature">
+      <PageTitle.Heading>Welcome</PageTitle.Heading>
+    </PageTitle>
+  ),
+};
+
+export const FeatureWithTabs: Story = {
+  render: () => (
+    <PageTitle variant="feature">
+      <PageTitle.Breadcrumbs items={LONG_BREADCRUMB_ITEMS} />
+      <PageTitle.Heading>Field library</PageTitle.Heading>
+      <PageTitle.Description>
+        Reusable form fields, shared across every form in your organisation.
+      </PageTitle.Description>
+      <PageTitle.Actions>
+        <Button size="default">
+          <Plus aria-hidden="true" />
+          Create Field
+        </Button>
+      </PageTitle.Actions>
+      <PageTitle.Tabs>
+        <nav
+          aria-label="Library sections"
+          className="flex gap-4 bg-[var(--content-background)] px-4 py-2"
+        >
+          <a href="/fields">All fields</a>
+          <a href="/fields/groups">Groups</a>
+          <a href="/fields/categories">Categories</a>
+        </nav>
+      </PageTitle.Tabs>
+    </PageTitle>
+  ),
+};
+
+export const FeatureLongTitle: Story = {
+  name: 'Feature · Long title (reflow check)',
+  render: () => (
+    <PageTitle variant="feature">
+      <PageTitle.Breadcrumbs items={BREADCRUMB_ITEMS} />
+      <PageTitle.Heading>
+        A deliberately very long page title that must wrap onto multiple lines without breaking the
+        layout at any viewport width
+      </PageTitle.Heading>
+      <PageTitle.Description>
+        Long titles keep the description column and the action button column from overlapping — the
+        actions wrap beneath the body on narrow viewports.
+      </PageTitle.Description>
+      <PageTitle.Actions>
+        <Button size="default">
+          <Plus aria-hidden="true" />
+          Create
+        </Button>
+      </PageTitle.Actions>
+    </PageTitle>
+  ),
+};
+
+export const FeatureLongDescription: Story = {
+  name: 'Feature · Long description',
+  render: () => (
+    <PageTitle variant="feature">
+      <PageTitle.Breadcrumbs items={BREADCRUMB_ITEMS} />
+      <PageTitle.Heading>Forms</PageTitle.Heading>
+      <PageTitle.Description>
+        This supporting text intentionally spans multiple lines so that the vertical rhythm between
+        the title, the description, and the action button can be assessed — recruiters read this
+        copy once per landing and it must feel like a single coherent block, not an afterthought
+        crammed beneath a button.
+      </PageTitle.Description>
+      <PageTitle.Actions>
+        <Button size="default">
+          <Plus aria-hidden="true" />
+          Create Form
+        </Button>
+      </PageTitle.Actions>
+    </PageTitle>
+  ),
+};
+
+export const FeatureRTL: Story = {
+  name: 'Feature · RTL',
+  render: () => (
+    <div dir="rtl">
+      <PageTitle variant="feature">
+        <PageTitle.Breadcrumbs
+          items={[
+            { id: 'home', label: 'لوحة التحكم', href: '/' },
+            { id: 'forms', label: 'النماذج' },
+          ]}
+        />
+        <PageTitle.Heading>النماذج</PageTitle.Heading>
+        <PageTitle.Description>
+          أنشئ وأدر نماذج قابلة للاستخدام عبر جميع المراحل.
+        </PageTitle.Description>
+        <PageTitle.Actions>
+          <Button size="default">
+            <Plus aria-hidden="true" />
+            إنشاء نموذج
+          </Button>
+        </PageTitle.Actions>
+      </PageTitle>
+    </div>
+  ),
+};
+
+// =============================================================================
+// A11y — dedicated audit story for addon-a11y
+// =============================================================================
+
+export const A11yAudit: Story = {
+  name: 'A11y audit (AAA)',
+  parameters: {
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast-enhanced', enabled: true }],
+      },
+    },
+  },
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <PageTitle variant="default">
+        <PageTitle.Breadcrumbs items={BREADCRUMB_ITEMS} />
+        <PageTitle.Heading>Default variant</PageTitle.Heading>
+        <PageTitle.Description>Verified against WCAG 2.2 AAA rules.</PageTitle.Description>
+        <PageTitle.Actions>
+          <Button size="default">
+            Create
+          </Button>
+        </PageTitle.Actions>
+      </PageTitle>
+      <PageTitle variant="feature">
+        <PageTitle.Breadcrumbs items={BREADCRUMB_ITEMS} />
+        <PageTitle.Heading>Feature variant</PageTitle.Heading>
+        <PageTitle.Description>Verified against WCAG 2.2 AAA rules.</PageTitle.Description>
+        <PageTitle.Actions>
+          <Button size="default">
+            Create
+          </Button>
+        </PageTitle.Actions>
+      </PageTitle>
+    </div>
+  ),
+};