@oanda/labs-widget-common 1.0.218 → 1.0.220

package/dist/types/tailwind/colors.d.ts

@@ -22,10 +22,12 @@ export declare const colorPalette: {
     white: string;
     black: string;
     grayLight: string;
+    grayLight95: string;
     gray: string;
     darkGray: string;
     brightBlue: string;
     brightBlue30: string;
+    darkBlue: string;
 };
 export declare const twColorPallete: {
     "red-Dark-": string;
@@ -50,9 +52,11 @@ export declare const twColorPallete: {
     "white-": string;
     "black-": string;
     "gray-Light-": string;
+    "gray-Light-9-5-": string;
     "gray-": string;
     "dark-Gray-": string;
     "bright-Blue-": string;
     "bright-Blue-3-0-": string;
+    "dark-Blue-": string;
 };
 export type ColorCode = ValueOf<typeof colorPalette>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-widget-common",
-  "version": "1.0.218",
+  "version": "1.0.220",
   "description": "Labs Widget Common",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -21,5 +21,5 @@
     "tailwind-merge": "2.2.2",
     "usehooks-ts": "3.0.2"
   },
-  "gitHead": "7a07df3d3cadc0733696bb4579b520fe54eacee0"
+  "gitHead": "84d9bec88af7893f20ccd2d88fcbc28dd30aec22"
 }

package/src/chart/BaseChart.tsx

@@ -18,18 +18,27 @@ export const BaseChart = forwardRef<BaseChartRef, BaseChartProps>(
     }, []);
 
     return (
-      <ReactEChartsCore
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        ref={ref}
-        data-testid="charts-container"
-        showLoading={!ready}
-        style={{
-          height: `${chartHeight}px`,
-          width: '100%',
-        }}
-        theme={isDark ? 'dark_theme' : 'light_theme'}
-      />
+      <>
+        {ready ? (
+          <ReactEChartsCore
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={ref}
+            data-testid="charts-container"
+            style={{
+              height: `${chartHeight}px`,
+              width: '100%',
+            }}
+            theme={isDark ? 'dark_theme' : 'light_theme'}
+          />
+        ) : (
+          <div
+            className="lw-w-full"
+            data-testid="charts-placeholder"
+            style={{ height: `${chartHeight}px` }}
+          />
+        )}
+      </>
     );
   }
 );

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: {

package/test/chart/BaseChart.test.tsx

@@ -58,22 +58,23 @@ describe('BaseChart component', () => {
 
   it('should show loading state initially', () => {
     render(<BaseChart {...defaultProps} />);
-    const chart = screen.getByTestId('charts-container');
-    expect(chart).toHaveAttribute('data-loading', 'true');
+    const placeholder = screen.getByTestId('charts-placeholder');
+    expect(placeholder).toBeInTheDocument();
   });
 
   it('should render chart after fonts are ready', async () => {
     render(<BaseChart {...defaultProps} />);
 
-    const chart = screen.getByTestId('charts-container');
-    expect(chart).toHaveAttribute('data-loading', 'true');
+    const placeholder = screen.getByTestId('charts-placeholder');
+    expect(placeholder).toBeInTheDocument();
 
     await act(async () => {
       resolveFontsReady();
       await document.fonts.ready;
     });
 
-    expect(chart).toHaveAttribute('data-loading', 'false');
+    const chart = screen.getByTestId('charts-container');
+    expect(chart).toBeInTheDocument();
   });
 
   it('should apply dark theme when isDark is true', async () => {
@@ -113,9 +114,14 @@ describe('BaseChart component', () => {
     expect(chart).toHaveStyle({ height: `${height}px` });
   });
 
-  it('should forward ref to BaseChartRef', () => {
+  it('should forward ref to BaseChartRef', async () => {
     const ref = React.createRef<BaseChartRef>();
     render(<BaseChart {...defaultProps} ref={ref} />);
+
+    await act(async () => {
+      resolveFontsReady();
+      await document.fonts.ready;
+    });
     expect(ref.current).toBeTruthy();
   });
 });