Acknowledgement of Country

An Acknowledgement of Country: the statement, with the Australian Aboriginal and Torres Strait Islander flags or a band of First Nations artwork, as the legacy's blocks/acknowledgement-of-countries draw it. A variant sets the arrangement — artwork (the artwork across the top), flags-top (the flags above the statement), flags-left (the flags side by side in a column beside it) or flags-stacked (one above another beside it) — and a tone and surface its colours, a step of the tone for each; the fill, the statement's colour, the statement, the flags and the alignment can each be given instead. Its defaults come from acknowledgement in lib/acknowledgement.ts, and resolveAcknowledgement checks the props.

Examples

Acknowledgement on a bright surface

The artwork variant on each family’s 600, the statement in white.

25.3 KB built. Open the built email (opens in a new tab)

function AcknowledgementPage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly AcknowledgementProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswAcknowledgement {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const blocks = tones.map((tone) => ({ tone, surface: 'bright' as const }));

<AcknowledgementPage title='Acknowledgement on a bright surface' blocks={blocks} />

<AcknowledgementPage> is a demo helper shown inline above, not part of the package: copy it with the example, or swap in your own.

Acknowledgement, centred

The artwork variant with its statement centred.

25.3 KB built. Open the built email (opens in a new tab)

function AcknowledgementPage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly AcknowledgementProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswAcknowledgement {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const blocks = tones.map((tone) => ({ tone, align: 'center' as const }));

<AcknowledgementPage title='Acknowledgement, centred' blocks={blocks} />

<AcknowledgementPage> is a demo helper shown inline above, not part of the package: copy it with the example, or swap in your own.

Acknowledgement on a dark surface

The artwork variant on each family’s 800, the statement in its 50.

25.3 KB built. Open the built email (opens in a new tab)

function AcknowledgementPage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly AcknowledgementProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswAcknowledgement {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const blocks = tones.map((tone) => ({ tone, surface: 'dark' as const }));

<AcknowledgementPage title='Acknowledgement on a dark surface' blocks={blocks} />

<AcknowledgementPage> is a demo helper shown inline above, not part of the package: copy it with the example, or swap in your own.

Acknowledgement with flags beside

The flags side by side in a column beside the shorter statement.

31.7 KB built. Open the built email (opens in a new tab)

function AcknowledgementPage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly AcknowledgementProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswAcknowledgement {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const shortStatement =
  'We pay respect to the Traditional Custodians and First Peoples of New South Wales, and acknowledge their continued connection to their country and culture.'

const blocks = tones.map((tone) => ({
  tone,
  variant: 'flags-left' as const,
  statement: shortStatement,
}));

<AcknowledgementPage title='Acknowledgement with flags beside' blocks={blocks} />

<AcknowledgementPage> is a demo helper shown inline above, not part of the package: copy it with the example, or swap in your own.

Acknowledgement with stacked flags

The flags one above another in a column beside the statement.

34.5 KB built. Open the built email (opens in a new tab)

function AcknowledgementPage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly AcknowledgementProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswAcknowledgement {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const blocks = tones.map((tone) => ({ tone, variant: 'flags-stacked' as const }));

<AcknowledgementPage title='Acknowledgement with stacked flags' blocks={blocks} />

<AcknowledgementPage> is a demo helper shown inline above, not part of the package: copy it with the example, or swap in your own.

Acknowledgement with flags above

The flags above the statement, at the left and centred, on white.

54.4 KB built. Open the built email (opens in a new tab)

function AcknowledgementPage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly AcknowledgementProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswAcknowledgement {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const blocks = tones.flatMap((tone) => [
  { tone, variant: 'flags-top' as const },
  { tone, variant: 'flags-top' as const, align: 'center' as const },
]);

<AcknowledgementPage title='Acknowledgement with flags above' blocks={blocks} />

<AcknowledgementPage> is a demo helper shown inline above, not part of the package: copy it with the example, or swap in your own.

Flags above, on a bright surface

The flags-top variant on each family’s 600, the statement in white.

54.4 KB built. Open the built email (opens in a new tab)

function AcknowledgementPage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly AcknowledgementProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswAcknowledgement {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const blocks = tones.flatMap((tone) => [
  { tone, variant: 'flags-top' as const, surface: 'bright' as const },
  { tone, variant: 'flags-top' as const, surface: 'bright' as const, align: 'center' as const },
]);

<AcknowledgementPage title='Flags above, on a bright surface' blocks={blocks} />

<AcknowledgementPage> is a demo helper shown inline above, not part of the package: copy it with the example, or swap in your own.

Flags above, on a dark surface

The flags-top variant on each family’s 800, the statement in its 50.

54.4 KB built. Open the built email (opens in a new tab)

function AcknowledgementPage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly AcknowledgementProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswAcknowledgement {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const blocks = tones.flatMap((tone) => [
  { tone, variant: 'flags-top' as const, surface: 'dark' as const },
  { tone, variant: 'flags-top' as const, surface: 'dark' as const, align: 'center' as const },
]);

<AcknowledgementPage title='Flags above, on a dark surface' blocks={blocks} />

<AcknowledgementPage> is a demo helper shown inline above, not part of the package: copy it with the example, or swap in your own.

Flags above, on a pale surface

The flags-top variant on each family’s 200, the statement in its 800.

54.4 KB built. Open the built email (opens in a new tab)

function AcknowledgementPage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly AcknowledgementProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswAcknowledgement {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const blocks = tones.flatMap((tone) => [
  { tone, variant: 'flags-top' as const, surface: 'pale' as const },
  { tone, variant: 'flags-top' as const, surface: 'pale' as const, align: 'center' as const },
]);

<AcknowledgementPage title='Flags above, on a pale surface' blocks={blocks} />

<AcknowledgementPage> is a demo helper shown inline above, not part of the package: copy it with the example, or swap in your own.

Acknowledgement of Country

The statement under a band of First Nations artwork, on white, in the grey, blue and red families.

25.3 KB built. Open the built email (opens in a new tab)

function AcknowledgementPage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly AcknowledgementProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswAcknowledgement {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const blocks = tones.map((tone) => ({ tone }));

<AcknowledgementPage title='Acknowledgement of Country' blocks={blocks} />

<AcknowledgementPage> is a demo helper shown inline above, not part of the package: copy it with the example, or swap in your own.

Acknowledgement on a pale surface

The artwork variant on each family’s 200, the statement in its 800.

25.3 KB built. Open the built email (opens in a new tab)

function AcknowledgementPage({
  title,
  blocks,
}: {
  title: string
  blocks: readonly AcknowledgementProps[]
}) {
  return (
    <NswLayout title={title}>
      {blocks.map((block, i) => (
        <Fragment key={i}>
          <NswAcknowledgement {...block} />
          <NswColumns background='grey-100' padding={false}>
            <NswColumn>
              <NswSpacer height={24} />
            </NswColumn>
          </NswColumns>
        </Fragment>
      ))}
    </NswLayout>
  )
}

const tones = ['grey', 'primary', 'accent'] as const

const blocks = tones.map((tone) => ({ tone, surface: 'pale' as const }));

<AcknowledgementPage title='Acknowledgement on a pale surface' blocks={blocks} />

<AcknowledgementPage> is a demo helper shown inline above, not part of the package: copy it with the example, or swap in your own.

Props

Props of NswAcknowledgement, read from the component
Prop	Type	Default	Description
`width`	`number`	—	The block's width in px. Default, in a column, that column's content width, handed on by `<NswColumns>`; otherwise the document's row width. Set it yourself only for a block outside a column of the package's own.
`layout`	`Layout`	—	The layout its rows and spacers are drawn from: the document's (handed on by `<NswLayout layout>`) unless given one of its own.
`devices`	`Devices`	—	Which devices show the block: left out, every device; `desktop` hides it on a phone; `mobile` shows it on a phone only, and never in Windows Outlook (see `src/lib/devices.ts`), as `<NswColumns devices>` is.
`defaults`	`TextDefaults`	—	The email's text settings, handed on by `<NswLayout text>`: the statement is drawn in its face. Its size and colour are the block's own.
`variant`	`AcknowledgementVariant`	`artwork`	The arrangement: `artwork` (a band of First Nations artwork above the statement), `flags-top` (the flags above it), `flags-left` (the flags side by side in a column beside it) or `flags-stacked` (the flags one above another beside it). On a phone the flags' column stacks above the statement. Default `artwork`.
`tone`	`AcknowledgementTone`	`primary`	The colour family: `grey`, `primary` or `accent`. Each colour the surface sets is a step of it. Default `primary`.
`surface`	`AcknowledgementSurface`	`white`	The colours: `white` (a white block, the statement in the tone's 800), `dark` (the 800, the statement in the 50), `bright` (the 600, the statement in white) or `pale` (the 200, the statement in the 800). The artwork's band is the 800, or the 50 on `dark` and `bright`. Default `white`.
`background`	`ColorValue`	the surface's	The block's fill: a theme colour name or a hex literal, or `'transparent'` for none. Default the surface's. The artwork's band keeps the surface's.
`color`	`ColorValue`	the surface's	The statement's colour: a theme colour name or a hex literal. Default the surface's.
`statement`	`ReactNode`	the NSW statement (`acknowledgement.statement`)	The words of the acknowledgement: text, which may hold links or bold. Default the NSW statement (`acknowledgement.statement`).
`flags`	`readonly AcknowledgementFlag[]`	the Australian Aboriginal and Torres Strait Islander flags	The flags, in the order they are drawn, each `{ src, alt }`, drawn 52 × 36, so make the images at about that shape. At least one; not for the `artwork` variant, which draws none. Default the Australian Aboriginal and Torres Strait Islander flags.
`align`	`Align`	`left`	Where the flags and the statement sit: `left`, `center` or `right`; on a phone the flags keep it. Default `left`.
`paddingY`	`number`	32	The band of the fill above and below the content, in whole px; the `artwork` variant draws it below only, the artwork being its top edge. `0` for none. Default 32.