Skip to content

Commit 91bd765

Browse files
dagfrodedagfrode
authored
Merge pull request #2520 from SpareBank1/semantiske-farger-cards-2
Semantiske farger cards
2 parents 808b107 + 6a8ff6b commit 91bd765

19 files changed

+110
-220
lines changed

‎packages/ffe-cards-react/src/CardBase.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Canvas, Meta, Controls } from '@storybook/blocks';
1+
import { Canvas, Controls, Meta } from '@storybook/blocks';
22
import * as CardBaseStories from './CardBase.stories.tsx';
33

44
<Meta of={CardBaseStories} />
@@ -7,7 +7,7 @@ import * as CardBaseStories from './CardBase.stories.tsx';
77

88
Dette er basisen for alle kort. Komponeten kan brukes direkte for å få en ramme du kan fylle dersom du trenger et spesialtilpassert kort.
99

10-
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`.
10+
Du kan skru av margin med `noMargin`-prop, og sette bakgrunnsfargen i både light- og darkmode med `bgColorog` `bgDarkmodeColor`.
1111

1212
<Canvas of={CardBaseStories.Standard} />
1313
<Controls of={CardBaseStories.Standard} />

‎packages/ffe-cards-react/src/CardBase.spec.tsx

+4-23
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { render, screen, within } from '@testing-library/react';
12
import React from 'react';
23
import { CardBase } from './CardBase';
3-
import { render, screen, within } from '@testing-library/react';
44

55
const TEST_ID = 'test-id';
66

@@ -28,35 +28,16 @@ describe('<CardBase/>', () => {
2828

2929
it('should set bgColor-prop correctly', () => {
3030
render(
31-
<CardBase data-testid={TEST_ID} bgColor="frost-30">
31+
<CardBase data-testid={TEST_ID} backgroundColor="secondary">
3232
<div />
3333
</CardBase>,
3434
);
3535
const card = screen.getByTestId(TEST_ID);
3636
expect(
37-
card.classList.contains('ffe-card-base--bg-frost-30'),
37+
card.classList.contains('ffe-card-base--bg-secondary'),
3838
).toBeTruthy();
3939
});
40-
it('should set bgDarkmodeColor-prop correctly', () => {
41-
render(
42-
<CardBase data-testid={TEST_ID} bgDarkmodeColor="natt">
43-
<div />
44-
</CardBase>,
45-
);
46-
const card = screen.getByTestId(TEST_ID);
47-
expect(
48-
card.classList.contains('ffe-card-base--dm-bg-natt'),
49-
).toBeTruthy();
50-
});
51-
it('should set shadow-prop correctly', () => {
52-
render(
53-
<CardBase data-testid={TEST_ID} shadow={true}>
54-
<div />
55-
</CardBase>,
56-
);
57-
const card = screen.getByTestId(TEST_ID);
58-
expect(card.classList.contains('ffe-card-base--shadow')).toBeTruthy();
59-
});
40+
6041
it('should set noMargin-prop correctly', () => {
6142
render(
6243
<CardBase data-testid={TEST_ID} noMargin={true}>

‎packages/ffe-cards-react/src/CardBase.stories.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
12
import React from 'react';
23
import { CardBase } from './CardBase';
3-
import type { StoryObj, Meta } from '@storybook/react';
44

55
const Custom: React.FC<React.ComponentProps<'div'>> = props => (
66
<div {...props}>
@@ -30,7 +30,6 @@ type Story = StoryObj<typeof CardBase<any>>;
3030
export const Standard: Story = {
3131
args: {
3232
as: 'div',
33-
shadow: true,
3433
},
3534
render: args => (
3635
<CardBase {...args}>Dette er basisen for alle kort</CardBase>

‎packages/ffe-cards-react/src/CardBase.tsx

+8-15
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
1-
import React, { ElementType, ForwardedRef } from 'react';
21
import classNames from 'classnames';
3-
import { WithCardActionProps, WithCardAction } from './components';
2+
import React, { ElementType, ForwardedRef } from 'react';
3+
import { WithCardAction, WithCardActionProps } from './components';
4+
import { fixedForwardRef } from './fixedForwardRef';
45
import {
5-
BgColor,
6-
BgColorDarkmode,
7-
ComponentAsPropParams,
6+
BackgroundColor,
87
CardActionRenderProps,
8+
ComponentAsPropParams,
99
} from './types';
10-
import { fixedForwardRef } from './fixedForwardRef';
1110

1211
export type CardBaseProps<As extends ElementType = 'div'> = Omit<
1312
ComponentAsPropParams<As>,
1413
'children'
1514
> & {
16-
shadow?: boolean;
1715
/** No margin on card */
1816
noMargin?: boolean;
1917
textCenter?: boolean;
20-
bgColor?: BgColor;
21-
bgDarkmodeColor?: BgColorDarkmode;
18+
backgroundColor?: BackgroundColor;
2219
noPadding?: boolean;
2320
children: WithCardActionProps['children'] | React.ReactNode;
2421
};
@@ -29,11 +26,9 @@ function CardBaseWithForwardRef<As extends ElementType>(
2926
) {
3027
const {
3128
className,
32-
shadow,
3329
noMargin,
3430
textCenter,
35-
bgColor,
36-
bgDarkmodeColor,
31+
backgroundColor = 'primary',
3732
noPadding,
3833
children,
3934
...rest
@@ -43,9 +38,7 @@ function CardBaseWithForwardRef<As extends ElementType>(
4338
<WithCardAction
4439
baseClassName="ffe-card-base"
4540
className={classNames('ffe-card-base', className, {
46-
[`ffe-card-base--bg-${bgColor}`]: bgColor,
47-
[`ffe-card-base--dm-bg-${bgDarkmodeColor}`]: bgDarkmodeColor,
48-
'ffe-card-base--shadow': shadow,
41+
[`ffe-card-base--bg-${backgroundColor}`]: backgroundColor,
4942
'ffe-card-base--no-margin': noMargin,
5043
'ffe-card-base--text-center': textCenter,
5144
'ffe-card-base--no-padding': noPadding,

‎packages/ffe-cards-react/src/GroupCard/GroupCard.mdx

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Canvas, Meta, Controls } from '@storybook/blocks';
1+
import { Canvas, Controls, Meta } from '@storybook/blocks';
22
import * as GroupCardStories from './GroupCard.stories.tsx';
33

44
<Meta of={GroupCardStories} />
@@ -10,10 +10,6 @@ GroupCard er et kort med en liste av elementer inni. Det kan bestå av `GroupCar
1010
<Canvas of={GroupCardStories.Standard} />
1111
<Controls of={GroupCardStories.Standard} />
1212

