From ce38bb8342fdd68e114b51f1e1332fdb46d2185d Mon Sep 17 00:00:00 2001 From: Matthew Warman Date: Fri, 7 Mar 2025 06:11:22 -0500 Subject: [PATCH 01/15] #39 Breadcrumbs component --- .../components/Breadcrumbs/Breadcrumbs.tsx | 117 ++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 src/common/components/Breadcrumbs/Breadcrumbs.tsx diff --git a/src/common/components/Breadcrumbs/Breadcrumbs.tsx b/src/common/components/Breadcrumbs/Breadcrumbs.tsx new file mode 100644 index 0000000..d805824 --- /dev/null +++ b/src/common/components/Breadcrumbs/Breadcrumbs.tsx @@ -0,0 +1,117 @@ +import { PropsWithChildren } from 'react'; + +import { BaseComponentProps } from 'common/utils/types'; +import { cn } from 'common/utils/css'; +import { default as CommonLink, LinkProps as CommonLinkProps } from 'common/components/Link/Link'; +import FAIcon, { FAIconProps } from '../Icon/FAIcon'; + +/** + * The `Breadcrumbs` component renders a heirarchy of links as a path to the + * current route. + */ +const Breadcrumbs = ({ + children, + className, + testId = 'breadcrumbs', +}: BaseComponentProps & PropsWithChildren): JSX.Element => { + return ( + + ); +}; + +const List = ({ + children, + className, + testId = 'breadcrumbs-list', +}: BaseComponentProps & PropsWithChildren): JSX.Element => { + return ( +
    + {children} +
