From c0f4c8e0357831fd4694877aa819ed345272564c Mon Sep 17 00:00:00 2001 From: Nafees Nazik <84864519+G3root@users.noreply.github.com> Date: Tue, 14 Mar 2023 18:04:41 +0530 Subject: [PATCH] fix: bookings request reschedule UI badge (#7436) * feat: update badge component * fix: use the camel cased startIcon prop * fix: reschedule request badge * fix: use the camel cased startIcon prop * fix: remove bold prop * Removed extra whitespace in HTML --------- Co-authored-by: Keith Williams --- .../components/booking/BookingListItem.tsx | 11 +-- apps/web/pages/booking/[uid].tsx | 4 +- .../pages/forms/[...appPages].tsx | 6 +- .../components/EventTypeDescription.tsx | 16 ++-- .../webhooks/components/WebhookListItem.tsx | 9 +- packages/ui/components/badge/Badge.tsx | 92 +++++++++---------- .../ui/components/badge/badge.stories.mdx | 10 +- 7 files changed, 68 insertions(+), 80 deletions(-) diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx index 3a292627be..43588e6967 100644 --- a/apps/web/components/booking/BookingListItem.tsx +++ b/apps/web/components/booking/BookingListItem.tsx @@ -189,10 +189,9 @@ function BookingListItem(booking: BookingItemProps) { const RequestSentMessage = () => { return ( -
- -

{t("reschedule_request_sent")}

-
+ + {t("reschedule_request_sent")} + ); }; @@ -396,13 +395,13 @@ function BookingListItem(booking: BookingItemProps) { /> )} {isCancelled && booking.rescheduled && ( -
+
)}
- + {isUpcoming && !isCancelled ? ( <> {isPending && user?.id === booking.user?.id && } diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx index 756b8e08a3..751c61705e 100644 --- a/apps/web/pages/booking/[uid].tsx +++ b/apps/web/pages/booking/[uid].tsx @@ -519,9 +519,7 @@ export default function Success(props: SuccessProps) {

{bookingInfo.user.name} - - {t("Host")} - + {t("Host")}

{bookingInfo.user.email}

diff --git a/packages/app-store/routing-forms/pages/forms/[...appPages].tsx b/packages/app-store/routing-forms/pages/forms/[...appPages].tsx index cdcc5944cd..0182a80387 100644 --- a/packages/app-store/routing-forms/pages/forms/[...appPages].tsx +++ b/packages/app-store/routing-forms/pages/forms/[...appPages].tsx @@ -233,13 +233,13 @@ export default function RoutingForms({ }>
- + {fields.length} {fields.length === 1 ? "field" : "fields"} - + {form.routes.length} {form.routes.length === 1 ? "route" : "routes"} - + {form._count.responses} {form._count.responses === 1 ? "response" : "responses"}
diff --git a/packages/features/eventtypes/components/EventTypeDescription.tsx b/packages/features/eventtypes/components/EventTypeDescription.tsx index a89611ba8d..9c99227204 100644 --- a/packages/features/eventtypes/components/EventTypeDescription.tsx +++ b/packages/features/eventtypes/components/EventTypeDescription.tsx @@ -65,21 +65,21 @@ export const EventTypeDescription = ({ {eventType.metadata?.multipleDuration ? ( eventType.metadata.multipleDuration.map((dur, idx) => (
  • - + {dur}m
    • )) ) : (
  • - + {eventType.length}m
    • )} {eventType.schedulingType && (
  • - + {eventType.schedulingType === SchedulingType.ROUND_ROBIN && t("round_robin")} {eventType.schedulingType === SchedulingType.COLLECTIVE && t("collective")} @@ -87,7 +87,7 @@ export const EventTypeDescription = ({ )} {recurringEvent?.count && recurringEvent.count > 0 && (
  • - + {t("repeats_up_to", { count: recurringEvent.count, })} @@ -96,7 +96,7 @@ export const EventTypeDescription = ({ )} {stripeAppData.price > 0 && (
  • - + - + {eventType.metadata?.requiresConfirmationThreshold ? t("may_require_confirmation") : t("requires_confirmation")} @@ -119,7 +119,7 @@ export const EventTypeDescription = ({ {/* TODO: Maybe add a tool tip to this? */} {eventType.requiresConfirmation || (recurringEvent?.count && recurringEvent.count) ? (
  • - +

    {[eventType.requiresConfirmation, recurringEvent?.count].filter(Boolean).length}
    • @@ -128,7 +128,7 @@ export const EventTypeDescription = ({ )} {eventType?.seatsPerTimeSlot ? (
  • - +

    {t("event_type_seats", { numberOfSeats: eventType.seatsPerTimeSlot })}

    • diff --git a/packages/features/webhooks/components/WebhookListItem.tsx b/packages/features/webhooks/components/WebhookListItem.tsx index e613f7256b..f332157262 100644 --- a/packages/features/webhooks/components/WebhookListItem.tsx +++ b/packages/features/webhooks/components/WebhookListItem.tsx @@ -1,4 +1,4 @@ -import { WebhookTriggerEvents } from "@prisma/client"; +import type { WebhookTriggerEvents } from "@prisma/client"; import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -46,12 +46,7 @@ export default function WebhookListItem(props: {
    {webhook.eventTriggers.map((trigger) => ( - + {t(`${trigger.toLowerCase()}`)} ))} diff --git a/packages/ui/components/badge/Badge.tsx b/packages/ui/components/badge/Badge.tsx index 91e220cb25..df3359d473 100644 --- a/packages/ui/components/badge/Badge.tsx +++ b/packages/ui/components/badge/Badge.tsx @@ -1,62 +1,58 @@ +import type { VariantProps } from "class-variance-authority"; +import { cva } from "class-variance-authority"; +import type { ComponentProps, ReactNode } from "react"; import { GoPrimitiveDot } from "react-icons/go"; import classNames from "@calcom/lib/classNames"; import type { SVGComponent } from "@calcom/types/SVGComponent"; -const badgeClassNameByVariant = { - default: "bg-orange-100 text-orange-800", - warning: "bg-orange-100 text-orange-800", - orange: "bg-orange-100 text-orange-800", - success: "bg-green-100 text-green-800", - green: "bg-green-100 text-green-800", - gray: "bg-gray-100 text-gray-800 dark:bg-darkgray-200 dark:text-darkgray-800 group-hover:bg-gray-200 dark:group-hover:bg-darkgray-300", - blue: "bg-blue-100 text-blue-800", - red: "bg-red-100 text-red-800", - error: "bg-red-100 text-red-800", -}; +const badgeStyles = cva("font-medium inline-flex items-center justify-center rounded gap-x-1", { + variants: { + variant: { + default: "bg-orange-100 text-orange-800", + warning: "bg-orange-100 text-orange-800", + orange: "bg-orange-100 text-orange-800", + success: "bg-green-100 text-green-800", + green: "bg-green-100 text-green-800", + gray: "bg-gray-100 text-gray-800 dark:bg-darkgray-200 dark:text-darkgray-800 group-hover:bg-gray-200 dark:group-hover:bg-darkgray-300", + blue: "bg-blue-100 text-blue-800", + red: "bg-red-100 text-red-800", + error: "bg-red-100 text-red-800", + }, + size: { + sm: "px-1 py-0.5 text-xs", + md: "py-1 px-1.5 text-xs", + lg: "py-1 px-2 text-sm", + }, + }, + defaultVariants: { + variant: "default", + size: "sm", + }, +}); -const classNameBySize = { - default: "h-5", - lg: "h-6", -}; +type InferredBadgeStyles = VariantProps; -export type BadgeProps = { - variant: keyof typeof badgeClassNameByVariant; - size?: keyof typeof classNameBySize; - StartIcon?: SVGComponent; - bold?: boolean; - withDot?: boolean; - rounded?: boolean; -} & JSX.IntrinsicElements["div"]; +type IconOrDot = + | { + startIcon?: SVGComponent; + withDot?: unknown; + } + | { startIcon?: unknown; withDot?: boolean }; + +export type BadgeProps = InferredBadgeStyles & + ComponentProps<"div"> & { children: ReactNode; rounded?: boolean } & IconOrDot; export const Badge = function Badge(props: BadgeProps) { - const { - variant = "default", - className, - size = "default", - rounded, - StartIcon, - withDot, - bold, - ...passThroughProps - } = props; - const hasIconOrDot = StartIcon || withDot; + const { variant, className, size, startIcon, withDot, children, rounded, ...passThroughProps } = props; + const StartIcon = startIcon ? (startIcon as SVGComponent) : undefined; return (
    - <> - {StartIcon && } - {withDot && } - {props.children} - + className={classNames(badgeStyles({ variant, size }), rounded && "h-5 w-5 rounded-full p-0", className)} + {...passThroughProps}> + {withDot ? : null} + {StartIcon ? : null} +
    {children}
    ); }; diff --git a/packages/ui/components/badge/badge.stories.mdx b/packages/ui/components/badge/badge.stories.mdx index 36a247ecbb..6421e63db1 100644 --- a/packages/ui/components/badge/badge.stories.mdx +++ b/packages/ui/components/badge/badge.stories.mdx @@ -40,7 +40,7 @@ Status badge communicate status information. It is generally used within a cont Button Text - Button Text + Button Text @@ -61,22 +61,22 @@ Alet badge is used in conjunction with an item, profile or label to indicate num Badge text Badge text - Badge text + Badge text Badge text Badge text - Badge text + Badge text Badge text Badge text - Badge text + Badge text Badge text Badge text - Badge text + Badge text