From 4263c82de0c858d75150a3b45e9a3a4734813ab3 Mon Sep 17 00:00:00 2001 From: literat Date: Thu, 5 Oct 2023 16:00:21 +0200 Subject: [PATCH] fixup! Feat(web-react): Introduce BreadcrumbsItem component --- .../components/Breadcrumbs/Breadcrumbs.tsx | 5 ++--- .../Breadcrumbs/BreadcrumbsItem.tsx | 10 +++++----- .../src/components/Breadcrumbs/README.md | 20 +++++++++---------- .../__tests__/BreadcrumbsItem.test.tsx | 3 +-- packages/web-react/src/types/breadcrumbs.ts | 6 +++--- 5 files changed, 21 insertions(+), 23 deletions(-) diff --git a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx index 2ac2d96509..eed4a8b871 100644 --- 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 = (props: SpiritBreadcrumbsProps): 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 = (props: SpiritBreadcru items?.map((item, index) => ( {index === items.length - 2 && goBackTitle && ( - } isGoBackOnly> + {goBackTitle} )} diff --git a/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx b/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx index 4e382d34b9..f02b9a832e 100644 --- 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: , + 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 (
  • - {iconStart} + {iconNameStart && } { > {children} - {!isCurrent && !restProps.isGoBackOnly && iconEnd} + {!isCurrent && !restProps.isGoBackOnly && iconNameEnd && }
    • ); }; diff --git a/packages/web-react/src/components/Breadcrumbs/README.md b/packages/web-react/src/components/Breadcrumbs/README.md index 6facf09235..740ffb78fb 100644 --- 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 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 index 8a27740903..77e5ac43c5 100644 --- 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 = () => ( - }> + test_title ); diff --git a/packages/web-react/src/types/breadcrumbs.ts b/packages/web-react/src/types/breadcrumbs.ts index 7a8d1f4c87..c1ac026f8d 100644 --- 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; }