@windstream/react-shared-components 0.1.79 → 0.1.80

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