@windstream/react-shared-components 0.0.97 → 0.0.99

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 (139) hide show
  1. package/README.md +635 -635
  2. package/dist/contentful/index.esm.js +1 -1
  3. package/dist/contentful/index.esm.js.map +1 -1
  4. package/dist/contentful/index.js +1 -1
  5. package/dist/contentful/index.js.map +1 -1
  6. package/dist/index.js.map +1 -1
  7. package/package.json +177 -177
  8. package/src/components/accordion/Accordion.stories.tsx +230 -230
  9. package/src/components/accordion/types.ts +11 -11
  10. package/src/components/alert-card/AlertCard.stories.tsx +171 -171
  11. package/src/components/alert-card/index.tsx +38 -38
  12. package/src/components/alert-card/types.ts +12 -12
  13. package/src/components/brand-button/BrandButton.stories.tsx +223 -223
  14. package/src/components/brand-button/helpers.ts +35 -35
  15. package/src/components/brand-button/index.tsx +115 -115
  16. package/src/components/brand-button/types.ts +37 -37
  17. package/src/components/button/Button.stories.tsx +108 -108
  18. package/src/components/button/index.tsx +27 -27
  19. package/src/components/button/types.ts +14 -14
  20. package/src/components/call-button/CallButton.stories.tsx +324 -324
  21. package/src/components/call-button/index.tsx +86 -86
  22. package/src/components/call-button/types.ts +11 -11
  23. package/src/components/checkbox/Checkbox.stories.tsx +247 -247
  24. package/src/components/checkbox/index.tsx +197 -197
  25. package/src/components/checkbox/types.ts +27 -27
  26. package/src/components/checklist/Checklist.stories.tsx +150 -150
  27. package/src/components/checklist/index.tsx +55 -55
  28. package/src/components/checklist/types.ts +14 -14
  29. package/src/components/collapse/Collapse.stories.tsx +255 -255
  30. package/src/components/collapse/index.tsx +46 -46
  31. package/src/components/collapse/types.ts +6 -6
  32. package/src/components/divider/Divider.stories.tsx +205 -205
  33. package/src/components/divider/index.tsx +22 -22
  34. package/src/components/divider/type.ts +3 -3
  35. package/src/components/image/Image.stories.tsx +113 -113
  36. package/src/components/image/index.tsx +25 -25
  37. package/src/components/image/types.ts +40 -40
  38. package/src/components/input/Input.stories.tsx +325 -325
  39. package/src/components/input/index.tsx +177 -177
  40. package/src/components/input/types.ts +37 -37
  41. package/src/components/link/Link.stories.tsx +163 -163
  42. package/src/components/link/types.ts +25 -25
  43. package/src/components/list/List.stories.tsx +272 -272
  44. package/src/components/list/index.tsx +88 -88
  45. package/src/components/list/list-item/index.tsx +38 -38
  46. package/src/components/list/list-item/types.ts +13 -13
  47. package/src/components/list/types.ts +29 -29
  48. package/src/components/material-icon/MaterialIcon.stories.tsx +322 -322
  49. package/src/components/material-icon/constants.ts +98 -98
  50. package/src/components/material-icon/index.tsx +47 -47
  51. package/src/components/material-icon/types.ts +31 -31
  52. package/src/components/modal/Modal.stories.tsx +171 -171
  53. package/src/components/modal/index.tsx +164 -164
  54. package/src/components/modal/types.ts +24 -24
  55. package/src/components/next-image/index.tsx +32 -32
  56. package/src/components/next-image/types.ts +1 -1
  57. package/src/components/radio-button/RadioButton.stories.tsx +307 -307
  58. package/src/components/radio-button/index.tsx +75 -75
  59. package/src/components/radio-button/types.ts +21 -21
  60. package/src/components/see-more/SeeMore.stories.tsx +181 -181
  61. package/src/components/see-more/index.tsx +44 -44
  62. package/src/components/see-more/types.ts +4 -4
  63. package/src/components/select/Select.stories.tsx +411 -411
  64. package/src/components/select/index.tsx +150 -150
  65. package/src/components/select/types.ts +35 -35
  66. package/src/components/select-plan-button/SelectPlanButton.stories.tsx +184 -184
  67. package/src/components/select-plan-button/index.tsx +57 -57
  68. package/src/components/select-plan-button/types.ts +14 -14
  69. package/src/components/skeleton/Skeleton.stories.tsx +179 -179
  70. package/src/components/skeleton/index.tsx +61 -61
  71. package/src/components/skeleton/types.ts +4 -4
  72. package/src/components/spinner/Spinner.stories.tsx +335 -335
  73. package/src/components/spinner/index.tsx +44 -44
  74. package/src/components/spinner/types.ts +5 -5
  75. package/src/components/text/Text.stories.tsx +321 -321
  76. package/src/components/text/index.tsx +25 -25
  77. package/src/components/text/types.ts +45 -45
  78. package/src/components/tooltip/Tooltip.stories.tsx +219 -219
  79. package/src/components/tooltip/index.tsx +74 -74
  80. package/src/components/tooltip/types.ts +7 -7
  81. package/src/components/view-cart-button/ViewCartButton.stories.tsx +252 -252
  82. package/src/components/view-cart-button/index.tsx +42 -42
  83. package/src/components/view-cart-button/types.ts +5 -5
  84. package/src/contentful/blocks/button/Button.stories.tsx +40 -40
  85. package/src/contentful/blocks/button/index.tsx +107 -107
  86. package/src/contentful/blocks/button/types.ts +34 -34
  87. package/src/contentful/blocks/callout/Callout.stories.tsx +23 -23
  88. package/src/contentful/blocks/callout/index.tsx +66 -66
  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 +206 -206
  92. package/src/contentful/blocks/cards/product-card/types.ts +28 -28
  93. package/src/contentful/blocks/cards/testimonial-card/index.tsx +88 -88
  94. package/src/contentful/blocks/cards/testimonial-card/types.tsx +12 -12
  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/helper.tsx +356 -356
  98. package/src/contentful/blocks/carousel/index.tsx +74 -74
  99. package/src/contentful/blocks/carousel/types.ts +143 -143
  100. package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx +46 -46
  101. package/src/contentful/blocks/cta-callout/index.tsx +60 -60
  102. package/src/contentful/blocks/cta-callout/types.ts +26 -26
  103. package/src/contentful/blocks/find-kinetic/index.tsx +124 -124
  104. package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +34 -34
  105. package/src/contentful/blocks/floating-banner/types.ts +22 -22
  106. package/src/contentful/blocks/footer/Footer.stories.tsx +30 -30
  107. package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx +23 -23
  108. package/src/contentful/blocks/image-promo-bar/helper.tsx +28 -28
  109. package/src/contentful/blocks/image-promo-bar/index.tsx +234 -234
  110. package/src/contentful/blocks/image-promo-bar/types.ts +44 -44
  111. package/src/contentful/blocks/image-promo-bar/vimeo-embed.tsx +93 -93
  112. package/src/contentful/blocks/image-promo-bar/youtube-embed.tsx +46 -46
  113. package/src/contentful/blocks/modal/constants.ts +53 -53
  114. package/src/contentful/blocks/modal/index.tsx +91 -91
  115. package/src/contentful/blocks/modal/types.ts +12 -12
  116. package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +111 -111
  117. package/src/contentful/blocks/navigation/index.tsx +385 -385
  118. package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +80 -80
  119. package/src/contentful/blocks/navigation/types.ts +41 -41
  120. package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
  121. package/src/contentful/blocks/primary-hero/index.tsx +229 -229
  122. package/src/contentful/blocks/primary-hero/types.ts +35 -35
  123. package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx +26 -26
  124. package/src/contentful/blocks/shape-background-wrapper/index.tsx +124 -124
  125. package/src/contentful/blocks/shape-background-wrapper/types.ts +36 -36
  126. package/src/contentful/blocks/text/Text.stories.tsx +23 -23
  127. package/src/contentful/blocks/text/index.tsx +12 -12
  128. package/src/contentful/blocks/text/types.ts +1 -1
  129. package/src/contentful/index.ts +57 -57
  130. package/src/hooks/use-body-scroll-lock.ts +34 -34
  131. package/src/hooks/use-outside-click.ts +17 -17
  132. package/src/index.ts +96 -96
  133. package/src/next/index.ts +5 -5
  134. package/src/setupTests.ts +46 -46
  135. package/src/stories/DocsTemplate.tsx +24 -24
  136. package/src/styles/globals.css +343 -343
  137. package/src/types/global.d.ts +9 -9
  138. package/src/types/micro-components.ts +99 -99
  139. package/src/utils/index.ts +49 -49
