Richie
047d913960
Formatting-only changes across all component and story files. No logic or behaviour changes — only whitespace, line breaks, and trailing commas. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
434 lines
16 KiB
TypeScript
434 lines
16 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
||
import { Typography } from './Typography';
|
||
|
||
const meta: Meta<typeof Typography> = {
|
||
title: 'Atoms/Typography',
|
||
component: Typography,
|
||
tags: ['autodocs'],
|
||
parameters: {
|
||
layout: 'padded',
|
||
design: {
|
||
type: 'figma',
|
||
url: 'https://www.figma.com/design/3t6fpT5inh7zzjxQdW8U5p/Design-System---Template?node-id=23-30',
|
||
},
|
||
},
|
||
argTypes: {
|
||
variant: {
|
||
control: 'select',
|
||
options: [
|
||
'displayHero',
|
||
'display1',
|
||
'display2',
|
||
'display3',
|
||
'displaySm',
|
||
'h1',
|
||
'h2',
|
||
'h3',
|
||
'h4',
|
||
'h5',
|
||
'h6',
|
||
'bodyLg',
|
||
'body1',
|
||
'body2',
|
||
'bodyXs',
|
||
'labelLg',
|
||
'label',
|
||
'labelSm',
|
||
'caption',
|
||
'captionSm',
|
||
'overline',
|
||
'overlineSm',
|
||
],
|
||
description: 'Typography variant — 21 variants across 6 categories',
|
||
table: { defaultValue: { summary: 'body1' } },
|
||
},
|
||
color: {
|
||
control: 'select',
|
||
options: ['textPrimary', 'textSecondary', 'textDisabled', 'primary', 'secondary', 'error'],
|
||
},
|
||
maxLines: { control: 'number' },
|
||
gutterBottom: { control: 'boolean' },
|
||
},
|
||
};
|
||
|
||
export default meta;
|
||
type Story = StoryObj<typeof Typography>;
|
||
|
||
const SAMPLE = 'Discover, Explore, and Plan Funerals in Minutes, Not Hours';
|
||
|
||
// ─── Default ────────────────────────────────────────────────────────────────
|
||
|
||
export const Default: Story = {
|
||
args: {
|
||
children:
|
||
'Funeral Arranger helps families find transparent, affordable funeral services across Australia.',
|
||
},
|
||
};
|
||
|
||
// ─── Display (Noto Serif SC, Regular) ───────────────────────────────────────
|
||
|
||
/** 5 display levels — Noto Serif SC Regular. For hero/marketing text. All scale down on mobile. */
|
||
export const Display: Story = {
|
||
name: 'Display (Serif)',
|
||
render: () => (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||
<div>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
displayHero — 80px
|
||
</Typography>
|
||
<Typography variant="displayHero">{SAMPLE}</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
display1 — 64px
|
||
</Typography>
|
||
<Typography variant="display1">{SAMPLE}</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
display2 — 52px
|
||
</Typography>
|
||
<Typography variant="display2">{SAMPLE}</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
display3 — 40px
|
||
</Typography>
|
||
<Typography variant="display3">{SAMPLE}</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
displaySm — 32px
|
||
</Typography>
|
||
<Typography variant="displaySm">{SAMPLE}</Typography>
|
||
</div>
|
||
</div>
|
||
),
|
||
};
|
||
|
||
// ─── Headings (Montserrat, Bold) ────────────────────────────────────────────
|
||
|
||
/** 6 heading levels — Montserrat Bold. For content structure. All scale down on mobile. */
|
||
export const Headings: Story = {
|
||
name: 'Headings (Sans-serif)',
|
||
render: () => (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||
<div>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
h1 — 36px
|
||
</Typography>
|
||
<Typography variant="h1">{SAMPLE}</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
h2 — 30px
|
||
</Typography>
|
||
<Typography variant="h2">{SAMPLE}</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
h3 — 24px
|
||
</Typography>
|
||
<Typography variant="h3">{SAMPLE}</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
h4 — 20px
|
||
</Typography>
|
||
<Typography variant="h4">{SAMPLE}</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
h5 — 18px
|
||
</Typography>
|
||
<Typography variant="h5">{SAMPLE}</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
h6 — 16px
|
||
</Typography>
|
||
<Typography variant="h6">{SAMPLE}</Typography>
|
||
</div>
|
||
</div>
|
||
),
|
||
};
|
||
|
||
// ─── Body (Montserrat, Medium) ──────────────────────────────────────────────
|
||
|
||
/** 4 body sizes — Montserrat Medium (500). For content text. */
|
||
export const Body: Story = {
|
||
name: 'Body Text',
|
||
render: () => (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 640 }}>
|
||
<div>
|
||
<Typography variant="overline" gutterBottom>
|
||
bodyLg — 18px
|
||
</Typography>
|
||
<Typography variant="bodyLg">
|
||
Planning a funeral is one of the most difficult tasks a family faces. Funeral Arranger is
|
||
here to help you navigate this process with care and transparency.
|
||
</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="overline" gutterBottom>
|
||
body1 (default) — 16px
|
||
</Typography>
|
||
<Typography variant="body1">
|
||
Compare funeral directors in your area, view transparent pricing, and make informed
|
||
decisions at your own pace. Every family deserves clarity during this time.
|
||
</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="overline" gutterBottom>
|
||
body2 (small) — 14px
|
||
</Typography>
|
||
<Typography variant="body2">
|
||
Prices shown are indicative and may vary based on your specific requirements. Contact the
|
||
funeral director directly for a detailed quote.
|
||
</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="overline" gutterBottom>
|
||
bodyXs — 12px
|
||
</Typography>
|
||
<Typography variant="bodyXs">
|
||
Terms and conditions apply. Funeral Arranger is a comparison service and does not directly
|
||
provide funeral services. ABN 12 345 678 901.
|
||
</Typography>
|
||
</div>
|
||
</div>
|
||
),
|
||
};
|
||
|
||
// ─── Label, Caption, Overline ───────────────────────────────────────────────
|
||
|
||
/** UI text variants — labels (medium 500), captions (regular 400), overlines (semibold 600 uppercase) */
|
||
export const UIText: Story = {
|
||
name: 'UI Text (Label / Caption / Overline)',
|
||
render: () => (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||
<div>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
labelLg — 16px medium
|
||
</Typography>
|
||
<Typography variant="labelLg" display="block">
|
||
Form label or section label
|
||
</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
label — 14px medium
|
||
</Typography>
|
||
<Typography variant="label" display="block">
|
||
Default form label
|
||
</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
labelSm — 12px medium
|
||
</Typography>
|
||
<Typography variant="labelSm" display="block">
|
||
Compact label or tag text
|
||
</Typography>
|
||
</div>
|
||
<div style={{ marginTop: 8 }}>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
caption — 12px regular
|
||
</Typography>
|
||
<Typography variant="caption" display="block">
|
||
Fine print, timestamps, metadata
|
||
</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
captionSm — 11px regular
|
||
</Typography>
|
||
<Typography variant="captionSm" display="block">
|
||
Compact metadata, footnotes
|
||
</Typography>
|
||
</div>
|
||
<div style={{ marginTop: 8 }}>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
overline — 12px semibold uppercase
|
||
</Typography>
|
||
<Typography variant="overline" display="block">
|
||
Section overline
|
||
</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="captionSm" color="textSecondary">
|
||
overlineSm — 11px semibold uppercase
|
||
</Typography>
|
||
<Typography variant="overlineSm" display="block">
|
||
Compact overline
|
||
</Typography>
|
||
</div>
|
||
</div>
|
||
),
|
||
};
|
||
|
||
// ─── Colours ────────────────────────────────────────────────────────────────
|
||
|
||
export const Colours: Story = {
|
||
name: 'Colours',
|
||
render: () => (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||
<Typography color="textPrimary">Text Primary — main body text (neutral.800)</Typography>
|
||
<Typography color="textSecondary">Text Secondary — helper text (neutral.600)</Typography>
|
||
<Typography color="textDisabled">Text Disabled — inactive (neutral.400)</Typography>
|
||
<Typography color="primary">Primary — brand emphasis (brand.600)</Typography>
|
||
<Typography color="secondary">Secondary — neutral emphasis (neutral.600)</Typography>
|
||
<Typography color="error">Error — validation errors (red.600)</Typography>
|
||
<Typography color="warning.main">Warning — cautionary (amber.600)</Typography>
|
||
<Typography color="success.main">Success — confirmations (green.600)</Typography>
|
||
<Typography color="info.main">Info — helpful tips (blue.600)</Typography>
|
||
</div>
|
||
),
|
||
};
|
||
|
||
// ─── Font Families ──────────────────────────────────────────────────────────
|
||
|
||
/** The two font families: serif for display, sans-serif for everything else */
|
||
export const FontFamilies: Story = {
|
||
name: 'Font Families',
|
||
render: () => (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
|
||
<div>
|
||
<Typography variant="overline" gutterBottom>
|
||
Display font — Noto Serif SC (Regular 400)
|
||
</Typography>
|
||
<Typography variant="display3">Warm, trustworthy, and professional</Typography>
|
||
<Typography variant="caption" color="textSecondary" sx={{ mt: 1 }}>
|
||
Used exclusively for display variants (hero through sm). Regular weight — serif carries
|
||
inherent visual weight at large sizes.
|
||
</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="overline" gutterBottom>
|
||
Body font — Montserrat
|
||
</Typography>
|
||
<Typography variant="h3" gutterBottom>
|
||
Clean, modern, and highly readable
|
||
</Typography>
|
||
<Typography>
|
||
Used for all headings (h1–h6), body text, labels, captions, and UI elements. Headings use
|
||
Bold (700), body uses Medium (500), captions use Regular (400).
|
||
</Typography>
|
||
</div>
|
||
</div>
|
||
),
|
||
};
|
||
|
||
// ─── Max Lines ──────────────────────────────────────────────────────────────
|
||
|
||
export const MaxLines: Story = {
|
||
name: 'Max Lines (Truncation)',
|
||
render: () => (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 24, maxWidth: 400 }}>
|
||
<div>
|
||
<Typography variant="label" gutterBottom>
|
||
maxLines=1
|
||
</Typography>
|
||
<Typography maxLines={1}>
|
||
H. Parsons Funeral Directors — trusted by Australian families for over 30 years, providing
|
||
compassionate and transparent funeral services.
|
||
</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="label" gutterBottom>
|
||
maxLines=2
|
||
</Typography>
|
||
<Typography maxLines={2}>
|
||
H. Parsons Funeral Directors — trusted by Australian families for over 30 years, providing
|
||
compassionate and transparent funeral services across metropolitan and regional areas.
|
||
</Typography>
|
||
</div>
|
||
</div>
|
||
),
|
||
};
|
||
|
||
// ─── Realistic Content ──────────────────────────────────────────────────────
|
||
|
||
export const RealisticContent: Story = {
|
||
name: 'Realistic Content',
|
||
render: () => (
|
||
<div style={{ maxWidth: 640, display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||
<Typography variant="overline">Funeral planning</Typography>
|
||
<Typography variant="display3">Compare funeral services in your area</Typography>
|
||
<Typography variant="bodyLg" color="textSecondary">
|
||
Transparent pricing and service comparison to help you make informed decisions during a
|
||
difficult time.
|
||
</Typography>
|
||
<Typography variant="h2" sx={{ mt: 2 }}>
|
||
How it works
|
||
</Typography>
|
||
<Typography>
|
||
Enter your suburb or postcode to find funeral directors near you. Each listing includes a
|
||
full price breakdown, service inclusions, and reviews from families who have used their
|
||
services.
|
||
</Typography>
|
||
<Typography variant="h3" sx={{ mt: 1 }}>
|
||
Step 1: Browse packages
|
||
</Typography>
|
||
<Typography>
|
||
Compare packages side by side. Each package clearly shows what is and isn't included, so
|
||
there are no surprises.
|
||
</Typography>
|
||
<Typography variant="caption" color="textSecondary" sx={{ mt: 2 }}>
|
||
Prices are indicative and current as of March 2026. Contact the funeral director for a
|
||
binding quote.
|
||
</Typography>
|
||
</div>
|
||
),
|
||
};
|
||
|
||
// ─── Complete Scale ─────────────────────────────────────────────────────────
|
||
|
||
/** All 21 variants in a single view — matches the Figma "Fonts - Desktop" layout */
|
||
export const CompleteScale: Story = {
|
||
name: 'Complete Scale (All 21 Variants)',
|
||
render: () => {
|
||
const variants = [
|
||
{ variant: 'displayHero', label: 'display/hero — 80px' },
|
||
{ variant: 'display1', label: 'display/1 — 64px' },
|
||
{ variant: 'display2', label: 'display/2 — 52px' },
|
||
{ variant: 'display3', label: 'display/3 — 40px' },
|
||
{ variant: 'displaySm', label: 'display/sm — 32px' },
|
||
{ variant: 'h1', label: 'heading/1 — 36px' },
|
||
{ variant: 'h2', label: 'heading/2 — 30px' },
|
||
{ variant: 'h3', label: 'heading/3 — 24px' },
|
||
{ variant: 'h4', label: 'heading/4 — 20px' },
|
||
{ variant: 'h5', label: 'heading/5 — 18px' },
|
||
{ variant: 'h6', label: 'heading/6 — 16px' },
|
||
{ variant: 'bodyLg', label: 'body/lg — 18px' },
|
||
{ variant: 'body1', label: 'body/md — 16px' },
|
||
{ variant: 'body2', label: 'body/sm — 14px' },
|
||
{ variant: 'bodyXs', label: 'body/xs — 12px' },
|
||
{ variant: 'labelLg', label: 'label/lg — 16px' },
|
||
{ variant: 'label', label: 'label/md — 14px' },
|
||
{ variant: 'labelSm', label: 'label/sm — 12px' },
|
||
{ variant: 'caption', label: 'caption/md — 12px' },
|
||
{ variant: 'captionSm', label: 'caption/sm — 11px' },
|
||
{ variant: 'overline', label: 'overline/md — 12px' },
|
||
{ variant: 'overlineSm', label: 'overline/sm — 11px' },
|
||
] as const;
|
||
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||
{variants.map(({ variant, label }) => (
|
||
<div key={variant} style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
|
||
<Typography
|
||
variant="captionSm"
|
||
color="textSecondary"
|
||
sx={{ width: 160, flexShrink: 0, textAlign: 'right' }}
|
||
>
|
||
{label}
|
||
</Typography>
|
||
<Typography variant={variant}>{SAMPLE}</Typography>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
},
|
||
};
|