@windstream/react-shared-components 0.0.83 → 0.0.86

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 (145) hide show
  1. package/README.md +629 -629
  2. package/dist/contentful/index.d.ts +11 -4
  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 +3 -3
  8. package/dist/index.d.ts +4 -4
  9. package/dist/index.esm.js +2 -2
  10. package/dist/index.esm.js.map +1 -1
  11. package/dist/index.js +2 -2
  12. package/dist/index.js.map +1 -1
  13. package/dist/styles.css +1 -1
  14. package/package.json +177 -175
  15. package/src/components/accordion/Accordion.stories.tsx +230 -230
  16. package/src/components/accordion/types.ts +10 -10
  17. package/src/components/alert-card/AlertCard.stories.tsx +171 -171
  18. package/src/components/alert-card/index.tsx +32 -32
  19. package/src/components/alert-card/types.ts +9 -9
  20. package/src/components/brand-button/BrandButton.stories.tsx +223 -223
  21. package/src/components/brand-button/helpers.ts +35 -35
  22. package/src/components/brand-button/index.tsx +115 -115
  23. package/src/components/brand-button/types.ts +37 -37
  24. package/src/components/button/Button.stories.tsx +108 -108
  25. package/src/components/button/index.tsx +27 -27
  26. package/src/components/button/types.ts +14 -14
  27. package/src/components/call-button/CallButton.stories.tsx +324 -324
  28. package/src/components/call-button/index.tsx +86 -86
  29. package/src/components/call-button/types.ts +11 -11
  30. package/src/components/checkbox/Checkbox.stories.tsx +247 -247
  31. package/src/components/checkbox/index.tsx +197 -197
  32. package/src/components/checkbox/types.ts +27 -27
  33. package/src/components/checklist/Checklist.stories.tsx +150 -150
  34. package/src/components/checklist/index.tsx +54 -54
  35. package/src/components/checklist/types.ts +9 -9
  36. package/src/components/collapse/Collapse.stories.tsx +255 -255
  37. package/src/components/collapse/index.tsx +46 -46
  38. package/src/components/collapse/types.ts +6 -6
  39. package/src/components/divider/Divider.stories.tsx +205 -205
  40. package/src/components/divider/index.tsx +22 -22
  41. package/src/components/divider/type.ts +3 -3
  42. package/src/components/image/Image.stories.tsx +113 -113
  43. package/src/components/image/index.tsx +25 -25
  44. package/src/components/image/types.ts +40 -40
  45. package/src/components/input/Input.stories.tsx +325 -325
  46. package/src/components/input/index.tsx +177 -177
  47. package/src/components/input/types.ts +37 -37
  48. package/src/components/link/Link.stories.tsx +163 -163
  49. package/src/components/link/types.ts +25 -25
  50. package/src/components/list/List.stories.tsx +272 -272
  51. package/src/components/list/index.tsx +88 -88
  52. package/src/components/list/list-item/index.tsx +38 -38
  53. package/src/components/list/list-item/types.ts +13 -13
  54. package/src/components/list/types.ts +29 -29
  55. package/src/components/material-icon/MaterialIcon.stories.tsx +330 -330
  56. package/src/components/material-icon/constants.ts +96 -96
  57. package/src/components/material-icon/index.tsx +44 -44
  58. package/src/components/material-icon/types.ts +31 -31
  59. package/src/components/modal/Modal.stories.tsx +171 -171
  60. package/src/components/modal/index.tsx +164 -164
  61. package/src/components/modal/types.ts +24 -24
  62. package/src/components/next-image/index.tsx +32 -32
  63. package/src/components/next-image/types.ts +1 -1
  64. package/src/components/radio-button/RadioButton.stories.tsx +307 -307
  65. package/src/components/radio-button/index.tsx +75 -75
  66. package/src/components/radio-button/types.ts +21 -21
  67. package/src/components/see-more/SeeMore.stories.tsx +181 -181
  68. package/src/components/see-more/index.tsx +44 -44
  69. package/src/components/see-more/types.ts +4 -4
  70. package/src/components/select/Select.stories.tsx +411 -411
  71. package/src/components/select/index.tsx +150 -150
  72. package/src/components/select/types.ts +35 -35
  73. package/src/components/select-plan-button/SelectPlanButton.stories.tsx +184 -184
  74. package/src/components/select-plan-button/index.tsx +31 -31
  75. package/src/components/select-plan-button/types.ts +5 -5
  76. package/src/components/skeleton/Skeleton.stories.tsx +179 -179
  77. package/src/components/skeleton/index.tsx +61 -61
  78. package/src/components/skeleton/types.ts +4 -4
  79. package/src/components/spinner/Spinner.stories.tsx +335 -335
  80. package/src/components/spinner/index.tsx +44 -44
  81. package/src/components/spinner/types.ts +5 -5
  82. package/src/components/text/Text.stories.tsx +321 -321
  83. package/src/components/text/index.tsx +25 -25
  84. package/src/components/text/types.ts +45 -45
  85. package/src/components/tooltip/Tooltip.stories.tsx +219 -219
  86. package/src/components/tooltip/index.tsx +74 -74
  87. package/src/components/tooltip/types.ts +7 -7
  88. package/src/components/view-cart-button/ViewCartButton.stories.tsx +252 -252
  89. package/src/components/view-cart-button/index.tsx +44 -44
  90. package/src/components/view-cart-button/types.ts +5 -5
  91. package/src/contentful/blocks/button/Button.stories.tsx +40 -40
  92. package/src/contentful/blocks/button/index.tsx +85 -85
  93. package/src/contentful/blocks/button/types.ts +26 -26
  94. package/src/contentful/blocks/callout/Callout.stories.tsx +23 -23
  95. package/src/contentful/blocks/callout/index.tsx +66 -66
  96. package/src/contentful/blocks/cards/Cards.stories.tsx +23 -23
  97. package/src/contentful/blocks/cards/index.tsx +13 -13
  98. package/src/contentful/blocks/cards/product-card/index.tsx +199 -199
  99. package/src/contentful/blocks/cards/product-card/types.ts +20 -20
  100. package/src/contentful/blocks/cards/simple-card/index.tsx +77 -77
  101. package/src/contentful/blocks/cards/simple-card/types.ts +31 -31
  102. package/src/contentful/blocks/cards/testimonial-card/index.tsx +88 -88
  103. package/src/contentful/blocks/cards/testimonial-card/types.tsx +12 -12
  104. package/src/contentful/blocks/cards/types.ts +1 -1
  105. package/src/contentful/blocks/carousel/Carousel.stories.tsx +23 -23
  106. package/src/contentful/blocks/carousel/helper.tsx +314 -314
  107. package/src/contentful/blocks/carousel/index.tsx +52 -52
  108. package/src/contentful/blocks/carousel/types.ts +126 -126
  109. package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx +46 -46
  110. package/src/contentful/blocks/cta-callout/index.tsx +54 -54
  111. package/src/contentful/blocks/cta-callout/types.ts +22 -22
  112. package/src/contentful/blocks/find-kinetic/index.tsx +52 -11
  113. package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +34 -34
  114. package/src/contentful/blocks/floating-banner/types.ts +22 -22
  115. package/src/contentful/blocks/footer/Footer.stories.tsx +30 -30
  116. package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx +23 -23
  117. package/src/contentful/blocks/image-promo-bar/types.ts +27 -27
  118. package/src/contentful/blocks/modal/constants.ts +53 -0
  119. package/src/contentful/blocks/modal/index.tsx +91 -12
  120. package/src/contentful/blocks/modal/types.ts +12 -1
  121. package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +111 -111
  122. package/src/contentful/blocks/navigation/index.tsx +385 -380
  123. package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +80 -80
  124. package/src/contentful/blocks/navigation/types.ts +41 -41
  125. package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
  126. package/src/contentful/blocks/primary-hero/index.tsx +212 -212
  127. package/src/contentful/blocks/primary-hero/types.ts +30 -30
  128. package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx +26 -26
  129. package/src/contentful/blocks/shape-background-wrapper/index.tsx +124 -124
  130. package/src/contentful/blocks/shape-background-wrapper/types.ts +36 -36
  131. package/src/contentful/blocks/text/Text.stories.tsx +23 -23
  132. package/src/contentful/blocks/text/index.tsx +12 -12
  133. package/src/contentful/blocks/text/types.ts +1 -1
  134. package/src/contentful/index.ts +57 -57
  135. package/src/hooks/use-body-scroll-lock.ts +34 -34
  136. package/src/hooks/use-outside-click.ts +17 -17
  137. package/src/index.ts +96 -96
  138. package/src/next/index.ts +5 -5
  139. package/src/setupTests.ts +46 -46
  140. package/src/stories/DocsTemplate.tsx +24 -24
  141. package/src/styles/globals.css +307 -307
  142. package/src/types/global.d.ts +9 -9
  143. package/src/types/micro-components.ts +80 -80
  144. package/src/utils/index.ts +49 -49
  145. package/src/contentful/blocks/modal/Modal.stories.tsx +0 -23
