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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
import {
type ForwardRefRenderFunction,
type ReactElement,
forwardRef,
type ReactNode,
} from 'react';
import { useIntl } from 'react-intl';
import {
ButtonLink,
type HeadingLevel,
Icon,
Link,
VisuallyHidden,
} from '../../atoms';
import {
Card,
CardActions,
CardBody,
CardFooter,
CardHeader,
type CardProps,
CardTitle,
CardCover,
} from '../../molecules';
import { PostPreviewMeta, type PostPreviewMetaData } from './post-preview-meta';
import styles from './post-preview.module.scss';
const a11y = (chunks: ReactNode) => <VisuallyHidden>{chunks}</VisuallyHidden>;
export type PostPreviewProps = Omit<
CardProps<undefined>,
'children' | 'cover' | 'linkTo' | 'meta' | 'variant'
> & {
/**
* The post cover.
*/
cover?: ReactElement;
/**
* The post excerpt.
*/
excerpt: string;
/**
* The post title.
*/
heading: string;
/**
* The heading level to use on post title.
*/
headingLvl?: HeadingLevel;
/**
* The post meta.
*/
meta?: PostPreviewMetaData;
/**
* The post url.
*/
url: string;
};
const PostPreviewWithRef: ForwardRefRenderFunction<
HTMLDivElement,
PostPreviewProps
> = (
{ className, cover, excerpt, heading, headingLvl, meta, url, ...props },
ref
) => {
const wrapperClass = `${styles.wrapper} ${className}`;
const intl = useIntl();
const coverLabel = intl.formatMessage(
{
defaultMessage: '{postTitle} cover',
description:
'PostPreview: an accessible name for the figure wrapping the cover',
id: 'iG5SHf',
},
{ postTitle: heading }
);
const readMore = intl.formatMessage<ReactNode>(
{
defaultMessage: 'Read more<a11y> about {postTitle}</a11y>',
description: 'PostPreview: read more link',
id: 'BYdQze',
},
{
postTitle: heading,
a11y,
}
);
return (
<Card
{...props}
className={wrapperClass}
cover={
cover ? (
<CardCover aria-label={coverLabel} hasBorders>
{cover}
</CardCover>
) : undefined
}
meta={meta ? <PostPreviewMeta meta={meta} /> : undefined}
ref={ref}
>
<CardHeader>
<CardTitle className={styles.heading} level={headingLvl}>
<Link href={url}>{heading}</Link>
</CardTitle>
</CardHeader>
<CardBody
className={styles.excerpt}
dangerouslySetInnerHTML={{ __html: excerpt }}
/>
<CardFooter>
<CardActions>
<ButtonLink to={url}>
{readMore}
<Icon
aria-hidden
className={styles.icon}
// eslint-disable-next-line react/jsx-no-literals
orientation="right"
// eslint-disable-next-line react/jsx-no-literals
shape="arrow"
/>
</ButtonLink>
</CardActions>
</CardFooter>
</Card>
);
};
export const PostPreview = forwardRef(PostPreviewWithRef);
|
