Masthead

1import { cva, type VariantProps } from 'class-variance-authority'
2import React from 'react'
3 
4import { cn } from '@/lib/utils'
5 
6// Colour pairs are curated for WCAG 2.2 AAA (1.4.6 Contrast Enhanced): every
7// text/background combination below resolves to at least 7:1. This is why the
8// Masthead does not accept the full Button colour palette — accent/danger/
9// warning backgrounds with white text sit under 7:1 and would silently break
10// the AAA guarantee. Add new colours only with a verified pair.
11const mastheadColors = {
12  // Legacy .nsw-masthead (brand dark). Deepens in dark mode, matching the
13  // original nswds-app implementation.
14  dark: 'bg-primary-800 text-white dark:bg-primary-950',
15  // Legacy .nsw-masthead--light (off-white). grey-100 is the same value as
16  // the legacy --nsw-off-white (#f2f2f2).
17  light: 'bg-grey-100 text-grey-900',
18  white: 'bg-white text-grey-900',
19  grey: 'bg-grey-800 text-white',
20}
21 
22const mastheadVariants = cva('w-full text-xs', {
23  variants: {
24    color: mastheadColors,
25  },
26  defaultVariants: {
27    color: 'dark',
28  },
29})
30 
31const mastheadContainerVariants = cva(
32  [
33    'mx-auto flex w-full items-center justify-between gap-x-4 py-2',
34    // Lateral padding funnels through --masthead-padding-x so an app can
35    // retune it once (via the `style` prop or a utility class) without a new
36    // variant. Defaults reproduce the nswds-app rhythm: 16px → 24px → 48px.
37    'px-(--masthead-padding-x)',
38    '[--masthead-padding-x:--spacing(4)] sm:[--masthead-padding-x:--spacing(6)] lg:[--masthead-padding-x:--spacing(12)]',
39  ],
40  {
41    variants: {
42      container: {
43        // Full-bleed (nswds-app style). --masthead-max-width is still read so
44        // a shell app can constrain the inner wrapper without switching
45        // variants (the archive/practice `#nsw-masthead > div` override).
46        fluid: 'max-w-[var(--masthead-max-width,none)]',
47        // Centred content column, legacy nsw-container parity (1200px).
48        contained: 'max-w-[var(--masthead-max-width,75rem)]',
49      },
50    },
51    defaultVariants: {
52      container: 'fluid',
53    },
54  },
55)
56 
57type MastheadProps = React.ComponentPropsWithoutRef<'div'> &
58  VariantProps<typeof mastheadVariants> &
59  VariantProps<typeof mastheadContainerVariants> & {
60    /** Classes applied to the inner width-constraining wrapper. */
61    containerClassName?: string
62    ref?: React.Ref<HTMLDivElement>
63  }
64 
65/**
66 * The "A NSW Government website" strip shown above the site header on every
67// … truncated