1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
import type { Meta, StoryObj } from '@storybook/react';
import NextImage from 'next/image';
import { wpPostsFixture } from '../../../../tests/fixtures';
import { type PostData, PostsList } from './posts-list';
const meta = {
component: PostsList,
title: 'Organisms/PostsList',
} satisfies Meta<typeof PostsList>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Example: Story = {
args: {
posts: wpPostsFixture.map((post): PostData => {
return {
...post,
cover: post.featuredImage ? (
<NextImage
alt={post.featuredImage.node.altText ?? ''}
height={post.featuredImage.node.mediaDetails.height}
src={post.featuredImage.node.sourceUrl}
title={post.featuredImage.node.title ?? undefined}
width={post.featuredImage.node.mediaDetails.width}
/>
) : undefined,
excerpt: post.contentParts.beforeMore,
heading: post.title,
id: post.databaseId,
meta: {
author: post.author.node.name,
comments: post.commentCount
? {
count: post.commentCount,
postHeading: post.title,
}
: undefined,
publicationDate: post.date,
updateDate: post.modified,
wordsCount: post.info.wordsCount,
},
url: post.slug,
};
}),
total: wpPostsFixture.length,
},
};
export const WithLoadMoreButton: Story = {
args: {
posts: wpPostsFixture
.map((post): PostData => {
return {
...post,
cover: post.featuredImage ? (
<NextImage
alt={post.featuredImage.node.altText ?? ''}
height={post.featuredImage.node.mediaDetails.height}
src={post.featuredImage.node.sourceUrl}
title={post.featuredImage.node.title ?? undefined}
width={post.featuredImage.node.mediaDetails.width}
/>
) : undefined,
excerpt: post.contentParts.beforeMore,
heading: post.title,
id: post.databaseId,
meta: {
author: post.author.node.name,
comments: post.commentCount
? {
count: post.commentCount,
postHeading: post.title,
}
: undefined,
publicationDate: post.date,
updateDate: post.modified,
wordsCount: post.info.wordsCount,
},
url: post.slug,
};
})
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
.slice(0, 5),
total: wpPostsFixture.length,
},
};
|
