@windstream/react-shared-components 0.1.76 → 0.1.77

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 (198) 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 +2 -2
  5. package/dist/contentful/index.js.map +1 -1
  6. package/dist/core.d.ts +3 -3
  7. package/dist/index.esm.js.map +1 -1
  8. package/dist/index.js.map +1 -1
  9. package/dist/next/index.esm.js.map +1 -1
  10. package/dist/next/index.js.map +1 -1
  11. package/dist/utils/index.esm.js.map +1 -1
  12. package/dist/utils/index.js.map +1 -1
  13. package/package.json +185 -185
  14. package/src/components/accordion/Accordion.stories.tsx +230 -230
  15. package/src/components/accordion/index.tsx +70 -70
  16. package/src/components/accordion/types.ts +12 -12
  17. package/src/components/alert-card/AlertCard.stories.tsx +171 -171
  18. package/src/components/alert-card/index.tsx +41 -41
  19. package/src/components/alert-card/types.ts +13 -13
  20. package/src/components/brand-button/BrandButton.stories.tsx +223 -223
  21. package/src/components/brand-button/helpers.ts +35 -35
  22. package/src/components/brand-button/index.tsx +120 -120
  23. package/src/components/brand-button/types.ts +38 -38
  24. package/src/components/button/Button.stories.tsx +108 -108
  25. package/src/components/button/index.tsx +27 -27
  26. package/src/components/button/types.ts +14 -14
  27. package/src/components/call-button/CallButton.stories.tsx +324 -324
  28. package/src/components/call-button/index.tsx +106 -106
  29. package/src/components/call-button/types.ts +16 -16
  30. package/src/components/checkbox/Checkbox.stories.tsx +247 -247
  31. package/src/components/checkbox/index.tsx +197 -197
  32. package/src/components/checkbox/types.ts +27 -27
  33. package/src/components/checklist/Checklist.stories.tsx +150 -150
  34. package/src/components/checklist/index.tsx +61 -61
  35. package/src/components/checklist/types.ts +17 -17
  36. package/src/components/collapse/Collapse.stories.tsx +255 -255
  37. package/src/components/collapse/index.tsx +46 -46
  38. package/src/components/collapse/types.ts +6 -6
  39. package/src/components/divider/Divider.stories.tsx +205 -205
  40. package/src/components/divider/index.tsx +22 -22
  41. package/src/components/divider/type.ts +3 -3
  42. package/src/components/image/Image.stories.tsx +113 -113
  43. package/src/components/image/index.tsx +25 -25
  44. package/src/components/image/types.ts +40 -40
  45. package/src/components/input/Input.stories.tsx +325 -325
  46. package/src/components/input/index.tsx +177 -177
  47. package/src/components/input/types.ts +37 -37
  48. package/src/components/link/Link.stories.tsx +163 -163
  49. package/src/components/link/index.tsx +116 -116
  50. package/src/components/link/types.ts +25 -25
  51. package/src/components/list/List.stories.tsx +272 -272
  52. package/src/components/list/index.tsx +88 -88
  53. package/src/components/list/list-item/index.tsx +38 -38
  54. package/src/components/list/list-item/types.ts +13 -13
  55. package/src/components/list/types.ts +29 -29
  56. package/src/components/material-icon/MaterialIcon.stories.tsx +322 -322
  57. package/src/components/material-icon/constants.ts +99 -99
  58. package/src/components/material-icon/index.tsx +47 -47
  59. package/src/components/material-icon/types.ts +31 -31
  60. package/src/components/modal/Modal.stories.tsx +171 -171
  61. package/src/components/modal/index.tsx +164 -164
  62. package/src/components/modal/types.ts +24 -24
  63. package/src/components/next-image/index.tsx +74 -74
  64. package/src/components/next-image/types.ts +1 -1
  65. package/src/components/pagination/index.tsx +91 -91
  66. package/src/components/pagination/types.ts +6 -6
  67. package/src/components/radio-button/RadioButton.stories.tsx +307 -307
  68. package/src/components/radio-button/index.tsx +75 -75
  69. package/src/components/radio-button/types.ts +21 -21
  70. package/src/components/see-more/SeeMore.stories.tsx +181 -181
  71. package/src/components/see-more/index.tsx +44 -44
  72. package/src/components/see-more/types.ts +4 -4
  73. package/src/components/select/Select.stories.tsx +411 -411
  74. package/src/components/select/index.tsx +155 -155
  75. package/src/components/select/types.ts +36 -36
  76. package/src/components/select-plan-button/SelectPlanButton.stories.tsx +184 -184
  77. package/src/components/select-plan-button/index.tsx +63 -63
  78. package/src/components/select-plan-button/types.ts +17 -17
  79. package/src/components/skeleton/Skeleton.stories.tsx +179 -179
  80. package/src/components/skeleton/index.tsx +61 -61
  81. package/src/components/skeleton/types.ts +4 -4
  82. package/src/components/spinner/Spinner.stories.tsx +335 -335
  83. package/src/components/spinner/index.tsx +44 -44
  84. package/src/components/spinner/types.ts +5 -5
  85. package/src/components/text/Text.stories.tsx +321 -321
  86. package/src/components/text/index.tsx +25 -25
  87. package/src/components/text/types.ts +45 -45
  88. package/src/components/tooltip/Tooltip.stories.tsx +219 -219
  89. package/src/components/tooltip/index.tsx +74 -74
  90. package/src/components/tooltip/types.ts +7 -7
  91. package/src/components/view-cart-button/ViewCartButton.stories.tsx +252 -252
  92. package/src/components/view-cart-button/index.tsx +42 -42
  93. package/src/components/view-cart-button/types.ts +5 -5
  94. package/src/contentful/blocks/accordion/Accordion.stories.mocks.tsx +128 -128
  95. package/src/contentful/blocks/accordion/Accordion.stories.tsx +98 -98
  96. package/src/contentful/blocks/accordion/index.tsx +112 -112
  97. package/src/contentful/blocks/accordion/types.ts +34 -34
  98. package/src/contentful/blocks/address-input-banner/index.tsx +52 -52
  99. package/src/contentful/blocks/address-input-banner/types.ts +14 -14
  100. package/src/contentful/blocks/anchored-bottom-banner/index.tsx +181 -181
  101. package/src/contentful/blocks/anchored-bottom-banner/types.ts +13 -13
  102. package/src/contentful/blocks/blogs-grid/index.tsx +134 -134
  103. package/src/contentful/blocks/blogs-grid/types.ts +26 -26
  104. package/src/contentful/blocks/blogs-grid-base/index.tsx +119 -119
  105. package/src/contentful/blocks/blogs-grid-base/types.ts +36 -36
  106. package/src/contentful/blocks/breadcrumbs/index.tsx +81 -81
  107. package/src/contentful/blocks/breadcrumbs/types.ts +6 -6
  108. package/src/contentful/blocks/button/Button.stories.tsx +40 -40
  109. package/src/contentful/blocks/button/index.tsx +131 -131
  110. package/src/contentful/blocks/button/types.ts +39 -39
  111. package/src/contentful/blocks/callout/Callout.stories.tsx +23 -23
  112. package/src/contentful/blocks/callout/index.tsx +252 -252
  113. package/src/contentful/blocks/callout/types.ts +68 -68
  114. package/src/contentful/blocks/cards/Cards.stories.tsx +23 -23
  115. package/src/contentful/blocks/cards/blog-card/index.tsx +129 -129
  116. package/src/contentful/blocks/cards/blog-card/types.ts +34 -34
  117. package/src/contentful/blocks/cards/floating-image-card/index.tsx +119 -119
  118. package/src/contentful/blocks/cards/floating-image-card/types.ts +30 -30
  119. package/src/contentful/blocks/cards/full-image-card/index.tsx +130 -130
  120. package/src/contentful/blocks/cards/full-image-card/types.ts +29 -29
  121. package/src/contentful/blocks/cards/index.tsx +13 -13
  122. package/src/contentful/blocks/cards/product-card/index.tsx +251 -251
  123. package/src/contentful/blocks/cards/product-card/types.ts +28 -28
  124. package/src/contentful/blocks/cards/simple-card/index.tsx +325 -325
  125. package/src/contentful/blocks/cards/simple-card/types.ts +71 -71
  126. package/src/contentful/blocks/cards/testimonial-card/index.tsx +90 -90
  127. package/src/contentful/blocks/cards/testimonial-card/types.tsx +12 -12
  128. package/src/contentful/blocks/cards/types.ts +1 -1
  129. package/src/contentful/blocks/carousel/Carousel.stories.tsx +23 -23
  130. package/src/contentful/blocks/carousel/helper.tsx +440 -440
  131. package/src/contentful/blocks/carousel/index.tsx +85 -85
  132. package/src/contentful/blocks/carousel/types.ts +144 -144
  133. package/src/contentful/blocks/cart-retention-banner/index.tsx +105 -105
  134. package/src/contentful/blocks/cart-retention-banner/types.ts +11 -11
  135. package/src/contentful/blocks/comparison-table/index.tsx +29 -29
  136. package/src/contentful/blocks/comparison-table/types.ts +6 -6
  137. package/src/contentful/blocks/cookiebanner/index.tsx +146 -146
  138. package/src/contentful/blocks/cookiebanner/type.ts +7 -7
  139. package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx +46 -46
  140. package/src/contentful/blocks/cta-callout/index.tsx +71 -71
  141. package/src/contentful/blocks/cta-callout/types.ts +26 -26
  142. package/src/contentful/blocks/dynamic-tabs/index.tsx +204 -204
  143. package/src/contentful/blocks/dynamic-tabs/types.ts +21 -21
  144. package/src/contentful/blocks/email-input-block/index.tsx +116 -116
  145. package/src/contentful/blocks/email-input-block/types.ts +16 -16
  146. package/src/contentful/blocks/find-kinetic/FindKinetic.stories.tsx +23 -23
  147. package/src/contentful/blocks/find-kinetic/index.tsx +130 -130
  148. package/src/contentful/blocks/find-kinetic/types.ts +19 -19
  149. package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +34 -34
  150. package/src/contentful/blocks/floating-banner/index.tsx +97 -97
  151. package/src/contentful/blocks/floating-banner/types.ts +22 -22
  152. package/src/contentful/blocks/footer/Footer.stories.tsx +317 -317
  153. package/src/contentful/blocks/footer/index.tsx +91 -91
  154. package/src/contentful/blocks/footer/types.ts +13 -13
  155. package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx +23 -23
  156. package/src/contentful/blocks/image-promo-bar/helper.tsx +28 -28
  157. package/src/contentful/blocks/image-promo-bar/index.tsx +246 -246
  158. package/src/contentful/blocks/image-promo-bar/types.ts +44 -44
  159. package/src/contentful/blocks/image-promo-bar/vimeo-embed.tsx +93 -93
  160. package/src/contentful/blocks/image-promo-bar/youtube-embed.tsx +46 -46
  161. package/src/contentful/blocks/modal/constants.ts +53 -53
  162. package/src/contentful/blocks/modal/index.tsx +107 -107
  163. package/src/contentful/blocks/modal/types.ts +12 -12
  164. package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +139 -139
  165. package/src/contentful/blocks/navigation/index.tsx +567 -567
  166. package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +82 -82
  167. package/src/contentful/blocks/navigation/types.ts +71 -71
  168. package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
  169. package/src/contentful/blocks/primary-hero/index.tsx +236 -236
  170. package/src/contentful/blocks/primary-hero/types.ts +37 -37
  171. package/src/contentful/blocks/search-block/index.tsx +90 -90
  172. package/src/contentful/blocks/search-block/types.ts +15 -15
  173. package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx +26 -26
  174. package/src/contentful/blocks/shape-background-wrapper/index.tsx +124 -124
  175. package/src/contentful/blocks/shape-background-wrapper/types.ts +36 -36
  176. package/src/contentful/blocks/text/Text.stories.tsx +23 -23
  177. package/src/contentful/blocks/text/index.tsx +12 -12
  178. package/src/contentful/blocks/text/types.ts +1 -1
  179. package/src/contentful/index.ts +105 -105
  180. package/src/hooks/contentful/use-contentful-rich-text.tsx +309 -309
  181. package/src/hooks/contentful/use-processed-check-list.ts +63 -63
  182. package/src/hooks/use-body-scroll-lock.ts +34 -34
  183. package/src/hooks/use-carousel-swipe.ts +264 -264
  184. package/src/hooks/use-outside-click.ts +17 -17
  185. package/src/index.ts +101 -101
  186. package/src/next/index.ts +5 -5
  187. package/src/setupTests.ts +46 -46
  188. package/src/stories/DocsTemplate.tsx +24 -24
  189. package/src/styles/globals.css +343 -343
  190. package/src/types/global.d.ts +9 -9
  191. package/src/types/micro-components.ts +99 -99
  192. package/src/types/utm.ts +49 -49
  193. package/src/utils/contentful/to-document.ts +24 -24
  194. package/src/utils/cookie.ts +84 -84
  195. package/src/utils/cx.ts +49 -49
  196. package/src/utils/index.ts +41 -41
  197. package/src/utils/speed-card-bg.ts +24 -24
  198. 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;