@windstream/react-shared-components 0.0.98 → 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 (141) 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/core.d.ts +1 -1
  7. package/dist/index.d.ts +1 -1
  8. package/dist/index.js.map +1 -1
  9. package/package.json +177 -177
  10. package/src/components/accordion/Accordion.stories.tsx +230 -230
  11. package/src/components/accordion/types.ts +11 -11
  12. package/src/components/alert-card/AlertCard.stories.tsx +171 -171
  13. package/src/components/alert-card/index.tsx +38 -38
  14. package/src/components/alert-card/types.ts +12 -12
  15. package/src/components/brand-button/BrandButton.stories.tsx +223 -223
  16. package/src/components/brand-button/helpers.ts +35 -35
  17. package/src/components/brand-button/index.tsx +115 -115
  18. package/src/components/brand-button/types.ts +37 -37
  19. package/src/components/button/Button.stories.tsx +108 -108
  20. package/src/components/button/index.tsx +27 -27
  21. package/src/components/button/types.ts +14 -14
  22. package/src/components/call-button/CallButton.stories.tsx +324 -324
  23. package/src/components/call-button/index.tsx +86 -86
  24. package/src/components/call-button/types.ts +11 -11
  25. package/src/components/checkbox/Checkbox.stories.tsx +247 -247
  26. package/src/components/checkbox/index.tsx +197 -197
  27. package/src/components/checkbox/types.ts +27 -27
  28. package/src/components/checklist/Checklist.stories.tsx +150 -150
  29. package/src/components/checklist/index.tsx +55 -55
  30. package/src/components/checklist/types.ts +14 -14
  31. package/src/components/collapse/Collapse.stories.tsx +255 -255
  32. package/src/components/collapse/index.tsx +46 -46
  33. package/src/components/collapse/types.ts +6 -6
  34. package/src/components/divider/Divider.stories.tsx +205 -205
  35. package/src/components/divider/index.tsx +22 -22
  36. package/src/components/divider/type.ts +3 -3
  37. package/src/components/image/Image.stories.tsx +113 -113
  38. package/src/components/image/index.tsx +25 -25
  39. package/src/components/image/types.ts +40 -40
  40. package/src/components/input/Input.stories.tsx +325 -325
  41. package/src/components/input/index.tsx +177 -177
  42. package/src/components/input/types.ts +37 -37
  43. package/src/components/link/Link.stories.tsx +163 -163
  44. package/src/components/link/types.ts +25 -25
  45. package/src/components/list/List.stories.tsx +272 -272
  46. package/src/components/list/index.tsx +88 -88
  47. package/src/components/list/list-item/index.tsx +38 -38
  48. package/src/components/list/list-item/types.ts +13 -13
  49. package/src/components/list/types.ts +29 -29
  50. package/src/components/material-icon/MaterialIcon.stories.tsx +322 -322
  51. package/src/components/material-icon/constants.ts +98 -98
  52. package/src/components/material-icon/index.tsx +47 -47
  53. package/src/components/material-icon/types.ts +31 -31
  54. package/src/components/modal/Modal.stories.tsx +171 -171
  55. package/src/components/modal/index.tsx +164 -164
  56. package/src/components/modal/types.ts +24 -24
  57. package/src/components/next-image/index.tsx +32 -32
  58. package/src/components/next-image/types.ts +1 -1
  59. package/src/components/radio-button/RadioButton.stories.tsx +307 -307
  60. package/src/components/radio-button/index.tsx +75 -75
  61. package/src/components/radio-button/types.ts +21 -21
  62. package/src/components/see-more/SeeMore.stories.tsx +181 -181
  63. package/src/components/see-more/index.tsx +44 -44
  64. package/src/components/see-more/types.ts +4 -4
  65. package/src/components/select/Select.stories.tsx +411 -411
  66. package/src/components/select/index.tsx +150 -150
  67. package/src/components/select/types.ts +35 -35
  68. package/src/components/select-plan-button/SelectPlanButton.stories.tsx +184 -184
  69. package/src/components/select-plan-button/index.tsx +57 -57
  70. package/src/components/select-plan-button/types.ts +14 -14
  71. package/src/components/skeleton/Skeleton.stories.tsx +179 -179
  72. package/src/components/skeleton/index.tsx +61 -61
  73. package/src/components/skeleton/types.ts +4 -4
  74. package/src/components/spinner/Spinner.stories.tsx +335 -335
  75. package/src/components/spinner/index.tsx +44 -44
  76. package/src/components/spinner/types.ts +5 -5
  77. package/src/components/text/Text.stories.tsx +321 -321
  78. package/src/components/text/index.tsx +25 -25
  79. package/src/components/text/types.ts +45 -45
  80. package/src/components/tooltip/Tooltip.stories.tsx +219 -219
  81. package/src/components/tooltip/index.tsx +74 -74
  82. package/src/components/tooltip/types.ts +7 -7
  83. package/src/components/view-cart-button/ViewCartButton.stories.tsx +252 -252
  84. package/src/components/view-cart-button/index.tsx +42 -42
  85. package/src/components/view-cart-button/types.ts +5 -5
  86. package/src/contentful/blocks/button/Button.stories.tsx +40 -40
  87. package/src/contentful/blocks/button/index.tsx +107 -107
  88. package/src/contentful/blocks/button/types.ts +34 -34
  89. package/src/contentful/blocks/callout/Callout.stories.tsx +23 -23
  90. package/src/contentful/blocks/callout/index.tsx +66 -66
  91. package/src/contentful/blocks/cards/Cards.stories.tsx +23 -23
  92. package/src/contentful/blocks/cards/index.tsx +13 -13
  93. package/src/contentful/blocks/cards/product-card/index.tsx +206 -206
  94. package/src/contentful/blocks/cards/product-card/types.ts +28 -28
  95. package/src/contentful/blocks/cards/testimonial-card/index.tsx +88 -88
  96. package/src/contentful/blocks/cards/testimonial-card/types.tsx +12 -12
  97. package/src/contentful/blocks/cards/types.ts +1 -1
  98. package/src/contentful/blocks/carousel/Carousel.stories.tsx +23 -23
  99. package/src/contentful/blocks/carousel/helper.tsx +356 -356
  100. package/src/contentful/blocks/carousel/index.tsx +74 -74
  101. package/src/contentful/blocks/carousel/types.ts +143 -143
  102. package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx +46 -46
  103. package/src/contentful/blocks/cta-callout/index.tsx +60 -60
  104. package/src/contentful/blocks/cta-callout/types.ts +26 -26
  105. package/src/contentful/blocks/find-kinetic/index.tsx +124 -124
  106. package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +34 -34
  107. package/src/contentful/blocks/floating-banner/types.ts +22 -22
  108. package/src/contentful/blocks/footer/Footer.stories.tsx +30 -30
  109. package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx +23 -23
  110. package/src/contentful/blocks/image-promo-bar/helper.tsx +28 -28
  111. package/src/contentful/blocks/image-promo-bar/index.tsx +234 -234
  112. package/src/contentful/blocks/image-promo-bar/types.ts +44 -44
  113. package/src/contentful/blocks/image-promo-bar/vimeo-embed.tsx +93 -93
  114. package/src/contentful/blocks/image-promo-bar/youtube-embed.tsx +46 -46
  115. package/src/contentful/blocks/modal/constants.ts +53 -53
  116. package/src/contentful/blocks/modal/index.tsx +91 -91
  117. package/src/contentful/blocks/modal/types.ts +12 -12
  118. package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +111 -111
  119. package/src/contentful/blocks/navigation/index.tsx +385 -385
  120. package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +80 -80
  121. package/src/contentful/blocks/navigation/types.ts +41 -41
  122. package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
  123. package/src/contentful/blocks/primary-hero/index.tsx +229 -229
  124. package/src/contentful/blocks/primary-hero/types.ts +35 -35
  125. package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx +26 -26
  126. package/src/contentful/blocks/shape-background-wrapper/index.tsx +124 -124
  127. package/src/contentful/blocks/shape-background-wrapper/types.ts +36 -36
  128. package/src/contentful/blocks/text/Text.stories.tsx +23 -23
  129. package/src/contentful/blocks/text/index.tsx +12 -12
  130. package/src/contentful/blocks/text/types.ts +1 -1
  131. package/src/contentful/index.ts +57 -57
  132. package/src/hooks/use-body-scroll-lock.ts +34 -34
  133. package/src/hooks/use-outside-click.ts +17 -17
  134. package/src/index.ts +96 -96
  135. package/src/next/index.ts +5 -5
  136. package/src/setupTests.ts +46 -46
  137. package/src/stories/DocsTemplate.tsx +24 -24
  138. package/src/styles/globals.css +343 -343
  139. package/src/types/global.d.ts +9 -9
  140. package/src/types/micro-components.ts +99 -99
  141. 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 = {};