@windstream/react-shared-components 0.0.91 → 0.0.92

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 (148) 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 +3 -3
  8. package/dist/index.esm.js +1 -1
  9. package/dist/index.esm.js.map +1 -1
  10. package/dist/index.js +1 -1
  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 -55
  34. package/src/components/checklist/types.ts +14 -14
  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 -21
  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 -349
  106. package/src/contentful/blocks/carousel/index.tsx +68 -68
  107. package/src/contentful/blocks/carousel/types.ts +139 -139
  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 -28
  117. package/src/contentful/blocks/image-promo-bar/index.tsx +231 -231
  118. package/src/contentful/blocks/image-promo-bar/types.ts +44 -44
  119. package/src/contentful/blocks/image-promo-bar/vimeo-embed.tsx +93 -93
  120. package/src/contentful/blocks/image-promo-bar/youtube-embed.tsx +46 -46
  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
  148. package/tailwind.config.cjs +8 -24
@@ -1,31 +1,31 @@
1
- import { ReactNode } from "react";
2
-
3
- export type Item = {
4
- title?: string;
5
- image?: string;
6
- imageAlignment?: "left" | "right" | "center";
7
- imageView?: "standard" | "icon" | "full";
8
- cta?: {
9
- label?: string;
10
- url?: string;
11
- newTab?: boolean;
12
- };
13
- ctaAlignment?: "left" | "right" | "center";
14
- body?: ReactNode;
15
- backgroundColor?: string;
16
- };
17
-
18
- export type SimpleCardProps = {
19
- card: Item;
20
- lgWidth?: string;
21
- mdWidth?: string;
22
- };
23
-
24
- export const backgroundColorMap: Record<string, string> = {
25
- blue: "bg-fill-brand",
26
- green: "bg-fill-brand-accent",
27
- navy: "bg-fill-inverse",
28
- purple: "bg-fill-brand-tertiary",
29
- white: "bg-white",
30
- yellow: "bg-[#F5FF1E]",
31
- };
1
+ import { ReactNode } from "react";
2
+
3
+ export type Item = {
4
+ title?: string;
5
+ image?: string;
6
+ imageAlignment?: "left" | "right" | "center";
7
+ imageView?: "standard" | "icon" | "full";
8
+ cta?: {
9
+ label?: string;
10
+ url?: string;
11
+ newTab?: boolean;
12
+ };
13
+ ctaAlignment?: "left" | "right" | "center";
14
+ body?: ReactNode;
15
+ backgroundColor?: string;
16
+ };
17
+
18
+ export type SimpleCardProps = {
19
+ card: Item;
20
+ lgWidth?: string;
21
+ mdWidth?: string;
22
+ };
23
+
24
+ export const backgroundColorMap: Record<string, string> = {
25
+ blue: "bg-fill-brand",
26
+ green: "bg-fill-brand-accent",
27
+ navy: "bg-fill-inverse",
28
+ purple: "bg-fill-brand-tertiary",
29
+ white: "bg-white",
30
+ yellow: "bg-[#F5FF1E]",
31
+ };
@@ -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 = {};