@windstream/react-shared-components 0.1.44 → 0.1.45

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