@windstream/react-shared-components 0.0.63 → 0.0.65
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 +34 -28
- 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 +2 -2
- 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/next/index.esm.js +1 -1
- package/dist/next/index.esm.js.map +1 -1
- package/dist/next/index.js +1 -1
- package/dist/next/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 -79
- package/src/components/call-button/types.ts +10 -10
- 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 -18
- 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/cards/Cards.stories.tsx +23 -23
- package/src/contentful/blocks/cards/index.tsx +13 -13
- package/src/contentful/blocks/cards/product-card/index.tsx +198 -198
- package/src/contentful/blocks/cards/product-card/types.ts +18 -18
- package/src/contentful/blocks/cards/testimonial-card/index.tsx +86 -86
- package/src/contentful/blocks/cards/testimonial-card/types.tsx +10 -10
- package/src/contentful/blocks/cards/types.ts +1 -1
- package/src/contentful/blocks/carousel/Carousel.stories.tsx +23 -23
- package/src/contentful/blocks/carousel/index.tsx +13 -13
- package/src/contentful/blocks/carousel/types.ts +1 -1
- 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 -0
- package/src/contentful/blocks/navigation/index.tsx +366 -56
- package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +80 -0
- package/src/contentful/blocks/navigation/types.ts +39 -21
- 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 +54 -54
- package/src/hooks/use-body-scroll-lock.ts +34 -34
- package/src/hooks/use-outside-click.ts +17 -0
- 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 -0
- package/src/utils/index.ts +49 -49
- package/tailwind.config.cjs +1 -2
- package/src/contentful/blocks/navigation/Navigation.stories.tsx +0 -23
- package/src/contentful/blocks/navigation/link-groups.tsx/index.tsx +0 -62
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
import { Button } from "../button";
|
|
2
|
-
import { MaterialIcon } from "../material-icon";
|
|
3
|
-
import { Text } from "../text";
|
|
4
|
-
import { ViewCartButtonProps } from "./types";
|
|
5
|
-
|
|
6
|
-
import { cx } from "@shared/utils";
|
|
7
|
-
|
|
8
|
-
const baseClasses =
|
|
9
|
-
"btn-medium rounded-2xl pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top border-2 border-border-secondary-on-bg-fill bg-bg text-text focus:ring-bg-surface-inverse";
|
|
10
|
-
export const ViewCartButton: React.FC<ViewCartButtonProps> = props => {
|
|
11
|
-
const { cartTotalText, onClick, isOpen, ...rest } = props;
|
|
12
|
-
return (
|
|
13
|
-
<Button
|
|
14
|
-
className={cx(
|
|
15
|
-
baseClasses,
|
|
16
|
-
"btn-small w-full border-border pl-6 pr-4 md:btn-medium"
|
|
17
|
-
)}
|
|
18
|
-
onClick={onClick}
|
|
19
|
-
{...rest}
|
|
20
|
-
>
|
|
21
|
-
<div className="flex w-full items-center justify-center gap-2">
|
|
22
|
-
<div className="flex flex-col items-center justify-center">
|
|
23
|
-
<Text className="footnote -mb-1 text-text-secondary sm:body3">
|
|
24
|
-
View cart
|
|
25
|
-
</Text>
|
|
26
|
-
<Text className="body3 font-bold md:body1" data-testid="cart-total">
|
|
27
|
-
{cartTotalText}
|
|
28
|
-
</Text>
|
|
29
|
-
</div>
|
|
30
|
-
<MaterialIcon
|
|
31
|
-
name="keyboard_arrow_up"
|
|
32
|
-
size={24}
|
|
33
|
-
fill={0}
|
|
34
|
-
className={cx(
|
|
35
|
-
"h-6 w-6 transition-transform",
|
|
36
|
-
isOpen ? "rotate-180" : "rotate-0"
|
|
37
|
-
)}
|
|
38
|
-
/>
|
|
39
|
-
</div>
|
|
40
|
-
</Button>
|
|
41
|
-
);
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
export type { ViewCartButtonProps } from "./types";
|
|
1
|
+
import { Button } from "../button";
|
|
2
|
+
import { MaterialIcon } from "../material-icon";
|
|
3
|
+
import { Text } from "../text";
|
|
4
|
+
import { ViewCartButtonProps } from "./types";
|
|
5
|
+
|
|
6
|
+
import { cx } from "@shared/utils";
|
|
7
|
+
|
|
8
|
+
const baseClasses =
|
|
9
|
+
"btn-medium rounded-2xl pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top border-2 border-border-secondary-on-bg-fill bg-bg text-text focus:ring-bg-surface-inverse";
|
|
10
|
+
export const ViewCartButton: React.FC<ViewCartButtonProps> = props => {
|
|
11
|
+
const { cartTotalText, onClick, isOpen, ...rest } = props;
|
|
12
|
+
return (
|
|
13
|
+
<Button
|
|
14
|
+
className={cx(
|
|
15
|
+
baseClasses,
|
|
16
|
+
"btn-small w-full border-border pl-6 pr-4 md:btn-medium"
|
|
17
|
+
)}
|
|
18
|
+
onClick={onClick}
|
|
19
|
+
{...rest}
|
|
20
|
+
>
|
|
21
|
+
<div className="flex w-full items-center justify-center gap-2">
|
|
22
|
+
<div className="flex flex-col items-center justify-center">
|
|
23
|
+
<Text className="footnote -mb-1 text-text-secondary sm:body3">
|
|
24
|
+
View cart
|
|
25
|
+
</Text>
|
|
26
|
+
<Text className="body3 font-bold md:body1" data-testid="cart-total">
|
|
27
|
+
{cartTotalText}
|
|
28
|
+
</Text>
|
|
29
|
+
</div>
|
|
30
|
+
<MaterialIcon
|
|
31
|
+
name="keyboard_arrow_up"
|
|
32
|
+
size={24}
|
|
33
|
+
fill={0}
|
|
34
|
+
className={cx(
|
|
35
|
+
"h-6 w-6 transition-transform",
|
|
36
|
+
isOpen ? "rotate-180" : "rotate-0"
|
|
37
|
+
)}
|
|
38
|
+
/>
|
|
39
|
+
</div>
|
|
40
|
+
</Button>
|
|
41
|
+
);
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export type { ViewCartButtonProps } from "./types";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export type ViewCartButtonProps = {
|
|
2
|
-
cartTotalText: string;
|
|
3
|
-
onClick: () => void;
|
|
4
|
-
isOpen: boolean;
|
|
5
|
-
} & React.ButtonHTMLAttributes<HTMLButtonElement>;
|
|
1
|
+
export type ViewCartButtonProps = {
|
|
2
|
+
cartTotalText: string;
|
|
3
|
+
onClick: () => void;
|
|
4
|
+
isOpen: boolean;
|
|
5
|
+
} & React.ButtonHTMLAttributes<HTMLButtonElement>;
|
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
import { Button } from "./index";
|
|
2
|
-
|
|
3
|
-
import { DocsPage } from "@shared/stories/DocsTemplate";
|
|
4
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
5
|
-
|
|
6
|
-
const meta: Meta<typeof Button> = {
|
|
7
|
-
title: "Contentful Blocks/Button",
|
|
8
|
-
component: Button,
|
|
9
|
-
tags: ["autodocs"],
|
|
10
|
-
parameters: {
|
|
11
|
-
layout: "centered",
|
|
12
|
-
docs: {
|
|
13
|
-
page: DocsPage,
|
|
14
|
-
description: {
|
|
15
|
-
component:
|
|
16
|
-
"Contentful button block. Renders as solid (BrandButton) or text (Link).",
|
|
17
|
-
},
|
|
18
|
-
},
|
|
19
|
-
},
|
|
20
|
-
args: {
|
|
21
|
-
showButtonAs: "solid",
|
|
22
|
-
buttonVariant: "primary_brand",
|
|
23
|
-
buttonLabel: "Button",
|
|
24
|
-
buttonPrefix: "",
|
|
25
|
-
badge: "",
|
|
26
|
-
badgeIcon: "",
|
|
27
|
-
buttonIcon: "",
|
|
28
|
-
buttonIconPosition: "left",
|
|
29
|
-
href: "",
|
|
30
|
-
target: "_self",
|
|
31
|
-
anchorId: "",
|
|
32
|
-
preserveQueryParameters: false,
|
|
33
|
-
clickToOpen: "",
|
|
34
|
-
tabmodalNameToOpen: "",
|
|
35
|
-
preDefinedFunctionExecution: "",
|
|
36
|
-
},
|
|
37
|
-
};
|
|
38
|
-
export default meta;
|
|
39
|
-
type Story = StoryObj<typeof meta>;
|
|
40
|
-
export const Default: Story = {};
|
|
1
|
+
import { Button } from "./index";
|
|
2
|
+
|
|
3
|
+
import { DocsPage } from "@shared/stories/DocsTemplate";
|
|
4
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
5
|
+
|
|
6
|
+
const meta: Meta<typeof Button> = {
|
|
7
|
+
title: "Contentful Blocks/Button",
|
|
8
|
+
component: Button,
|
|
9
|
+
tags: ["autodocs"],
|
|
10
|
+
parameters: {
|
|
11
|
+
layout: "centered",
|
|
12
|
+
docs: {
|
|
13
|
+
page: DocsPage,
|
|
14
|
+
description: {
|
|
15
|
+
component:
|
|
16
|
+
"Contentful button block. Renders as solid (BrandButton) or text (Link).",
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
args: {
|
|
21
|
+
showButtonAs: "solid",
|
|
22
|
+
buttonVariant: "primary_brand",
|
|
23
|
+
buttonLabel: "Button",
|
|
24
|
+
buttonPrefix: "",
|
|
25
|
+
badge: "",
|
|
26
|
+
badgeIcon: "",
|
|
27
|
+
buttonIcon: "",
|
|
28
|
+
buttonIconPosition: "left",
|
|
29
|
+
href: "",
|
|
30
|
+
target: "_self",
|
|
31
|
+
anchorId: "",
|
|
32
|
+
preserveQueryParameters: false,
|
|
33
|
+
clickToOpen: "",
|
|
34
|
+
tabmodalNameToOpen: "",
|
|
35
|
+
preDefinedFunctionExecution: "",
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
export default meta;
|
|
39
|
+
type Story = StoryObj<typeof meta>;
|
|
40
|
+
export const Default: Story = {};
|
|
@@ -1,64 +1,64 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { ButtonProps } from "./types";
|
|
3
|
-
|
|
4
|
-
import { BrandButton } from "@shared/components/brand-button";
|
|
5
|
-
import { Link } from "@shared/components/link";
|
|
6
|
-
|
|
7
|
-
export const Button: React.FC<ButtonProps> = ({
|
|
8
|
-
showButtonAs,
|
|
9
|
-
buttonVariant,
|
|
10
|
-
buttonLabel,
|
|
11
|
-
buttonPrefix,
|
|
12
|
-
href,
|
|
13
|
-
target,
|
|
14
|
-
anchorId,
|
|
15
|
-
linkClassName,
|
|
16
|
-
linkVariant,
|
|
17
|
-
fullWidth,
|
|
18
|
-
preDefinedFunctionExecution,
|
|
19
|
-
checkPlansJSX,
|
|
20
|
-
onClick,
|
|
21
|
-
}) => {
|
|
22
|
-
if (preDefinedFunctionExecution === "check availability") {
|
|
23
|
-
return checkPlansJSX;
|
|
24
|
-
}
|
|
25
|
-
function linkClick(event: React.MouseEvent<HTMLAnchorElement>) {
|
|
26
|
-
onClick?.(event);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
function buttonClick(event: React.MouseEvent<HTMLButtonElement>) {
|
|
30
|
-
onClick?.(event);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
return showButtonAs === "solid" ? (
|
|
34
|
-
<BrandButton
|
|
35
|
-
id={anchorId}
|
|
36
|
-
variant={buttonVariant}
|
|
37
|
-
text={buttonLabel}
|
|
38
|
-
label={buttonPrefix}
|
|
39
|
-
fullWidth={fullWidth}
|
|
40
|
-
onClick={buttonClick}
|
|
41
|
-
// badge={badge}
|
|
42
|
-
// badgeIcon={badgeIcon}
|
|
43
|
-
// icon={buttonIcon}
|
|
44
|
-
// iconPosition={buttonIconPosition}
|
|
45
|
-
// href={href}
|
|
46
|
-
// target={target}
|
|
47
|
-
// preserveQueryParameters={preserveQueryParameters}
|
|
48
|
-
// clickToOpen={clickToOpen}
|
|
49
|
-
// tabmodalNameToOpen={tabmodalNameToOpen}
|
|
50
|
-
// preDefinedFunctionExecution={preDefinedFunctionExecution}
|
|
51
|
-
/>
|
|
52
|
-
) : showButtonAs === "text" ? (
|
|
53
|
-
<Link
|
|
54
|
-
href={href}
|
|
55
|
-
target={target}
|
|
56
|
-
variant={linkVariant || "default"}
|
|
57
|
-
className={`text-text-brand ${linkClassName || ""}`}
|
|
58
|
-
onClick={linkClick}
|
|
59
|
-
>
|
|
60
|
-
{buttonLabel}
|
|
61
|
-
</Link>
|
|
62
|
-
) : null;
|
|
63
|
-
};
|
|
64
|
-
export default Button;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ButtonProps } from "./types";
|
|
3
|
+
|
|
4
|
+
import { BrandButton } from "@shared/components/brand-button";
|
|
5
|
+
import { Link } from "@shared/components/link";
|
|
6
|
+
|
|
7
|
+
export const Button: React.FC<ButtonProps> = ({
|
|
8
|
+
showButtonAs = "solid",
|
|
9
|
+
buttonVariant = "primary_brand",
|
|
10
|
+
buttonLabel,
|
|
11
|
+
buttonPrefix,
|
|
12
|
+
href,
|
|
13
|
+
target = "_blank",
|
|
14
|
+
anchorId,
|
|
15
|
+
linkClassName,
|
|
16
|
+
linkVariant,
|
|
17
|
+
fullWidth,
|
|
18
|
+
preDefinedFunctionExecution,
|
|
19
|
+
checkPlansJSX,
|
|
20
|
+
onClick,
|
|
21
|
+
}) => {
|
|
22
|
+
if (preDefinedFunctionExecution === "check availability") {
|
|
23
|
+
return checkPlansJSX;
|
|
24
|
+
}
|
|
25
|
+
function linkClick(event: React.MouseEvent<HTMLAnchorElement>) {
|
|
26
|
+
onClick?.(event);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
function buttonClick(event: React.MouseEvent<HTMLButtonElement>) {
|
|
30
|
+
onClick?.(event);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return showButtonAs === "solid" ? (
|
|
34
|
+
<BrandButton
|
|
35
|
+
id={anchorId}
|
|
36
|
+
variant={buttonVariant}
|
|
37
|
+
text={buttonLabel}
|
|
38
|
+
label={buttonPrefix}
|
|
39
|
+
fullWidth={fullWidth}
|
|
40
|
+
onClick={buttonClick}
|
|
41
|
+
// badge={badge}
|
|
42
|
+
// badgeIcon={badgeIcon}
|
|
43
|
+
// icon={buttonIcon}
|
|
44
|
+
// iconPosition={buttonIconPosition}
|
|
45
|
+
// href={href}
|
|
46
|
+
// target={target}
|
|
47
|
+
// preserveQueryParameters={preserveQueryParameters}
|
|
48
|
+
// clickToOpen={clickToOpen}
|
|
49
|
+
// tabmodalNameToOpen={tabmodalNameToOpen}
|
|
50
|
+
// preDefinedFunctionExecution={preDefinedFunctionExecution}
|
|
51
|
+
/>
|
|
52
|
+
) : showButtonAs === "text" ? (
|
|
53
|
+
<Link
|
|
54
|
+
href={href}
|
|
55
|
+
target={target}
|
|
56
|
+
variant={linkVariant || "default"}
|
|
57
|
+
className={`text-text-brand ${linkClassName || ""}`}
|
|
58
|
+
onClick={linkClick}
|
|
59
|
+
>
|
|
60
|
+
{buttonLabel}
|
|
61
|
+
</Link>
|
|
62
|
+
) : null;
|
|
63
|
+
};
|
|
64
|
+
export default Button;
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
export type ButtonProps = {
|
|
2
|
-
showButtonAs
|
|
3
|
-
buttonVariant
|
|
4
|
-
buttonLabel
|
|
5
|
-
buttonPrefix
|
|
6
|
-
badge
|
|
7
|
-
badgeIcon
|
|
8
|
-
buttonIcon
|
|
9
|
-
buttonIconPosition
|
|
10
|
-
href
|
|
11
|
-
target
|
|
12
|
-
anchorId
|
|
13
|
-
preserveQueryParameters
|
|
14
|
-
clickToOpen
|
|
15
|
-
tabmodalNameToOpen
|
|
16
|
-
preDefinedFunctionExecution
|
|
17
|
-
checkPlansJSX?: React.ReactNode;
|
|
18
|
-
linkClassName?: string;
|
|
19
|
-
linkVariant?: "unstyled" | "default";
|
|
20
|
-
fullWidth?: boolean;
|
|
21
|
-
onClick?: (
|
|
22
|
-
event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
|
|
23
|
-
) => void;
|
|
24
|
-
};
|
|
1
|
+
export type ButtonProps = {
|
|
2
|
+
showButtonAs?: "solid" | "text";
|
|
3
|
+
buttonVariant?: "primary_brand" | "secondary" | "primary_inverse";
|
|
4
|
+
buttonLabel?: string;
|
|
5
|
+
buttonPrefix?: string;
|
|
6
|
+
badge?: string;
|
|
7
|
+
badgeIcon?: string;
|
|
8
|
+
buttonIcon?: string;
|
|
9
|
+
buttonIconPosition?: "left" | "right";
|
|
10
|
+
href?: string;
|
|
11
|
+
target?: "_self" | "_blank";
|
|
12
|
+
anchorId?: string;
|
|
13
|
+
preserveQueryParameters?: boolean;
|
|
14
|
+
clickToOpen?: string;
|
|
15
|
+
tabmodalNameToOpen?: string;
|
|
16
|
+
preDefinedFunctionExecution?: string;
|
|
17
|
+
checkPlansJSX?: React.ReactNode;
|
|
18
|
+
linkClassName?: string;
|
|
19
|
+
linkVariant?: "unstyled" | "default";
|
|
20
|
+
fullWidth?: boolean;
|
|
21
|
+
onClick?: (
|
|
22
|
+
event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
|
|
23
|
+
) => void;
|
|
24
|
+
};
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { Callout } from "./index";
|
|
2
|
-
|
|
3
|
-
import { DocsPage } from "@shared/stories/DocsTemplate";
|
|
4
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
5
|
-
|
|
6
|
-
const meta: Meta<typeof Callout> = {
|
|
7
|
-
title: "Contentful Blocks/Callout",
|
|
8
|
-
component: Callout,
|
|
9
|
-
tags: ["autodocs"],
|
|
10
|
-
parameters: {
|
|
11
|
-
layout: "centered",
|
|
12
|
-
docs: {
|
|
13
|
-
page: DocsPage,
|
|
14
|
-
description: {
|
|
15
|
-
component: "Contentful callout block.",
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
|
-
},
|
|
19
|
-
args: {},
|
|
20
|
-
};
|
|
21
|
-
export default meta;
|
|
22
|
-
type Story = StoryObj<typeof meta>;
|
|
23
|
-
export const Default: Story = {};
|
|
1
|
+
import { Callout } from "./index";
|
|
2
|
+
|
|
3
|
+
import { DocsPage } from "@shared/stories/DocsTemplate";
|
|
4
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
5
|
+
|
|
6
|
+
const meta: Meta<typeof Callout> = {
|
|
7
|
+
title: "Contentful Blocks/Callout",
|
|
8
|
+
component: Callout,
|
|
9
|
+
tags: ["autodocs"],
|
|
10
|
+
parameters: {
|
|
11
|
+
layout: "centered",
|
|
12
|
+
docs: {
|
|
13
|
+
page: DocsPage,
|
|
14
|
+
description: {
|
|
15
|
+
component: "Contentful callout block.",
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
args: {},
|
|
20
|
+
};
|
|
21
|
+
export default meta;
|
|
22
|
+
type Story = StoryObj<typeof meta>;
|
|
23
|
+
export const Default: Story = {};
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { Cards } from "./index";
|
|
2
|
-
|
|
3
|
-
import { DocsPage } from "@shared/stories/DocsTemplate";
|
|
4
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
5
|
-
|
|
6
|
-
const meta: Meta<typeof Cards> = {
|
|
7
|
-
title: "Contentful Blocks/Cards",
|
|
8
|
-
component: Cards,
|
|
9
|
-
tags: ["autodocs"],
|
|
10
|
-
parameters: {
|
|
11
|
-
layout: "centered",
|
|
12
|
-
docs: {
|
|
13
|
-
page: DocsPage,
|
|
14
|
-
description: {
|
|
15
|
-
component: "Contentful cards block.",
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
|
-
},
|
|
19
|
-
args: { fields: {} },
|
|
20
|
-
};
|
|
21
|
-
export default meta;
|
|
22
|
-
type Story = StoryObj<typeof meta>;
|
|
23
|
-
export const Default: Story = {};
|
|
1
|
+
import { Cards } from "./index";
|
|
2
|
+
|
|
3
|
+
import { DocsPage } from "@shared/stories/DocsTemplate";
|
|
4
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
5
|
+
|
|
6
|
+
const meta: Meta<typeof Cards> = {
|
|
7
|
+
title: "Contentful Blocks/Cards",
|
|
8
|
+
component: Cards,
|
|
9
|
+
tags: ["autodocs"],
|
|
10
|
+
parameters: {
|
|
11
|
+
layout: "centered",
|
|
12
|
+
docs: {
|
|
13
|
+
page: DocsPage,
|
|
14
|
+
description: {
|
|
15
|
+
component: "Contentful cards block.",
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
args: { fields: {} },
|
|
20
|
+
};
|
|
21
|
+
export default meta;
|
|
22
|
+
type Story = StoryObj<typeof meta>;
|
|
23
|
+
export const Default: Story = {};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { CardsProps } from "./types";
|
|
2
|
-
|
|
3
|
-
import { Text } from "@shared/components/text";
|
|
4
|
-
|
|
5
|
-
export const Cards: React.FC<{ fields: CardsProps }> = ({ fields }) => {
|
|
6
|
-
return (
|
|
7
|
-
<div>
|
|
8
|
-
<Text>Cards</Text>
|
|
9
|
-
</div>
|
|
10
|
-
);
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export default Cards;
|
|
1
|
+
import { CardsProps } from "./types";
|
|
2
|
+
|
|
3
|
+
import { Text } from "@shared/components/text";
|
|
4
|
+
|
|
5
|
+
export const Cards: React.FC<{ fields: CardsProps }> = ({ fields }) => {
|
|
6
|
+
return (
|
|
7
|
+
<div>
|
|
8
|
+
<Text>Cards</Text>
|
|
9
|
+
</div>
|
|
10
|
+
);
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export default Cards;
|