Genericise template stories, fix TopBar icons, and add DetailPage
Replace domain-specific (education/PDP) recipe stories with generic content. Fix TopBar action buttons using properly styled light-on-dark buttons instead of invisible IconButton tertiary. Use the real NSW waratah SVG logo. Add shared _story-helpers for TopBar actions and logo. Add DetailPage template for single-record/profile/document views with constrained width and tab support. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -12,12 +12,8 @@ import { Select } from '@/components/atoms/Select/Select'
|
||||
import { Button } from '@/components/atoms/Button/Button'
|
||||
import { Badge } from '@/components/atoms/Badge/Badge'
|
||||
import { Avatar } from '@/components/atoms/Avatar/Avatar'
|
||||
import { IconButton } from '@/components/atoms/IconButton/IconButton'
|
||||
import { Menu, Bell, Home, FileText, LayoutGrid, Users, Link, ArrowRight } from 'lucide-react'
|
||||
|
||||
const NswLogo = () => (
|
||||
<div className="flex size-7 items-center justify-center rounded bg-white/20 text-caption font-bold text-white">NSW</div>
|
||||
)
|
||||
import { NswLogo, TopBarAction } from '@/components/templates/_story-helpers'
|
||||
import { Menu, Bell, Home, FileText, LayoutGrid, Users, Link, ArrowRight, Settings } from 'lucide-react'
|
||||
|
||||
const meta: Meta<typeof FormPage> = {
|
||||
title: 'Templates/FormPage',
|
||||
@@ -36,35 +32,34 @@ export default meta
|
||||
|
||||
type Story = StoryObj<typeof FormPage>
|
||||
|
||||
export const PDPDetails: Story = {
|
||||
name: 'PDP Form',
|
||||
export const WithStepper: Story = {
|
||||
name: 'With stepper',
|
||||
render: () => {
|
||||
const [collapsed, setCollapsed] = useState(false)
|
||||
return (
|
||||
<AppShell
|
||||
topBar={
|
||||
<TopBar
|
||||
title="Performance and development plan"
|
||||
leading={<IconButton icon={<Menu />} aria-label="Menu" variant="tertiary" onClick={() => setCollapsed(!collapsed)} />}
|
||||
title="Application Portal"
|
||||
leading={<TopBarAction icon={<Menu />} label="Menu" onClick={() => setCollapsed(!collapsed)} />}
|
||||
logo={<NswLogo />}
|
||||
>
|
||||
<IconButton icon={<Bell />} aria-label="Notifications" variant="tertiary" />
|
||||
<Avatar initials="DW" size="sm" />
|
||||
<TopBarAction icon={<Bell />} label="Notifications" />
|
||||
<Avatar initials="SR" size="sm" />
|
||||
</TopBar>
|
||||
}
|
||||
sideNav={
|
||||
<SideNav collapsed={collapsed}>
|
||||
<SideNavItem icon={<Home />}>My status</SideNavItem>
|
||||
<SideNavItem icon={<Users />}>My details</SideNavItem>
|
||||
<SideNavItem icon={<Home />}>Home</SideNavItem>
|
||||
<SideNavItem icon={<Users />}>Profile</SideNavItem>
|
||||
<SideNavItem icon={<LayoutGrid />}>Workspace</SideNavItem>
|
||||
<SideNavItem icon={<Link />}>Resources</SideNavItem>
|
||||
<SideNavItem icon={<FileText />}>My documents & links</SideNavItem>
|
||||
<SideNavItem icon={<FileText />}>Documents</SideNavItem>
|
||||
<SideNavDivider />
|
||||
<SideNavGroup icon={<FileText />} label="PDP" defaultOpen active>
|
||||
<SideNavItem active>My PDP</SideNavItem>
|
||||
<SideNavItem>PDP guide</SideNavItem>
|
||||
<SideNavItem>Management</SideNavItem>
|
||||
<SideNavItem>Useful links</SideNavItem>
|
||||
<SideNavGroup icon={<FileText />} label="Applications" defaultOpen active>
|
||||
<SideNavItem active>New application</SideNavItem>
|
||||
<SideNavItem>Guidelines</SideNavItem>
|
||||
<SideNavItem>History</SideNavItem>
|
||||
<SideNavItem>Support</SideNavItem>
|
||||
</SideNavGroup>
|
||||
</SideNav>
|
||||
@@ -73,10 +68,9 @@ export const PDPDetails: Story = {
|
||||
>
|
||||
<FormPage
|
||||
header={
|
||||
<PageHeader title="Siya Ram" subtitle="Role title goes here" theme="dark">
|
||||
<PageHeader title="New Application" subtitle="Submit your application for review" theme="dark">
|
||||
<div className="mt-2 flex items-center gap-4">
|
||||
<Badge variant="warning">Plan - In progress</Badge>
|
||||
<span className="text-small text-white/80">Date commenced: dd-mm-yyyy</span>
|
||||
<Badge variant="warning">In progress</Badge>
|
||||
</div>
|
||||
</PageHeader>
|
||||
}
|
||||
@@ -85,77 +79,60 @@ export const PDPDetails: Story = {
|
||||
<Select
|
||||
label=""
|
||||
variant="stacked"
|
||||
options={[{ value: '2026', label: '2026 - PDP Siya Ram' }]}
|
||||
options={[{ value: '2026', label: '2026 — Application draft' }]}
|
||||
defaultValue="2026"
|
||||
/>
|
||||
<Button variant="secondary">More actions</Button>
|
||||
</>
|
||||
}
|
||||
steps={[
|
||||
{ label: 'Your PDP details', status: 'current' },
|
||||
{ label: 'Create your PDP', status: 'upcoming' },
|
||||
{ label: 'Notify your PDP supervisor', status: 'upcoming' },
|
||||
{ label: 'Your details', status: 'current' },
|
||||
{ label: 'Supporting documents', status: 'upcoming' },
|
||||
{ label: 'Review & submit', status: 'upcoming' },
|
||||
]}
|
||||
>
|
||||
<Card variant="surface">
|
||||
<CardContent className="space-y-6 p-6">
|
||||
<div>
|
||||
<h2 className="text-h3 font-bold text-text">Welcome to your Performance and Development Plan (PDP)</h2>
|
||||
<h2 className="text-h3 font-bold text-text">Your details</h2>
|
||||
<p className="mt-2 text-body text-text-secondary">
|
||||
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.
|
||||
Provide the information below to begin your application. You can save and return at any time.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Alert variant="info" title="Your PDP details">
|
||||
Fill in the details below to get started with your PDP.
|
||||
<Alert variant="info" title="Before you start">
|
||||
Make sure you have your identification documents and contact details ready.
|
||||
</Alert>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Select
|
||||
label="PDP year"
|
||||
options={[
|
||||
{ value: '2026', label: '2026' },
|
||||
{ value: '2025', label: '2025' },
|
||||
]}
|
||||
defaultValue="2026"
|
||||
/>
|
||||
<Input label="Full name" placeholder="Enter your full name" />
|
||||
<Input label="Email address" type="email" placeholder="you@example.com" />
|
||||
|
||||
<div>
|
||||
<p className="text-body font-semibold text-text">Middle leader role(s)</p>
|
||||
<p className="mb-2 text-small text-text-secondary">Some text about middle leader roles</p>
|
||||
<p className="text-body font-semibold text-text">Role information</p>
|
||||
<p className="mb-2 text-small text-text-secondary">Select the role that best describes your position.</p>
|
||||
<Select
|
||||
label="Middle leader role type (optional)"
|
||||
label="Role type"
|
||||
options={[
|
||||
{ value: 'deputy', label: 'Deputy Principal' },
|
||||
{ value: 'head', label: 'Head Teacher' },
|
||||
{ value: 'asst', label: 'Assistant Principal' },
|
||||
{ value: 'manager', label: 'Manager' },
|
||||
{ value: 'coordinator', label: 'Coordinator' },
|
||||
{ value: 'specialist', label: 'Specialist' },
|
||||
]}
|
||||
defaultValue="deputy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-body font-semibold text-text">Add your PDP supervisor's details here</p>
|
||||
<p className="text-body font-semibold text-text">Supervisor details</p>
|
||||
<p className="mb-2 text-small text-text-secondary">
|
||||
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.
|
||||
Enter your supervisor's contact details for verification.
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
<Input label="PDP Supervisor's email" error="PDP Supervisor's email" defaultValue="dhoni.mahi@det.nsw.edu.au" />
|
||||
<Input label="PDP Supervisor work location" error="PDP Supervisor work location" defaultValue="Work location goes here" />
|
||||
<Input label="Supervisor email" type="email" placeholder="supervisor@example.com" />
|
||||
<Input label="Supervisor location" placeholder="Office or site name" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-body font-semibold text-text">Add your school or work location.</p>
|
||||
<p className="mb-2 text-small text-text-secondary">
|
||||
If you don't work in a school, add 'Education Office' as your work location.
|
||||
</p>
|
||||
<Input label="Your school or work location" error="Your school or work location" defaultValue="Work location goes here" />
|
||||
</div>
|
||||
|
||||
<p className="text-small text-text-secondary">
|
||||
<strong>Note:</strong> As the school leader, your principal can view all the POPs in the school.
|
||||
</p>
|
||||
<Input label="Work location" placeholder="Your primary work location" />
|
||||
|
||||
<div className="flex justify-start pt-2">
|
||||
<Button rightIcon={<ArrowRight size={18} />}>Proceed</Button>
|
||||
@@ -170,7 +147,7 @@ export const PDPDetails: Story = {
|
||||
}
|
||||
|
||||
export const SimpleForm: Story = {
|
||||
name: 'Simple Form (no stepper)',
|
||||
name: 'Simple form (no stepper)',
|
||||
render: () => (
|
||||
<FormPage
|
||||
header={<PageHeader title="Create Account" subtitle="Set up your profile to get started" />}
|
||||
@@ -182,8 +159,8 @@ export const SimpleForm: Story = {
|
||||
<Select
|
||||
label="Role"
|
||||
options={[
|
||||
{ value: 'teacher', label: 'Teacher' },
|
||||
{ value: 'principal', label: 'Principal' },
|
||||
{ value: 'viewer', label: 'Viewer' },
|
||||
{ value: 'editor', label: 'Editor' },
|
||||
{ value: 'admin', label: 'Administrator' },
|
||||
]}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user