105 lines
2.4 KiB
TypeScript
105 lines
2.4 KiB
TypeScript
import { Meta, StoryObj } from "@storybook/nextjs-vite";
|
||
import { Email } from "./Email";
|
||
import { fn } from "storybook/test";
|
||
import {
|
||
LayoutQuestion,
|
||
LayoutQuestionProps,
|
||
} from "@/components/layout/LayoutQuestion/LayoutQuestion";
|
||
import Image from "next/image";
|
||
|
||
const layoutQuestionProps: Omit<LayoutQuestionProps, "children"> = {
|
||
headerProps: {
|
||
onBack: fn(),
|
||
},
|
||
title: {
|
||
children: "Портрет твоей второй половинки готов! Куда нам его отправить?",
|
||
align: "center",
|
||
},
|
||
contentProps: {
|
||
className: "pt-0!",
|
||
},
|
||
};
|
||
|
||
/** Reusable Email page Component */
|
||
const meta: Meta<typeof Email> = {
|
||
title: "Templates/Email",
|
||
component: Email,
|
||
tags: ["autodocs"],
|
||
parameters: {
|
||
layout: "fullscreen",
|
||
},
|
||
args: {
|
||
textInputProps: {
|
||
label: "Email",
|
||
placeholder: "Enter your Email",
|
||
type: "email",
|
||
onChange: fn(),
|
||
},
|
||
bottomActionButtonProps: {
|
||
actionButtonProps: {
|
||
children: "Continue",
|
||
onClick: fn(),
|
||
},
|
||
},
|
||
image: (
|
||
<Image
|
||
src="/male-portrait.jpg"
|
||
alt="male portrait"
|
||
width={164}
|
||
height={245}
|
||
className="mt-3.5 rounded-[50px] blur-sm"
|
||
/>
|
||
),
|
||
privacyTermsConsentProps: {
|
||
privacyPolicy: {
|
||
children: "Privacy Policy",
|
||
href: "#privacy-policy",
|
||
},
|
||
termsOfUse: {
|
||
children: "Terms of use",
|
||
href: "#terms-of-use",
|
||
},
|
||
},
|
||
privacySecurityBannerProps: {
|
||
text: {
|
||
children:
|
||
"Мы не передаем личную информацию, она остаётся в безопасности и под вашим контролем.",
|
||
},
|
||
},
|
||
},
|
||
argTypes: {
|
||
textInputProps: {
|
||
control: { type: "object" },
|
||
},
|
||
bottomActionButtonProps: {
|
||
control: { type: "object" },
|
||
},
|
||
},
|
||
render: (args) => {
|
||
return (
|
||
<LayoutQuestion {...layoutQuestionProps}>
|
||
<Email {...args} />
|
||
</LayoutQuestion>
|
||
);
|
||
},
|
||
};
|
||
|
||
export default meta;
|
||
type Story = StoryObj<typeof meta>;
|
||
|
||
export const Default = {} satisfies Story;
|
||
|
||
export const FemalePortrait = {
|
||
args: {
|
||
image: (
|
||
<Image
|
||
src="/female-portrait.jpg"
|
||
alt="female portrait"
|
||
width={164}
|
||
height={245}
|
||
className="mt-3.5 rounded-[50px] blur-sm"
|
||
/>
|
||
),
|
||
},
|
||
} satisfies Story;
|