@windstream/react-shared-components 0.0.73 → 0.0.76
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.d.ts +1 -0
- 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 +11 -3
- package/dist/index.d.ts +14 -6
- 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/dist/styles.css +1 -1
- package/package.json +1 -1
- package/src/components/brand-button/BrandButton.stories.tsx +6 -2
- package/src/components/brand-button/index.tsx +31 -9
- package/src/components/brand-button/types.ts +15 -3
- package/src/contentful/blocks/button/index.tsx +12 -11
- package/src/contentful/blocks/find-kinetic/index.tsx +4 -1
- package/src/contentful/blocks/find-kinetic/types.ts +1 -0
- package/src/contentful/blocks/floating-banner/index.tsx +1 -1
- package/src/contentful/blocks/primary-hero/index.tsx +92 -40
|
@@ -4,7 +4,7 @@ import { PrimaryHeroProps } from "./types";
|
|
|
4
4
|
import { Checklist } from "@shared/components/checklist";
|
|
5
5
|
import { NextImage } from "@shared/components/next-image";
|
|
6
6
|
import { Text } from "@shared/components/text";
|
|
7
|
-
import { Button
|
|
7
|
+
import { Button } from "@shared/contentful/blocks/button";
|
|
8
8
|
import { cx } from "@shared/utils";
|
|
9
9
|
|
|
10
10
|
export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
@@ -20,6 +20,10 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
20
20
|
priceSuffix,
|
|
21
21
|
checklist,
|
|
22
22
|
checkPlansJSX,
|
|
23
|
+
badgeImage,
|
|
24
|
+
pricingDescriptionDisclaimer,
|
|
25
|
+
secondaryCta,
|
|
26
|
+
secondaryCtaPrefix,
|
|
23
27
|
} = props;
|
|
24
28
|
|
|
25
29
|
const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
|
|
@@ -28,7 +32,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
28
32
|
<div className="component-container p-5 lg:h-[724px] lg:p-0">
|
|
29
33
|
<div
|
|
30
34
|
className={cx(
|
|
31
|
-
"primary-hero-container mx-auto flex flex-col sm:items-center sm:text-center lg:h-full lg:max-w-120 lg:flex-row lg:items-center lg:justify-between lg:gap-4 lg:
|
|
35
|
+
"primary-hero-container mx-auto flex flex-col sm:items-center sm:text-center lg:h-full lg:max-w-120 lg:flex-row lg:items-center lg:justify-between lg:gap-4 lg:px-4 lg:text-left"
|
|
32
36
|
)}
|
|
33
37
|
>
|
|
34
38
|
{/* Left column: navy background, headline, body, address, button, link */}
|
|
@@ -51,7 +55,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
51
55
|
{/* price callout */}
|
|
52
56
|
{price ? (
|
|
53
57
|
<div className="flex">
|
|
54
|
-
<div className="mr-2">
|
|
58
|
+
<div className="mr-2 mt-2">
|
|
55
59
|
{priceCallout
|
|
56
60
|
? priceCallout.split("|").map((line, index) => (
|
|
57
61
|
<Text key={index} as="p" className="body2">
|
|
@@ -60,17 +64,19 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
60
64
|
))
|
|
61
65
|
: null}
|
|
62
66
|
</div>
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
<Text as="p" className="subheading5">
|
|
67
|
-
{price}
|
|
68
|
-
</Text>
|
|
69
|
-
{priceSuffix ? (
|
|
70
|
-
<Text as="p" className="subheading1">
|
|
71
|
-
{priceSuffix}
|
|
67
|
+
<div className="flex">
|
|
68
|
+
<Text as="p" className="subheading1 mt-2">
|
|
69
|
+
$
|
|
72
70
|
</Text>
|
|
73
|
-
|
|
71
|
+
<Text as="p" className="subheading5">
|
|
72
|
+
{price}
|
|
73
|
+
</Text>
|
|
74
|
+
{priceSuffix ? (
|
|
75
|
+
<Text as="p" className="subheading1 mt-2">
|
|
76
|
+
{priceSuffix}
|
|
77
|
+
</Text>
|
|
78
|
+
) : null}
|
|
79
|
+
</div>
|
|
74
80
|
</div>
|
|
75
81
|
) : null}
|
|
76
82
|
|
|
@@ -82,42 +88,63 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
82
88
|
/>
|
|
83
89
|
)}
|
|
84
90
|
|
|
85
|
-
{/*
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
checkPlansJSX={checkPlansJSX}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
91
|
+
{/* CTA section */}
|
|
92
|
+
<div className="flex flex-col gap-3">
|
|
93
|
+
{/* desktop CTA */}
|
|
94
|
+
{primaryCta1 && (
|
|
95
|
+
<div className={cx("hidden lg:flex lg:flex-col")}>
|
|
96
|
+
<Button {...primaryCta1} checkPlansJSX={checkPlansJSX} />
|
|
97
|
+
</div>
|
|
98
|
+
)}
|
|
99
|
+
|
|
100
|
+
{secondaryCtaPrefix || secondaryCta ? (
|
|
101
|
+
<div className="flex">
|
|
102
|
+
{secondaryCtaPrefix && (
|
|
103
|
+
<Text as="span" className="body2 mr-1">
|
|
104
|
+
{secondaryCtaPrefix}
|
|
105
|
+
</Text>
|
|
106
|
+
)}
|
|
107
|
+
{secondaryCta && (
|
|
108
|
+
<Button
|
|
109
|
+
linkClassName="body2 text-text-inverse"
|
|
110
|
+
{...secondaryCta}
|
|
98
111
|
/>
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
)}
|
|
112
|
+
)}
|
|
113
|
+
</div>
|
|
114
|
+
) : null}
|
|
103
115
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
bottomLink &&
|
|
107
|
-
(bottomLinkLabel || bottomLink?.href) && (
|
|
116
|
+
{/* desktop bottom link */}
|
|
117
|
+
{bottomLink && (bottomLinkLabel || bottomLink?.href) && (
|
|
108
118
|
<div className="hidden lg:block">
|
|
109
|
-
<
|
|
119
|
+
<Button
|
|
110
120
|
{...bottomLink}
|
|
111
121
|
linkClassName="text-footnote text-white"
|
|
112
122
|
/>
|
|
113
123
|
</div>
|
|
114
124
|
)}
|
|
125
|
+
|
|
126
|
+
{pricingDescriptionDisclaimer ? (
|
|
127
|
+
<Text as="p" className="body3">
|
|
128
|
+
{pricingDescriptionDisclaimer}
|
|
129
|
+
</Text>
|
|
130
|
+
) : null}
|
|
131
|
+
</div>
|
|
115
132
|
</div>
|
|
116
133
|
</div>
|
|
117
134
|
|
|
118
135
|
{/* mobile hero image and bottom link */}
|
|
119
136
|
<div className="lg:hidden">
|
|
120
|
-
<div className={"my-8"}>
|
|
137
|
+
<div className={"relative my-8"}>
|
|
138
|
+
{badgeImage ? (
|
|
139
|
+
<NextImage
|
|
140
|
+
src={badgeImage}
|
|
141
|
+
alt={"Badge"}
|
|
142
|
+
className="absolute left-5 top-5 aspect-square w-26 object-cover object-center"
|
|
143
|
+
width={100}
|
|
144
|
+
height={100}
|
|
145
|
+
loading="eager"
|
|
146
|
+
/>
|
|
147
|
+
) : null}
|
|
121
148
|
{carouselImages && carouselImages[0] ? (
|
|
122
149
|
<NextImage
|
|
123
150
|
src={carouselImages[0]}
|
|
@@ -129,18 +156,43 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
129
156
|
/>
|
|
130
157
|
) : null}
|
|
131
158
|
</div>
|
|
159
|
+
|
|
132
160
|
{bottomLink && (bottomLinkLabel || bottomLink?.href) && (
|
|
133
161
|
<div>
|
|
134
|
-
<
|
|
135
|
-
{...bottomLink}
|
|
136
|
-
linkClassName="body3 text-white"
|
|
137
|
-
/>
|
|
162
|
+
<Button {...bottomLink} linkClassName="body3 text-white" />
|
|
138
163
|
</div>
|
|
139
164
|
)}
|
|
165
|
+
|
|
166
|
+
{pricingDescriptionDisclaimer ? (
|
|
167
|
+
<Text as="p" className="body3">
|
|
168
|
+
{pricingDescriptionDisclaimer}
|
|
169
|
+
</Text>
|
|
170
|
+
) : null}
|
|
171
|
+
|
|
172
|
+
{secondaryCtaPrefix || secondaryCta ? (
|
|
173
|
+
<div className="flex">
|
|
174
|
+
{secondaryCtaPrefix && (
|
|
175
|
+
<Text as="span" className="body2 mr-1">
|
|
176
|
+
{secondaryCtaPrefix}
|
|
177
|
+
</Text>
|
|
178
|
+
)}
|
|
179
|
+
{secondaryCta && <Button {...secondaryCta} />}
|
|
180
|
+
</div>
|
|
181
|
+
) : null}
|
|
140
182
|
</div>
|
|
141
183
|
|
|
142
184
|
{/* Right column: bright blue background, diagonal top edge, hero image */}
|
|
143
185
|
<div className={cx("relative hidden lg:block")}>
|
|
186
|
+
{badgeImage ? (
|
|
187
|
+
<NextImage
|
|
188
|
+
src={badgeImage}
|
|
189
|
+
alt={"Badge"}
|
|
190
|
+
className="absolute -left-26 top-18 aspect-square w-52 object-cover object-center"
|
|
191
|
+
width={200}
|
|
192
|
+
height={200}
|
|
193
|
+
loading="eager"
|
|
194
|
+
/>
|
|
195
|
+
) : null}
|
|
144
196
|
{carouselImages && carouselImages[0] ? (
|
|
145
197
|
<NextImage
|
|
146
198
|
src={carouselImages[0]}
|