@windstream/react-shared-components 0.1.38 → 0.1.41

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 (196) hide show
  1. package/README.md +635 -635
  2. package/dist/contentful/index.d.ts +80 -51
  3. package/dist/contentful/index.esm.js +4 -2
  4. package/dist/contentful/index.esm.js.map +1 -1
  5. package/dist/contentful/index.js +4 -2
  6. package/dist/contentful/index.js.map +1 -1
  7. package/dist/core.d.ts +4 -4
  8. package/dist/index.d.ts +3 -3
  9. package/dist/index.esm.js +7 -5
  10. package/dist/index.esm.js.map +1 -1
  11. package/dist/index.js +7 -5
  12. package/dist/index.js.map +1 -1
  13. package/dist/next/index.esm.js +3 -1
  14. package/dist/next/index.esm.js.map +1 -1
  15. package/dist/next/index.js +3 -1
  16. package/dist/next/index.js.map +1 -1
  17. package/dist/styles.css +1 -1
  18. package/dist/utils/index.d.ts +35 -6
  19. package/dist/utils/index.esm.js +1 -1
  20. package/dist/utils/index.esm.js.map +1 -1
  21. package/dist/utils/index.js +1 -1
  22. package/dist/utils/index.js.map +1 -1
  23. package/package.json +185 -182
  24. package/src/components/accordion/Accordion.stories.tsx +230 -230
  25. package/src/components/accordion/index.tsx +70 -70
  26. package/src/components/accordion/types.ts +12 -12
  27. package/src/components/alert-card/AlertCard.stories.tsx +171 -171
  28. package/src/components/alert-card/index.tsx +41 -41
  29. package/src/components/alert-card/types.ts +13 -13
  30. package/src/components/brand-button/BrandButton.stories.tsx +223 -223
  31. package/src/components/brand-button/helpers.ts +35 -35
  32. package/src/components/brand-button/index.tsx +114 -114
  33. package/src/components/brand-button/types.ts +37 -37
  34. package/src/components/button/Button.stories.tsx +108 -108
  35. package/src/components/button/index.tsx +27 -27
  36. package/src/components/button/types.ts +14 -14
  37. package/src/components/call-button/CallButton.stories.tsx +324 -324
  38. package/src/components/call-button/index.tsx +86 -86
  39. package/src/components/call-button/types.ts +11 -11
  40. package/src/components/checkbox/Checkbox.stories.tsx +247 -247
  41. package/src/components/checkbox/index.tsx +197 -197
  42. package/src/components/checkbox/types.ts +27 -27
  43. package/src/components/checklist/Checklist.stories.tsx +150 -150
  44. package/src/components/checklist/index.tsx +61 -61
  45. package/src/components/checklist/types.ts +17 -17
  46. package/src/components/collapse/Collapse.stories.tsx +255 -255
  47. package/src/components/collapse/index.tsx +46 -46
  48. package/src/components/collapse/types.ts +6 -6
  49. package/src/components/divider/Divider.stories.tsx +205 -205
  50. package/src/components/divider/index.tsx +22 -22
  51. package/src/components/divider/type.ts +3 -3
  52. package/src/components/image/Image.stories.tsx +113 -113
  53. package/src/components/image/index.tsx +25 -25
  54. package/src/components/image/types.ts +40 -40
  55. package/src/components/input/Input.stories.tsx +325 -325
  56. package/src/components/input/index.tsx +177 -177
  57. package/src/components/input/types.ts +37 -37
  58. package/src/components/link/Link.stories.tsx +163 -163
  59. package/src/components/link/index.tsx +109 -109
  60. package/src/components/link/types.ts +25 -25
  61. package/src/components/list/List.stories.tsx +272 -272
  62. package/src/components/list/index.tsx +88 -88
  63. package/src/components/list/list-item/index.tsx +38 -38
  64. package/src/components/list/list-item/types.ts +13 -13
  65. package/src/components/list/types.ts +29 -29
  66. package/src/components/material-icon/MaterialIcon.stories.tsx +322 -322
  67. package/src/components/material-icon/constants.ts +98 -98
  68. package/src/components/material-icon/index.tsx +47 -47
  69. package/src/components/material-icon/types.ts +31 -31
  70. package/src/components/modal/Modal.stories.tsx +171 -171
  71. package/src/components/modal/index.tsx +164 -164
  72. package/src/components/modal/types.ts +24 -24
  73. package/src/components/next-image/index.tsx +54 -54
  74. package/src/components/next-image/types.ts +1 -1
  75. package/src/components/pagination/index.tsx +100 -100
  76. package/src/components/pagination/types.ts +6 -6
  77. package/src/components/radio-button/RadioButton.stories.tsx +307 -307
  78. package/src/components/radio-button/index.tsx +75 -75
  79. package/src/components/radio-button/types.ts +21 -21
  80. package/src/components/see-more/SeeMore.stories.tsx +181 -181
  81. package/src/components/see-more/index.tsx +44 -44
  82. package/src/components/see-more/types.ts +4 -4
  83. package/src/components/select/Select.stories.tsx +411 -411
  84. package/src/components/select/index.tsx +155 -155
  85. package/src/components/select/types.ts +36 -36
  86. package/src/components/select-plan-button/SelectPlanButton.stories.tsx +184 -184
  87. package/src/components/select-plan-button/index.tsx +63 -63
  88. package/src/components/select-plan-button/types.ts +17 -17
  89. package/src/components/skeleton/Skeleton.stories.tsx +179 -179
  90. package/src/components/skeleton/index.tsx +61 -61
  91. package/src/components/skeleton/types.ts +4 -4
  92. package/src/components/spinner/Spinner.stories.tsx +335 -335
  93. package/src/components/spinner/index.tsx +44 -44
  94. package/src/components/spinner/types.ts +5 -5
  95. package/src/components/text/Text.stories.tsx +321 -321
  96. package/src/components/text/index.tsx +25 -25
  97. package/src/components/text/types.ts +45 -45
  98. package/src/components/tooltip/Tooltip.stories.tsx +219 -219
  99. package/src/components/tooltip/index.tsx +74 -74
  100. package/src/components/tooltip/types.ts +7 -7
  101. package/src/components/view-cart-button/ViewCartButton.stories.tsx +252 -252
  102. package/src/components/view-cart-button/index.tsx +42 -42
  103. package/src/components/view-cart-button/types.ts +5 -5
  104. package/src/contentful/blocks/accordion/Accordion.stories.tsx +29 -29
  105. package/src/contentful/blocks/accordion/index.tsx +62 -62
  106. package/src/contentful/blocks/accordion/types.ts +17 -17
  107. package/src/contentful/blocks/address-input-banner/index.tsx +52 -52
  108. package/src/contentful/blocks/address-input-banner/types.ts +14 -14
  109. package/src/contentful/blocks/anchored-bottom-banner/index.tsx +70 -70
  110. package/src/contentful/blocks/anchored-bottom-banner/types.ts +10 -10
  111. package/src/contentful/blocks/blogs-grid/index.tsx +134 -134
  112. package/src/contentful/blocks/blogs-grid/types.ts +26 -26
  113. package/src/contentful/blocks/breadcrumbs/index.tsx +51 -51
  114. package/src/contentful/blocks/breadcrumbs/types.ts +5 -5
  115. package/src/contentful/blocks/button/Button.stories.tsx +40 -40
  116. package/src/contentful/blocks/button/index.tsx +129 -129
  117. package/src/contentful/blocks/button/types.ts +39 -39
  118. package/src/contentful/blocks/callout/Callout.stories.tsx +23 -23
  119. package/src/contentful/blocks/callout/index.tsx +88 -88
  120. package/src/contentful/blocks/callout/types.ts +15 -15
  121. package/src/contentful/blocks/cards/Cards.stories.tsx +23 -23
  122. package/src/contentful/blocks/cards/blog-card/index.tsx +110 -110
  123. package/src/contentful/blocks/cards/blog-card/types.ts +18 -18
  124. package/src/contentful/blocks/cards/index.tsx +13 -13
  125. package/src/contentful/blocks/cards/product-card/index.tsx +251 -251
  126. package/src/contentful/blocks/cards/product-card/types.ts +28 -28
  127. package/src/contentful/blocks/cards/simple-card/index.tsx +89 -89
  128. package/src/contentful/blocks/cards/simple-card/types.ts +28 -28
  129. package/src/contentful/blocks/cards/testimonial-card/index.tsx +90 -90
  130. package/src/contentful/blocks/cards/testimonial-card/types.tsx +12 -12
  131. package/src/contentful/blocks/cards/types.ts +1 -1
  132. package/src/contentful/blocks/carousel/Carousel.stories.tsx +23 -23
  133. package/src/contentful/blocks/carousel/helper.tsx +440 -440
  134. package/src/contentful/blocks/carousel/index.tsx +85 -85
  135. package/src/contentful/blocks/carousel/types.ts +144 -144
  136. package/src/contentful/blocks/comparison-table/index.tsx +27 -27
  137. package/src/contentful/blocks/comparison-table/types.ts +6 -6
  138. package/src/contentful/blocks/cookiebanner/index.tsx +146 -146
  139. package/src/contentful/blocks/cookiebanner/type.ts +7 -7
  140. package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx +46 -46
  141. package/src/contentful/blocks/cta-callout/index.tsx +69 -69
  142. package/src/contentful/blocks/cta-callout/types.ts +26 -26
  143. package/src/contentful/blocks/dynamic-tabs/index.tsx +204 -204
  144. package/src/contentful/blocks/dynamic-tabs/types.ts +21 -21
  145. package/src/contentful/blocks/find-kinetic/FindKinetic.stories.tsx +23 -23
  146. package/src/contentful/blocks/find-kinetic/index.tsx +130 -130
  147. package/src/contentful/blocks/find-kinetic/types.ts +19 -19
  148. package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +34 -34
  149. package/src/contentful/blocks/floating-banner/index.tsx +97 -97
  150. package/src/contentful/blocks/floating-banner/types.ts +22 -22
  151. package/src/contentful/blocks/footer/Footer.stories.tsx +30 -30
  152. package/src/contentful/blocks/footer/index.tsx +90 -90
  153. package/src/contentful/blocks/footer/types.ts +13 -13
  154. package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx +23 -23
  155. package/src/contentful/blocks/image-promo-bar/helper.tsx +28 -28
  156. package/src/contentful/blocks/image-promo-bar/index.tsx +246 -240
  157. package/src/contentful/blocks/image-promo-bar/types.ts +44 -44
  158. package/src/contentful/blocks/image-promo-bar/vimeo-embed.tsx +93 -93
  159. package/src/contentful/blocks/image-promo-bar/youtube-embed.tsx +46 -46
  160. package/src/contentful/blocks/modal/constants.ts +53 -53
  161. package/src/contentful/blocks/modal/index.tsx +107 -103
  162. package/src/contentful/blocks/modal/types.ts +12 -12
  163. package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +113 -113
  164. package/src/contentful/blocks/navigation/index.tsx +394 -394
  165. package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +82 -82
  166. package/src/contentful/blocks/navigation/types.ts +41 -41
  167. package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
  168. package/src/contentful/blocks/primary-hero/index.tsx +241 -234
  169. package/src/contentful/blocks/primary-hero/types.ts +37 -35
  170. package/src/contentful/blocks/search-block/index.tsx +90 -90
  171. package/src/contentful/blocks/search-block/types.ts +15 -15
  172. package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx +26 -26
  173. package/src/contentful/blocks/shape-background-wrapper/index.tsx +124 -124
  174. package/src/contentful/blocks/shape-background-wrapper/types.ts +36 -36
  175. package/src/contentful/blocks/text/Text.stories.tsx +23 -23
  176. package/src/contentful/blocks/text/index.tsx +12 -12
  177. package/src/contentful/blocks/text/types.ts +1 -1
  178. package/src/contentful/index.ts +96 -81
  179. package/src/hooks/contentful/use-contentful-rich-text.tsx +310 -0
  180. package/src/hooks/contentful/use-processed-check-list.ts +63 -0
  181. package/src/hooks/use-body-scroll-lock.ts +34 -34
  182. package/src/hooks/use-carousel-swipe.ts +264 -264
  183. package/src/hooks/use-outside-click.ts +17 -17
  184. package/src/index.ts +101 -101
  185. package/src/next/index.ts +5 -5
  186. package/src/setupTests.ts +46 -46
  187. package/src/stories/DocsTemplate.tsx +24 -24
  188. package/src/styles/globals.css +343 -343
  189. package/src/types/global.d.ts +9 -9
  190. package/src/types/micro-components.ts +99 -99
  191. package/src/types/utm.ts +49 -49
  192. package/src/utils/contentful/to-document.ts +24 -0
  193. package/src/utils/cookie.ts +84 -80
  194. package/src/utils/cx.ts +49 -0
  195. package/src/utils/index.ts +38 -65
  196. package/src/utils/utm.ts +221 -221
