d64400d66b
* Added proper dark mode support for buttons, and converted buttons to use CVA for better maintainable variant styling. * Added animations to buttons. * Added cva types to buttonbase type since thats imported in different places * Fixed issue with styled buttons when false was pas for disabled instead of undefined. Added a small util function that now accepts arrays of variants, and creates all the possible combinations. This way we have less duplicate compoundvariants defined. This fixes the styles in the eventsinglelayout component. * Undo disabling of api jest tests. * Fixed remaining buttons using combined prop, which is replace by button group. Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
import React, { ReactElement, ReactNode } from "react";
|
|
|
|
import { classNames } from "@calcom/lib";
|
|
|
|
export function VariantsTable({
|
|
children,
|
|
titles,
|
|
isDark,
|
|
columnMinWidth = 150,
|
|
}: {
|
|
children: ReactElement<RowProps> | ReactElement<RowProps>[];
|
|
titles: string[];
|
|
isDark?: boolean;
|
|
// Mainly useful on mobile, so components don't get squeesed
|
|
columnMinWidth?: number;
|
|
}) {
|
|
const columns = React.Children.toArray(children) as ReactElement<RowProps>[];
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
isDark &&
|
|
"relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#1C1C1C]"
|
|
)}>
|
|
<div className="z-1 relative mx-auto w-full max-w-[1200px] overflow-auto pr-8 pt-6">
|
|
<table>
|
|
<RowTitles titles={titles} />
|
|
{columns.map((column) => (
|
|
<tr className="p-2 pr-6 pb-6" key={column.props.variant}>
|
|
<th
|
|
className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]"
|
|
key={column.props.variant}>
|
|
{column.props.variant}
|
|
</th>
|
|
{React.Children.count(column.props.children) &&
|
|
React.Children.map(column.props.children, (cell) => (
|
|
<td className="p-2 pr-6 pb-6" style={{ minWidth: `${columnMinWidth}px` }}>
|
|
{cell}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</table>
|
|
</div>
|
|
{!isDark && (
|
|
<div data-mode="dark">
|
|
<VariantsTable titles={titles} isDark columnMinWidth={columnMinWidth}>
|
|
{children}
|
|
</VariantsTable>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface RowProps {
|
|
variant: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* There are two reasons we have this "empty" wrapper component:
|
|
* 1. In order to have an isolate group per variant, which we iterate through in the table component.
|
|
* 2. To have a way to pass the variant.
|
|
*/
|
|
export function VariantRow({ children }: RowProps) {
|
|
return <>{children}</>;
|
|
}
|
|
|
|
export function RowTitles({ titles }: { titles: string[] }) {
|
|
return (
|
|
<tr>
|
|
<th className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]" />
|
|
{titles.map((title) => (
|
|
<th className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]" key={title}>
|
|
{title}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
);
|
|
}
|