@oanda/labs-widget-common 1.0.219 → 1.0.220

package/src/components/Disclaimer/Disclaimer.tsx

@@ -1,5 +1,5 @@
 import type { FC, PropsWithChildren } from 'react';
-import React from 'react';
+import React, { useState } from 'react';
 
 import { OandaLogoDark, OandaLogoLight } from '../../images';
 import { useLayoutProvider } from '../../providers';
@@ -7,22 +7,12 @@ import { cn } from '../../tailwind';
 import type { RenderComponentParams } from '../../types';
 import { Theme } from '../../types';
 
-const disclaimerStyles: Record<
-  Theme,
-  { wrapperStyle: string; borderStyle: string }
-> = {
-  dark: {
-    wrapperStyle: 'lw-h-6 lw-bg-[#262F3C]',
-    borderStyle: 'lw-border-[#262F3C]',
-  },
-  light: {
-    wrapperStyle: 'lw-shadow-[0_2px_8px_0_rgba(0,33,74,0.25)]',
-    borderStyle: 'lw-border-[#e6e6e6]',
-  },
-};
-
 type DisclaimerProps = PropsWithChildren &
-  Omit<RenderComponentParams, 'Component'>;
+  Omit<RenderComponentParams, 'Component'> & {
+    text?: string;
+    isSlim?: boolean;
+    infoButtonPosition?: 'left' | 'top';
+  };
 
 export const Disclaimer: FC<DisclaimerProps> = ({
   children,
@@ -30,23 +20,28 @@ export const Disclaimer: FC<DisclaimerProps> = ({
   brandingSpace,
   fitContent = false,
   linkArea = 'full',
+  text,
+  isSlim,
+  infoButtonPosition = 'top',
 }) => {
   const { theme } = useLayoutProvider();
+  const isDark = theme === Theme.Dark;
 
-  if (!logoLink) {
+  const [isLogoHovered, setIsLogoHovered] = useState(false);
+  const [isInfoHovered, setIsInfoHovered] = useState(false);
+
+  if (!logoLink && !text) {
     return children;
   }
 
-  const isDark = theme !== 'light';
   const isClickable = linkArea === 'full';
-  const { wrapperStyle, borderStyle } = disclaimerStyles[theme ?? Theme.Light];
 
   return (
     <div
       className={cn(
         'lw-relative lw-overflow-hidden',
         isClickable && 'lw-cursor-pointer',
-        brandingSpace && brandingSpace === 'vertical' ? 'lw-pb-12' : 'lw-pb-2',
+        brandingSpace && brandingSpace === 'vertical' ? 'lw-pb-12' : 'lw-pb-0',
         !!fitContent && 'lw-w-fit'
       )}
       data-testid="disclaimer-wrapper"
@@ -54,34 +49,77 @@ export const Disclaimer: FC<DisclaimerProps> = ({
       onClick={() => isClickable && window.open(logoLink, '_blank')}
     >
       {children}
-      <div
-        className={cn(
-          'lw-absolute lw-z-20 lw-bottom-3 lw-right-1 lw-translate-x-[3.7rem] lw-rounded-l-full lw-transition lw-delay-150 lw-duration-300 lw-ease-in-out hover:lw-translate-x-2 [&:hover+div]:lw-translate-x-[3.7rem]',
-          wrapperStyle
-        )}
-      >
+      {text && (
         <div
-          className="lw-cursor-pointer"
-          data-testid="disclaimer-wrapper-logo"
-          role="presentation"
-          onClick={(e) => {
-            e.stopPropagation();
-            window.open(logoLink, '_blank');
-          }}
-        >
-          {isDark ? (
-            <OandaLogoDark data-testid="disclaimer-wrapper-logo-dark" />
-          ) : (
-            <OandaLogoLight data-testid="disclaimer-wrapper-logo-light" />
+          className={cn(
+            'lw-absolute lw-right-0 lw-top-0 lw-z-30 lw-flex lw-h-full lw-items-center lw-bg-border-primary lw-bg-opacity-90 lw-p-3 lw-text-sm lw-text-text-primary lw-delay-150 lw-duration-150 lw-ease-in-out',
+            isInfoHovered && 'lw-opacity-100',
+            !isInfoHovered && 'lw-opacity-0 lw-pointer-events-none'
           )}
+          onBlur={() => setIsInfoHovered(false)}
+          onMouseOut={() => setIsInfoHovered(false)}
+        >
+          {text}
         </div>
-      </div>
+      )}
       <div
         className={cn(
-          'lw-absolute lw-bottom-2.5 lw-right-0 lw-h-7 lw-w-px lw-translate-x-0 lw-transition lw-delay-150 lw-duration-300',
-          borderStyle
+          'lw-absolute lw-bottom-3 lw-right-0 lw-z-20 lw-flex lw-transition lw-delay-100 lw-duration-300 lw-ease-in-out',
+          logoLink &&
+            !isLogoHovered &&
+            infoButtonPosition === 'left' &&
+            'lw-translate-x-[55px]',
+          isSlim && 'lw-bottom-[6px]',
+          !isSlim && 'lw-bottom-2',
+          infoButtonPosition === 'left' && 'lw-flex-row lw-items-center',
+          infoButtonPosition === 'top' && 'lw-flex-col lw-items-end'
         )}
-      />
+      >
+        {text && (
+          <div
+            className={cn(
+              'lw-flex lw-h-[20px] lw-w-[20px] lw-items-center lw-justify-center lw-rounded-full lw-border lw-border-border-primary lw-pb-0.5 lw-text-sm lw-font-bold lw-text-text-secondary lw-shadow-basic',
+              isDark && 'lw-bg-dark-blue',
+              !isDark && 'lw-bg-bg-primary',
+              infoButtonPosition === 'top' && 'lw-mr-1',
+              infoButtonPosition === 'top' && !!logoLink && 'lw-mb-3',
+              infoButtonPosition === 'left' && 'lw-mr-2 '
+            )}
+            onFocus={() => setIsInfoHovered(true)}
+            onMouseOver={() => setIsInfoHovered(true)}
+          >
+            i
+          </div>
+        )}
+        {logoLink && (
+          <div
+            className={cn(
+              'lw-cursor-pointer lw-rounded-l-full lw-bg-bg-primary lw-shadow-basic',
+              infoButtonPosition === 'top' &&
+                'lw-transition lw-delay-100 lw-duration-300 lw-ease-in-out',
+              !isLogoHovered &&
+                infoButtonPosition === 'top' &&
+                'lw-translate-x-[55px]'
+            )}
+            data-testid="disclaimer-wrapper-logo"
+            role="presentation"
+            onBlur={() => setIsLogoHovered(false)}
+            onClick={(e) => {
+              e.stopPropagation();
+              window.open(logoLink, '_blank');
+            }}
+            onFocus={() => setIsLogoHovered(true)}
+            onMouseOut={() => setIsLogoHovered(false)}
+            onMouseOver={() => setIsLogoHovered(true)}
+          >
+            {isDark ? (
+              <OandaLogoDark data-testid="disclaimer-wrapper-logo-dark" />
+            ) : (
+              <OandaLogoLight data-testid="disclaimer-wrapper-logo-light" />
+            )}
+          </div>
+        )}
+      </div>
     </div>
   );
 };

package/src/components/WidgetWrapper/WidgetWrapper.tsx

@@ -8,6 +8,11 @@ import { WidgetError } from '../Error';
 export type WidgetWrapperProps = PropsWithChildren &
   WidgetLink & {
     isParamError?: boolean | undefined;
+    disclaimer?: {
+      position?: 'left' | 'top';
+      text?: string;
+    };
+    isSlim?: boolean;
   } & Pick<WidgetStyling, 'brandingSpace' | 'fitContent'>;
 
 export const WidgetWrapper: FC<WidgetWrapperProps> = ({
@@ -17,12 +22,17 @@ export const WidgetWrapper: FC<WidgetWrapperProps> = ({
   brandingSpace,
   fitContent,
   isParamError,
+  disclaimer,
+  isSlim,
 }) => (
   <Disclaimer
     brandingSpace={brandingSpace}
     fitContent={fitContent}
+    infoButtonPosition={disclaimer?.position}
+    isSlim={isSlim}
     linkArea={linkArea}
     logoLink={logoLink}
+    text={disclaimer?.text}
   >
     {isParamError ? <WidgetError /> : children}
   </Disclaimer>

package/src/tailwind/colors.ts

@@ -24,10 +24,12 @@ export const colorPalette = {
   white: '#FFFFFF',
   black: '#000000',
   grayLight: '#9EA4AC',
+  grayLight95: 'rgba(158, 164, 172, 0.95)',
   gray: '#7B8085',
   darkGray: '#1C1C1C',
   brightBlue: 'rgba(51, 88, 255, 0)',
   brightBlue30: 'rgba(51, 88, 255, 0.3)',
+  darkBlue: '#262f3c',
 };
 
 export const twColorPallete = toTwConfigKeys(colorPalette);

package/src/tailwind/preset.ts

@@ -50,6 +50,7 @@ export const sharedPreset: Omit<Config, 'content'> = {
       boxShadow: {
         innerBorder: 'inset 0 0 0 1px',
         innerBorderBgColor: 'inset 0 0 0 2px hsl(var(--twc-bg-primary))',
+        basic: '0 2px 8px 0 rgba(0, 33, 74, 0.25)',
       },
     },
     fontFamily: {