@windstream/react-shared-components 0.2.70 → 0.2.71
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 +3 -0
- package/dist/contentful/index.esm.js +4 -4
- 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 +1 -1
- package/dist/index.d.ts +2 -2
- package/package.json +1 -1
- package/src/contentful/blocks/primary-hero/index.tsx +51 -18
- package/src/contentful/blocks/primary-hero/types.ts +17 -0
- package/src/types/field-props.ts +9 -0
package/dist/core.d.ts
CHANGED
|
@@ -71,7 +71,7 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
|
|
|
71
71
|
size?: "slim" | "medium" | "large" | undefined;
|
|
72
72
|
label?: string | undefined;
|
|
73
73
|
errorText?: string | undefined;
|
|
74
|
-
prefixIconName?: "
|
|
74
|
+
prefixIconName?: "search" | "location_on" | undefined;
|
|
75
75
|
prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
|
|
76
76
|
prefixIconFill?: boolean | undefined;
|
|
77
77
|
suffixIconFill?: boolean | undefined;
|
package/dist/index.d.ts
CHANGED
|
@@ -71,7 +71,7 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
|
|
|
71
71
|
size?: "slim" | "medium" | "large" | undefined;
|
|
72
72
|
label?: string | undefined;
|
|
73
73
|
errorText?: string | undefined;
|
|
74
|
-
prefixIconName?: "
|
|
74
|
+
prefixIconName?: "search" | "location_on" | undefined;
|
|
75
75
|
prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
|
|
76
76
|
prefixIconFill?: boolean | undefined;
|
|
77
77
|
suffixIconFill?: boolean | undefined;
|
|
@@ -423,7 +423,7 @@ type ButtonAsAnchor = ButtonCustomProps & Omit<AnchorHTMLAttributes<HTMLAnchorEl
|
|
|
423
423
|
};
|
|
424
424
|
type ButtonProps = ButtonAsButton | ButtonAsAnchor;
|
|
425
425
|
|
|
426
|
-
declare const BrandButton: React__default.ForwardRefExoticComponent<ButtonProps$2 & React__default.RefAttributes<
|
|
426
|
+
declare const BrandButton: React__default.ForwardRefExoticComponent<ButtonProps$2 & React__default.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
|
|
427
427
|
|
|
428
428
|
declare const Checklist: React__default.FC<ChecklistProps>;
|
|
429
429
|
|
package/package.json
CHANGED
|
@@ -34,6 +34,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
34
34
|
logoLockup,
|
|
35
35
|
heroVideo,
|
|
36
36
|
heroVideoMobile,
|
|
37
|
+
fieldProps,
|
|
37
38
|
} = props;
|
|
38
39
|
|
|
39
40
|
const isButtonType = (cta: any) => {
|
|
@@ -74,6 +75,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
74
75
|
height={208}
|
|
75
76
|
quality={90}
|
|
76
77
|
loading="eager"
|
|
78
|
+
{...fieldProps?.badgeImage}
|
|
77
79
|
/>
|
|
78
80
|
) : null;
|
|
79
81
|
return (
|
|
@@ -88,6 +90,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
88
90
|
aria-label={heroVideo?.title || title || "Hero background video"}
|
|
89
91
|
className="absolute inset-0 z-0 hidden h-full w-full object-fill xl:block"
|
|
90
92
|
data-testid="hero-background-video-desktop"
|
|
93
|
+
{...fieldProps?.heroVideo}
|
|
91
94
|
>
|
|
92
95
|
<source src={desktopVideoUrl} type="video/mp4" />
|
|
93
96
|
</video>
|
|
@@ -108,12 +111,13 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
108
111
|
<Text
|
|
109
112
|
as={showAsHeading ? "h1" : "h2"}
|
|
110
113
|
className="heading2 lg:heading1"
|
|
114
|
+
{...fieldProps?.title}
|
|
111
115
|
>
|
|
112
116
|
{title}
|
|
113
117
|
</Text>
|
|
114
118
|
)}
|
|
115
119
|
{subTitle && (
|
|
116
|
-
<Text as="p" className="subheading3">
|
|
120
|
+
<Text as="p" className="subheading3" {...fieldProps?.subTitle}>
|
|
117
121
|
{subTitle}
|
|
118
122
|
</Text>
|
|
119
123
|
)}
|
|
@@ -121,7 +125,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
121
125
|
{/* price callout */}
|
|
122
126
|
{price ? (
|
|
123
127
|
<div className="flex sm:justify-center sm:text-left lg:justify-start">
|
|
124
|
-
<div className="mr-2 mt-0.5">
|
|
128
|
+
<div className="mr-2 mt-0.5" {...fieldProps?.priceCallout}>
|
|
125
129
|
{priceCallout
|
|
126
130
|
? priceCallout.split("|").map((line, index) => (
|
|
127
131
|
<Text key={index} as="p" className="body2">
|
|
@@ -134,11 +138,15 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
134
138
|
<Text as="p" className="subheading1 mt-0.5">
|
|
135
139
|
$
|
|
136
140
|
</Text>
|
|
137
|
-
<Text as="p" className="subheading5">
|
|
141
|
+
<Text as="p" className="subheading5" {...fieldProps?.price}>
|
|
138
142
|
{price}
|
|
139
143
|
</Text>
|
|
140
144
|
{priceSuffix ? (
|
|
141
|
-
<Text
|
|
145
|
+
<Text
|
|
146
|
+
as="p"
|
|
147
|
+
className="subheading1 mt-0.5"
|
|
148
|
+
{...fieldProps?.priceSuffix}
|
|
149
|
+
>
|
|
142
150
|
{priceSuffix}
|
|
143
151
|
</Text>
|
|
144
152
|
) : null}
|
|
@@ -153,6 +161,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
153
161
|
"subheading1",
|
|
154
162
|
"text-left sm:text-center xl:text-left"
|
|
155
163
|
)}
|
|
164
|
+
{...fieldProps?.pricingDescription}
|
|
156
165
|
>
|
|
157
166
|
{pricingDescription}
|
|
158
167
|
</Text>
|
|
@@ -163,26 +172,38 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
163
172
|
data-cy="hero-pricing-disclaimer"
|
|
164
173
|
as="p"
|
|
165
174
|
className={cx("body3", "text-left sm:text-center xl:text-left")}
|
|
175
|
+
{...fieldProps?.pricingDescriptionDisclaimer}
|
|
166
176
|
>
|
|
167
177
|
{pricingDescriptionDisclaimer}
|
|
168
178
|
</Text>
|
|
169
179
|
) : null}
|
|
170
180
|
|
|
171
181
|
{/* checklist */}
|
|
172
|
-
{checklist &&
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
182
|
+
{checklist &&
|
|
183
|
+
(() => {
|
|
184
|
+
const checklistEl = (
|
|
185
|
+
<Checklist
|
|
186
|
+
iconSize={24}
|
|
187
|
+
listItemClassName={`body2 text-left ${textColorClass}`}
|
|
188
|
+
items={checklist.map(item =>
|
|
189
|
+
item.iconUrl
|
|
190
|
+
? { title: item.title, iconUrl: item.iconUrl }
|
|
191
|
+
: item.title
|
|
192
|
+
)}
|
|
193
|
+
/>
|
|
194
|
+
);
|
|
195
|
+
return fieldProps?.checklist ? (
|
|
196
|
+
<div {...fieldProps.checklist}>{checklistEl}</div>
|
|
197
|
+
) : (
|
|
198
|
+
checklistEl
|
|
199
|
+
);
|
|
200
|
+
})()}
|
|
183
201
|
|
|
184
202
|
{logoLockup ? (
|
|
185
|
-
<div
|
|
203
|
+
<div
|
|
204
|
+
className="text-left sm:text-center xl:mb-0 xl:text-left"
|
|
205
|
+
{...fieldProps?.logoLockup}
|
|
206
|
+
>
|
|
186
207
|
<NextImage
|
|
187
208
|
src={logoLockup}
|
|
188
209
|
alt={"Logo Lockup"}
|
|
@@ -256,7 +277,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
256
277
|
{secondaryCtaPrefix &&
|
|
257
278
|
secondaryCta?.preDefinedFunctionExecution !==
|
|
258
279
|
"check availability" && (
|
|
259
|
-
<Text
|
|
280
|
+
<Text
|
|
281
|
+
as="span"
|
|
282
|
+
className="body2 mr-1"
|
|
283
|
+
{...fieldProps?.secondaryCtaPrefix}
|
|
284
|
+
>
|
|
260
285
|
{secondaryCtaPrefix}
|
|
261
286
|
</Text>
|
|
262
287
|
)}
|
|
@@ -300,6 +325,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
300
325
|
aria-label={heroVideoMobile?.title || title || "Hero video"}
|
|
301
326
|
className="h-[350px] w-full rounded-[40px] object-cover object-center sm:h-[420px] md:h-[520px]"
|
|
302
327
|
data-testid="hero-video-mobile"
|
|
328
|
+
{...fieldProps?.heroVideo}
|
|
303
329
|
>
|
|
304
330
|
<source src={mobileVideoUrl} type="video/mp4" />
|
|
305
331
|
</video>
|
|
@@ -320,6 +346,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
320
346
|
height={104}
|
|
321
347
|
quality={90}
|
|
322
348
|
loading="eager"
|
|
349
|
+
{...fieldProps?.badgeImage}
|
|
323
350
|
/>
|
|
324
351
|
) : null}
|
|
325
352
|
{heroImageUrl ? (
|
|
@@ -336,6 +363,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
336
363
|
sizes="100vw"
|
|
337
364
|
quality={90}
|
|
338
365
|
loading="eager"
|
|
366
|
+
{...fieldProps?.heroImage}
|
|
339
367
|
/>
|
|
340
368
|
) : null}
|
|
341
369
|
</>
|
|
@@ -348,7 +376,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
348
376
|
>
|
|
349
377
|
{secondaryCtaPrefix &&
|
|
350
378
|
!secondaryCta?.preDefinedFunctionExecution && (
|
|
351
|
-
<Text
|
|
379
|
+
<Text
|
|
380
|
+
as="span"
|
|
381
|
+
className="body2 mr-1"
|
|
382
|
+
{...fieldProps?.secondaryCtaPrefix}
|
|
383
|
+
>
|
|
352
384
|
{secondaryCtaPrefix}
|
|
353
385
|
</Text>
|
|
354
386
|
)}
|
|
@@ -396,6 +428,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
|
|
|
396
428
|
height={584}
|
|
397
429
|
quality={90}
|
|
398
430
|
loading="eager"
|
|
431
|
+
{...fieldProps?.heroImage}
|
|
399
432
|
/>
|
|
400
433
|
) : null}
|
|
401
434
|
</div>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
|
|
3
3
|
import { CheckPlansProps } from "@shared/types/micro-components";
|
|
4
|
+
import type { FieldProps } from "@shared/types/field-props";
|
|
4
5
|
|
|
5
6
|
export type PrimaryHeroVideo = {
|
|
6
7
|
url?: string;
|
|
@@ -42,4 +43,20 @@ export type PrimaryHeroProps = {
|
|
|
42
43
|
renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
|
|
43
44
|
onModalButtonClick?: (id?: string) => void;
|
|
44
45
|
onImageClick?: () => void;
|
|
46
|
+
/** Extra DOM attribute props, spread onto the respective rendered elements. */
|
|
47
|
+
fieldProps?: FieldProps<
|
|
48
|
+
| "title"
|
|
49
|
+
| "subTitle"
|
|
50
|
+
| "price"
|
|
51
|
+
| "priceSuffix"
|
|
52
|
+
| "priceCallout"
|
|
53
|
+
| "pricingDescription"
|
|
54
|
+
| "pricingDescriptionDisclaimer"
|
|
55
|
+
| "secondaryCtaPrefix"
|
|
56
|
+
| "checklist"
|
|
57
|
+
| "logoLockup"
|
|
58
|
+
| "badgeImage"
|
|
59
|
+
| "heroImage"
|
|
60
|
+
| "heroVideo"
|
|
61
|
+
>;
|
|
45
62
|
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generic extension point letting a consumer attach extra DOM attributes
|
|
3
|
+
* (e.g. for visual-editor tagging, analytics, testing) to specific named
|
|
4
|
+
* regions of a component, without this library knowing what those
|
|
5
|
+
* attributes mean or where they come from.
|
|
6
|
+
*/
|
|
7
|
+
export type FieldProps<TSlot extends string> = Partial<
|
|
8
|
+
Record<TSlot, Record<string, unknown>>
|
|
9
|
+
>;
|