mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Add 'Button' component & update to current best practise (#523)

Browse source 
* Add 'Button' component & update to current best practise

* Use literal string for type, renamed alert -> variety

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
This commit is contained in:
Alex van Andel 2021-08-27 15:22:49 +01:00 committed by GitHub
parent a37411b8af
commit 252179f3be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
components/dialog/ConfirmationDialogContent.tsx
View file

@ -1,25 +1,26 @@
import { DialogClose, DialogContent } from "@components/Dialog"; import { DialogClose, DialogContent } from "@components/Dialog";
import * as DialogPrimitive from "@radix-ui/react-dialog"; import * as DialogPrimitive from "@radix-ui/react-dialog";
import { ExclamationIcon } from "@heroicons/react/outline"; import { ExclamationIcon } from "@heroicons/react/outline";
import React from "react"; import React, { PropsWithChildren } from "react";
import { Button } from "@components/ui/Button";
export default function ConfirmationDialogContent({ export type ConfirmationDialogContentProps = {
title, confirmBtnText?: string;
alert, cancelBtnText?: string;
confirmBtnText, onConfirm: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
cancelBtnText, title: string;
onConfirm, variety?: "danger" /* no others yet */;
children, };
}) {
confirmBtnText = confirmBtnText || "Confirm"; export default function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationDialogContentProps>) {
cancelBtnText = cancelBtnText || "Cancel"; const { title, variety, confirmBtnText = "Confirm", cancelBtnText = "Cancel", onConfirm, children } = props;
return ( return (
<DialogContent> <DialogContent>
<div className="flex"> <div className="flex">
{alert && ( {variety && (
<div className="mr-3 mt-0.5"> <div className="mr-3 mt-0.5">
{alert === "danger" && ( {variety === "danger" && (
<div className="text-center p-2 rounded-full mx-auto bg-red-100"> <div className="text-center p-2 rounded-full mx-auto bg-red-100">
<ExclamationIcon className="w-5 h-5 text-red-600" /> <ExclamationIcon className="w-5 h-5 text-red-600" />
</div> </div>
@ -31,11 +32,13 @@ export default function ConfirmationDialogContent({
<DialogPrimitive.Description className="text-neutral-500">{children}</DialogPrimitive.Description> <DialogPrimitive.Description className="text-neutral-500">{children}</DialogPrimitive.Description>
</div> </div>
</div> </div>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"> <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-x-2">
<DialogClose onClick={onConfirm} className="btn btn-primary"> <DialogClose as={Button} color="primary" onClick={onConfirm}>
{confirmBtnText} {confirmBtnText}
</DialogClose> </DialogClose>
<DialogClose className="btn btn-white mx-2">{cancelBtnText}</DialogClose> <DialogClose as={Button} color="secondary">
{cancelBtnText}
</DialogClose>
</div> </div>
</DialogContent> </DialogContent>
); );

2
pages/event-types/[type].tsx
View file

@ -858,7 +858,7 @@ const EventTypePage = (props: InferGetServerSidePropsType<typeof getServerSidePr
Delete Delete
</DialogTrigger> </DialogTrigger>
<ConfirmationDialogContent <ConfirmationDialogContent
alert="danger" variety="danger"
title="Delete Event Type" title="Delete Event Type"
confirmBtnText="Yes, delete event type" confirmBtnText="Yes, delete event type"
onConfirm={deleteEventTypeHandler}> onConfirm={deleteEventTypeHandler}>