@windstream/react-shared-components 0.1.28 → 0.1.29

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 (164) hide show
  1. package/README.md +635 -635
  2. package/dist/contentful/index.d.ts +16 -4
  3. package/dist/contentful/index.esm.js +2 -2
  4. package/dist/contentful/index.esm.js.map +1 -1
  5. package/dist/contentful/index.js +3 -3
  6. package/dist/contentful/index.js.map +1 -1
  7. package/dist/index.d.ts +3 -3
  8. package/dist/index.js.map +1 -1
  9. package/dist/styles.css +1 -1
  10. package/package.json +182 -182
  11. package/src/components/accordion/Accordion.stories.tsx +230 -230
  12. package/src/components/accordion/index.tsx +70 -70
  13. package/src/components/accordion/types.ts +12 -12
  14. package/src/components/alert-card/AlertCard.stories.tsx +171 -171
  15. package/src/components/alert-card/index.tsx +41 -41
  16. package/src/components/alert-card/types.ts +13 -13
  17. package/src/components/brand-button/BrandButton.stories.tsx +223 -223
  18. package/src/components/brand-button/helpers.ts +35 -35
  19. package/src/components/brand-button/index.tsx +115 -115
  20. package/src/components/brand-button/types.ts +37 -37
  21. package/src/components/button/Button.stories.tsx +108 -108
  22. package/src/components/button/index.tsx +27 -27
  23. package/src/components/button/types.ts +14 -14
  24. package/src/components/call-button/CallButton.stories.tsx +324 -324
  25. package/src/components/call-button/index.tsx +86 -86
  26. package/src/components/call-button/types.ts +11 -11
  27. package/src/components/checkbox/Checkbox.stories.tsx +247 -247
  28. package/src/components/checkbox/index.tsx +197 -197
  29. package/src/components/checkbox/types.ts +27 -27
  30. package/src/components/checklist/Checklist.stories.tsx +150 -150
  31. package/src/components/checklist/index.tsx +59 -59
  32. package/src/components/checklist/types.ts +16 -16
  33. package/src/components/collapse/Collapse.stories.tsx +255 -255
  34. package/src/components/collapse/index.tsx +46 -46
  35. package/src/components/collapse/types.ts +6 -6
  36. package/src/components/divider/Divider.stories.tsx +205 -205
  37. package/src/components/divider/index.tsx +22 -22
  38. package/src/components/divider/type.ts +3 -3
  39. package/src/components/image/Image.stories.tsx +113 -113
  40. package/src/components/image/index.tsx +25 -25
  41. package/src/components/image/types.ts +40 -40
  42. package/src/components/input/Input.stories.tsx +325 -325
  43. package/src/components/input/index.tsx +177 -177
  44. package/src/components/input/types.ts +37 -37
  45. package/src/components/link/Link.stories.tsx +163 -163
  46. package/src/components/link/types.ts +25 -25
  47. package/src/components/list/List.stories.tsx +272 -272
  48. package/src/components/list/index.tsx +88 -88
  49. package/src/components/list/list-item/index.tsx +38 -38
  50. package/src/components/list/list-item/types.ts +13 -13
  51. package/src/components/list/types.ts +29 -29
  52. package/src/components/material-icon/MaterialIcon.stories.tsx +322 -322
  53. package/src/components/material-icon/constants.ts +98 -98
  54. package/src/components/material-icon/index.tsx +47 -47
  55. package/src/components/material-icon/types.ts +31 -31
  56. package/src/components/modal/Modal.stories.tsx +171 -171
  57. package/src/components/modal/index.tsx +164 -164
  58. package/src/components/modal/types.ts +24 -24
  59. package/src/components/next-image/index.tsx +54 -54
  60. package/src/components/next-image/types.ts +1 -1
  61. package/src/components/pagination/index.tsx +100 -100
  62. package/src/components/pagination/types.ts +6 -6
  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 +155 -155
  71. package/src/components/select/types.ts +36 -36
  72. package/src/components/select-plan-button/SelectPlanButton.stories.tsx +184 -184
  73. package/src/components/select-plan-button/index.tsx +57 -57
  74. package/src/components/select-plan-button/types.ts +14 -14
  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/accordion/index.tsx +62 -62
  91. package/src/contentful/blocks/address-input-banner/index.tsx +52 -52
  92. package/src/contentful/blocks/address-input-banner/types.ts +14 -14
  93. package/src/contentful/blocks/anchored-bottom-banner/index.tsx +65 -0
  94. package/src/contentful/blocks/anchored-bottom-banner/types.ts +9 -0
  95. package/src/contentful/blocks/blogs-grid/index.tsx +134 -134
  96. package/src/contentful/blocks/blogs-grid/types.ts +26 -26
  97. package/src/contentful/blocks/button/Button.stories.tsx +40 -40
  98. package/src/contentful/blocks/button/index.tsx +121 -121
  99. package/src/contentful/blocks/button/types.ts +36 -36
  100. package/src/contentful/blocks/callout/Callout.stories.tsx +23 -23
  101. package/src/contentful/blocks/callout/index.tsx +86 -86
  102. package/src/contentful/blocks/callout/types.ts +15 -15
  103. package/src/contentful/blocks/cards/Cards.stories.tsx +23 -23
  104. package/src/contentful/blocks/cards/blog-card/index.tsx +109 -109
  105. package/src/contentful/blocks/cards/blog-card/types.ts +16 -16
  106. package/src/contentful/blocks/cards/index.tsx +13 -13
  107. package/src/contentful/blocks/cards/product-card/index.tsx +208 -208
  108. package/src/contentful/blocks/cards/product-card/types.ts +28 -28
  109. package/src/contentful/blocks/cards/simple-card/index.tsx +88 -88
  110. package/src/contentful/blocks/cards/testimonial-card/index.tsx +88 -88
  111. package/src/contentful/blocks/cards/testimonial-card/types.tsx +12 -12
  112. package/src/contentful/blocks/cards/types.ts +1 -1
  113. package/src/contentful/blocks/carousel/Carousel.stories.tsx +23 -23
  114. package/src/contentful/blocks/carousel/helper.tsx +440 -440
  115. package/src/contentful/blocks/carousel/index.tsx +79 -79
  116. package/src/contentful/blocks/carousel/types.ts +144 -144
  117. package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx +46 -46
  118. package/src/contentful/blocks/cta-callout/index.tsx +60 -60
  119. package/src/contentful/blocks/cta-callout/types.ts +26 -26
  120. package/src/contentful/blocks/dynamic-tabs/index.tsx +204 -204
  121. package/src/contentful/blocks/dynamic-tabs/types.ts +21 -21
  122. package/src/contentful/blocks/find-kinetic/index.tsx +130 -130
  123. package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +34 -34
  124. package/src/contentful/blocks/floating-banner/index.tsx +97 -93
  125. package/src/contentful/blocks/floating-banner/types.ts +22 -22
  126. package/src/contentful/blocks/footer/Footer.stories.tsx +30 -30
  127. package/src/contentful/blocks/footer/index.tsx +90 -90
  128. package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx +23 -23
  129. package/src/contentful/blocks/image-promo-bar/helper.tsx +28 -28
  130. package/src/contentful/blocks/image-promo-bar/types.ts +44 -44
  131. package/src/contentful/blocks/image-promo-bar/vimeo-embed.tsx +93 -93
  132. package/src/contentful/blocks/image-promo-bar/youtube-embed.tsx +46 -46
  133. package/src/contentful/blocks/modal/constants.ts +53 -53
  134. package/src/contentful/blocks/modal/index.tsx +4 -4
  135. package/src/contentful/blocks/modal/types.ts +12 -12
  136. package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +113 -113
  137. package/src/contentful/blocks/navigation/index.tsx +394 -394
  138. package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +82 -82
  139. package/src/contentful/blocks/navigation/types.ts +41 -41
  140. package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
  141. package/src/contentful/blocks/primary-hero/index.tsx +234 -234
  142. package/src/contentful/blocks/primary-hero/types.ts +35 -35
  143. package/src/contentful/blocks/search-block/index.tsx +90 -90
  144. package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx +26 -26
  145. package/src/contentful/blocks/shape-background-wrapper/index.tsx +124 -124
  146. package/src/contentful/blocks/shape-background-wrapper/types.ts +36 -36
  147. package/src/contentful/blocks/text/Text.stories.tsx +23 -23
  148. package/src/contentful/blocks/text/index.tsx +12 -12
  149. package/src/contentful/blocks/text/types.ts +1 -1
  150. package/src/contentful/index.ts +78 -75
  151. package/src/hooks/use-body-scroll-lock.ts +34 -34
  152. package/src/hooks/use-carousel-swipe.ts +264 -264
  153. package/src/hooks/use-outside-click.ts +17 -17
  154. package/src/index.ts +101 -101
  155. package/src/next/index.ts +5 -5
  156. package/src/setupTests.ts +46 -46
  157. package/src/stories/DocsTemplate.tsx +24 -24
  158. package/src/styles/globals.css +343 -343
  159. package/src/types/global.d.ts +9 -9
  160. package/src/types/micro-components.ts +99 -99
  161. package/src/types/utm.ts +49 -49
  162. package/src/utils/cookie.ts +58 -58
  163. package/src/utils/index.ts +65 -65
  164. package/src/utils/utm.ts +221 -221
@@ -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-40", // 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-40", // 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 = {};