@windstream/react-shared-components 0.1.77 → 0.1.78

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