@@ -1,88 +1,88 @@
1
- "use client";
2
-
3
- import React, { forwardRef } from "react";
4
- import { cx } from "../../utils";
5
- import { ListItem, ListItemProps } from "./list-item";
6
- import { ListProps } from "./types";
7
-
8
- export const List = forwardRef<HTMLUListElement | HTMLOListElement, ListProps>(
9
- (
10
- {
11
- type = "ul",
12
- items,
13
- className = "",
14
- renderItem,
15
- children,
16
- variant = "unstyled",
17
- style,
18
- ...props
19
- },
20
- ref
21
- ) => {
22
- // Get Tailwind classes for different variants
23
- const getVariantClasses = () => {
24
- if (variant === "unstyled") {
25
- return "";
26
- }
27
-
28
- // TODO: Add styles based on the figma design for all variants
29
- const baseClasses = "m-0 p-0";
30
- const typeClasses =
31
- type === "ol" ? "pl-6 list-decimal" : "pl-5 list-disc";
32
-
33
- return `${baseClasses} ${typeClasses}`;
34
- };
35
-
36
- const tailwindClasses = getVariantClasses();
37
- const combinedClassName = cx(
38
- tailwindClasses,
39
- `list--${type}`,
40
- `list--${variant}`,
41
- className
42
- );
43
-
44
- // Render items if provided
45
- const renderItems = () => {
46
- if (!items || items.length === 0) return null;
47
-
48
- return items.map((item, index) => {
49
- if (renderItem) {
50
- return renderItem(item, index);
51
- }
52
-
53
- return (
54
- <ListItem
55
- key={item.id || index}
56
- className={item.className}
57
- variant={variant}
58
- >
59
- {item.content}
60
- </ListItem>
61
- );
62
- });
63
- };
64
-
65
- const content = children || renderItems();
66
-
67
- // Create props object to avoid duplication
68
- const listProps = {
69
- className: combinedClassName,
70
- style,
71
- ...props,
72
- children: content,
73
- };
74
-
75
- // Return appropriate list type with conditional rendering for proper TypeScript inference
76
- if (type === "ol") {
77
- return <ol {...listProps} ref={ref as React.Ref<HTMLOListElement>} />;
78
- }
79
-
80
- return <ul {...listProps} ref={ref as React.Ref<HTMLUListElement>} />;
81
- }
82
- );
83
-
84
- List.displayName = "List";
85
-
86
- export { ListItem };
87
-
88
- export type { ListProps, ListItemProps };
1
+ "use client";
2
+
3
+ import React, { forwardRef } from "react";
4
+ import { cx } from "../../utils";
5
+ import { ListItem, ListItemProps } from "./list-item";
6
+ import { ListProps } from "./types";
7
+
8
+ export const List = forwardRef<HTMLUListElement | HTMLOListElement, ListProps>(
9
+ (
10
+ {
11
+ type = "ul",
12
+ items,
13
+ className = "",
14
+ renderItem,
15
+ children,
16
+ variant = "unstyled",
17
+ style,
18
+ ...props
19
+ },
20
+ ref
21
+ ) => {
22
+ // Get Tailwind classes for different variants
23
+ const getVariantClasses = () => {
24
+ if (variant === "unstyled") {
25
+ return "";
26
+ }
27
+
28
+ // TODO: Add styles based on the figma design for all variants
29
+ const baseClasses = "m-0 p-0";
30
+ const typeClasses =
31
+ type === "ol" ? "pl-6 list-decimal" : "pl-5 list-disc";
32
+
33
+ return `${baseClasses} ${typeClasses}`;
34
+ };
35
+
36
+ const tailwindClasses = getVariantClasses();
37
+ const combinedClassName = cx(
38
+ tailwindClasses,
39
+ `list--${type}`,
40
+ `list--${variant}`,
41
+ className
42
+ );
43
+
44
+ // Render items if provided
45
+ const renderItems = () => {
46
+ if (!items || items.length === 0) return null;
47
+
48
+ return items.map((item, index) => {
49
+ if (renderItem) {
50
+ return renderItem(item, index);
51
+ }
52
+
53
+ return (
54
+ <ListItem
55
+ key={item.id || index}
56
+ className={item.className}
57
+ variant={variant}
58
+ >
59
+ {item.content}
60
+ </ListItem>
61
+ );
62
+ });
63
+ };
64
+
65
+ const content = children || renderItems();
66
+
67
+ // Create props object to avoid duplication
68
+ const listProps = {
69
+ className: combinedClassName,
70
+ style,
71
+ ...props,
72
+ children: content,
73
+ };
74
+
75
+ // Return appropriate list type with conditional rendering for proper TypeScript inference
76
+ if (type === "ol") {
77
+ return <ol {...listProps} ref={ref as React.Ref<HTMLOListElement>} />;
78
+ }
79
+
80
+ return <ul {...listProps} ref={ref as React.Ref<HTMLUListElement>} />;
81
+ }
82
+ );
83
+
84
+ List.displayName = "List";
85
+
86
+ export { ListItem };
87
+
88
+ export type { ListProps, ListItemProps };
@@ -1,38 +1,38 @@
1
- "use client";
2
-
3
- import { forwardRef } from "react";
4
- import { cx } from "../../../utils";
5
- import { ListItemProps } from "./types";
6
-
7
- export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
8
- (
9
- { children, className = "", variant = "unstyled", style, ...props },
10
- ref
11
- ) => {
12
- // Get Tailwind classes for different variants
13
- const getVariantClasses = () => {
14
- if (variant === "unstyled") return "";
15
-
16
- // TODO: Add styles based on the figma design for all variants
17
- return "mb-1 leading-6";
18
- };
19
-
20
- const tailwindClasses = getVariantClasses();
21
- const combinedClassName = cx(
22
- tailwindClasses,
23
- "list-item",
24
- `list-item--${variant}`,
25
- className
26
- );
27
-
28
- return (
29
- <li ref={ref} className={combinedClassName} style={style} {...props}>
30
- {children}
31
- </li>
32
- );
33
- }
34
- );
35
-
36
- ListItem.displayName = "ListItem";
37
-
38
- export type { ListItemProps };
1
+ "use client";
2
+
3
+ import { forwardRef } from "react";
4
+ import { cx } from "../../../utils";
5
+ import { ListItemProps } from "./types";
6
+
7
+ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
8
+ (
9
+ { children, className = "", variant = "unstyled", style, ...props },
10
+ ref
11
+ ) => {
12
+ // Get Tailwind classes for different variants
13
+ const getVariantClasses = () => {
14
+ if (variant === "unstyled") return "";
15
+
16
+ // TODO: Add styles based on the figma design for all variants
17
+ return "mb-1 leading-6";
18
+ };
19
+
20
+ const tailwindClasses = getVariantClasses();
21
+ const combinedClassName = cx(
22
+ tailwindClasses,
23
+ "list-item",
24
+ `list-item--${variant}`,
25
+ className
26
+ );
27
+
28
+ return (
29
+ <li ref={ref} className={combinedClassName} style={style} {...props}>
30
+ {children}
31
+ </li>
32
+ );
33
+ }
34
+ );
35
+
36
+ ListItem.displayName = "ListItem";
37
+
38
+ export type { ListItemProps };
@@ -1,13 +1,13 @@
1
- import { CSSProperties, LiHTMLAttributes, ReactNode } from "react";
2
- import { ListVariant } from "../types";
3
-
4
- export interface ListItemProps extends LiHTMLAttributes<HTMLLIElement> {
5
- /** Content to render inside the list item */
6
- children: ReactNode;
7
- /** Custom className for the list item */
8
- className?: string;
9
- /** Additional styling options */
10
- variant?: ListVariant;
11
- /** Custom styles */
12
- style?: CSSProperties;
13
- }
1
+ import { CSSProperties, LiHTMLAttributes, ReactNode } from "react";
2
+ import { ListVariant } from "../types";
3
+
4
+ export interface ListItemProps extends LiHTMLAttributes<HTMLLIElement> {
5
+ /** Content to render inside the list item */
6
+ children: ReactNode;
7
+ /** Custom className for the list item */
8
+ className?: string;
9
+ /** Additional styling options */
10
+ variant?: ListVariant;
11
+ /** Custom styles */
12
+ style?: CSSProperties;
13
+ }
@@ -1,29 +1,29 @@
1
- import { CSSProperties, HTMLAttributes, ReactNode } from "react";
2
-
3
- export type ListType = "ul" | "ol";
4
- export type ListVariant = "default" | "unstyled";
5
-
6
- export type ListItem = {
7
- id: string | number;
8
- content: ReactNode;
9
- className?: string;
10
- [key: string]: any;
11
- };
12
-
13
- export interface ListProps
14
- extends Omit<HTMLAttributes<HTMLUListElement | HTMLOListElement>, "type"> {
15
- /** List type - unordered (ul) or ordered (ol) */
16
- type?: ListType;
17
- /** Array of items to render */
18
- items?: ListItem[];
19
- /** Custom className for the list */
20
- className?: string;
21
- /** Custom item renderer function */
22
- renderItem?: (item: ListItem, index: number) => ReactNode;
23
- /** Children to render instead of items */
24
- children?: ReactNode;
25
- /** Additional styling options */
26
- variant?: ListVariant;
27
- /** Custom styles */
28
- style?: CSSProperties;
29
- }
1
+ import { CSSProperties, HTMLAttributes, ReactNode } from "react";
2
+
3
+ export type ListType = "ul" | "ol";
4
+ export type ListVariant = "default" | "unstyled";
5
+
6
+ export type ListItem = {
7
+ id: string | number;
8
+ content: ReactNode;
9
+ className?: string;
10
+ [key: string]: any;
11
+ };
12
+
13
+ export interface ListProps
14
+ extends Omit<HTMLAttributes<HTMLUListElement | HTMLOListElement>, "type"> {
15
+ /** List type - unordered (ul) or ordered (ol) */
16
+ type?: ListType;
17
+ /** Array of items to render */
18
+ items?: ListItem[];
19
+ /** Custom className for the list */
20
+ className?: string;
21
+ /** Custom item renderer function */
22
+ renderItem?: (item: ListItem, index: number) => ReactNode;
23
+ /** Children to render instead of items */
24
+ children?: ReactNode;
25
+ /** Additional styling options */
26
+ variant?: ListVariant;
27
+ /** Custom styles */
28
+ style?: CSSProperties;
29
+ }