@windstream/react-shared-components 0.1.87 → 0.1.89

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 (211) hide show
  1. package/README.md +635 -635
  2. package/dist/contentful/index.esm.js +3 -3
  3. package/dist/contentful/index.esm.js.map +1 -1
  4. package/dist/contentful/index.js +3 -3
  5. package/dist/contentful/index.js.map +1 -1
  6. package/dist/core.d.ts +2 -2
  7. package/dist/index.d.ts +2 -2
  8. package/dist/index.esm.js +5 -13
  9. package/dist/index.esm.js.map +1 -1
  10. package/dist/index.js +5 -13
  11. package/dist/index.js.map +1 -1
  12. package/dist/next/index.esm.js +2 -2
  13. package/dist/next/index.esm.js.map +1 -1
  14. package/dist/next/index.js +2 -2
  15. package/dist/next/index.js.map +1 -1
  16. package/dist/styles.css +1 -1
  17. package/dist/utils/index.esm.js +1 -1
  18. package/dist/utils/index.esm.js.map +1 -1
  19. package/dist/utils/index.js +1 -1
  20. package/dist/utils/index.js.map +1 -1
  21. package/package.json +185 -185
  22. package/src/components/accordion/Accordion.stories.tsx +230 -230
  23. package/src/components/accordion/index.tsx +70 -70
  24. package/src/components/accordion/types.ts +12 -12
  25. package/src/components/alert-card/AlertCard.stories.tsx +171 -171
  26. package/src/components/alert-card/index.tsx +41 -41
  27. package/src/components/alert-card/types.ts +13 -13
  28. package/src/components/animation-wrapper/index.tsx +129 -129
  29. package/src/components/animation-wrapper/types.ts +11 -11
  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 +120 -120
  33. package/src/components/brand-button/types.ts +38 -38
  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 +106 -106
  39. package/src/components/call-button/types.ts +16 -16
  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 +116 -116
  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 +99 -99
  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 +74 -74
  74. package/src/components/next-image/types.ts +1 -1
  75. package/src/components/pagination/index.tsx +91 -91
  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.mocks.tsx +128 -128
  105. package/src/contentful/blocks/accordion/Accordion.stories.tsx +98 -98
  106. package/src/contentful/blocks/accordion/index.tsx +112 -112
  107. package/src/contentful/blocks/accordion/types.ts +34 -34
  108. package/src/contentful/blocks/address-input-banner/index.tsx +52 -52
  109. package/src/contentful/blocks/address-input-banner/types.ts +14 -14
  110. package/src/contentful/blocks/anchored-bottom-banner/index.tsx +181 -181
  111. package/src/contentful/blocks/anchored-bottom-banner/types.ts +13 -13
  112. package/src/contentful/blocks/blogs-grid/BlogGrid.stories.mocks.tsx +144 -144
  113. package/src/contentful/blocks/blogs-grid/BlogGrid.stories.tsx +156 -156
  114. package/src/contentful/blocks/blogs-grid/index.tsx +134 -134
  115. package/src/contentful/blocks/blogs-grid/types.ts +26 -26
  116. package/src/contentful/blocks/blogs-grid-base/index.tsx +119 -119
  117. package/src/contentful/blocks/blogs-grid-base/types.ts +36 -36
  118. package/src/contentful/blocks/breadcrumbs/BreadcrumbNavigation.stories.tsx +147 -147
  119. package/src/contentful/blocks/breadcrumbs/index.tsx +95 -95
  120. package/src/contentful/blocks/breadcrumbs/types.ts +8 -8
  121. package/src/contentful/blocks/button/Button.stories.tsx +40 -40
  122. package/src/contentful/blocks/button/index.tsx +131 -131
  123. package/src/contentful/blocks/button/types.ts +39 -39
  124. package/src/contentful/blocks/callout/Callout.stories.tsx +23 -23
  125. package/src/contentful/blocks/callout/index.tsx +279 -279
  126. package/src/contentful/blocks/callout/types.ts +78 -78
  127. package/src/contentful/blocks/cards/Cards.stories.tsx +23 -23
  128. package/src/contentful/blocks/cards/blog-card/index.tsx +129 -129
  129. package/src/contentful/blocks/cards/blog-card/types.ts +34 -34
  130. package/src/contentful/blocks/cards/floating-image-card/index.tsx +119 -119
  131. package/src/contentful/blocks/cards/floating-image-card/types.ts +30 -30
  132. package/src/contentful/blocks/cards/full-image-card/index.tsx +130 -130
  133. package/src/contentful/blocks/cards/full-image-card/types.ts +29 -29
  134. package/src/contentful/blocks/cards/index.tsx +13 -13
  135. package/src/contentful/blocks/cards/product-card/index.tsx +251 -251
  136. package/src/contentful/blocks/cards/product-card/types.ts +28 -28
  137. package/src/contentful/blocks/cards/simple-card/index.tsx +325 -325
  138. package/src/contentful/blocks/cards/simple-card/types.ts +71 -71
  139. package/src/contentful/blocks/cards/testimonial-card/index.tsx +90 -90
  140. package/src/contentful/blocks/cards/testimonial-card/types.tsx +12 -12
  141. package/src/contentful/blocks/cards/types.ts +1 -1
  142. package/src/contentful/blocks/carousel/Carousel.stories.tsx +23 -23
  143. package/src/contentful/blocks/carousel/helper.tsx +494 -494
  144. package/src/contentful/blocks/carousel/index.tsx +87 -87
  145. package/src/contentful/blocks/carousel/types.ts +145 -145
  146. package/src/contentful/blocks/cart-retention-banner/index.tsx +109 -105
  147. package/src/contentful/blocks/cart-retention-banner/types.ts +11 -11
  148. package/src/contentful/blocks/comparison-table/index.tsx +29 -29
  149. package/src/contentful/blocks/comparison-table/types.ts +6 -6
  150. package/src/contentful/blocks/cookiebanner/index.tsx +146 -146
  151. package/src/contentful/blocks/cookiebanner/type.ts +7 -7
  152. package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx +46 -46
  153. package/src/contentful/blocks/cta-callout/index.tsx +71 -71
  154. package/src/contentful/blocks/cta-callout/types.ts +26 -26
  155. package/src/contentful/blocks/dynamic-tabs/index.tsx +204 -204
  156. package/src/contentful/blocks/dynamic-tabs/types.ts +21 -21
  157. package/src/contentful/blocks/email-input-block/index.tsx +116 -116
  158. package/src/contentful/blocks/email-input-block/types.ts +16 -16
  159. package/src/contentful/blocks/find-kinetic/FindKinetic.stories.tsx +23 -23
  160. package/src/contentful/blocks/find-kinetic/index.tsx +130 -130
  161. package/src/contentful/blocks/find-kinetic/types.ts +19 -19
  162. package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +34 -34
  163. package/src/contentful/blocks/floating-banner/index.tsx +97 -97
  164. package/src/contentful/blocks/floating-banner/types.ts +22 -22
  165. package/src/contentful/blocks/footer/Footer.stories.tsx +317 -317
  166. package/src/contentful/blocks/footer/index.tsx +91 -91
  167. package/src/contentful/blocks/footer/types.ts +13 -13
  168. package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx +23 -23
  169. package/src/contentful/blocks/image-promo-bar/helper.tsx +28 -28
  170. package/src/contentful/blocks/image-promo-bar/index.tsx +246 -246
  171. package/src/contentful/blocks/image-promo-bar/types.ts +44 -44
  172. package/src/contentful/blocks/image-promo-bar/vimeo-embed.tsx +93 -93
  173. package/src/contentful/blocks/image-promo-bar/youtube-embed.tsx +46 -46
  174. package/src/contentful/blocks/modal/constants.ts +53 -53
  175. package/src/contentful/blocks/modal/index.tsx +107 -107
  176. package/src/contentful/blocks/modal/types.ts +12 -12
  177. package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +139 -139
  178. package/src/contentful/blocks/navigation/index.tsx +568 -568
  179. package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +82 -82
  180. package/src/contentful/blocks/navigation/types.ts +71 -71
  181. package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
  182. package/src/contentful/blocks/primary-hero/index.tsx +236 -236
  183. package/src/contentful/blocks/primary-hero/types.ts +37 -37
  184. package/src/contentful/blocks/search-block/index.tsx +90 -90
  185. package/src/contentful/blocks/search-block/types.ts +15 -15
  186. package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx +26 -26
  187. package/src/contentful/blocks/shape-background-wrapper/index.tsx +124 -124
  188. package/src/contentful/blocks/shape-background-wrapper/types.ts +36 -36
  189. package/src/contentful/blocks/text/Text.stories.tsx +23 -23
  190. package/src/contentful/blocks/text/index.tsx +12 -12
  191. package/src/contentful/blocks/text/types.ts +1 -1
  192. package/src/contentful/index.ts +105 -105
  193. package/src/hooks/contentful/use-contentful-rich-text.tsx +309 -309
  194. package/src/hooks/contentful/use-processed-check-list.ts +63 -63
  195. package/src/hooks/use-body-scroll-lock.ts +34 -34
  196. package/src/hooks/use-carousel-swipe.ts +264 -264
  197. package/src/hooks/use-outside-click.ts +17 -17
  198. package/src/index.ts +107 -107
  199. package/src/next/index.ts +5 -5
  200. package/src/setupTests.ts +46 -46
  201. package/src/stories/DocsTemplate.tsx +24 -24
  202. package/src/styles/globals.css +343 -343
  203. package/src/types/global.d.ts +9 -9
  204. package/src/types/micro-components.ts +99 -99
  205. package/src/types/utm.ts +49 -49
  206. package/src/utils/contentful/to-document.ts +24 -24
  207. package/src/utils/cookie.ts +84 -84
  208. package/src/utils/cx.ts +49 -49
  209. package/src/utils/index.ts +41 -41
  210. package/src/utils/speed-card-bg.ts +24 -24
  211. package/src/utils/utm.ts +221 -221
