docs, conditional-field-container: update patterns and initial release of component

[atlee025]

Updated the patterns page for Conditional Reveal to the new pattern. Added new component (ConditionalFieldContainer) to support the conditional reveal pattern and design.

Updated yourGov and example-site to match new conditional reveal pattern. Also modified yourGov form to refocus on a heading when form renders and duplicate require text.

View preview

View conditional-reveal patterns page

View conditional-field-container components page

Checklist

Preflight

• Prefix the PR title with the slug of the package or component - e.g. accordion: Updated padding or docs: Updated header links
• Describe the changes clearly in the PR description
• Read and check your code before tagging someone for review
• Create a changeset file by running yarn changeset. Learn more about change management.

Testing

• Manually test component in various modern browsers at various sizes (use Browserstack)
• Manually test component in various devices (phone, tablet, desktop)
• Manually test component using a keyboard
• Manually test component using a screen reader
• Manually tested in dark mode
• Component meets Web Content Accessibility Guidelines (WCAG) 2.1 standards
• Add any necessary unit tests (HTML validation, snapshots etc)
• Run yarn test to ensure tests are passing. If required, run yarn test -u to update any generated snapshots.

Documentation

• Create or update documentation on the website
• Create or update stories for Storybook
• Create or update stories for Playroom snippets

Creating new component

• Add documentation for the component (docs/overview.mdx and docs/code.mdx at a minimum)
• Preconstruct entrypoint has been created (run yarn in the root of the repo to do this)
• Changeset file includes a minor
• Export components for docs site and Playroom (docs/components/designSystemComponents.tsx)
• Add component to Kitchen Sink (.storybook/stories/KitchenSink.tsx)
• Add snippets to Playroom (docs/playroom/snippets.ts)
• Add figmaGalleryNodeId to Docs (docs/components/pictograms/index.tsx)
• Add pictogram to Docs (docs/components/pictograms/index.tsx)

[changeset-bot]

🦋 Changeset detected

Latest commit: d7aef90

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@ag.ds-next/react	Minor
@ag.ds-next/docs	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

PR Preview Action v1.6.1
Preview removed because the pull request was closed.
2025-04-28 02:05 UTC

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
25.8% Duplication on New Code

See analysis details on SonarQube Cloud