@windstream/react-shared-components 0.0.66 → 0.0.67

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/contentful/index.d.ts +2 -29
  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/index.d.ts +1 -1
  8. package/dist/index.js.map +1 -1
  9. package/dist/styles.css +1 -1
  10. package/package.json +175 -175
  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 +219 -219
  17. package/src/components/brand-button/helpers.ts +35 -35
  18. package/src/components/brand-button/index.tsx +93 -93
  19. package/src/components/brand-button/types.ts +25 -25
  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 +79 -79
  25. package/src/components/call-button/types.ts +10 -10
  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/collapse/Collapse.stories.tsx +255 -255
  31. package/src/components/collapse/index.tsx +46 -46
  32. package/src/components/collapse/types.ts +6 -6
  33. package/src/components/divider/Divider.stories.tsx +205 -205
  34. package/src/components/divider/index.tsx +22 -22
  35. package/src/components/divider/type.ts +3 -3
  36. package/src/components/image/Image.stories.tsx +113 -113
  37. package/src/components/image/index.tsx +25 -25
  38. package/src/components/image/types.ts +40 -40
  39. package/src/components/input/Input.stories.tsx +325 -325
  40. package/src/components/input/index.tsx +177 -177
  41. package/src/components/input/types.ts +37 -37
  42. package/src/components/link/Link.stories.tsx +163 -163
  43. package/src/components/link/types.ts +25 -25
  44. package/src/components/list/List.stories.tsx +272 -272
  45. package/src/components/list/index.tsx +88 -88
  46. package/src/components/list/list-item/index.tsx +38 -38
  47. package/src/components/list/list-item/types.ts +13 -13
  48. package/src/components/list/types.ts +29 -29
  49. package/src/components/material-icon/MaterialIcon.stories.tsx +330 -330
  50. package/src/components/material-icon/constants.ts +96 -96
  51. package/src/components/material-icon/index.tsx +44 -44
  52. package/src/components/material-icon/types.ts +31 -31
  53. package/src/components/modal/Modal.stories.tsx +171 -171
  54. package/src/components/modal/index.tsx +164 -164
  55. package/src/components/modal/types.ts +24 -24
  56. package/src/components/next-image/index.tsx +32 -32
  57. package/src/components/next-image/types.ts +1 -1
  58. package/src/components/radio-button/RadioButton.stories.tsx +307 -307
  59. package/src/components/radio-button/index.tsx +75 -75
  60. package/src/components/radio-button/types.ts +21 -21
  61. package/src/components/see-more/SeeMore.stories.tsx +181 -181
  62. package/src/components/see-more/index.tsx +44 -44
  63. package/src/components/see-more/types.ts +4 -4
  64. package/src/components/select/Select.stories.tsx +411 -411
  65. package/src/components/select/index.tsx +150 -150
  66. package/src/components/select/types.ts +35 -35
  67. package/src/components/select-plan-button/SelectPlanButton.stories.tsx +184 -184
  68. package/src/components/select-plan-button/index.tsx +31 -31
  69. package/src/components/select-plan-button/types.ts +5 -5
  70. package/src/components/skeleton/Skeleton.stories.tsx +179 -179
  71. package/src/components/skeleton/index.tsx +61 -61
  72. package/src/components/skeleton/types.ts +4 -4
  73. package/src/components/spinner/Spinner.stories.tsx +335 -335
  74. package/src/components/spinner/index.tsx +44 -44
  75. package/src/components/spinner/types.ts +5 -5
  76. package/src/components/text/Text.stories.tsx +321 -321
  77. package/src/components/text/index.tsx +25 -25
  78. package/src/components/text/types.ts +45 -45
  79. package/src/components/tooltip/Tooltip.stories.tsx +219 -219
  80. package/src/components/tooltip/index.tsx +74 -74
  81. package/src/components/tooltip/types.ts +7 -7
  82. package/src/components/view-cart-button/ViewCartButton.stories.tsx +252 -252
  83. package/src/components/view-cart-button/index.tsx +44 -44
  84. package/src/components/view-cart-button/types.ts +5 -5
  85. package/src/contentful/blocks/button/Button.stories.tsx +40 -40
  86. package/src/contentful/blocks/button/index.tsx +64 -64
  87. package/src/contentful/blocks/button/types.ts +24 -24
  88. package/src/contentful/blocks/callout/Callout.stories.tsx +23 -23
  89. package/src/contentful/blocks/cards/Cards.stories.tsx +23 -23
  90. package/src/contentful/blocks/cards/index.tsx +13 -13
  91. package/src/contentful/blocks/cards/product-card/index.tsx +198 -199
  92. package/src/contentful/blocks/cards/product-card/types.ts +18 -18
  93. package/src/contentful/blocks/cards/testimonial-card/index.tsx +86 -88
  94. package/src/contentful/blocks/cards/testimonial-card/types.tsx +10 -10
  95. package/src/contentful/blocks/cards/types.ts +1 -1
  96. package/src/contentful/blocks/carousel/Carousel.stories.tsx +23 -23
  97. package/src/contentful/blocks/carousel/index.tsx +13 -13
  98. package/src/contentful/blocks/carousel/types.ts +1 -1
  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/footer/index.tsx +1 -3
  106. package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx +23 -23
  107. package/src/contentful/blocks/image-promo-bar/types.ts +27 -27
  108. package/src/contentful/blocks/modal/Modal.stories.tsx +23 -23
  109. package/src/contentful/blocks/modal/index.tsx +12 -12
  110. package/src/contentful/blocks/modal/types.ts +1 -1
  111. package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +111 -111
  112. package/src/contentful/blocks/navigation/index.tsx +366 -366
  113. package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +80 -80
  114. package/src/contentful/blocks/navigation/types.ts +39 -39
  115. package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
  116. package/src/contentful/blocks/primary-hero/index.tsx +160 -160
  117. package/src/contentful/blocks/primary-hero/types.ts +30 -30
  118. package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx +26 -26
  119. package/src/contentful/blocks/shape-background-wrapper/index.tsx +124 -124
  120. package/src/contentful/blocks/shape-background-wrapper/types.ts +36 -36
  121. package/src/contentful/blocks/text/Text.stories.tsx +23 -23
  122. package/src/contentful/blocks/text/index.tsx +12 -12
  123. package/src/contentful/blocks/text/types.ts +1 -1
  124. package/src/contentful/index.ts +54 -57
  125. package/src/hooks/use-body-scroll-lock.ts +34 -34
  126. package/src/hooks/use-outside-click.ts +17 -17
  127. package/src/index.ts +96 -96
  128. package/src/next/index.ts +5 -5
  129. package/src/setupTests.ts +46 -46
  130. package/src/stories/DocsTemplate.tsx +24 -24
  131. package/src/styles/globals.css +307 -307
  132. package/src/types/global.d.ts +9 -9
  133. package/src/types/micro-components.ts +80 -80
  134. package/src/utils/index.ts +49 -49
