b5b41da183
* storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Add exports for differnt types of inputs * Fix form and text area input * Fix mass import errors Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: Alex van Andel <me@alexvanandel.com>
58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import { useAutoAnimate } from "@formkit/auto-animate/react";
|
|
import { ReactNode } from "react";
|
|
|
|
import { Label } from "../../components/form";
|
|
import Switch from "./Switch";
|
|
|
|
type Props = {
|
|
children?: ReactNode;
|
|
title: string;
|
|
description?: string;
|
|
checked: boolean;
|
|
disabled?: boolean;
|
|
onCheckedChange?: (checked: boolean) => void;
|
|
"data-testid"?: string;
|
|
};
|
|
|
|
function SettingsToggle({
|
|
checked,
|
|
onCheckedChange,
|
|
description,
|
|
title,
|
|
children,
|
|
disabled,
|
|
...rest
|
|
}: Props) {
|
|
const [animateRef] = useAutoAnimate<HTMLDivElement>();
|
|
|
|
return (
|
|
<>
|
|
<div className="flex w-full flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
|
|
<fieldset className="block w-full flex-col sm:flex">
|
|
<div className="flex space-x-3">
|
|
<Switch
|
|
data-testid={rest["data-testid"]}
|
|
fitToHeight={true}
|
|
checked={checked}
|
|
onCheckedChange={onCheckedChange}
|
|
disabled={disabled}
|
|
/>
|
|
|
|
<div className="">
|
|
<Label className="text-sm font-semibold leading-none text-black">{title}</Label>
|
|
{description && <p className="-mt-2 text-sm leading-normal text-gray-600">{description}</p>}
|
|
</div>
|
|
</div>
|
|
{children && (
|
|
<div className="lg:ml-14" ref={animateRef}>
|
|
{checked && <div className="mt-4">{children}</div>}
|
|
</div>
|
|
)}
|
|
</fieldset>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default SettingsToggle;
|