Adding labels (#2783)
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>pull/2066/head
sean-brydon
GitHub
parent
c92283f03d
commit
7d7c61a1ab
|
|
@ -206,6 +206,7 @@ const Layout = ({
|
|||
<Fragment key={item.name}>
|
||||
<Link href={item.href}>
|
||||
<a
|
||||
aria-label={item.name}
|
||||
className={classNames(
|
||||
item.current
|
||||
? "bg-neutral-100 text-neutral-900"
|
||||
|
|
|
|||
|
|
@ -44,9 +44,7 @@ export default function RecurringEventController({
|
|||
return (
|
||||
<div className="block items-start sm:flex">
|
||||
<div className="min-w-48 mb-4 sm:mb-0">
|
||||
<label htmlFor="recurringEvent" className="flex text-sm font-medium text-neutral-700">
|
||||
{t("recurring_event")}
|
||||
</label>
|
||||
<span className="flex text-sm font-medium text-neutral-700">{t("recurring_event")}</span>
|
||||
</div>
|
||||
<div className={!paymentEnabled ? "w-full" : ""}>
|
||||
{paymentEnabled ? (
|
||||
|
|
@ -79,10 +77,13 @@ export default function RecurringEventController({
|
|||
className="text-primary-600 h-4 w-4 rounded border-gray-300"
|
||||
defaultChecked={recurringEventDefined}
|
||||
data-testid="recurring-event-check"
|
||||
id="recurringEvent"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-sm ltr:ml-3 rtl:mr-3">
|
||||
<p className="text-neutral-900">{t("recurring_event_description")}</p>
|
||||
<label htmlFor="recurringEvent" className="text-neutral-900">
|
||||
{t("recurring_event_description")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<Collapsible
|
||||
|
|
|
|||
|
|
@ -1,36 +1,56 @@
|
|||
import React, { forwardRef, InputHTMLAttributes } from "react";
|
||||
|
||||
import InfoBadge from "@components/ui/InfoBadge";
|
||||
|
||||
type Props = InputHTMLAttributes<HTMLInputElement> & {
|
||||
label: React.ReactNode;
|
||||
label?: React.ReactNode;
|
||||
description: string;
|
||||
descriptionAsLabel?: boolean;
|
||||
infomationIconText?: string;
|
||||
};
|
||||
|
||||
const CheckboxField = forwardRef<HTMLInputElement, Props>(({ label, description, ...rest }, ref) => {
|
||||
return (
|
||||
<div className="block items-center sm:flex">
|
||||
<div className="min-w-48 mb-4 sm:mb-0">
|
||||
<label htmlFor={rest.id} className="flex text-sm font-medium text-neutral-700">
|
||||
{label}
|
||||
</label>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="relative flex items-start">
|
||||
<div className="flex h-5 items-center">
|
||||
<input
|
||||
{...rest}
|
||||
ref={ref}
|
||||
type="checkbox"
|
||||
className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
|
||||
/>
|
||||
const CheckboxField = forwardRef<HTMLInputElement, Props>(
|
||||
({ label, description, infomationIconText, descriptionAsLabel, ...rest }, ref) => {
|
||||
return (
|
||||
<div className="block items-center sm:flex">
|
||||
{label && !descriptionAsLabel && (
|
||||
<div className="min-w-48 mb-4 sm:mb-0">
|
||||
<label htmlFor={rest.id} className="flex text-sm font-medium text-neutral-700">
|
||||
{label}
|
||||
</label>
|
||||
</div>
|
||||
<div className="text-sm ltr:ml-3 rtl:mr-3">
|
||||
<p className="text-neutral-900">{description}</p>
|
||||
)}
|
||||
{label && descriptionAsLabel && (
|
||||
<div className="min-w-48 mb-4 sm:mb-0">
|
||||
<span className="flex text-sm font-medium text-neutral-700">{label}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="w-full">
|
||||
<div className="relative flex items-start">
|
||||
<div className="flex h-5 items-center">
|
||||
<input
|
||||
{...rest}
|
||||
ref={ref}
|
||||
type="checkbox"
|
||||
className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-sm ltr:ml-3 rtl:mr-3">
|
||||
{!label || descriptionAsLabel ? (
|
||||
<label htmlFor={rest.id} className="text-neutral-700">
|
||||
{description}
|
||||
</label>
|
||||
) : (
|
||||
<p className="text-neutral-900">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
{infomationIconText && <InfoBadge content={infomationIconText}></InfoBadge>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
CheckboxField.displayName = "CheckboxField";
|
||||
|
||||
|
|
|
|||
|
|
@ -592,6 +592,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
resolver: zodResolver(locationFormSchema),
|
||||
});
|
||||
const Locations = () => {
|
||||
const { t } = useLocale();
|
||||
return (
|
||||
<div className="w-full">
|
||||
{formMethods.getValues("locations").length === 0 && (
|
||||
|
|
@ -628,31 +629,25 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
{location.type === LocationType.InPerson && (
|
||||
<div className="flex flex-grow items-center">
|
||||
<LocationMarkerIcon className="h-6 w-6" />
|
||||
<input
|
||||
disabled
|
||||
className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2"
|
||||
value={location.address}
|
||||
/>
|
||||
<span className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2">
|
||||
{location.link}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{location.type === LocationType.Link && (
|
||||
<div className="flex flex-grow items-center">
|
||||
<GlobeAltIcon className="h-6 w-6" />
|
||||
<input
|
||||
disabled
|
||||
className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2"
|
||||
value={location.link}
|
||||
/>
|
||||
<span className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2">
|
||||
{location.link}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{location.type === LocationType.UserPhone && (
|
||||
<div className="flex flex-grow items-center">
|
||||
<PhoneIcon className="h-6 w-6" />
|
||||
<input
|
||||
disabled
|
||||
className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2"
|
||||
value={location.hostPhoneNumber}
|
||||
/>
|
||||
<span className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2">
|
||||
{location.hostPhoneNumber}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{location.type === LocationType.Phone && (
|
||||
|
|
@ -1386,6 +1381,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
render={() => (
|
||||
<CheckboxField
|
||||
id="hideCalendarNotes"
|
||||
descriptionAsLabel
|
||||
name="hideCalendarNotes"
|
||||
label={t("disable_notes")}
|
||||
description={t("disable_notes_description")}
|
||||
|
|
@ -1404,6 +1400,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
render={() => (
|
||||
<CheckboxField
|
||||
id="requiresConfirmation"
|
||||
descriptionAsLabel
|
||||
name="requiresConfirmation"
|
||||
label={t("opt_in_booking")}
|
||||
description={t("opt_in_booking_description")}
|
||||
|
|
@ -1430,6 +1427,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
<CheckboxField
|
||||
id="disableGuests"
|
||||
name="disableGuests"
|
||||
descriptionAsLabel
|
||||
label={t("disable_guests")}
|
||||
description={t("disable_guests_description")}
|
||||
defaultChecked={eventType.disableGuests}
|
||||
|
|
@ -1449,6 +1447,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
<CheckboxField
|
||||
id="hashedLinkCheck"
|
||||
name="hashedLinkCheck"
|
||||
descriptionAsLabel
|
||||
label={t("private_link")}
|
||||
description={t("private_link_description")}
|
||||
defaultChecked={eventType.hashedLink ? true : false}
|
||||
|
|
@ -1567,7 +1566,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
</div>
|
||||
<hr className="my-2 border-neutral-200" />
|
||||
|
||||
<div className="block sm:flex">
|
||||
<fieldset className="block sm:flex">
|
||||
<div className="min-w-48 mb-4 sm:mb-0">
|
||||
<label
|
||||
htmlFor="inviteesCanSchedule"
|
||||
|
|
@ -1625,7 +1624,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
startDate={formMethods.getValues("periodDates").startDate}
|
||||
endDate={formMethods.getValues("periodDates").endDate}
|
||||
onDatesChange={({ startDate, endDate }) => {
|
||||
formMethods.setValue("periodDates", { startDate, endDate });
|
||||
formMethods.setValue("periodDates", {
|
||||
startDate,
|
||||
endDate,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -1641,7 +1643,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<hr className="border-neutral-200" />
|
||||
<div className="block sm:flex">
|
||||
<div className="min-w-48 mb-4 sm:mb-0">
|
||||
|
|
|
|||
Loading…
Reference in New Issue