sean-brydonandGitHub
52e27bab53
## What does this PR do? Creates new onboarding UI components for the user onboarding flow, including: - `OnboardingCard` - A reusable card component with title, subtitle, content, and footer sections - `OnboardingLayout` - A layout component with progress indicators and sign-out functionality - `OnboardingBrowserView` - A browser preview showing how the user's booking page will look - `OnboardingCalendarBrowserView` - A calendar preview showing sample events - `OnboardingInviteBrowserView` - A preview of the team invitation email - Enhanced `PlanIcon` component with new variants and animations for organization and team plans ## Visual Demo (For contributors especially) #### Image Demo: The PR adds several visual components for the onboarding flow, including browser previews, calendar views, and animated plan icons with concentric rings and user avatars. ## Mandatory Tasks (DO NOT REMOVE) - [x] I have self-reviewed the code. - [x] I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox. - [x] I confirm automated tests are in place that prove my fix is effective or that my feature works. ## How should this be tested? - Navigate to the onboarding flow to see the new components in action - Test the layout with different screen sizes to ensure responsive behavior - Verify that the browser previews render correctly with sample data - Check that the plan icon animations work properly for different variants (single, team, organization) - Ensure the calendar view displays sample events correctly ## Checklist - I have read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md) - My code follows the style guidelines of this project - I have commented my code, particularly in hard-to-understand areas - I have checked if my changes generate no new warnings
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
import { SkeletonText } from "@calcom/ui/components/skeleton";
|
|
|
|
type OnboardingCardProps = {
|
|
title: string;
|
|
subtitle: string;
|
|
children: ReactNode;
|
|
footer: ReactNode;
|
|
isLoading?: boolean;
|
|
};
|
|
|
|
export const OnboardingCard = ({ title, subtitle, children, footer, isLoading }: OnboardingCardProps) => {
|
|
return (
|
|
<div className="relative flex h-full min-h-0 w-full flex-col">
|
|
{/* Card Header */}
|
|
<div className="flex w-full gap-1.5 px-5 py-4">
|
|
<div className="flex w-full flex-col gap-1">
|
|
<h1 className="font-cal text-xl font-semibold leading-6">{title}</h1>
|
|
<p className="text-subtle text-sm font-medium leading-tight">{subtitle}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex min-h-0 w-full flex-1 flex-col gap-4">
|
|
{isLoading ? (
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
<SkeletonText className="h-40 w-full" />
|
|
<SkeletonText className="h-40 w-full" />
|
|
</div>
|
|
) : (
|
|
children
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="flex w-full items-center justify-start px-5 py-4">{footer}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|