@windstream/react-shared-components 0.0.70 → 0.0.72

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 +629 -629
  2. package/dist/contentful/index.d.ts +17 -8
  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 +1 -1
  12. package/dist/index.js.map +1 -1
  13. package/dist/styles.css +1 -1
  14. package/package.json +175 -175
  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 +219 -219
  21. package/src/components/brand-button/helpers.ts +35 -35
  22. package/src/components/brand-button/index.tsx +93 -93
  23. package/src/components/brand-button/types.ts +25 -25
  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 +79 -86
  29. package/src/components/call-button/types.ts +10 -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/collapse/Collapse.stories.tsx +255 -255
  35. package/src/components/collapse/index.tsx +46 -46
  36. package/src/components/collapse/types.ts +6 -6
  37. package/src/components/divider/Divider.stories.tsx +205 -205
  38. package/src/components/divider/index.tsx +22 -22
  39. package/src/components/divider/type.ts +3 -3
  40. package/src/components/image/Image.stories.tsx +113 -113
  41. package/src/components/image/index.tsx +25 -25
  42. package/src/components/image/types.ts +40 -40
  43. package/src/components/input/Input.stories.tsx +325 -325
  44. package/src/components/input/index.tsx +177 -177
  45. package/src/components/input/types.ts +37 -37
  46. package/src/components/link/Link.stories.tsx +163 -163
  47. package/src/components/link/types.ts +25 -25
  48. package/src/components/list/List.stories.tsx +272 -272
  49. package/src/components/list/index.tsx +88 -88
  50. package/src/components/list/list-item/index.tsx +38 -38
  51. package/src/components/list/list-item/types.ts +13 -13
  52. package/src/components/list/types.ts +29 -29
  53. package/src/components/material-icon/MaterialIcon.stories.tsx +330 -330
  54. package/src/components/material-icon/constants.ts +96 -96
  55. package/src/components/material-icon/index.tsx +44 -44
  56. package/src/components/material-icon/types.ts +31 -31
  57. package/src/components/modal/Modal.stories.tsx +171 -171
  58. package/src/components/modal/index.tsx +164 -164
  59. package/src/components/modal/types.ts +24 -24
  60. package/src/components/next-image/index.tsx +32 -32
  61. package/src/components/next-image/types.ts +1 -1
  62. package/src/components/radio-button/RadioButton.stories.tsx +307 -307
  63. package/src/components/radio-button/index.tsx +75 -75
  64. package/src/components/radio-button/types.ts +21 -21
  65. package/src/components/see-more/SeeMore.stories.tsx +181 -181
  66. package/src/components/see-more/index.tsx +44 -44
  67. package/src/components/see-more/types.ts +4 -4
  68. package/src/components/select/Select.stories.tsx +411 -411
  69. package/src/components/select/index.tsx +150 -150
  70. package/src/components/select/types.ts +35 -35
  71. package/src/components/select-plan-button/SelectPlanButton.stories.tsx +184 -184
  72. package/src/components/select-plan-button/index.tsx +31 -31
  73. package/src/components/select-plan-button/types.ts +5 -5
  74. package/src/components/skeleton/Skeleton.stories.tsx +179 -179
  75. package/src/components/skeleton/index.tsx +61 -61
  76. package/src/components/skeleton/types.ts +4 -4
  77. package/src/components/spinner/Spinner.stories.tsx +335 -335
  78. package/src/components/spinner/index.tsx +44 -44
  79. package/src/components/spinner/types.ts +5 -5
  80. package/src/components/text/Text.stories.tsx +321 -321
  81. package/src/components/text/index.tsx +25 -25
  82. package/src/components/text/types.ts +45 -45
  83. package/src/components/tooltip/Tooltip.stories.tsx +219 -219
  84. package/src/components/tooltip/index.tsx +74 -74
  85. package/src/components/tooltip/types.ts +7 -7
  86. package/src/components/view-cart-button/ViewCartButton.stories.tsx +252 -252
  87. package/src/components/view-cart-button/index.tsx +44 -44
  88. package/src/components/view-cart-button/types.ts +5 -5
  89. package/src/contentful/blocks/button/Button.stories.tsx +40 -40
  90. package/src/contentful/blocks/button/index.tsx +64 -64
  91. package/src/contentful/blocks/button/types.ts +24 -24
  92. package/src/contentful/blocks/callout/Callout.stories.tsx +23 -23
  93. package/src/contentful/blocks/callout/index.tsx +66 -52
  94. package/src/contentful/blocks/cards/Cards.stories.tsx +23 -23
  95. package/src/contentful/blocks/cards/index.tsx +13 -13
  96. package/src/contentful/blocks/cards/product-card/index.tsx +199 -199
  97. package/src/contentful/blocks/cards/product-card/types.ts +18 -18
  98. package/src/contentful/blocks/cards/simple-card/index.tsx +77 -45
  99. package/src/contentful/blocks/cards/simple-card/types.ts +31 -9
  100. package/src/contentful/blocks/cards/testimonial-card/index.tsx +88 -88
  101. package/src/contentful/blocks/cards/testimonial-card/types.tsx +12 -12
  102. package/src/contentful/blocks/cards/types.ts +1 -1
  103. package/src/contentful/blocks/carousel/Carousel.stories.tsx +23 -23
  104. package/src/contentful/blocks/carousel/helper.tsx +314 -314
  105. package/src/contentful/blocks/carousel/index.tsx +50 -50
  106. package/src/contentful/blocks/carousel/types.ts +126 -126
  107. package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx +46 -46
  108. package/src/contentful/blocks/cta-callout/index.tsx +54 -54
  109. package/src/contentful/blocks/cta-callout/types.ts +22 -22
  110. package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +34 -34
  111. package/src/contentful/blocks/floating-banner/types.ts +22 -22
  112. package/src/contentful/blocks/footer/Footer.stories.tsx +30 -30
  113. package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx +23 -23
  114. package/src/contentful/blocks/image-promo-bar/types.ts +27 -27
  115. package/src/contentful/blocks/modal/Modal.stories.tsx +23 -23
  116. package/src/contentful/blocks/modal/index.tsx +12 -12
  117. package/src/contentful/blocks/modal/types.ts +1 -1
  118. package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +111 -111
  119. package/src/contentful/blocks/navigation/index.tsx +366 -373
  120. package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +80 -80
  121. package/src/contentful/blocks/navigation/types.ts +39 -41
  122. package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
  123. package/src/contentful/blocks/primary-hero/index.tsx +160 -160
  124. package/src/contentful/blocks/primary-hero/types.ts +30 -30
  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 +307 -307
  139. package/src/types/global.d.ts +9 -9
  140. package/src/types/micro-components.ts +80 -80
  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 = {};