Merge pull request #2136 from SpareBank1/develop-illustration-card

Ønskeliste: Illustration card

packages/ffe-cards-react/src/IllustrationCard/IllustrationCard.tsx

@@ -0,0 +1,61 @@
+import React, { ElementType, ForwardedRef, ReactElement } from 'react';
+import { CardRenderProps, ComponentAsPropParams } from '../types';
+import classNames from 'classnames';
+import { WithCardAction, Text, Subtext, Title, CardName } from '../components';
+import { fixedForwardRef } from '../fixedForwardRef';
+
+export type IllustrationCardProps<As extends ElementType = 'div'> = Omit<
+    ComponentAsPropParams<As>,
+    'children'
+> & {
+    /** Element of illustration */
+    img: ReactElement;
+    /** Smaller illustration and less space */
+    condensed?: boolean;
+    children:
+        | React.ReactNode
+        | ((cardRenderProps: CardRenderProps) => React.ReactNode);
+};
+
+function IllustrationCardWithForwardRef<As extends ElementType>(
+    props: IllustrationCardProps<As>,
+    ref: ForwardedRef<any>,
+) {
+    const { className, condensed, img, children, ...rest } = props;
+    return (
+        <WithCardAction
+            className={classNames(
+                'ffe-illustration-card',
+                { 'ffe-illustration-card--condensed': condensed },
+                className,
+            )}
+            {...(rest as Record<string, unknown>)}
+            ref={ref}
+        >
+            {({ CardAction }) => (
+                <>
+                    <div
+                        className={classNames(
+                            'ffe-illustration-card__illustration',
+                        )}
+                    >
+                        {img}
+                    </div>
+                    <div className="ffe-illustration-card__body">
+                        {typeof children === 'function'
+                            ? children({
+                                  Text,
+                                  Subtext,
+                                  Title,
+                                  CardName,
+                                  CardAction,
+                              })
+                            : children}
+                    </div>
+                </>
+            )}
+        </WithCardAction>
+    );
+}
+
+export const IllustrationCard = fixedForwardRef(IllustrationCardWithForwardRef);

packages/ffe-cards-react/src/index.ts

@@ -1,5 +1,9 @@
 export { CardBase, CardBaseProps } from './CardBase';
 export { TextCard, TextCardProps } from './TextCard/TextCard';
 export { IconCard, IconCardProps } from './IconCard/IconCard';
+export {
+    IllustrationCard,
+    IllustrationCardProps,
+} from './IllustrationCard/IllustrationCard';
 export { ImageCard, ImageCardProps } from './ImageCard/ImageCard';
 export { StippledCard, StippledCardProps } from './StippledCard/StippledCard';

packages/ffe-cards/less/cards.less

@@ -2,5 +2,6 @@
 @import 'card-base';
 @import 'text-card';
 @import 'icon-card';
+@import 'illustration-card';
 @import 'image-card';
 @import 'stippled-card';

packages/ffe-cards/less/illustration-card.less

@@ -0,0 +1,17 @@
+@import 'common-card-styling';
+@import 'components';
+
+.ffe-illustration-card {
+    .common-card-styling();
+
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: var(--ffe-spacing-md);
+    padding: var(--ffe-spacing-md);
+    align-items: center;
+
+    &--condensed {
+        column-gap: var(--ffe-spacing-sm);
+        padding: var(--ffe-spacing-sm);
+    }
+}