fix(ffe-lists-react): retter html hierarki feil med at button og link…

… ikke kan være under dl
SpareBank1 · Mar 13, 2024 · 79b0cb9 · 79b0cb9
1 parent a4c7e9e
commit 79b0cb9
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 15 deletions.
diff --git a/packages/ffe-lists-react/src/DetailListCard.spec.js b/packages/ffe-lists-react/src/DetailListCard.spec.js
@@ -45,10 +45,6 @@ describe('<DetailListCard />', () => {
         expect(wrapper.hasClass('test-class')).toBe(true);
     });
 
-    it('render correct element based on element prop', () => {
-        const wrapper = getDetailListCardItemWrapper({ element: 'a' });
-        expect(wrapper.is('a')).toBe(true);
-    });
     it('adds additional props correctly', () => {
         const wrapper = getDetailListCardItemWrapper({ href: '#' });
         expect(wrapper.prop('href')).toBe('#');

diff --git a/packages/ffe-lists-react/src/DetailListCardItem.js b/packages/ffe-lists-react/src/DetailListCardItem.js
@@ -1,21 +1,22 @@
 import React from 'react';
 import classNames from 'classnames';
-import { string, oneOfType, node, func, elementType } from 'prop-types';
+import { string, oneOfType, node, oneOf } from 'prop-types';
 
 const DetailListCardItem = props => {
-    const { className, label, value, element: Element, ...rest } = props;
+    const { className, label, value, role, ...rest } = props;
 
     const isClickable = rest.onClick || rest.href;
 
     return (
-        <Element
+        <div
             className={classNames(
                 'ffe-detail-list-card__item',
                 {
                     'ffe-detail-list-card__item--clickable': isClickable,
                 },
                 className,
             )}
+            role={role}
             {...rest}
         >
             <dt className="ffe-detail-list-card__item-label">
@@ -28,19 +29,15 @@ const DetailListCardItem = props => {
                     ? value
                     : React.cloneElement(value, { ...value.props })}
             </dd>
-        </Element>
+        </div>
     );
 };
 
-DetailListCardItem.defaultProps = {
-    element: 'div',
-};
-
 DetailListCardItem.propTypes = {
     /** Additional classnames */
     className: string,
-    /** The element to render the item as */
-    element: oneOfType([func, string, elementType]),
+    /** The role the row should have. use Link if it has a href, and button if it only got an onClick */
+    role: oneOf(['link', 'button']),
     /** Content of the label / left column */
     label: oneOfType([node, string]).isRequired,
     /** Content of the value / right column */

diff --git a/packages/ffe-lists-react/src/index.d.ts b/packages/ffe-lists-react/src/index.d.ts
@@ -34,7 +34,7 @@ export interface DescriptionListProps extends BaseListProps {
 
 export interface DetailListCardItemProps {
     className?: string;
-    element?: HTMLElement | string | React.ElementType;
+    role?: 'link' | 'button';
     label: React.ReactNode;
     value: React.ReactNode;
 }