diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx b/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx index 421f5c47b0..d3bc32b0cf 100644 --- a/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx +++ b/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx @@ -16,7 +16,7 @@ export interface GroupCardProps function GroupCardWithForwardRef( { - shadow, + shadow = true, className, children, bgColor, diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCardElement.tsx b/packages/ffe-cards-react/src/GroupCard/GroupCardElement.tsx index d59c082bfd..c9a1e873c9 100644 --- a/packages/ffe-cards-react/src/GroupCard/GroupCardElement.tsx +++ b/packages/ffe-cards-react/src/GroupCard/GroupCardElement.tsx @@ -23,7 +23,7 @@ function GroupCardElementWithForwardRef( ) { const { className, - noPadding, + noPadding = false, noSeparator = false, children, ...rest 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..7b5d418712 --- /dev/null +++ b/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 = Omit< + ComponentAsPropParams, + 'children' +> & { + /** No padding on the element */ + noPadding?: boolean; + children: + | React.ReactNode + | ((cardRenderProps: CardRenderProps) => React.ReactNode); +}; + +function GroupCardFooterWithForwardRef( + props: GroupCardFooterProps, + ref: ForwardedRef, +) { + const { className, noPadding = false, children, ...rest } = props; + + return ( + )} + ref={ref} + > + {({ CardAction }) => + typeof children === 'function' + ? children({ Text, Subtext, Title, CardName, CardAction }) + : children + } + + ); +} + +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..763420d559 --- /dev/null +++ b/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 = Omit< + ComponentAsPropParams, + 'children' +> & { + /** No padding on the element */ + noPadding?: boolean; + /** Visible border underneath title*/ + noSeparator?: boolean; + children: + | React.ReactNode + | ((cardRenderProps: CardRenderProps) => React.ReactNode); +}; + +function GroupCardTitleWithForwardRef( + props: GroupCardTitleProps, + ref: ForwardedRef, +) { + const { + className, + noPadding = false, + noSeparator = false, + children, + ...rest + } = props; + + return ( + )} + ref={ref} + > + {({ CardAction }) => + typeof children === 'function' + ? children({ Text, Subtext, Title, CardName, CardAction }) + : children + } + + ); +} + +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,