From 212a62bb78ff85a422e231cc00b38c877986c19b Mon Sep 17 00:00:00 2001 From: Matthew Warman Date: Wed, 2 Apr 2025 06:39:56 -0400 Subject: [PATCH 1/4] #116 update Link styles for a11y --- src/common/components/Link/Link.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/common/components/Link/Link.tsx b/src/common/components/Link/Link.tsx index 7d8c672..dc6c857 100644 --- a/src/common/components/Link/Link.tsx +++ b/src/common/components/Link/Link.tsx @@ -21,7 +21,10 @@ export interface LinkProps extends RouterLinkProps, PropsWithTestId {} const Link = ({ children, className, testId = 'link', ...props }: LinkProps): JSX.Element => { return ( From c7b6fb0d909bf636e2b672b17301b3deafbce390 Mon Sep 17 00:00:00 2001 From: Matthew Warman Date: Wed, 2 Apr 2025 07:03:19 -0400 Subject: [PATCH 2/4] #116 Link examples --- src/common/components/Link/Link.tsx | 4 - src/common/components/Router/Router.tsx | 5 + src/pages/Components/ComponentsPage.tsx | 3 + .../Components/components/LinkComponents.tsx | 135 ++++++++++++++++++ .../__tests__/LinkComponents.test.tsx | 16 +++ 5 files changed, 159 insertions(+), 4 deletions(-) create mode 100644 src/pages/Components/components/LinkComponents.tsx create mode 100644 src/pages/Components/components/__tests__/LinkComponents.test.tsx diff --git a/src/common/components/Link/Link.tsx b/src/common/components/Link/Link.tsx index dc6c857..ce3b08a 100644 --- a/src/common/components/Link/Link.tsx +++ b/src/common/components/Link/Link.tsx @@ -13,10 +13,6 @@ export interface LinkProps extends RouterLinkProps, PropsWithTestId {} /** * The `Link` React component formats and renders an `` anchor HTML element using * the `Link` component from React Router. - * @param {LinkProps} props - Component properties, `LinkProps`. - * @returns {JSX.Element} JSX - * @see {@link LinkProps} - * @see {@link https://reactrouter.com/en/main/components/link | Link} */ const Link = ({ children, className, testId = 'link', ...props }: LinkProps): JSX.Element => { return ( diff --git a/src/common/components/Router/Router.tsx b/src/common/components/Router/Router.tsx index 82b5921..8d4eae0 100644 --- a/src/common/components/Router/Router.tsx +++ b/src/common/components/Router/Router.tsx @@ -38,6 +38,7 @@ const HelpTextComponents = lazy(() => import('pages/Components/components/HelpTe const IconComponents = lazy(() => import('pages/Components/components/IconComponents')); const InputComponents = lazy(() => import('pages/Components/components/InputComponents')); const LabelComponents = lazy(() => import('pages/Components/components/LabelComponents')); +const LinkComponents = lazy(() => import('pages/Components/components/LinkComponents')); const PageComponents = lazy(() => import('pages/Components/components/PageComponents')); const PopoverComponents = lazy(() => import('pages/Components/components/PopoverComponents')); const SearchInputComponents = lazy( @@ -168,6 +169,10 @@ export const routes: RouteObject[] = [ path: 'label', element: withSuspense(), }, + { + path: 'link', + element: withSuspense(), + }, { path: 'page', element: withSuspense(), diff --git a/src/pages/Components/ComponentsPage.tsx b/src/pages/Components/ComponentsPage.tsx index f90013b..18225b5 100644 --- a/src/pages/Components/ComponentsPage.tsx +++ b/src/pages/Components/ComponentsPage.tsx @@ -83,6 +83,9 @@ const ComponentsPage = (): JSX.Element => { Label + + Link + Page diff --git a/src/pages/Components/components/LinkComponents.tsx b/src/pages/Components/components/LinkComponents.tsx new file mode 100644 index 0000000..1575655 --- /dev/null +++ b/src/pages/Components/components/LinkComponents.tsx @@ -0,0 +1,135 @@ +import { ColumnDef, createColumnHelper } from '@tanstack/react-table'; + +import { BaseComponentProps } from 'common/utils/types'; +import { ComponentProperty } from '../model/components'; +import Table from 'common/components/Table/Table'; +import CodeSnippet from 'common/components/Text/CodeSnippet'; +import Heading from 'common/components/Text/Heading'; +import Link from 'common/components/Link/Link'; + +/** + * The `LinkComponents` component renders a set of examples illustrating + * the use of the `Link` component. + */ +const LinkComponents = ({ + className, + testId = 'components-link', +}: BaseComponentProps): JSX.Element => { + const data: ComponentProperty[] = [ + { + name: 'className', + description: 'Optional. Additional CSS class names.', + }, + { + name: 'testId', + description: 'Optional. Identifier for testing.', + }, + { + name: 'to', + description: 'The URL to link to. This can be a string or an object.', + }, + ]; + const columnHelper = createColumnHelper(); + const columns = [ + columnHelper.accessor('name', { + cell: (info) => ( + {info.getValue()} + ), + header: () => 'Name', + }), + columnHelper.accessor('description', { + cell: (info) => info.renderValue(), + header: () => 'Description', + }), + ] as ColumnDef[]; + + return ( +
+ + Link Component + + +
+
+ The Link component is a wrapper around the + React Router Link component. It provides a way to navigate between different routes in + your application without causing a full page reload. The Link component accepts all the + same props as the React Router Link component, as well as some additional props for + styling and testing. +
+ +
+ + Properties + + data={data} columns={columns} /> +
+ + + Examples + + + + Basic + +
+ This is a basic example of the Link{' '} + component. It renders a HTML anchor element that links to the specified URL. The Link is + styled with accessibility in mind. +
+
+
+ {/* Example */} +
+ To learn more about using the Link component view the{' '} + Link examples page. +
+
+ + To learn more about using the Link component view the{' '} + Link examples page. +
`} + /> +
+ + + Router Link Properties + +
+ The Link component accepts all the same props as the React Router Link component. This + includes the to prop, which specifies the URL + to link to. Or the target prop, which + specifies where to open the linked document. +
+
+
+ {/* Example */} +
+ Open an external link in a new tab. To view the official React Router documentation, + refer to the{' '} + + Link component guide + + . +
+
+ + Open an external link in a new tab. To view the official React Router documentation, + refer to the{' '} + + Link component guide + + . +
`} + /> + + +
+ ); +}; + +export default LinkComponents; diff --git a/src/pages/Components/components/__tests__/LinkComponents.test.tsx b/src/pages/Components/components/__tests__/LinkComponents.test.tsx new file mode 100644 index 0000000..4db4038 --- /dev/null +++ b/src/pages/Components/components/__tests__/LinkComponents.test.tsx @@ -0,0 +1,16 @@ +import { describe, expect, it } from 'vitest'; + +import { render, screen } from 'test/test-utils'; + +import LinkComponents from '../LinkComponents'; + +describe('LinkComponents', () => { + it('should render successfully', async () => { + // ARRANGE + render(); + await screen.findByTestId('components-link'); + + // ASSERT + expect(screen.getByTestId('components-link')).toBeInTheDocument(); + }); +}); From 1d7f98c4093026fec1ddff3f1807de18633e119f Mon Sep 17 00:00:00 2001 From: Matthew Warman Date: Wed, 2 Apr 2025 07:18:10 -0400 Subject: [PATCH 3/4] #116 stories --- src/common/components/Link/__stories__/Link.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/components/Link/__stories__/Link.stories.tsx b/src/common/components/Link/__stories__/Link.stories.tsx index 4ffd7ff..98080d5 100644 --- a/src/common/components/Link/__stories__/Link.stories.tsx +++ b/src/common/components/Link/__stories__/Link.stories.tsx @@ -56,7 +56,7 @@ export const Icon: Story = { export const Styled: Story = { args: { children: 'Styled link', - className: 'hover:no-underline text-sm text-red-500 font-bold', + className: 'decoration-rose-400 text-rose-500 hover:decoration-3 text-xl', to: '/', }, }; From 125a213a5f121247fff0242e428bf27074e7b8af Mon Sep 17 00:00:00 2001 From: Matthew Warman Date: Wed, 2 Apr 2025 07:39:43 -0400 Subject: [PATCH 4/4] #166 styles --- src/common/components/Link/Link.tsx | 2 +- src/common/components/Link/__stories__/Link.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/components/Link/Link.tsx b/src/common/components/Link/Link.tsx index ce3b08a..5de0228 100644 --- a/src/common/components/Link/Link.tsx +++ b/src/common/components/Link/Link.tsx @@ -18,7 +18,7 @@ const Link = ({ children, className, testId = 'link', ...props }: LinkProps): JS return (