@windstream/react-shared-components 0.1.72 → 0.1.73

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