@windstream/react-shared-components 0.0.88 → 0.0.90

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.d.ts +12 -5
  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 +2 -2
  8. package/dist/index.d.ts +1 -1
  9. package/dist/index.esm.js +1 -1
  10. package/dist/index.esm.js.map +1 -1
  11. package/dist/index.js +4 -4
  12. package/dist/index.js.map +1 -1
  13. package/dist/styles.css +1 -1
  14. package/package.json +177 -177
  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 +55 -54
  35. package/src/components/checklist/types.ts +14 -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 +98 -97
  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 +42 -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 +99 -99
  93. package/src/contentful/blocks/button/types.ts +31 -31
  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 +21 -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 +349 -314
  107. package/src/contentful/blocks/carousel/index.tsx +68 -52
  108. package/src/contentful/blocks/carousel/types.ts +140 -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 +124 -124
  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/helper.tsx +28 -0
  118. package/src/contentful/blocks/image-promo-bar/index.tsx +231 -154
  119. package/src/contentful/blocks/image-promo-bar/types.ts +44 -31
  120. package/src/contentful/blocks/image-promo-bar/vimeo-embed.tsx +93 -0
  121. package/src/contentful/blocks/image-promo-bar/youtube-embed.tsx +46 -0
  122. package/src/contentful/blocks/modal/constants.ts +53 -53
  123. package/src/contentful/blocks/modal/index.tsx +91 -91
  124. package/src/contentful/blocks/modal/types.ts +12 -12
  125. package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +111 -111
  126. package/src/contentful/blocks/navigation/index.tsx +385 -385
  127. package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +80 -80
  128. package/src/contentful/blocks/navigation/types.ts +41 -41
  129. package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
  130. package/src/contentful/blocks/primary-hero/index.tsx +228 -228
  131. package/src/contentful/blocks/primary-hero/types.ts +35 -35
  132. package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx +26 -26
  133. package/src/contentful/blocks/shape-background-wrapper/index.tsx +124 -124
  134. package/src/contentful/blocks/shape-background-wrapper/types.ts +36 -36
  135. package/src/contentful/blocks/text/Text.stories.tsx +23 -23
  136. package/src/contentful/blocks/text/index.tsx +12 -12
  137. package/src/contentful/blocks/text/types.ts +1 -1
  138. package/src/contentful/index.ts +57 -57
  139. package/src/hooks/use-body-scroll-lock.ts +34 -34
  140. package/src/hooks/use-outside-click.ts +17 -17
  141. package/src/index.ts +96 -96
  142. package/src/next/index.ts +5 -5
  143. package/src/setupTests.ts +46 -46
  144. package/src/stories/DocsTemplate.tsx +24 -24
  145. package/src/styles/globals.css +307 -307
  146. package/src/types/global.d.ts +9 -9
  147. package/src/types/micro-components.ts +89 -89
  148. package/src/utils/index.ts +49 -49
@@ -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 = {};