@oanda/labs-value-at-risk-widget 1.0.64 → 1.0.65

package/src/ValueAtRiskWidget/Widget.tsx

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import classnames from 'classnames';
-import { Size, ThemeContext } from '@oanda/labs-widget-common';
+import { Size, useLayoutProvider } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { WidgetProps } from './types';
 import { ChartWithData } from './ChartWithData';
@@ -12,7 +12,7 @@ const Widget = ({
   bars,
 }: WidgetProps) => {
   const { lang } = useLocale();
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
   return (

package/src/ValueAtRiskWidget/components/Chart/Chart.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts/core';
 import { LineChart, CustomChart } from 'echarts/charts';
@@ -17,7 +17,7 @@ import { useLocale } from '@oanda/mono-i18n';
 import {
   Size,
   Theme,
-  ThemeContext,
+  useLayoutProvider,
   getChartTheme,
 } from '@oanda/labs-widget-common';
 import { CHART_HEIGHT } from './constants';
@@ -43,7 +43,7 @@ echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
 const Chart = ({ values }: ChartProps) => {
   const { lang } = useLocale();
-  const { isDark, size } = useContext(ThemeContext);
+  const { isDark, size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
   return (

package/src/ValueAtRiskWidget/components/Legend/Legend.tsx

@@ -1,7 +1,7 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import {
   Size,
-  ThemeContext,
+  useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import {
@@ -11,7 +11,7 @@ import { DesktopLegend } from './DesktopLegend';
 import { MobileLegend } from './MobileLegend';
 
 const Legend = ({ data }: LegendProps) => {
-  const { size, isDark } = useContext(ThemeContext);
+  const { size, isDark } = useLayoutProvider();
   const { lang } = useLocale();
   const isDesktop = size === Size.DESKTOP;
 

package/test/ChartWithData.test.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
-import { Size, ThemeContext } from '@oanda/labs-widget-common';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
 import { Division, ValueAtRiskBars, ValueAtRiskDuration } from '../src/gql/types/graphql';
 import { getValueAtRiskChartErrorMock, getValueAtRiskChartMock } from './mocks/responsesMocks';
 import { ChartWithData } from '../src/ValueAtRiskWidget/ChartWithData';
@@ -13,14 +13,14 @@ describe('ChartWithData component', () => {
   it('should render chart view', async () => {
     const { findByTestId } = render(
       <MockedProvider mocks={getValueAtRiskChartMock('CORN')}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: false }}>
+        <MockLayoutProvider isDark={false}>
           <ChartWithData
             division={Division.Oc}
             instrument="CORN"
             bars={ValueAtRiskBars.C100}
             duration={ValueAtRiskDuration.C1}
           />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 
@@ -30,14 +30,14 @@ describe('ChartWithData component', () => {
   it('should render mobile chart view', async () => {
     const { findByTestId } = render(
       <MockedProvider mocks={getValueAtRiskChartMock('CORN')}>
-        <ThemeContext.Provider value={{ size: Size.MOBILE, isDark: false }}>
+        <MockLayoutProvider isDark={false}>
           <ChartWithData
             division={Division.Oc}
             instrument="CORN"
             bars={ValueAtRiskBars.C100}
             duration={ValueAtRiskDuration.C1}
           />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 
@@ -47,14 +47,14 @@ describe('ChartWithData component', () => {
   it('should render error view', async () => {
     const { findByTestId } = render(
       <MockedProvider mocks={getValueAtRiskChartErrorMock}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: false }}>
+        <MockLayoutProvider isDark={false}>
           <ChartWithData
             division={Division.Oc}
             instrument="AUD_USD"
             bars={ValueAtRiskBars.C100}
             duration={ValueAtRiskDuration.C1}
           />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 

package/test/Tool.test.tsx

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { ThemeContext, Size } from '@oanda/labs-widget-common';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
 import { MockedProvider } from '@apollo/client/testing';
 import { Tool } from '../src/ValueAtRiskWidget/Tool';
 import { assetClassesMock, getValueAtRiskChartMock } from './mocks';
@@ -17,12 +17,12 @@ describe('Tool component', () => {
   it('should render tool view', () => {
     const { getByTestId } = render(
       <MockedProvider mocks={getValueAtRiskChartMock()}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Tool
             data={data}
             division={Division.Oc}
           />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 
@@ -31,12 +31,12 @@ describe('Tool component', () => {
   it('should change asset class and instruments list on click', () => {
     const { container, getByTestId } = render(
       <MockedProvider mocks={[...getValueAtRiskChartMock('AUD_USD'), ...getValueAtRiskChartMock('AUS200')]}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Tool
             data={data}
             division={Division.Oc}
           />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
     expect(getByTestId('value-at-risk-tool-wrapper')).toBeInTheDocument();

package/test/ToolWithData.test.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
-import { Size, ThemeContext } from '@oanda/labs-widget-common';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
 import { ToolWithData } from '../src/ValueAtRiskWidget/ToolWithData';
 import { Division } from '../src/gql/types/graphql';
 import { getValueAtRiskAssetClassesMock, getValueAtRiskChartMock } from './mocks/responsesMocks';
@@ -13,9 +13,9 @@ describe('Main component', () => {
   it('should render tool view', async () => {
     const { findByTestId } = render(
       <MockedProvider mocks={[...getValueAtRiskAssetClassesMock, ...getValueAtRiskChartMock()]}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: false }}>
+        <MockLayoutProvider isDark={false}>
           <ToolWithData division={Division.Oc} />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );
 

package/test/Widget.test.tsx

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import { render } from '@testing-library/react';
-import { ThemeContext, Size } from '@oanda/labs-widget-common';
+import { MockLayoutProvider } from '@oanda/labs-widget-common';
 import { MockedProvider } from '@apollo/client/testing';
 import { getValueAtRiskChartMock } from './mocks';
 import { Division, ValueAtRiskBars, ValueAtRiskDuration } from '../src/gql/types/graphql';
@@ -13,14 +13,14 @@ describe('Widget component', () => {
   it('should render widget view', () => {
     const { getByTestId } = render(
       <MockedProvider mocks={getValueAtRiskChartMock()}>
-        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+        <MockLayoutProvider>
           <Widget
             division={Division.Oc}
             instrument="AUD_USD"
             bars={ValueAtRiskBars.C100}
             duration={ValueAtRiskDuration.C1}
           />
-        </ThemeContext.Provider>
+        </MockLayoutProvider>
       </MockedProvider>,
     );