feat(ffe-cards-react)!: Semantiske farger

BREAKING CHANGE: Fjerner shadow som paramater siden cards går over til å bruke boarder i stede
SpareBank1 · Jan 28, 2025 · 2aea4e4 · 2aea4e4
1 parent f288f6d
commit 2aea4e4
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 56 deletions.
diff --git a/packages/ffe-cards-react/src/CardBase.mdx b/packages/ffe-cards-react/src/CardBase.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as CardBaseStories from './CardBase.stories.tsx';
 
 <Meta of={CardBaseStories} />
@@ -7,7 +7,7 @@ import * as CardBaseStories from './CardBase.stories.tsx';
 
 Dette er basisen for alle kort. Komponeten kan brukes direkte for å få en ramme du kan fylle dersom du trenger et spesialtilpassert kort.
 
-Du kan skru av/på box-shadow med `shadow`-prop, skru av margin med `noMargin`-prop, og sette bakgrunnsfargen i både light- og darkmode med `bgColorog` `bgDarkmodeColor`.
+Du kan skru av margin med `noMargin`-prop, og sette bakgrunnsfargen i både light- og darkmode med `bgColorog` `bgDarkmodeColor`.
 
 <Canvas of={CardBaseStories.Standard} />
 <Controls of={CardBaseStories.Standard} />
diff --git a/packages/ffe-cards-react/src/CardBase.spec.tsx b/packages/ffe-cards-react/src/CardBase.spec.tsx
@@ -1,6 +1,6 @@
+import { render, screen, within } from '@testing-library/react';
 import React from 'react';
 import { CardBase } from './CardBase';
-import { render, screen, within } from '@testing-library/react';
 
 const TEST_ID = 'test-id';
 
@@ -48,15 +48,6 @@ describe('<CardBase/>', () => {
             card.classList.contains('ffe-card-base--dm-bg-natt'),
         ).toBeTruthy();
     });
-    it('should set shadow-prop correctly', () => {
-        render(
-            <CardBase data-testid={TEST_ID} shadow={true}>
-                <div />
-            </CardBase>,
-        );
-        const card = screen.getByTestId(TEST_ID);
-        expect(card.classList.contains('ffe-card-base--shadow')).toBeTruthy();
-    });
     it('should set noMargin-prop correctly', () => {
         render(
             <CardBase data-testid={TEST_ID} noMargin={true}>

diff --git a/packages/ffe-cards-react/src/CardBase.stories.tsx b/packages/ffe-cards-react/src/CardBase.stories.tsx
@@ -1,6 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { CardBase } from './CardBase';
-import type { StoryObj, Meta } from '@storybook/react';
 
 const Custom: React.FC<React.ComponentProps<'div'>> = props => (
     <div {...props}>
@@ -30,7 +30,6 @@ type Story = StoryObj<typeof CardBase<any>>;
 export const Standard: Story = {
     args: {
         as: 'div',
-        shadow: true,
     },
     render: args => (
         <CardBase {...args}>Dette er basisen for alle kort</CardBase>

diff --git 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<As extends ElementType = 'div'> = Omit<
     ComponentAsPropParams<As>,
     'children'
 > & {
-    shadow?: boolean;
     /** No margin on card */
     noMargin?: boolean;
     textCenter?: boolean;
@@ -29,7 +28,6 @@ function CardBaseWithForwardRef<As extends ElementType>(
 ) {
     const {
         className,
-        shadow,
         noMargin,
         textCenter,
         bgColor,
@@ -45,7 +43,6 @@ function CardBaseWithForwardRef<As extends ElementType>(
             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
@@ -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';
 
 <Meta of={GroupCardStories} />
@@ -10,10 +10,6 @@ GroupCard er et kort med en liste av elementer inni. Det kan bestå av `GroupCar
 <Canvas of={GroupCardStories.Standard} />
 <Controls of={GroupCardStories.Standard} />
 
-Man kan modifisere GroupCard til å ikke ha skygge med `shadow={false}`.
-
-<Canvas of={GroupCardStories.ShadowFalse} />
-
 `GroupCardElement` har linjer mellom elementene som standard, men det kan fjernes med `noSeparator`.
 
 <Canvas of={GroupCardStories.NoSeparator} />

diff --git 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<typeof GroupCard> = {
     title: 'Komponenter/Cards/GroupCard',
@@ -16,9 +16,7 @@ export default meta;
 type Story = StoryObj<typeof GroupCard>;
 
 export const Standard: Story = {
-    args: {
-        shadow: true,
-    },
+    args: {},
     render: args => (
         <GroupCard {...args}>
             <GroupCardTitle>
@@ -38,19 +36,6 @@ export const Standard: Story = {
     ),
 };
 
-export const ShadowFalse: Story = {
-    args: {
-        ...Standard.args,
-        shadow: false,
-    },
-    render: args => (
-        <GroupCard {...args}>
-            <GroupCardElement>Innhold nr 1</GroupCardElement>
-            <GroupCardElement>Innhold nr 2</GroupCardElement>
-            <GroupCardElement>Innhold nr 3</GroupCardElement>
-        </GroupCard>
-    ),
-};
 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
@@ -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<React.ComponentPropsWithoutRef<'div'>, '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
@@ -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<React.ComponentProps<'a'>> = props => (
     <a {...props}>
@@ -39,7 +39,7 @@ export const Standard: Story = {
         href: 'https://design.sparebank1.no',
     },
     render: args => (
-        <CardBase shadow={true}>
+        <CardBase>
             {({ CardAction }: CardActionRenderProps) => (
                 <>
                     <Heading2>
@@ -58,7 +58,7 @@ export const AsButton: Story = {
         type: 'button',
     },
     render: args => (
-        <CardBase shadow={true}>
+        <CardBase>
             {({ CardAction }: CardActionRenderProps) => (
                 <>
                     <Heading2>