fix(Breadcrumb): properly handle spacing props

dnbexperience · May 19, 2022 · b713dad · b713dad
1 parent 09e5293
commit b713dad
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 8 deletions.
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx b/packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx
@@ -16,7 +16,10 @@ import { usePropsWithContext } from '../../shared/hooks'
 
 // Internal
 import BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'
-import { convertJsxToString } from '../../shared/component-helper'
+import {
+  convertJsxToString,
+  validateDOMAttributes,
+} from '../../shared/component-helper'
 
 export interface BreadcrumbProps {
   /**
@@ -126,6 +129,13 @@ const Breadcrumb = (localProps: BreadcrumbProps & ISpacingProps) => {
   // Every component should have a context
   const context = React.useContext(Context)
   // Extract additional props from global context
+  const allProps = usePropsWithContext(
+    localProps,
+    defaultProps,
+    context?.translation?.Breadcrumb,
+    context?.Breadcrumb,
+    { skeleton: context?.skeleton }
+  )
   const {
     className,
     skeleton,
@@ -143,13 +153,7 @@ const Breadcrumb = (localProps: BreadcrumbProps & ISpacingProps) => {
     data,
     href,
     ...props
-  } = usePropsWithContext(
-    localProps,
-    defaultProps,
-    context?.translation?.Breadcrumb,
-    context?.Breadcrumb,
-    { skeleton: context?.skeleton }
-  )
+  } = allProps
   const skeletonClasses = createSkeletonClass('font', skeleton, context)
   const spacingClasses = createSpacingClasses(props)
 
@@ -190,6 +194,8 @@ const Breadcrumb = (localProps: BreadcrumbProps & ISpacingProps) => {
     </ol>
   )
 
+  validateDOMAttributes(allProps, props)
+
   return (
     <nav
       aria-label={convertJsxToString(navText)}

diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/Breadcrumb.test.tsx b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/Breadcrumb.test.tsx
@@ -139,6 +139,30 @@ describe('Breadcrumb', () => {
     expect(screen.getByRole('button').className).toMatch(skeletonClassName)
   })
 
+  it('should support spacing props', () => {
+    render(
+      <Breadcrumb
+        data={[
+          { href: '/' },
+          { href: '/page1', text: 'Page 1' },
+          { href: '/page1/page2', text: 'Page 2' },
+        ]}
+        top="2rem"
+      />
+    )
+
+    const element = screen.getByTestId('breadcrumb-nav')
+    const attributes = Array.from(element.attributes).map(
+      (attr) => attr.name
+    )
+
+    expect(attributes).toEqual(['aria-label', 'class', 'data-testid'])
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-breadcrumb',
+      'dnb-space__top--large',
+    ])
+  })
+
   describe('BreadcrumbItem', () => {
     it('renders breadcrumbitem as a link', () => {
       render(<BreadcrumbItem href="/url" text="Page" />)