Release v1.30.0

.github/pull_request_template.md

@@ -27,6 +27,7 @@ Provide an overview of your changes here. Include screenshots, photos or links i
 - [ ] Create or update documentation on the website
 - [ ] Create or update stories for Storybook
 - [ ] Create or update stories for Playroom snippets
+- [ ] Verify hard-coded anchor links and hashes are correct. Check existing links when renaming pages and headings.
 
 **Creating new component**
 

RELEASE.md

@@ -14,13 +14,13 @@ These instructions capture the internal process for making a release of the `@ag
    - The new package release version from above.
    - A link to the Version Packages PR.
 
-5. Add a minor docs changeset of ‘docs: AgDS Beta v[version-number] release notes.‘
+5. Add a minor docs changeset of ‘docs: AgDS v[version-number] release notes.‘
 6. Commit these changes with a description ‘Release notes v[version number]’, create a PR and merge it to `develop` when approved.
 
 ## npm release
 
 1. Merge the PR named `Version Packages` into `develop` on GitHub once all checks pass.
-2. Create and merge a new PR titled ‘Release v[version-number]’ which merges `develop` into `main`.
+2. Create and merge a new PR titled ‘Release v[version-number]’ which merges (not squashes) `develop` into `main`.
 3. After `main` finishes building and deploying, on the command line, run `git pull` on the `main` branch to fetch latest changes.
 4. Run `yarn fresh` to rebuild `node_modules` and clean-up any build output.
 5. Run `yarn publish-changed` to find packages where the version listed in the `package.json` is ahead of the version published on npm, and publish just those packages.
@@ -32,6 +32,6 @@ These instructions capture the internal process for making a release of the `@ag
 ## Github release notes
 
 1. Create a draft release on GitHub based on the new release’s tag (such as @ag.ds-next/react@[version-number]).
-2. Title the release with the version number, for example, ‘AgDS Beta v[version-number] release’.
+2. Title the release with the version number, for example, ‘AgDS v[version-number] release’.
 3. Copy the latest docs release notes content without the frontmatter and with all urls updated to include the protocol and domain.
 4. Publish the release.

docs/.env.production

@@ -1,4 +1,4 @@
-SITE_URL=https://design-system.agriculture.gov.au
+NEXT_PUBLIC_SITE_URL=https://design-system.agriculture.gov.au
 NEXT_PUBLIC_FIGMA_URL=https://www.figma.com/file/MivOblJvHi3nJ4bQMDfnf3/AgDS---gallery
 NEXT_PUBLIC_GA_MEASUREMENT_ID=G-FNXK77EZLQ
 NEXT_PUBLIC_PLAYROOM_URL=/playroom

docs/CHANGELOG.md

@@ -1,5 +1,187 @@
 # @ag.ds-next/docs
 
