@digigov/react-core 2.0.0-daaf7bdf → 2.0.0-e20fed09

package/src/Base/index.web.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
+import clsx from 'clsx';
 import { basePropGenerator } from '@digigov/react-core/Base/utils';
-
-type AsProp<C extends React.ElementType> = {
-  as?: C;
-};
+interface AsProp<C extends React.ElementType> {
+  as?: C | React.ElementType<any>;
+}
 
 type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
 
@@ -32,53 +32,53 @@ export type BaseProps<C extends React.ElementType> =
     C,
     {
       /** margin is optional. It has not a default value. */
-      margin?: spacingValues;
+      margin?: SpacingValues | SpacingMediaValues;
       /** marginTop is optional. It has not a default value. */
-      marginTop?: spacingValues;
+      marginTop?: SpacingValues | SpacingMediaValues;
       /** marginBottom is optional. It has not a default value. */
-      marginBottom?: spacingValues;
+      marginBottom?: SpacingValues | SpacingMediaValues;
       /** marginLeft is optional. It has not a default value. */
-      marginLeft?: spacingValues;
+      marginLeft?: SpacingValues | SpacingMediaValues;
       /** marginRight is optional. It has not a default value. */
-      marginRight?: spacingValues;
+      marginRight?: SpacingValues | SpacingMediaValues;
       /** Alternative for margin. Margin is optional. It has not a default value. */
-      m?: spacingValues;
+      m?: SpacingValues | SpacingMediaValues;
       /** Alternative for marginTop. MarginTop is optional. It has not a default value. */
-      mt?: spacingValues;
+      mt?: SpacingValues | SpacingMediaValues;
       /** Alternative for marginBottom. MarginBottom is optional. It has not a default value. */
-      mb?: spacingValues;
+      mb?: SpacingValues | SpacingMediaValues;
       /** Alternative for marginLeft. MarginLeft is optional. It has not a default value. */
-      ml?: spacingValues;
+      ml?: SpacingValues | SpacingMediaValues;
       /** Alternative for marginRight. MarginRight is optional. It has not a default value. */
-      mr?: spacingValues;
+      mr?: SpacingValues | SpacingMediaValues;
       /** Alternative for marginX. MarginX is optional. It has not a default value. */
-      mx?: spacingValues;
+      mx?: SpacingValues | SpacingMediaValues;
       /** Alternative for marginY. MarginY is optional. It has not a default value. */
-      my?: spacingValues;
+      my?: SpacingValues | SpacingMediaValues;
       /** padding is optional. It has not a default value. */
-      padding?: spacingValues;
+      padding?: SpacingValues | SpacingMediaValues;
       /** paddingTop is optional. It has not a default value. */
-      paddingTop?: spacingValues;
+      paddingTop?: SpacingValues | SpacingMediaValues;
       /** paddingBottom is optional. It has not a default value. */
-      paddingBottom?: spacingValues;
+      paddingBottom?: SpacingValues | SpacingMediaValues;
       /** paddingLeft is optional. It has not a default value. */
-      paddingLeft?: spacingValues;
+      paddingLeft?: SpacingValues | SpacingMediaValues;
       /** paddingRight is optional. It has not a default value. */
-      paddingRight?: spacingValues;
+      paddingRight?: SpacingValues | SpacingMediaValues;
       /** Alternative for padding. Padding is optional. It has not a default value. */
-      p?: spacingValues;
+      p?: SpacingValues | SpacingMediaValues;
       /** Alternative for paddingTop. PaddingTop is optional. It has not a default value. */
-      pt?: spacingValues;
+      pt?: SpacingValues | SpacingMediaValues;
       /** Alternative for paddingBottom. PaddingBottom is optional. It has not a default value. */
-      pb?: spacingValues;
+      pb?: SpacingValues | SpacingMediaValues;
       /** Alternative for paddingLeft. PaddingLeft is optional. It has not a default value. */
-      pl?: spacingValues;
+      pl?: SpacingValues | SpacingMediaValues;
       /** Alternative for paddingRight. PaddingRight is optional. It has not a default value. */
-      pr?: spacingValues;
+      pr?: SpacingValues | SpacingMediaValues;
       /** Alternative for paddingX. PaddingX is optional. It has not a default value. */
-      px?: spacingValues;
+      px?: SpacingValues | SpacingMediaValues;
       /** Alternative for paddingY. PaddingY is optional. It has not a default value. */
-      py?: spacingValues;
+      py?: SpacingValues | SpacingMediaValues;
       /**  printHidden is optional. Default value is false. When true, the component is hidden at print. */
       printHidden?: boolean;
       /**  printVisible is optional. When block, the component is displayed as block. When inline, the component is displayed as inline.*/
@@ -106,11 +106,11 @@ export type BaseProps<C extends React.ElementType> =
       /** Components will be hidden between xl and 2xl screen size. */
       xlHidden?: boolean;
       /**  display is optional. It has not a default value. */
-      display?: 'flex' | 'block' | 'none'
+      display?: 'flex' | 'block' | 'none';
     }
   >;
 
