feat(ffe-cards-react): icons on right IconCard

SpareBank1 · Aug 19, 2024 · 636ebd3 · 636ebd3
1 parent e9b9e32
commit 636ebd3
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/packages/ffe-cards-react/src/IconCard/IconCard.spec.tsx b/packages/ffe-cards-react/src/IconCard/IconCard.spec.tsx
@@ -62,6 +62,20 @@ describe('IconCard', () => {
         ).toBeTruthy();
     });
 
+    it('should render icon on the right when modifier iconPosition="right', () => {
+        render(
+            <IconCard
+                data-testid={TEST_ID}
+                iconPosition="right"
+                icon={<Icon fileUrl={savingsIconXlarge} size="xl" />}
+            >
+                {children}
+            </IconCard>,
+        );
+        const card = screen.getByTestId(TEST_ID);
+        expect(card.classList.contains('ffe-icon-card')).toBeTruthy();
+    });
+
     it('should render children as a function', () => {
         render(
             <IconCard

diff --git a/packages/ffe-cards-react/src/IconCard/IconCard.tsx b/packages/ffe-cards-react/src/IconCard/IconCard.tsx
@@ -4,6 +4,8 @@ import classNames from 'classnames';
 import { WithCardAction, Text, Subtext, Title, CardName } from '../components';
 import { fixedForwardRef } from '../fixedForwardRef';
 
+export type IconPosition = 'right' | 'left';
+
 export type IconCardProps<As extends ElementType = 'div'> = Omit<
     ComponentAsPropParams<As>,
     'children'
@@ -12,6 +14,8 @@ export type IconCardProps<As extends ElementType = 'div'> = Omit<
     icon: ReactElement;
     /** Smaller icon and less space */
     condensed?: boolean;
+    /** Position icon at left (default) or right of the card content */
+    iconPosition?: IconPosition;
     children:
         | React.ReactNode
         | ((cardRenderProps: CardRenderProps) => React.ReactNode);
@@ -21,7 +25,9 @@ function IconCardWithForwardRef<As extends ElementType>(
     props: IconCardProps<As>,
     ref: ForwardedRef<any>,
 ) {
-    const { className, condensed, icon, children, ...rest } = props;
+    const { className, condensed, icon, children, iconPosition, ...rest } =
+        props;
+    const iconRight = iconPosition === 'right';
     return (
         <WithCardAction
             baseClassName="ffe-icon-card"
@@ -35,7 +41,7 @@ function IconCardWithForwardRef<As extends ElementType>(
         >
             {({ CardAction }) => (
                 <>
-                    {React.cloneElement(icon, {
+                    {!iconRight && React.cloneElement(icon, {
                         ...icon.props,
                         className: classNames(
                             'ffe-icon-card__icon',
@@ -53,6 +59,13 @@ function IconCardWithForwardRef<As extends ElementType>(
                               })
                             : children}
                     </div>
+                    {iconRight && React.cloneElement(icon, {
+                        ...icon.props,
+                        className: classNames(
+                            'ffe-icon-card__icon',
+                            icon.props.className,
+                        ),
+                    })}
                 </>
             )}
         </WithCardAction>