feat(IconCard): Legg til prop for å plassere ikon på høyre side

SpareBank1 · Aug 16, 2024 · f43d2bb · f43d2bb
1 parent 09552a4
commit f43d2bb
Show file tree

Hide file tree

Showing 3 changed files with 22 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,21 @@ describe('IconCard', () => {
         ).toBeTruthy();
     });
 
+    it('should add modifying classes when modifier iconOnRight is given', () => {
+        render(
+            <IconCard
+                data-testid={TEST_ID}
+                iconOnRight={true}
+                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
@@ -12,6 +12,7 @@ export type IconCardProps<As extends ElementType = 'div'> = Omit<
     icon: ReactElement;
     /** Smaller icon and less space */
     condensed?: boolean;
+    iconOnRight?: boolean;
     children:
         | React.ReactNode
         | ((cardRenderProps: CardRenderProps) => React.ReactNode);
@@ -21,13 +22,14 @@ function IconCardWithForwardRef<As extends ElementType>(
     props: IconCardProps<As>,
     ref: ForwardedRef<any>,
 ) {
-    const { className, condensed, icon, children, ...rest } = props;
+    const { className, condensed, icon, children, iconOnRight, ...rest } = props;
     return (
         <WithCardAction
             baseClassName="ffe-icon-card"
             className={classNames(
                 'ffe-icon-card',
                 { 'ffe-icon-card--condensed': condensed },
+                { 'ffe-icon-card--icon-right': iconOnRight },
                 className,
             )}
             {...(rest as Record<string, unknown>)}

diff --git a/packages/ffe-cards/less/icon-card.less b/packages/ffe-cards/less/icon-card.less
@@ -30,3 +30,7 @@
         margin: 0 var(--ffe-spacing-sm) 0 0;
     }
 }
+
+.ffe-icon-card--icon-right {
+    flex-direction: row-reverse;
+}