@windstream/react-shared-components 0.0.87 → 0.0.88

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 (141) hide show
  1. package/README.md +635 -635
  2. package/dist/contentful/index.d.ts +9 -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 +3 -3
  8. package/dist/index.d.ts +4 -4
  9. package/dist/index.js.map +1 -1
  10. package/package.json +177 -177
  11. package/src/components/accordion/Accordion.stories.tsx +230 -230
  12. package/src/components/accordion/types.ts +10 -10
  13. package/src/components/alert-card/AlertCard.stories.tsx +171 -171
  14. package/src/components/alert-card/index.tsx +32 -32
  15. package/src/components/alert-card/types.ts +9 -9
  16. package/src/components/brand-button/BrandButton.stories.tsx +223 -223
  17. package/src/components/brand-button/helpers.ts +35 -35
  18. package/src/components/brand-button/index.tsx +115 -115
  19. package/src/components/brand-button/types.ts +37 -37
  20. package/src/components/button/Button.stories.tsx +108 -108
  21. package/src/components/button/index.tsx +27 -27
  22. package/src/components/button/types.ts +14 -14
  23. package/src/components/call-button/CallButton.stories.tsx +324 -324
  24. package/src/components/call-button/index.tsx +86 -86
  25. package/src/components/call-button/types.ts +11 -11
  26. package/src/components/checkbox/Checkbox.stories.tsx +247 -247
  27. package/src/components/checkbox/index.tsx +197 -197
  28. package/src/components/checkbox/types.ts +27 -27
  29. package/src/components/checklist/Checklist.stories.tsx +150 -150
  30. package/src/components/checklist/index.tsx +54 -54
  31. package/src/components/checklist/types.ts +9 -9
  32. package/src/components/collapse/Collapse.stories.tsx +255 -255
  33. package/src/components/collapse/index.tsx +46 -46
  34. package/src/components/collapse/types.ts +6 -6
  35. package/src/components/divider/Divider.stories.tsx +205 -205
  36. package/src/components/divider/index.tsx +22 -22
  37. package/src/components/divider/type.ts +3 -3
  38. package/src/components/image/Image.stories.tsx +113 -113
  39. package/src/components/image/index.tsx +25 -25
  40. package/src/components/image/types.ts +40 -40
  41. package/src/components/input/Input.stories.tsx +325 -325
  42. package/src/components/input/index.tsx +177 -177
  43. package/src/components/input/types.ts +37 -37
  44. package/src/components/link/Link.stories.tsx +163 -163
  45. package/src/components/link/types.ts +25 -25
  46. package/src/components/list/List.stories.tsx +272 -272
  47. package/src/components/list/index.tsx +88 -88
  48. package/src/components/list/list-item/index.tsx +38 -38
  49. package/src/components/list/list-item/types.ts +13 -13
  50. package/src/components/list/types.ts +29 -29
  51. package/src/components/material-icon/MaterialIcon.stories.tsx +330 -330
  52. package/src/components/material-icon/constants.ts +97 -97
  53. package/src/components/material-icon/index.tsx +44 -44
  54. package/src/components/material-icon/types.ts +31 -31
  55. package/src/components/modal/Modal.stories.tsx +171 -171
  56. package/src/components/modal/index.tsx +164 -164
  57. package/src/components/modal/types.ts +24 -24
  58. package/src/components/next-image/index.tsx +32 -32
  59. package/src/components/next-image/types.ts +1 -1
  60. package/src/components/radio-button/RadioButton.stories.tsx +307 -307
  61. package/src/components/radio-button/index.tsx +75 -75
  62. package/src/components/radio-button/types.ts +21 -21
  63. package/src/components/see-more/SeeMore.stories.tsx +181 -181
  64. package/src/components/see-more/index.tsx +44 -44
  65. package/src/components/see-more/types.ts +4 -4
  66. package/src/components/select/Select.stories.tsx +411 -411
  67. package/src/components/select/index.tsx +150 -150
  68. package/src/components/select/types.ts +35 -35
  69. package/src/components/select-plan-button/SelectPlanButton.stories.tsx +184 -184
  70. package/src/components/select-plan-button/index.tsx +31 -31
  71. package/src/components/select-plan-button/types.ts +5 -5
  72. package/src/components/skeleton/Skeleton.stories.tsx +179 -179
  73. package/src/components/skeleton/index.tsx +61 -61
  74. package/src/components/skeleton/types.ts +4 -4
  75. package/src/components/spinner/Spinner.stories.tsx +335 -335
  76. package/src/components/spinner/index.tsx +44 -44
  77. package/src/components/spinner/types.ts +5 -5
  78. package/src/components/text/Text.stories.tsx +321 -321
  79. package/src/components/text/index.tsx +25 -25
  80. package/src/components/text/types.ts +45 -45
  81. package/src/components/tooltip/Tooltip.stories.tsx +219 -219
  82. package/src/components/tooltip/index.tsx +74 -74
  83. package/src/components/tooltip/types.ts +7 -7
  84. package/src/components/view-cart-button/ViewCartButton.stories.tsx +252 -252
  85. package/src/components/view-cart-button/index.tsx +44 -44
  86. package/src/components/view-cart-button/types.ts +5 -5
  87. package/src/contentful/blocks/button/Button.stories.tsx +40 -40
  88. package/src/contentful/blocks/button/index.tsx +99 -85
  89. package/src/contentful/blocks/button/types.ts +31 -26
  90. package/src/contentful/blocks/callout/Callout.stories.tsx +23 -23
  91. package/src/contentful/blocks/callout/index.tsx +66 -66
  92. package/src/contentful/blocks/cards/Cards.stories.tsx +23 -23
  93. package/src/contentful/blocks/cards/index.tsx +13 -13
  94. package/src/contentful/blocks/cards/product-card/index.tsx +199 -199
  95. package/src/contentful/blocks/cards/product-card/types.ts +20 -20
  96. package/src/contentful/blocks/cards/simple-card/index.tsx +77 -77
  97. package/src/contentful/blocks/cards/simple-card/types.ts +31 -31
  98. package/src/contentful/blocks/cards/testimonial-card/index.tsx +88 -88
  99. package/src/contentful/blocks/cards/testimonial-card/types.tsx +12 -12
  100. package/src/contentful/blocks/cards/types.ts +1 -1
  101. package/src/contentful/blocks/carousel/Carousel.stories.tsx +23 -23
  102. package/src/contentful/blocks/carousel/helper.tsx +314 -314
  103. package/src/contentful/blocks/carousel/index.tsx +52 -52
  104. package/src/contentful/blocks/carousel/types.ts +126 -126
  105. package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx +46 -46
  106. package/src/contentful/blocks/cta-callout/index.tsx +54 -54
  107. package/src/contentful/blocks/cta-callout/types.ts +22 -22
  108. package/src/contentful/blocks/find-kinetic/index.tsx +124 -124
  109. package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +34 -34
  110. package/src/contentful/blocks/floating-banner/types.ts +22 -22
  111. package/src/contentful/blocks/footer/Footer.stories.tsx +30 -30
  112. package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx +23 -23
  113. package/src/contentful/blocks/image-promo-bar/index.tsx +11 -2
  114. package/src/contentful/blocks/image-promo-bar/types.ts +31 -27
  115. package/src/contentful/blocks/modal/constants.ts +53 -53
  116. package/src/contentful/blocks/modal/index.tsx +91 -91
  117. package/src/contentful/blocks/modal/types.ts +12 -12
  118. package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +111 -111
  119. package/src/contentful/blocks/navigation/index.tsx +385 -385
  120. package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +80 -80
  121. package/src/contentful/blocks/navigation/types.ts +41 -41
  122. package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
  123. package/src/contentful/blocks/primary-hero/index.tsx +228 -212
  124. package/src/contentful/blocks/primary-hero/types.ts +35 -30
  125. package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx +26 -26
  126. package/src/contentful/blocks/shape-background-wrapper/index.tsx +124 -124
  127. package/src/contentful/blocks/shape-background-wrapper/types.ts +36 -36
  128. package/src/contentful/blocks/text/Text.stories.tsx +23 -23
  129. package/src/contentful/blocks/text/index.tsx +12 -12
  130. package/src/contentful/blocks/text/types.ts +1 -1
  131. package/src/contentful/index.ts +57 -57
  132. package/src/hooks/use-body-scroll-lock.ts +34 -34
  133. package/src/hooks/use-outside-click.ts +17 -17
  134. package/src/index.ts +96 -96
  135. package/src/next/index.ts +5 -5
  136. package/src/setupTests.ts +46 -46
  137. package/src/stories/DocsTemplate.tsx +24 -24
  138. package/src/styles/globals.css +307 -307
  139. package/src/types/global.d.ts +9 -9
  140. package/src/types/micro-components.ts +89 -80
  141. package/src/utils/index.ts +49 -49
@@ -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 = {};