+ ); +}; +Breadcrumbs.List = List; + +const Item = ({ + children, + className, + testId = 'breadcrumbs-item', +}: BaseComponentProps & PropsWithChildren): JSX.Element => { + return ( +
  • + {children} +
    • + ); +}; +Breadcrumbs.Item = Item; + +const Link = ({ + children, + className, + testId = 'breadcrumbs-link', + ...props +}: CommonLinkProps): JSX.Element => { + return ( + + {children} + + ); +}; +Breadcrumbs.Link = Link; + +const Page = ({ + children, + className, + testId = 'breadcrumbs-page', +}: BaseComponentProps & PropsWithChildren): JSX.Element => { + return ( + + {children} + + ); +}; +Breadcrumbs.Page = Page; + +const Separator = ({ + className, + icon = 'chevronRight', + size = 'sm', + testId = 'breadcrumbs-separator', + ...iconProps +}: BaseComponentProps & + Omit & + Partial>): JSX.Element => { + return ( +
  • + +
    • + ); +}; +Breadcrumbs.Separator = Separator; + +const Ellipsis = ({ + className, + testId = 'breadcrumbs-ellipsis', +}: BaseComponentProps): JSX.Element => { + return ( + + + More + + ); +}; +Breadcrumbs.Ellipsis = Ellipsis; + +export default Breadcrumbs; From 6eafb2cd54066fae3d3ab2dd631590d26e35b220 Mon Sep 17 00:00:00 2001 From: Matthew Warman Date: Fri, 7 Mar 2025 06:11:47 -0500 Subject: [PATCH 02/15] #39 new FA icons --- src/common/components/Icon/FAIcon.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/common/components/Icon/FAIcon.tsx b/src/common/components/Icon/FAIcon.tsx index 7a45228..d0fb176 100644 --- a/src/common/components/Icon/FAIcon.tsx +++ b/src/common/components/Icon/FAIcon.tsx @@ -7,12 +7,15 @@ import { faBuilding, faCheck, faChevronDown, + faChevronRight, faChevronUp, faCircleCheck, faCircleExclamation, faCircleInfo, faCircleNotch, faCircleXmark, + faEllipsis, + faEllipsisVertical, faEnvelope, faLanguage, faLink, @@ -48,6 +51,7 @@ export type FAIconName = | 'building' | 'check' | 'chevronDown' + | 'chevronRight' | 'chevronUp' | 'circleCheck' | 'circleExclamation' @@ -55,6 +59,8 @@ export type FAIconName = | 'circleNotch' | 'circleRegular' | 'circleXmark' + | 'ellipsis' + | 'ellipsisVertical' | 'envelope' | 'language' | 'link' @@ -97,6 +103,7 @@ const icons: Record = { building: faBuilding, check: faCheck, chevronDown: faChevronDown, + chevronRight: faChevronRight, chevronUp: faChevronUp, circleCheck: faCircleCheck, circleExclamation: faCircleExclamation, @@ -104,6 +111,8 @@ const icons: Record = { circleNotch: faCircleNotch, circleRegular: faCircleRegular, circleXmark: faCircleXmark, + ellipsis: faEllipsis, + ellipsisVertical: faEllipsisVertical, envelope: faEnvelope, language: faLanguage, link: faLink, From db64fd193ee92fc9f4047423722b67ddde88e65d Mon Sep 17 00:00:00 2001 From: Matthew Warman Date: Fri, 7 Mar 2025 06:12:01 -0500 Subject: [PATCH 03/15] #39 breadcrumbs components sub-page --- src/common/components/Router/Router.tsx | 5 + src/pages/Components/ComponentsPage.tsx | 3 + .../components/BreadcrumbsComponents.tsx | 158 ++++++++++++++++++ 3 files changed, 166 insertions(+) create mode 100644 src/pages/Components/components/BreadcrumbsComponents.tsx diff --git a/src/common/components/Router/Router.tsx b/src/common/components/Router/Router.tsx index c9abb73..7428740 100644 --- a/src/common/components/Router/Router.tsx +++ b/src/common/components/Router/Router.tsx @@ -18,6 +18,7 @@ import ComponentsPage from 'pages/Components/ComponentsPage'; import AlertComponents from 'pages/Components/components/AlertComponents'; import AvatarComponents from 'pages/Components/components/AvatarComponents'; import BadgeComponents from 'pages/Components/components/BadgeComponents'; +import BreadcrumbsComponents from 'pages/Components/components/BreadcrumbsComponents'; import ButtonComponents from 'pages/Components/components/ButtonComponents'; import CardComponents from 'pages/Components/components/CardComponents'; import DialogComponents from 'pages/Components/components/DialogComponents'; @@ -100,6 +101,10 @@ export const routes: RouteObject[] = [ path: 'badge', element: , }, + { + path: 'breadcrumbs', + element: , + }, { path: 'button', element: , diff --git a/src/pages/Components/ComponentsPage.tsx b/src/pages/Components/ComponentsPage.tsx index dfbe49b..51c31ba 100644 --- a/src/pages/Components/ComponentsPage.tsx +++ b/src/pages/Components/ComponentsPage.tsx @@ -29,6 +29,9 @@ const ComponentsPage = (): JSX.Element => { Badge + + Breadcrumbs + Button diff --git a/src/pages/Components/components/BreadcrumbsComponents.tsx b/src/pages/Components/components/BreadcrumbsComponents.tsx new file mode 100644 index 0000000..559d3cb --- /dev/null +++ b/src/pages/Components/components/BreadcrumbsComponents.tsx @@ -0,0 +1,158 @@ +import { 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 Breadcrumbs from 'common/components/Breadcrumbs/Breadcrumbs'; +import DropdownMenu from 'common/components/Dropdown/DropdownMenu'; + +/** + * Properties for the `CardComponents` React component. + * @see {@link BaseComponentProps} + */ +interface CardComponentsProps extends BaseComponentProps {} + +/** + * The `BreadcrumbsComponents` React component renders a set of examples illustrating + * the use of the `Breadcrumbs` family of components. + * @param {CardComponentsProps} props - Component properties. + * @returns {JSX.Element} JSX + */ +const BreadcrumbsComponents = ({ + className, + testId = 'components-breadcrumbs', +}: CardComponentsProps): JSX.Element => { + const columnHelper = createColumnHelper(); + const breadcrumbsData: ComponentProperty[] = [ + { + name: 'children', + description: 'The content to be displayed.', + }, + { + name: 'className', + description: 'Optional. Additional CSS class names.', + }, + { + name: 'testId', + description: 'Optional. Identifier for testing.', + }, + ]; + const columns = [ + columnHelper.accessor('name', { + cell: (info) => ( + {info.getValue()} + ), + header: () => 'Name', + }), + columnHelper.accessor('description', { + cell: (info) => info.renderValue(), + header: () => 'Description', + }), + ]; + + return ( +
    +
    + + Breadcrumbs Component + + +
    + The Breadcrumbs component displays a + heirarchy of links as a path to the current route. +
    + +
    + + Properties + + data={breadcrumbsData} columns={columns} /> +
    + + + Examples + + + + Breadcrumbs components + +
    + The Breadcrumbs component is a compound component. It has component properties which allow + you to compose Breadcrumbs content. Those components include: List, Item, Link, Page, + Ellipsis, and Separator. +
    +
    +
    + + + + Home + + + + + + + + + Components + Settings + Tasks + + + + + + + dolorum laboriosam eos qui iure aliquam + + + + + Edit + + + +
    + + + + Home + + + + + + + + + Components + Settings + Tasks + + + + + + + dolorum laboriosam eos qui iure aliquam + + + + + Edit + + +`} + /> +
    +
    +
    + ); +}; + +export default BreadcrumbsComponents; From f02ab02ccea77d9323f96dacf725c14290b4373e Mon Sep 17 00:00:00 2001 From: Matthew Warman Date: Fri, 7 Mar 2025 08:38:29 -0500 Subject: [PATCH 04/15] #39 docs --- .../components/Breadcrumbs/Breadcrumbs.tsx | 50 ++++++++++++++++--- 1 file changed, 43 insertions(+), 7 deletions(-) diff --git a/src/common/components/Breadcrumbs/Breadcrumbs.tsx b/src/common/components/Breadcrumbs/Breadcrumbs.tsx index d805824..70c539d 100644 --- a/src/common/components/Breadcrumbs/Breadcrumbs.tsx +++ b/src/common/components/Breadcrumbs/Breadcrumbs.tsx @@ -5,6 +5,11 @@ import { cn } from 'common/utils/css'; import { default as CommonLink, LinkProps as CommonLinkProps } from 'common/components/Link/Link'; import FAIcon, { FAIconProps } from '../Icon/FAIcon'; +/** + * Properties for the `Breadcrumbs` component. + */ +export interface BreadcrumbsProps extends BaseComponentProps, PropsWithChildren {} + /** * The `Breadcrumbs` component renders a heirarchy of links as a path to the * current route. @@ -13,7 +18,7 @@ const Breadcrumbs = ({ children, className, testId = 'breadcrumbs', -}: BaseComponentProps & PropsWithChildren): JSX.Element => { +}: BreadcrumbsProps): JSX.Element => { return (