Add intended audience signifier by LAKSHMIRPILLAI · Pull Request #86 · guardian/stand

LAKSHMIRPILLAI · 2026-04-28T08:17:37Z

What does this change?

Adds the Intended Audience Signifier component to be used in Composer and Workflow

How has this change been tested?

Storybook and sandbox

Intended Audience Signifier

The IntendedAudienceSignifier component is a visual indicator of the intended audience for a piece of content. It's determined by the Production Office assigned to an article and the readership level intended for that.

When to use

The component is primarily to be used in Composer and Workflow to help content creators and global editors understand the intended audience for a piece of content at a glance.

Peer dependencies

@emotion/react
react
react-dom
react-aria-components
typescript

See the peerDependencies section of package.json for compatible versions.

See custom component build for usage without React/Emotion.

Example usage

import { IntendedAudienceSignifier } from '@guardian/stand/intended-audience-signifier';

/* types, if required */
import type {  IntendedAudienceSignifierProps,  IntendedAudienceSignifierTheme } from '@guardian/stand/intended-audience-signifier';

	<IntendedAudienceSignifier source="UK" intendedAudience='Global' />
	<IntendedAudienceSignifier source="US" intendedAudience='Global' />
	<IntendedAudienceSignifier source="AUS" intendedAudience='Global' />
	<IntendedAudienceSignifier source="UK" intendedAudience='Domestic for Domestic' />
	<IntendedAudienceSignifier source="US" intendedAudience='Domestic for Domestic' />
	<IntendedAudienceSignifier source="AUS" intendedAudience='Domestic for Domestic' />
	<IntendedAudienceSignifier source="UK" intendedAudience='Domestic For Global' />
	<IntendedAudienceSignifier source="US" intendedAudience='Domestic For Global' />
	<IntendedAudienceSignifier source="AUS" intendedAudience='Domestic For Global' />
	<IntendedAudienceSignifier source="UK" intendedAudience='Domestic For Global' theme={{ color: '#c70000' }} />
	<IntendedAudienceSignifier source="AUS" intendedAudience='Global' cssOverrides={{ border-color: '#0000FF',align-items: 'flex-end' }}/>
	<IntendedAudienceSignifier source="UK" intendedAudience="Don't know" />
	<IntendedAudienceSignifier source="US" intendedAudience="Don't know" />
	<IntendedAudienceSignifier source="AUS" intendedAudience="Don't know" />
	<IntendedAudienceSignifier source="UK" intendedAudience='US' />
	<IntendedAudienceSignifier source="US" intendedAudience='UK' />

Props

Name	Type	Required	Default	Description
`source`	`Source`	Yes	N/A	Icon key rendered on the left side of the chevron. Supported values: `UK`, `US`, `AUS` .
`intendedAudience`	`IntendedAudience`	Yes	N/A	Icon key rendered on the right side of the chevron. Supported values: `Global`,`Domestic for Domestic`,`Domestic For Global`,`Don't know`,`UK`, `US`, `AUS`.
`theme`	`Partial<IntendedAudienceSignifierTheme>`	No	N/A	Custom theme token overrides merged over the component defaults.
`cssOverrides`	`SerializedStyles \| SerializedStyles[]`	No	N/A	Additional Emotion CSS styles applied to the root element.
`className`	`string`	No	N/A	Additional class name(s) applied to the root element.

Customisation

Can customise the component using theme and cssOverrides as required.

import { IntendedAudienceSignifier } from '@guardian/stand/intended-audience-signifier';
import type { IntendedAudienceSignifierTheme } from '@guardian/stand/intended-audience-signifier';

const customTheme: Partial<IntendedAudienceSignifierTheme> = {
	color: '#c70000',
};

const Component = () => (
	<IntendedAudienceSignifier
		rightIcon="UK"
		leftIcon="Global"
		theme={customTheme}
	/>
);

CSS overrides

Pass custom Emotion styles with cssOverrides:

import { css } from '@emotion/react';
import { IntendedAudienceSignifier } from '@guardian/stand/intended-audience-signifier';

const customStyles = css`
	text-transform: uppercase;
	letter-spacing: 0.04em;
`;

const Component = () => (
	<IntendedAudienceSignifier
		rightIcon="UK"
		leftIcon="US"
		cssOverrides={customStyles}
	/>
);

Custom Component Build

If you're not using React/Emotion, you can create a custom IntendedAudienceSignifier component using the styles defined in the IntendedAudienceSignifierTheme type.

