@windstream/react-shared-components 0.0.75 → 0.0.76

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 (140) hide show
  1. package/README.md +629 -629
  2. package/dist/contentful/index.d.ts +1 -0
  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 +4 -4
  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 +223 -223
  17. package/src/components/brand-button/helpers.ts +35 -35
  18. package/src/components/brand-button/index.tsx +115 -115
  19. package/src/components/brand-button/types.ts +37 -37
  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 +86 -86
  25. package/src/components/call-button/types.ts +11 -11
  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 +85 -85
  87. package/src/contentful/blocks/button/types.ts +26 -26
  88. package/src/contentful/blocks/callout/Callout.stories.tsx +23 -23
  89. package/src/contentful/blocks/callout/index.tsx +66 -66
  90. package/src/contentful/blocks/cards/Cards.stories.tsx +23 -23
  91. package/src/contentful/blocks/cards/index.tsx +13 -13
  92. package/src/contentful/blocks/cards/product-card/index.tsx +199 -199
  93. package/src/contentful/blocks/cards/product-card/types.ts +18 -18
  94. package/src/contentful/blocks/cards/simple-card/index.tsx +77 -77
  95. package/src/contentful/blocks/cards/simple-card/types.ts +31 -31
  96. package/src/contentful/blocks/cards/testimonial-card/index.tsx +88 -88
  97. package/src/contentful/blocks/cards/testimonial-card/types.tsx +12 -12
  98. package/src/contentful/blocks/cards/types.ts +1 -1
  99. package/src/contentful/blocks/carousel/Carousel.stories.tsx +23 -23
  100. package/src/contentful/blocks/carousel/helper.tsx +314 -314
  101. package/src/contentful/blocks/carousel/index.tsx +50 -50
  102. package/src/contentful/blocks/carousel/types.ts +126 -126
  103. package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx +46 -46
  104. package/src/contentful/blocks/cta-callout/index.tsx +54 -54
  105. package/src/contentful/blocks/cta-callout/types.ts +22 -22
  106. package/src/contentful/blocks/find-kinetic/index.tsx +4 -1
  107. package/src/contentful/blocks/find-kinetic/types.ts +1 -0
  108. package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +34 -34
  109. package/src/contentful/blocks/floating-banner/index.tsx +1 -1
  110. package/src/contentful/blocks/floating-banner/types.ts +22 -22
  111. package/src/contentful/blocks/footer/Footer.stories.tsx +30 -30
  112. package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx +23 -23
  113. package/src/contentful/blocks/image-promo-bar/types.ts +27 -27
  114. package/src/contentful/blocks/modal/Modal.stories.tsx +23 -23
  115. package/src/contentful/blocks/modal/index.tsx +12 -12
  116. package/src/contentful/blocks/modal/types.ts +1 -1
  117. package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +111 -111
  118. package/src/contentful/blocks/navigation/index.tsx +380 -380
  119. package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +80 -80
  120. package/src/contentful/blocks/navigation/types.ts +41 -41
  121. package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
  122. package/src/contentful/blocks/primary-hero/index.tsx +212 -212
  123. package/src/contentful/blocks/primary-hero/types.ts +30 -30
  124. package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx +26 -26
  125. package/src/contentful/blocks/shape-background-wrapper/index.tsx +124 -124
  126. package/src/contentful/blocks/shape-background-wrapper/types.ts +36 -36
  127. package/src/contentful/blocks/text/Text.stories.tsx +23 -23
  128. package/src/contentful/blocks/text/index.tsx +12 -12
  129. package/src/contentful/blocks/text/types.ts +1 -1
  130. package/src/contentful/index.ts +57 -57
  131. package/src/hooks/use-body-scroll-lock.ts +34 -34
  132. package/src/hooks/use-outside-click.ts +17 -17
  133. package/src/index.ts +96 -96
  134. package/src/next/index.ts +5 -5
  135. package/src/setupTests.ts +46 -46
  136. package/src/stories/DocsTemplate.tsx +24 -24
  137. package/src/styles/globals.css +307 -307
  138. package/src/types/global.d.ts +9 -9
  139. package/src/types/micro-components.ts +80 -80
  140. package/src/utils/index.ts +49 -49
@@ -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 = {};