+## 0.18.0
+
+### Minor Changes
+
+- 2590b8778ff: patterns: Add ‘Selecting an option from a list’.
+- 5e2b99dd4c0: docs: Remove beta badge & update description to reflect AgDS’s use-case.
+- b5635a629fd: conditional-field-container: Update style to use a left border instead of a horizontal divider.
+
+  field: `<FieldContainer>`: Update style to support invalid fields within `<ConditionalFieldContainer>`.
+
+  grouped-fields: Update style to support invalid fields within `<ConditionalFieldContainer>`.
+
+- dd3c366a455: checkbox: Add `onFocus` as valid TypeScript prop.
+
+  docs: Add 'Responsive preview' page designed to view components and examples with selectable document widths. Add responsive preview link to documentation code snippets. Modify code snippet components with padding option.
+
+  header: Remove padding from preview examples.
+
+  radio: Add `onFocus` as valid TypeScript prop.
+
+- 45d54c8f8e3: docs: Update Getting Started guide to support Next.js.
+- a9c3de75979: docs: AgDS v1.30.0 release notes.
+- de35d8cb112: foundations/accessibility: Add new Foundations > Accessibility content pages.
+- 5e2b99dd4c0: docs: Change all ‘Confirm and submit’ references to ‘Review and submit’.
+
+  docs: Remove all contact CTAs.
+
+  example-site: Change all ‘Confirm and submit’ references to ‘Review and submit’.
+
+  yourgov: Change all ‘Confirm and submit’ references to ‘Review and submit’.
+
+### Patch Changes
+
+- f0142309238: docs: Add pattern documentation page 'Warn before leaving'.
+- 8e0945eda9b: docs: Update copyright to year 2025 in code snippets.
+
+  footer: Update copyright to year 2025 in docs.
+
+- 0055b768eee: docs: Add ’Ask users for dates and times’ pattern page.
+- 7cb232595ca: summary-list: Update docs with `VisuallyHidden` link and import reference.
+
+  table: Fix and lint code sample examples. Update docs with `VisuallyHidden` link and import reference.
+
+- 9daa408bce2: docs: Add 'Review and submit' pattern page.
+- bbb49667d74: accordion: Update colour section in docs.
+
+  ag-branding: Add colour section in docs.
+
+  autocomplete: Add colour section in docs.
+
+  avatar: Add colour section in docs.
+
+  breadcrumbs: Add colour section in docs.
+
+  button: Update colour section in docs.
+
+  call-to-action: Add colour section in docs.
+
+  callout: Update colour section in docs.
+
+  card: Update colour section in current and legacy docs.
+
+  checkbox: Add colour section in docs.
+
+  combobox: Add colour section in docs.
+
+  date-picker-next: Add colour section in docs.
+
+  date-picker: Add colour section in docs.
+
+  date-range-picker-next: Add colour section in docs.
+
+  date-range-picker: Add colour section in docs.
+
+  details: Add colour section in docs.
+
+  direction-link: Add colour section in docs.
+
+  divider-with-text: Update colour section in docs.
+
+  divider: Add colour section in docs.
+
+  docs: Add support for colour component support for code snippets in documentation.
+
+  dropdown-menu: Add colour section in docs.
+
+  feature-link-list: Add colour section in docs.
+
+  file-input: Add colour section in docs.
+
+  file-upload: Add colour section in docs.
+
+  filter-sidebar: Add colour section in docs.
+
+  footer: Add colour section in docs.
+
+  global-alert: Add colour section in docs.
+
+  grouped-fields: Add colour section in docs.
+
+  header: Add colour section in docs.
+
+  hero-banner: Add colour section in docs.
+
+  icon: Add colour section in docs.
+
+  indicator-dot: Add colour section in docs.
+
+  inpage-nav: Add colour section in docs.
+
+  link-list: Add colour section in docs.
+
+  main-nav: Add colour section in docs.
+
+  notification-badge: Add colour section in docs.
+
+  page-alert: Add colour section in docs.
+
+  pagination: Add colour section in docs.
+
+  password-input: Add colour section in docs.
+
+  progress-indicator: Add colour section in docs.
+
+  radio: Add colour section in docs.
+
+  search-box: Update colour section in docs.
+
+  search-input: Add colour section in docs.
+
+  section-alert: Update colour section in docs.
+
+  select: Add colour section in docs.
+
+  side-nav: Add colour section in docs.
+
+  skeleton: Add colour section in docs.
+
+  status-badge: Add colour section in docs.
+
+  sub-nav: Add colour section in docs.
+
+  summary-list: Add colour section in docs.
+
+  switch: Add colour section in docs.
+
+  table: Add colour section in docs.
+
+  tabs: Add colour section in docs.
+
+  tags: Add colour section in docs.
+
+  task-list: Add colour section in docs.
+
+  text-input: Add colour section in docs.
+
+  text-link: Add colour section in docs.
+
+  textarea: Add colour section in docs.
+
+  time-input: Add colour section in docs.
+
+  time-picker: Add colour section in docs.
+
+  toggle-button: Add colour section in docs.
+
+- 3daabdcd795: docs: Add CRUD tables documentation in patterns.
+- d4fd9d01741: docs: Add ’Helpful form content’ pattern page.
+- 5516760620d: docs: Add 'yourGov example application' pattern page.
+- Updated dependencies [a898848e32e]
+- Updated dependencies [5cd422a9fe2]
+- Updated dependencies [b5635a629fd]
+- Updated dependencies [dd3c366a455]
+- Updated dependencies [5e2b99dd4c0]
+- Updated dependencies [2a6cb20bca0]
+- Updated dependencies [736ad093ff5]
+- Updated dependencies [687d9dba075]
+- Updated dependencies [5cbdd2f97c1]
+- Updated dependencies [d297f81fe25]
+- Updated dependencies [48661f6da5b]
+  - @ag.ds-next/[email protected]
+
 ## 0.17.0
 
 ### Minor Changes

docs/components/AccessibilityLayout.tsx

