format: Apply Prettier to existing codebase
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>
This commit is contained in:
@@ -16,22 +16,35 @@ const meta: Meta<typeof Typography> = {
|
||||
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',
|
||||
'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',
|
||||
],
|
||||
options: ['textPrimary', 'textSecondary', 'textDisabled', 'primary', 'secondary', 'error'],
|
||||
},
|
||||
maxLines: { control: 'number' },
|
||||
gutterBottom: { control: 'boolean' },
|
||||
@@ -47,7 +60,8 @@ const SAMPLE = 'Discover, Explore, and Plan Funerals in Minutes, Not Hours';
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: 'Funeral Arranger helps families find transparent, affordable funeral services across Australia.',
|
||||
children:
|
||||
'Funeral Arranger helps families find transparent, affordable funeral services across Australia.',
|
||||
},
|
||||
};
|
||||
|
||||
@@ -59,23 +73,33 @@ export const Display: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
<div>
|
||||
<Typography variant="captionSm" color="textSecondary">displayHero — 80px</Typography>
|
||||
<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="captionSm" color="textSecondary">
|
||||
display1 — 64px
|
||||
</Typography>
|
||||
<Typography variant="display1">{SAMPLE}</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant="captionSm" color="textSecondary">display2 — 52px</Typography>
|
||||
<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="captionSm" color="textSecondary">
|
||||
display3 — 40px
|
||||
</Typography>
|
||||
<Typography variant="display3">{SAMPLE}</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant="captionSm" color="textSecondary">displaySm — 32px</Typography>
|
||||
<Typography variant="captionSm" color="textSecondary">
|
||||
displaySm — 32px
|
||||
</Typography>
|
||||
<Typography variant="displaySm">{SAMPLE}</Typography>
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,27 +114,39 @@ export const Headings: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<div>
|
||||
<Typography variant="captionSm" color="textSecondary">h1 — 36px</Typography>
|
||||
<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="captionSm" color="textSecondary">
|
||||
h2 — 30px
|
||||
</Typography>
|
||||
<Typography variant="h2">{SAMPLE}</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant="captionSm" color="textSecondary">h3 — 24px</Typography>
|
||||
<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="captionSm" color="textSecondary">
|
||||
h4 — 20px
|
||||
</Typography>
|
||||
<Typography variant="h4">{SAMPLE}</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography variant="captionSm" color="textSecondary">h5 — 18px</Typography>
|
||||
<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="captionSm" color="textSecondary">
|
||||
h6 — 16px
|
||||
</Typography>
|
||||
<Typography variant="h6">{SAMPLE}</Typography>
|
||||
</div>
|
||||
</div>
|
||||
@@ -125,31 +161,39 @@ export const Body: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 640 }}>
|
||||
<div>
|
||||
<Typography variant="overline" gutterBottom>bodyLg — 18px</Typography>
|
||||
<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.
|
||||
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="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="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.
|
||||
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="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.
|
||||
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>
|
||||
@@ -164,32 +208,60 @@ export const UIText: Story = {
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<Typography variant="captionSm" color="textSecondary">
|
||||
overlineSm — 11px semibold uppercase
|
||||
</Typography>
|
||||
<Typography variant="overlineSm" display="block">
|
||||
Compact overline
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
@@ -222,20 +294,25 @@ export const FontFamilies: Story = {
|
||||
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 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.
|
||||
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 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).
|
||||
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>
|
||||
@@ -249,18 +326,21 @@ export const MaxLines: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 24, maxWidth: 400 }}>
|
||||
<div>
|
||||
<Typography variant="label" gutterBottom>maxLines=1</Typography>
|
||||
<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.
|
||||
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 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.
|
||||
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>
|
||||
@@ -276,23 +356,27 @@ export const RealisticContent: Story = {
|
||||
<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.
|
||||
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 variant="h2" sx={{ mt: 2 }}>
|
||||
How it works
|
||||
</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.
|
||||
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.
|
||||
Prices are indicative and current as of March 2026. Contact the funeral director for a
|
||||
binding quote.
|
||||
</Typography>
|
||||
</div>
|
||||
),
|
||||
@@ -333,7 +417,11 @@ export const CompleteScale: Story = {
|
||||
<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' }}>
|
||||
<Typography
|
||||
variant="captionSm"
|
||||
color="textSecondary"
|
||||
sx={{ width: 160, flexShrink: 0, textAlign: 'right' }}
|
||||
>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography variant={variant}>{SAMPLE}</Typography>
|
||||
|
||||
Reference in New Issue
Block a user