Label info link + update Tooltip theme setting

@stellar/design-system-website/src/componentPreview/inputPreview.tsx

@@ -190,5 +190,19 @@ export const inputPreview: ComponentPreview = {
         },
       ],
     },
+    {
+      type: "select",
+      prop: "infoLink",
+      options: [
+        {
+          value: "",
+          label: "No info link",
+        },
+        {
+          value: "https://stellar.org",
+          label: "Info link",
+        },
+      ],
+    },
   ],
 };

@stellar/design-system-website/src/componentPreview/selectPreview.tsx

@@ -124,5 +124,19 @@ export const selectPreview: ComponentPreview = {
         },
       ],
     },
+    {
+      type: "select",
+      prop: "infoLink",
+      options: [
+        {
+          value: "",
+          label: "No info link",
+        },
+        {
+          value: "https://stellar.org",
+          label: "Info link",
+        },
+      ],
+    },
   ],
 };

@stellar/design-system-website/src/componentPreview/textareaPreview.tsx

@@ -154,5 +154,19 @@ export const textareaPreview: ComponentPreview = {
         },
       ],
     },
+    {
+      type: "select",
+      prop: "infoLink",
+      options: [
+        {
+          value: "",
+          label: "No info link",
+        },
+        {
+          value: "https://stellar.org",
+          label: "Info link",
+        },
+      ],
+    },
   ],
 };

@stellar/design-system/src/components/Floater/index.tsx