@@ -0,0 +1,140 @@
+import { PropsWithChildren } from 'react';
+import { SiteLayout } from './SiteLayout';
+import { PageLayout } from './PageLayout';
+import { PageTitle } from './PageTitle';
+
+export const ACCESSIBILITY_PAGES = {
+	'accessibility-overview': {
+		label: 'Accessibility overview',
+		pageTitle: 'Accessibility overview',
+		description:
+			'Our approach to building components that provide a great user experience for all users.',
+	},
+	'aria-and-semantic-code': {
+		label: 'ARIA and semantic code',
+		pageTitle: 'ARIA and semantic code',
+		description:
+			'The Accessible Rich Internet Application (ARIA) specification helps you to create accessible digital products and services.',
+	},
+	'clear-communication': {
+		label: 'Clear communication',
+		pageTitle: 'Clear communication',
+		description:
+			'Write in plain language and organise content logically. This makes reading easier for everyone, but it’s essential for anyone with English as a second language.',
+	},
+	'colour-and-contrast': {
+		label: 'Colour and contrast',
+		pageTitle: 'Colour and contrast',
+		description:
+			'Provide good contrast and avoid using colour alone to convey meaning. This enhances readability for everyone, especially those with colour vision differences.',
+	},
+	'consistent-design': {
+		label: 'Consistent design',
+		pageTitle: 'Consistent design',
+		description:
+			'Use the design system components predictably. It reduces cognitive load for everyone, but it’s essential for users with learning disabilities.',
+	},
+	'error-management': {
+		label: 'Error management',
+		pageTitle: 'Error management',
+		description:
+			'Provide clear, specific error messages. It helps all users recover from errors, but it’s essential for those with cognitive disabilities.',
+	},
+	'focus-management': {
+		label: 'Focus management',
+		pageTitle: 'Focus management',
+		description:
+			'The focus indicator shows which element has focus. Good focus management helps all users track their position, but it’s essential for people with low vision.',
+	},
+	'keyboard-accessibility': {
+		label: 'Keyboard accessibility',
+		pageTitle: 'Keyboard accessibility',
+		description:
+			'Make all functionality available via keyboard. It’s helpful for power users, but essential for people who use assistive technology.',
+	},
+	'motion-and-animation': {
+		label: 'Motion and animation',
+		pageTitle: 'Motion and animation',
+		description:
+			'Include controls to reduce or disable motion and avoid flashing content. This provides a comfortable experience, especially for those with vestibular or seizure conditions.',
+	},
+	'states-and-status': {
+		label: 'States and status',
+		pageTitle: 'States and status',
+		description:
+			'Clearly communicate change in state or status to all users. This keeps users informed about what’s happening, but it’s essential for people using assistive technologies.',
+	},
+	'text-sizing-and-spacing': {
+		label: 'Text sizing and spacing',
+		pageTitle: 'Text sizing and spacing',
+		description:
+			'Ensure adequate text size and spacing. This improves readability and reduces eye strain for everyone, but it’s essential for people with low vision or dyslexia.',
+	},
+	timing: {
+		label: 'Timing',
+		pageTitle: 'Timing',
+		description:
+			'Allow users to extend, pause or turn off time limits. This reduces pressure for everyone, but it’s essential for people who need more time to interact.',
+	},
+} as const;
+
+export const ACCESSIBILITY_NAV_LINKS = Object.entries(ACCESSIBILITY_PAGES).map(
+	([key, item]) => ({
+		href: `/foundations/accessibility/${key}`,
+		...item,
+	})
+);
+
+const getBreadcrumbs = (currentPageTitle: string) => {
+	return [
+		{
+			label: 'Home',
+			href: '/',
+		},
+		{
+			label: 'Foundations',
+			href: '/foundations',
+		},
+		{
+			label: 'Accessibility',
+			href: '/foundations/accessibility',
+		},
+		{
+			label: currentPageTitle,
+		},
+	];
+};
+
+type AccessibilityLayoutProps = PropsWithChildren<{
+	description: string;
+	editPath: string;
+	title: string;
+}>;
+
+export const AccessibilityLayout = ({
+	children,
+	description,
+	editPath,
+	title,
+}: AccessibilityLayoutProps) => {
+	return (
+		<SiteLayout applyMainElement={false}>
+			<PageLayout
+				applyMainElement
+				breadcrumbs={getBreadcrumbs(title)}
+				editPath={editPath}
+				sideNav={{
+					title: 'Accessibility',
+					titleLink: '/foundations/accessibility',
+					items: ACCESSIBILITY_NAV_LINKS.map(({ href, label }) => ({
+						href,
+						label,
+					})),
+				}}
+			>
+				<PageTitle introduction={description} title={title} />
+				{children}
+			</PageLayout>
+		</SiteLayout>
+	);
+};