-type spacingValues =
+export type SpacingValues =
   | 0
   | 0.5
   | 1
@@ -146,6 +146,14 @@ type spacingValues =
   | 80
   | 96;
 
+export interface SpacingMediaValues {
+  xs?: SpacingValues;
+  sm?: SpacingValues;
+  md?: SpacingValues;
+  lg?: SpacingValues;
+  xl?: SpacingValues;
+}
+
 /**
  * This is the type used in the type annotation for the component
  */
@@ -154,7 +162,7 @@ type BaseComponent = <C extends React.ElementType = 'span'>(
 ) => React.ReactNode | null;
 
 export const Base: BaseComponent = React.forwardRef(function Base<
-  C extends React.ElementType = 'span',
+  C extends React.ElementType,
 >(
   {
     as,
@@ -204,50 +212,50 @@ export const Base: BaseComponent = React.forwardRef(function Base<
 ) {
   const Component = as || 'span';
 
+  const basePropToClassName = basePropGenerator({
+    display,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    m,
+    mt,
+    mb,
+    ml,
+    mr,
+    mx,
+    my,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    p,
+    pt,
+    pb,
+    pr,
+    pl,
+    px,
+    py,
+    printHidden,
+    printVisible,
+    hidden,
+    xsUpHidden,
+    smUpHidden,
+    mdUpHidden,
+    lgUpHidden,
+    xlUpHidden,
+    xsHidden,
+    smHidden,
+    mdHidden,
+    lgHidden,
+    xlHidden,
+  });
+
   return (
     <Component
-      as={as}
-      className={basePropGenerator({
-        display,
-        margin,
-        marginTop,
-        marginBottom,
-        marginLeft,
-        marginRight,
-        m,
-        mt,
-        mb,
-        ml,
-        mr,
-        mx,
-        my,
-        padding,
-        paddingTop,
-        paddingBottom,
-        paddingLeft,
-        paddingRight,
-        p,
-        pt,
-        pb,
-        pr,
-        pl,
-        px,
-        py,
-        printHidden,
-        printVisible,
-        hidden,
-        xsUpHidden,
-        smUpHidden,
-        mdUpHidden,
-        lgUpHidden,
-        xlUpHidden,
-        xsHidden,
-        smHidden,
-        mdHidden,
-        lgHidden,
-        xlHidden,
-        className,
-      })}
+      className={clsx(basePropToClassName, className)}
       ref={ref}
       {...props}
     >

package/src/Base/mapping.native.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { Link } from 'expo-router';
+import { cssInterop } from 'nativewind';
 import { Image, View } from 'react-native';
 import Svg, { Path, Circle, Rect, G, Polygon } from 'react-native-svg';
 import { Button } from '@digigov/react-core/Base/compat/button.native';
 import CompatDetails from '@digigov/react-core/Base/compat/details.native';
 import BaseInput from '@digigov/react-core/Base/compat/Input/index.native';
 import { Ol } from '@digigov/react-core/Base/compat/ol.native';
-import { cssInterop } from 'nativewind'
 export type MapProps<T extends keyof JSX.IntrinsicElements> =
   React.ComponentPropsWithoutRef<T>;
 
@@ -19,7 +19,11 @@ export type MappingType = {
 };
 
 export const mapping: MappingType = {
-  a: ({ children, ...props }) => <Link {...props} asChild ><View>{children}</View></Link>,
+  a: ({ children, ...props }) => (
+    <Link {...props} asChild>
+      <View>{children}</View>
+    </Link>
+  ),
   img: (props) => <Image {...props} />,
   button: Button,
   input: BaseInput,
@@ -30,8 +34,8 @@ export const mapping: MappingType = {
   // @ts-ignore
   svg: cssInterop(Svg, {
     className: {
-      target: "style",
-      nativeStyleToProp: { width: true, height: true }
+      target: 'style',
+      nativeStyleToProp: { width: true, height: true },
     },
   }),
   rect: (props) => <Rect {...props} />,

package/src/Base/utils.ts

@@ -1,5 +1,25 @@
 import clsx from 'clsx';
 
+// Helper function to handle both SpacingValues and SpacingMediaValues
+const generateSpacingClasses = (prefix, spacing) => {
+  if (typeof spacing === 'object') {
+    // It's a SpacingMediaValues (media-specific)
+    return {
+      [`${prefix}-xs-${spacing?.xs}`]: spacing?.xs !== undefined,
+      [`${prefix}-sm-${spacing?.sm}`]: spacing?.sm !== undefined,
+      [`${prefix}-md-${spacing?.md}`]: spacing?.md !== undefined,
+      [`${prefix}-lg-${spacing?.lg}`]: spacing?.lg !== undefined,
+      [`${prefix}-xl-${spacing?.xl}`]: spacing?.xl !== undefined,
+    };
+  } else if (spacing !== undefined) {
+    // It's a regular SpacingValues
+    return {
+      [`${prefix}-${spacing}`]: true,
+    };
+  }
+  return {};
+};
+
 export const basePropGenerator = ({
   display,
   margin,
@@ -39,34 +59,23 @@ export const basePropGenerator = ({
   mdHidden,
   lgHidden,
   xlHidden,
-  className,
-}) =>
-  clsx(className, {
-    [`ds-display-${display}`]: display !== undefined ? true : undefined,
-    [`ds-m-${margin}`]: margin !== undefined ? true : undefined,
-    [`ds-mt-${marginTop}`]: marginTop !== undefined ? true : undefined,
-    [`ds-mb-${marginBottom}`]: marginBottom !== undefined ? true : undefined,
-    [`ds-mr-${marginRight}`]: marginRight !== undefined ? true : undefined,
-    [`ds-ml-${marginLeft}`]: marginLeft !== undefined ? true : undefined,
-    [`ds-m-${m}`]: m !== undefined ? true : undefined,
-    [`ds-mt-${mt}`]: mt !== undefined ? true : undefined,
-    [`ds-mb-${mb}`]: mb !== undefined ? true : undefined,
-    [`ds-mr-${mr}`]: mr !== undefined ? true : undefined,
-    [`ds-ml-${ml}`]: ml !== undefined ? true : undefined,
-    [`ds-mx-${mx}`]: mx !== undefined ? true : undefined,
-    [`ds-my-${my}`]: my !== undefined ? true : undefined,
-    [`ds-p-${padding}`]: padding !== undefined ? true : undefined,
-    [`ds-pt-${paddingTop}`]: paddingTop !== undefined ? true : undefined,
-    [`ds-pb-${paddingBottom}`]: paddingBottom !== undefined ? true : undefined,
-    [`ds-pr-${paddingRight}`]: paddingRight !== undefined ? true : undefined,
-    [`ds-pl-${paddingLeft}`]: paddingLeft !== undefined ? true : undefined,
-    [`ds-p-${p}`]: p !== undefined ? true : undefined,
-    [`ds-pt-${pt}`]: pt !== undefined ? true : undefined,
-    [`ds-pb-${pb}`]: pb !== undefined ? true : undefined,
-    [`ds-pr-${pr}`]: pr !== undefined ? true : undefined,
-    [`ds-pl-${pl}`]: pl !== undefined ? true : undefined,
-    [`ds-px-${px}`]: px !== undefined ? true : undefined,
-    [`ds-py-${py}`]: py !== undefined ? true : undefined,
+}) => {
+  return clsx({
+    [`ds-display-${display}`]: display !== undefined,
+    ...generateSpacingClasses('ds-m', m ?? margin),
+    ...generateSpacingClasses('ds-mt', mt ?? marginTop),
+    ...generateSpacingClasses('ds-mb', mb ?? marginBottom),
+    ...generateSpacingClasses('ds-mr', mr ?? marginRight),
+    ...generateSpacingClasses('ds-ml', ml ?? marginLeft),
+    ...generateSpacingClasses('ds-mx', mx),
+    ...generateSpacingClasses('ds-my', my),
+    ...generateSpacingClasses('ds-p', p ?? padding),
+    ...generateSpacingClasses('ds-pt', pt ?? paddingTop),
+    ...generateSpacingClasses('ds-pb', pb ?? paddingBottom),
+    ...generateSpacingClasses('ds-pr', pr ?? paddingRight),
+    ...generateSpacingClasses('ds-pl', pl ?? paddingLeft),
+    ...generateSpacingClasses('ds-px', px),
+    ...generateSpacingClasses('ds-py', py),
     'ds-print-hidden': !!printHidden,
     'ds-print-visible-block': printVisible === 'block',
     'ds-print-visible-inline': printVisible === 'inline',
@@ -82,3 +91,4 @@ export const basePropGenerator = ({
     'ds-hidden-lg': !!lgHidden,
     'ds-hidden-xl': !!xlHidden,
   });
+};

package/src/Base/wrap.native.tsx

@@ -1,9 +1,7 @@
 import React, { useContext, useMemo, useState } from 'react';
 import { View } from 'react-native';
 
-interface WrapperContextType {
-  (cls: string): void;
-}
+type WrapperContextType = (cls: string) => void;
 
 const WrapperContext = React.createContext<WrapperContextType>(
   (cls: string) => {
@@ -11,7 +9,11 @@ const WrapperContext = React.createContext<WrapperContextType>(
   }
 );
 
-const Wrapper = React.memo(({ children }: { children?: React.ReactNode }) => {
+const Wrapper = React.memo(function Wrapper({
+  children,
+}: {
+  children?: React.ReactNode;
+}) {
   const [className, setClassName] = useState('');
   return (
     <WrapperContext.Provider value={setClassName}>
@@ -21,6 +23,7 @@ const Wrapper = React.memo(({ children }: { children?: React.ReactNode }) => {
     </WrapperContext.Provider>
   );
 });
+Wrapper.displayName = 'Wrapper';
 
 interface WrappedComponentProps {
   className?: string;
@@ -67,11 +70,11 @@ export const wrap = (Component: React.ElementType) => {
           ref={ref}
           onFocus={(e: unknown) => {
             setClassName(focusedWrapperClassNames.join(' '));
-            onFocus && onFocus(e);
+            if (onFocus) onFocus(e);
           }}
           onBlur={(e: unknown) => {
             setClassName(wrapperClassNames.join(' '));
-            onBlur && onBlur(e);
+            if (onBlur) onBlur(e);
           }}
           className={classNames.join(' ')}
           {...props}

package/src/Blockquote/__snapshots__/index.test.tsx.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the Blockquote with dense props 1`] = `
 <body>
   <div>
     <blockquote
-      class="ds-blockquote--dense ds-blockquote"
+      class="ds-blockquote ds-blockquote--dense"
     >
       hello
     </blockquote>

package/src/Blockquote/index.test.tsx

@@ -8,5 +8,7 @@ it('renders the Blockquote with no props', () => {
 });
 
 it('renders the Blockquote with dense props', () => {
-  expect(render(<Blockquote dense>hello</Blockquote>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Blockquote dense>hello</Blockquote>).baseElement
+  ).toMatchSnapshot();
 });

package/src/Bottom/__snapshots__/index.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the Bottom with no props 1`] = `
 <body>

package/src/Bottom/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface BottomProps extends BaseProps<'div'> { }
+export interface BottomProps extends BaseProps<'div'> {}
 /**
  * Bottom is used inside the Layout component and it must be the last component in order.
  */

package/src/BottomInfo/__snapshots__/index.test.tsx.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the BottomInfo with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-bottom-info ds-container ds-gap-sm-12 ds-grid"
+      class="ds-bottom-info ds-container ds-grid ds-grid-item ds-gap-sm-12"
     >
       hello
     </div>

package/src/BottomInfo/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Container, { ContainerProps } from '@digigov/react-core/Container';
 
-export interface BottomInfoProps extends ContainerProps { }
+export interface BottomInfoProps extends ContainerProps {}
 /**
  * Bottom BottomInfo is used inside the Bottom component and it must be the first component in order.
  */

package/src/BottomInfoContainer/__snapshots__/index.test.tsx.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the BottomInfoContainer with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-bottom-info__container ds-container ds-gap-sm-12 ds-grid"
+      class="ds-bottom-info__container ds-container ds-grid ds-grid-item ds-gap-sm-12"
     >
       hello
     </div>

package/src/BottomInfoContainer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Container, { ContainerProps } from '@digigov/react-core/Container';
 
-export interface BottomInfoContainerProps extends ContainerProps { }
+export interface BottomInfoContainerProps extends ContainerProps {}
 /**
  * Bottom BottomInfoContainer is used inside the Bottom component and it must be the first component in order.
  */

package/src/BottomInfoContent/__snapshots__/index.test.tsx.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the BottomInfoContent with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-bottom-info__content xs:ds-grid__col-span-12"
+      class="ds-bottom-info__content ds-grid-item xs:ds-grid__col-span-12"
     >
       hello
     </div>

package/src/BottomInfoContent/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import BottomInfoContent from '@digigov/react-core/BottomInfoContent';
 
 it('renders the BottomInfoContent with no props', () => {
-  expect(render(<BottomInfoContent>hello</BottomInfoContent>).baseElement).toMatchSnapshot();
+  expect(
+    render(<BottomInfoContent>hello</BottomInfoContent>).baseElement
+  ).toMatchSnapshot();
 });

package/src/BottomInfoContent/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Grid, { GridProps } from '@digigov/react-core/Grid';
 
-export interface BottomInfoContentProps extends GridProps { }
+export interface BottomInfoContentProps extends GridProps {}
 /**
  * BottomInfoContent is used inside the BottomInfoContainer component.
  */

package/src/Breadcrumbs/__snapshots__/index.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the Breadcrumbs with no props 1`] = `
 <body>

package/src/Breadcrumbs/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import Breadcrumbs from '@digigov/react-core/Breadcrumbs';
 
 it('renders the Breadcrumbs with no props', () => {
-  expect(render(<Breadcrumbs>hello</Breadcrumbs>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Breadcrumbs>hello</Breadcrumbs>).baseElement
+  ).toMatchSnapshot();
 });

package/src/Breadcrumbs/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface BreadcrumbsProps extends BaseProps<'div'> { }
+export interface BreadcrumbsProps extends BaseProps<'div'> {}
 /**
  * Use Breadcrumbs component when you need to help users understand and move between the multiple levels of a website.
  * The breadcrumb should start with your ‘home’ page and end with the parent section of the current page.

package/src/BreadcrumbsList/__snapshots__/index.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the BreadcrumbsList with no props 1`] = `
 <body>

package/src/BreadcrumbsList/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import BreadcrumbsList from '@digigov/react-core/BreadcrumbsList';
 
 it('renders the BreadcrumbsList with no props', () => {
-  expect(render(<BreadcrumbsList>hello</BreadcrumbsList>).baseElement).toMatchSnapshot();
+  expect(
+    render(<BreadcrumbsList>hello</BreadcrumbsList>).baseElement
+  ).toMatchSnapshot();
 });

package/src/BreadcrumbsList/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface BreadcrumbsListProps extends BaseProps<'ol'> { }
+export interface BreadcrumbsListProps extends BaseProps<'ol'> {}
 /**
  * BreadcrumbsList is used for providing the items inside Breadcrumbs.
  */

package/src/BreadcrumbsListItemLinkBase/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,26 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders the BreadcrumbsListItemLinkBase with href 1`] = `
+<body>
+  <div>
+    <a
+      class="ds-breadcrumbs__link ds-link"
+      href="#"
+    >
+      hello
+    </a>
+  </div>
+</body>
+`;
+
+exports[`renders the BreadcrumbsListItemLinkBase with no props 1`] = `
+<body>
+  <div>
+    <a
+      class="ds-breadcrumbs__link ds-breadcrumbs__link--inactive ds-link"
+    >
+      hello
+    </a>
+  </div>
+</body>
+`;

package/src/BreadcrumbsListItemLinkBase/index.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { BreadcrumbsListItemLinkBase } from '@digigov/react-core/BreadcrumbsListItemLinkBase';
+
+it('renders the BreadcrumbsListItemLinkBase with no props', () => {
+  expect(
+    render(<BreadcrumbsListItemLinkBase>hello</BreadcrumbsListItemLinkBase>)
+      .baseElement
+  ).toMatchSnapshot();
+});
+it('renders the BreadcrumbsListItemLinkBase with href', () => {
+  expect(
+    render(
+      <BreadcrumbsListItemLinkBase href="#">hello</BreadcrumbsListItemLinkBase>
+    ).baseElement
+  ).toMatchSnapshot();
+});

package/src/BreadcrumbsListItemLinkBase/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import clsx from 'clsx';
+import { LinkBase, LinkBaseProps } from '@digigov/react-core/LinkBase';
+
+export interface BreadcrumbsListItemLinkBaseProps extends LinkBaseProps {}
+/**
+ * BreadcrumbsListItemLinkBase creates an anchor link to navigate in different
+ * parts of the breadcrumbs.
+ * It should be used inside BreadcrumbsListItem as children component. This is
+ * the default link component for the BreadcrumbsListItem and it uses the LinkBase
+ * component from `@digigov/react-core`. In case you need to use a different Link
+ * component from a framework or a custom router, use `@digigov/ui/navigation/BreadcrumbsListItemLinkBase` instead.
+ */
+export const BreadcrumbsListItemLinkBase = React.forwardRef<
+  HTMLAnchorElement,
+  BreadcrumbsListItemLinkBaseProps
+>(function BreadcrumbsListItemLinkBase({ href, className, children }, ref) {
+  return (
+    <LinkBase
+      href={href}
+      className={clsx(className, {
+        'ds-breadcrumbs__link': true,
+        'ds-breadcrumbs__link--inactive': href === undefined,
+      })}
+      ref={ref}
+    >
+      {children}
+    </LinkBase>
+  );
+});
+
+export default BreadcrumbsListItemLinkBase;

package/src/BreadcrumbsListItemWrapper/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders the BreadcrumbsListItem with no props 1`] = `
+<body>
+  <div>
+    <li
+      class="ds-breadcrumbs__list-item"
+    >
+      hello
+    </li>
+  </div>
+</body>
+`;