@windstream/react-shared-components 0.1.75 → 0.1.77

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