agriculturegovau · stowball · Dec 17, 2024
diff --git a/docs/components/PkgLayout.tsx b/docs/components/PkgLayout.tsx
@@ -85,6 +85,11 @@ export function PkgLayout({
 					<Fragment>
 						{!pkg.unreleased ? (
 							<Prose>
+								<p>
+									{pkg.title} component(s) can be imported via the{' '}
+									<code>{pkg.name}</code> entrypoint in the{' '}
+									<code>@ag.ds-next/react</code> package.
+								</p>
 								<pre>
 									<code>{`import { ... } from '@ag.ds-next/react/${pkg.name}';`}</code>
 								</pre>

diff --git a/docs/lib/mdx/packages.ts b/docs/lib/mdx/packages.ts
@@ -38,10 +38,15 @@ async function getPkgSubNavItems(slug: string) {
 		const meta = pkgNavMetaData(slug, data);
 		return [
 			{
-				label: 'Overview',
+				label: 'Usage',
 				href: `/components/${meta.slug}`,
 				path: pkgReadmePath(slug),
 			},
+			{
+				label: 'Props',
+				href: `/components/${meta.slug}/code`,
+				path: `${pkgDocsPath(slug)}/code.mdx`,
+			},
 			{
 				label: 'Rationale',
 				href: `/components/${meta.slug}/rationale`,
@@ -52,11 +57,6 @@ async function getPkgSubNavItems(slug: string) {
 				href: `/components/${meta.slug}/content`,
 				path: `${pkgDocsPath(slug)}/content.mdx`,
 			},
-			{
-				label: 'Code',
-				href: `/components/${meta.slug}/code`,
-				path: `${pkgDocsPath(slug)}/code.mdx`,
-			},
 			{
 				label: 'Accessibility',
 				href: `/components/${meta.slug}/accessibility`,

diff --git a/docs/pages/components/[slug]/code.tsx b/docs/pages/components/[slug]/code.tsx
@@ -46,16 +46,6 @@ export default function PackagesCode({
 					]}
 				/>
 				<Prose id="pkg-content">
-					<h2 id="usage">Usage</h2>
-					<p>
-						{pkg.title} components can be imported via the{' '}
-						<code>{pkg.name}</code> entrypoint in the{' '}
-						<code>@ag.ds-next/react</code> package.
-					</p>
-					<p>For example:</p>
-					<pre>
-						<code>{`import { ... } from '@ag.ds-next/react/${pkg.name}';`}</code>
-					</pre>
 					<MDXRemote {...source} components={mdxComponents} />
 					<h2 id="source">Source</h2>
 					<p>

diff --git a/docs/pages/components/[slug]/index.tsx b/docs/pages/components/[slug]/index.tsx
@@ -43,6 +43,7 @@ export default function Packages({
 					/>
 				) : null}
 				<Prose id="pkg-content">
+					<h2 id="overview">Overview</h2>
 					<MDXRemote {...source} components={mdxComponents} />
 					{relatedComponents?.length ? (
 						<Fragment>
@@ -137,7 +138,16 @@ export const getStaticProps: GetStaticProps<
 			pkg,
 			navLinks,
 			breadcrumbs,
-			toc,
+			toc: [
+				{
+					title: 'Overview',
+					slug: 'overview',
+					id: 'overview',
+					level: 2,
+					items: [],
+				},
+				...toc,
+			],
 			source: pkgContent.source,
 			relatedPatterns,
 			relatedComponents,

diff --git a/packages/react/src/a11y/docs/code.mdx b/packages/react/src/a11y/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="VisuallyHidden" />
 
 <ComponentPropsTable name="ExternalLinkCallout" />
diff --git a/packages/react/src/accordion/docs/code.mdx b/packages/react/src/accordion/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="Accordion" />
 
 <ComponentPropsTable name="AccordionItem" />

diff --git a/packages/react/src/ag-branding/docs/code.mdx b/packages/react/src/ag-branding/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="Logo" />
diff --git a/packages/react/src/app-layout/docs/code.mdx b/packages/react/src/app-layout/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="AppLayout" />
 
 <ComponentPropsTable name="AppLayoutHeader" />

diff --git a/packages/react/src/autocomplete/docs/code.mdx b/packages/react/src/autocomplete/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="Autocomplete" />
 
 <ComponentPropsTable name="AutocompleteRenderItem" />
diff --git a/packages/react/src/avatar/docs/code.mdx b/packages/react/src/avatar/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="Avatar" />
diff --git a/packages/react/src/box/docs/code.mdx b/packages/react/src/box/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="Box" />
diff --git a/packages/react/src/breadcrumbs/docs/code.mdx b/packages/react/src/breadcrumbs/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="Breadcrumbs" />
diff --git a/packages/react/src/button/docs/code.mdx b/packages/react/src/button/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="Button" />
 
 <ComponentPropsTable name="ButtonLink" />
diff --git a/packages/react/src/call-to-action/docs/code.mdx b/packages/react/src/call-to-action/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="CallToActionLink" />
 
 <ComponentPropsTable name="CallToActionButton" />
diff --git a/packages/react/src/callout/docs/code.mdx b/packages/react/src/callout/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="Callout" />
 
 <ComponentPropsTable name="CalloutTitle" />
diff --git a/packages/react/src/card/docs/code.mdx b/packages/react/src/card/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="Card" />
 
 <ComponentPropsTable name="CardInner" />

diff --git a/packages/react/src/checkbox/docs/code.mdx b/packages/react/src/checkbox/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="Checkbox" />
diff --git a/packages/react/src/columns/docs/code.mdx b/packages/react/src/columns/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="Columns" />
 
 <ComponentPropsTable name="Column" />
diff --git a/packages/react/src/combobox/docs/code.mdx b/packages/react/src/combobox/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="Combobox" />
 
 <ComponentPropsTable name="ComboboxAsync" />

diff --git a/packages/react/src/content/docs/code.mdx b/packages/react/src/content/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="PageContent" />
 
 <ComponentPropsTable name="SectionContent" />

diff --git a/packages/react/src/control-group/docs/code.mdx b/packages/react/src/control-group/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="ControlGroup" />
diff --git a/packages/react/src/core/docs/code.mdx b/packages/react/src/core/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="Core" />
 
 <ComponentPropsTable name="CoreProvider" />
diff --git a/packages/react/src/date-picker/docs/code.mdx b/packages/react/src/date-picker/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="DatePicker" />
diff --git a/packages/react/src/date-range-picker/docs/code.mdx b/packages/react/src/date-range-picker/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="DateRangePicker" />
diff --git a/packages/react/src/details/docs/code.mdx b/packages/react/src/details/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="Details" />
diff --git a/packages/react/src/direction-link/docs/code.mdx b/packages/react/src/direction-link/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="DirectionLink" />
 
 <ComponentPropsTable name="DirectionButton" />
diff --git a/packages/react/src/divider/docs/code.mdx b/packages/react/src/divider/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="Divider" />
diff --git a/packages/react/src/drawer/docs/code.mdx b/packages/react/src/drawer/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="Drawer" />
diff --git a/packages/react/src/dropdown-menu/docs/code.mdx b/packages/react/src/dropdown-menu/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="DropdownMenu" />
 
 <ComponentPropsTable name="DropdownMenuButton" />

diff --git a/packages/react/src/feature-link-list/docs/code.mdx b/packages/react/src/feature-link-list/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="FeatureLinkList" />
diff --git a/packages/react/src/field/docs/code.mdx b/packages/react/src/field/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="Field" />
 
 <ComponentPropsTable name="FieldContainer" />

diff --git a/packages/react/src/fieldset/docs/code.mdx b/packages/react/src/fieldset/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="Fieldset" />
 
 <ComponentPropsTable name="FieldsetLegend" />
diff --git a/packages/react/src/file-input/docs/code.mdx b/packages/react/src/file-input/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="FileInput" />
diff --git a/packages/react/src/file-upload/docs/code.mdx b/packages/react/src/file-upload/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="FileUpload" />
diff --git a/packages/react/src/filter-sidebar/docs/code.mdx b/packages/react/src/filter-sidebar/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="FilterSidebar" />
diff --git a/packages/react/src/flex/docs/code.mdx b/packages/react/src/flex/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="Flex" />
diff --git a/packages/react/src/footer/docs/code.mdx b/packages/react/src/footer/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="Footer" />
 
 <ComponentPropsTable name="FooterDivider" />
diff --git a/packages/react/src/form-stack/docs/code.mdx b/packages/react/src/form-stack/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="FormStack" />
diff --git a/packages/react/src/global-alert/docs/code.mdx b/packages/react/src/global-alert/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="GlobalAlert" />
diff --git a/packages/react/src/grouped-fields/docs/code.mdx b/packages/react/src/grouped-fields/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="GroupedFields" />
diff --git a/packages/react/src/header/docs/code.mdx b/packages/react/src/header/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="Header" />
diff --git a/packages/react/src/heading/docs/code.mdx b/packages/react/src/heading/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="Heading" />
diff --git a/packages/react/src/hero-banner/docs/code.mdx b/packages/react/src/hero-banner/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="HeroBanner" />
 
 <ComponentPropsTable name="HeroBannerTitleContainer" />

diff --git a/packages/react/src/icon/docs/code.mdx b/packages/react/src/icon/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="AvatarIcon" />
diff --git a/packages/react/src/indicator-dot/docs/code.mdx b/packages/react/src/indicator-dot/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="IndicatorDot" />
diff --git a/packages/react/src/inpage-nav/docs/code.mdx b/packages/react/src/inpage-nav/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="InpageNav" />
diff --git a/packages/react/src/link-list/docs/code.mdx b/packages/react/src/link-list/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="LinkList" />
diff --git a/packages/react/src/list/docs/code.mdx b/packages/react/src/list/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="UnorderedList" />
 
 <ComponentPropsTable name="OrderedList" />

diff --git a/packages/react/src/loading/docs/code.mdx b/packages/react/src/loading/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="LoadingBlanket" />
 
 <ComponentPropsTable name="LoadingDots" />
diff --git a/packages/react/src/main-nav/docs/code.mdx b/packages/react/src/main-nav/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="MainNav" />
diff --git a/packages/react/src/modal/docs/code.mdx b/packages/react/src/modal/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="Modal" />
diff --git a/packages/react/src/notification-badge/docs/code.mdx b/packages/react/src/notification-badge/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="NotificationBadge" />
diff --git a/packages/react/src/page-alert/docs/code.mdx b/packages/react/src/page-alert/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="PageAlert" />
 
 <ComponentPropsTable name="PageAlertTitle" />
diff --git a/packages/react/src/pagination/docs/code.mdx b/packages/react/src/pagination/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="Pagination" />
 
 <ComponentPropsTable name="PaginationButtons" />
diff --git a/packages/react/src/password-input/docs/code.mdx b/packages/react/src/password-input/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="PasswordInput" />
diff --git a/packages/react/src/progress-indicator/docs/code.mdx b/packages/react/src/progress-indicator/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="ProgressIndicator" />
diff --git a/packages/react/src/prose/docs/code.mdx b/packages/react/src/prose/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="Prose" />
diff --git a/packages/react/src/radio/docs/code.mdx b/packages/react/src/radio/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="Radio" />
diff --git a/packages/react/src/search-box/docs/code.mdx b/packages/react/src/search-box/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="SearchBox" />
 
 <ComponentPropsTable name="SearchBoxInput" />

diff --git a/packages/react/src/search-input/docs/code.mdx b/packages/react/src/search-input/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="SearchInput" />
diff --git a/packages/react/src/section-alert/docs/code.mdx b/packages/react/src/section-alert/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="SectionAlert" />
diff --git a/packages/react/src/select/docs/code.mdx b/packages/react/src/select/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="Select" />
diff --git a/packages/react/src/side-nav/docs/code.mdx b/packages/react/src/side-nav/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="SideNav" />
diff --git a/packages/react/src/skeleton/docs/code.mdx b/packages/react/src/skeleton/docs/code.mdx
@@ -1,5 +1,3 @@
-## Props
-
 <ComponentPropsTable name="SkeletonHeading" />
 
 <ComponentPropsTable name="SkeletonText" />

diff --git a/packages/react/src/skip-link/docs/code.mdx b/packages/react/src/skip-link/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="SkipLinks" />
diff --git a/packages/react/src/stack/docs/code.mdx b/packages/react/src/stack/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="Stack" />
diff --git a/packages/react/src/status-badge/docs/code.mdx b/packages/react/src/status-badge/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="StatusBadge" />
diff --git a/packages/react/src/sub-nav/docs/code.mdx b/packages/react/src/sub-nav/docs/code.mdx
@@ -1,3 +1 @@
-## Props
-
 <ComponentPropsTable name="SubNav" />
diff --git a/packages/react/src/summary-list/docs/code.mdx b/packages/react/src/summary-list/docs/code.mdx
@@ -16,8 +16,6 @@ It is important that this component is composed correctly to ensure the correct
 </SummaryList>
 ```
 
-## Props
-
 <ComponentPropsTable name="SummaryList" />
 <ComponentPropsTable name="SummaryListItem" />
 <ComponentPropsTable name="SummaryListItemTerm" />
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1 @@
		## Props

		<ComponentPropsTable name="Breadcrumbs" />
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1 @@
		## Props

		<ComponentPropsTable name="Checkbox" />
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1 @@
		## Props

		<ComponentPropsTable name="ControlGroup" />
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1 @@
		## Props

		<ComponentPropsTable name="DatePicker" />
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1 @@
		## Props

		<ComponentPropsTable name="DateRangePicker" />
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1 @@
		## Props

		<ComponentPropsTable name="FeatureLinkList" />
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1 @@
		## Props

		<ComponentPropsTable name="FileInput" />
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1 @@
		## Props

		<ComponentPropsTable name="FileUpload" />
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1 @@
		## Props

		<ComponentPropsTable name="FilterSidebar" />
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1 @@
		## Props

		<ComponentPropsTable name="FormStack" />