@@ -30,7 +30,6 @@ type Story = StoryObj
>;
export const Standard: Story = {
args: {
as: 'div',
- shadow: true,
},
render: args => (
Dette er basisen for alle kort
diff --git a/packages/ffe-cards-react/src/CardBase.tsx b/packages/ffe-cards-react/src/CardBase.tsx
index 35289aa2a4..bb7fe281c3 100644
--- a/packages/ffe-cards-react/src/CardBase.tsx
+++ b/packages/ffe-cards-react/src/CardBase.tsx
@@ -1,19 +1,18 @@
-import React, { ElementType, ForwardedRef } from 'react';
import classNames from 'classnames';
-import { WithCardActionProps, WithCardAction } from './components';
+import React, { ElementType, ForwardedRef } from 'react';
+import { WithCardAction, WithCardActionProps } from './components';
+import { fixedForwardRef } from './fixedForwardRef';
import {
BgColor,
BgColorDarkmode,
- ComponentAsPropParams,
CardActionRenderProps,
+ ComponentAsPropParams,
} from './types';
-import { fixedForwardRef } from './fixedForwardRef';
export type CardBaseProps = Omit<
ComponentAsPropParams,
'children'
> & {
- shadow?: boolean;
/** No margin on card */
noMargin?: boolean;
textCenter?: boolean;
@@ -29,7 +28,6 @@ function CardBaseWithForwardRef(
) {
const {
className,
- shadow,
noMargin,
textCenter,
bgColor,
@@ -45,7 +43,6 @@ function CardBaseWithForwardRef(
className={classNames('ffe-card-base', className, {
[`ffe-card-base--bg-${bgColor}`]: bgColor,
[`ffe-card-base--dm-bg-${bgDarkmodeColor}`]: bgDarkmodeColor,
- 'ffe-card-base--shadow': shadow,
'ffe-card-base--no-margin': noMargin,
'ffe-card-base--text-center': textCenter,
'ffe-card-base--no-padding': noPadding,
diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCard.mdx b/packages/ffe-cards-react/src/GroupCard/GroupCard.mdx
index 87a4576623..9640d3179b 100644
--- a/packages/ffe-cards-react/src/GroupCard/GroupCard.mdx
+++ b/packages/ffe-cards-react/src/GroupCard/GroupCard.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
import * as GroupCardStories from './GroupCard.stories.tsx';
@@ -10,10 +10,6 @@ GroupCard er et kort med en liste av elementer inni. Det kan bestå av `GroupCar
-Man kan modifisere GroupCard til å ikke ha skygge med `shadow={false}`.
-
-
-
`GroupCardElement` har linjer mellom elementene som standard, men det kan fjernes med `noSeparator`.
diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCard.stories.tsx b/packages/ffe-cards-react/src/GroupCard/GroupCard.stories.tsx
index 9ef761b32e..c79aa440c0 100644
--- a/packages/ffe-cards-react/src/GroupCard/GroupCard.stories.tsx
+++ b/packages/ffe-cards-react/src/GroupCard/GroupCard.stories.tsx
@@ -1,11 +1,11 @@
+import { Heading2, Paragraph } from '@sb1/ffe-core-react';
+import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
+import { CardRenderProps } from '../types';
import { GroupCard } from './GroupCard';
-import { GroupCardTitle } from './GroupCardTitle';
import { GroupCardElement } from './GroupCardElement';
import { GroupCardFooter } from './GroupCardFooter';
-import { Heading2, Paragraph } from '@sb1/ffe-core-react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { CardRenderProps } from '../types';
+import { GroupCardTitle } from './GroupCardTitle';
const meta: Meta = {
title: 'Komponenter/Cards/GroupCard',
@@ -16,9 +16,7 @@ export default meta;
type Story = StoryObj;
export const Standard: Story = {
- args: {
- shadow: true,
- },
+ args: {},
render: args => (
@@ -38,19 +36,6 @@ export const Standard: Story = {
),
};
-export const ShadowFalse: Story = {
- args: {
- ...Standard.args,
- shadow: false,
- },
- render: args => (
-
- Innhold nr 1
- Innhold nr 2
- Innhold nr 3
-
- ),
-};
export const NoSeparator: Story = {
args: {
...Standard.args,
diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx b/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx
index b06c5138b6..880b6df18e 100644
--- a/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx
+++ b/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx
@@ -1,11 +1,10 @@
-import React, { ForwardedRef } from 'react';
import classNames from 'classnames';
+import React, { ForwardedRef } from 'react';
import { fixedForwardRef } from '../fixedForwardRef';
import { BgColor, BgColorDarkmode } from '../types';
export interface GroupCardProps
extends Omit, 'children'> {
- shadow?: boolean;
/** The children of the GroupCard component */
children: React.ReactNode;
/** The background color of the whole groupcard element */
@@ -18,7 +17,6 @@ export interface GroupCardProps
function GroupCardWithForwardRef(
{
- shadow,
className,
children,
bgColor,
@@ -33,7 +31,6 @@ function GroupCardWithForwardRef(
className={classNames(
'ffe-group-card',
{
- 'ffe-group-card--shadow': shadow,
'ffe-group-card--no-margin': noMargin,
[`ffe-group-card--bg-${bgColor}`]: bgColor,
[`ffe-group-card--dm-bg-${bgDarkmodeColor}`]:
diff --git a/packages/ffe-cards-react/src/components/CardAction.stories.tsx b/packages/ffe-cards-react/src/components/CardAction.stories.tsx
index 03823dc620..299783cc12 100644
--- a/packages/ffe-cards-react/src/components/CardAction.stories.tsx
+++ b/packages/ffe-cards-react/src/components/CardAction.stories.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import { CardAction as CardActionComponent } from './CardAction';
-import type { StoryObj, Meta } from '@storybook/react';
-import { CardBase } from '../CardBase';
import { Heading2, Paragraph } from '@sb1/ffe-core-react';
import { Icon } from '@sb1/ffe-icons-react';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { CardBase } from '../CardBase';
import { IconCard } from '../IconCard/IconCard';
import { CardActionRenderProps, CardRenderProps } from '../types';
+import { CardAction as CardActionComponent } from './CardAction';
const Custom: React.FC> = props => (
@@ -39,7 +39,7 @@ export const Standard: Story = {
href: 'https://design.sparebank1.no',
},
render: args => (
-
+
{({ CardAction }: CardActionRenderProps) => (
<>
@@ -58,7 +58,7 @@ export const AsButton: Story = {
type: 'button',
},
render: args => (
-
+
{({ CardAction }: CardActionRenderProps) => (
<>