Merge remote-tracking branch 'origin/develop' into date-range-picker-…

…ux-enhancements
agriculturegovau · Jan 7, 2025 · ea8a1f4 · ea8a1f4
2 parents 20a65db + 6c7351c
commit ea8a1f4
Show file tree

Hide file tree

Showing 475 changed files with 2,761 additions and 2,697 deletions.
diff --git a/.changeset/itchy-coats-argue.md b/.changeset/itchy-coats-argue.md
@@ -0,0 +1,5 @@
+---
+'@ag.ds-next/react': patch
+---
+
+loading: Announce `'fullscreen'` `LoadingBlanket` assertively.
diff --git a/.changeset/little-jars-search.md b/.changeset/little-jars-search.md
@@ -0,0 +1,8 @@
+---
+'@ag.ds-next/react': patch
+'@ag.ds-next/example-site': patch
+'@ag.ds-next/yourgov': patch
+'@ag.ds-next/docs': patch
+---
+
+chore: Added `react/jsx-sort-props` eslint rule and sorted all props.
diff --git a/.changeset/many-dancers-invent.md b/.changeset/many-dancers-invent.md
@@ -0,0 +1,6 @@
+---
+'@ag.ds-next/react': minor
+'@ag.ds-next/docs': minor
+---
+
+task-list: Add new `'notRequired'` status.
diff --git a/.changeset/plop-create-ProgressNotRequired.md b/.changeset/plop-create-ProgressNotRequired.md
@@ -0,0 +1,5 @@
+---
+'@ag.ds-next/react': minor
+---
+
+icon: Created new icon, ProgressNotRequiredIcon.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,18 +9,6 @@ module.exports = {
 		'prettier',
 	],
 	rules: {
-		'no-restricted-imports': [
-			'error',
-			{
-				paths: [
-					{
-						name: 'react',
-						importNames: ['useId'],
-						message: "Please import 'useId' from '/core' instead.",
-					},
-				],
-			},
-		],
 		'@typescript-eslint/ban-types': [
 			'error',
 			{
@@ -49,6 +37,19 @@ module.exports = {
 				pathGroupsExcludedImportTypes: ['builtin'],
 			},
 		],
+		'no-restricted-imports': [
+			'error',
+			{
+				paths: [
+					{
+						name: 'react',
+						importNames: ['useId'],
+						message: "Please import 'useId' from '/core' instead.",
+					},
+				],
+			},
+		],
+		'react/jsx-sort-props': ['error'],
 	},
 	overrides: [
 		{

diff --git a/.storybook/components/LinkComponent.tsx b/.storybook/components/LinkComponent.tsx
@@ -15,9 +15,9 @@ export const LinkComponent = forwardRef<HTMLAnchorElement, LinkComponentProps>(
 		// Regex finds links starting with: `http://` | `https://` | `//`
 		const hrefAsString = typeof href === 'string' ? href : href?.pathname;
 		if (hrefAsString && /^(https?:\/\/|\/\/)/i.test(hrefAsString)) {
-			return <a ref={ref} href={hrefAsString} {...props} />;
+			return <a href={hrefAsString} ref={ref} {...props} />;
 		}
 
-		return <Link ref={ref} href={href} {...props} />;
+		return <Link href={href} ref={ref} {...props} />;
 	}
 );
diff --git a/.storybook/components/PageTemplate.tsx b/.storybook/components/PageTemplate.tsx
@@ -28,14 +28,14 @@ export function PageTemplate({
 			<Stack palette="dark">
 				<Header
 					background="bodyAlt"
-					logo={<Logo />}
 					heading="Export Service"
+					logo={<Logo />}
 					subline="Supporting Australian agricultural exports"
 				/>
 				<MainNav
+					activePath="#home"
 					focusMode={focusMode}
 					id="main-nav"
-					activePath="#home"
 					items={[
 						{ label: 'Home', href: '#home' },
 						{ label: 'Category', href: '#category' },
@@ -56,6 +56,7 @@ export function PageTemplate({
 				<Footer background="bodyAlt">
 					<nav aria-label="footer">
 						<LinkList
+							horizontal
 							links={[
 								{ label: 'Home', href: '/' },
 								{
@@ -71,7 +72,6 @@ export function PageTemplate({
 									href: 'https://github.com/agriculturegovau/agds-starter-kit',
 								},
 							]}
-							horizontal
 						/>
 					</nav>
 					<FooterDivider />

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -102,12 +102,12 @@ const preview: Preview = {
 			const theme = storybookThemes[context.globals.brand as StorybookThemes];
 			const palette = context.globals.palette;
 			return (
-				<Core theme={theme} linkComponent={LinkComponent}>
+				<Core linkComponent={LinkComponent} theme={theme}>
 					<Box
-						width="100%"
+						background="body"
 						minHeight="100vh"
 						palette={palette}
-						background="body"
+						width="100%"
 					>
 						<Story />
 					</Box>

diff --git a/.storybook/stories/DataFiltering/ListFiltering.tsx b/.storybook/stories/DataFiltering/ListFiltering.tsx
@@ -37,11 +37,11 @@ export const ListFiltering = () => {
 		<Columns>
 			<Column columnSpan={{ xs: 12, md: 4, lg: 3 }}>
 				<Stack
-					gap={1}
 					css={{
 						// This margin ensures that the left and column align nicely on desktop
 						[tokens.mediaQuery.min.md]: { marginTop: '3.5rem' },
 					}}
+					gap={1}
 				>
 					<FilterSidebar
 						activeFiltersCount={activeFiltersCount}
@@ -57,7 +57,6 @@ export const ListFiltering = () => {
 							<FilterServicesSelect block />
 							<DateRangePicker
 								fromLabel="Registered from"
-								toLabel="Registered to"
 								hideOptionalLabel
 								onChange={(requestDate) => setFilter({ requestDate })}
 								onFromInputChange={(from) =>
@@ -70,6 +69,7 @@ export const ListFiltering = () => {
 										requestDate: { ...filters.requestDate, to },
 									})
 								}
+								toLabel="Registered to"
 								value={filters.requestDate}
 							/>
 						</FormStack>
@@ -80,36 +80,36 @@ export const ListFiltering = () => {
 				</Stack>
 			</Column>
 			<Column
-				as="main"
 				aria-label="List of establishments"
-				id="main-content"
-				tabIndex={-1}
-				css={{ '&:focus': { outline: 'none' } }}
+				as="main"
 				columnSpan={{ xs: 12, md: 8 }}
 				columnStart={{ lg: 5 }}
+				css={{ '&:focus': { outline: 'none' } }}
+				id="main-content"
+				tabIndex={-1}
 			>
 				<Stack gap={2}>
 					<Flex
-						flexDirection={{ xs: 'column', md: 'row' }}
-						justifyContent={{ xs: 'flex-start', md: 'space-between' }}
 						alignItems={{ xs: 'flex-start', md: 'flex-end' }}
-						gap={1}
-						paddingBottom={{ md: 1 }}
 						borderBottom
 						borderBottomWidth={{ xs: 'none', md: 'sm' }}
+						flexDirection={{ xs: 'column', md: 'row' }}
+						gap={1}
+						justifyContent={{ xs: 'flex-start', md: 'space-between' }}
+						paddingBottom={{ md: 1 }}
 					>
 						<Text
 							as="h2"
-							lineHeight="heading"
 							fontSize="md"
 							fontWeight={{
 								xs: 'normal',
 								md: 'bold',
 							}}
+							lineHeight="heading"
 						>
 							{tableCaption}
 						</Text>
-						<div role="status" css={visuallyHiddenStyles}>
+						<div css={visuallyHiddenStyles} role="status">
 							{loading ? 'Loading audits' : ''}
 						</div>
 						<SortBySelect />

diff --git a/.storybook/stories/DataFiltering/Table.stories.tsx b/.storybook/stories/DataFiltering/Table.stories.tsx
@@ -86,7 +86,7 @@ export const FilterAndSelectSmall = {
 									table.
 								</Text>
 							</Callout>
-							<TableFilteringSmall selectable={true} />
+							<TableFilteringSmall selectable />
 						</Stack>
 					</PageContent>
 				</DataProvider>
@@ -153,7 +153,7 @@ export const FilterAndSelectMedium = {
 									button is pressed.
 								</Text>
 							</Callout>
-							<TableFilteringMedium selectable={true} />
+							<TableFilteringMedium selectable />
 						</Stack>
 					</PageContent>
 				</DataProvider>
@@ -221,7 +221,7 @@ export const FilterAndSelectLarge = {
 									area next to the button which opens the drawer.
 								</Text>
 							</Callout>
-							<TableFilteringLarge selectable={true} />
+							<TableFilteringLarge selectable />
 						</Stack>
 					</PageContent>
 				</DataProvider>

diff --git a/.storybook/stories/DataFiltering/TableFilteringLarge.tsx b/.storybook/stories/DataFiltering/TableFilteringLarge.tsx
@@ -44,29 +44,29 @@ export const TableFilteringLarge = ({
 						<FilterBarGroup>
 							<FilterSearchInput />
 							<Button
+								iconBefore={FilterIcon}
 								onClick={openDrawer}
 								variant="secondary"
-								iconBefore={FilterIcon}
 							>
 								Show filters
 							</Button>
 						</FilterBarGroup>
 						<SortBySelect />
 					</FilterBar>
 					<DashboardFilterDrawer
-						isDrawerOpen={isDrawerOpen}
 						closeDrawer={closeDrawer}
+						isDrawerOpen={isDrawerOpen}
 					/>
 					<ActiveFilters />
 				</FilterRegion>
 				{selectable && (
-					<Box padding={1} borderBottom>
+					<Box borderBottom padding={1}>
 						<DataTableSelectAllCheckbox />
 					</Box>
 				)}
 				<DataTable
-					ref={tableRef}
 					headingId={headingId}
+					ref={tableRef}
 					selectable={selectable}
 				/>
 			</Stack>

diff --git a/.storybook/stories/DataFiltering/TableFilteringMedium.tsx b/.storybook/stories/DataFiltering/TableFilteringMedium.tsx
@@ -60,15 +60,14 @@ export const TableFilteringMedium = ({
 							<FilterSearchInput />
 							<FilterStatusSelect />
 							<Button
-								onClick={toggleIsOpen}
-								variant="secondary"
-								iconBefore={FilterIcon}
-								iconAfter={isOpen ? ChevronUpIcon : ChevronDownIcon}
-								// accessibility
-								aria-label="more filters"
-								id={buttonId}
 								aria-controls={bodyId}
 								aria-expanded={isOpen}
+								aria-label="more filters"
+								iconAfter={isOpen ? ChevronUpIcon : ChevronDownIcon}
+								iconBefore={FilterIcon}
+								id={buttonId}
+								onClick={toggleIsOpen}
+								variant="secondary"
 							>
 								{isOpen ? 'Hide filters' : 'Show filters'}
 							</Button>
@@ -84,19 +83,19 @@ export const TableFilteringMedium = ({
 						</Box>
 					</FilterBar>
 					<FilterAccordion
-						id={bodyId}
 						ariaLabelledBy={buttonId}
+						id={bodyId}
 						isOpen={isOpen}
 					/>
 					<ActiveFilters />
 				</FilterRegion>
 
 				{selectable && (
-					<Box paddingLeft={0.75} paddingY={0.75} borderBottom>
+					<Box borderBottom paddingLeft={0.75} paddingY={0.75}>
 						<DataTableSelectAllCheckbox />
 					</Box>
 				)}
-				<DataTable selectable={selectable} headingId={headingId} />
+				<DataTable headingId={headingId} selectable={selectable} />
 			</Stack>
 			<DashboardPagination />
 		</Stack>

diff --git a/.storybook/stories/DataFiltering/TableFilteringSmall.tsx b/.storybook/stories/DataFiltering/TableFilteringSmall.tsx
@@ -42,7 +42,7 @@ export const TableFilteringSmall = ({
 					</FilterBar>
 				</FilterRegion>
 				{selectable && (
-					<Box paddingLeft={0.75} paddingY={0.75} borderBottom>
+					<Box borderBottom paddingLeft={0.75} paddingY={0.75}>
 						<DataTableSelectAllCheckbox />
 					</Box>
 				)}

diff --git a/.storybook/stories/DataFiltering/components/ActiveFilters.tsx b/.storybook/stories/DataFiltering/components/ActiveFilters.tsx
@@ -108,16 +108,16 @@ export const ActiveFilters = () => {
 	}
 
 	return (
-		<Flex flexWrap="wrap" gap={0.75} alignItems="flex-end">
+		<Flex alignItems="flex-end" flexWrap="wrap" gap={0.75}>
 			<Tags
 				heading={<Text fontWeight="bold">Active filters</Text>}
 				items={tags}
 			/>
 			<Button
+				iconAfter={CloseIcon}
+				onClick={resetFilters}
 				size="sm"
 				variant="text"
-				onClick={resetFilters}
-				iconAfter={CloseIcon}
 			>
 				Clear filters
 			</Button>

diff --git a/.storybook/stories/DataFiltering/components/DashboardFilterDrawer.tsx b/.storybook/stories/DataFiltering/components/DashboardFilterDrawer.tsx
@@ -82,20 +82,20 @@ export const DashboardFilterDrawer = ({
 			}}
 		>
 			<Drawer
-				title="Filter by"
-				isOpen={isDrawerOpen}
-				onClose={cancel}
 				actions={
 					<ButtonGroup>
 						<Button onClick={applyFilters}>Apply filters</Button>
-						<Button variant="secondary" onClick={clearFilters}>
+						<Button onClick={clearFilters} variant="secondary">
 							Clear filters
 						</Button>
-						<Button variant="tertiary" onClick={cancel}>
+						<Button onClick={cancel} variant="tertiary">
 							Cancel
 						</Button>
 					</ButtonGroup>
 				}
+				isOpen={isDrawerOpen}
+				onClose={cancel}
+				title="Filter by"
 			>
 				<Stack gap={3}>
 					<Fieldset legend="Fieldset">
@@ -112,10 +112,10 @@ export const DashboardFilterDrawer = ({
 							<FilterAssigneeSelect block />
 							<DateRangePicker
 								fromLabel="Registered from"
-								toLabel="Registered to"
 								onChange={(requestDate) =>
 									setFormState({ ...formState, requestDate })
 								}
+								toLabel="Registered to"
 								value={formState.requestDate}
 							/>
 						</FormStack>

diff --git a/.storybook/stories/DataFiltering/components/DashboardPagination.tsx b/.storybook/stories/DataFiltering/components/DashboardPagination.tsx
@@ -41,10 +41,9 @@ export const DashboardPagination = () => {
 	return (
 		<PaginationButtons
 			currentPage={displayText.page}
-			onChange={(page) => setPagination({ perPage: displayText.perPage, page })}
-			totalPages={totalPages}
 			itemRangeText={displayText.itemRangeText}
 			itemsPerPage={displayText.perPage}
+			onChange={(page) => setPagination({ perPage: displayText.perPage, page })}
 			onItemsPerPageChange={(perPage) =>
 				setPagination({
 					page: getValidPage({
@@ -56,6 +55,7 @@ export const DashboardPagination = () => {
 					perPage,
 				})
 			}
+			totalPages={totalPages}
 		/>
 	);
 };