css

You can import the IntendedAudienceSignifier styles as CSS from the package:

TypeScript/JavaScript

Use the componentIntendedAudienceSignifier variable and the ComponentIntendedAudienceSignifier type:

Images

github-actions · 2026-04-28T08:24:08Z

Dependency Compatibility Matrix

React	Emotion	TypeScript	RAC	Typecheck	Unit	E2E	Build	Overall
17	11.11.4	~5.0	1.13.0	ok	ok	ok	ok	✅
17	11.11.4	~5.0	1.17.0	ok	ok	ok	ok	✅
17	11.11.4	~5.1	1.13.0	ok	ok	ok	ok	✅
17	11.11.4	~5.1	1.17.0	ok	ok	ok	ok	✅
17	11.11.4	~5.9	1.13.0	ok	ok	ok	ok	✅
17	11.11.4	~5.9	1.17.0	ok	ok	ok	ok	✅
17	11.14.0	~5.0	1.13.0	ok	ok	ok	ok	✅
17	11.14.0	~5.0	1.17.0	ok	ok	ok	ok	✅
17	11.14.0	~5.1	1.13.0	ok	ok	ok	ok	✅
17	11.14.0	~5.1	1.17.0	ok	ok	ok	ok	✅
17	11.14.0	~5.9	1.13.0	ok	ok	ok	ok	✅
17	11.14.0	~5.9	1.17.0	ok	ok	ok	ok	✅
18	11.11.4	~5.0	1.13.0	ok	ok	ok	ok	✅
18	11.11.4	~5.0	1.17.0	ok	ok	ok	ok	✅
18	11.11.4	~5.1	1.13.0	ok	ok	ok	ok	✅
18	11.11.4	~5.1	1.17.0	ok	ok	ok	ok	✅
18	11.11.4	~5.9	1.13.0	ok	ok	ok	ok	✅
18	11.11.4	~5.9	1.17.0	ok	ok	ok	ok	✅
18	11.14.0	~5.0	1.13.0	ok	ok	ok	ok	✅
18	11.14.0	~5.0	1.17.0	ok	ok	ok	ok	✅
18	11.14.0	~5.1	1.13.0	ok	ok	ok	ok	✅
18	11.14.0	~5.1	1.17.0	ok	ok	ok	ok	✅
18	11.14.0	~5.9	1.13.0	ok	ok	ok	ok	✅
18	11.14.0	~5.9	1.17.0	ok	ok	ok	ok	✅
19	11.14.0	~5.0	1.13.0	ok	ok	ok	ok	✅
19	11.14.0	~5.0	1.17.0	ok	ok	ok	ok	✅
19	11.14.0	~5.1	1.13.0	ok	ok	ok	ok	✅
19	11.14.0	~5.1	1.17.0	ok	ok	ok	ok	✅
19	11.14.0	~5.9	1.13.0	ok	ok	ok	ok	✅
19	11.14.0	~5.9	1.17.0	ok	ok	ok	ok	✅

Columns show granular outcomes for each dependency set: ok = passed, fail = failed, skip = upstream failure prevented running later stages. Overall: ✅ all passed, ⚠️ only skips (no hard fails), ❌ at least one fail.
Last updated: 2026-04-29T15:37:25.958Z (commit 84741b4)

coldlink

reviewed with @oliverabrahams

coldlink · 2026-04-30T09:37:00Z

