@windstream/react-shared-components 0.1.58 → 0.1.59
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/contentful/index.esm.js +3 -3
- package/dist/contentful/index.esm.js.map +1 -1
- package/dist/contentful/index.js +3 -3
- package/dist/contentful/index.js.map +1 -1
- package/dist/core.d.ts +1 -1
- package/dist/index.d.ts +1 -1
- package/package.json +1 -1
- package/src/contentful/blocks/cards/blog-card/index.tsx +116 -110
package/dist/core.d.ts
CHANGED
|
@@ -63,7 +63,7 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
|
|
|
63
63
|
size?: "slim" | "medium" | "large" | undefined;
|
|
64
64
|
label?: string | undefined;
|
|
65
65
|
errorText?: string | undefined;
|
|
66
|
-
prefixIconName?: "
|
|
66
|
+
prefixIconName?: "search" | "location_on" | undefined;
|
|
67
67
|
prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
|
|
68
68
|
prefixIconFill?: boolean | undefined;
|
|
69
69
|
suffixIconFill?: boolean | undefined;
|
package/dist/index.d.ts
CHANGED
|
@@ -63,7 +63,7 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
|
|
|
63
63
|
size?: "slim" | "medium" | "large" | undefined;
|
|
64
64
|
label?: string | undefined;
|
|
65
65
|
errorText?: string | undefined;
|
|
66
|
-
prefixIconName?: "
|
|
66
|
+
prefixIconName?: "location_on" | "search" | undefined;
|
|
67
67
|
prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
|
|
68
68
|
prefixIconFill?: boolean | undefined;
|
|
69
69
|
suffixIconFill?: boolean | undefined;
|
package/package.json
CHANGED
|
@@ -1,110 +1,116 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { BlogCardProps } from "./types";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
// import { Button } from "@shared/components/button";
|
|
7
|
-
import { MaterialIcon } from "@shared/components/material-icon";
|
|
8
|
-
import { Text } from "@shared/components/text";
|
|
9
|
-
|
|
10
|
-
export
|
|
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
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { BlogCardProps } from "./types";
|
|
3
|
+
import * as _NextImage from "next/image";
|
|
4
|
+
import * as _NextLink from "next/link";
|
|
5
|
+
|
|
6
|
+
// import { Button } from "@shared/components/button";
|
|
7
|
+
import { MaterialIcon } from "@shared/components/material-icon";
|
|
8
|
+
import { Text } from "@shared/components/text";
|
|
9
|
+
|
|
10
|
+
// CJS/ESM interop: next/image and next/link export { default: Fn } in CJS context
|
|
11
|
+
const Image = ((_NextImage as any).default ??
|
|
12
|
+
_NextImage) as typeof import("next/image").default;
|
|
13
|
+
const Link = ((_NextLink as any).default ??
|
|
14
|
+
_NextLink) as typeof import("next/link").default;
|
|
15
|
+
|
|
16
|
+
export const BlogCard: React.FC<BlogCardProps> = ({
|
|
17
|
+
href,
|
|
18
|
+
title,
|
|
19
|
+
description,
|
|
20
|
+
date,
|
|
21
|
+
category,
|
|
22
|
+
image,
|
|
23
|
+
readMoreText = "Read more",
|
|
24
|
+
asGrid = true,
|
|
25
|
+
lgWidth,
|
|
26
|
+
mdWidth,
|
|
27
|
+
index,
|
|
28
|
+
}: BlogCardProps) => {
|
|
29
|
+
const basehwClass = "lg:w-[calc(33.3333%-1rem)] md:w-[calc(50%-1rem)]";
|
|
30
|
+
const parentClassName = asGrid
|
|
31
|
+
? "flex h-full flex-col overflow-hidden rounded-card-lg bg-white shadow-drop transition-all duration-200 hover:-translate-y-0.5 hover:shadow-cardDrop"
|
|
32
|
+
: `callout-card ${basehwClass} ${lgWidth} ${mdWidth} w-full overflow-hidden rounded-card-lg bg-white shadow-drop transition-all duration-200 hover:-translate-y-0.5 hover:shadow-cardDrop`;
|
|
33
|
+
|
|
34
|
+
return (
|
|
35
|
+
<article
|
|
36
|
+
className={parentClassName}
|
|
37
|
+
data-section-type={"blog-card"}
|
|
38
|
+
data-section-index={index}
|
|
39
|
+
>
|
|
40
|
+
{/* Image */}
|
|
41
|
+
<Link href={href} tabIndex={-1} aria-hidden="true" className="block">
|
|
42
|
+
<div className="h-[232px] w-full flex-shrink-0 overflow-hidden bg-gray-100">
|
|
43
|
+
{image ? (
|
|
44
|
+
<Image
|
|
45
|
+
src={image.src}
|
|
46
|
+
alt={image.alt}
|
|
47
|
+
width={image.width}
|
|
48
|
+
height={image.height}
|
|
49
|
+
className="h-full w-full object-cover transition-transform duration-300 hover:scale-[1.03]"
|
|
50
|
+
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
|
51
|
+
/>
|
|
52
|
+
) : (
|
|
53
|
+
<div
|
|
54
|
+
className="h-full w-full bg-gradient-to-br from-gray-200 to-gray-100"
|
|
55
|
+
aria-hidden="true"
|
|
56
|
+
/>
|
|
57
|
+
)}
|
|
58
|
+
</div>
|
|
59
|
+
</Link>
|
|
60
|
+
|
|
61
|
+
{/* Body */}
|
|
62
|
+
<div className="flex flex-1 flex-col gap-5 p-6 md:p-8">
|
|
63
|
+
{/* Meta: category + date */}
|
|
64
|
+
<div className="flex items-center gap-2 text-[13px]">
|
|
65
|
+
<span className="body2 text-text-brand">{category}</span>
|
|
66
|
+
{date && (
|
|
67
|
+
<>
|
|
68
|
+
<span className="footnote text-text" aria-hidden="true">
|
|
69
|
+
•
|
|
70
|
+
</span>
|
|
71
|
+
<time className="body2 text-text">{date}</time>
|
|
72
|
+
</>
|
|
73
|
+
)}
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
{/* Title */}
|
|
77
|
+
{title && (
|
|
78
|
+
<Link
|
|
79
|
+
href={href}
|
|
80
|
+
className="heading6 m-0 line-clamp-3 font-black transition-colors duration-150 hover:text-text-brand"
|
|
81
|
+
>
|
|
82
|
+
{title}
|
|
83
|
+
</Link>
|
|
84
|
+
)}
|
|
85
|
+
|
|
86
|
+
{/* Excerpt */}
|
|
87
|
+
{description && (
|
|
88
|
+
<Text className="body1 m-0 line-clamp-3 flex-1 text-text">
|
|
89
|
+
{description}
|
|
90
|
+
</Text>
|
|
91
|
+
)}
|
|
92
|
+
|
|
93
|
+
{/* Read more */}
|
|
94
|
+
<Link
|
|
95
|
+
href={href}
|
|
96
|
+
className="group mt-auto inline-flex items-center justify-start gap-2 pt-3 text-sm text-text-brand no-underline"
|
|
97
|
+
aria-label={`${readMoreText} about ${title || "this article"}`}
|
|
98
|
+
>
|
|
99
|
+
<Text
|
|
100
|
+
aria-label={`${readMoreText} about ${title || "this article"}`}
|
|
101
|
+
className="label1 text-nowrap"
|
|
102
|
+
>
|
|
103
|
+
{readMoreText}
|
|
104
|
+
</Text>
|
|
105
|
+
<MaterialIcon
|
|
106
|
+
name="expand_circle_right"
|
|
107
|
+
fill={1}
|
|
108
|
+
size={24}
|
|
109
|
+
weight="200"
|
|
110
|
+
/>
|
|
111
|
+
</Link>
|
|
112
|
+
</div>
|
|
113
|
+
</article>
|
|
114
|
+
);
|
|
115
|
+
};
|
|
116
|
+
export default BlogCard;
|