@windstream/react-shared-components 0.1.58 → 0.1.60
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/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/package.json
CHANGED
|
@@ -1,110 +1,117 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { BlogCardProps } from "./types";
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
import {
|
|
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
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { BlogCardProps } from "./types";
|
|
3
|
+
import * as _NextLink from "next/link";
|
|
4
|
+
|
|
5
|
+
// import { Button } from "@shared/components/button";
|
|
6
|
+
import { MaterialIcon } from "@shared/components/material-icon";
|
|
7
|
+
import { Text } from "@shared/components/text";
|
|
8
|
+
|
|
9
|
+
// CJS/ESM interop: next/link uses standard __esModule exports so this is safe.
|
|
10
|
+
// next/image is intentionally avoided — its image-external.js uses the
|
|
11
|
+
// `0 && (module.exports = {...})` tree-shaking hint which confuses webpack's
|
|
12
|
+
// CJS→ESM interop and causes "got: object" errors in consuming apps.
|
|
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
|
+
<img
|
|
45
|
+
src={image.src}
|
|
46
|
+
alt={image.alt}
|
|
47
|
+
width={image.width}
|
|
48
|
+
height={image.height}
|
|
49
|
+
loading="lazy"
|
|
50
|
+
decoding="async"
|
|
51
|
+
className="h-full w-full object-cover transition-transform duration-300 hover:scale-[1.03]"
|
|
52
|
+
/>
|
|
53
|
+
) : (
|
|
54
|
+
<div
|
|
55
|
+
className="h-full w-full bg-gradient-to-br from-gray-200 to-gray-100"
|
|
56
|
+
aria-hidden="true"
|
|
57
|
+
/>
|
|
58
|
+
)}
|
|
59
|
+
</div>
|
|
60
|
+
</Link>
|
|
61
|
+
|
|
62
|
+
{/* Body */}
|
|
63
|
+
<div className="flex flex-1 flex-col gap-5 p-6 md:p-8">
|
|
64
|
+
{/* Meta: category + date */}
|
|
65
|
+
<div className="flex items-center gap-2 text-[13px]">
|
|
66
|
+
<span className="body2 text-text-brand">{category}</span>
|
|
67
|
+
{date && (
|
|
68
|
+
<>
|
|
69
|
+
<span className="footnote text-text" aria-hidden="true">
|
|
70
|
+
•
|
|
71
|
+
</span>
|
|
72
|
+
<time className="body2 text-text">{date}</time>
|
|
73
|
+
</>
|
|
74
|
+
)}
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
{/* Title */}
|
|
78
|
+
{title && (
|
|
79
|
+
<Link
|
|
80
|
+
href={href}
|
|
81
|
+
className="heading6 m-0 line-clamp-3 font-black transition-colors duration-150 hover:text-text-brand"
|
|
82
|
+
>
|
|
83
|
+
{title}
|
|
84
|
+
</Link>
|
|
85
|
+
)}
|
|
86
|
+
|
|
87
|
+
{/* Excerpt */}
|
|
88
|
+
{description && (
|
|
89
|
+
<Text className="body1 m-0 line-clamp-3 flex-1 text-text">
|
|
90
|
+
{description}
|
|
91
|
+
</Text>
|
|
92
|
+
)}
|
|
93
|
+
|
|
94
|
+
{/* Read more */}
|
|
95
|
+
<Link
|
|
96
|
+
href={href}
|
|
97
|
+
className="group mt-auto inline-flex items-center justify-start gap-2 pt-3 text-sm text-text-brand no-underline"
|
|
98
|
+
aria-label={`${readMoreText} about ${title || "this article"}`}
|
|
99
|
+
>
|
|
100
|
+
<Text
|
|
101
|
+
aria-label={`${readMoreText} about ${title || "this article"}`}
|
|
102
|
+
className="label1 text-nowrap"
|
|
103
|
+
>
|
|
104
|
+
{readMoreText}
|
|
105
|
+
</Text>
|
|
106
|
+
<MaterialIcon
|
|
107
|
+
name="expand_circle_right"
|
|
108
|
+
fill={1}
|
|
109
|
+
size={24}
|
|
110
|
+
weight="200"
|
|
111
|
+
/>
|
|
112
|
+
</Link>
|
|
113
|
+
</div>
|
|
114
|
+
</article>
|
|
115
|
+
);
|
|
116
|
+
};
|
|
117
|
+
export default BlogCard;
|