feat(ffe-cards-react): legg til rightImg-prop

legger til muligheten til å ha ikon på høyreside, og for at man kan ha 2 ikoner i samme kort
SpareBank1 · Nov 28, 2024 · 7129153 · 7129153
1 parent 99cdaff
commit 7129153
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 1 deletion.
diff --git a/packages/ffe-cards-react/src/StippledCard/StippledCard.spec.tsx b/packages/ffe-cards-react/src/StippledCard/StippledCard.spec.tsx
@@ -96,6 +96,45 @@ describe('StippledCard', () => {
         expect(screen.getByRole('listitem')).toBeInTheDocument();
     });
 
+    it('render rightImg only correctly', () => {
+        render(
+            <StippledCard
+                data-testid={TEST_ID}
+                rightImg={{
+                    element: <Icon fileUrl="monitoring" size="md" />,
+                    type: 'icon',
+                }}
+            >
+                {children}
+            </StippledCard>,
+        );
+        const card = screen.getByTestId(TEST_ID);
+        expect(
+            card.classList.contains('ffe-stippled-card__right-img-only'),
+        ).toBeTruthy();
+    });
+    it('render two icons correctly', () => {
+        render(
+            <StippledCard
+                data-testid={TEST_ID}
+                img={{
+                    element: <Icon fileUrl="monitoring" size="md" />,
+                    type: 'icon',
+                }}
+                rightImg={{
+                    element: <Icon fileUrl="monitoring" size="md" />,
+                    type: 'icon',
+                }}
+            >
+                {children}
+            </StippledCard>,
+        );
+        const card = screen.getByTestId(TEST_ID);
+        expect(
+            card.classList.contains('ffe-stippled-card--three-columns'),
+        ).toBeTruthy();
+    });
+
     it('should set ref', () => {
         const ref = React.createRef<HTMLLIElement>();
         render(

diff --git a/packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx b/packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx
@@ -83,6 +83,68 @@ export const WithIcon: Story = {
     ),
 };
 
+export const WithRightIconOnly: Story = {
+    args: {
+        as: 'div',
+        rightImg: {
+            type: 'icon',
+            element: <Icon fileUrl="./icons/open/300/md/add.svg" size="md" />,
+        },
+    },
+    render: args => (
+        <StippledCard {...args}>
+            {({ CardName, Title, Subtext, Text }) => (
+                <>
+                    <CardName>CardName</CardName>
+                    <Title>Tittel</Title>
+                    <Subtext as="span">Subtext er grå</Subtext>
+                    <Text>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                        sed do eiusmod tempor incididunt ut labore et dolore
+                        magna aliqua. Ut enim ad minim veniam, quis nostrud
+                        exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat.
+                    </Text>
+                </>
+            )}
+        </StippledCard>
+    ),
+};
+
+export const With2Icons: Story = {
+    args: {
+        as: 'div',
+        img: {
+            type: 'icon',
+            element: (
+                <Icon fileUrl="./icons/open/300/xl/monitoring.svg" size="xl" />
+            ),
+        },
+        rightImg: {
+            type: 'icon',
+            element: <Icon fileUrl="./icons/open/300/md/add.svg" size="md" />,
+        },
+    },
+    render: args => (
+        <StippledCard {...args}>
+            {({ CardName, Title, Subtext, Text }) => (
+                <>
+                    <CardName>CardName</CardName>
+                    <Title>Tittel</Title>
+                    <Subtext as="span">Subtext er grå</Subtext>
+                    <Text>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                        sed do eiusmod tempor incididunt ut labore et dolore
+                        magna aliqua. Ut enim ad minim veniam, quis nostrud
+                        exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat.
+                    </Text>
+                </>
+            )}
+        </StippledCard>
+    ),
+};
+
 export const WithCustom: Story = {
     args: {
         as: 'div',

diff --git a/packages/ffe-cards-react/src/StippledCard/StippledCard.tsx b/packages/ffe-cards-react/src/StippledCard/StippledCard.tsx
@@ -15,6 +15,10 @@ export type StippledCardProps<As extends ElementType = 'div'> = Omit<
         element: ReactNode;
         type: 'icon' | 'custom';
     };
+    rightImg?: {
+        element: ReactNode;
+        type: 'icon' | 'custom';
+    };
     /** No margin on card */
     noMargin?: boolean;
     children:
@@ -26,13 +30,16 @@ function StippledCardWithForwardRef<As extends ElementType>(
     props: StippledCardProps<As>,
     ref: ForwardedRef<any>,
 ) {
-    const { className, condensed, img, noMargin, children, ...rest } = props;
+    const { className, condensed, img, noMargin, rightImg, children, ...rest } =
+        props;
 
     return (
         <WithCardAction
             baseClassName="ffe-stippled-card"
             className={classNames(
                 'ffe-stippled-card',
+                { 'ffe-stippled-card--three-columns': img && rightImg },
+                { 'ffe-stippled-card__right-img-only': !img && rightImg },
                 { 'ffe-stippled-card--condensed': condensed },
                 { 'ffe-stippled-card--no-margin': noMargin },
                 className,
@@ -64,6 +71,17 @@ function StippledCardWithForwardRef<As extends ElementType>(
                               })
                             : children}
                     </div>
+                    {rightImg && (
+                        <div
+                            className={classNames('ffe-stippled-card__img', {
+                                'ffe-stippled-card__img--icon':
+                                    rightImg?.type === 'icon',
+                            })}
+                            aria-hidden={rightImg?.type === 'icon'}
+                        >
+                            {rightImg?.element}
+                        </div>
+                    )}
                 </>
             )}
         </WithCardAction>