Adding labels (#2783)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
pull/2066/head
sean-brydon 2022-05-23 09:11:04 +01:00 committed by GitHub
parent c92283f03d
commit 7d7c61a1ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 69 additions and 45 deletions

View File

@ -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"

View File

@ -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

View File

@ -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";

View File

@ -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">