first commit
This commit is contained in:
246
calcom/packages/ui/components/card/Card.tsx
Normal file
246
calcom/packages/ui/components/card/Card.tsx
Normal file
@@ -0,0 +1,246 @@
|
||||
// @TODO: turn this into a more generic component that has the same Props API as MUI https://mui.com/material-ui/react-card/
|
||||
import type { VariantProps } from "class-variance-authority";
|
||||
import { cva } from "class-variance-authority";
|
||||
import Link from "next/link";
|
||||
import type { ReactNode } from "react";
|
||||
import React from "react";
|
||||
|
||||
import classNames from "@calcom/lib/classNames";
|
||||
|
||||
import { Button } from "../button";
|
||||
|
||||
const cvaCardTypeByVariant = cva("", {
|
||||
// Variants won't have any style by default. Style will only be applied if the variants are combined.
|
||||
// So, style is defined in compoundVariants.
|
||||
variants: {
|
||||
variant: {
|
||||
basic: "",
|
||||
ProfileCard: "",
|
||||
SidebarCard: "",
|
||||
},
|
||||
structure: {
|
||||
image: "",
|
||||
card: "",
|
||||
title: "",
|
||||
description: "",
|
||||
},
|
||||
},
|
||||
compoundVariants: [
|
||||
// Style for Basic Variants types
|
||||
{
|
||||
variant: "basic",
|
||||
structure: "image",
|
||||
className: "w-10 h-auto",
|
||||
},
|
||||
{
|
||||
variant: "basic",
|
||||
structure: "card",
|
||||
className: "p-5",
|
||||
},
|
||||
{
|
||||
variant: "basic",
|
||||
structure: "title",
|
||||
className: "text-base mt-4",
|
||||
},
|
||||
{
|
||||
variant: "basic",
|
||||
structure: "description",
|
||||
className: "text-sm leading-[18px] text-subtle font-normal",
|
||||
},
|
||||
|
||||
// Style for ProfileCard Variant Types
|
||||
{
|
||||
variant: "ProfileCard",
|
||||
structure: "image",
|
||||
className: "w-9 h-auto rounded-full mb-4s",
|
||||
},
|
||||
{
|
||||
variant: "ProfileCard",
|
||||
structure: "card",
|
||||
className: "w-80 p-4 hover:bg-subtle",
|
||||
},
|
||||
{
|
||||
variant: "ProfileCard",
|
||||
structure: "title",
|
||||
className: "text-base",
|
||||
},
|
||||
{
|
||||
variant: "ProfileCard",
|
||||
structure: "description",
|
||||
className: "text-sm leading-[18px] text-subtle font-normal",
|
||||
},
|
||||
|
||||
// Style for SidebarCard Variant Types
|
||||
{
|
||||
variant: "SidebarCard",
|
||||
structure: "image",
|
||||
className: "w-9 h-auto rounded-full mb-4s",
|
||||
},
|
||||
{
|
||||
variant: "SidebarCard",
|
||||
structure: "card",
|
||||
className: "w-full p-3 border border-subtle",
|
||||
},
|
||||
{
|
||||
variant: "SidebarCard",
|
||||
structure: "title",
|
||||
className: "text-sm font-cal",
|
||||
},
|
||||
{
|
||||
variant: "SidebarCard",
|
||||
structure: "description",
|
||||
className: "text-xs text-default line-clamp-2",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
type CVACardType = Required<Pick<VariantProps<typeof cvaCardTypeByVariant>, "variant">>;
|
||||
|
||||
export interface BaseCardProps extends CVACardType {
|
||||
image?: string;
|
||||
icon?: ReactNode;
|
||||
imageProps?: JSX.IntrinsicElements["img"];
|
||||
title: string;
|
||||
description: ReactNode;
|
||||
containerProps?: JSX.IntrinsicElements["div"];
|
||||
actionButton?: {
|
||||
href?: string;
|
||||
child: ReactNode;
|
||||
onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
||||
"data-testId"?: string;
|
||||
};
|
||||
learnMore?: {
|
||||
href: string;
|
||||
text: string;
|
||||
};
|
||||
mediaLink?: string;
|
||||
thumbnailUrl?: string;
|
||||
structure?: string;
|
||||
}
|
||||
|
||||
export function Card({
|
||||
image,
|
||||
title,
|
||||
icon,
|
||||
description,
|
||||
variant,
|
||||
actionButton,
|
||||
containerProps,
|
||||
imageProps,
|
||||
mediaLink,
|
||||
thumbnailUrl,
|
||||
learnMore,
|
||||
}: BaseCardProps) {
|
||||
const LinkComponent = learnMore && learnMore.href.startsWith("https") ? "a" : Link;
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
containerProps?.className,
|
||||
cvaCardTypeByVariant({ variant, structure: "card" }),
|
||||
"bg-default border-subtle text-default flex flex-col justify-between rounded-md border"
|
||||
)}
|
||||
data-testid="card-container"
|
||||
{...containerProps}>
|
||||
<div>
|
||||
{icon && icon}
|
||||
{image && (
|
||||
<img
|
||||
src={image}
|
||||
// Stops eslint complaining - not smart enough to realise it comes from ...imageProps
|
||||
alt={imageProps?.alt}
|
||||
className={classNames(
|
||||
imageProps?.className,
|
||||
cvaCardTypeByVariant({ variant, structure: "image" })
|
||||
)}
|
||||
{...imageProps}
|
||||
/>
|
||||
)}
|
||||
<h5
|
||||
title={title}
|
||||
className={classNames(
|
||||
cvaCardTypeByVariant({ variant, structure: "title" }),
|
||||
"text-emphasis line-clamp-1 font-bold leading-5"
|
||||
)}>
|
||||
{title}
|
||||
</h5>
|
||||
{description && (
|
||||
<p
|
||||
title={description.toString()}
|
||||
className={classNames(cvaCardTypeByVariant({ variant, structure: "description" }), "pt-1")}>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{variant === "SidebarCard" && (
|
||||
<a
|
||||
onClick={actionButton?.onClick}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href={mediaLink}
|
||||
data-testId={actionButton?.["data-testId"]}
|
||||
className="group relative my-3 flex aspect-video items-center overflow-hidden rounded">
|
||||
<div className="absolute inset-0 bg-black bg-opacity-50 transition group-hover:bg-opacity-40" />
|
||||
<svg
|
||||
className="text-inverted absolute left-1/2 top-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform rounded-full shadow-lg hover:-mt-px"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M12.1667 8.5L23.8334 16L12.1667 23.5V8.5Z"
|
||||
fill="#111827"
|
||||
stroke="#111827"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<img alt="play feature video" src={thumbnailUrl} />
|
||||
</a>
|
||||
)}
|
||||
|
||||
{/* TODO: this should be CardActions https://mui.com/material-ui/api/card-actions/ */}
|
||||
{variant === "basic" && actionButton && (
|
||||
<div>
|
||||
<Button
|
||||
color="secondary"
|
||||
href={actionButton?.href}
|
||||
className="mt-10"
|
||||
EndIcon="arrow-right"
|
||||
data-testId={actionButton["data-testId"]}>
|
||||
{actionButton?.child}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{variant === "SidebarCard" && (
|
||||
<div className="mt-2 flex items-center justify-between">
|
||||
{learnMore && (
|
||||
<LinkComponent
|
||||
href={learnMore.href}
|
||||
onClick={actionButton?.onClick}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-default text-xs font-medium">
|
||||
{learnMore.text}
|
||||
</LinkComponent>
|
||||
)}
|
||||
{actionButton?.child && (
|
||||
<button
|
||||
className="text-default hover:text-emphasis p-0 text-xs font-normal"
|
||||
color="minimal"
|
||||
data-testId={actionButton?.["data-testId"]}
|
||||
onClick={actionButton?.onClick}>
|
||||
{actionButton?.child}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Card;
|
||||
79
calcom/packages/ui/components/card/FormCard.tsx
Normal file
79
calcom/packages/ui/components/card/FormCard.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import Link from "next/link";
|
||||
|
||||
import { classNames } from "@calcom/lib";
|
||||
|
||||
import type { BadgeProps } from "../..";
|
||||
import { Badge, Icon } from "../..";
|
||||
import { Divider } from "../divider";
|
||||
|
||||
type Action = { check: () => boolean; fn: () => void };
|
||||
export default function FormCard({
|
||||
children,
|
||||
label,
|
||||
deleteField,
|
||||
moveUp,
|
||||
moveDown,
|
||||
className,
|
||||
badge,
|
||||
...restProps
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
label?: React.ReactNode;
|
||||
deleteField?: Action | null;
|
||||
moveUp?: Action | null;
|
||||
moveDown?: Action | null;
|
||||
className?: string;
|
||||
badge?: { text: string; href?: string; variant: BadgeProps["variant"] } | null;
|
||||
} & JSX.IntrinsicElements["div"]) {
|
||||
className = classNames(
|
||||
className,
|
||||
"flex items-center group relative w-full rounded-md p-4 border border-subtle"
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={className} {...restProps}>
|
||||
<div>
|
||||
{moveUp?.check() ? (
|
||||
<button
|
||||
type="button"
|
||||
className="bg-default text-muted hover:text-emphasis invisible absolute left-0 -ml-[13px] -mt-10 flex h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:border-transparent hover:shadow group-hover:visible group-hover:scale-100 "
|
||||
onClick={() => moveUp?.fn()}>
|
||||
<Icon name="arrow-up" />
|
||||
</button>
|
||||
) : null}
|
||||
{moveDown?.check() ? (
|
||||
<button
|
||||
type="button"
|
||||
className="bg-default text-muted hover:text-emphasis invisible absolute left-0 -ml-[13px] -mt-2 flex h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:border-transparent hover:shadow group-hover:visible group-hover:scale-100"
|
||||
onClick={() => moveDown?.fn()}>
|
||||
<Icon name="arrow-down" />
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-emphasis text-sm font-semibold">{label}</span>
|
||||
{badge && (
|
||||
<Badge className="ml-2" variant={badge.variant}>
|
||||
{badge.href ? <Link href={badge.href}>{badge.text}</Link> : badge.text}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{deleteField?.check() ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
deleteField?.fn();
|
||||
}}
|
||||
color="secondary">
|
||||
<Icon name="trash-2" className="text-default h-4 w-4" />
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
<Divider className="mb-6 mt-3" />
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
calcom/packages/ui/components/card/StepCard.tsx
Normal file
9
calcom/packages/ui/components/card/StepCard.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
const StepCard: React.FC<{ children: React.ReactNode }> = (props) => {
|
||||
return (
|
||||
<div className="sm:border-subtle bg-default mt-10 border p-4 dark:bg-black sm:rounded-md sm:p-8">
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { StepCard };
|
||||
69
calcom/packages/ui/components/card/card.stories.mdx
Normal file
69
calcom/packages/ui/components/card/card.stories.mdx
Normal file
@@ -0,0 +1,69 @@
|
||||
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
||||
|
||||
import {
|
||||
Examples,
|
||||
Example,
|
||||
Note,
|
||||
Title,
|
||||
CustomArgsTable,
|
||||
VariantsTable,
|
||||
VariantRow,
|
||||
} from "@calcom/storybook/components";
|
||||
|
||||
import Card from "./Card";
|
||||
|
||||
<Meta title="UI/Card" component={Card} />
|
||||
|
||||
<Title title="Card" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023" />
|
||||
|
||||
## Definition
|
||||
|
||||
All Cards used in Cal.com
|
||||
|
||||
<CustomArgsTable of={Card} />
|
||||
|
||||
export const tip = {
|
||||
id: 1,
|
||||
thumbnailUrl: "https://img.youtube.com/vi/60HJt8DOVNo/0.jpg",
|
||||
mediaLink: "https://go.cal.com/dynamic-video",
|
||||
title: "Dynamic booking links",
|
||||
description: "Booking link that allows people to quickly schedule meetings.",
|
||||
href: "https://cal.com/blog/cal-v-1-9",
|
||||
};
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Card"
|
||||
args={{
|
||||
thumbnailUrl: tip.thumbnailUrl,
|
||||
mediaLink: tip.mediaLink,
|
||||
title: tip.title,
|
||||
description: tip.description,
|
||||
learnMoreHref: tip.href,
|
||||
learnMoreText: "learn more",
|
||||
}}
|
||||
argTypes={{
|
||||
thumbnailUrl: { control: { type: "text" } },
|
||||
mediaLink: { control: { type: "text" } },
|
||||
title: { control: { type: "text" } },
|
||||
description: { control: { type: "text" } },
|
||||
learnMoreHref: { control: { type: "text" } },
|
||||
learnMoreText: { control: { type: "text" } },
|
||||
}}>
|
||||
{({ thumbnailUrl, mediaLink, title, description, learnMoreText }) => (
|
||||
<VariantsTable titles={[""]} columnMinWidth={150}>
|
||||
<VariantRow variant="Sidebar Card">
|
||||
<Card
|
||||
variant="SidebarCard"
|
||||
thumbnailUrl={thumbnailUrl}
|
||||
mediaLink={mediaLink}
|
||||
title={title}
|
||||
description={description}
|
||||
learnMore={{ href: tip.href, text: learnMoreText }}
|
||||
actionButton={{ onClick: () => console.log("Clicked") }}
|
||||
/>
|
||||
</VariantRow>
|
||||
</VariantsTable>
|
||||
)}
|
||||
</Story>
|
||||
</Canvas>
|
||||
99
calcom/packages/ui/components/card/card.test.tsx
Normal file
99
calcom/packages/ui/components/card/card.test.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
/* eslint-disable playwright/missing-playwright-await */
|
||||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
|
||||
import { Card } from "./Card";
|
||||
|
||||
const title = "Card Title";
|
||||
const description = "Card Description";
|
||||
|
||||
describe("Tests for Card component", () => {
|
||||
test("Should render the card with basic variant and image structure", () => {
|
||||
const variant = "basic";
|
||||
|
||||
render(<Card title={title} description={description} variant={variant} structure="image" />);
|
||||
|
||||
const cardTitle = screen.getByText(title);
|
||||
const cardDescription = screen.getByText(description);
|
||||
|
||||
expect(cardTitle).toBeInTheDocument();
|
||||
expect(cardDescription).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("Should render the card with ProfileCard variant and card structure", () => {
|
||||
const variant = "ProfileCard";
|
||||
const structure = "card";
|
||||
|
||||
render(<Card title={title} description={description} variant={variant} structure={structure} />);
|
||||
|
||||
const cardTitle = screen.getByText(title);
|
||||
const cardDescription = screen.getByText(description);
|
||||
|
||||
expect(cardTitle).toBeInTheDocument();
|
||||
expect(cardDescription).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("Should render the card with SidebarCard variant and title structure", () => {
|
||||
const variant = "SidebarCard";
|
||||
const structure = "title";
|
||||
|
||||
render(<Card title={title} description={description} variant={variant} structure={structure} />);
|
||||
|
||||
const cardTitle = screen.getByText(title);
|
||||
const cardDescription = screen.getByText(description);
|
||||
|
||||
expect(cardTitle).toBeInTheDocument();
|
||||
expect(cardDescription).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("Should render button click", () => {
|
||||
render(
|
||||
<Card title={title} description={description} variant="basic" actionButton={{ child: "Button" }} />
|
||||
);
|
||||
|
||||
const buttonElement = screen.getByRole("button", { name: "Button" });
|
||||
|
||||
expect(buttonElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("Should handle link click", () => {
|
||||
render(
|
||||
<Card
|
||||
title={title}
|
||||
description={description}
|
||||
variant="basic"
|
||||
learnMore={{
|
||||
href: "http://localhost:3000/",
|
||||
text: "Learn More",
|
||||
}}
|
||||
actionButton={{ child: "Button" }}
|
||||
/>
|
||||
);
|
||||
|
||||
const linkElement = screen.getByRole("button", { name: "Button" });
|
||||
|
||||
fireEvent.click(linkElement);
|
||||
|
||||
expect(window.location.href).toBe("http://localhost:3000/");
|
||||
});
|
||||
|
||||
test("Should render card with SidebarCard variant and learn more link", () => {
|
||||
render(
|
||||
<Card
|
||||
title={title}
|
||||
description={description}
|
||||
variant="SidebarCard"
|
||||
learnMore={{ href: "http://example.com", text: "Learn More" }}
|
||||
/>
|
||||
);
|
||||
|
||||
const cardContainer = screen.getByTestId("card-container");
|
||||
const titleElement = screen.getByText(title);
|
||||
const descriptionElement = screen.getByText(description);
|
||||
const learnMoreLink = screen.getByRole("link", { name: "Learn More" });
|
||||
|
||||
expect(cardContainer).toBeInTheDocument();
|
||||
expect(titleElement).toBeInTheDocument();
|
||||
expect(descriptionElement).toBeInTheDocument();
|
||||
expect(learnMoreLink).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
4
calcom/packages/ui/components/card/index.ts
Normal file
4
calcom/packages/ui/components/card/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export { default as Card } from "./Card";
|
||||
export type { BaseCardProps } from "./Card";
|
||||
export { StepCard } from "./StepCard";
|
||||
export { default as FormCard } from "./FormCard";
|
||||
Reference in New Issue
Block a user