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 · 693118a · 693118a
1 parent 99cdaff
commit 693118a
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 6 deletions.
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
@@ -4,17 +4,19 @@ import classNames from 'classnames';
 import { CardName, Subtext, Text, Title, WithCardAction } from '../components';
 import { fixedForwardRef } from '../fixedForwardRef';
 
+type Img = {
+    element: ReactNode;
+    type: 'icon' | 'custom';
+};
 export type StippledCardProps<As extends ElementType = 'div'> = Omit<
     ComponentAsPropParams<As>,
     'children'
 > & {
     /** Smaller icon and less space */
     condensed?: boolean;
     /** Image to be rendered*/
-    img?: {
-        element: ReactNode;
-        type: 'icon' | 'custom';
-    };
+    img?: Img;
+    rightImg?: Img;
     /** No margin on card */
     noMargin?: boolean;
     children:
@@ -26,7 +28,8 @@ 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
@@ -53,7 +56,7 @@ function StippledCardWithForwardRef<As extends ElementType>(
                             {img?.element}
                         </div>
                     )}
-                    <div>
+                    <div className={'ffe-stippled-card__content'}>
                         {typeof children === 'function'
                             ? children({
                                   CardName,
@@ -64,6 +67,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>