@windstream/react-shared-components 0.0.53 → 0.0.54
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 +1 -1
- package/dist/contentful/index.esm.js.map +1 -1
- package/dist/contentful/index.js +1 -1
- package/dist/contentful/index.js.map +1 -1
- package/dist/core.d.ts +4 -4
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/checklist/index.tsx +4 -3
- package/src/components/checklist/types.ts +1 -0
- package/src/contentful/blocks/image-promo-bar/index.tsx +135 -133
package/package.json
CHANGED
|
@@ -12,6 +12,7 @@ export const Checklist: React.FC<ChecklistProps> = props => {
|
|
|
12
12
|
listIconName = "check",
|
|
13
13
|
listItemClassName,
|
|
14
14
|
iconSize = 20,
|
|
15
|
+
iconPosition = "center",
|
|
15
16
|
} = props;
|
|
16
17
|
const showIcons = listIconName !== "disc";
|
|
17
18
|
if (!items?.length) return null;
|
|
@@ -26,7 +27,7 @@ export const Checklist: React.FC<ChecklistProps> = props => {
|
|
|
26
27
|
variant={showIcons ? "default" : "unstyled"}
|
|
27
28
|
key={idx}
|
|
28
29
|
className={cx(
|
|
29
|
-
|
|
30
|
+
`flex ${iconPosition === "top" ? "items-start" : "items-center"} gap-2 text-text-secondary`,
|
|
30
31
|
listItemClassName
|
|
31
32
|
)}
|
|
32
33
|
>
|
|
@@ -36,11 +37,11 @@ export const Checklist: React.FC<ChecklistProps> = props => {
|
|
|
36
37
|
name={listIconName}
|
|
37
38
|
size={iconSize}
|
|
38
39
|
weight="600"
|
|
39
|
-
className=
|
|
40
|
+
className={`text-icon-brand ${iconPosition === "top" ? "mt-2" : ""}`}
|
|
40
41
|
/>
|
|
41
42
|
</div>
|
|
42
43
|
)}
|
|
43
|
-
<Text as="
|
|
44
|
+
<Text as="div">{text}</Text>
|
|
44
45
|
</ListItem>
|
|
45
46
|
))}
|
|
46
47
|
</List>
|
|
@@ -1,133 +1,135 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Button } from "../button";
|
|
3
|
-
import { ImagePromoBarProps } from "./types";
|
|
4
|
-
|
|
5
|
-
import { Checklist } from "@shared/components/checklist";
|
|
6
|
-
import { Image } from "@shared/components/image";
|
|
7
|
-
import { NextImage } from "@shared/components/next-image";
|
|
8
|
-
import { Text } from "@shared/components/text";
|
|
9
|
-
|
|
10
|
-
export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
|
|
11
|
-
brow,
|
|
12
|
-
enableHeading,
|
|
13
|
-
title,
|
|
14
|
-
subTitle,
|
|
15
|
-
ctaDisclaimer,
|
|
16
|
-
disclaimer,
|
|
17
|
-
description,
|
|
18
|
-
image,
|
|
19
|
-
imageLinks,
|
|
20
|
-
mediaPosition = true,
|
|
21
|
-
checklist,
|
|
22
|
-
secondaryCta,
|
|
23
|
-
cta,
|
|
24
|
-
videoLink,
|
|
25
|
-
maxWidth = true,
|
|
26
|
-
color = "light",
|
|
27
|
-
imageWidth = 660,
|
|
28
|
-
imageHeight = 660,
|
|
29
|
-
}) => {
|
|
30
|
-
return (
|
|
31
|
-
<div className="component-container">
|
|
32
|
-
<div
|
|
33
|
-
className={`image-promo-bar-content ${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 mb-8 mt-16`}
|
|
34
|
-
>
|
|
35
|
-
<div
|
|
36
|
-
className={`flex shrink-0 flex-col items-center gap-8 xl:gap-[126px] ${mediaPosition ? "flex-row xl:flex-row-reverse" : "xl:flex-row"}`}
|
|
37
|
-
>
|
|
38
|
-
<div
|
|
39
|
-
className={`flex flex-[1_0_0] flex-col items-start justify-center gap-8 xl:gap-10 ${color == "dark" ? "text-text" : "text-white"}`}
|
|
40
|
-
>
|
|
41
|
-
<div className="heading holder">
|
|
42
|
-
{brow && (
|
|
43
|
-
<Text
|
|
44
|
-
as="div"
|
|
45
|
-
className="subheading4 mb-4 text-text-brand xl:subheading2 xl:mb-3"
|
|
46
|
-
>
|
|
47
|
-
{brow}
|
|
48
|
-
</Text>
|
|
49
|
-
)}
|
|
50
|
-
{title && (
|
|
51
|
-
<Text
|
|
52
|
-
as={enableHeading ? "h1" : "h2"}
|
|
53
|
-
className="heading2 xl:heading1"
|
|
54
|
-
>
|
|
55
|
-
{title}
|
|
56
|
-
</Text>
|
|
57
|
-
)}
|
|
58
|
-
{subTitle && (
|
|
59
|
-
<Text
|
|
60
|
-
as={enableHeading ? "h2" : "h3"}
|
|
61
|
-
className="subheading1 mt-3"
|
|
62
|
-
>
|
|
63
|
-
{subTitle}
|
|
64
|
-
</Text>
|
|
65
|
-
)}
|
|
66
|
-
</div>
|
|
67
|
-
{/* Content Section */}
|
|
68
|
-
{description && (
|
|
69
|
-
<Text as="div" className="body1">
|
|
70
|
-
{description}
|
|
71
|
-
</Text>
|
|
72
|
-
)}
|
|
73
|
-
{/* Checklist Rendering */}
|
|
74
|
-
{checklist.length > 0 &&
|
|
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
|
-
|
|
133
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Button } from "../button";
|
|
3
|
+
import { ImagePromoBarProps } from "./types";
|
|
4
|
+
|
|
5
|
+
import { Checklist } from "@shared/components/checklist";
|
|
6
|
+
import { Image } from "@shared/components/image";
|
|
7
|
+
import { NextImage } from "@shared/components/next-image";
|
|
8
|
+
import { Text } from "@shared/components/text";
|
|
9
|
+
|
|
10
|
+
export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
|
|
11
|
+
brow,
|
|
12
|
+
enableHeading,
|
|
13
|
+
title,
|
|
14
|
+
subTitle,
|
|
15
|
+
ctaDisclaimer,
|
|
16
|
+
disclaimer,
|
|
17
|
+
description,
|
|
18
|
+
image,
|
|
19
|
+
imageLinks,
|
|
20
|
+
mediaPosition = true,
|
|
21
|
+
checklist,
|
|
22
|
+
secondaryCta,
|
|
23
|
+
cta,
|
|
24
|
+
videoLink,
|
|
25
|
+
maxWidth = true,
|
|
26
|
+
color = "light",
|
|
27
|
+
imageWidth = 660,
|
|
28
|
+
imageHeight = 660,
|
|
29
|
+
}) => {
|
|
30
|
+
return (
|
|
31
|
+
<div className="component-container">
|
|
32
|
+
<div
|
|
33
|
+
className={`image-promo-bar-content ${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 mb-8 mt-16`}
|
|
34
|
+
>
|
|
35
|
+
<div
|
|
36
|
+
className={`flex shrink-0 flex-col items-center gap-8 xl:gap-[126px] ${mediaPosition ? "flex-row xl:flex-row-reverse" : "xl:flex-row"}`}
|
|
37
|
+
>
|
|
38
|
+
<div
|
|
39
|
+
className={`flex flex-[1_0_0] flex-col items-start justify-center gap-8 xl:gap-10 ${color == "dark" ? "text-text" : "text-white"}`}
|
|
40
|
+
>
|
|
41
|
+
<div className="heading holder">
|
|
42
|
+
{brow && (
|
|
43
|
+
<Text
|
|
44
|
+
as="div"
|
|
45
|
+
className="subheading4 mb-4 text-text-brand xl:subheading2 xl:mb-3"
|
|
46
|
+
>
|
|
47
|
+
{brow}
|
|
48
|
+
</Text>
|
|
49
|
+
)}
|
|
50
|
+
{title && (
|
|
51
|
+
<Text
|
|
52
|
+
as={enableHeading ? "h1" : "h2"}
|
|
53
|
+
className="heading2 xl:heading1"
|
|
54
|
+
>
|
|
55
|
+
{title}
|
|
56
|
+
</Text>
|
|
57
|
+
)}
|
|
58
|
+
{subTitle && (
|
|
59
|
+
<Text
|
|
60
|
+
as={enableHeading ? "h2" : "h3"}
|
|
61
|
+
className="subheading1 mt-3"
|
|
62
|
+
>
|
|
63
|
+
{subTitle}
|
|
64
|
+
</Text>
|
|
65
|
+
)}
|
|
66
|
+
</div>
|
|
67
|
+
{/* Content Section */}
|
|
68
|
+
{description && (
|
|
69
|
+
<Text as="div" className="body1">
|
|
70
|
+
{description}
|
|
71
|
+
</Text>
|
|
72
|
+
)}
|
|
73
|
+
{/* Checklist Rendering */}
|
|
74
|
+
{checklist.length > 0 && (
|
|
75
|
+
<Checklist items={checklist} iconPosition="top" iconSize={24} />
|
|
76
|
+
)}
|
|
77
|
+
{/* Image Links Collection */}
|
|
78
|
+
{imageLinks?.map((link, index) => (
|
|
79
|
+
<div key={index} className="image-link">
|
|
80
|
+
<Image src={link.url} alt="icon-link" />
|
|
81
|
+
</div>
|
|
82
|
+
))}
|
|
83
|
+
{/* CTAs and Disclaimers */}
|
|
84
|
+
<div className="flex w-full flex-col gap-8 xl:flex-row xl:gap-3">
|
|
85
|
+
{cta && (
|
|
86
|
+
<div className="primary-cta w-full xl:w-auto">
|
|
87
|
+
<Button {...cta} fullWidth={true} />
|
|
88
|
+
</div>
|
|
89
|
+
)}
|
|
90
|
+
{secondaryCta && (
|
|
91
|
+
<div className="secondary-cta">
|
|
92
|
+
<Button {...secondaryCta} fullWidth={true} />
|
|
93
|
+
</div>
|
|
94
|
+
)}
|
|
95
|
+
</div>
|
|
96
|
+
{ctaDisclaimer && <div>{ctaDisclaimer}</div>}
|
|
97
|
+
{disclaimer && <div>{disclaimer}</div>}
|
|
98
|
+
</div>
|
|
99
|
+
<aside className="flex shrink-0 content-center items-center">
|
|
100
|
+
<div className="relative aspect-[16/9] w-full xl:aspect-square xl:max-h-[486px] xl:w-[486px]">
|
|
101
|
+
{/* Media Section */}
|
|
102
|
+
{image && (
|
|
103
|
+
<NextImage
|
|
104
|
+
src={image}
|
|
105
|
+
alt="section-image"
|
|
106
|
+
width={imageWidth}
|
|
107
|
+
height={imageHeight}
|
|
108
|
+
className="bottom-0 left-0 right-0 top-0 h-full rounded-[40px] object-cover"
|
|
109
|
+
/>
|
|
110
|
+
)}
|
|
111
|
+
</div>
|
|
112
|
+
<div>
|
|
113
|
+
{/* Video Link Section */}
|
|
114
|
+
{videoLink?.link && (
|
|
115
|
+
<div className="video-section">
|
|
116
|
+
{videoLink.image && (
|
|
117
|
+
<NextImage
|
|
118
|
+
src={videoLink.image}
|
|
119
|
+
alt="Video preview"
|
|
120
|
+
width={486}
|
|
121
|
+
height={100}
|
|
122
|
+
className="rounded-[40px]"
|
|
123
|
+
/>
|
|
124
|
+
)}
|
|
125
|
+
</div>
|
|
126
|
+
)}
|
|
127
|
+
</div>
|
|
128
|
+
</aside>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
);
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
export default ImagePromoBar;
|