From a5d175f3aa7708234d5bf8892537fffc19b504e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tuva=20=C3=98deg=C3=A5rd?= <tuva.odegard@sparebank1.no>
Date: Mon, 19 Aug 2024 14:04:33 +0200
Subject: [PATCH] feat(ffe-cards-react): groupcard, fjernet nopadding og
 oppdatert utseende

BREAKING CHANGE: Fjernet noPadding
---
 .../src/GroupCard/GroupCard.tsx               |  6 +--
 .../src/GroupCard/GroupCardElement.tsx        | 11 +----
 .../src/GroupCard/GroupCardFooter.tsx         | 38 +++++++++++++++++
 .../src/GroupCard/GroupCardTitle.tsx          | 42 +++++++++++++++++++
 packages/ffe-cards-react/src/index.ts         |  8 ++++
 5 files changed, 92 insertions(+), 13 deletions(-)
 create mode 100644 packages/ffe-cards-react/src/GroupCard/GroupCardFooter.tsx
 create mode 100644 packages/ffe-cards-react/src/GroupCard/GroupCardTitle.tsx

diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx b/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx
index 421f5c47b0..2b4730aed3 100644
--- a/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx
+++ b/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx
@@ -5,7 +5,7 @@ import { BgColor, BgColorDarkmode } from '../types';
 
 export interface GroupCardProps
     extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
-    shadow?: boolean;
+    noShadow?: boolean;
     /** The children of the GroupCard component */
     children: React.ReactNode;
     /** The background color of the whole groupcard element */
