From 1bf491305174f715639b8c8cacec8a20eee31913 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Tue, 25 Jan 2022 00:31:05 +0000
Subject: [PATCH] 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          | 15 +++++++++++++++
 components/ui/form/CheckboxField.tsx |  2 +-
 pages/event-types/[type].tsx         |  3 ++-
 public/static/locales/en/common.json |  1 +
 4 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 components/ui/InfoBadge.tsx

diff --git a/components/ui/InfoBadge.tsx b/components/ui/InfoBadge.tsx
new file mode 100644
index 00000000..a79a9fd2
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/components/ui/form/CheckboxField.tsx b/components/ui/form/CheckboxField.tsx
index 1e687c68..fcb66f15 100644
--- a/components/ui/form/CheckboxField.tsx
+++ b/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;
 };
 
diff --git a/pages/event-types/[type].tsx b/pages/event-types/[type].tsx
index c913948f..056d69ff 100644
--- a/pages/event-types/[type].tsx
+++ b/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">
diff --git a/public/static/locales/en/common.json b/public/static/locales/en/common.json
index a6463e47..5a56a0f1 100644
--- a/public/static/locales/en/common.json
+++ b/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",