@windstream/react-shared-components 0.0.92 → 0.0.94

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 (151) hide show
  1. package/README.md +635 -635
  2. package/dist/contentful/index.d.ts +28 -31
  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 -0
  8. package/dist/index.d.ts +4 -3
  9. package/dist/index.esm.js +4 -4
  10. package/dist/index.esm.js.map +1 -1
  11. package/dist/index.js +3 -3
  12. package/dist/index.js.map +1 -1
  13. package/dist/styles.css +1 -1
  14. package/package.json +177 -177
  15. package/src/components/accordion/Accordion.stories.tsx +230 -230
  16. package/src/components/accordion/index.tsx +9 -2
  17. package/src/components/accordion/types.ts +11 -10
  18. package/src/components/alert-card/AlertCard.stories.tsx +171 -171
  19. package/src/components/alert-card/index.tsx +33 -32
  20. package/src/components/alert-card/types.ts +11 -9
  21. package/src/components/brand-button/BrandButton.stories.tsx +223 -223
  22. package/src/components/brand-button/helpers.ts +35 -35
  23. package/src/components/brand-button/index.tsx +115 -115
  24. package/src/components/brand-button/types.ts +37 -37
  25. package/src/components/button/Button.stories.tsx +108 -108
  26. package/src/components/button/index.tsx +27 -27
  27. package/src/components/button/types.ts +14 -14
  28. package/src/components/call-button/CallButton.stories.tsx +324 -324
  29. package/src/components/call-button/index.tsx +86 -86
  30. package/src/components/call-button/types.ts +11 -11
  31. package/src/components/checkbox/Checkbox.stories.tsx +247 -247
  32. package/src/components/checkbox/index.tsx +197 -197
  33. package/src/components/checkbox/types.ts +27 -27
  34. package/src/components/checklist/Checklist.stories.tsx +150 -150
  35. package/src/components/checklist/index.tsx +55 -55
  36. package/src/components/checklist/types.ts +14 -14
  37. package/src/components/collapse/Collapse.stories.tsx +255 -255
  38. package/src/components/collapse/index.tsx +46 -46
  39. package/src/components/collapse/types.ts +6 -6
  40. package/src/components/divider/Divider.stories.tsx +205 -205
  41. package/src/components/divider/index.tsx +22 -22
  42. package/src/components/divider/type.ts +3 -3
  43. package/src/components/image/Image.stories.tsx +113 -113
  44. package/src/components/image/index.tsx +25 -25
  45. package/src/components/image/types.ts +40 -40
  46. package/src/components/input/Input.stories.tsx +325 -325
  47. package/src/components/input/index.tsx +177 -177
  48. package/src/components/input/types.ts +37 -37
  49. package/src/components/link/Link.stories.tsx +163 -163
  50. package/src/components/link/types.ts +25 -25
  51. package/src/components/list/List.stories.tsx +272 -272
  52. package/src/components/list/index.tsx +88 -88
  53. package/src/components/list/list-item/index.tsx +38 -38
  54. package/src/components/list/list-item/types.ts +13 -13
  55. package/src/components/list/types.ts +29 -29
  56. package/src/components/material-icon/MaterialIcon.stories.tsx +322 -330
  57. package/src/components/material-icon/constants.ts +98 -98
  58. package/src/components/material-icon/index.tsx +47 -44
  59. package/src/components/material-icon/types.ts +31 -31
  60. package/src/components/modal/Modal.stories.tsx +171 -171
  61. package/src/components/modal/index.tsx +164 -164
  62. package/src/components/modal/types.ts +24 -24
  63. package/src/components/next-image/index.tsx +32 -32
  64. package/src/components/next-image/types.ts +1 -1
  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 +150 -150
  73. package/src/components/select/types.ts +35 -35
  74. package/src/components/select-plan-button/SelectPlanButton.stories.tsx +184 -184
  75. package/src/components/select-plan-button/index.tsx +31 -31
  76. package/src/components/select-plan-button/types.ts +5 -5
  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/index.tsx +3 -1
  93. package/src/contentful/blocks/button/Button.stories.tsx +40 -40
  94. package/src/contentful/blocks/button/index.tsx +3 -1
  95. package/src/contentful/blocks/button/types.ts +32 -31
  96. package/src/contentful/blocks/callout/Callout.stories.tsx +23 -23
  97. package/src/contentful/blocks/callout/index.tsx +66 -66
  98. package/src/contentful/blocks/cards/Cards.stories.tsx +23 -23
  99. package/src/contentful/blocks/cards/index.tsx +13 -13
  100. package/src/contentful/blocks/cards/product-card/index.tsx +199 -199
  101. package/src/contentful/blocks/cards/product-card/types.ts +21 -21
  102. package/src/contentful/blocks/cards/simple-card/index.tsx +12 -1
  103. package/src/contentful/blocks/cards/simple-card/types.ts +2 -5
  104. package/src/contentful/blocks/cards/testimonial-card/index.tsx +88 -88
  105. package/src/contentful/blocks/cards/testimonial-card/types.tsx +12 -12
  106. package/src/contentful/blocks/cards/types.ts +1 -1
  107. package/src/contentful/blocks/carousel/Carousel.stories.tsx +23 -23
  108. package/src/contentful/blocks/carousel/helper.tsx +348 -349
  109. package/src/contentful/blocks/carousel/index.tsx +68 -68
  110. package/src/contentful/blocks/carousel/types.ts +139 -139
  111. package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx +46 -46
  112. package/src/contentful/blocks/cta-callout/index.tsx +54 -54
  113. package/src/contentful/blocks/cta-callout/types.ts +22 -22
  114. package/src/contentful/blocks/find-kinetic/index.tsx +124 -124
  115. package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +34 -34
  116. package/src/contentful/blocks/floating-banner/types.ts +22 -22
  117. package/src/contentful/blocks/footer/Footer.stories.tsx +30 -30
  118. package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx +23 -23
  119. package/src/contentful/blocks/image-promo-bar/helper.tsx +28 -28
  120. package/src/contentful/blocks/image-promo-bar/index.tsx +231 -231
  121. package/src/contentful/blocks/image-promo-bar/types.ts +44 -44
  122. package/src/contentful/blocks/image-promo-bar/vimeo-embed.tsx +93 -93
  123. package/src/contentful/blocks/image-promo-bar/youtube-embed.tsx +46 -46
  124. package/src/contentful/blocks/modal/constants.ts +53 -53
  125. package/src/contentful/blocks/modal/index.tsx +91 -91
  126. package/src/contentful/blocks/modal/types.ts +12 -12
  127. package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +111 -111
  128. package/src/contentful/blocks/navigation/index.tsx +385 -385
  129. package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +80 -80
  130. package/src/contentful/blocks/navigation/types.ts +41 -41
  131. package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
  132. package/src/contentful/blocks/primary-hero/index.tsx +228 -228
  133. package/src/contentful/blocks/primary-hero/types.ts +35 -35
  134. package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx +26 -26
  135. package/src/contentful/blocks/shape-background-wrapper/index.tsx +124 -124
  136. package/src/contentful/blocks/shape-background-wrapper/types.ts +36 -36
  137. package/src/contentful/blocks/text/Text.stories.tsx +23 -23
  138. package/src/contentful/blocks/text/index.tsx +12 -12
  139. package/src/contentful/blocks/text/types.ts +1 -1
  140. package/src/contentful/index.ts +57 -57
  141. package/src/hooks/use-body-scroll-lock.ts +34 -34
  142. package/src/hooks/use-outside-click.ts +17 -17
  143. package/src/index.ts +96 -96
  144. package/src/next/index.ts +5 -5
  145. package/src/setupTests.ts +46 -46
  146. package/src/stories/DocsTemplate.tsx +24 -24
  147. package/src/styles/globals.css +343 -307
  148. package/src/types/global.d.ts +9 -9
  149. package/src/types/micro-components.ts +89 -89
  150. package/src/utils/index.ts +49 -49
  151. package/tailwind.config.cjs +29 -0
