Social links

A row of social links: one icon per account, from the brand's own icon sets (social in lib/social.ts), in a colour and a frame, at a size, a gap apart, placed left, centred or right. resolveSocial checks the props.

Examples

Social links colours

Social icons in every NSW palette colour: the 800s and 600s on white, the 400s and 200s on their family’s darkest shade.

489.4 KB built, over Gmail's clip limit by design: this page documents every case. Open the built email (opens in a new tab)

function SocialPage({
  title,
  rows,
}: {
  title: string
  rows: ReadonlyArray<{
    key: string
    background?: ColorValue
    padded?: boolean
    after?: number
    content: ReactNode
  }>
}) {
  return (
    <NswLayout title={title}>
      {rows.map(({ key, background, padded, after, content }) => (
        <Fragment key={key}>
          <NswColumns background={background ?? 'white'}>
            <NswColumn>
              {padded ? <NswSpacer /> : null}
              {content}
              {padded ? <NswSpacer /> : null}
            </NswColumn>
          </NswColumns>
          {after === undefined ? null : (
            <NswColumns background='white'>
              <NswColumn>
                <NswSpacer height={after} />
              </NswColumn>
            </NswColumns>
          )}
        </Fragment>
      ))}
    </NswLayout>
  )
}

const nswGovernment = [
  { network: 'facebook', href: 'https://www.facebook.com/NSWGovernment' },
  { network: 'x', href: 'https://x.com/NSWGovernment' },
  { network: 'youtube', href: 'https://www.youtube.com/user/nswgovernment' },
  { network: 'linkedin', href: 'https://www.linkedin.com/company/nswgovernment' },
  { network: 'instagram', href: 'https://www.instagram.com/nswgov' },
] as const

const families: ReadonlyArray<[string, ColorValue]> = [
  ['nsw-grey', '#22272b'],
  ['nsw-green', '#004000'],
  ['nsw-teal', '#0b3f47'],
  ['nsw-blue', '#002664'],
  ['nsw-purple', '#441170'],
  ['nsw-fuchsia', '#65004d'],
  ['nsw-red', '#630019'],
  ['nsw-orange', '#941b00'],
  ['nsw-yellow', '#694800'],
  ['nsw-brown', '#523719'],
  ['nsw-aboriginal-grey', '#272727'],
  ['nsw-aboriginal-red', '#950906'],
  ['nsw-aboriginal-orange', '#882600'],
  ['nsw-aboriginal-brown', '#552105'],
  ['nsw-aboriginal-yellow', '#895e00'],
  ['nsw-aboriginal-green', '#215834'],
  ['nsw-aboriginal-blue', '#00405e'],
  ['nsw-aboriginal-purple', '#472642'],
]

const tones = families.flatMap(([family, darkest]) =>
  ([800, 600, 400, 200] as const).map((shade) => ({
    tone: [family, shade].join('-') as SocialTone,
    background: shade === 400 || shade === 200 ? darkest : undefined,
  })),
);

<SocialPage
  title='Social links colours'
  rows={tones.map(({ tone, background }) => ({
    key: tone,
    padded: true,
    ...(background === undefined ? {} : { background }),
    content: <NswSocial links={nswGovernment} tone={tone} />,
  }))}
/>

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

Social links gap

Social icons 4, 8, 12, 16 and 20px apart.

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

function SocialPage({
  title,
  rows,
}: {
  title: string
  rows: ReadonlyArray<{
    key: string
    background?: ColorValue
    padded?: boolean
    after?: number
    content: ReactNode
  }>
}) {
  return (
    <NswLayout title={title}>
      {rows.map(({ key, background, padded, after, content }) => (
        <Fragment key={key}>
          <NswColumns background={background ?? 'white'}>
            <NswColumn>
              {padded ? <NswSpacer /> : null}
              {content}
              {padded ? <NswSpacer /> : null}
            </NswColumn>
          </NswColumns>
          {after === undefined ? null : (
            <NswColumns background='white'>
              <NswColumn>
                <NswSpacer height={after} />
              </NswColumn>
            </NswColumns>
          )}
        </Fragment>
      ))}
    </NswLayout>
  )
}

