Helpful form content

<TextInput
	label="Phone number"
	hint="Any Australian mobile or landline. For example, 0444 111 222 or 02 9988 7766"
/>

() => {
	/**
	 * This implementation is for documentation purposes only.
	 * Use <ArticleLink> from ag.common/help-reference to handle drawers with help information.
	 *
	 * import { VisuallyHidden } from '@ag.ds-next/react/a11y';
	 */
	const [isDrawerOpen, openDrawer, closeDrawer] = useTernaryState(false);
	return (
		<>
			<Details iconBefore label="Why should I invite a new staff member?">
				<Flex flexDirection="column" gap={1}>
					<Text as="p">
						Inviting individuals to the service can help you streamline your
						operations. You can then assign them a role, so they can access
						necessary information and tasks.
					</Text>
					<Text as="p">
						Learn more about{' '}
						<TextLink
							href="/help/inviting-a-staff-member"
							onClick={(event) => {
								if (event.metaKey) return;
								event.preventDefault();
								openDrawer();
							}}
						>
							inviting a staff member
							<VisuallyHidden>, Opens in a side drawer</VisuallyHidden>
							<Box
								as="span"
								css={{
									display: 'inline',
									marginLeft: '0.25rem',
									position: 'relative',
									top: 3,
								}}
							>
								<MoveLeftIcon size="sm" weight="regular" />
							</Box>
						</TextLink>
					</Text>
				</Flex>
			</Details>
			<Drawer
				actions={<TextLinkExternal href="#">Open in new tab</TextLinkExternal>}
				isOpen={isDrawerOpen}
				onClose={closeDrawer}
				title="Inviting a staff member"
				width="lg"
			>
				<Stack gap={1.5}>
					<Text as="p" color="muted" fontSize="md">
						Inviting individuals to join your staff can bring numerous benefits
						to your business and help streamline your operations.
					</Text>
					<Text as="p">
						As your business grows, you’ll need to scale your team accordingly.
						Inviting new staff members allows you to expand your workforce in
						line with your evolving needs.
					</Text>
					<Text as="p">Below are a list of the types of roles available:</Text>
					<H2>Owner</H2>
					<Text as="p">
						Owners have the highest level of access. They can add, edit and
						remove managers and staff members. They can set rosters, send an
						receive messages with owners, employees and other managers.
					</Text>
					<H2>Manager</H2>
					<Text as="p">
						Managers can add, edit and remove staff members. They can set
						rosters, send an receive messages with owners, employees and other
						managers.
					</Text>
					<H2>Employee</H2>
					<Text as="p">
						Employees can see their shifts, send an receive messages with
						managers and edit their personal and contact information.
					</Text>
					<Callout title="Need help?">
						<Text as="p">
							Call <strong>02 9481 1122</strong> (9am to 5pm AEST Monday to
							Friday)
							<br />
							Email{' '}
							<TextLink href="mailto:emailaccount@yourgov.gov.au">
								emailaccount@yourgov.gov.au
							</TextLink>
						</Text>
					</Callout>
				</Stack>
			</Drawer>
		</>
	);
};

() => {
	/** import { VisuallyHidden } from '@ag.ds-next/react/a11y'; */
	const [isDrawerOpen, openDrawer, closeDrawer] = useTernaryState(false);
	return (
		<>
			<Text as="p">
				Learn more about{' '}
				<TextLink
					href="/help/access-requests"
					onClick={(event) => {
						if (event.metaKey) return;
						event.preventDefault();
						openDrawer();
					}}
				>
					understanding staff access requests
					<VisuallyHidden>, Opens in a side drawer</VisuallyHidden>
					<Box
						as="span"
						css={{
							display: 'inline',
							marginLeft: '0.25rem',
							position: 'relative',
							top: 3,
						}}
					>
						<MoveLeftIcon size="sm" weight="regular" />
					</Box>
				</TextLink>
			</Text>
			<Drawer
				actions={<TextLinkExternal href="#">Open in new tab</TextLinkExternal>}
				isOpen={isDrawerOpen}
				onClose={closeDrawer}
				title="Help"
			>
				<Stack gap={1.5}>
					<H2>Understanding staff access requests</H2>
					<Text as="p" color="muted" fontSize="md">
						Access requests allow your existing employees to apply for
						permissions to use specific business systems. This enable you to
						delegate tasks effectively and streamline your operations by giving
						employees the tools they need to contribute.
					</Text>
					<H3>Managing requests</H3>
					<Text as="p">
						You can accept or reject each access request based on the employee's
						role and responsibilities. Consider whether the employee needs
						system access to perform their assigned duties.
					</Text>
					<H3>Removing access</H3>
					<Text as="p">
						After granting access, you can remove it at any time if an employee
						no longer requires system access. You can also change their type of
						access as their role evolves. This might happen when:
					</Text>
					<UnorderedList>
						<ListItem>their role changes</ListItem>
						<ListItem>their responsibilities shift</ListItem>
						<ListItem>they complete a specific project</ListItem>
					</UnorderedList>
				</Stack>
			</Drawer>
		</>
	);
};

<Text as="p">
	For more information, go to{' '}
	<TextLinkExternal href="#">
		understanding safety requirements
	</TextLinkExternal>
</Text>