added <InfoBadge> component with tooltip (#1609)

* added <InfoBadge> component with tooltip, added to event-types event name

* added title to <InfoBadge> for a12y

components/ui/InfoBadge.tsx

@@ -0,0 +1,15 @@
+import { InformationCircleIcon } from "@heroicons/react/solid";
+
+import { Tooltip } from "@components/Tooltip";
+
+export default function InfoBadge({ content }: { content: string }) {
+  return (
+    <>
+      <Tooltip content={content}>
+        <span title={content}>
+          <InformationCircleIcon className="relative w-4 h-4 mt-px text-gray-500 top-px left-1 right-1" />
+        </span>
+      </Tooltip>
+    </>
+  );
+}

components/ui/form/CheckboxField.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, InputHTMLAttributes } from "react";
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
-  label: string;
+  label: React.ReactNode;
   description: string;
 };
 

pages/event-types/[type].tsx

@@ -46,6 +46,7 @@ import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogCont
 import { Form } from "@components/form/fields";
 import CustomInputTypeForm from "@components/pages/eventtypes/CustomInputTypeForm";
 import Button from "@components/ui/Button";
+import InfoBadge from "@components/ui/InfoBadge";
 import { Scheduler } from "@components/ui/Scheduler";
 import Switch from "@components/ui/Switch";
 import CheckboxField from "@components/ui/form/CheckboxField";
@@ -712,7 +713,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                       <div className="items-center block sm:flex">
                         <div className="mb-4 min-w-48 sm:mb-0">
                           <label htmlFor="eventName" className="flex text-sm font-medium text-neutral-700">
-                            {t("event_name")}
+                            {t("event_name")} <InfoBadge content={t("event_name_tooltip")} />
                           </label>
                         </div>
                         <div className="w-full">

public/static/locales/en/common.json

@@ -509,6 +509,7 @@
   "add_attendees": "Add attendees",
   "show_advanced_settings": "Show advanced settings",
   "event_name": "Event Name",
+  "event_name_tooltip": "The name that will appear in calendars",
   "meeting_with_user": "Meeting with {USER}",
   "additional_inputs": "Additional Inputs",
   "label": "Label",