@windstream/react-shared-components 0.0.81 → 0.0.83

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