@@ -16,7 +16,7 @@ export interface GroupCardProps
 
 function GroupCardWithForwardRef(
     {
-        shadow,
+        noShadow,
         className,
         children,
         bgColor,
@@ -30,7 +30,7 @@ function GroupCardWithForwardRef(
             className={classNames(
                 'ffe-group-card',
                 {
-                    'ffe-group-card--shadow': shadow,
+                    'ffe-group-card--no-shadow': noShadow,
                     [`ffe-group-card--bg-${bgColor}`]: bgColor,
                     [`ffe-group-card--dm-bg-${bgDarkmodeColor}`]:
                         bgDarkmodeColor,
diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCardElement.tsx b/packages/ffe-cards-react/src/GroupCard/GroupCardElement.tsx
index d59c082bfd..96f4c05a7c 100644
--- a/packages/ffe-cards-react/src/GroupCard/GroupCardElement.tsx
+++ b/packages/ffe-cards-react/src/GroupCard/GroupCardElement.tsx
@@ -8,8 +8,6 @@ export type GroupCardElementProps<As extends ElementType = 'div'> = Omit<
     ComponentAsPropParams<As>,
     'children'
 > & {
-    /** No padding on the element */
-    noPadding?: boolean;
     /** Visible border between the elements*/
     noSeparator?: boolean;
     children:
@@ -21,19 +19,12 @@ function GroupCardElementWithForwardRef<As extends ElementType>(
     props: GroupCardElementProps<As>,
     ref: ForwardedRef<any>,
 ) {
-    const {
-        className,
-        noPadding,
-        noSeparator = false,
-        children,
-        ...rest
-    } = props;
+    const { className, noSeparator = false, children, ...rest } = props;
 
     return (
         <WithCardAction
             baseClassName="ffe-group-card__element"
             className={classNames('ffe-group-card__element', className, {
-                'ffe-group-card__element--no-padding': noPadding,
                 'ffe-group-card__element--no-separator': noSeparator,
             })}
             {...(rest as Record<string, unknown>)}
diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCardFooter.tsx b/packages/ffe-cards-react/src/GroupCard/GroupCardFooter.tsx
new file mode 100644
index 0000000000..8bf2a7e9a3
--- /dev/null
+++ b/packages/ffe-cards-react/src/GroupCard/GroupCardFooter.tsx
@@ -0,0 +1,38 @@
+import React, { ElementType, ForwardedRef } from 'react';
+import classNames from 'classnames';
+import { CardName, Subtext, Text, Title, WithCardAction } from '../components';
+import { CardRenderProps, ComponentAsPropParams } from '../types';
+import { fixedForwardRef } from '../fixedForwardRef';
+
+export type GroupCardFooterProps<As extends ElementType = 'div'> = Omit<
+    ComponentAsPropParams<As>,
+    'children'
+> & {
+    children:
+        | React.ReactNode
+        | ((cardRenderProps: CardRenderProps) => React.ReactNode);
+};
+
+function GroupCardFooterWithForwardRef<As extends ElementType>(
+    props: GroupCardFooterProps<As>,
+    ref: ForwardedRef<any>,
+) {
+    const { className, children, ...rest } = props;
+
+    return (
+        <WithCardAction
+            baseClassName="ffe-group-card__footer"
+            className={classNames('ffe-group-card__footer', className, {})}
+            {...(rest as Record<string, unknown>)}
+            ref={ref}
+        >
+            {({ CardAction }) =>
+                typeof children === 'function'
+                    ? children({ Text, Subtext, Title, CardName, CardAction })
+                    : children
+            }
+        </WithCardAction>
+    );
+}
+
+export const GroupCardFooter = fixedForwardRef(GroupCardFooterWithForwardRef);
diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCardTitle.tsx b/packages/ffe-cards-react/src/GroupCard/GroupCardTitle.tsx
new file mode 100644
index 0000000000..d46f7334e1
--- /dev/null
+++ b/packages/ffe-cards-react/src/GroupCard/GroupCardTitle.tsx
@@ -0,0 +1,42 @@
+import React, { ElementType, ForwardedRef } from 'react';
+import classNames from 'classnames';
+import { CardName, Subtext, Text, Title, WithCardAction } from '../components';
+import { CardRenderProps, ComponentAsPropParams } from '../types';
+import { fixedForwardRef } from '../fixedForwardRef';
+
+export type GroupCardTitleProps<As extends ElementType = 'div'> = Omit<
+    ComponentAsPropParams<As>,
+    'children'
+> & {
+    /** Visible border underneath title*/
+    noSeparator?: boolean;
+    children:
+        | React.ReactNode
+        | ((cardRenderProps: CardRenderProps) => React.ReactNode);
+};
+
+function GroupCardTitleWithForwardRef<As extends ElementType>(
+    props: GroupCardTitleProps<As>,
+    ref: ForwardedRef<any>,
+) {
+    const { className, noSeparator = false, children, ...rest } = props;
+
+    return (
+        <WithCardAction
+            baseClassName="ffe-group-card__title"
+            className={classNames('ffe-group-card__title', className, {
+                'ffe-group-card__element--no-separator': noSeparator,
+            })}
+            {...(rest as Record<string, unknown>)}
+            ref={ref}
+        >
+            {({ CardAction }) =>
+                typeof children === 'function'
+                    ? children({ Text, Subtext, Title, CardName, CardAction })
+                    : children
+            }
+        </WithCardAction>
+    );
+}
+
+export const GroupCardTitle = fixedForwardRef(GroupCardTitleWithForwardRef);
diff --git a/packages/ffe-cards-react/src/index.ts b/packages/ffe-cards-react/src/index.ts
index 14009f6ca8..9ab05d8092 100644
--- a/packages/ffe-cards-react/src/index.ts
+++ b/packages/ffe-cards-react/src/index.ts
@@ -6,6 +6,14 @@ export {
     GroupCardElement,
     GroupCardElementProps,
 } from './GroupCard/GroupCardElement';
+export {
+    GroupCardTitle,
+    GroupCardTitleProps,
+} from './GroupCard/GroupCardTitle';
+export {
+    GroupCardFooter,
+    GroupCardFooterProps,
+} from './GroupCard/GroupCardFooter';
 export {
     IllustrationCard,
     IllustrationCardProps,