Skip to content

Commit a4c4a99

Browse files
bdahlebdahle
authored
Merge pull request #1994 from navikt/utvid-storybook
Flere card-stories 🧪
2 parents b334e3a + 403d3d4 commit a4c4a99

File tree

12 files changed

+816
-1724
lines changed

12 files changed

+816
-1724
lines changed

‎.storybook/main.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ const config: StorybookConfig = {
55
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
66

77
addons: [
8-
getAbsolutePath('@storybook/addon-onboarding'),
98
getAbsolutePath('@storybook/addon-links'),
109
getAbsolutePath('@storybook/addon-essentials'),
1110
getAbsolutePath('@chromatic-com/storybook'),
1211
getAbsolutePath('@storybook/addon-interactions'),
1312
getAbsolutePath('@storybook/addon-mdx-gfm'),
1413
getAbsolutePath('@storybook/addon-storysource'),
14+
getAbsolutePath('storybook-addon-pseudo-states'),
1515
],
1616

1717
framework: {

‎package-lock.json

+640-1,668
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+11-11
Original file line numberDiff line numberDiff line change
@@ -76,16 +76,15 @@
7676
"@chromatic-com/storybook": "1.6.1",
7777
"@next/bundle-analyzer": "14.2.4",
7878
"@next/eslint-plugin-next": "14.2.4",
79-
"@storybook/addon-essentials": "8.2.8",
80-
"@storybook/addon-interactions": "8.2.8",
81-
"@storybook/addon-links": "8.2.8",
82-
"@storybook/addon-mdx-gfm": "8.2.8",
83-
"@storybook/addon-onboarding": "8.2.8",
84-
"@storybook/addon-storysource": "8.2.8",
85-
"@storybook/blocks": "8.2.8",
86-
"@storybook/nextjs": "8.2.8",
87-
"@storybook/react": "8.2.8",
88-
"@storybook/test": "8.2.8",
79+
"@storybook/addon-essentials": "8.3.2",
80+
"@storybook/addon-interactions": "8.3.2",
81+
"@storybook/addon-links": "8.3.2",
82+
"@storybook/addon-mdx-gfm": "8.3.2",
83+
"@storybook/addon-storysource": "8.3.2",
84+
"@storybook/blocks": "8.3.2",
85+
"@storybook/nextjs": "8.3.2",
86+
"@storybook/react": "8.3.2",
87+
"@storybook/test": "8.3.2",
8988
"@testing-library/jest-dom": "6.4.6",
9089
"@testing-library/react": "16.0.0",
9190
"@types/jest": "29.5.12",
@@ -118,7 +117,8 @@
118117
"pino-pretty": "11.2.1",
119118
"prettier": "3.3.2",
120119
"sass": "1.77.6",
121-
"storybook": "8.2.8",
120+
"storybook": "8.3.2",
121+
"storybook-addon-pseudo-states": "4.0.2",
122122
"ts-jest": "29.1.5",
123123
"typescript": "5.5.3",
124124
"typescript-plugin-css-modules": "5.1.0"

‎src/components/_common/card/LargeCardV1/LargeCardV1.stories.tsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { CardType } from 'types/card';
3+
import { ContentType } from 'types/content-props/_content-common';
4+
import { MediaType } from 'types/media';
5+
import { LargeCardV1 } from './LargeCardV1';
6+
7+
const meta = {
8+
component: LargeCardV1,
9+
args: {
10+
link: { url: '', text: 'LargeCardV1' },
11+
description: 'Description',
12+
tagline: 'Tagline',
13+
type: CardType.Product,
14+
},
15+
} satisfies Meta<typeof LargeCardV1>;
16+
17+
export default meta;
18+
19+
type Story = StoryObj<typeof meta>;
20+
21+
export const Default: Story = {};
22+
23+
export const Illustration: Story = {
24+
args: {
25+
illustration: {
26+
type: ContentType.Pictograms,
27+
data: { icons: [{ icon: { type: MediaType.Vector, mediaUrl: 'placeholder' } }] },
28+
},
29+
},
30+
};
31+
32+
export const ProductHover: Story = {
33+
parameters: {
34+
pseudo: { hover: true },
35+
},
36+
};
37+
38+
export const SituationHover: Story = {
39+
args: { type: CardType.Situation },
40+
parameters: {
41+
pseudo: { hover: true },
42+
},
43+
};
44+
45+
export const ThemedArticleHover: Story = {
46+
args: { type: CardType.ThemedArticle },
47+
parameters: {
48+
pseudo: { hover: true },
49+
},
50+
};
51+
52+
export const GuideHover: Story = {
53+
args: { type: CardType.Guide },
54+
parameters: {
55+
pseudo: { hover: true },
56+
},
57+
};

‎src/components/_common/card/LargeCardV2/LargeCardV2.stories.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { CardType } from 'types/card';
3+
import { ContentType } from 'types/content-props/_content-common';
4+
import { MediaType } from 'types/media';
5+
import { LargeCardV2 } from './LargeCardV2';
6+
7+
const meta = {
8+
component: LargeCardV2,
9+
} satisfies Meta<typeof LargeCardV2>;
10+
11+
export default meta;
12+
13+
type Story = StoryObj<typeof meta>;
14+
15+
export const Default: Story = {
16+
args: {
17+
link: { url: '', text: 'LargeCardV2' },
18+
type: CardType.Product,
19+
description: 'Description',
20+
tagline: 'Tagline',
21+
},
22+
};
23+
24+
export const Illustration: Story = {
25+
args: {
26+
...Default.args,
27+
illustration: {
28+
type: ContentType.Pictograms,
29+
data: { icons: [{ icon: { type: MediaType.Vector, mediaUrl: 'placeholder' } }] },
30+
},
31+
},
32+
};

‎src/components/_common/card/MicroCard/MicroCard.stories.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { CardType } from 'types/card';
3+
import { MicroCard } from './MicroCard';
4+
5+
const meta = {
6+
component: MicroCard,
7+
} satisfies Meta<typeof MicroCard>;
8+
9+
export default meta;
10+
type Story = StoryObj<typeof meta>;
11+
12+
export const Default: Story = {
13+
args: {
14+
link: { url: '', text: 'MicroCard' },
15+
type: CardType.Product,
16+
},
17+
};
18+
19+
export const Hover: Story = {
20+
parameters: { pseudo: { hover: true } },
21+
args: { ...Default.args },
22+
};

‎src/components/_common/card/MicroCard/MicroCard.tsx

-41
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import React from 'react';
2-
import { BodyShort } from '@navikt/ds-react';
32
import { LinkProps } from 'types/link-props';
43
import { CardSize, CardType } from 'types/card';
54
import { LenkeBase } from 'components/_common/lenke/LenkeBase';
65
import { classNames } from 'utils/classnames';
7-
import { CardProps, CardTargetProps, getCardProps } from 'components/_common/card/card-utils';
8-
import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
9-
import { usePageContentProps } from 'store/pageContext';
106
import { useCard } from 'components/_common/card/useCard';
117

128
import sharedStyle from 'components/_common/card//Card.module.scss';
@@ -24,40 +20,3 @@ export const MicroCard = ({ link, type }: { link: LinkProps; type: CardType }) =
2420
</LenkeBase>
2521
);
2622
};
27-
28-
type Props = {
29-
header?: string;
30-
card_list: CardTargetProps[];
31-
};
32-
33-
export const MicroCards = ({ header, card_list }: Props) => {
34-
const content = usePageContentProps();
35-
36-
const cardProps = card_list.reduce<CardProps[]>((acc, card) => {
37-
const props = getCardProps(card, content);
38-
if (props) {
39-
acc.push(props);
40-
}
41-
42-
return acc;
43-
}, []);
44-
45-
if (cardProps.length === 0) {
46-
return <EditorHelp text={'Velg minst én lenke for å aktivere mikrokortene'} />;
47-
}
48-
49-
return (
50-
<>
51-
{header && (
52-
<BodyShort size={'medium'} className={style.header}>
53-
{header}
54-
</BodyShort>
55-
)}
56-
<div className={style.wrapper}>
57-
{cardProps.map((card, index) => (
58-
<MicroCard {...card} key={index} />
59-
))}
60-
</div>
61-
</>
62-
);
63-
};

