@windstream/react-shared-components 0.0.80 → 0.0.81

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