@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.
- package/README.md +629 -629
- package/dist/contentful/index.d.ts +17 -8
- package/dist/contentful/index.esm.js +1 -1
- package/dist/contentful/index.esm.js.map +1 -1
- package/dist/contentful/index.js +1 -1
- package/dist/contentful/index.js.map +1 -1
- package/dist/core.d.ts +2 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +175 -175
- package/src/components/accordion/Accordion.stories.tsx +230 -230
- package/src/components/accordion/types.ts +10 -10
- package/src/components/alert-card/AlertCard.stories.tsx +171 -171
- package/src/components/alert-card/index.tsx +32 -32
- package/src/components/alert-card/types.ts +9 -9
- package/src/components/brand-button/BrandButton.stories.tsx +219 -219
- package/src/components/brand-button/helpers.ts +35 -35
- package/src/components/brand-button/index.tsx +93 -93
- package/src/components/brand-button/types.ts +25 -25
- package/src/components/button/Button.stories.tsx +108 -108
- package/src/components/button/index.tsx +27 -27
- package/src/components/button/types.ts +14 -14
- package/src/components/call-button/CallButton.stories.tsx +324 -324
- package/src/components/call-button/index.tsx +79 -86
- package/src/components/call-button/types.ts +10 -11
- package/src/components/checkbox/Checkbox.stories.tsx +247 -247
- package/src/components/checkbox/index.tsx +197 -197
- package/src/components/checkbox/types.ts +27 -27
- package/src/components/checklist/Checklist.stories.tsx +150 -150
- package/src/components/collapse/Collapse.stories.tsx +255 -255
- package/src/components/collapse/index.tsx +46 -46
- package/src/components/collapse/types.ts +6 -6
- package/src/components/divider/Divider.stories.tsx +205 -205
- package/src/components/divider/index.tsx +22 -22
- package/src/components/divider/type.ts +3 -3
- package/src/components/image/Image.stories.tsx +113 -113
- package/src/components/image/index.tsx +25 -25
- package/src/components/image/types.ts +40 -40
- package/src/components/input/Input.stories.tsx +325 -325
- package/src/components/input/index.tsx +177 -177
- package/src/components/input/types.ts +37 -37
- package/src/components/link/Link.stories.tsx +163 -163
- package/src/components/link/types.ts +25 -25
- package/src/components/list/List.stories.tsx +272 -272
- package/src/components/list/index.tsx +88 -88
- package/src/components/list/list-item/index.tsx +38 -38
- package/src/components/list/list-item/types.ts +13 -13
- package/src/components/list/types.ts +29 -29
- package/src/components/material-icon/MaterialIcon.stories.tsx +330 -330
- package/src/components/material-icon/constants.ts +96 -96
- package/src/components/material-icon/index.tsx +44 -44
- package/src/components/material-icon/types.ts +31 -31
- package/src/components/modal/Modal.stories.tsx +171 -171
- package/src/components/modal/index.tsx +164 -164
- package/src/components/modal/types.ts +24 -24
- package/src/components/next-image/index.tsx +32 -32
- package/src/components/next-image/types.ts +1 -1
- package/src/components/radio-button/RadioButton.stories.tsx +307 -307
- package/src/components/radio-button/index.tsx +75 -75
- package/src/components/radio-button/types.ts +21 -21
- package/src/components/see-more/SeeMore.stories.tsx +181 -181
- package/src/components/see-more/index.tsx +44 -44
- package/src/components/see-more/types.ts +4 -4
- package/src/components/select/Select.stories.tsx +411 -411
- package/src/components/select/index.tsx +150 -150
- package/src/components/select/types.ts +35 -35
- package/src/components/select-plan-button/SelectPlanButton.stories.tsx +184 -184
- package/src/components/select-plan-button/index.tsx +31 -31
- package/src/components/select-plan-button/types.ts +5 -5
- package/src/components/skeleton/Skeleton.stories.tsx +179 -179
- package/src/components/skeleton/index.tsx +61 -61
- package/src/components/skeleton/types.ts +4 -4
- package/src/components/spinner/Spinner.stories.tsx +335 -335
- package/src/components/spinner/index.tsx +44 -44
- package/src/components/spinner/types.ts +5 -5
- package/src/components/text/Text.stories.tsx +321 -321
- package/src/components/text/index.tsx +25 -25
- package/src/components/text/types.ts +45 -45
- package/src/components/tooltip/Tooltip.stories.tsx +219 -219
- package/src/components/tooltip/index.tsx +74 -74
- package/src/components/tooltip/types.ts +7 -7
- package/src/components/view-cart-button/ViewCartButton.stories.tsx +252 -252
- package/src/components/view-cart-button/index.tsx +44 -44
- package/src/components/view-cart-button/types.ts +5 -5
- package/src/contentful/blocks/button/Button.stories.tsx +40 -40
- package/src/contentful/blocks/button/index.tsx +64 -64
- package/src/contentful/blocks/button/types.ts +24 -24
- package/src/contentful/blocks/callout/Callout.stories.tsx +23 -23
- package/src/contentful/blocks/callout/index.tsx +66 -52
- package/src/contentful/blocks/cards/Cards.stories.tsx +23 -23
- package/src/contentful/blocks/cards/index.tsx +13 -13
- package/src/contentful/blocks/cards/product-card/index.tsx +199 -199
- package/src/contentful/blocks/cards/product-card/types.ts +18 -18
- package/src/contentful/blocks/cards/simple-card/index.tsx +77 -45
- package/src/contentful/blocks/cards/simple-card/types.ts +31 -9
- package/src/contentful/blocks/cards/testimonial-card/index.tsx +88 -88
- package/src/contentful/blocks/cards/testimonial-card/types.tsx +12 -12
- package/src/contentful/blocks/cards/types.ts +1 -1
- package/src/contentful/blocks/carousel/Carousel.stories.tsx +23 -23
- package/src/contentful/blocks/carousel/helper.tsx +314 -314
- package/src/contentful/blocks/carousel/index.tsx +50 -50
- package/src/contentful/blocks/carousel/types.ts +126 -126
- package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx +46 -46
- package/src/contentful/blocks/cta-callout/index.tsx +54 -54
- package/src/contentful/blocks/cta-callout/types.ts +22 -22
- package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +34 -34
- package/src/contentful/blocks/floating-banner/types.ts +22 -22
- package/src/contentful/blocks/footer/Footer.stories.tsx +30 -30
- package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx +23 -23
- package/src/contentful/blocks/image-promo-bar/types.ts +27 -27
- package/src/contentful/blocks/modal/Modal.stories.tsx +23 -23
- package/src/contentful/blocks/modal/index.tsx +12 -12
- package/src/contentful/blocks/modal/types.ts +1 -1
- package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +111 -111
- package/src/contentful/blocks/navigation/index.tsx +366 -373
- package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +80 -80
- package/src/contentful/blocks/navigation/types.ts +39 -41
- package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
- package/src/contentful/blocks/primary-hero/index.tsx +160 -160
- package/src/contentful/blocks/primary-hero/types.ts +30 -30
- package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx +26 -26
- package/src/contentful/blocks/shape-background-wrapper/index.tsx +124 -124
- package/src/contentful/blocks/shape-background-wrapper/types.ts +36 -36
- package/src/contentful/blocks/text/Text.stories.tsx +23 -23
- package/src/contentful/blocks/text/index.tsx +12 -12
- package/src/contentful/blocks/text/types.ts +1 -1
- package/src/contentful/index.ts +57 -57
- package/src/hooks/use-body-scroll-lock.ts +34 -34
- package/src/hooks/use-outside-click.ts +17 -17
- package/src/index.ts +96 -96
- package/src/next/index.ts +5 -5
- package/src/setupTests.ts +46 -46
- package/src/stories/DocsTemplate.tsx +24 -24
- package/src/styles/globals.css +307 -307
- package/src/types/global.d.ts +9 -9
- package/src/types/micro-components.ts +80 -80
- 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 = {};
|