+import { IntendedAudienceSignifier } from './IntendedAudienceSignifier';
+
+const meta = {
+	title: 'Stand/Tools Design System/Components/IntendedAudienceSignifier',


Suggested change

title: 'Stand/Tools Design System/Components/IntendedAudienceSignifier',

title: 'Stand/Editorial Components/IntendedAudienceSignifier',

This seems like an Editorial specific component to me, so this component should sit under that section of the documentation

coldlink · 2026-04-30T09:42:52Z

+	color: ${theme.color};
+	border-width: 1px;
+	border-style: solid;
+	border-color: ${theme.color};
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	border-radius: 2px;
+	padding: 2px 4px;
+	box-sizing: border-box;
+	width: fit-content;
+	gap: 8px;


All style values should be added to the theme property through style dictionary, i.e in the intendedAudienceSignifier.json file, similar to other components in stand.

coldlink · 2026-04-30T09:43:48Z

+	color: var(--component-intended-audience-signifier-color);
+	border-width: 1px;
+	border-style: solid;
+	border-color: var(--component-intended-audience-signifier-color);
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	border-radius: 2px;
+	padding: 2px 4px;
+	box-sizing: border-box;
+	width: fit-content;
+	gap: 8px;


once the tokens have been added and built using pnpm run build-styled, the hard coded values can also be replaced with css variables

coldlink · 2026-04-30T09:44:17Z

+		color: \${componentIntendedAudienceSignifier.color};
+		border-width: 1px;
+		border-style: solid;
+		border-color: \${componentIntendedAudienceSignifier.color};
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		border-radius: 2px;
+		padding: 2px 4px;
+		box-sizing: border-box;
+		width: fit-content;
+		gap: 8px;


likewise for these tokens too which will be available under componentIntendedAudienceSignifier

coldlink · 2026-04-30T09:48:16Z

+export const defaultIntendedAudienceSignifierTheme: IntendedAudienceSignifierTheme =
+	componentIntendedAudienceSignifier;
+
+export const intendedAudienceSignifierStyles = (


it might be nice to have styles that control the size of the svg icons within the component

coldlink · 2026-04-30T09:49:50Z

+export { componentIntendedAudienceSignifier } from './styleD/build/typescript/component/intendedAudienceSignifier';
+export type { ComponentIntendedAudienceSignifier } from './styleD/build/typescript/component/intendedAudienceSignifier';


Can we move this to under the editorial components tokens exports sections (line 9 and below)

coldlink · 2026-04-30T09:51:22Z

it will also need a changeset (npx changeset) in order to release a new version/canary, use patch level

LAKSHMIRPILLAI and others added 2 commits April 28, 2026 09:16

Add intended audience signifier

cc051be

Merge branch 'main' into lp-db-add-intended-audience-signifier

1fbf7fd

LAKSHMIRPILLAI added the feature Departmental tracking: work on a new feature label Apr 28, 2026

LAKSHMIRPILLAI marked this pull request as ready for review April 28, 2026 09:39

LAKSHMIRPILLAI requested a review from a team as a code owner April 28, 2026 09:39

Clean up

0637566

LAKSHMIRPILLAI added the run_chromatic Run the chromatic/storybook action. label Apr 28, 2026

Update the types and stories

05c1268

LAKSHMIRPILLAI marked this pull request as draft April 29, 2026 14:33

Refactor code

ab22b8c

LAKSHMIRPILLAI force-pushed the lp-db-add-intended-audience-signifier branch from ea37775 to ab22b8c Compare April 29, 2026 15:31

LAKSHMIRPILLAI marked this pull request as ready for review April 29, 2026 15:37

coldlink reviewed Apr 30, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add intended audience signifier#86

Add intended audience signifier#86
LAKSHMIRPILLAI wants to merge 5 commits intomainfrom
lp-db-add-intended-audience-signifier

LAKSHMIRPILLAI commented Apr 28, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 28, 2026 •

edited

Loading

Uh oh!

coldlink left a comment

Uh oh!

coldlink Apr 30, 2026

Uh oh!

coldlink Apr 30, 2026

Uh oh!

coldlink Apr 30, 2026

Uh oh!

coldlink Apr 30, 2026

Uh oh!

coldlink Apr 30, 2026

Uh oh!

coldlink Apr 30, 2026

Uh oh!

coldlink commented Apr 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	title: 'Stand/Tools Design System/Components/IntendedAudienceSignifier',
	title: 'Stand/Editorial Components/IntendedAudienceSignifier',

		export { componentIntendedAudienceSignifier } from './styleD/build/typescript/component/intendedAudienceSignifier';
		export type { ComponentIntendedAudienceSignifier } from './styleD/build/typescript/component/intendedAudienceSignifier';

Conversation

LAKSHMIRPILLAI commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this change?

How has this change been tested?

Intended Audience Signifier

When to use

Peer dependencies

Example usage

Props

Customisation

CSS overrides

Custom Component Build

Images

Uh oh!

github-actions Bot commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Dependency Compatibility Matrix

Uh oh!

coldlink left a comment

Choose a reason for hiding this comment

Uh oh!

coldlink Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

coldlink Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

coldlink Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

coldlink Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

coldlink Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

coldlink Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

coldlink commented Apr 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

LAKSHMIRPILLAI commented Apr 28, 2026 •

edited

Loading

github-actions Bot commented Apr 28, 2026 •

edited

Loading