diff --git a/packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx b/packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx index 509ae2ceeb..87dc04435d 100644 --- a/packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx +++ b/packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx @@ -83,6 +83,68 @@ export const WithIcon: Story = { ), }; +export const WithRightIconOnly: Story = { + args: { + as: 'div', + rightImg: { + type: 'icon', + element: , + }, + }, + render: args => ( + + {({ CardName, Title, Subtext, Text }) => ( + <> + CardName + Tittel + Subtext er grå + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. + + + )} + + ), +}; + +export const With2Icons: Story = { + args: { + as: 'div', + img: { + type: 'icon', + element: ( + + ), + }, + rightImg: { + type: 'icon', + element: , + }, + }, + render: args => ( + + {({ CardName, Title, Subtext, Text }) => ( + <> + CardName + Tittel + Subtext er grå + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. + + + )} + + ), +}; + export const WithCustom: Story = { args: { as: 'div', diff --git a/packages/ffe-cards-react/src/StippledCard/StippledCard.tsx b/packages/ffe-cards-react/src/StippledCard/StippledCard.tsx index 2d571d19da..5f37ed1f18 100644 --- a/packages/ffe-cards-react/src/StippledCard/StippledCard.tsx +++ b/packages/ffe-cards-react/src/StippledCard/StippledCard.tsx @@ -4,6 +4,10 @@ import classNames from 'classnames'; import { CardName, Subtext, Text, Title, WithCardAction } from '../components'; import { fixedForwardRef } from '../fixedForwardRef'; +type Img = { + element: ReactNode; + type: 'icon' | 'custom'; +}; export type StippledCardProps = Omit< ComponentAsPropParams, 'children' @@ -11,10 +15,8 @@ export type StippledCardProps = Omit< /** Smaller icon and less space */ condensed?: boolean; /** Image to be rendered*/ - img?: { - element: ReactNode; - type: 'icon' | 'custom'; - }; + img?: Img; + rightImg?: Img; /** No margin on card */ noMargin?: boolean; children: @@ -26,7 +28,8 @@ function StippledCardWithForwardRef( props: StippledCardProps, ref: ForwardedRef, ) { - const { className, condensed, img, noMargin, children, ...rest } = props; + const { className, condensed, img, noMargin, rightImg, children, ...rest } = + props; return ( ( {img?.element} )} -
+
{typeof children === 'function' ? children({ CardName, @@ -64,6 +67,17 @@ function StippledCardWithForwardRef( }) : children}
+ {rightImg && ( +
+ {rightImg?.element} +
+ )} )} diff --git a/packages/ffe-cards/less/stippled-card.less b/packages/ffe-cards/less/stippled-card.less index c7157ff4ce..d919a27244 100644 --- a/packages/ffe-cards/less/stippled-card.less +++ b/packages/ffe-cards/less/stippled-card.less @@ -25,15 +25,23 @@ background: transparent; border: 2px dashed var(--ffe-v-cards-stippled-border-color); box-shadow: none; - display: grid; - grid-template-columns: auto 1fr; + display: flex; align-items: center; padding: var(--ffe-spacing-md); gap: var(--ffe-spacing-md); } +.ffe-stippled-card__content { + flex-grow: 1; +} +.ffe-stippled-card__img { + flex-shrink: 0; + flex-grow: 0; +} + .ffe-stippled-card__img--icon { margin: 0 var(--ffe-spacing-md); + display: flex; } .ffe-stippled-card--condensed {