@@ -1,63 +1,63 @@
1
- import { createElement, useMemo, type ReactNode } from "react";
2
- import { renderContentfulRichText } from "./use-contentful-rich-text";
3
-
4
- import { type Options } from "@contentful/rich-text-react-renderer";
5
- import { MARKS } from "@contentful/rich-text-types";
6
- import { toDocument } from "@shared/utils/contentful/to-document";
7
-
8
- export const label1BoldOptions = {
9
- renderMark: {
10
- [MARKS.BOLD]: (text: ReactNode) =>
11
- createElement("span", { className: "label1" }, text),
12
- },
13
- };
14
-
15
- export interface ProcessedChecklistItem {
16
- title: string;
17
- iconUrl?: string;
18
- anchorId?: string;
19
- }
20
-
21
- // titlesOnly as a boolean parameter with a conditional return type
22
- export function useProcessedChecklist<T extends boolean = false>(
23
- checklistData?: any,
24
- titlesOnly?: T,
25
- richTextOptions?: Options,
26
- richTextClassName?: string
27
- ): T extends true ? string[] : ProcessedChecklistItem[] {
28
- return useMemo(() => {
29
- const rawItems: any[] = checklistData?.list?.items ?? [];
30
-
31
- if (titlesOnly) {
32
- return rawItems.map(
33
- item =>
34
- renderContentfulRichText(
35
- toDocument(item?.checkListTitle ?? ""),
36
- undefined,
37
- richTextClassName,
38
- undefined,
39
- richTextOptions
40
- ) ?? ""
41
- ) as any;
42
- }
43
-
44
- return rawItems.map(item => ({
45
- title:
46
- renderContentfulRichText(
47
- toDocument(item?.checkListTitle ?? ""),
48
- undefined,
49
- richTextClassName,
50
- undefined,
51
- richTextOptions
52
- ) ?? "",
53
- iconUrl: item?.icon?.url ?? undefined,
54
- anchorId: item?.anchorId ?? undefined,
55
- })) as any;
56
- }, [checklistData, titlesOnly, richTextOptions, richTextClassName]) as any;
57
- }
58
-
59
- // Usage:
60
- // Full items
61
- //const items = useProcessedChecklist(checklistData); // ProcessedChecklistItem[]
62
- // Titles only
63
- //const titles = useProcessedChecklist(checklistData, true); // string[]
1
+ import { createElement, useMemo, type ReactNode } from "react";
2
+ import { renderContentfulRichText } from "./use-contentful-rich-text";
3
+
4
+ import { type Options } from "@contentful/rich-text-react-renderer";
5
+ import { MARKS } from "@contentful/rich-text-types";
6
+ import { toDocument } from "@shared/utils/contentful/to-document";
7
+
8
+ export const label1BoldOptions = {
9
+ renderMark: {
10
+ [MARKS.BOLD]: (text: ReactNode) =>
11
+ createElement("span", { className: "label1" }, text),
12
+ },
13
+ };
14
+
15
+ export interface ProcessedChecklistItem {
16
+ title: string;
17
+ iconUrl?: string;
18
+ anchorId?: string;
19
+ }
20
+
21
+ // titlesOnly as a boolean parameter with a conditional return type
22
+ export function useProcessedChecklist<T extends boolean = false>(
23
+ checklistData?: any,
24
+ titlesOnly?: T,
25
+ richTextOptions?: Options,
26
+ richTextClassName?: string
27
+ ): T extends true ? string[] : ProcessedChecklistItem[] {
28
+ return useMemo(() => {
29
+ const rawItems: any[] = checklistData?.list?.items ?? [];
30
+
31
+ if (titlesOnly) {
32
+ return rawItems.map(
33
+ item =>
34
+ renderContentfulRichText(
35
+ toDocument(item?.checkListTitle ?? ""),
36
+ undefined,
37
+ richTextClassName,
38
+ undefined,
39
+ richTextOptions
40
+ ) ?? ""
41
+ ) as any;
42
+ }
43
+
44
+ return rawItems.map(item => ({
45
+ title:
46
+ renderContentfulRichText(
47
+ toDocument(item?.checkListTitle ?? ""),
48
+ undefined,
49
+ richTextClassName,
50
+ undefined,
51
+ richTextOptions
52
+ ) ?? "",
53
+ iconUrl: item?.icon?.url ?? undefined,
54
+ anchorId: item?.anchorId ?? undefined,
55
+ })) as any;
56
+ }, [checklistData, titlesOnly, richTextOptions, richTextClassName]) as any;
57
+ }
58
+
59
+ // Usage:
60
+ // Full items
61
+ //const items = useProcessedChecklist(checklistData); // ProcessedChecklistItem[]
62
+ // Titles only
63
+ //const titles = useProcessedChecklist(checklistData, true); // string[]
@@ -1,34 +1,34 @@
1
- "use client";
2
-
3
- import { useEffect } from "react";
4
-
5
- /**
6
- * A custom hook that locks the body scroll based on the `isOpen` and `hideScrollOnIsOpenFalse` flags.
7
- *
8
- * @param {boolean} isOpen - Determines if the scroll should be locked (hidden).
9
- * @param {boolean} hideScrollOnIsOpenFalse - Determines if the scroll should be reset when `isOpen` is false.
10
- */
11
- function useBodyScrollLock(isOpen: boolean, hideScrollOnIsOpenFalse: boolean) {
12
- useEffect(() => {
13
- if (typeof document === "undefined") return;
14
-
15
- // To avoid content shifting when the scrollbar appears/disappears
16
- const scrollbarWidth =
17
- window.innerWidth - document.documentElement.clientWidth;
18
- document.body.style.marginRight = isOpen ? `${scrollbarWidth}px` : "unset";
19
-
20
- // Set the body overflow style based on the `isOpen` and `hideScrollOnIsOpenFalse` values.
21
- document.body.style.overflow = isOpen
22
- ? "hidden"
23
- : hideScrollOnIsOpenFalse
24
- ? "unset"
25
- : document.body.style.overflow;
26
-
27
- // Cleanup function to reset body overflow when the component unmounts or dependencies change.
28
- return () => {
29
- document.body.style.overflow = "unset";
30
- };
31
- }, [isOpen, hideScrollOnIsOpenFalse]);
32
- }
33
-
34
- export default useBodyScrollLock;
1
+ "use client";
2
+
3
+ import { useEffect } from "react";
4
+
5
+ /**
6
+ * A custom hook that locks the body scroll based on the `isOpen` and `hideScrollOnIsOpenFalse` flags.
7
+ *
8
+ * @param {boolean} isOpen - Determines if the scroll should be locked (hidden).
9
+ * @param {boolean} hideScrollOnIsOpenFalse - Determines if the scroll should be reset when `isOpen` is false.
10
+ */
11
+ function useBodyScrollLock(isOpen: boolean, hideScrollOnIsOpenFalse: boolean) {
12
+ useEffect(() => {
13
+ if (typeof document === "undefined") return;
14
+
15
+ // To avoid content shifting when the scrollbar appears/disappears
16
+ const scrollbarWidth =
17
+ window.innerWidth - document.documentElement.clientWidth;
18
+ document.body.style.marginRight = isOpen ? `${scrollbarWidth}px` : "unset";
19
+
20
+ // Set the body overflow style based on the `isOpen` and `hideScrollOnIsOpenFalse` values.
21
+ document.body.style.overflow = isOpen
22
+ ? "hidden"
23
+ : hideScrollOnIsOpenFalse
24
+ ? "unset"
25
+ : document.body.style.overflow;
26
+
27
+ // Cleanup function to reset body overflow when the component unmounts or dependencies change.
28
+ return () => {
29
+ document.body.style.overflow = "unset";
30
+ };
31
+ }, [isOpen, hideScrollOnIsOpenFalse]);
32
+ }
33
+
34
+ export default useBodyScrollLock;