@windstream/react-shared-components 0.1.80 → 0.1.81

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.d.ts +1 -0
  3. package/dist/contentful/index.esm.js +3 -3
  4. package/dist/contentful/index.esm.js.map +1 -1
  5. package/dist/contentful/index.js +3 -3
  6. package/dist/contentful/index.js.map +1 -1
  7. package/dist/core.d.ts +1 -1
  8. package/dist/index.d.ts +1 -1
  9. package/dist/index.js.map +1 -1
  10. package/package.json +185 -185
  11. package/src/components/accordion/Accordion.stories.tsx +230 -230
  12. package/src/components/accordion/index.tsx +70 -70
  13. package/src/components/accordion/types.ts +12 -12
  14. package/src/components/alert-card/AlertCard.stories.tsx +171 -171
  15. package/src/components/alert-card/index.tsx +41 -41
  16. package/src/components/alert-card/types.ts +13 -13
  17. package/src/components/brand-button/BrandButton.stories.tsx +223 -223
  18. package/src/components/brand-button/helpers.ts +35 -35
  19. package/src/components/brand-button/index.tsx +120 -120
  20. package/src/components/brand-button/types.ts +38 -38
  21. package/src/components/button/Button.stories.tsx +108 -108
  22. package/src/components/button/index.tsx +27 -27
  23. package/src/components/button/types.ts +14 -14
  24. package/src/components/call-button/CallButton.stories.tsx +324 -324
  25. package/src/components/call-button/index.tsx +106 -106
  26. package/src/components/call-button/types.ts +16 -16
  27. package/src/components/checkbox/Checkbox.stories.tsx +247 -247
  28. package/src/components/checkbox/index.tsx +197 -197
  29. package/src/components/checkbox/types.ts +27 -27
  30. package/src/components/checklist/Checklist.stories.tsx +150 -150
  31. package/src/components/checklist/index.tsx +61 -61
  32. package/src/components/checklist/types.ts +17 -17
  33. package/src/components/collapse/Collapse.stories.tsx +255 -255
  34. package/src/components/collapse/index.tsx +46 -46
  35. package/src/components/collapse/types.ts +6 -6
  36. package/src/components/divider/Divider.stories.tsx +205 -205
  37. package/src/components/divider/index.tsx +22 -22
  38. package/src/components/divider/type.ts +3 -3
  39. package/src/components/image/Image.stories.tsx +113 -113
  40. package/src/components/image/index.tsx +25 -25
  41. package/src/components/image/types.ts +40 -40
  42. package/src/components/input/Input.stories.tsx +325 -325
  43. package/src/components/input/index.tsx +177 -177
  44. package/src/components/input/types.ts +37 -37
  45. package/src/components/link/Link.stories.tsx +163 -163
  46. package/src/components/link/index.tsx +116 -116
  47. package/src/components/link/types.ts +25 -25
  48. package/src/components/list/List.stories.tsx +272 -272
  49. package/src/components/list/index.tsx +88 -88
  50. package/src/components/list/list-item/index.tsx +38 -38
  51. package/src/components/list/list-item/types.ts +13 -13
  52. package/src/components/list/types.ts +29 -29
  53. package/src/components/material-icon/MaterialIcon.stories.tsx +322 -322
  54. package/src/components/material-icon/constants.ts +99 -99
  55. package/src/components/material-icon/index.tsx +47 -47
  56. package/src/components/material-icon/types.ts +31 -31
  57. package/src/components/modal/Modal.stories.tsx +171 -171
  58. package/src/components/modal/index.tsx +164 -164
  59. package/src/components/modal/types.ts +24 -24
  60. package/src/components/next-image/index.tsx +74 -74
  61. package/src/components/next-image/types.ts +1 -1
  62. package/src/components/pagination/index.tsx +91 -91
  63. package/src/components/pagination/types.ts +6 -6
  64. package/src/components/radio-button/RadioButton.stories.tsx +307 -307
  65. package/src/components/radio-button/index.tsx +75 -75
  66. package/src/components/radio-button/types.ts +21 -21
  67. package/src/components/see-more/SeeMore.stories.tsx +181 -181
  68. package/src/components/see-more/index.tsx +44 -44
  69. package/src/components/see-more/types.ts +4 -4
  70. package/src/components/select/Select.stories.tsx +411 -411
  71. package/src/components/select/index.tsx +155 -155
  72. package/src/components/select/types.ts +36 -36
  73. package/src/components/select-plan-button/SelectPlanButton.stories.tsx +184 -184
  74. package/src/components/select-plan-button/index.tsx +63 -63
  75. package/src/components/select-plan-button/types.ts +17 -17
  76. package/src/components/skeleton/Skeleton.stories.tsx +179 -179
  77. package/src/components/skeleton/index.tsx +61 -61
  78. package/src/components/skeleton/types.ts +4 -4
  79. package/src/components/spinner/Spinner.stories.tsx +335 -335
  80. package/src/components/spinner/index.tsx +44 -44
  81. package/src/components/spinner/types.ts +5 -5
  82. package/src/components/text/Text.stories.tsx +321 -321
  83. package/src/components/text/index.tsx +25 -25
  84. package/src/components/text/types.ts +45 -45
  85. package/src/components/tooltip/Tooltip.stories.tsx +219 -219
  86. package/src/components/tooltip/index.tsx +74 -74
  87. package/src/components/tooltip/types.ts +7 -7
  88. package/src/components/view-cart-button/ViewCartButton.stories.tsx +252 -252
  89. package/src/components/view-cart-button/index.tsx +42 -42
  90. package/src/components/view-cart-button/types.ts +5 -5
  91. package/src/contentful/blocks/accordion/Accordion.stories.mocks.tsx +128 -128
  92. package/src/contentful/blocks/accordion/Accordion.stories.tsx +98 -98
  93. package/src/contentful/blocks/accordion/index.tsx +112 -112
  94. package/src/contentful/blocks/accordion/types.ts +34 -34
  95. package/src/contentful/blocks/address-input-banner/index.tsx +52 -52
  96. package/src/contentful/blocks/address-input-banner/types.ts +14 -14
  97. package/src/contentful/blocks/anchored-bottom-banner/index.tsx +181 -181
  98. package/src/contentful/blocks/anchored-bottom-banner/types.ts +13 -13
  99. package/src/contentful/blocks/blogs-grid/BlogGrid.stories.mocks.tsx +144 -144
  100. package/src/contentful/blocks/blogs-grid/BlogGrid.stories.tsx +156 -156
  101. package/src/contentful/blocks/blogs-grid/index.tsx +134 -134
  102. package/src/contentful/blocks/blogs-grid/types.ts +26 -26
  103. package/src/contentful/blocks/blogs-grid-base/index.tsx +119 -119
  104. package/src/contentful/blocks/blogs-grid-base/types.ts +36 -36
  105. package/src/contentful/blocks/breadcrumbs/BreadcrumbNavigation.stories.tsx +147 -147
  106. package/src/contentful/blocks/breadcrumbs/index.tsx +95 -95
  107. package/src/contentful/blocks/breadcrumbs/types.ts +8 -8
  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 +265 -265
  113. package/src/contentful/blocks/callout/types.ts +72 -72
  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 +494 -440
  131. package/src/contentful/blocks/carousel/index.tsx +87 -85
  132. package/src/contentful/blocks/carousel/types.ts +145 -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 +568 -568
  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;