const nswGovernment = [
  { network: 'facebook', href: 'https://www.facebook.com/NSWGovernment' },
  { network: 'x', href: 'https://x.com/NSWGovernment' },
  { network: 'youtube', href: 'https://www.youtube.com/user/nswgovernment' },
  { network: 'linkedin', href: 'https://www.linkedin.com/company/nswgovernment' },
  { network: 'instagram', href: 'https://www.instagram.com/nswgov' },
] as const

const gaps = [4, 8, 12, 16, 20] as const;

<SocialPage
  title='Social links gap'
  rows={gaps.map((gap) => ({
    key: String(gap),
    after: 16,
    content: <NswSocial links={nswGovernment} align='left' gap={gap} />,
  }))}
/>

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

Social links

The NSW Government accounts as social icons, in each of the five frames.

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

function SocialPage({
  title,
  rows,
}: {
  title: string
  rows: ReadonlyArray<{
    key: string
    background?: ColorValue
    padded?: boolean
    after?: number
    content: ReactNode
  }>
}) {
  return (
    <NswLayout title={title}>
      {rows.map(({ key, background, padded, after, content }) => (
        <Fragment key={key}>
          <NswColumns background={background ?? 'white'}>
            <NswColumn>
              {padded ? <NswSpacer /> : null}
              {content}
              {padded ? <NswSpacer /> : null}
            </NswColumn>
          </NswColumns>
          {after === undefined ? null : (
            <NswColumns background='white'>
              <NswColumn>
                <NswSpacer height={after} />
              </NswColumn>
            </NswColumns>
          )}
        </Fragment>
      ))}
    </NswLayout>
  )
}

const nswGovernment = [
  { network: 'facebook', href: 'https://www.facebook.com/NSWGovernment' },
  { network: 'x', href: 'https://x.com/NSWGovernment' },
  { network: 'youtube', href: 'https://www.youtube.com/user/nswgovernment' },
  { network: 'linkedin', href: 'https://www.linkedin.com/company/nswgovernment' },
  { network: 'instagram', href: 'https://www.instagram.com/nswgov' },
] as const

const shapes: readonly SocialShape[] = [
  'circle',
  'circle-outlined',
  'square-outlined',
  'square',
  'plain',
];

<SocialPage
  title='Social links'
  rows={[
    {
      key: 'shapes',
      content: shapes.map((shape) => (
        <NswSocial key={shape} links={nswGovernment} shape={shape} />
      )),
    },
  ]}
/>

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

Social links position

Social icons at the left, centre and right of their row, at the left on a phone.

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

function SocialPage({
  title,
  rows,
}: {
  title: string
  rows: ReadonlyArray<{
    key: string
    background?: ColorValue
    padded?: boolean
    after?: number
    content: ReactNode
  }>
}) {
  return (
    <NswLayout title={title}>
      {rows.map(({ key, background, padded, after, content }) => (
        <Fragment key={key}>
          <NswColumns background={background ?? 'white'}>
            <NswColumn>
              {padded ? <NswSpacer /> : null}
              {content}
              {padded ? <NswSpacer /> : null}
            </NswColumn>
          </NswColumns>
          {after === undefined ? null : (
            <NswColumns background='white'>
              <NswColumn>
                <NswSpacer height={after} />
              </NswColumn>
            </NswColumns>
          )}
        </Fragment>
      ))}
    </NswLayout>
  )
}

const nswGovernment = [
  { network: 'facebook', href: 'https://www.facebook.com/NSWGovernment' },
  { network: 'x', href: 'https://x.com/NSWGovernment' },
  { network: 'youtube', href: 'https://www.youtube.com/user/nswgovernment' },
  { network: 'linkedin', href: 'https://www.linkedin.com/company/nswgovernment' },
  { network: 'instagram', href: 'https://www.instagram.com/nswgov' },
] as const

const positions: readonly Align[] = ['left', 'center', 'right'];

<SocialPage
  title='Social links position'
  rows={positions.map((align) => ({
    key: align,
    content: <NswSocial links={nswGovernment} align={align} mobileClass='mobile-left' />,
  }))}