@@ -29,6 +29,7 @@ interface FloaterProps {
   hasActiveInsideClick?: boolean;
   isContrast?: boolean;
   showArrow?: boolean;
+  callback?: (isOpen: boolean) => void;
 }
 
 const getArrowStyle = ({
@@ -118,6 +119,7 @@ export const Floater: React.FC<FloaterProps> = ({
   hasActiveInsideClick,
   isContrast = true,
   showArrow = false,
+  callback,
 }: FloaterProps) => {
   const parentRef = useRef<HTMLDivElement | null>(null);
   const floaterRef = useRef<HTMLDivElement | null>(null);
@@ -197,8 +199,12 @@ export const Floater: React.FC<FloaterProps> = ({
       } else {
         closeFloater();
       }
+
+      if (callback) {
+        callback(isOpen);
+      }
     },
-    [openFloater, closeFloater],
+    [callback, openFloater, closeFloater],
   );
 
   const handleClickOutside = useCallback(

@stellar/design-system/src/components/Input/index.tsx

@@ -38,8 +38,8 @@ export interface InputProps {
   copyButton?: InputCopyButton;
   /** Info text tooltip */
   infoText?: string | React.ReactNode;
-  /** Custom info text icon @defaultValue `<Icon.InfoCircle />` */
-  infoTextIcon?: React.ReactNode;
+  /** External link to open in new window */
+  infoLink?: string;
 }
 
 /** */
@@ -75,7 +75,7 @@ export const Input: React.FC<Props> = ({
   success,
   copyButton,
   infoText,
-  infoTextIcon,
+  infoLink,
   ...props
 }: Props) => {
   const [isPasswordMasked, setIsPasswordMasked] = useState(true);
@@ -108,7 +108,7 @@ export const Input: React.FC<Props> = ({
           size={fieldSize}
           labelSuffix={labelSuffix}
           infoText={infoText}
-          infoTextIcon={infoTextIcon}
+          infoLink={infoLink}
         >
           {label}
         </Label>

@stellar/design-system/src/components/Label/index.tsx

@@ -10,7 +10,7 @@ interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   isUppercase?: boolean;
   labelSuffix?: string | React.ReactNode;
   infoText?: string | React.ReactNode;
-  infoTextIcon?: React.ReactNode;
+  infoLink?: string;
 }
 
 export const Label: React.FC<LabelProps> = ({
@@ -20,7 +20,7 @@ export const Label: React.FC<LabelProps> = ({
   isUppercase,
   labelSuffix,
   infoText,
-  infoTextIcon = <Icon.InfoCircle />,
+  infoLink,
   ...props
 }: LabelProps) => {
   const additionalClasses = [
@@ -41,11 +41,22 @@ export const Label: React.FC<LabelProps> = ({
         ) : null}
       </label>
 
+      {infoLink ? (
+        <a
+          href={infoLink}
+          className="Label__infoButton"
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          <Icon.BookOpen01 />
+        </a>
+      ) : null}
+
       {infoText ? (
         <Tooltip
           triggerEl={
             <div className="Label__infoButton" role="button">
-              {infoTextIcon}
+              <Icon.InfoCircle />
             </div>
           }
         >

@stellar/design-system/src/components/Select/index.tsx

@@ -25,8 +25,8 @@ export interface SelectProps {
   success?: string | React.ReactNode;
   /** Info text tooltip */
   infoText?: string | React.ReactNode;
-  /** Custom info text icon @defaultValue `<Icon.InfoCircle />` */
-  infoTextIcon?: React.ReactNode;
+  /** External link to open in new window */
+  infoLink?: string;
   /** Make label uppercase */
   isLabelUppercase?: boolean;
   /** Select error without a message */
@@ -55,7 +55,7 @@ export const Select: React.FC<Props> = ({
   error,
   success,
   infoText,
-  infoTextIcon,
+  infoLink,
   isLabelUppercase,
   isError,
   customSelect,
@@ -81,7 +81,7 @@ export const Select: React.FC<Props> = ({
           size={fieldSize}
           labelSuffix={labelSuffix}
           infoText={infoText}
-          infoTextIcon={infoTextIcon}
+          infoLink={infoLink}
         >
           {label}
         </Label>

@stellar/design-system/src/components/Textarea/index.tsx

@@ -25,8 +25,8 @@ export interface TextareaProps {
   success?: string | React.ReactNode;
   /** Info text tooltip */
   infoText?: string | React.ReactNode;
-  /** Custom info text icon @defaultValue `<Icon.InfoCircle />` */
-  infoTextIcon?: React.ReactNode;
+  /** External link to open in new window */
+  infoLink?: string;
   /** Textarea error without a message */
   isError?: boolean;
   /** Make label uppercase */
@@ -57,7 +57,7 @@ export const Textarea: React.FC<Props> = ({
   error,
   success,
   infoText,
-  infoTextIcon,
+  infoLink,
   isError,
   isLabelUppercase,
   hasCopyButton,
@@ -88,7 +88,7 @@ export const Textarea: React.FC<Props> = ({
           size={fieldSize}
           labelSuffix={labelSuffix}
           infoText={infoText}
-          infoTextIcon={infoTextIcon}
+          infoLink={infoLink}
         >
           {label}
         </Label>

@stellar/design-system/src/components/ThemeSwitch/index.tsx

@@ -60,22 +60,14 @@ export const ThemeSwitch = ({
     if (isDarkMode) {
       document.body.classList.remove(ThemeMode.LIGHT);
       document.body.classList.add(ThemeMode.DARK);
+      document.body.setAttribute("data-sds-theme", ThemeMode.DARK);
     } else {
       document.body.classList.remove(ThemeMode.DARK);
       document.body.classList.add(ThemeMode.LIGHT);
+      document.body.setAttribute("data-sds-theme", ThemeMode.LIGHT);
     }
   }, [disableSetThemeOnLoad, isDarkMode]);
 
-  // Trigger custom event to get the current theme
-  useEffect(() => {
-    document.dispatchEvent(
-      new CustomEvent<{ theme: string }>("SDS_ThemeSwitchEvent", {
-        bubbles: true,
-        detail: { theme: isDarkMode ? ThemeMode.DARK : ThemeMode.LIGHT },
-      }),
-    );
-  }, [isDarkMode]);
-
   const handleSwitch = () => {
     const _isDarkMode = !isDarkMode;
 

@stellar/design-system/src/components/Tooltip/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Floater } from "../Floater";
 import "./styles.scss";
 
@@ -43,16 +43,6 @@ export const Tooltip: React.FC<TooltipProps> = ({
 }: TooltipProps) => {
   const [theme, setTheme] = useState("sds-theme-dark");
 
-  useEffect(() => {
-    document.addEventListener("SDS_ThemeSwitchEvent", ((
-      event: CustomEvent<{ theme: string }>,
-    ) => {
-      if (event.detail?.theme) {
-        setTheme(event.detail.theme);
-      }
-    }) as EventListener);
-  }, []);
-
   const getContrastMode = () =>
     theme === "sds-theme-dark" ? "sds-theme-light" : "sds-theme-dark";
 
@@ -63,6 +53,15 @@ export const Tooltip: React.FC<TooltipProps> = ({
       isVisible={isVisible}
       isContrast={isContrast}
       showArrow={true}
+      callback={(isOpen) => {
+        if (isOpen) {
+          const theme = document.body.getAttribute("data-sds-theme");
+
+          if (theme) {
+            setTheme(theme);
+          }
+        }
+      }}
     >
       <div className={`Tooltip ${isContrast ? getContrastMode() : ""}`}>
         {title ? <div className="Tooltip__title">{title}</div> : null}