@arbor-education/design-system.components 0.13.0 → 0.14.0

package/.claude/figma-assessment-UKQfcxnT4rlHHNuiumt4o1-551-41974.md

@@ -1,474 +0,0 @@
-# Figma Design Feasibility Assessment
-## Design: Node 551:41974 — Student Profile Page
-**Written by:** Sophia Petrillo, Componentspert, age none-of-your-business
-**Fact-checked by:** Dorothy Zbornak, QA Expert
-**Date**: 2026-04-10
-
----
-
-## What Is This Thing, Anyway?
-
-Picture it: Sicily, 1952. My Aunt Concetta kept a ledger for every person in the village. Name, family, address, occupation, health notes, who owed who a favour. When you needed to know anything about anyone, you went to Concetta.
-
-THIS is what Arbor built for schools. The Student Profile page is the Concetta ledger for every student — a full 1366px desktop layout showing a student's identity, contact details, family structure, medical notes, education history, and calendar. Two column layout: a wide main area (~738px) on the left packed with collapsible data sections, and a narrow widget column (~290px) on the right with emergency contacts, a schedule calendar, and action buttons. Plus the familiar Arbor navigation chrome wrapping the whole thing.
-
-Twenty-three distinct UI patterns. Let's see what we have.
-
----
-
-## Design Overview
-
-**Student Profile | Desktop 1366px** — A full application page for viewing and managing a student's profile data in Arbor MIS.
-
-### UI Elements Identified
-
-- Top navigation bar (logo, My Items/Students/School/Reporting/System nav links, global search, Ask Arbor AI button, user avatar)
-- Left side navigation panel (collapsible tree: Student Profile active, 20+ nav items, star favourite icons, notification badges)
-- Breadcrumbs (Students > Browse Students > Christopher Longbottom > Student Profile + link icon)
-- Page heading H1 "Student Profile" with right-aligned "Suggest Student Summary" primary button
-- Student info header (Avatar, student name, favourite star icon, label rows)
-- Tags row (Disadvantaged, FSM, Pupil Premium Eligible, EAL, Service Child, Has Medical Condition)
-- "All Sections" filter dropdown button
-- Section headings with collapse/expand, icon, and info tooltip + Add button combinations
-- List property rows (key-value pairs: Name, Sex, Gender identity, DOB, Nationality, Religion, etc.)
-- Pinned Items panel (IEP, Medical Condition, SEN note with dates)
-- Email hyperlink (mailto: in contact details)
-- Phone number rows and address rows
-- Emergency contacts widget (right column, phone numbers + names)
-- Calendar/schedule widget (right column, time-blocked class entries in green)
-- Previous / Next navigation buttons (right column top)
-- "Student Summary" CTA button (full-width, right column)
-- "Record Planned Absence" button (full-width, right column)
-- "Communications & Notes >" button (right column)
-- Compact data table (Education & Employment: Hide(1) dropdown, toolbar icons, Institution/Type columns, "Showing 1 result")
-- Separator/dividers between rows and sections
-- Tooltip info icons (ⓘ) beside section headings
-- "+ Add" buttons on section headings
-
----
-
-## Section 1: What We Already Have — Use These As-Is, Don't Reinvent Them
-
-### Page Heading + Right-Aligned Action Button (`src/components/heading/Heading.tsx`)
-
-The "Student Profile" H1 with "Suggest Student Summary" button on the right. `Heading` with two `Heading.InnerContainer` children — Dorothy confirmed all props.
-
-```tsx
-<Heading level={1}>
-  <Heading.InnerContainer>Student Profile</Heading.InnerContainer>
-  <Heading.InnerContainer>
-    <Button variant="primary">Suggest Student Summary</Button>
-  </Heading.InnerContainer>
-</Heading>
-```
-
----
-
-### Student Avatar (`src/components/avatar/Avatar.tsx`)
-
-The small circle next to the student name. Dorothy verified: exported from `src/index.ts` (line 34), `size="small"` and `initials` props both confirmed.
-
-```tsx
-<Avatar size="small" initials="CL" alt="Christopher Longbottom" />
-```
-
----
-
-### Tags Row (`src/components/tag/Tag.tsx`)
-
-The colored labels. Dorothy confirmed all 8 Tag colors: `neutral | orange | blue | green | purple | teal | salmon | yellow`. Wrap in a flex container.
-
-```tsx
-<div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-small)' }}>
-  <Tag text="Disadvantaged" color="orange" />
-  <Tag text="FSM" color="blue" />
-  <Tag text="Pupil Premium Eligible" color="purple" />
-  <Tag text="EAL" color="teal" />
-  <Tag text="Service Child" color="salmon" />
-  <Tag text="Has Medical Condition" color="yellow" />
-</div>
-```
-
----
-
-### Section Headings with Collapse (`src/components/section/Section.tsx`)
-
-Every named content block — Identity, Pinned Items, Education & Employment, Admin Functions. Dorothy verified ALL props:
-
-- `headingLevel` ✅ (line 11)
-- `collapsible` ✅ (line 15)
-- `collapsed` ✅ (line 16, initial collapsed state)
-- `buttonText` ✅ (line 17)
-- `buttonSize` ✅ (line 20)
-- `titleIconName` ✅ (line 12)
-- `titleIconColor` ✅ (line 13, typed as `string`)
-
-```tsx
-<Section
-  title="Identity"
-  headingLevel={2}
-  collapsible
-  buttonText="Add"
-  buttonSize="S"
->
-  {/* list property rows */}
-</Section>
-
-<Section
-  title="Pinned Items"
-  headingLevel={2}
-  collapsible
-  titleIconName="pin"
-  titleIconColor="var(--color-salmon-500)"
->
-  {/* pinned items */}
-</Section>
-```
-
----
-
-### Separator / Dividers (`src/components/separator/Separator.tsx`)
-
-Horizontal dividers between every property row.
-
-```tsx
-<Separator decorative />
-```
-
----
-
-### Icon Usage (`src/components/icon/Icon.tsx`)
-
-Dorothy verified all 8 icon names — 100% clean:
-
-| Design element | Icon name | Verified |
-|---|---|---|
-| Pin in "Pinned Items" heading | `'pin'` | ✅ line 173 |
-| Info tooltip icons on sections | `'info'` | ✅ line 151 |
-| Row drill-down arrows | `'chevron-right'` | ✅ line 114 |
-| Table toolbar search | `'search'` | ✅ line 178 |
-| Favourite star next to student name | `'favourite-filled'` | ✅ lines 204-206 |
-| Ask Arbor button | `'sparkles'` | ✅ line 187 |
-| "+ Add" buttons | `'plus'` | ✅ line 174 |
-| Previous/Next button icons | `'arrow-right'` / `'arrow-left'` | ✅ line 104 |
-
----
-
-### Buttons — Full Variant Coverage (`src/components/button/Button.tsx`)
-
-Dorothy confirmed all 7 variants. Mapping to this design:
-
-```tsx
-{/* Primary CTA */}
-<Button variant="primary">Suggest Student Summary</Button>
-
-{/* Navigation buttons */}
-<Button variant="secondary" size="S" iconLeftName="arrow-left">Previous</Button>
-<Button variant="secondary" size="S" iconRightName="arrow-right">Next</Button>
-
-{/* Widget column buttons */}
-<Button variant="secondary">Record Planned Absence</Button>
-<Button variant="secondary" iconRightName="chevron-right">Communications & Notes</Button>
-
-{/* Icon-only toolbar (ALWAYS wrap in TooltipWrapper — WCAG 2.1 AA) */}
-<TooltipWrapper tooltipContent="Search">
-  <Button variant="tertiary" size="S" iconLeftName="search" iconLeftScreenReaderText="Search table" />
-</TooltipWrapper>
-
-{/* "All Sections" filter dropdown trigger */}
-<Button variant="dropdown" iconRightName="chevron-down">All Sections</Button>
-```
-
----
-
-### Tooltip Info Icons (`src/components/tooltip/TooltipWrapper.tsx`)
-
-The ⓘ icons next to "Student Contact Details", "Family, Guardians and Contacts", "Legal", "Parental Engagement".
-
-```tsx
-<TooltipWrapper tooltipContent="Contact details can be managed in the family record">
-  <button type="button" aria-label="More information">
-    <Icon name="info" size={16} />
-  </button>
-</TooltipWrapper>
-```
-
----
-
-### "All Sections" Filter Dropdown (`src/components/dropdown/Dropdown.tsx`)
-
-Use `Dropdown.SelectItem` with `closeAfterSelection={false}` for multi-toggle section visibility.
-
-```tsx
-<Dropdown>
-  <Dropdown.Trigger>
-    <Button variant="dropdown" iconRightName="chevron-down">All Sections</Button>
-  </Dropdown.Trigger>
-  <Dropdown.Content>
-    <Dropdown.SelectItem selected={true} onSelectChange={() => {}} closeAfterSelection={false}>
-      Identity
-    </Dropdown.SelectItem>
-    <Dropdown.SelectItem selected={true} onSelectChange={() => {}} closeAfterSelection={false}>
-      Student Contact Details
-    </Dropdown.SelectItem>
-  </Dropdown.Content>
-</Dropdown>
-```
-
----
-
-### Table — Education & Employment Section (`src/components/table/Table.tsx`)
-
-The compact data grid in the Education section. Dorothy confirmed `tableTheme="tidy"` (line 39 + line 114), `Table.HideColumnsDropdown` (line 218), `Table.RowCountInfo` (line 216).
-
-```tsx
-<Table
-  tableTheme="tidy"
-  headerContent={
-    <>
-      <Table.HideColumnsDropdown />
-      <TooltipWrapper tooltipContent="Search">
-        <Button variant="tertiary" size="S" iconLeftName="search" iconLeftScreenReaderText="Search" />
-      </TooltipWrapper>
-    </>
-  }
-  footerContent={<Table.RowCountInfo />}
-  columnDefs={[
-    { field: 'institution', headerName: 'Institution' },
-    { field: 'type', headerName: 'Type' },
-  ]}
-/>
-```
-
-⚠️ **GOTCHA**: `headerContent` must be TRUTHY for the header to render at all. `hasSearch={true}` alone does nothing without truthy `headerContent`.
-
----
-
-### UserDropdown (`src/components/userDropdown/UserDropdown.tsx`)
-
-The user avatar in the top nav. `variant="dark"` for dark nav bar.
-
-```tsx
-<UserDropdown
-  variant="dark"
-  user={{ name: 'Amee Morris', subtitle: 'Administrator' }}
-  onSignOut={handleSignOut}
-/>
-```
-
----
-
-### SearchBar (`src/components/searchBar/SearchBar.tsx`)
-
-The global search in the top nav. Dorothy confirmed exported at `src/index.ts` line 43.
-
-```tsx
-<SearchBar placeholderText="Search" hoverText="Search" />
-```
-
----
-
-## Section 2: Almost There — Minor Issues or Gotchas
-
-### Section — Cannot Combine Info Tooltip + Add Button Simultaneously
-
-**What exists:** `Section` has one button slot (`buttonText`/`buttonOnClick`), and `titleIconName` renders a non-interactive `<Icon>` only.
-
-**What's needed:** Multiple sections need the pattern: `Title [ⓘ tooltip] [+ Add button]`.
-
-**The gap:** Dorothy verified — `SectionProps` at lines 9–21 has **no `headerRightContent?: ReactNode` prop**. This is a genuine API gap, not Sophia guessing.
-
-**The fix:** Add `headerRightContent?: ReactNode` to `Section` as a fully backward-compatible new prop. **Effort: Low.**
-
-**Workaround:** Compose headings manually using `Heading` + `Heading.InnerContainer` + your own collapse state management.
-
----
-
-### Table — No Link-Style Date Cell Renderer
-
-The "Education & Employment" table shows dates like "01 Sep 2018 – ongoing" in green text-link style. No `dsLinkCellRenderer` is registered.
-
-**The fix:** Use `cellRenderer: 'dsButtonCellRenderer'` with `variant: 'text-link'` params, or write a thin custom cell renderer for the Dates column.
-
-**Effort:** Low.
-
----
-
-### Breadcrumbs — Must Be Composed from Primitives
-
-No `Breadcrumbs` component (already tracked in **MIS-69957** from Daily Attendance assessment).
-
-**Workaround:**
-```tsx
-<nav aria-label="Breadcrumb">
-  <ol className="ds-student-profile__breadcrumbs">
-    <li><Button variant="text-link">Students</Button></li>
-    <li aria-hidden="true"><Separator orientation="vertical" decorative /></li>
-    <li><Button variant="text-link">Browse Students</Button></li>
-    <li aria-hidden="true"><Separator orientation="vertical" decorative /></li>
-    <li><Button variant="text-link">Christopher Longbottom</Button></li>
-    <li aria-hidden="true"><Separator orientation="vertical" decorative /></li>
-    <li>
-      <span aria-current="page">Student Profile</span>
-      <Icon name="arrow-up-right" size={12} />
-    </li>
-  </ol>
-</nav>
-```
-
----
-
-## Section 3: Build It From Scratch — These Don't Exist Yet
-
-### PropertyRow / DescriptionList — HIGHEST PRIORITY MISSING COMPONENT
-
-Picture it: Sicily again. Every single room in my mother's house had furniture. But the DESK was missing. You cannot study in an empty room.
-
-The **entire main content area** of this page is built from "Label | Value >" rows. Without a `PropertyRow` component, every page consuming this pattern writes raw `<dl>/<dt>/<dd>` with custom CSS. This pattern appears on EVERY Arbor MIS profile and detail page.
-
-**What it needs:**
-- `label: string` — left column label
-- `value: ReactNode` — right column content (strings, links, addresses, tags)
-- `onClick?: () => void` — optional drill-down (renders `chevron-right` on right)
-- `rightLabel?: string` — optional date/meta far right (as in Pinned Items rows)
-
-**Effort:** Medium. Enormous ROI — unlocks every MIS profile page.
-
----
-
-### Calendar / Schedule Widget
-
-The time-blocked class schedule in the right column. No `CalendarWidget` or `ScheduleList` exists. `DatePicker` is a form input — completely the wrong component class for a display schedule.
-
-**Effort:** Medium. Likely app-level rather than library.
-
----
-
-### Top Navigation Bar
-
-Already tracked as **MIS-69959**. Individual primitives exist (`SearchBar`, `Button`, `UserDropdown`) but no container layout shell.
-
----
-
-### Left Side Navigation Panel
-
-Already tracked as **MIS-69960**. Collapsible tree with 20+ items, active states, favourite toggles, notification badges.
-
----
-
-### Notification Badge
-
-Already tracked as **MIS-69958**. Circular count overlay on nav items. `Tag` is rectangular — not suitable.
-
----
-
-### Breadcrumbs (Library Component)
-
-Already tracked as **MIS-69957**. Per-page composition workaround works; library component needed for consistency.
-
----
-
-## Section 4: Tricky Bits — Pay Attention Here
-
-### 1. Section `headerRightContent` Gap — First Build Blocker You'll Hit
-
-Every section except Identity and Pinned Items needs an info tooltip AND an Add button in the header. Current `Section` supports one button slot. Either patch `Section` first, or compose all headings manually.
-
-### 2. `favourite-filled` Must Have Accessible Context
-
-If the star next to the student name is interactive (toggle favourite), it must be a `<button>` with `aria-pressed`. If display-only, wrap with `aria-hidden`. A naked `<Icon>` with no accessible context fails WCAG.
-
-### 3. `tableTheme` Is Typed as `string`
-
-Dorothy flagged: `tableTheme?: string` (line 39) accepts any string. Only `"tidy"` has a code path (line 114). Don't pass `tableTheme="compact"` and wonder why nothing changes.
-
-### 4. `headerContent` Must Be Truthy for Table Header
-
-If you want the table header (Hide dropdown, toolbar icons), pass truthy `headerContent`. `hasSearch={true}` alone does nothing.
-
-### 5. Tag Is Not Interactive
-
-If student labels (Disadvantaged, FSM, etc.) need to be clickable, `Tag` cannot do it — it's a presentational `<span>`. Use `Pill` for toggle/filter behavior, or a styled `Button` if navigation is needed.
-
----
-
-## Section 5: The Verdict
-
-Picture it: Sicily, 1967. My mother finally finished furnishing that house. Sitting room? Perfect. Kitchen? Perfect. Bedrooms? Perfect. The only room missing furniture was the study — walls, floor, ceiling were there. But no desk, no shelves, no chair. You cannot study in an empty room.
-
-That is this page. The container is perfect. The primitives are all there. But the DESK — the `PropertyRow` component — is missing. Without it, you are building every data section by hand.
-
-### Is It Buildable With Our Existing Components?
-
-**Mostly YES. High confidence for all interactive elements. One major composition gap (`PropertyRow`) and one Section API limitation to patch first.**
-
-### Summary Table
-
-| Design Element | Library Component | Status |
-|---|---|---|
-| Page H1 + action button | `Heading` + `Heading.InnerContainer` + `Button` | ✅ Ready |
-| Student avatar | `Avatar size="small" initials="CL"` | ✅ Ready |
-| Tags row | `Tag` — 8 verified colors | ✅ Ready |
-| Section headings (simple) | `Section` — all props verified | ✅ Ready |
-| Separator / dividers | `Separator decorative` | ✅ Ready |
-| Icon usage (all 8 names) | `Icon` — all verified | ✅ Ready |
-| Buttons (all variants) | `Button` — all 7 verified | ✅ Ready |
-| Tooltip info icons | `TooltipWrapper` + `Icon name="info"` | ✅ Ready |
-| "All Sections" filter dropdown | `Dropdown` + `Dropdown.SelectItem` | ✅ Ready |
-| Compact data table | `Table tableTheme="tidy"` | ✅ Ready |
-| Table Hide dropdown | `Table.HideColumnsDropdown` | ✅ Ready |
-| Table row count | `Table.RowCountInfo` | ✅ Ready |
-| UserDropdown (nav bar) | `UserDropdown variant="dark"` | ✅ Ready |
-| Global search | `SearchBar` | ✅ Ready |
-| Breadcrumbs (this instance) | Compose: `Button text-link` + `Separator` | 🔧 Minor work |
-| Section: tooltip icon + Add button combo | Needs `headerRightContent` on Section | 🔧 Section patch needed |
-| Link-style date cell in table | Custom `cellRenderer` | 🔧 Minor work |
-| List property rows (entire page content) | `PropertyRow` — does not exist | 🆕 High priority |
-| Calendar/schedule widget | No equivalent | 🆕 New (app-level) |
-| Top navigation bar | MIS-69959 — existing ticket | 🆕 Existing ticket |
-| Left side navigation | MIS-69960 — existing ticket | 🆕 Existing ticket |
-| Notification badge | MIS-69958 — existing ticket | 🆕 Existing ticket |
-| Breadcrumbs library component | MIS-69957 — existing ticket | 🆕 Existing ticket |
-
-### What Actually Needs Work
-
-| Item | Where It Lives | Effort |
-|---|---|---|
-| `Section` `headerRightContent` prop | `src/components/section/Section.tsx` | Low |
-| Link cell renderer for date column | Page-level custom renderer | Low |
-| Breadcrumbs (this page) | Page-level composition | Low |
-| `PropertyRow` component | New library component | Medium |
-| `CalendarWidget` | New library component (or app-level) | Medium |
-| Breadcrumbs library component | MIS-69957 | Medium |
-| Notification Badge | MIS-69958 | Low |
-| TopNavigationBar | MIS-69959 | High |
-| SideNavigation | MIS-69960 | High |
-
-### Summary Verdict
-
-**14 out of 23 elements** can be built directly with current library components. 3 elements need minor composition or a small Section patch. 6 require new work — 4 already have Jira tickets.
-
-**New items unique to this page:**
-- `PropertyRow` — #1 priority new component, will unlock every MIS profile page
-- `CalendarWidget` — display-only schedule widget, likely app-level
-
-**Recommendation:** Patch `Section` (low effort, do it first). Plan `PropertyRow` as the next library component — enormous reuse value across the entire Arbor MIS product.
-
----
-
-## Appendix: Files Referenced in This Assessment
-
-*Every file Dorothy read to verify claims. This assessment is grounded in actual source code.*
-
-- `src/index.ts`
-- `src/components/section/Section.tsx`
-- `src/components/icon/allowedIcons.tsx`
-- `src/components/avatar/Avatar.tsx`
-- `src/components/tag/Tag.tsx`
-- `src/components/button/Button.tsx`
-- `src/components/table/Table.tsx`
-
----
-
-*Analysis by Sophia Petrillo, Componentspert 👜, fact-checked by Dorothy Zbornak 🔍*
-*Powered by Claude Code 🐺*