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

dagfrode · dagfrode · commit 3debb89840f5 · 2025-02-04T11:17:58.000+01:00
BREAKING CHANGE: Fjerner shadow, bgColor og bgDarkmodeColor som paramater siden cards går over til å bruke border og backgroundColor i stede for å støtte semantiske farger
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';
 
@@ -28,35 +28,16 @@ describe('<CardBase/>', () => {
 
     it('should set bgColor-prop correctly', () => {
         render(
-            <CardBase data-testid={TEST_ID} bgColor="frost-30">
+            <CardBase data-testid={TEST_ID} backgroundColor="secondary">
                 <div />
             </CardBase>,
         );
         const card = screen.getByTestId(TEST_ID);
         expect(
-            card.classList.contains('ffe-card-base--bg-frost-30'),
+            card.classList.contains('ffe-card-base--bg-secondary'),
         ).toBeTruthy();
     });
-    it('should set bgDarkmodeColor-prop correctly', () => {
-        render(
-            <CardBase data-testid={TEST_ID} bgDarkmodeColor="natt">
-                <div />
-            </CardBase>,
-        );
-        const card = screen.getByTestId(TEST_ID);
-        expect(
-            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,24 +1,21 @@
-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,
+    BackgroundColor,
     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;
-    bgColor?: BgColor;
-    bgDarkmodeColor?: BgColorDarkmode;
+    backgroundColor?: BackgroundColor;
     noPadding?: boolean;
     children: WithCardActionProps['children'] | React.ReactNode;
 };
@@ -29,11 +26,9 @@ function CardBaseWithForwardRef<As extends ElementType>(
 ) {
     const {
         className,
-        shadow,
         noMargin,
         textCenter,
-        bgColor,
-        bgDarkmodeColor,
+        backgroundColor = 'primary',
         noPadding,
         children,
         ...rest
@@ -43,9 +38,7 @@ function CardBaseWithForwardRef<As extends ElementType>(
         <WithCardAction
             baseClassName="ffe-card-base"
             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--bg-${backgroundColor}`]: backgroundColor,
                 '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,28 +1,23 @@
-import React, { ForwardedRef } from 'react';
 import classNames from 'classnames';
+import React, { ForwardedRef } from 'react';
 import { fixedForwardRef } from '../fixedForwardRef';
-import { BgColor, BgColorDarkmode } from '../types';
+import { BackgroundColor } 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 */
-    bgColor?: BgColor;
-    /** The background color for darkmode of the whole groupcard element */
-    bgDarkmodeColor?: BgColorDarkmode;
+    backgroundColor?: BackgroundColor;
     /** No margin on card */
     noMargin?: boolean;
 }
 
 function GroupCardWithForwardRef(
     {
-        shadow,
         className,
         children,
-        bgColor,
-        bgDarkmodeColor,
+        backgroundColor = 'primary',
         noMargin,
         ...rest
     }: GroupCardProps,
@@ -33,11 +28,8 @@ 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}`]:
-                        bgDarkmodeColor,
+                    [`ffe-group-card--bg-${backgroundColor}`]: backgroundColor,
                 },
                 className,
             )}
diff --git a/packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx b/packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { StippledCard } from './StippledCard';
-import type { StoryObj, Meta } from '@storybook/react';
 import { Icon } from '@sb1/ffe-icons-react';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 import utvalgte from './illustrations/utvalgte.svg';
+import { StippledCard } from './StippledCard';
 
 const Custom: React.FC<React.ComponentProps<'div'>> = props => (
     <div {...props}>
@@ -195,3 +195,29 @@ export const Condensed: Story = {
         </StippledCard>
     ),
 };
+
+export const WithCardAction: Story = {
+    args: {
+        as: 'div',
+    },
+    render: args => (
+        <StippledCard {...args}>
+            {({ CardName, Title, Subtext, Text, CardAction }) => (
+                <>
+                    <CardName>CardName</CardName>
+                    <Title>
+                        <CardAction>Tittel</CardAction>
+                    </Title>
+                    <Subtext as="span">Subtext er grå</Subtext>
+                    <Text>
+                        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.
+                    </Text>
+                </>
+            )}
+        </StippledCard>
+    ),
+};
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 { Heading4, 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 { 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 { 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,12 +39,12 @@ export const Standard: Story = {
         href: 'https://design.sparebank1.no',
     },
     render: args => (
-        <CardBase shadow={true}>
+        <CardBase>
             {({ CardAction }: CardActionRenderProps) => (
                 <>
-                    <Heading2>
+                    <Heading4>
                         <CardAction {...args}>Lenke</CardAction>
-                    </Heading2>
+                    </Heading4>
                     <Paragraph>Hele kortet er klikkbart</Paragraph>
                 </>
             )}
@@ -58,12 +58,12 @@ export const AsButton: Story = {
         type: 'button',
     },
     render: args => (
-        <CardBase shadow={true}>
+        <CardBase>
             {({ CardAction }: CardActionRenderProps) => (
                 <>
-                    <Heading2>
+                    <Heading4>
                         <CardAction {...args}>Knapp</CardAction>
-                    </Heading2>
+                    </Heading4>
                     <Paragraph>Hele kortet er klikkbart</Paragraph>
                 </>
             )}
diff --git a/packages/ffe-cards-react/src/types.ts b/packages/ffe-cards-react/src/types.ts
@@ -26,11 +26,4 @@ export interface CardActionRenderProps {
     CardAction: typeof CardAction;
 }
 
-export type BgColor =
-    | 'sand-30'
-    | 'sand-70'
-    | 'frost-30'
-    | 'syrin-30'
-    | 'syrin-70';
-
-export type BgColorDarkmode = 'natt' | 'svart' | 'koksgraa';
+export type BackgroundColor = 'primary' | 'secondary' | 'tertiary';
