`
- Include `aria-label` on icon-only buttons
- Use `lucide-react` for icons (already a dev dependency)
+- Compose pages using AppShell (TopBar + SideNav + content) as the outer layout
+- Use the spacing conventions (p-6 content padding, gap-6 between sections)
**Don't:**
- Hardcode colour hex values in component code
@@ -584,3 +1089,4 @@ import { Popover, PopoverTrigger, PopoverContent } from '@/components/molecules/
- Use CSS modules or styled-components
- Skip the `label` prop on form controls — all inputs must have visible labels
- Nest interactive elements (button inside button, link inside button)
+- Reference palette tokens (`text-blue-01`, `border-grey-03`) in component code — add a semantic token if one doesn't exist
diff --git a/src/components/organisms/SideNav/SideNav.tsx b/src/components/organisms/SideNav/SideNav.tsx
index 3c72551..e16d087 100644
--- a/src/components/organisms/SideNav/SideNav.tsx
+++ b/src/components/organisms/SideNav/SideNav.tsx
@@ -182,7 +182,7 @@ export const SideNavItem = forwardRef
(
const toggle = useCallback(() => setOpen((prev) => !prev), [])
const triggerStyles = cn(
- 'relative flex h-14 w-full items-center rounded-full transition-colors',
+ 'relative flex h-14 w-full items-center rounded-full text-left transition-colors',
'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info',
collapsed ? 'size-14 justify-center' : 'pl-4 pr-6',
active && collapsed
diff --git a/src/components/templates/AppShell/AppShell.stories.tsx b/src/components/templates/AppShell/AppShell.stories.tsx
new file mode 100644
index 0000000..9668cc2
--- /dev/null
+++ b/src/components/templates/AppShell/AppShell.stories.tsx
@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { AppShell } from './AppShell'
+import { TopBar } from '@/components/organisms/TopBar/TopBar'
+import { SideNav, SideNavItem, SideNavGroup, SideNavDivider } from '@/components/organisms/SideNav/SideNav'
+import { Avatar } from '@/components/atoms/Avatar/Avatar'
+import { IconButton } from '@/components/atoms/IconButton/IconButton'
+import { PageHeader } from '@/components/organisms/PageHeader/PageHeader'
+import { Menu, Search, Bell, Home, FileText, LayoutGrid, Settings, Users, Link } from 'lucide-react'
+
+const NswLogo = () => (
+ NSW
+)
+
+const meta: Meta = {
+ title: 'Templates/AppShell',
+ component: AppShell,
+ tags: ['autodocs', 'template'],
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Application shell layout that composes TopBar + SideNav + scrollable content area. All page templates should be rendered inside an AppShell.',
+ },
+ },
+ },
+}
+export default meta
+
+type Story = StoryObj
+
+const SampleTopBar = ({ onMenuClick }: { onMenuClick?: () => void }) => (
+ } aria-label="Toggle menu" variant="tertiary" onClick={onMenuClick} />}
+ logo={}
+ >
+ } aria-label="Search" variant="tertiary" />
+ } aria-label="Notifications" variant="tertiary" />
+
+
+)
+
+const SampleSideNav = ({ collapsed }: { collapsed: boolean }) => (
+
+ } active>My status
+ }>My details
+ }>Workspace
+
+ } label="PDP" defaultOpen>
+ My PDP
+ PDP guide
+ Management
+
+ }>Resources
+ }>Settings
+
+)
+
+export const Default: Story = {
+ render: () => {
+ const [collapsed, setCollapsed] = useState(false)
+ return (
+ setCollapsed(!collapsed)} />}
+ sideNav={}
+ sideNavCollapsed={collapsed}
+ >
+
+
+
+ Page content goes here
+
+
+
+ Content area is wider with collapsed sidebar
+
+
NSW
+)
+
+const meta: Meta = {
+ title: 'Templates/DashboardPage',
+ component: DashboardPage,
+ tags: ['autodocs', 'template'],
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Dashboard page template with stat summary row and a responsive 2-column content grid. Use inside AppShell for the full page layout.',
+ },
+ },
+ },
+}
+export default meta
+
+type Story = StoryObj
+
+export const ProfessionalPathway: Story = {
+ name: 'Professional Pathway Dashboard',
+ render: () => {
+ const [collapsed, setCollapsed] = useState(false)
+ return (
+ } aria-label="Menu" variant="tertiary" onClick={() => setCollapsed(!collapsed)} />}
+ logo={}
+ >
+ } aria-label="Notifications" variant="tertiary" />
+
+
+ }
+ sideNav={
+
+ } active>My status
+ }>My details
+ }>Workspace
+ }>Resources
+
+ }>Accreditation
+
+ }
+ sideNavCollapsed={collapsed}
+ >
+
+
+ Maroubra Junction Public School
+
+
+ }
+ >
+
+
+ Steps to be taken
+
+
+
+
+ Ensure you have completed the minimum requirements of your teaching degree as stated by NESA.
+ Details about teaching degree requirements.
+
+
+ Apply for your Working With Children Check (WWCC).
+ Information about WWCC application.
+
+
+ Create an eTAMS account and submit required documentation to NESA.
+ Steps for eTAMS registration.
+
+
+ Pay your NESA fee.
+ Payment details.
+
+
+ Complete Mandatory Training.
+ Training module details.
+
+
+
+
+
+
+
+
+ Mandatory Training Reminders
+
+
+
+ Aboriginal Cultural Education
+ }>Certified
+
+
+ Please consult the Mandatory Training Hub for role specific training, or contact the MyPL Helpdesk for queries regarding training.
+
+
+
+
+
+
+
+
+
+ Hi I am Martha. I got my conditional accreditation recently through NESA. These links really helped me through the process.
+
+
+
+
+
+
+
+
21h
+
Total hours logged
+
Target 100h
+
+
+
+
+
18h
+
NESA Registered PD
+
Target 60h
+
+
+
+
+
5
+
Activities logged
+
+ {header}
+
+
+ {stats &&
{stats}
}
+
+
+ {children}
+
+
+
NSW
+)
+
+const meta: Meta = {
+ title: 'Templates/FormPage',
+ component: FormPage,
+ tags: ['autodocs', 'template'],
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Form page template with optional vertical stepper and constrained-width form content. Use inside AppShell for the full page layout.',
+ },
+ },
+ },
+}
+export default meta
+
+type Story = StoryObj
+
+export const PDPDetails: Story = {
+ name: 'PDP Form',
+ render: () => {
+ const [collapsed, setCollapsed] = useState(false)
+ return (
+ } aria-label="Menu" variant="tertiary" onClick={() => setCollapsed(!collapsed)} />}
+ logo={}
+ >
+ } aria-label="Notifications" variant="tertiary" />
+
+
+ }
+ sideNav={
+
+ }>My status
+ }>My details
+ }>Workspace
+ }>Resources
+ }>My documents & links
+
+ } label="PDP" defaultOpen active>
+ My PDP
+ PDP guide
+ Management
+ Useful links
+ Support
+
+
+ }
+ sideNavCollapsed={collapsed}
+ >
+
+
+ Plan - In progress
+ Date commenced: dd-mm-yyyy
+
+
+ }
+ actions={
+ <>
+
+
+
+ }
+ steps={[
+ { label: 'Your PDP details', status: 'current' },
+ { label: 'Create your PDP', status: 'upcoming' },
+ { label: 'Notify your PDP supervisor', status: 'upcoming' },
+ ]}
+ >
+
+
+
+
Welcome to your Performance and Development Plan (PDP)
+
+ Once your goals are drafted and you're ready to share them, you can notify your PDP supervisor. Head to the Digital PDP page on the intranet to find key resources to help you complete your PDP.
+
+
+
+
+
+
Middle leader role(s)
+
Some text about middle leader roles
+
+
+
+
+
Add your PDP supervisor's details here
+
+ Note: if your supervisor's name does not appear when you search for them, ask them to access the Digital PDP using their credentials, then try again.
+
+
+
+
+
+
+
+
+
Add your school or work location.
+
+ If you don't work in a school, add 'Education Office' as your work location.
+
+
+
+
+
+ Note: As the school leader, your principal can view all the POPs in the school.
+
+
+
+ }>Proceed
+
+
+
+
+
+
+
+
+ ),
+}
diff --git a/src/components/templates/FormPage/FormPage.tsx b/src/components/templates/FormPage/FormPage.tsx
new file mode 100644
index 0000000..e4e7e16
--- /dev/null
+++ b/src/components/templates/FormPage/FormPage.tsx
@@ -0,0 +1,81 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+export interface FormPageStep {
+ label: string
+ status: 'complete' | 'current' | 'upcoming'
+}
+
+export interface FormPageProps extends HTMLAttributes {
+ /** PageHeader or custom header section */
+ header?: ReactNode
+ /** Action bar above the form content (e.g. dropdowns, buttons) */
+ actions?: ReactNode
+ /** Vertical stepper steps — renders a progress indicator alongside the form */
+ steps?: FormPageStep[]
+ /** Form content area */
+ children: ReactNode
+}
+
+const StepIndicator = ({ step, index }: { step: FormPageStep; index: number }) => {
+ const base = 'flex size-8 shrink-0 items-center justify-center rounded-full text-small font-bold'
+ const styles = {
+ complete: 'bg-success text-white',
+ current: 'bg-info text-white',
+ upcoming: 'bg-grey-04 text-text-secondary',
+ }
+
+ return (
+
+
+ {step.status === 'complete' ? (
+
+ ) : (
+ index + 1
+ )}
+
+
+ {step.label}
+
+
+ {header}
+
+ {actions && (
+
+ {actions}
+
+ )}
+
+
+
+ {steps ? (
+
+
+
{children}
+
+ ) : (
+ children
+ )}
+
+
+
NSW
+)
+
+const ActivityItem = ({ title, hours, date }: { title: string; hours: string; date: string }) => (
+
+
+
+ NSW DoE
+ }>Registered
+ S1
+ s4
+ S6
+
+
+ Lorem dolor sit amet, consectetur adipiscing elit. Donec condimentum nulla gravida pretium libero. Proin in felis consectetur, laoreet est eu, consectetur mi.
+
+
+ Maroubra Junction Public School
+
+
+ }
+ stats={
+ <>
+
+
+
+
+
+
+
21h
+
Total hours logged
+
Target 100h
+
+
+
+
+
18h
+
NESA Registered PD
+
Target 60h
+
+
+
+
+
5
+
Activities logged
+
+
+
My PD Log
+
Log every professional learning activity — NESA Registered and school-based.
+
+
}>Add Activity
+
+
Activities
+ }>Add
+
+ }
+ >
+
+
+
+ ),
+}
diff --git a/src/components/templates/ListPage/ListPage.tsx b/src/components/templates/ListPage/ListPage.tsx
new file mode 100644
index 0000000..2ca7301
--- /dev/null
+++ b/src/components/templates/ListPage/ListPage.tsx
@@ -0,0 +1,36 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+export interface ListPageProps extends HTMLAttributes {
+ /** PageHeader or custom header section */
+ header?: ReactNode
+ /** Row of stat cards or summary widgets */
+ stats?: ReactNode
+ /** Section header area with title and optional action (e.g. "Add Activity" button) */
+ listHeader?: ReactNode
+ /** Scrollable list content area */
+ children: ReactNode
+}
+
+export const ListPage = forwardRef(
+ ({ header, stats, listHeader, className, children, ...props }, ref) => {
+ return (
+
+ {header}
+
+
+ {stats &&
{stats}
}
+
+
+ {listHeader}
+
+
+ {children}
+
+
+
+