@windstream/react-shared-components 0.0.79 → 0.0.81

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