fix(Timeline): properly handle spacing props

dnbexperience · May 20, 2022 · e823c6e · e823c6e
1 parent 2e2d371
commit e823c6e
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/packages/dnb-eufemia/src/components/timeline/Timeline.tsx b/packages/dnb-eufemia/src/components/timeline/Timeline.tsx
@@ -12,6 +12,7 @@ import { usePropsWithContext } from '../../shared/hooks'
 
 // Internal
 import TimelineItem, { TimelineItemProps } from './TimelineItem'
+import { validateDOMAttributes } from '../../shared/component-helper'
 
 export interface TimelineProps {
   /**
@@ -51,16 +52,23 @@ export const defaultProps = {
 const Timeline = (localProps: TimelineProps & ISpacingProps) => {
   // Every component should have a context
   const context = React.useContext(Context)
+
   // Extract additional props from global context
+  const allProps = usePropsWithContext(
+    localProps,
+    defaultProps,
+    context?.Timeline,
+    {
+      skeleton: context?.skeleton,
+    }
+  )
   const {
     className,
     skeleton,
     data,
     children: childrenProp,
     ...props
-  } = usePropsWithContext(localProps, defaultProps, context?.Timeline, {
-    skeleton: context?.skeleton,
-  })
+  } = allProps
 
   const spacingClasses = createSpacingClasses(props)
 
@@ -75,6 +83,8 @@ const Timeline = (localProps: TimelineProps & ISpacingProps) => {
     })
   }
 
+  validateDOMAttributes(allProps, props)
+
   return (
     <div
       className={classnames('dnb-timeline', spacingClasses, className)}

diff --git a/packages/dnb-eufemia/src/components/timeline/__tests__/Timeline.test.tsx b/packages/dnb-eufemia/src/components/timeline/__tests__/Timeline.test.tsx
@@ -82,6 +82,31 @@ describe('Timeline', () => {
     )
   })
 
+  it('should support spacing props', () => {
+    render(
+      <Timeline
+        data={[
+          {
+            name: 'Upcoming',
+            state: 'upcoming',
+          },
+        ]}
+        top="2rem"
+      />
+    )
+
+    const element = screen.getByTestId('timeline')
+    const attributes = Array.from(element.attributes).map(
+      (attr) => attr.name
+    )
+
+    expect(attributes).toEqual(['class', 'data-testid'])
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-timeline',
+      'dnb-space__top--large',
+    ])
+  })
+
   describe('TimelineItem', () => {
     it('renders name', () => {
       const name = 'Completed'