Merge pull request #2429 from SpareBank1/stippledcard-legg-til-righticon

Legg til muligheten for 2 ikoner og ikon på høyre side i StippledCard
SpareBank1 · Nov 28, 2024 · 7bde55a · 7bde55a
2 parents 2c161d2 + 8ac543e
commit 7bde55a
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 8 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>

diff --git a/packages/ffe-cards/less/stippled-card.less b/packages/ffe-cards/less/stippled-card.less
@@ -25,15 +25,23 @@
     background: transparent;
     border: 2px dashed var(--ffe-v-cards-stippled-border-color);
     box-shadow: none;
-    display: grid;
-    grid-template-columns: auto 1fr;
+    display: flex;
     align-items: center;
     padding: var(--ffe-spacing-md);
     gap: var(--ffe-spacing-md);
 }
 
+.ffe-stippled-card__content {
+    flex-grow: 1;
+}
+.ffe-stippled-card__img {
+    flex-shrink: 0;
+    flex-grow: 0;
+}
+
 .ffe-stippled-card__img--icon {
     margin: 0 var(--ffe-spacing-md);
+    display: flex;
 }
 
 .ffe-stippled-card--condensed {