@windstream/react-shared-components 0.0.89 → 0.0.91

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 (147) hide show
  1. package/README.md +635 -635
  2. package/dist/contentful/index.d.ts +11 -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 +1 -1
  8. package/dist/index.esm.js +1 -1
  9. package/dist/index.esm.js.map +1 -1
  10. package/dist/index.js +4 -4
  11. package/dist/index.js.map +1 -1
  12. package/dist/styles.css +1 -1
  13. package/package.json +177 -177
  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 +55 -54
  34. package/src/components/checklist/types.ts +14 -9
  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 +98 -98
  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 +42 -42
  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 +99 -99
  92. package/src/contentful/blocks/button/types.ts +31 -31
  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 +21 -20
  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 +349 -314
  106. package/src/contentful/blocks/carousel/index.tsx +68 -52
  107. package/src/contentful/blocks/carousel/types.ts +139 -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/find-kinetic/index.tsx +124 -124
  112. package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +34 -34
  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/helper.tsx +28 -0
  117. package/src/contentful/blocks/image-promo-bar/index.tsx +231 -154
  118. package/src/contentful/blocks/image-promo-bar/types.ts +44 -31
  119. package/src/contentful/blocks/image-promo-bar/vimeo-embed.tsx +93 -0
  120. package/src/contentful/blocks/image-promo-bar/youtube-embed.tsx +46 -0
  121. package/src/contentful/blocks/modal/constants.ts +53 -53
  122. package/src/contentful/blocks/modal/index.tsx +91 -91
  123. package/src/contentful/blocks/modal/types.ts +12 -12
  124. package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +111 -111
  125. package/src/contentful/blocks/navigation/index.tsx +385 -385
  126. package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +80 -80
  127. package/src/contentful/blocks/navigation/types.ts +41 -41
  128. package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
  129. package/src/contentful/blocks/primary-hero/index.tsx +228 -228
  130. package/src/contentful/blocks/primary-hero/types.ts +35 -35
  131. package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx +26 -26
  132. package/src/contentful/blocks/shape-background-wrapper/index.tsx +124 -124
  133. package/src/contentful/blocks/shape-background-wrapper/types.ts +36 -36
  134. package/src/contentful/blocks/text/Text.stories.tsx +23 -23
  135. package/src/contentful/blocks/text/index.tsx +12 -12
  136. package/src/contentful/blocks/text/types.ts +1 -1
  137. package/src/contentful/index.ts +57 -57
  138. package/src/hooks/use-body-scroll-lock.ts +34 -34
  139. package/src/hooks/use-outside-click.ts +17 -17
  140. package/src/index.ts +96 -96
  141. package/src/next/index.ts +5 -5
  142. package/src/setupTests.ts +46 -46
  143. package/src/stories/DocsTemplate.tsx +24 -24
  144. package/src/styles/globals.css +307 -307
  145. package/src/types/global.d.ts +9 -9
  146. package/src/types/micro-components.ts +89 -89
  147. 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
+ }