fixup! Feat(web-react): Introduce BreadcrumbsItem component

lmc-eu · Oct 5, 2023 · 4263c82 · 4263c82
1 parent 9bfb759
commit 4263c82
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 23 deletions.
diff --git a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks/styleProps';
 import { SpiritBreadcrumbsProps } from '../../types';
-import { Icon } from '../Icon';
 import BreadcrumbsItem from './BreadcrumbsItem';
 import { useBreadcrumbsStyleProps } from './useBreadcrumbsStyleProps';
 
@@ -12,7 +11,7 @@ const defaultProps = {
 
 export const Breadcrumbs = <T extends ElementType = 'nav'>(props: SpiritBreadcrumbsProps<T>): JSX.Element => {
   const { children, elementType: ElementTag = 'nav', goBackTitle, items, ...restProps } = props;
-  const { classProps, props: modifiedProps } = useBreadcrumbsStyleProps(restProps);
+  const { classProps, props: modifiedProps } = useBreadcrumbsStyleProps({ ...restProps });
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 
   const isLast = (index: number, itemsCount: number) => {
@@ -31,7 +30,7 @@ export const Breadcrumbs = <T extends ElementType = 'nav'>(props: SpiritBreadcru
           items?.map((item, index) => (
             <React.Fragment key={`BreadcrumbsItem_${item.title}`}>
               {index === items.length - 2 && goBackTitle && (
-                <BreadcrumbsItem href={item.url} iconStart={<Icon name="chevron-left" />} isGoBackOnly>
+                <BreadcrumbsItem href={item.url} iconNameStart="chevron-left" isGoBackOnly>
                   {goBackTitle}
                 </BreadcrumbsItem>
               )}

diff --git a/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx b/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx
@@ -7,20 +7,20 @@ import { Link } from '../Link';
 import { useBreadcrumbsStyleProps } from './useBreadcrumbsStyleProps';
 
 const defaultProps = {
-  iconStart: undefined,
-  iconEnd: <Icon name="chevron-right" />,
+  iconNameStart: undefined,
+  iconNameEnd: 'chevron-right',
   isCurrent: false,
   isGoBackOnly: false,
 };
 
 const BreadcrumbsItem = (props: SpiritBreadcrumbsItemProps) => {
-  const { children, href, isCurrent, iconStart, iconEnd, ...restProps } = props;
+  const { children, href, isCurrent, iconNameStart, iconNameEnd, ...restProps } = props;
   const { classProps, props: otherProps } = useBreadcrumbsStyleProps({ ...restProps });
   const { styleProps, props: transferProps } = useStyleProps(otherProps);
 
   return (
     <li {...transferProps} {...styleProps} className={classNames(classProps.item, styleProps.className)}>
-      {iconStart}
+      {iconNameStart && <Icon name={iconNameStart} />}
       <Link
         href={href}
         color={isCurrent ? 'secondary' : 'primary'}
@@ -29,7 +29,7 @@ const BreadcrumbsItem = (props: SpiritBreadcrumbsItemProps) => {
       >
         {children}
       </Link>
-      {!isCurrent && !restProps.isGoBackOnly && iconEnd}
+      {!isCurrent && !restProps.isGoBackOnly && iconNameEnd && <Icon name={iconNameEnd} />}
     </li>
   );
 };

diff --git a/packages/web-react/src/components/Breadcrumbs/README.md b/packages/web-react/src/components/Breadcrumbs/README.md
@@ -80,15 +80,15 @@ Use the `BreadcrumbsItem` component for the ordered list as the component's chil
 
 ### API
 
-| Name               | Type            | Default                         | Required | Description                                           |
-| ------------------ | --------------- | ------------------------------- | -------- | ----------------------------------------------------- |
-| `children`         | `ReactNode`     | —                               | ✕        | Custom content to override items rendering from array |
-| `href`             | `string`        | —                               | ✔        | URL                                                   |
-| `iconEnd`          | `ReactNode`     | `<Icon name="chevron-right" />` | ✕        | Icon element on the end of the item wrapper           |
-| `iconStart`        | `ReactNode`     | -                               | ✕        | Icon component on the start of the item               |
-| `isCurrent`        | `boolean`       | `false`                         | ✕        | Whether is the item the current page                  |
-| `isGoBackOnly`     | `boolean`       | `fasle`                         | ✕        | Whether should be displayed in go back mode           |
-| `UNSAFE_className` | `string`        | —                               | ✕        | Wrapper custom class name                             |
-| `UNSAFE_style`     | `CSSProperties` | —                               | ✕        | Wrapper custom style                                  |
+| Name               | Type            | Default         | Required | Description                                           |
+| ------------------ | --------------- | --------------- | -------- | ----------------------------------------------------- |
+| `children`         | `ReactNode`     | —               | ✕        | Custom content to override items rendering from array |
+| `href`             | `string`        | —               | ✔        | URL                                                   |
+| `iconNameEnd`      | `string`        | `chevron-right` | ✕        | Icon component on the end of the item wrapper         |
+| `iconNameStart`    | `string`        | -               | ✕        | Icon component on the start of the item               |
+| `isCurrent`        | `boolean`       | `false`         | ✕        | Whether is the item the current page                  |
+| `isGoBackOnly`     | `boolean`       | `fasle`         | ✕        | Whether should be displayed in go back mode           |
+| `UNSAFE_className` | `string`        | —               | ✕        | Wrapper custom class name                             |
+| `UNSAFE_style`     | `CSSProperties` | —               | ✕        | Wrapper custom style                                  |
 
 For detailed information see [Breadcrumbs](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Breadcrumbs/README.md) component
diff --git a/packages/web-react/src/components/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx b/packages/web-react/src/components/Breadcrumbs/__tests__/BreadcrumbsItem.test.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
 import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
-import { Icon } from '../../Icon';
 import BreadcrumbsItem from '../BreadcrumbsItem';
 
 describe('BreadcrumbsItem', () => {
@@ -17,7 +16,7 @@ describe('BreadcrumbsItem', () => {
 
   describe('BreadcrumbsItem with go back title', () => {
     const BreadcrumbsItemGoBack = () => (
-      <BreadcrumbsItem href="/test" isGoBackOnly iconStart={<Icon name="chevron-left" />}>
+      <BreadcrumbsItem href="/test" isGoBackOnly iconNameStart="chevron-left">
         test_title
       </BreadcrumbsItem>
     );

diff --git a/packages/web-react/src/types/breadcrumbs.ts b/packages/web-react/src/types/breadcrumbs.ts
@@ -1,4 +1,4 @@
-import { ElementType, JSXElementConstructor, ReactNode } from 'react';
+import { ElementType, JSXElementConstructor } from 'react';
 import { ChildrenProps, StyleProps, TransferProps } from './shared';
 
 export type BreadcrumbsItem = {
@@ -8,8 +8,8 @@ export type BreadcrumbsItem = {
 
 export interface SpiritBreadcrumbsItemProps extends ChildrenProps {
   href: string;
-  iconStart?: ReactNode;
-  iconEnd?: ReactNode;
+  iconNameStart?: string;
+  iconNameEnd?: string;
   isCurrent: boolean;
   isGoBackOnly?: boolean;
 }