From 5516b10968eecf2ec773c59c922e76d77823308b Mon Sep 17 00:00:00 2001 From: Grant Steffen Date: Mon, 13 May 2024 09:45:46 -0400 Subject: [PATCH 1/5] Add breadcrumbs component --- src/layout/Breadcrumbs/Breadcrumbs.story.tsx | 33 ++++++++++ src/layout/Breadcrumbs/Breadcrumbs.tsx | 65 ++++++++++++++++++++ src/layout/Breadcrumbs/BreadcrumbsTheme.ts | 14 +++++ src/layout/Breadcrumbs/index.ts | 2 + src/layout/index.ts | 1 + src/utils/Theme/themes/theme.ts | 12 +++- 6 files changed, 124 insertions(+), 3 deletions(-) create mode 100644 src/layout/Breadcrumbs/Breadcrumbs.story.tsx create mode 100644 src/layout/Breadcrumbs/Breadcrumbs.tsx create mode 100644 src/layout/Breadcrumbs/BreadcrumbsTheme.ts create mode 100644 src/layout/Breadcrumbs/index.ts diff --git a/src/layout/Breadcrumbs/Breadcrumbs.story.tsx b/src/layout/Breadcrumbs/Breadcrumbs.story.tsx new file mode 100644 index 00000000..aa4ceb24 --- /dev/null +++ b/src/layout/Breadcrumbs/Breadcrumbs.story.tsx @@ -0,0 +1,33 @@ +import { Breadcrumbs } from './Breadcrumbs'; + +export default { + title: 'Components/Layout/Breadcrumbs', + component: Breadcrumbs +}; + +export const Basic = () => ( + +); + +export const WithCustomSeparator = () => ( + +); diff --git a/src/layout/Breadcrumbs/Breadcrumbs.tsx b/src/layout/Breadcrumbs/Breadcrumbs.tsx new file mode 100644 index 00000000..b79f7892 --- /dev/null +++ b/src/layout/Breadcrumbs/Breadcrumbs.tsx @@ -0,0 +1,65 @@ +import { cn, useComponentTheme } from '@/utils'; +import React, { FC } from 'react'; +import { BreadcrumbsTheme } from './BreadcrumbsTheme'; + +export interface BreadcrumbsProps extends React.HTMLAttributes { + breadcrumbs: { label: string; href: string }[]; + seperator?: React.ReactNode; + theme?: BreadcrumbsTheme; +} + +const Chevron = () => ( + + + +); + +export const Breadcrumbs: FC = ({ + breadcrumbs, + seperator = , + theme: customTheme, + ...rest +}) => { + const theme = useComponentTheme('breadcrumbs', customTheme); + + return ( + + ); +}; diff --git a/src/layout/Breadcrumbs/BreadcrumbsTheme.ts b/src/layout/Breadcrumbs/BreadcrumbsTheme.ts new file mode 100644 index 00000000..eb65c93e --- /dev/null +++ b/src/layout/Breadcrumbs/BreadcrumbsTheme.ts @@ -0,0 +1,14 @@ +export interface BreadcrumbsTheme { + base: string; + breadcrumb: string; + activeBreadcrumb: string; +} + +export const breadcrumbsTheme: BreadcrumbsTheme = { + base: 'flex gap-2 items-center', + breadcrumb: + 'hover:text-panel-content text-panel-secondary-content transition-colors', + activeBreadcrumb: 'text-primary pointer-events-none' +}; + +export const legacyBreadcrumbTheme: BreadcrumbsTheme = breadcrumbsTheme; diff --git a/src/layout/Breadcrumbs/index.ts b/src/layout/Breadcrumbs/index.ts new file mode 100644 index 00000000..d9888f1e --- /dev/null +++ b/src/layout/Breadcrumbs/index.ts @@ -0,0 +1,2 @@ +export * from './Breadcrumbs'; +export * from './BreadcrumbsTheme'; diff --git a/src/layout/index.ts b/src/layout/index.ts index ce38e960..5f9f2ec7 100644 --- a/src/layout/index.ts +++ b/src/layout/index.ts @@ -8,3 +8,4 @@ export * from './Stack'; export * from './Tree'; export * from './VerticalSpacer'; export * from './Tabs'; +export * from './Breadcrumbs'; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index 039978c2..9aed6b56 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -112,7 +112,10 @@ import { legacyDividerTheme, JsonTreeTheme, jsonTreeTheme, - legacyJsonTreeTheme + legacyJsonTreeTheme, + breadcrumbsTheme, + BreadcrumbsTheme, + legacyBreadcrumbTheme } from '@/layout'; import { @@ -182,6 +185,7 @@ export interface ReablocksTheme { popover: PopoverTheme; pager: PagerTheme; tabs: TabsTheme; + breadcrumbs: BreadcrumbsTheme; }; } @@ -227,7 +231,8 @@ export const theme: ReablocksTheme = { popover: popoverTheme, pager: pagerTheme, tabs: tabsTheme, - jsonTree: jsonTreeTheme + jsonTree: jsonTreeTheme, + breadcrumbs: breadcrumbsTheme } }; @@ -273,6 +278,7 @@ export const legacyThemeVars: ReablocksTheme = { popover: legacyPopoverTheme, pager: legacyPagerTheme, tabs: legacyTabsTheme, - jsonTree: legacyJsonTreeTheme + jsonTree: legacyJsonTreeTheme, + breadcrumbs: legacyBreadcrumbTheme } }; From c9cbadaa14703a8492b3c0e22bc03fad292dd259 Mon Sep 17 00:00:00 2001 From: Grant Steffen Date: Mon, 13 May 2024 10:49:31 -0400 Subject: [PATCH 2/5] Use slot style api for Breadcrumbs --- src/layout/Breadcrumbs/BreadcrumbItem.tsx | 7 +++ src/layout/Breadcrumbs/BreadcrumbLink.tsx | 19 ++++++ src/layout/Breadcrumbs/BreadcrumbList.tsx | 18 ++++++ src/layout/Breadcrumbs/BreadcrumbPage.tsx | 41 +++++++++++++ .../Breadcrumbs/BreadcrumbSeparator.tsx | 40 +++++++++++++ src/layout/Breadcrumbs/Breadcrumbs.story.tsx | 60 ++++++++++++------- src/layout/Breadcrumbs/Breadcrumbs.tsx | 54 ++--------------- src/layout/Breadcrumbs/BreadcrumbsTheme.ts | 15 +++-- src/layout/Breadcrumbs/index.ts | 5 ++ 9 files changed, 183 insertions(+), 76 deletions(-) create mode 100644 src/layout/Breadcrumbs/BreadcrumbItem.tsx create mode 100644 src/layout/Breadcrumbs/BreadcrumbLink.tsx create mode 100644 src/layout/Breadcrumbs/BreadcrumbList.tsx create mode 100644 src/layout/Breadcrumbs/BreadcrumbPage.tsx create mode 100644 src/layout/Breadcrumbs/BreadcrumbSeparator.tsx diff --git a/src/layout/Breadcrumbs/BreadcrumbItem.tsx b/src/layout/Breadcrumbs/BreadcrumbItem.tsx new file mode 100644 index 00000000..83daab94 --- /dev/null +++ b/src/layout/Breadcrumbs/BreadcrumbItem.tsx @@ -0,0 +1,7 @@ +import React, { FC } from 'react'; +import { cn } from '@/utils'; + +export const BreadcrumbItem: FC> = ({ + className, + ...rest +}) =>
  • ; diff --git a/src/layout/Breadcrumbs/BreadcrumbLink.tsx b/src/layout/Breadcrumbs/BreadcrumbLink.tsx new file mode 100644 index 00000000..c03a53bd --- /dev/null +++ b/src/layout/Breadcrumbs/BreadcrumbLink.tsx @@ -0,0 +1,19 @@ +import React, { FC } from 'react'; +import { cn, useComponentTheme } from '@/utils'; +import { BreadcrumbsTheme } from './BreadcrumbsTheme'; + +export interface BreadcrumbLinkProps + extends React.AnchorHTMLAttributes { + theme?: BreadcrumbsTheme; +} + +export const BreadcrumbLink: FC = ({ + className, + theme: customTheme, + href, + ...rest +}) => { + const theme = useComponentTheme('breadcrumbs', customTheme); + + return ; +}; diff --git a/src/layout/Breadcrumbs/BreadcrumbList.tsx b/src/layout/Breadcrumbs/BreadcrumbList.tsx new file mode 100644 index 00000000..a41cf534 --- /dev/null +++ b/src/layout/Breadcrumbs/BreadcrumbList.tsx @@ -0,0 +1,18 @@ +import React, { FC } from 'react'; +import { cn, useComponentTheme } from '@/utils'; +import { BreadcrumbsTheme } from './BreadcrumbsTheme'; + +export interface BreadcrumbListProps + extends React.OlHTMLAttributes { + theme?: BreadcrumbsTheme; +} + +export const BreadcrumbList: FC = ({ + className, + theme: customTheme, + ...rest +}) => { + const theme = useComponentTheme('breadcrumbs', customTheme); + + return
      ; +}; diff --git a/src/layout/Breadcrumbs/BreadcrumbPage.tsx b/src/layout/Breadcrumbs/BreadcrumbPage.tsx new file mode 100644 index 00000000..9cc85d1a --- /dev/null +++ b/src/layout/Breadcrumbs/BreadcrumbPage.tsx @@ -0,0 +1,41 @@ +import { cn, useComponentTheme } from '@/utils'; +import React, { FC } from 'react'; +import { BreadcrumbsTheme } from './BreadcrumbsTheme'; + +const Chevron = () => ( + + + +); + +export interface BreadcrumbPageProps + extends React.HTMLAttributes { + theme?: BreadcrumbsTheme; +} + +export const BreadcrumbPage: FC = ({ + children, + theme: customTheme, + className, + ...rest +}) => { + const theme = useComponentTheme('breadcrumbs', customTheme); + + return ( + + {children ?? } + + ); +}; diff --git a/src/layout/Breadcrumbs/BreadcrumbSeparator.tsx b/src/layout/Breadcrumbs/BreadcrumbSeparator.tsx new file mode 100644 index 00000000..dfb8c281 --- /dev/null +++ b/src/layout/Breadcrumbs/BreadcrumbSeparator.tsx @@ -0,0 +1,40 @@ +import { cn, useComponentTheme } from '@/utils'; +import React, { FC } from 'react'; +import { BreadcrumbsTheme } from './BreadcrumbsTheme'; + +const Chevron = () => ( + + + +); + +export interface BreadcrumbSeparatorProps + extends React.LiHTMLAttributes { + theme?: BreadcrumbsTheme; +} + +export const BreadcrumbSeparator: FC = ({ + children, + className, + theme: customTheme, + ...rest +}) => { + const theme = useComponentTheme('breadcrumbs', customTheme); + + return ( +
    1. + {children ?? } +
      2. + ); +}; diff --git a/src/layout/Breadcrumbs/Breadcrumbs.story.tsx b/src/layout/Breadcrumbs/Breadcrumbs.story.tsx index aa4ceb24..9ca27530 100644 --- a/src/layout/Breadcrumbs/Breadcrumbs.story.tsx +++ b/src/layout/Breadcrumbs/Breadcrumbs.story.tsx @@ -1,4 +1,11 @@ -import { Breadcrumbs } from './Breadcrumbs'; +import { + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, + Breadcrumbs +} from './'; export default { title: 'Components/Layout/Breadcrumbs', @@ -6,28 +13,37 @@ export default { }; export const Basic = () => ( - + + + + Home + + + + Docs + + + + Breadcrumbs + + + ); export const WithCustomSeparator = () => ( - + + + + Home + + / + + Docs + + / + + Breadcrumbs + + + ); diff --git a/src/layout/Breadcrumbs/Breadcrumbs.tsx b/src/layout/Breadcrumbs/Breadcrumbs.tsx index b79f7892..efb56665 100644 --- a/src/layout/Breadcrumbs/Breadcrumbs.tsx +++ b/src/layout/Breadcrumbs/Breadcrumbs.tsx @@ -3,63 +3,21 @@ import React, { FC } from 'react'; import { BreadcrumbsTheme } from './BreadcrumbsTheme'; export interface BreadcrumbsProps extends React.HTMLAttributes { - breadcrumbs: { label: string; href: string }[]; - seperator?: React.ReactNode; theme?: BreadcrumbsTheme; } -const Chevron = () => ( - - - -); - export const Breadcrumbs: FC = ({ - breadcrumbs, - seperator = , theme: customTheme, + className, ...rest }) => { const theme = useComponentTheme('breadcrumbs', customTheme); return ( -       +