@@ -1,88 +1,88 @@
1
- import React from "react";
2
- import { TestimonialCardProps } from "./types";
3
- import clsx from "clsx";
4
- import Image from "next/image";
5
-
6
- import { MaterialIcon } from "@shared/components/material-icon";
7
- import { Text } from "@shared/components/text";
8
-
9
- export const TestimonialCard: React.FC<TestimonialCardProps> = ({
10
- title,
11
- quote,
12
- rating,
13
- author,
14
- role,
15
- avatarUrl,
16
- isActive = false,
17
- className,
18
- }) => {
19
- return (
20
- <figure
21
- className={clsx(
22
- "flex h-full w-full flex-col rounded-3xl p-6 font-sans transition-all duration-300 md:p-13",
23
- isActive ? "bg-white shadow-lg" : "bg-gray-50 opacity-60", // Active vs Inactive styles
24
- className
25
- )}
26
- >
27
- <header>
28
- <Text as="h3" className="mb-4 text-xl font-black lowercase text-text">
29
- {title}
30
- </Text>
31
- </header>
32
- <blockquote className="mb-5 flex-grow text-xl leading-relaxed text-text">
33
- {quote}
34
- </blockquote>
35
-
36
- {/* Rating Stars */}
37
- {rating ? (
38
- <div className="mb-5 flex gap-1">
39
- {[...Array(5)].map((_, i) => (
40
- <MaterialIcon
41
- key={i}
42
- size={24}
43
- name="star"
44
- fill={1}
45
- className={clsx(
46
- "h-5 w-5",
47
- i < rating ? "text-text" : "text-gray-300"
48
- )}
49
- aria-hidden="true"
50
- />
51
- ))}
52
- </div>
53
- ) : null}
54
-
55
- {/* Author Block */}
56
- {author && (
57
- <figcaption className="flex items-center gap-3">
58
- <div className="relative h-10 w-10 shrink-0 overflow-hidden rounded-full bg-gray-300">
59
- {avatarUrl ? (
60
- <Image
61
- src={avatarUrl}
62
- alt={author}
63
- fill={true}
64
- className="object-cover"
65
- sizes="40px"
66
- />
67
- ) : (
68
- <div className="flex h-full w-full items-center justify-center bg-gray-500 text-xs font-bold text-white">
69
- {author.charAt(0)}
70
- </div>
71
- )}
72
- </div>
73
-
74
- <div className="flex flex-col">
75
- <cite className="text-sm font-bold not-italic text-text">
76
- {author}
77
- </cite>
78
- <Text as="p" className="text-xs text-text">
79
- {role}
80
- </Text>
81
- </div>
82
- </figcaption>
83
- )}
84
- </figure>
85
- );
86
- };
87
-
88
- export default TestimonialCard;
1
+ import React from "react";
2
+ import { TestimonialCardProps } from "./types";
3
+ import clsx from "clsx";
4
+ import Image from "next/image";
5
+
6
+ import { MaterialIcon } from "@shared/components/material-icon";
7
+ import { Text } from "@shared/components/text";
8
+
9
+ export const TestimonialCard: React.FC<TestimonialCardProps> = ({
10
+ title,
11
+ quote,
12
+ rating,
13
+ author,
14
+ role,
15
+ avatarUrl,
16
+ isActive = false,
17
+ className,
18
+ }) => {
19
+ return (
20
+ <figure
21
+ className={clsx(
22
+ "flex h-full w-full flex-col rounded-3xl p-6 font-sans transition-all duration-300 md:p-13",
23
+ isActive ? "bg-white shadow-lg" : "bg-gray-50 opacity-60", // Active vs Inactive styles
24
+ className
25
+ )}
26
+ >
27
+ <header>
28
+ <Text as="h3" className="mb-4 text-xl font-black lowercase text-text">
29
+ {title}
30
+ </Text>
31
+ </header>
32
+ <blockquote className="mb-5 flex-grow text-xl leading-relaxed text-text">
33
+ {quote}
34
+ </blockquote>
35
+
36
+ {/* Rating Stars */}
37
+ {rating ? (
38
+ <div className="mb-5 flex gap-1">
39
+ {[...Array(5)].map((_, i) => (
40
+ <MaterialIcon
41
+ key={i}
42
+ size={24}
43
+ name="star"
44
+ fill={1}
45
+ className={clsx(
46
+ "h-5 w-5",
47
+ i < rating ? "text-text" : "text-gray-300"
48
+ )}
49
+ aria-hidden="true"
50
+ />
51
+ ))}
52
+ </div>
53
+ ) : null}
54
+
55
+ {/* Author Block */}
56
+ {author && (
57
+ <figcaption className="flex items-center gap-3">
58
+ <div className="relative h-10 w-10 shrink-0 overflow-hidden rounded-full bg-gray-300">
59
+ {avatarUrl ? (
60
+ <Image
61
+ src={avatarUrl}
62
+ alt={author}
63
+ fill={true}
64
+ className="object-cover"
65
+ sizes="40px"
66
+ />
67
+ ) : (
68
+ <div className="flex h-full w-full items-center justify-center bg-gray-500 text-xs font-bold text-white">
69
+ {author.charAt(0)}
70
+ </div>
71
+ )}
72
+ </div>
73
+
74
+ <div className="flex flex-col">
75
+ <cite className="text-sm font-bold not-italic text-text">
76
+ {author}
77
+ </cite>
78
+ <Text as="p" className="text-xs text-text">
79
+ {role}
80
+ </Text>
81
+ </div>
82
+ </figcaption>
83
+ )}
84
+ </figure>
85
+ );
86
+ };
87
+
88
+ export default TestimonialCard;
@@ -1,12 +1,12 @@
1
- import { ReactNode } from "react";
2
-
3
- export interface TestimonialCardProps {
4
- title?: string;
5
- quote?: ReactNode;
6
- rating?: number;
7
- author?: string;
8
- role?: string;
9
- avatarUrl?: string;
10
- isActive?: boolean;
11
- className?: string;
12
- }
1
+ import { ReactNode } from "react";
2
+
3
+ export interface TestimonialCardProps {
4
+ title?: string;
5
+ quote?: ReactNode;
6
+ rating?: number;
7
+ author?: string;
8
+ role?: string;
9
+ avatarUrl?: string;
10
+ isActive?: boolean;
11
+ className?: string;
12
+ }
@@ -1 +1 @@
1
- export type CardsProps = {};
1
+ export type CardsProps = {};
@@ -1,23 +1,23 @@
1
- import { Carousel } from "./index";
2
-
3
- import { DocsPage } from "@shared/stories/DocsTemplate";
4
- import type { Meta, StoryObj } from "@storybook/react";
5
-
6
- const meta: Meta<typeof Carousel> = {
7
- title: "Contentful Blocks/Carousel",
8
- component: Carousel,
9
- tags: ["autodocs"],
10
- parameters: {
11
- layout: "centered",
12
- docs: {
13
- page: DocsPage,
14
- description: {
15
- component: "Contentful carousel block.",
16
- },
17
- },
18
- },
19
- args: {},
20
- };
21
- export default meta;
22
- type Story = StoryObj<typeof meta>;
23
- export const Default: Story = {};
1
+ import { Carousel } from "./index";
2
+
3
+ import { DocsPage } from "@shared/stories/DocsTemplate";
4
+ import type { Meta, StoryObj } from "@storybook/react";
5
+
6
+ const meta: Meta<typeof Carousel> = {
7
+ title: "Contentful Blocks/Carousel",
8
+ component: Carousel,
9
+ tags: ["autodocs"],
10
+ parameters: {
11
+ layout: "centered",
12
+ docs: {
13
+ page: DocsPage,
14
+ description: {
15
+ component: "Contentful carousel block.",
16
+ },
17
+ },
18
+ },
19
+ args: {},
20
+ };
21
+ export default meta;
22
+ type Story = StoryObj<typeof meta>;
23
+ export const Default: Story = {};