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

SpareBank1 · Aug 19, 2024 · ae412e8 · ae412e8
1 parent f1d0576
commit ae412e8
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
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,23 @@ describe('IconCard', () => {
         ).toBeTruthy();
     });
 
+    it('should add modifying classes when modifier iconPosition is given', () => {
+        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();
+        expect(
+            card.classList.contains('ffe-icon-card--icon-right'),
+        ).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,13 +25,16 @@ 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"
             className={classNames(
                 'ffe-icon-card',
                 { 'ffe-icon-card--condensed': condensed },
+                { 'ffe-icon-card--icon-right': iconRight },
                 className,
             )}
             {...(rest as Record<string, unknown>)}