@windstream/react-shared-components 0.0.48 → 0.0.51

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.
Files changed (13) hide show
  1. package/dist/contentful/index.d.ts +2 -2
  2. package/dist/contentful/index.esm.js +1 -1
  3. package/dist/contentful/index.esm.js.map +1 -1
  4. package/dist/contentful/index.js +1 -1
  5. package/dist/contentful/index.js.map +1 -1
  6. package/dist/index.d.ts +2 -2
  7. package/package.json +1 -1
  8. package/src/contentful/blocks/accordion/index.tsx +1 -1
  9. package/src/contentful/blocks/cta-callout/index.tsx +1 -1
  10. package/src/contentful/blocks/cta-callout/types.ts +1 -1
  11. package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +1 -1
  12. package/src/contentful/blocks/floating-banner/index.tsx +93 -102
  13. 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?: "search" | "location_on" | undefined;
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>, "children" | "className"> & React$1.RefAttributes<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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@windstream/react-shared-components",
3
- "version": "0.0.48",
3
+ "version": "0.0.51",
4
4
  "type": "module",
5
5
  "description": "Shared React components for Kinetic applications",
6
6
  "main": "dist/index.js",
package/src/contentful/blocks/accordion/index.tsx CHANGED
@@ -37,7 +37,7 @@ export const Accordion: React.FC<AccordionProps> = ({
37
37
  <div key={`item-${index}`}>
38
38
  <AccordionComponent
39
39
  title={item.title}
40
- containerClassName="border-0 border-b-[1px]"
40
+ containerClassName="border-0 border-b-[1px] rounded-none"
41
41
  >
42
42
  <Text>{item.description}</Text>
43
43
  </AccordionComponent>
package/src/contentful/blocks/cta-callout/index.tsx 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 text-${color} px-5 py-16 lg:px-13 lg:py-24`}
30
+ className={`${maxWidth ? "mx-auto max-w-120" : ""} color-${color} 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"}
package/src/contentful/blocks/cta-callout/types.ts CHANGED
@@ -4,7 +4,7 @@ export type CtaCalloutProps = {
4
4
  title?: string;
5
5
  subTitle?: string;
6
6
  enableHeading?: boolean;
7
- color?: "navy" | "white";
7
+ color?: "dark" | "light";
8
8
  background?: "blue" | "green" | "navy" | "purple" | "white" | "yellow";
9
9
  description?: React.ReactNode;
10
10
  descriptionAlignment?: "center" | "left" | "right";
package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx CHANGED
@@ -25,7 +25,7 @@ const meta: Meta<typeof FloatingBanner> = {
25
25
  cta: null,
26
26
  disclaimer: <p>test</p>,
27
27
  background: "green",
28
- color: "white",
28
+ color: "light",
29
29
  maxWidth: true,
30
30
  },
31
31
  };
package/src/contentful/blocks/floating-banner/index.tsx CHANGED
@@ -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 textColorClasses: Record<ThemeKey, string> = {
21
- blue: "text-[#07B2E2]",
22
- green: "text-[#26B170]",
23
- yellow: "text-[#F5FF1E]",
24
- purple: "text-[#931D69]",
25
- white: "text-white",
26
- navy: "text-[#00002D]",
27
- };
28
-
29
- const bgColorClasses: Record<ThemeKey, string> = {
30
- blue: "bg-[#07B2E2]",
31
- green: "bg-[#26B170]",
32
- yellow: "bg-[#F5FF1E]",
33
- purple: "bg-[#931D69]",
34
- white: "bg-white",
35
- navy: "bg-[#00002D]",
36
- };
37
-
38
- return (
39
- <div className="component-container">
40
- <div
41
- className={`mx-5 my-8 lg:mx-20 lg:my-12 lg:rounded-[40px] xl:mx-auto ${maxWidth ? "max-w-120" : ""}`}
42
- >
43
- <div
44
- className={`flex flex-col rounded-[28px] px-5 py-7 lg:flex-row lg:rounded-[40px] lg:px-16 lg:py-9 ${bgColorClasses[background]} ${textColorClasses[color]} `}
45
- >
46
- {icon && (
47
- <div className="floating-banner-icon mb-5 flex justify-center lg:mb-0 lg:items-center">
48
- <div className="h-[80px] w-[80px] overflow-hidden">
49
- <NextImage
50
- width={80}
51
- height={80}
52
- alt="icon"
53
- src={icon}
54
- ></NextImage>
55
- </div>
56
- </div>
57
- )}
58
- <div className="flex flex-col justify-center lg:mx-5">
59
- {title && (
60
- <Text
61
- as={enableHeading ? "h1" : "h2"}
62
- className={`heading2 mb-3 text-center lg:w-[90%] lg:text-left`}
63
- >
64
- {title}
65
- </Text>
66
- )}
67
- {subtitle && (
68
- <Text
69
- as={"h3"}
70
- className={`heading3 mb-3 text-center lg:text-left`}
71
- >
72
- {subtitle}
73
- </Text>
74
- )}
75
- {description && (
76
- <Text
77
- as="div"
78
- className="body1 text-center lg:w-[90%] lg:text-left"
79
- >
80
- {description}
81
- </Text>
82
- )}
83
- </div>
84
- {cta && (
85
- <div className="mt-5 flex justify-center lg:mt-0 lg:w-[500px] lg:items-center">
86
- <Button {...cta}></Button>
87
- </div>
88
- )}
89
- </div>
90
- {disclaimer && (
91
- <div>
92
- <Text as="div" className="body3 mt-3 text-center">
93
- {disclaimer}
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;
package/src/contentful/blocks/floating-banner/types.ts CHANGED
@@ -9,7 +9,7 @@ export type FloatingBannerProps = {
9
9
  cta?: any | null;
10
10
  disclaimer?: React.ReactNode;
11
11
  background?: "green" | "navy" | "white";
12
- color?: "navy" | "white";
12
+ color?: "dark" | "light";
13
13
  maxWidth?: boolean;
14
14
  };
15
15