feat(ffe-cards-react): groupcard, fjernet nopadding og oppdatert utse…

…ende BREAKING CHANGE: dfd
SpareBank1 · Aug 19, 2024 · f30ee76 · f30ee76
1 parent d3af154
commit f30ee76
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,