/>

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

Social links size

Social icons at 32, 36 and 40px.

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

function SocialPage({
  title,
  rows,
}: {
  title: string
  rows: ReadonlyArray<{
    key: string
    background?: ColorValue
    padded?: boolean
    after?: number
    content: ReactNode
  }>
}) {
  return (
    <NswLayout title={title}>
      {rows.map(({ key, background, padded, after, content }) => (
        <Fragment key={key}>
          <NswColumns background={background ?? 'white'}>
            <NswColumn>
              {padded ? <NswSpacer /> : null}
              {content}
              {padded ? <NswSpacer /> : null}
            </NswColumn>
          </NswColumns>
          {after === undefined ? null : (
            <NswColumns background='white'>
              <NswColumn>
                <NswSpacer height={after} />
              </NswColumn>
            </NswColumns>
          )}
        </Fragment>
      ))}
    </NswLayout>
  )
}

const nswGovernment = [
  { network: 'facebook', href: 'https://www.facebook.com/NSWGovernment' },
  { network: 'x', href: 'https://x.com/NSWGovernment' },
  { network: 'youtube', href: 'https://www.youtube.com/user/nswgovernment' },
  { network: 'linkedin', href: 'https://www.linkedin.com/company/nswgovernment' },
  { network: 'instagram', href: 'https://www.instagram.com/nswgov' },
] as const

const sizes = [32, 36, 40] as const;

<SocialPage
  title='Social links size'
  rows={sizes.map((size) => ({
    key: String(size),
    content: <NswSocial links={nswGovernment} align='left' size={size} />,
  }))}
/>

<SocialPage> 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 NswSocial, read from the component
Prop	Type	Default	Description
`columnWidth`	`number`	—	The width of the column the row sits in, handed on by `<NswColumns>`: Windows Outlook's copy puts as many icons on a line as fit it. Set it yourself only for a row outside a column of the package's own; left out there, the document's content width (from `layout`).
`layout`	`Layout`	—	The layout whose content width a row outside a column breaks its lines to in Windows Outlook: the document's (handed on by `<NswLayout layout>`) unless the row is given one of its own, and the NSW defaults outside a document.
`mobileClass`	`string`	none, as the legacy's	Mobile utility class(es) on the icons' table, for a document's own `@media` rule: `mobile-left` keeps centred or right-aligned icons at the left on a phone, `mobile-center` centres them, and a row the phone wraps lines up the same way. Default none, as the legacy's.
`devices`	`Devices`	—	Which devices show the icons: left out, every device; `desktop` hides them on a phone (`hide-on-mobile`); `mobile` shows them on a phone only — hidden inline everywhere else, shown by the document's `.show-on-mobile` rule, and kept from Windows Outlook by `mso-hide: all` and the `<!--[if !mso]>` comments around them (see `src/lib/devices.ts`), as `<NswImg devices>` is.
`links` (required)	`readonly SocialLink[]`	—	The accounts, in the order the icons are drawn, each `{ network, href, label? }`: the network (`facebook`, `x`, `youtube`, `linkedin` or `instagram`), the address its icon links to, and the link's name if not the network's (`NSW Government on Facebook`). At least one is required; the same network may appear twice, for two accounts.
`tone`	`SocialTone`	`nsw-grey-600`	The icons' colour: an NSW palette colour by its full name (`nsw-grey-600`, `nsw-aboriginal-blue-800`; a 200 or 400 for a dark background), `black`, `white`, `translucent` (white at 40% opacity) or `brand` (each network's own colours). Default `nsw-grey-600`.
`shape`	`SocialShape`	`circle`	The icons' frame: `circle`, `circle-outlined`, `square`, `square-outlined`, or `plain` for the mark alone. Default `circle`.
`size`	`number`	24	Each icon's width and height in whole px, above 0, and no wider than the row's column (`columnWidth`), which a larger size is drawn at. Default 24.
`gap`	`number`	8	The space between two icons in whole px. Default 8.
`align`	`Align`	`center`	Where the icons sit in their row: `left`, `center` or `right`. Default `center`.