@windstream/react-shared-components 0.0.48 → 0.0.49
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 +2 -2
- 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/index.d.ts +2 -2
- package/package.json +1 -1
- package/src/contentful/blocks/cta-callout/index.tsx +1 -1
- package/src/contentful/blocks/cta-callout/types.ts +1 -1
- package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +1 -1
- package/src/contentful/blocks/floating-banner/index.tsx +93 -102
- package/src/contentful/blocks/floating-banner/types.ts +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -61,7 +61,7 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
|
|
|
61
61
|
size?: "slim" | "medium" | "large" | undefined;
|
|
62
62
|
label?: string | undefined;
|
|
63
63
|
errorText?: string | undefined;
|
|
64
|
-
prefixIconName?: "
|
|
64
|
+
prefixIconName?: "location_on" | "search" | undefined;
|
|
65
65
|
prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
|
|
66
66
|
prefixIconFill?: boolean | undefined;
|
|
67
67
|
suffixIconFill?: boolean | undefined;
|
|
@@ -331,7 +331,7 @@ type ButtonCustomProps = {
|
|
|
331
331
|
};
|
|
332
332
|
type ButtonProps = ButtonCustomProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className">;
|
|
333
333
|
|
|
334
|
-
declare const BrandButton: React$1.ForwardRefExoticComponent<_shared_components_brand_button_types.ButtonCustomProps & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "
|
|
334
|
+
declare const BrandButton: React$1.ForwardRefExoticComponent<_shared_components_brand_button_types.ButtonCustomProps & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "children"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
335
335
|
|
|
336
336
|
declare const Checklist: React__default.FC<ChecklistProps>;
|
|
337
337
|
|
package/package.json
CHANGED
|
@@ -27,7 +27,7 @@ export const CtaCallout: React.FC<CtaCalloutProps> = ({
|
|
|
27
27
|
return (
|
|
28
28
|
<div className={`${bgColorClasses[background]} component-container`}>
|
|
29
29
|
<div
|
|
30
|
-
className={`${maxWidth ? "mx-auto max-w-120" : ""} flex flex-col
|
|
30
|
+
className={`${maxWidth ? "mx-auto max-w-120" : ""} flex flex-col ${color == "dark" ? "text-text" : "text-white"} px-5 py-16 lg:px-13 lg:py-24`}
|
|
31
31
|
>
|
|
32
32
|
<Text
|
|
33
33
|
as={enableHeading ? "h1" : "h2"}
|
|
@@ -4,7 +4,7 @@ export type CtaCalloutProps = {
|
|
|
4
4
|
title?: string;
|
|
5
5
|
subTitle?: string;
|
|
6
6
|
enableHeading?: boolean;
|
|
7
|
-
color?: "
|
|
7
|
+
color?: "dark" | "light";
|
|
8
8
|
background?: "blue" | "green" | "navy" | "purple" | "white" | "yellow";
|
|
9
9
|
description?: React.ReactNode;
|
|
10
10
|
descriptionAlignment?: "center" | "left" | "right";
|
|
@@ -1,102 +1,93 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { FloatingBannerProps, ThemeKey } from "./types";
|
|
3
|
-
|
|
4
|
-
import { NextImage } from "@shared/components/next-image";
|
|
5
|
-
import { Text } from "@shared/components/text";
|
|
6
|
-
import { Button } from "@shared/contentful/blocks/button";
|
|
7
|
-
|
|
8
|
-
export const FloatingBanner: React.FC<FloatingBannerProps> = ({
|
|
9
|
-
title,
|
|
10
|
-
subtitle,
|
|
11
|
-
description,
|
|
12
|
-
disclaimer,
|
|
13
|
-
icon,
|
|
14
|
-
cta,
|
|
15
|
-
background = "navy",
|
|
16
|
-
color = "white",
|
|
17
|
-
enableHeading,
|
|
18
|
-
maxWidth = true,
|
|
19
|
-
}) => {
|
|
20
|
-
const
|
|
21
|
-
blue: "
|
|
22
|
-
green: "
|
|
23
|
-
yellow: "
|
|
24
|
-
purple: "
|
|
25
|
-
white: "
|
|
26
|
-
navy: "
|
|
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
|
-
</Text>
|
|
95
|
-
</div>
|
|
96
|
-
)}
|
|
97
|
-
</div>
|
|
98
|
-
</div>
|
|
99
|
-
);
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
export default FloatingBanner;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { FloatingBannerProps, ThemeKey } from "./types";
|
|
3
|
+
|
|
4
|
+
import { NextImage } from "@shared/components/next-image";
|
|
5
|
+
import { Text } from "@shared/components/text";
|
|
6
|
+
import { Button } from "@shared/contentful/blocks/button";
|
|
7
|
+
|
|
8
|
+
export const FloatingBanner: React.FC<FloatingBannerProps> = ({
|
|
9
|
+
title,
|
|
10
|
+
subtitle,
|
|
11
|
+
description,
|
|
12
|
+
disclaimer,
|
|
13
|
+
icon,
|
|
14
|
+
cta,
|
|
15
|
+
background = "navy",
|
|
16
|
+
color = "white",
|
|
17
|
+
enableHeading,
|
|
18
|
+
maxWidth = true,
|
|
19
|
+
}) => {
|
|
20
|
+
const bgColorClasses: Record<ThemeKey, string> = {
|
|
21
|
+
blue: "bg-[#07B2E2]",
|
|
22
|
+
green: "bg-[#26B170]",
|
|
23
|
+
yellow: "bg-[#F5FF1E]",
|
|
24
|
+
purple: "bg-[#931D69]",
|
|
25
|
+
white: "bg-white",
|
|
26
|
+
navy: "bg-[#00002D]",
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<div className="component-container">
|
|
31
|
+
<div
|
|
32
|
+
className={`mx-5 my-8 lg:mx-20 lg:my-12 lg:rounded-[40px] xl:mx-auto ${maxWidth ? "max-w-120" : ""}`}
|
|
33
|
+
>
|
|
34
|
+
<div
|
|
35
|
+
className={`flex flex-col rounded-[28px] px-5 py-7 lg:flex-row lg:rounded-[40px] lg:px-16 lg:py-9 ${bgColorClasses[background]} ${color == "dark" ? "text-text" : "text-white"} `}
|
|
36
|
+
>
|
|
37
|
+
{icon && (
|
|
38
|
+
<div className="floating-banner-icon mb-5 flex justify-center lg:mb-0 lg:items-center">
|
|
39
|
+
<div className="h-[80px] w-[80px] overflow-hidden">
|
|
40
|
+
<NextImage
|
|
41
|
+
width={80}
|
|
42
|
+
height={80}
|
|
43
|
+
alt="icon"
|
|
44
|
+
src={icon}
|
|
45
|
+
></NextImage>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
)}
|
|
49
|
+
<div className="flex flex-col justify-center lg:mx-5">
|
|
50
|
+
{title && (
|
|
51
|
+
<Text
|
|
52
|
+
as={enableHeading ? "h1" : "h2"}
|
|
53
|
+
className={`heading2 mb-3 text-center lg:w-[90%] lg:text-left`}
|
|
54
|
+
>
|
|
55
|
+
{title}
|
|
56
|
+
</Text>
|
|
57
|
+
)}
|
|
58
|
+
{subtitle && (
|
|
59
|
+
<Text
|
|
60
|
+
as={"h3"}
|
|
61
|
+
className={`heading3 mb-3 text-center lg:text-left`}
|
|
62
|
+
>
|
|
63
|
+
{subtitle}
|
|
64
|
+
</Text>
|
|
65
|
+
)}
|
|
66
|
+
{description && (
|
|
67
|
+
<Text
|
|
68
|
+
as="div"
|
|
69
|
+
className="body1 text-center lg:w-[90%] lg:text-left"
|
|
70
|
+
>
|
|
71
|
+
{description}
|
|
72
|
+
</Text>
|
|
73
|
+
)}
|
|
74
|
+
</div>
|
|
75
|
+
{cta && (
|
|
76
|
+
<div className="mt-5 flex justify-center lg:mt-0 lg:w-[500px] lg:items-center">
|
|
77
|
+
<Button {...cta}></Button>
|
|
78
|
+
</div>
|
|
79
|
+
)}
|
|
80
|
+
</div>
|
|
81
|
+
{disclaimer && (
|
|
82
|
+
<div>
|
|
83
|
+
<Text as="div" className="body3 mt-3 text-center">
|
|
84
|
+
{disclaimer}
|
|
85
|
+
</Text>
|
|
86
|
+
</div>
|
|
87
|
+
)}
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
);
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
export default FloatingBanner;
|