feat(ffe-cards-react): groupcard, oppdatert utseende

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

@@ -16,7 +16,7 @@ export interface GroupCardProps
 
 function GroupCardWithForwardRef(
     {
-        shadow,
+        shadow = true,
         className,
         children,
         bgColor,

packages/ffe-cards-react/src/GroupCard/GroupCardElement.tsx

@@ -23,7 +23,7 @@ function GroupCardElementWithForwardRef<As extends ElementType>(
 ) {
     const {
         className,
-        noPadding,
+        noPadding = false,
         noSeparator = false,
         children,
         ...rest

packages/ffe-cards-react/src/GroupCard/GroupCardFooter.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 GroupCardFooterProps<As extends ElementType = 'div'> = Omit<
+    ComponentAsPropParams<As>,
+    'children'
+> & {
+    /** No padding on the element */
+    noPadding?: boolean;
+    children:
+        | React.ReactNode
+        | ((cardRenderProps: CardRenderProps) => React.ReactNode);
+};
+
+function GroupCardFooterWithForwardRef<As extends ElementType>(
+    props: GroupCardFooterProps<As>,
+    ref: ForwardedRef<any>,
+) {
+    const { className, noPadding = false, children, ...rest } = props;
+
+    return (
+        <WithCardAction
+            baseClassName="ffe-group-card__footer"
+            className={classNames('ffe-group-card__footer', className, {
+                'ffe-group-card__element--no-padding': noPadding,
+            })}
+            {...(rest as Record<string, unknown>)}
+            ref={ref}
+        >
+            {({ CardAction }) =>
+                typeof children === 'function'
+                    ? children({ Text, Subtext, Title, CardName, CardAction })
+                    : children
+            }
+        </WithCardAction>
+    );
+}
+
+export const GroupCardFooter = fixedForwardRef(GroupCardFooterWithForwardRef);

packages/ffe-cards-react/src/GroupCard/GroupCardTitle.tsx

@@ -0,0 +1,51 @@
+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'
+> & {
+    /** No padding on the element */
+    noPadding?: boolean;
+    /** 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,
+        noPadding = false,
+        noSeparator = false,
+        children,
+        ...rest
+    } = props;
+
+    return (
+        <WithCardAction
+            baseClassName="ffe-group-card__title"
+            className={classNames('ffe-group-card__title', className, {
+                'ffe-group-card__element--no-padding': noPadding,
+                '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);

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,