@@ -1,80 +1,80 @@
1
- import React from "react";
2
-
3
- import { MaterialIcon } from "@shared/components/material-icon";
4
- import { Button } from "@shared/contentful/blocks/button";
5
- import { ButtonProps as ContentfulButtonProps } from "@shared/contentful/blocks/button/types";
6
-
7
- type ComponentButtonGroup = {
8
- anchorId?: string | null;
9
- title?: string | null;
10
- items?: { items?: ContentfulButtonProps[] | null } | null;
11
- };
12
-
13
- type Link = ContentfulButtonProps | ComponentButtonGroup;
14
-
15
- type LinkGroupsProps = {
16
- link?: Link;
17
- };
18
-
19
- const isButton = (link: Link): link is ContentfulButtonProps => {
20
- // If your group never has `href`, this is a simple and effective guard
21
- return typeof (link as ContentfulButtonProps).href === "string";
22
- };
23
-
24
- export const MobileLinkGroups: React.FC<LinkGroupsProps> = ({ link }) => {
25
- const [isOpen, setIsOpen] = React.useState(false);
26
- if (!link) return null;
27
-
28
- // Single button
29
- if (isButton(link)) {
30
- return (
31
- <Button
32
- key={`submenu-link-btn-${link.anchorId}`}
33
- {...link}
34
- linkClassName="label3 flex items-center w-full h-11 px-4 text-text-link"
35
- linkVariant="unstyled"
36
- />
37
- );
38
- }
39
-
40
- // Group
41
- const { anchorId, title, items } = link;
42
- const subMenu = Array.isArray(items?.items) ? items!.items! : [];
43
-
44
- return (
45
- <>
46
- <Button
47
- onClick={() => setIsOpen(prev => !prev)}
48
- aria-expanded={isOpen}
49
- buttonClassName="label3 flex h-11 w-full items-center px-4"
50
- key={anchorId}
51
- showButtonAs="unstyled"
52
- >
53
- {title ?? null}
54
- <MaterialIcon
55
- weight="700"
56
- name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
57
- />
58
- </Button>
59
- {isOpen && subMenu.length > 0 && <RenderSubMenu items={subMenu} />}
60
- </>
61
- );
62
- };
63
-
64
- const RenderSubMenu: React.FC<{ items: ContentfulButtonProps[] }> = ({
65
- items,
66
- }) => (
67
- <ul key={`submenu-${items.length}`} className="flex flex-col gap-2">
68
- {items.map((site, index) => {
69
- return (
70
- <li key={`submenu-link-${index}`} className="submenu-link">
71
- <Button
72
- {...site}
73
- linkVariant="unstyled"
74
- linkClassName="body3 pl-8 pr-4 flex items-center w-full h-11 text-text-link"
75
- />
76
- </li>
77
- );
78
- })}
79
- </ul>
80
- );
1
+ import React from "react";
2
+
3
+ import { MaterialIcon } from "@shared/components/material-icon";
4
+ import { Button } from "@shared/contentful/blocks/button";
5
+ import { ButtonProps as ContentfulButtonProps } from "@shared/contentful/blocks/button/types";
6
+
7
+ type ComponentButtonGroup = {
8
+ anchorId?: string | null;
9
+ title?: string | null;
10
+ items?: { items?: ContentfulButtonProps[] | null } | null;
11
+ };
12
+
13
+ type Link = ContentfulButtonProps | ComponentButtonGroup;
14
+
15
+ type LinkGroupsProps = {
16
+ link?: Link;
17
+ };
18
+
19
+ const isButton = (link: Link): link is ContentfulButtonProps => {
20
+ // If your group never has `href`, this is a simple and effective guard
21
+ return typeof (link as ContentfulButtonProps).href === "string";
22
+ };
23
+
24
+ export const MobileLinkGroups: React.FC<LinkGroupsProps> = ({ link }) => {
25
+ const [isOpen, setIsOpen] = React.useState(false);
26
+ if (!link) return null;
27
+
28
+ // Single button
29
+ if (isButton(link)) {
30
+ return (
31
+ <Button
32
+ key={`submenu-link-btn-${link.anchorId}`}
33
+ {...link}
34
+ linkClassName="label3 flex items-center w-full h-11 px-4 text-text-link"
35
+ linkVariant="unstyled"
36
+ />
37
+ );
38
+ }
39
+
40
+ // Group
41
+ const { anchorId, title, items } = link;
42
+ const subMenu = Array.isArray(items?.items) ? items!.items! : [];
43
+
44
+ return (
45
+ <>
46
+ <Button
47
+ onClick={() => setIsOpen(prev => !prev)}
48
+ aria-expanded={isOpen}
49
+ buttonClassName="label3 flex h-11 w-full items-center px-4"
50
+ key={anchorId}
51
+ showButtonAs="unstyled"
52
+ >
53
+ {title ?? null}
54
+ <MaterialIcon
55
+ weight="700"
56
+ name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
57
+ />
58
+ </Button>
59
+ {isOpen && subMenu.length > 0 && <RenderSubMenu items={subMenu} />}
60
+ </>
61
+ );
62
+ };
63
+
64
+ const RenderSubMenu: React.FC<{ items: ContentfulButtonProps[] }> = ({
65
+ items,
66
+ }) => (
67
+ <ul key={`submenu-${items.length}`} className="flex flex-col gap-2">
68
+ {items.map((site, index) => {
69
+ return (
70
+ <li key={`submenu-link-${index}`} className="submenu-link">
71
+ <Button
72
+ {...site}
73
+ linkVariant="unstyled"
74
+ linkClassName="body3 pl-8 pr-4 flex items-center w-full h-11 text-text-link"
75
+ />
76
+ </li>
77
+ );
78
+ })}
79
+ </ul>
80
+ );
@@ -1,41 +1,41 @@
1
- import React from "react";
2
-
3
- import { Asset, Button, ButtonGroup } from "@shared/types/micro-components";
4
-
5
- type Color = string;
6
-
7
- export interface Navigation {
8
- __typename?: "ComponentNavigation";
9
- primaryNavigationLogo?: Asset;
10
- anchorId?: string;
11
- primaryNavigationLinks?: (Button | ButtonGroup)[];
12
-
13
- supportNavigationLinks?: ButtonGroup[];
14
-
15
- utilityNavigationLinks?: (Button | ButtonGroup)[];
16
-
17
- accountNavigationLinks?: ButtonGroup[]; // limit: 1, but treat as array for consistency
18
-
19
- searchBarIcon?: Asset;
20
- searchBarPlaceholder?: string;
21
-
22
- navigationBackgroundColor?: Color;
23
- utilityNavBackgroundColor?: Color;
24
- utilityNavLinkColor?: Color;
25
-
26
- callNowCtaText?: string;
27
- callNowCtaIcon?: Asset;
28
-
29
- displaySearchBar?: boolean;
30
- displayCallNowCta?: boolean;
31
- displayUtilityNavigation?: boolean;
32
- showCallButton?: boolean;
33
- showMobileSliderMenu?: boolean;
34
- showCallNowCtaInMainNav?: boolean;
35
- invocaPhoneNumberLink?: string;
36
- invocaPhoneNumberDisplayText?: string;
37
- checkPlansJSX?: React.ReactNode;
38
- onSearch?: (query: string) => void;
39
- }
40
-
41
- export type NavigationProps = Navigation;
1
+ import React from "react";
2
+
3
+ import { Asset, Button, ButtonGroup } from "@shared/types/micro-components";
4
+
5
+ type Color = string;
6
+
7
+ export interface Navigation {
8
+ __typename?: "ComponentNavigation";
9
+ primaryNavigationLogo?: Asset;
10
+ anchorId?: string;
11
+ primaryNavigationLinks?: (Button | ButtonGroup)[];
12
+
13
+ supportNavigationLinks?: ButtonGroup[];
14
+
15
+ utilityNavigationLinks?: (Button | ButtonGroup)[];
16
+
17
+ accountNavigationLinks?: ButtonGroup[]; // limit: 1, but treat as array for consistency
18
+
19
+ searchBarIcon?: Asset;
20
+ searchBarPlaceholder?: string;
21
+
22
+ navigationBackgroundColor?: Color;
23
+ utilityNavBackgroundColor?: Color;
24
+ utilityNavLinkColor?: Color;
25
+
26
+ callNowCtaText?: string;
27
+ callNowCtaIcon?: Asset;
28
+
29
+ displaySearchBar?: boolean;
30
+ displayCallNowCta?: boolean;
31
+ displayUtilityNavigation?: boolean;
32
+ showCallButton?: boolean;
33
+ showMobileSliderMenu?: boolean;
34
+ showCallNowCtaInMainNav?: boolean;
35
+ invocaPhoneNumberLink?: string;
36
+ invocaPhoneNumberDisplayText?: string;
37
+ checkPlansJSX?: React.ReactNode;
38
+ onSearch?: (query: string) => void;
39
+ }
40
+
41
+ export type NavigationProps = Navigation;
@@ -1,23 +1,23 @@
1
- import { PrimaryHero } from "./index";
2
-
3
- import { DocsPage } from "@shared/stories/DocsTemplate";
4
- import type { Meta, StoryObj } from "@storybook/react";
5
-
6
- const meta: Meta<typeof PrimaryHero> = {
7
- title: "Contentful Blocks/PrimaryHero",
8
- component: PrimaryHero,
9
- tags: ["autodocs"],
10
- parameters: {
11
- layout: "centered",
12
- docs: {
13
- page: DocsPage,
14
- description: {
15
- component: "Contentful primary hero block.",
16
- },
17
- },
18
- },
19
- args: {},
20
- };
21
- export default meta;
22
- type Story = StoryObj<typeof meta>;
23
- export const Default: Story = {};
1
+ import { PrimaryHero } from "./index";
2
+
3
+ import { DocsPage } from "@shared/stories/DocsTemplate";
4
+ import type { Meta, StoryObj } from "@storybook/react";
5
+
6
+ const meta: Meta<typeof PrimaryHero> = {
7
+ title: "Contentful Blocks/PrimaryHero",
8
+ component: PrimaryHero,
9
+ tags: ["autodocs"],
10
+ parameters: {
11
+ layout: "centered",
12
+ docs: {
13
+ page: DocsPage,
14
+ description: {
15
+ component: "Contentful primary hero block.",
16
+ },
17
+ },
18
+ },
19
+ args: {},
20
+ };
21
+ export default meta;
22
+ type Story = StoryObj<typeof meta>;
23
+ export const Default: Story = {};