13-
Man kan modifisere GroupCard til å ikke ha skygge med `shadow={false}`.
14-
15-
<Canvas of={GroupCardStories.ShadowFalse} />
16-
1713
`GroupCardElement` har linjer mellom elementene som standard, men det kan fjernes med `noSeparator`.
1814

1915
<Canvas of={GroupCardStories.NoSeparator} />

‎packages/ffe-cards-react/src/GroupCard/GroupCard.stories.tsx

+5-20
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1+
import { Heading2, Paragraph } from '@sb1/ffe-core-react';
2+
import type { Meta, StoryObj } from '@storybook/react';
13
import React from 'react';
4+
import { CardRenderProps } from '../types';
25
import { GroupCard } from './GroupCard';
3-
import { GroupCardTitle } from './GroupCardTitle';
46
import { GroupCardElement } from './GroupCardElement';
57
import { GroupCardFooter } from './GroupCardFooter';
6-
import { Heading2, Paragraph } from '@sb1/ffe-core-react';
7-
import type { StoryObj, Meta } from '@storybook/react';
8-
import { CardRenderProps } from '../types';
8+
import { GroupCardTitle } from './GroupCardTitle';
99

1010
const meta: Meta<typeof GroupCard> = {
1111
title: 'Komponenter/Cards/GroupCard',
@@ -16,9 +16,7 @@ export default meta;
1616
type Story = StoryObj<typeof GroupCard>;
1717

1818
export const Standard: Story = {
19-
args: {
20-
shadow: true,
21-
},
19+
args: {},
2220
render: args => (
2321
<GroupCard {...args}>
2422
<GroupCardTitle>
@@ -38,19 +36,6 @@ export const Standard: Story = {
3836
),
3937
};
4038

41-
export const ShadowFalse: Story = {
42-
args: {
43-
...Standard.args,
44-
shadow: false,
45-
},
46-
render: args => (
47-
<GroupCard {...args}>
48-
<GroupCardElement>Innhold nr 1</GroupCardElement>
49-
<GroupCardElement>Innhold nr 2</GroupCardElement>
50-
<GroupCardElement>Innhold nr 3</GroupCardElement>
51-
</GroupCard>
52-
),
53-
};
5439
export const NoSeparator: Story = {
5540
args: {
5641
...Standard.args,

‎packages/ffe-cards-react/src/GroupCard/GroupCard.tsx

+5-13
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,23 @@
1-
import React, { ForwardedRef } from 'react';
21
import classNames from 'classnames';
2+
import React, { ForwardedRef } from 'react';
33
import { fixedForwardRef } from '../fixedForwardRef';
4-
import { BgColor, BgColorDarkmode } from '../types';
4+
import { BackgroundColor } from '../types';
55

66
export interface GroupCardProps
77
extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
8-
shadow?: boolean;
98
/** The children of the GroupCard component */
109
children: React.ReactNode;
1110
/** The background color of the whole groupcard element */
12-
bgColor?: BgColor;
13-
/** The background color for darkmode of the whole groupcard element */
14-
bgDarkmodeColor?: BgColorDarkmode;
11+
backgroundColor?: BackgroundColor;
1512
/** No margin on card */
1613
noMargin?: boolean;
1714
}
1815

1916
function GroupCardWithForwardRef(
2017
{
21-
shadow,
2218
className,
2319
children,
24-
bgColor,
25-
bgDarkmodeColor,
20+
backgroundColor = 'primary',
2621
noMargin,
2722
...rest
2823
}: GroupCardProps,
@@ -33,11 +28,8 @@ function GroupCardWithForwardRef(
3328
className={classNames(
3429
'ffe-group-card',
3530
{
36-
'ffe-group-card--shadow': shadow,
3731
'ffe-group-card--no-margin': noMargin,
38-
[`ffe-group-card--bg-${bgColor}`]: bgColor,
39-
[`ffe-group-card--dm-bg-${bgDarkmodeColor}`]:
40-
bgDarkmodeColor,
32+
[`ffe-group-card--bg-${backgroundColor}`]: backgroundColor,
4133
},
4234
className,
4335
)}

‎packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx

+29-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from 'react';
2-
import { StippledCard } from './StippledCard';
3-
import type { StoryObj, Meta } from '@storybook/react';
41
import { Icon } from '@sb1/ffe-icons-react';
2+
import type { Meta, StoryObj } from '@storybook/react';
3+
import React from 'react';
54
import utvalgte from './illustrations/utvalgte.svg';
5+
import { StippledCard } from './StippledCard';
66

77
const Custom: React.FC<React.ComponentProps<'div'>> = props => (
88
<div {...props}>
@@ -195,3 +195,29 @@ export const Condensed: Story = {
195195
</StippledCard>
196196
),
197197
};
198+
199+
export const WithCardAction: Story = {
200+
args: {
201+
as: 'div',
202+
},
203+
render: args => (
204+
<StippledCard {...args}>
205+
{({ CardName, Title, Subtext, Text, CardAction }) => (
206+
<>
207+
<CardName>CardName</CardName>
208+
<Title>
209+
<CardAction>Tittel</CardAction>
210+
</Title>
211+
<Subtext as="span">Subtext er grå</Subtext>
212+
<Text>
213+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
214+
sed do eiusmod tempor incididunt ut labore et dolore
215+
magna aliqua. Ut enim ad minim veniam, quis nostrud
216+
exercitation ullamco laboris nisi ut aliquip ex ea
217+
commodo consequat.
218+
</Text>
219+
</>
220+
)}
221+
</StippledCard>
222+
),
223+
};

‎packages/ffe-cards-react/src/components/CardAction.stories.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1+
import { Heading4, Paragraph } from '@sb1/ffe-core-react';
2+
import { Icon } from '@sb1/ffe-icons-react';
3+
import type { Meta, StoryObj } from '@storybook/react';
14
import React from 'react';
2-
import { CardAction as CardActionComponent } from './CardAction';
3-
import type { StoryObj, Meta } from '@storybook/react';
45
import { CardBase } from '../CardBase';
5-
import { Heading2, Paragraph } from '@sb1/ffe-core-react';
6-
import { Icon } from '@sb1/ffe-icons-react';
76
import { IconCard } from '../IconCard/IconCard';
87
import { CardActionRenderProps, CardRenderProps } from '../types';
8+
import { CardAction as CardActionComponent } from './CardAction';
99

1010
const Custom: React.FC<React.ComponentProps<'a'>> = props => (
1111
<a {...props}>
@@ -39,12 +39,12 @@ export const Standard: Story = {
3939
href: 'https://design.sparebank1.no',
4040
},
4141
render: args => (
42-
<CardBase shadow={true}>
42+
<CardBase>
4343
{({ CardAction }: CardActionRenderProps) => (
4444
<>
45-
<Heading2>
45+
<Heading4>
4646
<CardAction {...args}>Lenke</CardAction>
47-
</Heading2>
47+
</Heading4>
4848
<Paragraph>Hele kortet er klikkbart</Paragraph>
4949
</>
5050
)}
@@ -58,12 +58,12 @@ export const AsButton: Story = {
5858
type: 'button',
5959
},
6060
render: args => (
61-
<CardBase shadow={true}>
61+
<CardBase>
6262
{({ CardAction }: CardActionRenderProps) => (
6363
<>
64-
<Heading2>
64+
<Heading4>
6565
<CardAction {...args}>Knapp</CardAction>
66-
</Heading2>
66+
</Heading4>
6767
<Paragraph>Hele kortet er klikkbart</Paragraph>
6868
</>
6969
)}

‎packages/ffe-cards-react/src/types.ts

+1-8
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,4 @@ export interface CardActionRenderProps {
2626
CardAction: typeof CardAction;
2727
}
2828

29-
export type BgColor =
30-
| 'sand-30'
31-
| 'sand-70'
32-
| 'frost-30'
33-
| 'syrin-30'
34-
| 'syrin-70';
35-
36-
export type BgColorDarkmode = 'natt' | 'svart' | 'koksgraa';
29+
export type BackgroundColor = 'primary' | 'secondary' | 'tertiary';

‎packages/ffe-cards/less/card-base.less

+2-12
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,26 @@
11
@import 'common-card-styling';
22

33
.ffe-card-base {
4+
color: var(--ffe-color-foreground-default);
45
.common-card-styling();
56

67
&--clickable {
78
.clickable-card-styling();
89
}
910

10-
padding: var(--ffe-spacing-sm);
11-
box-shadow: none; // Overwrite common-card-styling
11+
padding: var(--ffe-spacing-md);
1212

1313
&--no-padding {
1414
padding: 0;
1515
}
1616

1717
.card-background-styling();
1818

19-
&--shadow {
20-
box-shadow: var(--ffe-v-cards-common-card-box-shadow);
21-
}
22-
2319
&--no-margin {
2420
margin: 0;
2521
}
2622

2723
&--text-center {
2824
text-align: center;
2925
}
30-
31-
.regard-color-scheme-preference & {
32-
@media (prefers-color-scheme: dark) {
33-
.card-background-dm-styling();
34-
}
35-
}
3626
}

‎packages/ffe-cards/less/cards.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
@import 'theme';
21
@import 'card-base';
32
@import 'text-card';
43
@import 'icon-card';
54
@import 'illustration-card';
65
@import 'image-card';
76
@import 'stippled-card';
87
@import 'group-card';
8+
@import 'theme';

0 commit comments

Comments
 (0)