@windstream/react-shared-components 0.2.71 → 0.2.73
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 +13 -1
- package/dist/contentful/index.esm.js +4 -4
- package/dist/contentful/index.esm.js.map +1 -1
- package/dist/contentful/index.js +2 -2
- package/dist/contentful/index.js.map +1 -1
- package/dist/core.d.ts +3 -3
- package/dist/index.d.ts +2 -2
- 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/select-plan-button/index.tsx +2 -2
- package/src/components/select-plan-button/types.ts +1 -1
- package/src/components/video-link/vimeo-embed.test.tsx +14 -0
- package/src/contentful/blocks/anchored-bottom-banner/index.test.tsx +128 -1
- package/src/contentful/blocks/anchored-bottom-banner/index.tsx +39 -28
- package/src/contentful/blocks/anchored-bottom-banner/types.ts +4 -0
- package/src/contentful/blocks/cards/product-card/index.test.tsx +48 -9
- package/src/contentful/blocks/cards/product-card/index.tsx +3 -1
- package/src/contentful/blocks/cards/product-card/types.ts +2 -1
- package/src/contentful/blocks/carousel/helper.test.tsx +43 -2
- package/src/contentful/blocks/carousel/helper.tsx +26 -3
- package/src/contentful/blocks/carousel/index.test.tsx +72 -2
- package/src/contentful/blocks/carousel/index.tsx +10 -1
- package/src/contentful/blocks/carousel/types.ts +12 -0
- package/src/styles/globals.css +3 -0
- package/tailwind.config.cjs +1 -0
|
@@ -22,6 +22,9 @@ export const Carousel: React.FC<CarouselProps> = ({
|
|
|
22
22
|
renderCheckPlans,
|
|
23
23
|
testimonialAutoScroll = true,
|
|
24
24
|
showSwitch = false,
|
|
25
|
+
productCardsRef,
|
|
26
|
+
onProductCardCtaClick,
|
|
27
|
+
enableBusinessSettings = false,
|
|
25
28
|
}) => {
|
|
26
29
|
const baseClass = hasProductCards
|
|
27
30
|
? "px-3 py-9 md:py-20"
|
|
@@ -45,7 +48,11 @@ export const Carousel: React.FC<CarouselProps> = ({
|
|
|
45
48
|
)}
|
|
46
49
|
</div>
|
|
47
50
|
{hasProductCards && (
|
|
48
|
-
<div
|
|
51
|
+
<div
|
|
52
|
+
ref={productCardsRef}
|
|
53
|
+
data-theme={enableBusinessSettings ? "business-rebrand" : undefined}
|
|
54
|
+
className="flex flex-col gap-8"
|
|
55
|
+
>
|
|
49
56
|
{showSwitch && hasProductCards && tabs.length > 1 && (
|
|
50
57
|
<TabSwitch
|
|
51
58
|
tabs={tabs}
|
|
@@ -60,6 +67,8 @@ export const Carousel: React.FC<CarouselProps> = ({
|
|
|
60
67
|
fields={fields as CarouselWithProductCards}
|
|
61
68
|
activeTab={activeTab}
|
|
62
69
|
tabs={tabs}
|
|
70
|
+
onProductCardCtaClick={onProductCardCtaClick}
|
|
71
|
+
enableBusinessSettings={enableBusinessSettings}
|
|
63
72
|
/>
|
|
64
73
|
)}
|
|
65
74
|
</div>
|
|
@@ -136,6 +136,18 @@ export type CarouselProps = {
|
|
|
136
136
|
testimonialAutoScroll?: boolean;
|
|
137
137
|
onModalButtonClick?: (id?: string) => void;
|
|
138
138
|
renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
|
|
139
|
+
/** Ref attached to the product-card ("speeds list") container so consumers
|
|
140
|
+
* can observe its scroll visibility (e.g. to fire their own view-tracking
|
|
141
|
+
* analytics). Only product-card carousels expose a measurable element. */
|
|
142
|
+
productCardsRef?: React.Ref<HTMLDivElement>;
|
|
143
|
+
/** Fired when a product card's CTA ("Select plan") is clicked, with the
|
|
144
|
+
* Contentful product-card entry and the originating click event. Consumers
|
|
145
|
+
* map this onto their click analytics (e.g. Segment "Site Clicked"). */
|
|
146
|
+
onProductCardCtaClick?: (
|
|
147
|
+
item: ProductCardFields,
|
|
148
|
+
event: React.MouseEvent<HTMLElement>
|
|
149
|
+
) => void;
|
|
150
|
+
enableBusinessSettings?: boolean;
|
|
139
151
|
};
|
|
140
152
|
|
|
141
153
|
export interface TabSwitchProps {
|
package/src/styles/globals.css
CHANGED
|
@@ -104,6 +104,7 @@
|
|
|
104
104
|
--color-bg-fill-brand-hover: #45c187;
|
|
105
105
|
--color-bg-fill-brand-selected: #24a76a;
|
|
106
106
|
--color-bg-fill-brand-supporting: #07b2e2;
|
|
107
|
+
--color-bg-fill-brand-info: #07b2e2;
|
|
107
108
|
--color-bg-fill-brand-tertiary: #931d69;
|
|
108
109
|
--color-bg-fill-translucent: rgba(255, 255, 255, 0.5);
|
|
109
110
|
--color-bg-fill-critical: #d40000;
|
|
@@ -243,6 +244,7 @@
|
|
|
243
244
|
--color-bg-fill-brand-hover: #30aec5;
|
|
244
245
|
--color-bg-fill-brand-selected: #007c93;
|
|
245
246
|
--color-bg-fill-brand-supporting: #40afc9;
|
|
247
|
+
--color-bg-fill-brand-info: #40afc9;
|
|
246
248
|
--color-bg-fill-brand-tertiary: #a33895;
|
|
247
249
|
--color-bg-fill-inverse: #231f20;
|
|
248
250
|
--color-bg-fill-inverse-active: #231f20;
|
|
@@ -300,6 +302,7 @@
|
|
|
300
302
|
--color-bg-fill-brand-selected: #0393ba;
|
|
301
303
|
|
|
302
304
|
--color-bg-fill-brand-supporting: #26b170;
|
|
305
|
+
--color-bg-fill-brand-info: #0393ba;
|
|
303
306
|
|
|
304
307
|
/* Text colors */
|
|
305
308
|
--color-text-brand: #0393ba;
|
package/tailwind.config.cjs
CHANGED
|
@@ -158,6 +158,7 @@ module.exports = {
|
|
|
158
158
|
hover: "var(--color-bg-fill-brand-hover)",
|
|
159
159
|
selected: "var(--color-bg-fill-brand-selected)",
|
|
160
160
|
supporting: "var(--color-bg-fill-brand-supporting)",
|
|
161
|
+
info: "var(--color-bg-fill-brand-info)",
|
|
161
162
|
tertiary: "var(--color-bg-fill-brand-tertiary)",
|
|
162
163
|
},
|
|
163
164
|
critical: {
|