@coveord/plasma-mantine 56.3.1 → 56.3.2

package/src/components/header/HeaderBreadcrumbs/HeaderBreadcrumbAnchor.tsx

@@ -1,10 +1,21 @@
-import {Anchor, type AnchorProps, type PolymorphicFactory, polymorphicFactory} from '@mantine/core';
+import {IconChevronLeft} from '@coveord/plasma-react-icons';
+import {Anchor, type AnchorProps, Flex, type PolymorphicFactory, polymorphicFactory} from '@mantine/core';
+import {ReactNode} from 'react';
 import {useHeaderContext} from '../Header.context.js';
 
-export type HeaderBreadcrumbAnchorStyleNames = 'breadcrumbAnchor';
+export interface HeaderBreadcrumbAnchorProps extends AnchorProps {
+    /**
+     * If true, only one breadcrumb will be displayed with a back arrow
+     * @default false
+     **/
+    single?: boolean;
+    children: ReactNode;
+}
+
+export type HeaderBreadcrumbAnchorStyleNames = 'breadcrumbAnchor' | 'breadcrumbAnchorSingleGroup';
 
 export type HeaderBreadcrumbAnchorFactory = PolymorphicFactory<{
-    props: AnchorProps;
+    props: HeaderBreadcrumbAnchorProps;
     ref: HTMLAnchorElement;
     stylesNames: HeaderBreadcrumbAnchorStyleNames;
     compound: true;
@@ -13,16 +24,30 @@ export type HeaderBreadcrumbAnchorFactory = PolymorphicFactory<{
 }>;
 
 export const HeaderBreadcrumbAnchor = polymorphicFactory<HeaderBreadcrumbAnchorFactory>((props, ref) => {
-    const {className, classNames, styles, style, ...others} = props;
+    const {children, className, classNames, styles, style, single, ...others} = props;
     const ctx = useHeaderContext();
 
+    const content = single ? (
+        <Flex
+            align="center"
+            {...ctx.getStyles('breadcrumbAnchorSingleGroup', {className, classNames, styles, style, props})}
+        >
+            <IconChevronLeft aria-label="arrow pointing back" size={16} />
+            {children}
+        </Flex>
+    ) : (
+        children
+    );
+
     return (
         <Anchor
             ref={ref}
             inherit
             {...ctx.getStyles('breadcrumbAnchor', {className, classNames, styles, style, props})}
             {...others}
-        />
+        >
+            {content}
+        </Anchor>
     );
 });
 HeaderBreadcrumbAnchor.displayName = '@coveo/plasma-mantine/HeaderBreadcrumbAnchor';

package/src/components/header/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx

@@ -7,14 +7,14 @@ export interface HeaderBreadcrumbsProps
         CompoundStylesApiProps<HeaderBreadcrumbsFactory> {}
 
 export type HeaderBreadcrumbsFactory = Factory<{
-    props: BreadcrumbsProps;
+    props: HeaderBreadcrumbsProps;
     ref: HTMLDivElement;
     stylesNames: HeaderBreadcrumbsStyleNames;
     compound: true;
 }>;
 
 export const HeaderBreadcrumbs = factory<HeaderBreadcrumbsFactory>((props, ref) => {
-    const {children, className, classNames, styles, style, ...others} = props;
+    const {children, className, classNames, styles, style, vars: _vars, ...others} = props;
     const ctx = useHeaderContext();
 
     return (

package/src/components/header/__tests__/Header.spec.tsx

@@ -1,4 +1,3 @@
-import {Anchor} from '@mantine/core';
 import {render, screen, within} from '@test-utils';
 
 import {Header} from '../Header.js';
@@ -32,9 +31,9 @@ describe('Header', () => {
         const {rerender} = render(
             <Header>
                 <Header.Breadcrumbs data-testid="breadcrumbs-after">
-                    <Anchor>One</Anchor>
-                    <Anchor>Two</Anchor>
-                    <Anchor>Three</Anchor>
+                    <Header.BreadcrumbAnchor>One</Header.BreadcrumbAnchor>
+                    <Header.BreadcrumbAnchor>Two</Header.BreadcrumbAnchor>
+                    <Header.BreadcrumbAnchor>Three</Header.BreadcrumbAnchor>
                 </Header.Breadcrumbs>
                 <div data-testid="title">Title</div>
             </Header>,
@@ -49,9 +48,9 @@ describe('Header', () => {
             <Header>
                 <div data-testid="title">Title</div>
                 <Header.Breadcrumbs data-testid="breadcrumbs-after">
-                    <Anchor>One</Anchor>
-                    <Anchor>Two</Anchor>
-                    <Anchor>Three</Anchor>
+                    <Header.BreadcrumbAnchor>One</Header.BreadcrumbAnchor>
+                    <Header.BreadcrumbAnchor>Two</Header.BreadcrumbAnchor>
+                    <Header.BreadcrumbAnchor>Three</Header.BreadcrumbAnchor>
                 </Header.Breadcrumbs>
             </Header>,
         );
@@ -61,6 +60,21 @@ describe('Header', () => {
         );
     });
 
+    it('adds an icon if the single prop is specified on the breadcrumb anchor', async () => {
+        render(
+            <Header>
+                <Header.Breadcrumbs data-testid="breadcrumbs-after">
+                    <Header.BreadcrumbAnchor href="#" single>
+                        One
+                    </Header.BreadcrumbAnchor>
+                </Header.Breadcrumbs>
+                Title
+            </Header>,
+        );
+
+        expect(screen.getByRole('link', {name: 'arrow pointing back One'})).toBeVisible();
+    });
+
     it('renders a doc link icon if a doc anchor is provided', async () => {
         render(
             <Header>

package/src/styles/Breadcrumbs.module.css

@@ -5,8 +5,8 @@
 
 .breadcrumb {
     line-height: 14px;
+}
 
-    &:not(a) {
-        color: var(--coveo-color-title);
-    }
+.separator {
+    color: var(--coveo-color-title);
 }