‎src/components/_common/card/MicroCard/MicroCards.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react';
2+
import { BodyShort } from '@navikt/ds-react';
3+
import { CardProps, CardTargetProps, getCardProps } from 'components/_common/card/card-utils';
4+
import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
5+
import { usePageContentProps } from 'store/pageContext';
6+
7+
import { MicroCard } from './MicroCard';
8+
import style from './MicroCard.module.scss';
9+
10+
type Props = {
11+
header?: string;
12+
card_list: CardTargetProps[];
13+
};
14+
15+
export const MicroCards = ({ header, card_list }: Props) => {
16+
const content = usePageContentProps();
17+
18+
const cardProps = card_list.reduce<CardProps[]>((acc, card) => {
19+
const props = getCardProps(card, content);
20+
if (props) {
21+
acc.push(props);
22+
}
23+
24+
return acc;
25+
}, []);
26+
27+
if (cardProps.length === 0) {
28+
return <EditorHelp text={'Velg minst én lenke for å aktivere mikrokortene'} />;
29+
}
30+
31+
return (
32+
<>
33+
{header && (
34+
<BodyShort size={'medium'} className={style.header}>
35+
{header}
36+
</BodyShort>
37+
)}
38+
<div className={style.wrapper}>
39+
{cardProps.map((card, index) => (
40+
<MicroCard {...card} key={index} />
41+
))}
42+
</div>
43+
</>
44+
);
45+
};

‎src/components/_common/card/MiniCardV1/MiniCardV1.stories.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ type Story = StoryObj<typeof meta>;
1515

1616
export const Product: Story = {};
1717

18-
export const Situation: Story = {
18+
export const SituationHover: Story = {
19+
parameters: {
20+
pseudo: { hover: true },
21+
},
1922
args: {
2023
type: CardType.Situation,
2124
},

‎src/components/_common/card/MiniCardV2/MiniCardV2.stories.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,5 @@ export default meta;
1515
type Story = StoryObj<typeof meta>;
1616

1717
export const Default: Story = {};
18+
19+
export const Hover: Story = { parameters: { pseudo: { hover: true } } };

‎src/components/macros/product-card-micro/MacroProductCardMicro.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { MacroProductCardMicroProps } from 'types/macro-props/product-card-micro';
3-
import { MicroCards } from 'components/_common/card/MicroCard/MicroCard';
3+
import { MicroCards } from 'components/_common/card/MicroCard/MicroCards';
44
import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
55

66
export const MacroProductCardMicro = ({ config }: MacroProductCardMicroProps) => {

‎src/components/parts/product-card-micro/ProductCardMicroPart.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { MicroCards } from 'components/_common/card/MicroCard/MicroCard';
2+
import { MicroCards } from 'components/_common/card/MicroCard/MicroCards';
33
import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
44
import { PartComponentProps, PartType } from 'types/component-props/parts';
55
import { CardTargetProps } from 'components/_common/card/card-utils';

0 commit comments

Comments
 (0)