@@ -1,82 +1,82 @@
1
- import React from "react";
2
-
3
- import { MaterialIcon } from "@shared/components/material-icon";
4
- import { Button } from "@shared/contentful/blocks/button";
5
- import { ButtonProps as ContentfulButtonProps } from "@shared/contentful/blocks/button/types";
6
-
7
- type ComponentButtonGroup = {
8
- anchorId?: string | null;
9
- title?: string | null;
10
- items?: { items?: ContentfulButtonProps[] | null } | null;
11
- };
12
-
13
- type Link = ContentfulButtonProps | ComponentButtonGroup;
14
-
15
- type LinkGroupsProps = {
16
- link?: Link;
17
- };
18
-
19
- const isButton = (link: Link): link is ContentfulButtonProps => {
20
- // If your group never has `href`, this is a simple and effective guard
21
- return typeof (link as ContentfulButtonProps).href === "string";
22
- };
23
-
24
- export const MobileLinkGroups: React.FC<LinkGroupsProps> = ({ link }) => {
25
- const [isOpen, setIsOpen] = React.useState(false);
26
- if (!link) return null;
27
-
28
- // Single button
29
- if (isButton(link)) {
30
- return (
31
- <Button
32
- key={`submenu-link-btn-${link.anchorId}`}
33
- {...link}
34
- linkClassName="label3 flex items-center w-full h-11 px-4 text-text-link"
35
- linkVariant="unstyled"
36
- />
37
- );
38
- }
39
-
40
- // Group
41
- const { anchorId, title, items } = link;
42
- const subMenu = Array.isArray(items?.items) ? items!.items! : [];
43
-
44
- return (
45
- <>
46
- <Button
47
- onClick={() => setIsOpen(prev => !prev)}
48
- aria-expanded={isOpen}
49
- buttonClassName="label3 flex h-11 w-full items-center px-4"
50
- key={anchorId}
51
- showButtonAs="unstyled"
52
- >
53
- {title ?? null}
54
- <MaterialIcon
55
- weight="200"
56
- size={24}
57
- className="text-icon-secondary group-hover:opacity-50"
58
- name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
59
- />
60
- </Button>
61
- {isOpen && subMenu.length > 0 && <RenderSubMenu items={subMenu} />}
62
- </>
63
- );
64
- };
65
-
66
- const RenderSubMenu: React.FC<{ items: ContentfulButtonProps[] }> = ({
67
- items,
68
- }) => (
69
- <ul key={`submenu-${items.length}`} className="flex flex-col gap-2">
70
- {items.map((site, index) => {
71
- return (
72
- <li key={`submenu-link-${index}`} className="submenu-link">
73
- <Button
74
- {...site}
75
- linkVariant="unstyled"
76
- linkClassName="body3 pl-8 pr-4 flex items-center w-full h-11 text-text-link"
77
- />
78
- </li>
79
- );
80
- })}
81
- </ul>
82
- );
1
+ import React from "react";
2
+
3
+ import { MaterialIcon } from "@shared/components/material-icon";
4
+ import { Button } from "@shared/contentful/blocks/button";
5
+ import { ButtonProps as ContentfulButtonProps } from "@shared/contentful/blocks/button/types";
6
+
7
+ type ComponentButtonGroup = {
8
+ anchorId?: string | null;
9
+ title?: string | null;
10
+ items?: { items?: ContentfulButtonProps[] | null } | null;
11
+ };
12
+
13
+ type Link = ContentfulButtonProps | ComponentButtonGroup;
14
+
15
+ type LinkGroupsProps = {
16
+ link?: Link;
17
+ };
18
+
19
+ const isButton = (link: Link): link is ContentfulButtonProps => {
20
+ // If your group never has `href`, this is a simple and effective guard
21
+ return typeof (link as ContentfulButtonProps).href === "string";
22
+ };
23
+
24
+ export const MobileLinkGroups: React.FC<LinkGroupsProps> = ({ link }) => {
25
+ const [isOpen, setIsOpen] = React.useState(false);
26
+ if (!link) return null;
27
+
28
+ // Single button
29
+ if (isButton(link)) {
30
+ return (
31
+ <Button
32
+ key={`submenu-link-btn-${link.anchorId}`}
33
+ {...link}
34
+ linkClassName="label3 flex items-center w-full h-11 px-4 text-text-link"
35
+ linkVariant="unstyled"
36
+ />
37
+ );
38
+ }
39
+
40
+ // Group
41
+ const { anchorId, title, items } = link;
42
+ const subMenu = Array.isArray(items?.items) ? items!.items! : [];
43
+
44
+ return (
45
+ <>
46
+ <Button
47
+ onClick={() => setIsOpen(prev => !prev)}
48
+ aria-expanded={isOpen}
49
+ buttonClassName="label3 flex h-11 w-full items-center px-4"
50
+ key={anchorId}
51
+ showButtonAs="unstyled"
52
+ >
53
+ {title ?? null}
54
+ <MaterialIcon
55
+ weight="200"
56
+ size={24}
57
+ className="text-icon-secondary group-hover:opacity-50"
58
+ name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
59
+ />
60
+ </Button>
61
+ {isOpen && subMenu.length > 0 && <RenderSubMenu items={subMenu} />}
62
+ </>
63
+ );
64
+ };
65
+
66
+ const RenderSubMenu: React.FC<{ items: ContentfulButtonProps[] }> = ({
67
+ items,
68
+ }) => (
69
+ <ul key={`submenu-${items.length}`} className="flex flex-col gap-2">
70
+ {items.map((site, index) => {
71
+ return (
72
+ <li key={`submenu-link-${index}`} className="submenu-link">
73
+ <Button
74
+ {...site}
75
+ linkVariant="unstyled"
76
+ linkClassName="body3 pl-8 pr-4 flex items-center w-full h-11 text-text-link"
77
+ />
78
+ </li>
79
+ );
80
+ })}
81
+ </ul>
82
+ );
@@ -1,41 +1,41 @@
1
- import React from "react";
2
-
3
- import { Asset, Button, ButtonGroup } from "@shared/types/micro-components";
4
-
5
- type Color = string;
6
-
7
- export interface Navigation {
8
- __typename?: "ComponentNavigation";
9
- primaryNavigationLogo?: Asset;
10
- anchorId?: string;
11
- primaryNavigationLinks?: (Button | ButtonGroup)[];
12
-
13
- supportNavigationLinks?: ButtonGroup[];
14
-
15
- utilityNavigationLinks?: (Button | ButtonGroup)[];
16
-
17
- accountNavigationLinks?: ButtonGroup[]; // limit: 1, but treat as array for consistency
18
-
19
- searchBarIcon?: Asset;
20
- searchBarPlaceholder?: string;
21
-
22
- navigationBackgroundColor?: Color;
23
- utilityNavBackgroundColor?: Color;
24
- utilityNavLinkColor?: Color;
25
-
26
- callNowCtaText?: string;
27
- callNowCtaIcon?: Asset;
28
-
29
- displaySearchBar?: boolean;
30
- displayCallNowCta?: boolean;
31
- displayUtilityNavigation?: boolean;
32
- showCallButton?: boolean;
33
- showMobileSliderMenu?: boolean;
34
- showCallNowCtaInMainNav?: boolean;
35
- invocaPhoneNumberLink?: string;
36
- invocaPhoneNumberDisplayText?: string;
37
- checkPlansJSX?: React.ReactNode;
38
- onSearch?: (query: string) => void;
39
- }
40
-
41
- export type NavigationProps = Navigation;
1
+ import React from "react";
2
+
3
+ import { Asset, Button, ButtonGroup } from "@shared/types/micro-components";
4
+
5
+ type Color = string;
6
+
7
+ export interface Navigation {
8
+ __typename?: "ComponentNavigation";
9
+ primaryNavigationLogo?: Asset;
10
+ anchorId?: string;
11
+ primaryNavigationLinks?: (Button | ButtonGroup)[];
12
+
13
+ supportNavigationLinks?: ButtonGroup[];
14
+
15
+ utilityNavigationLinks?: (Button | ButtonGroup)[];
16
+
17
+ accountNavigationLinks?: ButtonGroup[]; // limit: 1, but treat as array for consistency
18
+
19
+ searchBarIcon?: Asset;
20
+ searchBarPlaceholder?: string;
21
+
22
+ navigationBackgroundColor?: Color;
23
+ utilityNavBackgroundColor?: Color;
24
+ utilityNavLinkColor?: Color;
25
+
26
+ callNowCtaText?: string;
27
+ callNowCtaIcon?: Asset;
28
+
29
+ displaySearchBar?: boolean;
30
+ displayCallNowCta?: boolean;
31
+ displayUtilityNavigation?: boolean;
32
+ showCallButton?: boolean;
33
+ showMobileSliderMenu?: boolean;
34
+ showCallNowCtaInMainNav?: boolean;
35
+ invocaPhoneNumberLink?: string;
36
+ invocaPhoneNumberDisplayText?: string;
37
+ checkPlansJSX?: React.ReactNode;
38
+ onSearch?: (query: string) => void;
39
+ }
40
+
41
+ export type NavigationProps = Navigation;
@@ -1,23 +1,23 @@
1
- import { PrimaryHero } from "./index";
2
-
3
- import { DocsPage } from "@shared/stories/DocsTemplate";
4
- import type { Meta, StoryObj } from "@storybook/react";
5
-
6
- const meta: Meta<typeof PrimaryHero> = {
7
- title: "Contentful Blocks/PrimaryHero",
8
- component: PrimaryHero,
9
- tags: ["autodocs"],
10
- parameters: {
11
- layout: "centered",
12
- docs: {
13
- page: DocsPage,
14
- description: {
15
- component: "Contentful primary hero block.",
16
- },
17
- },
18
- },
19
- args: {},
20
- };
21
- export default meta;
22
- type Story = StoryObj<typeof meta>;
23
- export const Default: Story = {};
1
+ import { PrimaryHero } from "./index";
2
+
3
+ import { DocsPage } from "@shared/stories/DocsTemplate";
4
+ import type { Meta, StoryObj } from "@storybook/react";
5
+
6
+ const meta: Meta<typeof PrimaryHero> = {
7
+ title: "Contentful Blocks/PrimaryHero",
8
+ component: PrimaryHero,
9
+ tags: ["autodocs"],
10
+ parameters: {
11
+ layout: "centered",
12
+ docs: {
13
+ page: DocsPage,
14
+ description: {
15
+ component: "Contentful primary hero block.",
16
+ },
17
+ },
18
+ },
19
+ args: {},
20
+ };
21
+ export default meta;
22
+ type Story = StoryObj<typeof meta>;
23
+ export const Default: Story = {};