@@ -1,12 +1,12 @@
1
- import { ModalProps } from "./types";
2
-
3
- import { Text } from "@shared/components/text";
4
-
5
- export const Modal: React.FC<{ fields: ModalProps }> = ({ fields }) => {
6
- return (
7
- <div>
8
- <Text>Modal Block</Text>
9
- </div>
10
- );
11
- };
12
- export default Modal;
1
+ import { ModalProps } from "./types";
2
+
3
+ import { Text } from "@shared/components/text";
4
+
5
+ export const Modal: React.FC<{ fields: ModalProps }> = ({ fields }) => {
6
+ return (
7
+ <div>
8
+ <Text>Modal Block</Text>
9
+ </div>
10
+ );
11
+ };
12
+ export default Modal;
@@ -1 +1 @@
1
- export type ModalProps = {};
1
+ export type ModalProps = {};
@@ -1,111 +1,111 @@
1
- import React, { CSSProperties } from "react";
2
-
3
- import { Button as CoreButton } from "@shared/components/button";
4
- import { MaterialIcon } from "@shared/components/material-icon";
5
- import { Text } from "@shared/components/text";
6
- import { Button } from "@shared/contentful/blocks/button";
7
- import { ButtonProps as ContentfulButtonProps } from "@shared/contentful/blocks/button/types";
8
- import { useOutsideClick } from "@shared/hooks/use-outside-click";
9
- import { cx } from "@shared/utils";
10
-
11
- type ComponentButtonGroup = {
12
- anchorId?: string | null;
13
- title?: string | null;
14
- items?: { items?: ContentfulButtonProps[] | null } | null;
15
- };
16
-
17
- type Link = ContentfulButtonProps | ComponentButtonGroup;
18
-
19
- type LinkGroupsProps = {
20
- link?: Link;
21
- anchorName: string;
22
- };
23
-
24
- const isButton = (link: Link): link is ContentfulButtonProps => {
25
- // If your group never has `href`, this is a simple and effective guard
26
- return typeof (link as ContentfulButtonProps).href === "string";
27
- };
28
-
29
- export const DesktopLinkGroups: React.FC<LinkGroupsProps> = ({
30
- link,
31
- anchorName,
32
- }) => {
33
- const [isOpen, setIsOpen] = React.useState(false);
34
-
35
- const ref = React.useRef<HTMLDivElement>(null);
36
- useOutsideClick(ref, () => setIsOpen(false));
37
-
38
- if (!link) return null;
39
-
40
- // Single button
41
- if (isButton(link)) {
42
- return (
43
- <Button
44
- key={`submenu-link-btn-${link.anchorId}`}
45
- {...link}
46
- linkClassName="body3 flex items-center text-text-link h-full"
47
- linkVariant="unstyled"
48
- />
49
- );
50
- }
51
-
52
- // Group
53
- const { anchorId, title, items } = link;
54
- const subMenu = Array.isArray(items?.items) ? items!.items! : [];
55
- const fullAnchorName = `--link-anchor-${anchorName}`;
56
-
57
- return (
58
- <div
59
- className="relative h-full"
60
- style={{ anchorName: fullAnchorName } as CSSProperties}
61
- ref={ref}
62
- >
63
- <CoreButton
64
- onClick={() => setIsOpen(prev => !prev)}
65
- aria-expanded={isOpen}
66
- className="group body3 flex h-full items-center"
67
- key={anchorId}
68
- >
69
- <Text as="span" className="group-hover:underline">
70
- {title ?? null}
71
- </Text>
72
- <MaterialIcon
73
- weight="700"
74
- className="text-icon-info group-hover:opacity-50"
75
- name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
76
- />
77
- </CoreButton>
78
-
79
- <div
80
- className={cx(
81
- "fixed z-10 min-w-44 rounded-xl bg-bg shadow-lg",
82
- "transition-[opacity,transform] ease-out",
83
- isOpen && subMenu.length > 0
84
- ? "pointer-events-auto translate-y-0 opacity-100 duration-75"
85
- : "pointer-events-none -translate-y-2 opacity-0 duration-0"
86
- )}
87
- style={
88
- {
89
- positionAnchor: fullAnchorName,
90
- top: "anchor(bottom)",
91
- right: "anchor(right)",
92
- } as CSSProperties
93
- }
94
- >
95
- <ul className="flex flex-col gap-2 py-2">
96
- {subMenu.map((site, index) => {
97
- return (
98
- <li key={`submenu-link-${index}`} className="submenu-link">
99
- <Button
100
- {...site}
101
- linkVariant="unstyled"
102
- linkClassName="body3 px-4 hover:bg-bg-surface-hover flex items-center w-full h-11 text-text-link"
103
- />
104
- </li>
105
- );
106
- })}
107
- </ul>
108
- </div>
109
- </div>
110
- );
111
- };
1
+ import React, { CSSProperties } from "react";
2
+
3
+ import { Button as CoreButton } from "@shared/components/button";
4
+ import { MaterialIcon } from "@shared/components/material-icon";
5
+ import { Text } from "@shared/components/text";
6
+ import { Button } from "@shared/contentful/blocks/button";
7
+ import { ButtonProps as ContentfulButtonProps } from "@shared/contentful/blocks/button/types";
8
+ import { useOutsideClick } from "@shared/hooks/use-outside-click";
9
+ import { cx } from "@shared/utils";
10
+
11
+ type ComponentButtonGroup = {
12
+ anchorId?: string | null;
13
+ title?: string | null;
14
+ items?: { items?: ContentfulButtonProps[] | null } | null;
15
+ };
16
+
17
+ type Link = ContentfulButtonProps | ComponentButtonGroup;
18
+
19
+ type LinkGroupsProps = {
20
+ link?: Link;
21
+ anchorName: string;
22
+ };
23
+
24
+ const isButton = (link: Link): link is ContentfulButtonProps => {
25
+ // If your group never has `href`, this is a simple and effective guard
26
+ return typeof (link as ContentfulButtonProps).href === "string";
27
+ };
28
+
29
+ export const DesktopLinkGroups: React.FC<LinkGroupsProps> = ({
30
+ link,
31
+ anchorName,
32
+ }) => {
33
+ const [isOpen, setIsOpen] = React.useState(false);
34
+
35
+ const ref = React.useRef<HTMLDivElement>(null);
36
+ useOutsideClick(ref, () => setIsOpen(false));
37
+
38
+ if (!link) return null;
39
+
40
+ // Single button
41
+ if (isButton(link)) {
42
+ return (
43
+ <Button
44
+ key={`submenu-link-btn-${link.anchorId}`}
45
+ {...link}
46
+ linkClassName="body3 flex items-center text-text-link h-full"
47
+ linkVariant="unstyled"
48
+ />
49
+ );
50
+ }
51
+
52
+ // Group
53
+ const { anchorId, title, items } = link;
54
+ const subMenu = Array.isArray(items?.items) ? items!.items! : [];
55
+ const fullAnchorName = `--link-anchor-${anchorName}`;
56
+
57
+ return (
58
+ <div
59
+ className="relative h-full"
60
+ style={{ anchorName: fullAnchorName } as CSSProperties}
61
+ ref={ref}
62
+ >
63
+ <CoreButton
64
+ onClick={() => setIsOpen(prev => !prev)}
65
+ aria-expanded={isOpen}
66
+ className="group body3 flex h-full items-center"
67
+ key={anchorId}
68
+ >
69
+ <Text as="span" className="group-hover:underline">
70
+ {title ?? null}
71
+ </Text>
72
+ <MaterialIcon
73
+ weight="700"
74
+ className="text-icon-info group-hover:opacity-50"
75
+ name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
76
+ />
77
+ </CoreButton>
78
+
79
+ <div
80
+ className={cx(
81
+ "fixed z-10 min-w-44 rounded-xl bg-bg shadow-lg",
82
+ "transition-[opacity,transform] ease-out",
83
+ isOpen && subMenu.length > 0
84
+ ? "pointer-events-auto translate-y-0 opacity-100 duration-75"
85
+ : "pointer-events-none -translate-y-2 opacity-0 duration-0"
86
+ )}
87
+ style={
88
+ {
89
+ positionAnchor: fullAnchorName,
90
+ top: "anchor(bottom)",
91
+ right: "anchor(right)",
92
+ } as CSSProperties
93
+ }
94
+ >
95
+ <ul className="flex flex-col gap-2 py-2">
96
+ {subMenu.map((site, index) => {
97
+ return (
98
+ <li key={`submenu-link-${index}`} className="submenu-link">
99
+ <Button
100
+ {...site}
101
+ linkVariant="unstyled"
102
+ linkClassName="body3 px-4 hover:bg-bg-surface-hover flex items-center w-full h-11 text-text-link"
103
+ />
104
+ </li>
105
+ );
106
+ })}
107
+ </ul>
108
+ </div>
109
+ </div>
110
+ );
111
+ };