@oanda/labs-sentiment-widget 1.0.53 → 1.0.55

package/CHANGELOG.md

@@ -3,6 +3,418 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.55 (2023-12-19)
+
+
+
+## 1.0.54 (2023-12-15)
+
+
+
+## 1.0.53 (2023-12-13)
+
+
+
+## 1.0.52 (2023-12-13)
+
+
+
+## 1.0.51 (2023-12-07)
+
+
+
+## 1.0.50 (2023-12-04)
+
+
+
+## 1.0.49 (2023-12-01)
+
+
+
+## 1.0.48 (2023-12-01)
+
+
+
+## 1.0.47 (2023-11-29)
+
+
+
+## 1.0.46 (2023-11-28)
+
+
+
+## 1.0.45 (2023-11-23)
+
+
+
+## 1.0.44 (2023-11-22)
+
+
+
+## 1.0.43 (2023-11-15)
+
+
+
+## 1.0.42 (2023-11-10)
+
+
+
+## 1.0.41 (2023-11-03)
+
+
+
+## 1.0.40 (2023-11-02)
+
+
+
+## 1.0.39 (2023-11-02)
+
+
+
+## 1.0.38 (2023-10-26)
+
+
+
+## 1.0.37 (2023-10-26)
+
+
+
+## 1.0.36 (2023-10-25)
+
+
+
+## 1.0.35 (2023-10-24)
+
+
+
+## 1.0.34 (2023-10-23)
+
+
+
+## 1.0.33 (2023-10-23)
+
+
+
+## 1.0.32 (2023-10-23)
+
+
+
+## 1.0.31 (2023-10-20)
+
+
+
+## 1.0.30 (2023-10-19)
+
+
+
+## 1.0.29 (2023-10-19)
+
+
+
+## 1.0.28 (2023-10-19)
+
+
+
+## 1.0.27 (2023-10-18)
+
+
+
+## 1.0.26 (2023-10-18)
+
+
+
+## 1.0.25 (2023-10-17)
+
+
+
+## 1.0.24 (2023-10-13)
+
+
+
+## 1.0.23 (2023-10-13)
+
+
+
+## 1.0.22 (2023-10-11)
+
+
+
+## 1.0.21 (2023-10-10)
+
+
+
+## 1.0.20 (2023-10-06)
+
+
+
+## 1.0.19 (2023-10-06)
+
+
+
+## 1.0.18 (2023-10-05)
+
+
+
+## 1.0.17 (2023-10-04)
+
+
+
+## 1.0.16 (2023-10-04)
+
+
+
+## 1.0.15 (2023-10-04)
+
+
+
+## 1.0.14 (2023-10-03)
+
+
+
+## 1.0.13 (2023-10-03)
+
+
+
+## 1.0.12 (2023-10-03)
+
+
+
+## 1.0.11 (2023-10-02)
+
+
+
+## 1.0.10 (2023-09-29)
+
+
+
+## 1.0.9 (2023-09-28)
+
+
+
+## 1.0.8 (2023-09-27)
+
+
+
+## 1.0.7 (2023-09-26)
+
+
+
+## 1.0.6 (2023-09-21)
+
+
+
+## 1.0.5 (2023-09-13)
+
+**Note:** Version bump only for package @oanda/labs-sentiment-widget
+
+
+
+
+
+## 1.0.54 (2023-12-15)
+
+
+
+## 1.0.53 (2023-12-13)
+
+
+
+## 1.0.52 (2023-12-13)
+
+
+
+## 1.0.51 (2023-12-07)
+
+
+
+## 1.0.50 (2023-12-04)
+
+
+
+## 1.0.49 (2023-12-01)
+
+
+
+## 1.0.48 (2023-12-01)
+
+
+
+## 1.0.47 (2023-11-29)
+
+
+
+## 1.0.46 (2023-11-28)
+
+
+
+## 1.0.45 (2023-11-23)
+
+
+
+## 1.0.44 (2023-11-22)
+
+
+
+## 1.0.43 (2023-11-15)
+
+
+
+## 1.0.42 (2023-11-10)
+
+
+
+## 1.0.41 (2023-11-03)
+
+
+
+## 1.0.40 (2023-11-02)
+
+
+
+## 1.0.39 (2023-11-02)
+
+
+
+## 1.0.38 (2023-10-26)
+
+
+
+## 1.0.37 (2023-10-26)
+
+
+
+## 1.0.36 (2023-10-25)
+
+
+
+## 1.0.35 (2023-10-24)
+
+
+
+## 1.0.34 (2023-10-23)
+
+
+
+## 1.0.33 (2023-10-23)
+
+
+
+## 1.0.32 (2023-10-23)
+
+
+
+## 1.0.31 (2023-10-20)
+
+
+
+## 1.0.30 (2023-10-19)
+
+
+
+## 1.0.29 (2023-10-19)
+
+
+
+## 1.0.28 (2023-10-19)
+
+
+
+## 1.0.27 (2023-10-18)
+
+
+
+## 1.0.26 (2023-10-18)
+
+
+
+## 1.0.25 (2023-10-17)
+
+
+
+## 1.0.24 (2023-10-13)
+
+
+
+## 1.0.23 (2023-10-13)
+
+
+
+## 1.0.22 (2023-10-11)
+
+
+
+## 1.0.21 (2023-10-10)
+
+
+
+## 1.0.20 (2023-10-06)
+
+
+
+## 1.0.19 (2023-10-06)
+
+
+
+## 1.0.18 (2023-10-05)
+
+
+
+## 1.0.17 (2023-10-04)
+
+
+
+## 1.0.16 (2023-10-04)
+
+
+
+## 1.0.15 (2023-10-04)
+
+
+
+## 1.0.14 (2023-10-03)
+
+
+
+## 1.0.13 (2023-10-03)
+
+
+
+## 1.0.12 (2023-10-03)
+
+
+
+## 1.0.11 (2023-10-02)
+
+
+
+## 1.0.10 (2023-09-29)
+
+
+
+## 1.0.9 (2023-09-28)
+
+
+
+## 1.0.8 (2023-09-27)
+
+
+
+## 1.0.7 (2023-09-26)
+
+
+
+## 1.0.6 (2023-09-21)
+
+
+
+## 1.0.5 (2023-09-13)
+
+**Note:** Version bump only for package @oanda/labs-sentiment-widget
+
+
+
+
+
 ## 1.0.53 (2023-12-13)
 
 

package/dist/main/SentimentWidget/SentimentWidget.js

@@ -17,13 +17,16 @@ const SentimentWidget = _ref => {
     graphqlUrl,
     division,
     instrument,
-    locale
+    locale,
+    theme
   } = _ref;
   const client = new _client.ApolloClient({
     uri: graphqlUrl,
     cache: new _client.InMemoryCache()
   });
-  return _react.default.createElement(_labsWidgetCommon.ThemeProvider, null, _react.default.createElement(_monoI18n.LocaleProvider, {
+  return _react.default.createElement(_labsWidgetCommon.ThemeProvider, {
+    theme: theme
+  }, _react.default.createElement(_monoI18n.LocaleProvider, {
     locale: (0, _labsWidgetCommon.getLocale)(locale),
     translations: _translations.translations
   }, _react.default.createElement(_client.ApolloProvider, {

package/dist/main/SentimentWidget/SentimentWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"SentimentWidget.js","names":["_react","_interopRequireDefault","require","_client","_monoI18n","_labsWidgetCommon","_Widget","_Tool","_translations","obj","__esModule","default","SentimentWidget","_ref","graphqlUrl","division","instrument","locale","client","ApolloClient","uri","cache","InMemoryCache","createElement","ThemeProvider","LocaleProvider","getLocale","translations","ApolloProvider","Widget","Tool","exports"],"sources":["../../../src/SentimentWidget/SentimentWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport { ThemeProvider, getLocale } from '@oanda/labs-widget-common';\nimport { Widget } from './Widget';\nimport { Tool } from './Tool';\nimport { SentimentConfig } from './types';\nimport { translations } from '../translations';\n\nconst SentimentWidget = ({\n  graphqlUrl, division, instrument, locale,\n}: SentimentConfig) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  return (\n    <ThemeProvider>\n      <LocaleProvider locale={getLocale(locale)} translations={translations}>\n        <ApolloProvider client={client}>\n          {instrument ? (\n            <Widget division={division} instrument={instrument} />\n          ) : (\n            <Tool division={division} />\n          )}\n        </ApolloProvider>\n      </LocaleProvider>\n    </ThemeProvider>\n  );\n};\n\nexport { SentimentWidget };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAEA,IAAAM,aAAA,GAAAN,OAAA;AAA+C,SAAAD,uBAAAQ,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAE/C,MAAMG,eAAe,GAAGC,IAAA,IAED;EAAA,IAFE;IACvBC,UAAU;IAAEC,QAAQ;IAAEC,UAAU;IAAEC;EACnB,CAAC,GAAAJ,IAAA;EAChB,MAAMK,MAAM,GAAG,IAAIC,oBAAY,CAAC;IAC9BC,GAAG,EAAEN,UAAU;IACfO,KAAK,EAAE,IAAIC,qBAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,OACEtB,MAAA,CAAAW,OAAA,CAAAY,aAAA,CAAClB,iBAAA,CAAAmB,aAAa,QACZxB,MAAA,CAAAW,OAAA,CAAAY,aAAA,CAACnB,SAAA,CAAAqB,cAAc;IAACR,MAAM,EAAE,IAAAS,2BAAS,EAACT,MAAM,CAAE;IAACU,YAAY,EAAEA;EAAa,GACpE3B,MAAA,CAAAW,OAAA,CAAAY,aAAA,CAACpB,OAAA,CAAAyB,cAAc;IAACV,MAAM,EAAEA;EAAO,GAC5BF,UAAU,GACThB,MAAA,CAAAW,OAAA,CAAAY,aAAA,CAACjB,OAAA,CAAAuB,MAAM;IAACd,QAAQ,EAAEA,QAAS;IAACC,UAAU,EAAEA;EAAW,CAAE,CAAC,GAEtDhB,MAAA,CAAAW,OAAA,CAAAY,aAAA,CAAChB,KAAA,CAAAuB,IAAI;IAACf,QAAQ,EAAEA;EAAS,CAAE,CAEf,CACF,CACH,CAAC;AAEpB,CAAC;AAACgB,OAAA,CAAAnB,eAAA,GAAAA,eAAA"}
+{"version":3,"file":"SentimentWidget.js","names":["_react","_interopRequireDefault","require","_client","_monoI18n","_labsWidgetCommon","_Widget","_Tool","_translations","obj","__esModule","default","SentimentWidget","_ref","graphqlUrl","division","instrument","locale","theme","client","ApolloClient","uri","cache","InMemoryCache","createElement","ThemeProvider","LocaleProvider","getLocale","translations","ApolloProvider","Widget","Tool","exports"],"sources":["../../../src/SentimentWidget/SentimentWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport { ThemeProvider, getLocale } from '@oanda/labs-widget-common';\nimport { Widget } from './Widget';\nimport { Tool } from './Tool';\nimport { SentimentConfig } from './types';\nimport { translations } from '../translations';\n\nconst SentimentWidget = ({\n  graphqlUrl, division, instrument, locale, theme,\n}: SentimentConfig) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  return (\n    <ThemeProvider theme={theme}>\n      <LocaleProvider locale={getLocale(locale)} translations={translations}>\n        <ApolloProvider client={client}>\n          {instrument ? (\n            <Widget division={division} instrument={instrument} />\n          ) : (\n            <Tool division={division} />\n          )}\n        </ApolloProvider>\n      </LocaleProvider>\n    </ThemeProvider>\n  );\n};\n\nexport { SentimentWidget };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAEA,IAAAM,aAAA,GAAAN,OAAA;AAA+C,SAAAD,uBAAAQ,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAE/C,MAAMG,eAAe,GAAGC,IAAA,IAED;EAAA,IAFE;IACvBC,UAAU;IAAEC,QAAQ;IAAEC,UAAU;IAAEC,MAAM;IAAEC;EAC3B,CAAC,GAAAL,IAAA;EAChB,MAAMM,MAAM,GAAG,IAAIC,oBAAY,CAAC;IAC9BC,GAAG,EAAEP,UAAU;IACfQ,KAAK,EAAE,IAAIC,qBAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,OACEvB,MAAA,CAAAW,OAAA,CAAAa,aAAA,CAACnB,iBAAA,CAAAoB,aAAa;IAACP,KAAK,EAAEA;EAAM,GAC1BlB,MAAA,CAAAW,OAAA,CAAAa,aAAA,CAACpB,SAAA,CAAAsB,cAAc;IAACT,MAAM,EAAE,IAAAU,2BAAS,EAACV,MAAM,CAAE;IAACW,YAAY,EAAEA;EAAa,GACpE5B,MAAA,CAAAW,OAAA,CAAAa,aAAA,CAACrB,OAAA,CAAA0B,cAAc;IAACV,MAAM,EAAEA;EAAO,GAC5BH,UAAU,GACThB,MAAA,CAAAW,OAAA,CAAAa,aAAA,CAAClB,OAAA,CAAAwB,MAAM;IAACf,QAAQ,EAAEA,QAAS;IAACC,UAAU,EAAEA;EAAW,CAAE,CAAC,GAEtDhB,MAAA,CAAAW,OAAA,CAAAa,aAAA,CAACjB,KAAA,CAAAwB,IAAI;IAAChB,QAAQ,EAAEA;EAAS,CAAE,CAEf,CACF,CACH,CAAC;AAEpB,CAAC;AAACiB,OAAA,CAAApB,eAAA,GAAAA,eAAA"}

package/dist/main/SentimentWidget/Tool.js

@@ -40,7 +40,7 @@ const Tool = _ref => {
   } = (0, _monoI18n.useLocale)();
   return _react.default.createElement("div", {
     "data-testid": "sentiment-tool",
-    className: "lw-relative lw-overflow-hidden lw-text-sm lw-tracking-normal lw-text-black"
+    className: "lw-relative lw-overflow-hidden lw-text-sm lw-tracking-normal lw-text-text-primary"
   }, error || sortedData.length === 0 ? _react.default.createElement("div", {
     className: "lw-flex lw-h-[200px] lw-items-center lw-justify-center lw-border lw-border-solid lw-border-grey lw-p-2"
   }, _react.default.createElement(_labsWidgetCommon.ChartError, null)) : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {

package/dist/main/SentimentWidget/Tool.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tool.js","names":["_react","_interopRequireWildcard","require","_labsWidgetCommon","_client","_monoI18n","_getSentimentList","_utils","_SortSwitch","_graphql","_constant","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Tool","_ref","division","sort","setSort","useState","Sort","Bullish","sortedData","setSortedData","Array","fill","loading","data","error","useQuery","getSentimentList","variables","useEffect","sortData","lang","useLocale","createElement","className","length","ChartError","Fragment","SortSwitch","disabled","selected","SelectedArrow","UP","DOWN","onClickButtonDown","Bearish","onClickButtonUp","map","item","index","key","name","Loader","size","LoaderSize","md","Truncate","maxWidth","tooltipId","INSTRUMENT_TOOLTIP_ID","text","displayName","Sentiment","isLoading","height","SentimentHeight","sentiment","Tooltip","id","exports"],"sources":["../../../src/SentimentWidget/Tool.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport {\n  Sentiment, SentimentHeight, Loader, LoaderSize, ChartError, Truncate, Tooltip,\n} from '@oanda/labs-widget-common';\nimport { useQuery } from '@apollo/client';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { getSentimentList } from '../gql/getSentimentList';\nimport { SentimentToolConfig } from './types';\nimport { sortData } from './utils';\nimport { SelectedArrow, SortSwitch } from './components/SortSwitch';\nimport {\n  GetSentimentListQuery, GetSentimentListQueryVariables, SentimentInstrument, Sort,\n} from '../gql/types/graphql';\nimport { INSTRUMENT_TOOLTIP_ID } from '../constant';\n\nconst Tool = ({ division }: SentimentToolConfig) => {\n  const [sort, setSort] = useState(Sort.Bullish);\n  const [sortedData, setSortedData] = useState<Omit<SentimentInstrument, 'id'>[]>(new Array(20).fill({}));\n  const { loading, data, error } = useQuery<\n  GetSentimentListQuery,\n  GetSentimentListQueryVariables\n  >(getSentimentList, {\n    variables: {\n      division,\n    },\n  });\n\n  useEffect(() => {\n    if (data) {\n      setSortedData(sortData(data, sort));\n    }\n  }, [data, sort]);\n\n  const { lang } = useLocale();\n\n  return (\n    <div data-testid=\"sentiment-tool\" className=\"lw-relative lw-overflow-hidden lw-text-sm lw-tracking-normal lw-text-black\">\n      {error || sortedData.length === 0 ? (\n        <div className=\"lw-flex lw-h-[200px] lw-items-center lw-justify-center lw-border lw-border-solid lw-border-grey lw-p-2\">\n          <ChartError />\n        </div>\n      ) : (\n        <>\n          <div className=\"lw-flex lw-justify-end lw-pb-5\">\n            <SortSwitch\n              disabled={loading}\n              selected={sort === Sort.Bullish ? SelectedArrow.UP : SelectedArrow.DOWN}\n              onClickButtonDown={() => setSort(Sort.Bearish)}\n              onClickButtonUp={() => setSort(Sort.Bullish)}\n            />\n          </div>\n          <div className=\"lw-flex lw-flex-col lw-border lw-border-solid lw-border-grey lw-p-2\">\n            <div className=\"lw-mb-2 lw-flex lw-justify-between lw-font-semibold\">\n              <span className=\"lw-ml-[7.5rem] lw-uppercase md:lw-ml-40\">{lang('net_short')}</span>\n              <span className=\"lw-text-right lw-uppercase md:lw-mr-10\">{lang('net_long')}</span>\n            </div>\n            {sortedData.map((item, index) => (\n              <div className=\"lw-flex lw-h-8 lw-w-full lw-items-center\" key={item.name || index}>\n                <div className=\"lw-w-[120px] lw-shrink-0\">\n                  {loading ? (\n                    <Loader size={LoaderSize.md} />\n                  ) : (\n                    <Truncate\n                      maxWidth={120}\n                      tooltipId={INSTRUMENT_TOOLTIP_ID}\n                      className=\"lw-pr-2 lw-font-sans lw-text-sm lw-font-bold\"\n                      text={item.displayName || '\\u2014'}\n                    />\n                  )}\n                </div>\n                <Sentiment\n                  isLoading={loading}\n                  height={SentimentHeight.md}\n                  sentiment={item.sentiment}\n                />\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      <Tooltip id={INSTRUMENT_TOOLTIP_ID} />\n    </div>\n  );\n};\n\nexport { Tool };\n"],"mappings":"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"}
+{"version":3,"file":"Tool.js","names":["_react","_interopRequireWildcard","require","_labsWidgetCommon","_client","_monoI18n","_getSentimentList","_utils","_SortSwitch","_graphql","_constant","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Tool","_ref","division","sort","setSort","useState","Sort","Bullish","sortedData","setSortedData","Array","fill","loading","data","error","useQuery","getSentimentList","variables","useEffect","sortData","lang","useLocale","createElement","className","length","ChartError","Fragment","SortSwitch","disabled","selected","SelectedArrow","UP","DOWN","onClickButtonDown","Bearish","onClickButtonUp","map","item","index","key","name","Loader","size","LoaderSize","md","Truncate","maxWidth","tooltipId","INSTRUMENT_TOOLTIP_ID","text","displayName","Sentiment","isLoading","height","SentimentHeight","sentiment","Tooltip","id","exports"],"sources":["../../../src/SentimentWidget/Tool.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport {\n  Sentiment, SentimentHeight, Loader, LoaderSize, ChartError, Truncate, Tooltip,\n} from '@oanda/labs-widget-common';\nimport { useQuery } from '@apollo/client';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { getSentimentList } from '../gql/getSentimentList';\nimport { SentimentToolConfig } from './types';\nimport { sortData } from './utils';\nimport { SelectedArrow, SortSwitch } from './components/SortSwitch';\nimport {\n  GetSentimentListQuery, GetSentimentListQueryVariables, SentimentInstrument, Sort,\n} from '../gql/types/graphql';\nimport { INSTRUMENT_TOOLTIP_ID } from '../constant';\n\nconst Tool = ({ division }: SentimentToolConfig) => {\n  const [sort, setSort] = useState(Sort.Bullish);\n  const [sortedData, setSortedData] = useState<Omit<SentimentInstrument, 'id'>[]>(new Array(20).fill({}));\n  const { loading, data, error } = useQuery<\n  GetSentimentListQuery,\n  GetSentimentListQueryVariables\n  >(getSentimentList, {\n    variables: {\n      division,\n    },\n  });\n\n  useEffect(() => {\n    if (data) {\n      setSortedData(sortData(data, sort));\n    }\n  }, [data, sort]);\n\n  const { lang } = useLocale();\n\n  return (\n    <div data-testid=\"sentiment-tool\" className=\"lw-relative lw-overflow-hidden lw-text-sm lw-tracking-normal lw-text-text-primary\">\n      {error || sortedData.length === 0 ? (\n        <div className=\"lw-flex lw-h-[200px] lw-items-center lw-justify-center lw-border lw-border-solid lw-border-grey lw-p-2\">\n          <ChartError />\n        </div>\n      ) : (\n        <>\n          <div className=\"lw-flex lw-justify-end lw-pb-5\">\n            <SortSwitch\n              disabled={loading}\n              selected={sort === Sort.Bullish ? SelectedArrow.UP : SelectedArrow.DOWN}\n              onClickButtonDown={() => setSort(Sort.Bearish)}\n              onClickButtonUp={() => setSort(Sort.Bullish)}\n            />\n          </div>\n          <div className=\"lw-flex lw-flex-col lw-border lw-border-solid lw-border-grey lw-p-2\">\n            <div className=\"lw-mb-2 lw-flex lw-justify-between lw-font-semibold\">\n              <span className=\"lw-ml-[7.5rem] lw-uppercase md:lw-ml-40\">{lang('net_short')}</span>\n              <span className=\"lw-text-right lw-uppercase md:lw-mr-10\">{lang('net_long')}</span>\n            </div>\n            {sortedData.map((item, index) => (\n              <div className=\"lw-flex lw-h-8 lw-w-full lw-items-center\" key={item.name || index}>\n                <div className=\"lw-w-[120px] lw-shrink-0\">\n                  {loading ? (\n                    <Loader size={LoaderSize.md} />\n                  ) : (\n                    <Truncate\n                      maxWidth={120}\n                      tooltipId={INSTRUMENT_TOOLTIP_ID}\n                      className=\"lw-pr-2 lw-font-sans lw-text-sm lw-font-bold\"\n                      text={item.displayName || '\\u2014'}\n                    />\n                  )}\n                </div>\n                <Sentiment\n                  isLoading={loading}\n                  height={SentimentHeight.md}\n                  sentiment={item.sentiment}\n                />\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      <Tooltip id={INSTRUMENT_TOOLTIP_ID} />\n    </div>\n  );\n};\n\nexport { Tool };\n"],"mappings":"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"}

package/dist/main/SentimentWidget/Widget.js

@@ -31,7 +31,7 @@ const Widget = _ref => {
   const isError = error || sentiment?.shortPercent === 0 && sentiment?.longPercent === 0 || sentiment?.shortPercent === undefined || sentiment?.longPercent === undefined;
   return _react.default.createElement("div", {
     "data-testid": "sentiment-widget",
-    className: "lw-border lw-border-solid lw-border-grey lw-p-4 lw-text-sm lw-tracking-normal lw-text-black"
+    className: "lw-border lw-border-solid lw-border-border-primary lw-p-4 lw-text-sm lw-tracking-normal lw-text-text-primary"
   }, _react.default.createElement("div", {
     className: "lw-flex lw-items-center lw-justify-between"
   }, _react.default.createElement("div", {

package/dist/main/SentimentWidget/Widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"Widget.js","names":["_react","_interopRequireDefault","require","_labsWidgetCommon","_client","_getInstrumentSentiment","_constant","obj","__esModule","default","Widget","_ref","instrument","division","loading","data","error","useQuery","getInstrumentSentiment","variables","name","sentiment","isError","shortPercent","longPercent","undefined","createElement","className","Loader","size","LoaderSize","md","Truncate","maxWidth","tooltipId","INSTRUMENT_TOOLTIP_ID","text","displayName","Sentiment","withError","isLoading","height","SentimentHeight","Error","exports"],"sources":["../../../src/SentimentWidget/Widget.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Sentiment, SentimentHeight, Error, Loader, LoaderSize, Truncate,\n} from '@oanda/labs-widget-common';\nimport { useQuery } from '@apollo/client';\nimport { getInstrumentSentiment } from '../gql/getInstrumentSentiment';\nimport { SentimentWidgetConfig } from './types';\nimport { GetInstrumentSentimentQuery, GetInstrumentSentimentQueryVariables } from '../gql/types/graphql';\nimport { INSTRUMENT_TOOLTIP_ID } from '../constant';\n\nconst Widget = ({ instrument, division }: SentimentWidgetConfig) => {\n  const { loading, data, error } = useQuery<\n  GetInstrumentSentimentQuery,\n  GetInstrumentSentimentQueryVariables\n  >(getInstrumentSentiment, {\n    variables: {\n      name: instrument,\n      division,\n    },\n  });\n\n  const { sentiment } = data?.sentiment?.[0] || {};\n  const isError = error\n    || (sentiment?.shortPercent === 0 && sentiment?.longPercent === 0)\n    || sentiment?.shortPercent === undefined\n    || sentiment?.longPercent === undefined;\n\n  return (\n    <div data-testid=\"sentiment-widget\" className=\"lw-border lw-border-solid lw-border-grey lw-p-4 lw-text-sm lw-tracking-normal lw-text-black\">\n      <div className=\"lw-flex lw-items-center lw-justify-between\">\n        <div className=\"lw-w-[120px] lw-shrink-0\">\n          {loading && <Loader size={LoaderSize.md} />}\n          {!loading && !isError && (\n            <Truncate\n              maxWidth={120}\n              tooltipId={INSTRUMENT_TOOLTIP_ID}\n              className=\"lw-pr-2 lw-font-sans lw-text-sm lw-font-bold\"\n              text={data?.sentiment?.[0]?.displayName || '\\u2014'}\n            />\n          )}\n        </div>\n        <Sentiment\n          withError={false}\n          isLoading={loading}\n          height={SentimentHeight.md}\n          sentiment={sentiment}\n        />\n      </div>\n      {!loading && isError && <Error />}\n    </div>\n  );\n};\n\nexport { Widget };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAGA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,uBAAA,GAAAH,OAAA;AAGA,IAAAI,SAAA,GAAAJ,OAAA;AAAoD,SAAAD,uBAAAM,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEpD,MAAMG,MAAM,GAAGC,IAAA,IAAqD;EAAA,IAApD;IAAEC,UAAU;IAAEC;EAAgC,CAAC,GAAAF,IAAA;EAC7D,MAAM;IAAEG,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAG,IAAAC,gBAAQ,EAGvCC,8CAAsB,EAAE;IACxBC,SAAS,EAAE;MACTC,IAAI,EAAER,UAAU;MAChBC;IACF;EACF,CAAC,CAAC;EAEF,MAAM;IAAEQ;EAAU,CAAC,GAAGN,IAAI,EAAEM,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;EAChD,MAAMC,OAAO,GAAGN,KAAK,IACfK,SAAS,EAAEE,YAAY,KAAK,CAAC,IAAIF,SAAS,EAAEG,WAAW,KAAK,CAAE,IAC/DH,SAAS,EAAEE,YAAY,KAAKE,SAAS,IACrCJ,SAAS,EAAEG,WAAW,KAAKC,SAAS;EAEzC,OACEzB,MAAA,CAAAS,OAAA,CAAAiB,aAAA;IAAK,eAAY,kBAAkB;IAACC,SAAS,EAAC;EAA6F,GACzI3B,MAAA,CAAAS,OAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAC;EAA4C,GACzD3B,MAAA,CAAAS,OAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAC;EAA0B,GACtCb,OAAO,IAAId,MAAA,CAAAS,OAAA,CAAAiB,aAAA,CAACvB,iBAAA,CAAAyB,MAAM;IAACC,IAAI,EAAEC,4BAAU,CAACC;EAAG,CAAE,CAAC,EAC1C,CAACjB,OAAO,IAAI,CAACQ,OAAO,IACnBtB,MAAA,CAAAS,OAAA,CAAAiB,aAAA,CAACvB,iBAAA,CAAA6B,QAAQ;IACPC,QAAQ,EAAE,GAAI;IACdC,SAAS,EAAEC,+BAAsB;IACjCR,SAAS,EAAC,8CAA8C;IACxDS,IAAI,EAAErB,IAAI,EAAEM,SAAS,GAAG,CAAC,CAAC,EAAEgB,WAAW,IAAI;EAAS,CACrD,CAEA,CAAC,EACNrC,MAAA,CAAAS,OAAA,CAAAiB,aAAA,CAACvB,iBAAA,CAAAmC,SAAS;IACRC,SAAS,EAAE,KAAM;IACjBC,SAAS,EAAE1B,OAAQ;IACnB2B,MAAM,EAAEC,iCAAe,CAACX,EAAG;IAC3BV,SAAS,EAAEA;EAAU,CACtB,CACE,CAAC,EACL,CAACP,OAAO,IAAIQ,OAAO,IAAItB,MAAA,CAAAS,OAAA,CAAAiB,aAAA,CAACvB,iBAAA,CAAAwC,KAAK,MAAE,CAC7B,CAAC;AAEV,CAAC;AAACC,OAAA,CAAAlC,MAAA,GAAAA,MAAA"}
+{"version":3,"file":"Widget.js","names":["_react","_interopRequireDefault","require","_labsWidgetCommon","_client","_getInstrumentSentiment","_constant","obj","__esModule","default","Widget","_ref","instrument","division","loading","data","error","useQuery","getInstrumentSentiment","variables","name","sentiment","isError","shortPercent","longPercent","undefined","createElement","className","Loader","size","LoaderSize","md","Truncate","maxWidth","tooltipId","INSTRUMENT_TOOLTIP_ID","text","displayName","Sentiment","withError","isLoading","height","SentimentHeight","Error","exports"],"sources":["../../../src/SentimentWidget/Widget.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Sentiment, SentimentHeight, Error, Loader, LoaderSize, Truncate,\n} from '@oanda/labs-widget-common';\nimport { useQuery } from '@apollo/client';\nimport { getInstrumentSentiment } from '../gql/getInstrumentSentiment';\nimport { SentimentWidgetConfig } from './types';\nimport { GetInstrumentSentimentQuery, GetInstrumentSentimentQueryVariables } from '../gql/types/graphql';\nimport { INSTRUMENT_TOOLTIP_ID } from '../constant';\n\nconst Widget = ({ instrument, division }: SentimentWidgetConfig) => {\n  const { loading, data, error } = useQuery<\n  GetInstrumentSentimentQuery,\n  GetInstrumentSentimentQueryVariables\n  >(getInstrumentSentiment, {\n    variables: {\n      name: instrument,\n      division,\n    },\n  });\n\n  const { sentiment } = data?.sentiment?.[0] || {};\n  const isError = error\n    || (sentiment?.shortPercent === 0 && sentiment?.longPercent === 0)\n    || sentiment?.shortPercent === undefined\n    || sentiment?.longPercent === undefined;\n\n  return (\n    <div data-testid=\"sentiment-widget\" className=\"lw-border lw-border-solid lw-border-border-primary lw-p-4 lw-text-sm lw-tracking-normal lw-text-text-primary\">\n      <div className=\"lw-flex lw-items-center lw-justify-between\">\n        <div className=\"lw-w-[120px] lw-shrink-0\">\n          {loading && <Loader size={LoaderSize.md} />}\n          {!loading && !isError && (\n            <Truncate\n              maxWidth={120}\n              tooltipId={INSTRUMENT_TOOLTIP_ID}\n              className=\"lw-pr-2 lw-font-sans lw-text-sm lw-font-bold\"\n              text={data?.sentiment?.[0]?.displayName || '\\u2014'}\n            />\n          )}\n        </div>\n        <Sentiment\n          withError={false}\n          isLoading={loading}\n          height={SentimentHeight.md}\n          sentiment={sentiment}\n        />\n      </div>\n      {!loading && isError && <Error />}\n    </div>\n  );\n};\n\nexport { Widget };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAGA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,uBAAA,GAAAH,OAAA;AAGA,IAAAI,SAAA,GAAAJ,OAAA;AAAoD,SAAAD,uBAAAM,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEpD,MAAMG,MAAM,GAAGC,IAAA,IAAqD;EAAA,IAApD;IAAEC,UAAU;IAAEC;EAAgC,CAAC,GAAAF,IAAA;EAC7D,MAAM;IAAEG,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAG,IAAAC,gBAAQ,EAGvCC,8CAAsB,EAAE;IACxBC,SAAS,EAAE;MACTC,IAAI,EAAER,UAAU;MAChBC;IACF;EACF,CAAC,CAAC;EAEF,MAAM;IAAEQ;EAAU,CAAC,GAAGN,IAAI,EAAEM,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;EAChD,MAAMC,OAAO,GAAGN,KAAK,IACfK,SAAS,EAAEE,YAAY,KAAK,CAAC,IAAIF,SAAS,EAAEG,WAAW,KAAK,CAAE,IAC/DH,SAAS,EAAEE,YAAY,KAAKE,SAAS,IACrCJ,SAAS,EAAEG,WAAW,KAAKC,SAAS;EAEzC,OACEzB,MAAA,CAAAS,OAAA,CAAAiB,aAAA;IAAK,eAAY,kBAAkB;IAACC,SAAS,EAAC;EAA8G,GAC1J3B,MAAA,CAAAS,OAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAC;EAA4C,GACzD3B,MAAA,CAAAS,OAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAC;EAA0B,GACtCb,OAAO,IAAId,MAAA,CAAAS,OAAA,CAAAiB,aAAA,CAACvB,iBAAA,CAAAyB,MAAM;IAACC,IAAI,EAAEC,4BAAU,CAACC;EAAG,CAAE,CAAC,EAC1C,CAACjB,OAAO,IAAI,CAACQ,OAAO,IACnBtB,MAAA,CAAAS,OAAA,CAAAiB,aAAA,CAACvB,iBAAA,CAAA6B,QAAQ;IACPC,QAAQ,EAAE,GAAI;IACdC,SAAS,EAAEC,+BAAsB;IACjCR,SAAS,EAAC,8CAA8C;IACxDS,IAAI,EAAErB,IAAI,EAAEM,SAAS,GAAG,CAAC,CAAC,EAAEgB,WAAW,IAAI;EAAS,CACrD,CAEA,CAAC,EACNrC,MAAA,CAAAS,OAAA,CAAAiB,aAAA,CAACvB,iBAAA,CAAAmC,SAAS;IACRC,SAAS,EAAE,KAAM;IACjBC,SAAS,EAAE1B,OAAQ;IACnB2B,MAAM,EAAEC,iCAAe,CAACX,EAAG;IAC3BV,SAAS,EAAEA;EAAU,CACtB,CACE,CAAC,EACL,CAACP,OAAO,IAAIQ,OAAO,IAAItB,MAAA,CAAAS,OAAA,CAAAiB,aAAA,CAACvB,iBAAA,CAAAwC,KAAK,MAAE,CAC7B,CAAC;AAEV,CAAC;AAACC,OAAA,CAAAlC,MAAA,GAAAA,MAAA"}

package/dist/main/SentimentWidget/components/SortSwitch/SortSwitch.js

@@ -4,11 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SortSwitch = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _types = require("./types");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const SortSwitch = _ref => {
   let {
     onClickButtonDown,
@@ -16,39 +18,43 @@ const SortSwitch = _ref => {
     selected,
     disabled
   } = _ref;
+  const isDark = (0, _react.useContext)(_labsWidgetCommon.ThemeContext) === _labsWidgetCommon.Theme.Dark;
   return _react.default.createElement("div", {
     "data-testid": "sort-switch",
     className: (0, _classnames.default)('lw-flex lw-rounded lw-border-[1px] lw-border-solid lw-font-sans lw-text-xs lw-tracking-normal', {
-      'lw-border-darkGrey': disabled,
-      'lw-border-navyBlue': !disabled
+      'lw-border-border-disabled': disabled,
+      'lw-border-secondary': !disabled
     })
   }, _react.default.createElement("button", {
     "data-testid": "sort-switch-button-up",
     disabled: disabled || selected === _types.SelectedArrow.UP,
     type: "button",
     onClick: onClickButtonUp,
-    className: (0, _classnames.default)('lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center lw-border-r-[1px] lw-border-solid focus:lw-outline-bottleGreenDark [&:enabled:hover>*]:-lw-translate-y-1', {
-      'lw-bg-navyBlue': selected === _types.SelectedArrow.UP && !disabled
+    className: (0, _classnames.default)('lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center  lw-border-solid focus:lw-outline-secondary [&:enabled:hover>*]:-lw-translate-y-1', {
+      'lw-border-r-[1px] lw-border-r-border-disabled': disabled,
+      'lw-bg-secondary': selected === _types.SelectedArrow.UP && !disabled
     })
   }, _react.default.createElement(_labsWidgetCommon.LongArrowUp, {
     className: (0, _classnames.default)('lw-transition-transform', {
       'lw-stroke-darkGrey': disabled,
-      'lw-stroke-navyBlue': selected !== _types.SelectedArrow.UP && !disabled,
-      'lw-stroke-green': selected === _types.SelectedArrow.UP && !disabled
+      'lw-stroke-secondary': selected !== _types.SelectedArrow.UP && !disabled,
+      'lw-stroke-bg-primary': selected === _types.SelectedArrow.UP && !disabled && isDark,
+      'lw-stroke-ok': selected === _types.SelectedArrow.UP && !disabled && !isDark
     })
   })), _react.default.createElement("button", {
     "data-testid": "sort-switch-button-down",
     disabled: disabled || selected === _types.SelectedArrow.DOWN,
     type: "button",
     onClick: onClickButtonDown,
-    className: (0, _classnames.default)('lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center lw-text-center focus:lw-outline-bottleGreenDark [&:enabled:hover>*]:lw-translate-y-1', {
-      'lw-bg-navyBlue': selected === _types.SelectedArrow.DOWN && !disabled
+    className: (0, _classnames.default)('lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center lw-text-center focus:lw-outline-secondary [&:enabled:hover>*]:lw-translate-y-1', {
+      'lw-bg-secondary': selected === _types.SelectedArrow.DOWN && !disabled
     })
   }, _react.default.createElement(_labsWidgetCommon.LongArrowDown, {
     className: (0, _classnames.default)('lw-transition-transform', {
       'lw-stroke-darkGrey': disabled,
-      'lw-stroke-navyBlue': selected !== _types.SelectedArrow.DOWN && !disabled,
-      'lw-stroke-green': selected === _types.SelectedArrow.DOWN && !disabled
+      'lw-stroke-secondary': selected !== _types.SelectedArrow.DOWN && !disabled,
+      'lw-stroke-bg-primary': selected === _types.SelectedArrow.DOWN && !disabled && isDark,
+      'lw-stroke-ok': selected === _types.SelectedArrow.DOWN && !disabled && !isDark
     })
   })));
 };

package/dist/main/SentimentWidget/components/SortSwitch/SortSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortSwitch.js","names":["_react","_interopRequireDefault","require","_classnames","_labsWidgetCommon","_types","obj","__esModule","default","SortSwitch","_ref","onClickButtonDown","onClickButtonUp","selected","disabled","createElement","className","classnames","SelectedArrow","UP","type","onClick","LongArrowUp","DOWN","LongArrowDown","exports"],"sources":["../../../../../src/SentimentWidget/components/SortSwitch/SortSwitch.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { LongArrowUp, LongArrowDown } from '@oanda/labs-widget-common';\nimport { SelectedArrow, SortSwitchProps } from './types';\n\nconst SortSwitch = ({\n  onClickButtonDown, onClickButtonUp, selected, disabled,\n}: SortSwitchProps) => (\n  <div\n    data-testid=\"sort-switch\"\n    className={classnames(\n      'lw-flex lw-rounded lw-border-[1px] lw-border-solid lw-font-sans lw-text-xs lw-tracking-normal',\n      {\n        'lw-border-darkGrey': disabled,\n        'lw-border-navyBlue': !disabled,\n      },\n    )}\n  >\n    <button\n      data-testid=\"sort-switch-button-up\"\n      disabled={disabled || selected === SelectedArrow.UP}\n      type=\"button\"\n      onClick={onClickButtonUp}\n      className={classnames(\n        'lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center lw-border-r-[1px] lw-border-solid focus:lw-outline-bottleGreenDark [&:enabled:hover>*]:-lw-translate-y-1',\n        {\n          'lw-bg-navyBlue': selected === SelectedArrow.UP && !disabled,\n        },\n      )}\n    >\n      <LongArrowUp\n        className={classnames(\n          'lw-transition-transform',\n          {\n            'lw-stroke-darkGrey': disabled,\n            'lw-stroke-navyBlue': selected !== SelectedArrow.UP && !disabled,\n            'lw-stroke-green': selected === SelectedArrow.UP && !disabled,\n          },\n        )}\n      />\n    </button>\n    <button\n      data-testid=\"sort-switch-button-down\"\n      disabled={disabled || selected === SelectedArrow.DOWN}\n      type=\"button\"\n      onClick={onClickButtonDown}\n      className={classnames(\n        'lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center lw-text-center focus:lw-outline-bottleGreenDark [&:enabled:hover>*]:lw-translate-y-1',\n        {\n          'lw-bg-navyBlue': selected === SelectedArrow.DOWN && !disabled,\n        },\n      )}\n    >\n      <LongArrowDown\n        className={classnames(\n          'lw-transition-transform',\n          {\n            'lw-stroke-darkGrey': disabled,\n            'lw-stroke-navyBlue': selected !== SelectedArrow.DOWN && !disabled,\n            'lw-stroke-green': selected === SelectedArrow.DOWN && !disabled,\n          },\n        )}\n      />\n    </button>\n  </div>\n);\n\nexport {\n  SortSwitch,\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAAyD,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEzD,MAAMG,UAAU,GAAGC,IAAA;EAAA,IAAC;IAClBC,iBAAiB;IAAEC,eAAe;IAAEC,QAAQ;IAAEC;EAC/B,CAAC,GAAAJ,IAAA;EAAA,OAChBV,MAAA,CAAAQ,OAAA,CAAAO,aAAA;IACE,eAAY,aAAa;IACzBC,SAAS,EAAE,IAAAC,mBAAU,EACnB,+FAA+F,EAC/F;MACE,oBAAoB,EAAEH,QAAQ;MAC9B,oBAAoB,EAAE,CAACA;IACzB,CACF;EAAE,GAEFd,MAAA,CAAAQ,OAAA,CAAAO,aAAA;IACE,eAAY,uBAAuB;IACnCD,QAAQ,EAAEA,QAAQ,IAAID,QAAQ,KAAKK,oBAAa,CAACC,EAAG;IACpDC,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAET,eAAgB;IACzBI,SAAS,EAAE,IAAAC,mBAAU,EACnB,8KAA8K,EAC9K;MACE,gBAAgB,EAAEJ,QAAQ,KAAKK,oBAAa,CAACC,EAAE,IAAI,CAACL;IACtD,CACF;EAAE,GAEFd,MAAA,CAAAQ,OAAA,CAAAO,aAAA,CAACX,iBAAA,CAAAkB,WAAW;IACVN,SAAS,EAAE,IAAAC,mBAAU,EACnB,yBAAyB,EACzB;MACE,oBAAoB,EAAEH,QAAQ;MAC9B,oBAAoB,EAAED,QAAQ,KAAKK,oBAAa,CAACC,EAAE,IAAI,CAACL,QAAQ;MAChE,iBAAiB,EAAED,QAAQ,KAAKK,oBAAa,CAACC,EAAE,IAAI,CAACL;IACvD,CACF;EAAE,CACH,CACK,CAAC,EACTd,MAAA,CAAAQ,OAAA,CAAAO,aAAA;IACE,eAAY,yBAAyB;IACrCD,QAAQ,EAAEA,QAAQ,IAAID,QAAQ,KAAKK,oBAAa,CAACK,IAAK;IACtDH,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAEV,iBAAkB;IAC3BK,SAAS,EAAE,IAAAC,mBAAU,EACnB,0JAA0J,EAC1J;MACE,gBAAgB,EAAEJ,QAAQ,KAAKK,oBAAa,CAACK,IAAI,IAAI,CAACT;IACxD,CACF;EAAE,GAEFd,MAAA,CAAAQ,OAAA,CAAAO,aAAA,CAACX,iBAAA,CAAAoB,aAAa;IACZR,SAAS,EAAE,IAAAC,mBAAU,EACnB,yBAAyB,EACzB;MACE,oBAAoB,EAAEH,QAAQ;MAC9B,oBAAoB,EAAED,QAAQ,KAAKK,oBAAa,CAACK,IAAI,IAAI,CAACT,QAAQ;MAClE,iBAAiB,EAAED,QAAQ,KAAKK,oBAAa,CAACK,IAAI,IAAI,CAACT;IACzD,CACF;EAAE,CACH,CACK,CACL,CAAC;AAAA,CACP;AAACW,OAAA,CAAAhB,UAAA,GAAAA,UAAA"}
+{"version":3,"file":"SortSwitch.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_labsWidgetCommon","_types","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SortSwitch","_ref","onClickButtonDown","onClickButtonUp","selected","disabled","isDark","useContext","ThemeContext","Theme","Dark","createElement","className","classnames","SelectedArrow","UP","type","onClick","LongArrowUp","DOWN","LongArrowDown","exports"],"sources":["../../../../../src/SentimentWidget/components/SortSwitch/SortSwitch.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classnames from 'classnames';\nimport {\n  LongArrowUp, LongArrowDown, Theme, ThemeContext,\n} from '@oanda/labs-widget-common';\nimport { SelectedArrow, SortSwitchProps } from './types';\n\nconst SortSwitch = ({\n  onClickButtonDown, onClickButtonUp, selected, disabled,\n}: SortSwitchProps) => {\n  const isDark = useContext(ThemeContext) === Theme.Dark;\n\n  return (\n    <div\n      data-testid=\"sort-switch\"\n      className={classnames(\n        'lw-flex lw-rounded lw-border-[1px] lw-border-solid lw-font-sans lw-text-xs lw-tracking-normal',\n        {\n          'lw-border-border-disabled': disabled,\n          'lw-border-secondary': !disabled,\n        },\n      )}\n    >\n      <button\n        data-testid=\"sort-switch-button-up\"\n        disabled={disabled || selected === SelectedArrow.UP}\n        type=\"button\"\n        onClick={onClickButtonUp}\n        className={classnames(\n          'lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center  lw-border-solid focus:lw-outline-secondary [&:enabled:hover>*]:-lw-translate-y-1',\n          {\n            'lw-border-r-[1px] lw-border-r-border-disabled': disabled,\n            'lw-bg-secondary': selected === SelectedArrow.UP && !disabled,\n          },\n        )}\n      >\n        <LongArrowUp\n          className={classnames(\n            'lw-transition-transform',\n            {\n              'lw-stroke-darkGrey': disabled,\n              'lw-stroke-secondary': selected !== SelectedArrow.UP && !disabled,\n              'lw-stroke-bg-primary': selected === SelectedArrow.UP && !disabled && isDark,\n              'lw-stroke-ok': selected === SelectedArrow.UP && !disabled && !isDark,\n            },\n          )}\n        />\n      </button>\n      <button\n        data-testid=\"sort-switch-button-down\"\n        disabled={disabled || selected === SelectedArrow.DOWN}\n        type=\"button\"\n        onClick={onClickButtonDown}\n        className={classnames(\n          'lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center lw-text-center focus:lw-outline-secondary [&:enabled:hover>*]:lw-translate-y-1',\n          {\n            'lw-bg-secondary': selected === SelectedArrow.DOWN && !disabled,\n          },\n        )}\n      >\n        <LongArrowDown\n          className={classnames(\n            'lw-transition-transform',\n            {\n              'lw-stroke-darkGrey': disabled,\n              'lw-stroke-secondary': selected !== SelectedArrow.DOWN && !disabled,\n              'lw-stroke-bg-primary': selected === SelectedArrow.DOWN && !disabled && isDark,\n              'lw-stroke-ok': selected === SelectedArrow.DOWN && !disabled && !isDark,\n            },\n          )}\n        />\n      </button>\n    </div>\n  );\n};\n\nexport {\n  SortSwitch,\n};\n"],"mappings":"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"}

package/dist/main/SentimentWidget/render.js

@@ -18,6 +18,7 @@ const sentimentParamsElements = document.querySelectorAll('div[data-sentiment-pa
 if (sentimentParamsElements.length > 0) {
   sentimentParamsElements.forEach(element => {
     const params = element.getAttribute('data-sentiment-params');
+    const mode = element.getAttribute('data-mode');
     const {
       instrument,
       division,
@@ -27,7 +28,8 @@ if (sentimentParamsElements.length > 0) {
       graphqlUrl: graphqlUrl,
       division: division,
       instrument: instrument,
-      locale: locale
+      locale: locale,
+      theme: mode
     }), element);
   });
 } else {

package/dist/main/SentimentWidget/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","names":["_react","_interopRequireDefault","require","_reactDom","_SentimentWidget","obj","__esModule","default","graphqlUrl","configGraphQl","division","configDivision","instrument","configInstrument","renderElementId","configRenderElementId","locale","configLocale","window","sentimentWidgetConfig","widgetsConfig","sentimentParamsElements","document","querySelectorAll","length","forEach","element","params","getAttribute","JSON","parse","render","createElement","SentimentWidget","getElementById"],"sources":["../../../src/SentimentWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { render } from 'react-dom';\nimport { SentimentWidget } from './SentimentWidget';\n\nconst {\n  graphqlUrl: configGraphQl,\n  division: configDivision,\n  instrument: configInstrument,\n  renderElementId: configRenderElementId,\n  locale: configLocale,\n} = window.sentimentWidgetConfig || {};\n\nconst {\n  graphqlUrl,\n} = window.widgetsConfig || {};\n\nconst sentimentParamsElements = document.querySelectorAll('div[data-sentiment-params]');\n\nif (sentimentParamsElements.length > 0) {\n  sentimentParamsElements.forEach((element) => {\n    const params = element.getAttribute('data-sentiment-params');\n    const { instrument, division, locale } = JSON.parse(params as string);\n\n    render(\n      <SentimentWidget\n        graphqlUrl={graphqlUrl}\n        division={division}\n        instrument={instrument}\n        locale={locale}\n      />,\n      element,\n    );\n  });\n} else {\n  render(\n    <SentimentWidget\n      graphqlUrl={configGraphQl}\n      division={configDivision}\n      instrument={configInstrument}\n      locale={configLocale}\n    />,\n    document.getElementById(configRenderElementId),\n  );\n}\n"],"mappings":";;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AAAoD,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEpD,MAAM;EACJG,UAAU,EAAEC,aAAa;EACzBC,QAAQ,EAAEC,cAAc;EACxBC,UAAU,EAAEC,gBAAgB;EAC5BC,eAAe,EAAEC,qBAAqB;EACtCC,MAAM,EAAEC;AACV,CAAC,GAAGC,MAAM,CAACC,qBAAqB,IAAI,CAAC,CAAC;AAEtC,MAAM;EACJX;AACF,CAAC,GAAGU,MAAM,CAACE,aAAa,IAAI,CAAC,CAAC;AAE9B,MAAMC,uBAAuB,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,4BAA4B,CAAC;AAEvF,IAAIF,uBAAuB,CAACG,MAAM,GAAG,CAAC,EAAE;EACtCH,uBAAuB,CAACI,OAAO,CAAEC,OAAO,IAAK;IAC3C,MAAMC,MAAM,GAAGD,OAAO,CAACE,YAAY,CAAC,uBAAuB,CAAC;IAC5D,MAAM;MAAEhB,UAAU;MAAEF,QAAQ;MAAEM;IAAO,CAAC,GAAGa,IAAI,CAACC,KAAK,CAACH,MAAgB,CAAC;IAErE,IAAAI,gBAAM,EACJ/B,MAAA,CAAAO,OAAA,CAAAyB,aAAA,CAAC5B,gBAAA,CAAA6B,eAAe;MACdzB,UAAU,EAAEA,UAAW;MACvBE,QAAQ,EAAEA,QAAS;MACnBE,UAAU,EAAEA,UAAW;MACvBI,MAAM,EAAEA;IAAO,CAChB,CAAC,EACFU,OACF,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACL,IAAAK,gBAAM,EACJ/B,MAAA,CAAAO,OAAA,CAAAyB,aAAA,CAAC5B,gBAAA,CAAA6B,eAAe;IACdzB,UAAU,EAAEC,aAAc;IAC1BC,QAAQ,EAAEC,cAAe;IACzBC,UAAU,EAAEC,gBAAiB;IAC7BG,MAAM,EAAEC;EAAa,CACtB,CAAC,EACFK,QAAQ,CAACY,cAAc,CAACnB,qBAAqB,CAC/C,CAAC;AACH"}
+{"version":3,"file":"render.js","names":["_react","_interopRequireDefault","require","_reactDom","_SentimentWidget","obj","__esModule","default","graphqlUrl","configGraphQl","division","configDivision","instrument","configInstrument","renderElementId","configRenderElementId","locale","configLocale","window","sentimentWidgetConfig","widgetsConfig","sentimentParamsElements","document","querySelectorAll","length","forEach","element","params","getAttribute","mode","JSON","parse","render","createElement","SentimentWidget","theme","getElementById"],"sources":["../../../src/SentimentWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { render } from 'react-dom';\nimport { Theme } from '@oanda/labs-widget-common';\nimport { SentimentWidget } from './SentimentWidget';\n\nconst {\n  graphqlUrl: configGraphQl,\n  division: configDivision,\n  instrument: configInstrument,\n  renderElementId: configRenderElementId,\n  locale: configLocale,\n} = window.sentimentWidgetConfig || {};\n\nconst {\n  graphqlUrl,\n} = window.widgetsConfig || {};\n\nconst sentimentParamsElements = document.querySelectorAll('div[data-sentiment-params]');\n\nif (sentimentParamsElements.length > 0) {\n  sentimentParamsElements.forEach((element) => {\n    const params = element.getAttribute('data-sentiment-params');\n    const mode = element.getAttribute('data-mode');\n    const { instrument, division, locale } = JSON.parse(params as string);\n\n    render(\n      <SentimentWidget\n        graphqlUrl={graphqlUrl}\n        division={division}\n        instrument={instrument}\n        locale={locale}\n        theme={mode as Theme}\n      />,\n      element,\n    );\n  });\n} else {\n  render(\n    <SentimentWidget\n      graphqlUrl={configGraphQl}\n      division={configDivision}\n      instrument={configInstrument}\n      locale={configLocale}\n    />,\n    document.getElementById(configRenderElementId),\n  );\n}\n"],"mappings":";;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAEA,IAAAE,gBAAA,GAAAF,OAAA;AAAoD,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEpD,MAAM;EACJG,UAAU,EAAEC,aAAa;EACzBC,QAAQ,EAAEC,cAAc;EACxBC,UAAU,EAAEC,gBAAgB;EAC5BC,eAAe,EAAEC,qBAAqB;EACtCC,MAAM,EAAEC;AACV,CAAC,GAAGC,MAAM,CAACC,qBAAqB,IAAI,CAAC,CAAC;AAEtC,MAAM;EACJX;AACF,CAAC,GAAGU,MAAM,CAACE,aAAa,IAAI,CAAC,CAAC;AAE9B,MAAMC,uBAAuB,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,4BAA4B,CAAC;AAEvF,IAAIF,uBAAuB,CAACG,MAAM,GAAG,CAAC,EAAE;EACtCH,uBAAuB,CAACI,OAAO,CAAEC,OAAO,IAAK;IAC3C,MAAMC,MAAM,GAAGD,OAAO,CAACE,YAAY,CAAC,uBAAuB,CAAC;IAC5D,MAAMC,IAAI,GAAGH,OAAO,CAACE,YAAY,CAAC,WAAW,CAAC;IAC9C,MAAM;MAAEhB,UAAU;MAAEF,QAAQ;MAAEM;IAAO,CAAC,GAAGc,IAAI,CAACC,KAAK,CAACJ,MAAgB,CAAC;IAErE,IAAAK,gBAAM,EACJhC,MAAA,CAAAO,OAAA,CAAA0B,aAAA,CAAC7B,gBAAA,CAAA8B,eAAe;MACd1B,UAAU,EAAEA,UAAW;MACvBE,QAAQ,EAAEA,QAAS;MACnBE,UAAU,EAAEA,UAAW;MACvBI,MAAM,EAAEA,MAAO;MACfmB,KAAK,EAAEN;IAAc,CACtB,CAAC,EACFH,OACF,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACL,IAAAM,gBAAM,EACJhC,MAAA,CAAAO,OAAA,CAAA0B,aAAA,CAAC7B,gBAAA,CAAA8B,eAAe;IACd1B,UAAU,EAAEC,aAAc;IAC1BC,QAAQ,EAAEC,cAAe;IACzBC,UAAU,EAAEC,gBAAiB;IAC7BG,MAAM,EAAEC;EAAa,CACtB,CAAC,EACFK,QAAQ,CAACc,cAAc,CAACrB,qBAAqB,CAC/C,CAAC;AACH"}

package/dist/main/SentimentWidget/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/SentimentWidget/types.ts"],"sourcesContent":["import { Locale } from '@oanda/mono-i18n';\nimport { Division } from '../gql/types/graphql';\n\nexport interface SentimentConfig {\n  graphqlUrl: string;\n  division: Division;\n  instrument?: string;\n  locale: Locale;\n}\nexport interface SentimentWrapperConfig extends SentimentConfig {\n  renderElementId: string;\n}\nexport interface SentimentWidgetConfig {\n  division: Division;\n  instrument: string;\n}\n\nexport interface SentimentToolConfig {\n  division: Division;\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/SentimentWidget/types.ts"],"sourcesContent":["import { Locale } from '@oanda/mono-i18n';\nimport { Theme } from '@oanda/labs-widget-common';\nimport { Division } from '../gql/types/graphql';\n\nexport interface SentimentConfig {\n  graphqlUrl: string;\n  division: Division;\n  instrument?: string;\n  locale: Locale;\n  theme?: Theme;\n}\nexport interface SentimentWrapperConfig extends SentimentConfig {\n  renderElementId: string;\n}\nexport interface SentimentWidgetConfig {\n  division: Division;\n  instrument: string;\n}\n\nexport interface SentimentToolConfig {\n  division: Division;\n}\n"],"mappings":""}

package/dist/module/SentimentWidget/SentimentWidget.js

@@ -10,13 +10,16 @@ const SentimentWidget = _ref => {
     graphqlUrl,
     division,
     instrument,
-    locale
+    locale,
+    theme
   } = _ref;
   const client = new ApolloClient({
     uri: graphqlUrl,
     cache: new InMemoryCache()
   });
-  return React.createElement(ThemeProvider, null, React.createElement(LocaleProvider, {
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(LocaleProvider, {
     locale: getLocale(locale),
     translations: translations
   }, React.createElement(ApolloProvider, {

package/dist/module/SentimentWidget/SentimentWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"SentimentWidget.js","names":["React","ApolloClient","InMemoryCache","ApolloProvider","LocaleProvider","ThemeProvider","getLocale","Widget","Tool","translations","SentimentWidget","_ref","graphqlUrl","division","instrument","locale","client","uri","cache","createElement"],"sources":["../../../src/SentimentWidget/SentimentWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport { ThemeProvider, getLocale } from '@oanda/labs-widget-common';\nimport { Widget } from './Widget';\nimport { Tool } from './Tool';\nimport { SentimentConfig } from './types';\nimport { translations } from '../translations';\n\nconst SentimentWidget = ({\n  graphqlUrl, division, instrument, locale,\n}: SentimentConfig) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  return (\n    <ThemeProvider>\n      <LocaleProvider locale={getLocale(locale)} translations={translations}>\n        <ApolloProvider client={client}>\n          {instrument ? (\n            <Widget division={division} instrument={instrument} />\n          ) : (\n            <Tool division={division} />\n          )}\n        </ApolloProvider>\n      </LocaleProvider>\n    </ThemeProvider>\n  );\n};\n\nexport { SentimentWidget };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,aAAa,EAAEC,cAAc,QAAQ,gBAAgB;AAC5E,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,aAAa,EAAEC,SAAS,QAAQ,2BAA2B;AACpE,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,IAAI,QAAQ,QAAQ;AAE7B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,MAAMC,eAAe,GAAGC,IAAA,IAED;EAAA,IAFE;IACvBC,UAAU;IAAEC,QAAQ;IAAEC,UAAU;IAAEC;EACnB,CAAC,GAAAJ,IAAA;EAChB,MAAMK,MAAM,GAAG,IAAIf,YAAY,CAAC;IAC9BgB,GAAG,EAAEL,UAAU;IACfM,KAAK,EAAE,IAAIhB,aAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,OACEF,KAAA,CAAAmB,aAAA,CAACd,aAAa,QACZL,KAAA,CAAAmB,aAAA,CAACf,cAAc;IAACW,MAAM,EAAET,SAAS,CAACS,MAAM,CAAE;IAACN,YAAY,EAAEA;EAAa,GACpET,KAAA,CAAAmB,aAAA,CAAChB,cAAc;IAACa,MAAM,EAAEA;EAAO,GAC5BF,UAAU,GACTd,KAAA,CAAAmB,aAAA,CAACZ,MAAM;IAACM,QAAQ,EAAEA,QAAS;IAACC,UAAU,EAAEA;EAAW,CAAE,CAAC,GAEtDd,KAAA,CAAAmB,aAAA,CAACX,IAAI;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAEf,CACF,CACH,CAAC;AAEpB,CAAC;AAED,SAASH,eAAe"}
+{"version":3,"file":"SentimentWidget.js","names":["React","ApolloClient","InMemoryCache","ApolloProvider","LocaleProvider","ThemeProvider","getLocale","Widget","Tool","translations","SentimentWidget","_ref","graphqlUrl","division","instrument","locale","theme","client","uri","cache","createElement"],"sources":["../../../src/SentimentWidget/SentimentWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport { ThemeProvider, getLocale } from '@oanda/labs-widget-common';\nimport { Widget } from './Widget';\nimport { Tool } from './Tool';\nimport { SentimentConfig } from './types';\nimport { translations } from '../translations';\n\nconst SentimentWidget = ({\n  graphqlUrl, division, instrument, locale, theme,\n}: SentimentConfig) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  return (\n    <ThemeProvider theme={theme}>\n      <LocaleProvider locale={getLocale(locale)} translations={translations}>\n        <ApolloProvider client={client}>\n          {instrument ? (\n            <Widget division={division} instrument={instrument} />\n          ) : (\n            <Tool division={division} />\n          )}\n        </ApolloProvider>\n      </LocaleProvider>\n    </ThemeProvider>\n  );\n};\n\nexport { SentimentWidget };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,aAAa,EAAEC,cAAc,QAAQ,gBAAgB;AAC5E,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,aAAa,EAAEC,SAAS,QAAQ,2BAA2B;AACpE,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,IAAI,QAAQ,QAAQ;AAE7B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,MAAMC,eAAe,GAAGC,IAAA,IAED;EAAA,IAFE;IACvBC,UAAU;IAAEC,QAAQ;IAAEC,UAAU;IAAEC,MAAM;IAAEC;EAC3B,CAAC,GAAAL,IAAA;EAChB,MAAMM,MAAM,GAAG,IAAIhB,YAAY,CAAC;IAC9BiB,GAAG,EAAEN,UAAU;IACfO,KAAK,EAAE,IAAIjB,aAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,OACEF,KAAA,CAAAoB,aAAA,CAACf,aAAa;IAACW,KAAK,EAAEA;EAAM,GAC1BhB,KAAA,CAAAoB,aAAA,CAAChB,cAAc;IAACW,MAAM,EAAET,SAAS,CAACS,MAAM,CAAE;IAACN,YAAY,EAAEA;EAAa,GACpET,KAAA,CAAAoB,aAAA,CAACjB,cAAc;IAACc,MAAM,EAAEA;EAAO,GAC5BH,UAAU,GACTd,KAAA,CAAAoB,aAAA,CAACb,MAAM;IAACM,QAAQ,EAAEA,QAAS;IAACC,UAAU,EAAEA;EAAW,CAAE,CAAC,GAEtDd,KAAA,CAAAoB,aAAA,CAACZ,IAAI;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAEf,CACF,CACH,CAAC;AAEpB,CAAC;AAED,SAASH,eAAe"}

package/dist/module/SentimentWidget/Tool.js

@@ -32,7 +32,7 @@ const Tool = _ref => {
   } = useLocale();
   return React.createElement("div", {
     "data-testid": "sentiment-tool",
-    className: "lw-relative lw-overflow-hidden lw-text-sm lw-tracking-normal lw-text-black"
+    className: "lw-relative lw-overflow-hidden lw-text-sm lw-tracking-normal lw-text-text-primary"
   }, error || sortedData.length === 0 ? React.createElement("div", {
     className: "lw-flex lw-h-[200px] lw-items-center lw-justify-center lw-border lw-border-solid lw-border-grey lw-p-2"
   }, React.createElement(ChartError, null)) : React.createElement(React.Fragment, null, React.createElement("div", {

package/dist/module/SentimentWidget/Tool.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tool.js","names":["React","useEffect","useState","Sentiment","SentimentHeight","Loader","LoaderSize","ChartError","Truncate","Tooltip","useQuery","useLocale","getSentimentList","sortData","SelectedArrow","SortSwitch","Sort","INSTRUMENT_TOOLTIP_ID","Tool","_ref","division","sort","setSort","Bullish","sortedData","setSortedData","Array","fill","loading","data","error","variables","lang","createElement","className","length","Fragment","disabled","selected","UP","DOWN","onClickButtonDown","Bearish","onClickButtonUp","map","item","index","key","name","size","md","maxWidth","tooltipId","text","displayName","isLoading","height","sentiment","id"],"sources":["../../../src/SentimentWidget/Tool.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport {\n  Sentiment, SentimentHeight, Loader, LoaderSize, ChartError, Truncate, Tooltip,\n} from '@oanda/labs-widget-common';\nimport { useQuery } from '@apollo/client';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { getSentimentList } from '../gql/getSentimentList';\nimport { SentimentToolConfig } from './types';\nimport { sortData } from './utils';\nimport { SelectedArrow, SortSwitch } from './components/SortSwitch';\nimport {\n  GetSentimentListQuery, GetSentimentListQueryVariables, SentimentInstrument, Sort,\n} from '../gql/types/graphql';\nimport { INSTRUMENT_TOOLTIP_ID } from '../constant';\n\nconst Tool = ({ division }: SentimentToolConfig) => {\n  const [sort, setSort] = useState(Sort.Bullish);\n  const [sortedData, setSortedData] = useState<Omit<SentimentInstrument, 'id'>[]>(new Array(20).fill({}));\n  const { loading, data, error } = useQuery<\n  GetSentimentListQuery,\n  GetSentimentListQueryVariables\n  >(getSentimentList, {\n    variables: {\n      division,\n    },\n  });\n\n  useEffect(() => {\n    if (data) {\n      setSortedData(sortData(data, sort));\n    }\n  }, [data, sort]);\n\n  const { lang } = useLocale();\n\n  return (\n    <div data-testid=\"sentiment-tool\" className=\"lw-relative lw-overflow-hidden lw-text-sm lw-tracking-normal lw-text-black\">\n      {error || sortedData.length === 0 ? (\n        <div className=\"lw-flex lw-h-[200px] lw-items-center lw-justify-center lw-border lw-border-solid lw-border-grey lw-p-2\">\n          <ChartError />\n        </div>\n      ) : (\n        <>\n          <div className=\"lw-flex lw-justify-end lw-pb-5\">\n            <SortSwitch\n              disabled={loading}\n              selected={sort === Sort.Bullish ? SelectedArrow.UP : SelectedArrow.DOWN}\n              onClickButtonDown={() => setSort(Sort.Bearish)}\n              onClickButtonUp={() => setSort(Sort.Bullish)}\n            />\n          </div>\n          <div className=\"lw-flex lw-flex-col lw-border lw-border-solid lw-border-grey lw-p-2\">\n            <div className=\"lw-mb-2 lw-flex lw-justify-between lw-font-semibold\">\n              <span className=\"lw-ml-[7.5rem] lw-uppercase md:lw-ml-40\">{lang('net_short')}</span>\n              <span className=\"lw-text-right lw-uppercase md:lw-mr-10\">{lang('net_long')}</span>\n            </div>\n            {sortedData.map((item, index) => (\n              <div className=\"lw-flex lw-h-8 lw-w-full lw-items-center\" key={item.name || index}>\n                <div className=\"lw-w-[120px] lw-shrink-0\">\n                  {loading ? (\n                    <Loader size={LoaderSize.md} />\n                  ) : (\n                    <Truncate\n                      maxWidth={120}\n                      tooltipId={INSTRUMENT_TOOLTIP_ID}\n                      className=\"lw-pr-2 lw-font-sans lw-text-sm lw-font-bold\"\n                      text={item.displayName || '\\u2014'}\n                    />\n                  )}\n                </div>\n                <Sentiment\n                  isLoading={loading}\n                  height={SentimentHeight.md}\n                  sentiment={item.sentiment}\n                />\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      <Tooltip id={INSTRUMENT_TOOLTIP_ID} />\n    </div>\n  );\n};\n\nexport { Tool };\n"],"mappings":"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"}
+{"version":3,"file":"Tool.js","names":["React","useEffect","useState","Sentiment","SentimentHeight","Loader","LoaderSize","ChartError","Truncate","Tooltip","useQuery","useLocale","getSentimentList","sortData","SelectedArrow","SortSwitch","Sort","INSTRUMENT_TOOLTIP_ID","Tool","_ref","division","sort","setSort","Bullish","sortedData","setSortedData","Array","fill","loading","data","error","variables","lang","createElement","className","length","Fragment","disabled","selected","UP","DOWN","onClickButtonDown","Bearish","onClickButtonUp","map","item","index","key","name","size","md","maxWidth","tooltipId","text","displayName","isLoading","height","sentiment","id"],"sources":["../../../src/SentimentWidget/Tool.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport {\n  Sentiment, SentimentHeight, Loader, LoaderSize, ChartError, Truncate, Tooltip,\n} from '@oanda/labs-widget-common';\nimport { useQuery } from '@apollo/client';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { getSentimentList } from '../gql/getSentimentList';\nimport { SentimentToolConfig } from './types';\nimport { sortData } from './utils';\nimport { SelectedArrow, SortSwitch } from './components/SortSwitch';\nimport {\n  GetSentimentListQuery, GetSentimentListQueryVariables, SentimentInstrument, Sort,\n} from '../gql/types/graphql';\nimport { INSTRUMENT_TOOLTIP_ID } from '../constant';\n\nconst Tool = ({ division }: SentimentToolConfig) => {\n  const [sort, setSort] = useState(Sort.Bullish);\n  const [sortedData, setSortedData] = useState<Omit<SentimentInstrument, 'id'>[]>(new Array(20).fill({}));\n  const { loading, data, error } = useQuery<\n  GetSentimentListQuery,\n  GetSentimentListQueryVariables\n  >(getSentimentList, {\n    variables: {\n      division,\n    },\n  });\n\n  useEffect(() => {\n    if (data) {\n      setSortedData(sortData(data, sort));\n    }\n  }, [data, sort]);\n\n  const { lang } = useLocale();\n\n  return (\n    <div data-testid=\"sentiment-tool\" className=\"lw-relative lw-overflow-hidden lw-text-sm lw-tracking-normal lw-text-text-primary\">\n      {error || sortedData.length === 0 ? (\n        <div className=\"lw-flex lw-h-[200px] lw-items-center lw-justify-center lw-border lw-border-solid lw-border-grey lw-p-2\">\n          <ChartError />\n        </div>\n      ) : (\n        <>\n          <div className=\"lw-flex lw-justify-end lw-pb-5\">\n            <SortSwitch\n              disabled={loading}\n              selected={sort === Sort.Bullish ? SelectedArrow.UP : SelectedArrow.DOWN}\n              onClickButtonDown={() => setSort(Sort.Bearish)}\n              onClickButtonUp={() => setSort(Sort.Bullish)}\n            />\n          </div>\n          <div className=\"lw-flex lw-flex-col lw-border lw-border-solid lw-border-grey lw-p-2\">\n            <div className=\"lw-mb-2 lw-flex lw-justify-between lw-font-semibold\">\n              <span className=\"lw-ml-[7.5rem] lw-uppercase md:lw-ml-40\">{lang('net_short')}</span>\n              <span className=\"lw-text-right lw-uppercase md:lw-mr-10\">{lang('net_long')}</span>\n            </div>\n            {sortedData.map((item, index) => (\n              <div className=\"lw-flex lw-h-8 lw-w-full lw-items-center\" key={item.name || index}>\n                <div className=\"lw-w-[120px] lw-shrink-0\">\n                  {loading ? (\n                    <Loader size={LoaderSize.md} />\n                  ) : (\n                    <Truncate\n                      maxWidth={120}\n                      tooltipId={INSTRUMENT_TOOLTIP_ID}\n                      className=\"lw-pr-2 lw-font-sans lw-text-sm lw-font-bold\"\n                      text={item.displayName || '\\u2014'}\n                    />\n                  )}\n                </div>\n                <Sentiment\n                  isLoading={loading}\n                  height={SentimentHeight.md}\n                  sentiment={item.sentiment}\n                />\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      <Tooltip id={INSTRUMENT_TOOLTIP_ID} />\n    </div>\n  );\n};\n\nexport { Tool };\n"],"mappings":"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"}

package/dist/module/SentimentWidget/Widget.js

@@ -24,7 +24,7 @@ const Widget = _ref => {
   const isError = error || sentiment?.shortPercent === 0 && sentiment?.longPercent === 0 || sentiment?.shortPercent === undefined || sentiment?.longPercent === undefined;
   return React.createElement("div", {
     "data-testid": "sentiment-widget",
-    className: "lw-border lw-border-solid lw-border-grey lw-p-4 lw-text-sm lw-tracking-normal lw-text-black"
+    className: "lw-border lw-border-solid lw-border-border-primary lw-p-4 lw-text-sm lw-tracking-normal lw-text-text-primary"
   }, React.createElement("div", {
     className: "lw-flex lw-items-center lw-justify-between"
   }, React.createElement("div", {

package/dist/module/SentimentWidget/Widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"Widget.js","names":["React","Sentiment","SentimentHeight","Error","Loader","LoaderSize","Truncate","useQuery","getInstrumentSentiment","INSTRUMENT_TOOLTIP_ID","Widget","_ref","instrument","division","loading","data","error","variables","name","sentiment","isError","shortPercent","longPercent","undefined","createElement","className","size","md","maxWidth","tooltipId","text","displayName","withError","isLoading","height"],"sources":["../../../src/SentimentWidget/Widget.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Sentiment, SentimentHeight, Error, Loader, LoaderSize, Truncate,\n} from '@oanda/labs-widget-common';\nimport { useQuery } from '@apollo/client';\nimport { getInstrumentSentiment } from '../gql/getInstrumentSentiment';\nimport { SentimentWidgetConfig } from './types';\nimport { GetInstrumentSentimentQuery, GetInstrumentSentimentQueryVariables } from '../gql/types/graphql';\nimport { INSTRUMENT_TOOLTIP_ID } from '../constant';\n\nconst Widget = ({ instrument, division }: SentimentWidgetConfig) => {\n  const { loading, data, error } = useQuery<\n  GetInstrumentSentimentQuery,\n  GetInstrumentSentimentQueryVariables\n  >(getInstrumentSentiment, {\n    variables: {\n      name: instrument,\n      division,\n    },\n  });\n\n  const { sentiment } = data?.sentiment?.[0] || {};\n  const isError = error\n    || (sentiment?.shortPercent === 0 && sentiment?.longPercent === 0)\n    || sentiment?.shortPercent === undefined\n    || sentiment?.longPercent === undefined;\n\n  return (\n    <div data-testid=\"sentiment-widget\" className=\"lw-border lw-border-solid lw-border-grey lw-p-4 lw-text-sm lw-tracking-normal lw-text-black\">\n      <div className=\"lw-flex lw-items-center lw-justify-between\">\n        <div className=\"lw-w-[120px] lw-shrink-0\">\n          {loading && <Loader size={LoaderSize.md} />}\n          {!loading && !isError && (\n            <Truncate\n              maxWidth={120}\n              tooltipId={INSTRUMENT_TOOLTIP_ID}\n              className=\"lw-pr-2 lw-font-sans lw-text-sm lw-font-bold\"\n              text={data?.sentiment?.[0]?.displayName || '\\u2014'}\n            />\n          )}\n        </div>\n        <Sentiment\n          withError={false}\n          isLoading={loading}\n          height={SentimentHeight.md}\n          sentiment={sentiment}\n        />\n      </div>\n      {!loading && isError && <Error />}\n    </div>\n  );\n};\n\nexport { Widget };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,SAAS,EAAEC,eAAe,EAAEC,KAAK,EAAEC,MAAM,EAAEC,UAAU,EAAEC,QAAQ,QAC1D,2BAA2B;AAClC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,sBAAsB,QAAQ,+BAA+B;AAGtE,SAASC,qBAAqB,QAAQ,aAAa;AAEnD,MAAMC,MAAM,GAAGC,IAAA,IAAqD;EAAA,IAApD;IAAEC,UAAU;IAAEC;EAAgC,CAAC,GAAAF,IAAA;EAC7D,MAAM;IAAEG,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGT,QAAQ,CAGvCC,sBAAsB,EAAE;IACxBS,SAAS,EAAE;MACTC,IAAI,EAAEN,UAAU;MAChBC;IACF;EACF,CAAC,CAAC;EAEF,MAAM;IAAEM;EAAU,CAAC,GAAGJ,IAAI,EAAEI,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;EAChD,MAAMC,OAAO,GAAGJ,KAAK,IACfG,SAAS,EAAEE,YAAY,KAAK,CAAC,IAAIF,SAAS,EAAEG,WAAW,KAAK,CAAE,IAC/DH,SAAS,EAAEE,YAAY,KAAKE,SAAS,IACrCJ,SAAS,EAAEG,WAAW,KAAKC,SAAS;EAEzC,OACEvB,KAAA,CAAAwB,aAAA;IAAK,eAAY,kBAAkB;IAACC,SAAS,EAAC;EAA6F,GACzIzB,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAC;EAA4C,GACzDzB,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAC;EAA0B,GACtCX,OAAO,IAAId,KAAA,CAAAwB,aAAA,CAACpB,MAAM;IAACsB,IAAI,EAAErB,UAAU,CAACsB;EAAG,CAAE,CAAC,EAC1C,CAACb,OAAO,IAAI,CAACM,OAAO,IACnBpB,KAAA,CAAAwB,aAAA,CAAClB,QAAQ;IACPsB,QAAQ,EAAE,GAAI;IACdC,SAAS,EAAEpB,qBAAsB;IACjCgB,SAAS,EAAC,8CAA8C;IACxDK,IAAI,EAAEf,IAAI,EAAEI,SAAS,GAAG,CAAC,CAAC,EAAEY,WAAW,IAAI;EAAS,CACrD,CAEA,CAAC,EACN/B,KAAA,CAAAwB,aAAA,CAACvB,SAAS;IACR+B,SAAS,EAAE,KAAM;IACjBC,SAAS,EAAEnB,OAAQ;IACnBoB,MAAM,EAAEhC,eAAe,CAACyB,EAAG;IAC3BR,SAAS,EAAEA;EAAU,CACtB,CACE,CAAC,EACL,CAACL,OAAO,IAAIM,OAAO,IAAIpB,KAAA,CAAAwB,aAAA,CAACrB,KAAK,MAAE,CAC7B,CAAC;AAEV,CAAC;AAED,SAASO,MAAM"}
+{"version":3,"file":"Widget.js","names":["React","Sentiment","SentimentHeight","Error","Loader","LoaderSize","Truncate","useQuery","getInstrumentSentiment","INSTRUMENT_TOOLTIP_ID","Widget","_ref","instrument","division","loading","data","error","variables","name","sentiment","isError","shortPercent","longPercent","undefined","createElement","className","size","md","maxWidth","tooltipId","text","displayName","withError","isLoading","height"],"sources":["../../../src/SentimentWidget/Widget.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Sentiment, SentimentHeight, Error, Loader, LoaderSize, Truncate,\n} from '@oanda/labs-widget-common';\nimport { useQuery } from '@apollo/client';\nimport { getInstrumentSentiment } from '../gql/getInstrumentSentiment';\nimport { SentimentWidgetConfig } from './types';\nimport { GetInstrumentSentimentQuery, GetInstrumentSentimentQueryVariables } from '../gql/types/graphql';\nimport { INSTRUMENT_TOOLTIP_ID } from '../constant';\n\nconst Widget = ({ instrument, division }: SentimentWidgetConfig) => {\n  const { loading, data, error } = useQuery<\n  GetInstrumentSentimentQuery,\n  GetInstrumentSentimentQueryVariables\n  >(getInstrumentSentiment, {\n    variables: {\n      name: instrument,\n      division,\n    },\n  });\n\n  const { sentiment } = data?.sentiment?.[0] || {};\n  const isError = error\n    || (sentiment?.shortPercent === 0 && sentiment?.longPercent === 0)\n    || sentiment?.shortPercent === undefined\n    || sentiment?.longPercent === undefined;\n\n  return (\n    <div data-testid=\"sentiment-widget\" className=\"lw-border lw-border-solid lw-border-border-primary lw-p-4 lw-text-sm lw-tracking-normal lw-text-text-primary\">\n      <div className=\"lw-flex lw-items-center lw-justify-between\">\n        <div className=\"lw-w-[120px] lw-shrink-0\">\n          {loading && <Loader size={LoaderSize.md} />}\n          {!loading && !isError && (\n            <Truncate\n              maxWidth={120}\n              tooltipId={INSTRUMENT_TOOLTIP_ID}\n              className=\"lw-pr-2 lw-font-sans lw-text-sm lw-font-bold\"\n              text={data?.sentiment?.[0]?.displayName || '\\u2014'}\n            />\n          )}\n        </div>\n        <Sentiment\n          withError={false}\n          isLoading={loading}\n          height={SentimentHeight.md}\n          sentiment={sentiment}\n        />\n      </div>\n      {!loading && isError && <Error />}\n    </div>\n  );\n};\n\nexport { Widget };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,SAAS,EAAEC,eAAe,EAAEC,KAAK,EAAEC,MAAM,EAAEC,UAAU,EAAEC,QAAQ,QAC1D,2BAA2B;AAClC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,sBAAsB,QAAQ,+BAA+B;AAGtE,SAASC,qBAAqB,QAAQ,aAAa;AAEnD,MAAMC,MAAM,GAAGC,IAAA,IAAqD;EAAA,IAApD;IAAEC,UAAU;IAAEC;EAAgC,CAAC,GAAAF,IAAA;EAC7D,MAAM;IAAEG,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGT,QAAQ,CAGvCC,sBAAsB,EAAE;IACxBS,SAAS,EAAE;MACTC,IAAI,EAAEN,UAAU;MAChBC;IACF;EACF,CAAC,CAAC;EAEF,MAAM;IAAEM;EAAU,CAAC,GAAGJ,IAAI,EAAEI,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;EAChD,MAAMC,OAAO,GAAGJ,KAAK,IACfG,SAAS,EAAEE,YAAY,KAAK,CAAC,IAAIF,SAAS,EAAEG,WAAW,KAAK,CAAE,IAC/DH,SAAS,EAAEE,YAAY,KAAKE,SAAS,IACrCJ,SAAS,EAAEG,WAAW,KAAKC,SAAS;EAEzC,OACEvB,KAAA,CAAAwB,aAAA;IAAK,eAAY,kBAAkB;IAACC,SAAS,EAAC;EAA8G,GAC1JzB,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAC;EAA4C,GACzDzB,KAAA,CAAAwB,aAAA;IAAKC,SAAS,EAAC;EAA0B,GACtCX,OAAO,IAAId,KAAA,CAAAwB,aAAA,CAACpB,MAAM;IAACsB,IAAI,EAAErB,UAAU,CAACsB;EAAG,CAAE,CAAC,EAC1C,CAACb,OAAO,IAAI,CAACM,OAAO,IACnBpB,KAAA,CAAAwB,aAAA,CAAClB,QAAQ;IACPsB,QAAQ,EAAE,GAAI;IACdC,SAAS,EAAEpB,qBAAsB;IACjCgB,SAAS,EAAC,8CAA8C;IACxDK,IAAI,EAAEf,IAAI,EAAEI,SAAS,GAAG,CAAC,CAAC,EAAEY,WAAW,IAAI;EAAS,CACrD,CAEA,CAAC,EACN/B,KAAA,CAAAwB,aAAA,CAACvB,SAAS;IACR+B,SAAS,EAAE,KAAM;IACjBC,SAAS,EAAEnB,OAAQ;IACnBoB,MAAM,EAAEhC,eAAe,CAACyB,EAAG;IAC3BR,SAAS,EAAEA;EAAU,CACtB,CACE,CAAC,EACL,CAACL,OAAO,IAAIM,OAAO,IAAIpB,KAAA,CAAAwB,aAAA,CAACrB,KAAK,MAAE,CAC7B,CAAC;AAEV,CAAC;AAED,SAASO,MAAM"}

package/dist/module/SentimentWidget/components/SortSwitch/SortSwitch.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import classnames from 'classnames';
-import { LongArrowUp, LongArrowDown } from '@oanda/labs-widget-common';
+import { LongArrowUp, LongArrowDown, Theme, ThemeContext } from '@oanda/labs-widget-common';
 import { SelectedArrow } from './types';
 const SortSwitch = _ref => {
   let {
@@ -9,39 +9,43 @@ const SortSwitch = _ref => {
     selected,
     disabled
   } = _ref;
+  const isDark = useContext(ThemeContext) === Theme.Dark;
   return React.createElement("div", {
     "data-testid": "sort-switch",
     className: classnames('lw-flex lw-rounded lw-border-[1px] lw-border-solid lw-font-sans lw-text-xs lw-tracking-normal', {
-      'lw-border-darkGrey': disabled,
-      'lw-border-navyBlue': !disabled
+      'lw-border-border-disabled': disabled,
+      'lw-border-secondary': !disabled
     })
   }, React.createElement("button", {
     "data-testid": "sort-switch-button-up",
     disabled: disabled || selected === SelectedArrow.UP,
     type: "button",
     onClick: onClickButtonUp,
-    className: classnames('lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center lw-border-r-[1px] lw-border-solid focus:lw-outline-bottleGreenDark [&:enabled:hover>*]:-lw-translate-y-1', {
-      'lw-bg-navyBlue': selected === SelectedArrow.UP && !disabled
+    className: classnames('lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center  lw-border-solid focus:lw-outline-secondary [&:enabled:hover>*]:-lw-translate-y-1', {
+      'lw-border-r-[1px] lw-border-r-border-disabled': disabled,
+      'lw-bg-secondary': selected === SelectedArrow.UP && !disabled
     })
   }, React.createElement(LongArrowUp, {
     className: classnames('lw-transition-transform', {
       'lw-stroke-darkGrey': disabled,
-      'lw-stroke-navyBlue': selected !== SelectedArrow.UP && !disabled,
-      'lw-stroke-green': selected === SelectedArrow.UP && !disabled
+      'lw-stroke-secondary': selected !== SelectedArrow.UP && !disabled,
+      'lw-stroke-bg-primary': selected === SelectedArrow.UP && !disabled && isDark,
+      'lw-stroke-ok': selected === SelectedArrow.UP && !disabled && !isDark
     })
   })), React.createElement("button", {
     "data-testid": "sort-switch-button-down",
     disabled: disabled || selected === SelectedArrow.DOWN,
     type: "button",
     onClick: onClickButtonDown,
-    className: classnames('lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center lw-text-center focus:lw-outline-bottleGreenDark [&:enabled:hover>*]:lw-translate-y-1', {
-      'lw-bg-navyBlue': selected === SelectedArrow.DOWN && !disabled
+    className: classnames('lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center lw-text-center focus:lw-outline-secondary [&:enabled:hover>*]:lw-translate-y-1', {
+      'lw-bg-secondary': selected === SelectedArrow.DOWN && !disabled
     })
   }, React.createElement(LongArrowDown, {
     className: classnames('lw-transition-transform', {
       'lw-stroke-darkGrey': disabled,
-      'lw-stroke-navyBlue': selected !== SelectedArrow.DOWN && !disabled,
-      'lw-stroke-green': selected === SelectedArrow.DOWN && !disabled
+      'lw-stroke-secondary': selected !== SelectedArrow.DOWN && !disabled,
+      'lw-stroke-bg-primary': selected === SelectedArrow.DOWN && !disabled && isDark,
+      'lw-stroke-ok': selected === SelectedArrow.DOWN && !disabled && !isDark
     })
   })));
 };

package/dist/module/SentimentWidget/components/SortSwitch/SortSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortSwitch.js","names":["React","classnames","LongArrowUp","LongArrowDown","SelectedArrow","SortSwitch","_ref","onClickButtonDown","onClickButtonUp","selected","disabled","createElement","className","UP","type","onClick","DOWN"],"sources":["../../../../../src/SentimentWidget/components/SortSwitch/SortSwitch.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { LongArrowUp, LongArrowDown } from '@oanda/labs-widget-common';\nimport { SelectedArrow, SortSwitchProps } from './types';\n\nconst SortSwitch = ({\n  onClickButtonDown, onClickButtonUp, selected, disabled,\n}: SortSwitchProps) => (\n  <div\n    data-testid=\"sort-switch\"\n    className={classnames(\n      'lw-flex lw-rounded lw-border-[1px] lw-border-solid lw-font-sans lw-text-xs lw-tracking-normal',\n      {\n        'lw-border-darkGrey': disabled,\n        'lw-border-navyBlue': !disabled,\n      },\n    )}\n  >\n    <button\n      data-testid=\"sort-switch-button-up\"\n      disabled={disabled || selected === SelectedArrow.UP}\n      type=\"button\"\n      onClick={onClickButtonUp}\n      className={classnames(\n        'lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center lw-border-r-[1px] lw-border-solid focus:lw-outline-bottleGreenDark [&:enabled:hover>*]:-lw-translate-y-1',\n        {\n          'lw-bg-navyBlue': selected === SelectedArrow.UP && !disabled,\n        },\n      )}\n    >\n      <LongArrowUp\n        className={classnames(\n          'lw-transition-transform',\n          {\n            'lw-stroke-darkGrey': disabled,\n            'lw-stroke-navyBlue': selected !== SelectedArrow.UP && !disabled,\n            'lw-stroke-green': selected === SelectedArrow.UP && !disabled,\n          },\n        )}\n      />\n    </button>\n    <button\n      data-testid=\"sort-switch-button-down\"\n      disabled={disabled || selected === SelectedArrow.DOWN}\n      type=\"button\"\n      onClick={onClickButtonDown}\n      className={classnames(\n        'lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center lw-text-center focus:lw-outline-bottleGreenDark [&:enabled:hover>*]:lw-translate-y-1',\n        {\n          'lw-bg-navyBlue': selected === SelectedArrow.DOWN && !disabled,\n        },\n      )}\n    >\n      <LongArrowDown\n        className={classnames(\n          'lw-transition-transform',\n          {\n            'lw-stroke-darkGrey': disabled,\n            'lw-stroke-navyBlue': selected !== SelectedArrow.DOWN && !disabled,\n            'lw-stroke-green': selected === SelectedArrow.DOWN && !disabled,\n          },\n        )}\n      />\n    </button>\n  </div>\n);\n\nexport {\n  SortSwitch,\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,WAAW,EAAEC,aAAa,QAAQ,2BAA2B;AACtE,SAASC,aAAa,QAAyB,SAAS;AAExD,MAAMC,UAAU,GAAGC,IAAA;EAAA,IAAC;IAClBC,iBAAiB;IAAEC,eAAe;IAAEC,QAAQ;IAAEC;EAC/B,CAAC,GAAAJ,IAAA;EAAA,OAChBN,KAAA,CAAAW,aAAA;IACE,eAAY,aAAa;IACzBC,SAAS,EAAEX,UAAU,CACnB,+FAA+F,EAC/F;MACE,oBAAoB,EAAES,QAAQ;MAC9B,oBAAoB,EAAE,CAACA;IACzB,CACF;EAAE,GAEFV,KAAA,CAAAW,aAAA;IACE,eAAY,uBAAuB;IACnCD,QAAQ,EAAEA,QAAQ,IAAID,QAAQ,KAAKL,aAAa,CAACS,EAAG;IACpDC,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAEP,eAAgB;IACzBI,SAAS,EAAEX,UAAU,CACnB,8KAA8K,EAC9K;MACE,gBAAgB,EAAEQ,QAAQ,KAAKL,aAAa,CAACS,EAAE,IAAI,CAACH;IACtD,CACF;EAAE,GAEFV,KAAA,CAAAW,aAAA,CAACT,WAAW;IACVU,SAAS,EAAEX,UAAU,CACnB,yBAAyB,EACzB;MACE,oBAAoB,EAAES,QAAQ;MAC9B,oBAAoB,EAAED,QAAQ,KAAKL,aAAa,CAACS,EAAE,IAAI,CAACH,QAAQ;MAChE,iBAAiB,EAAED,QAAQ,KAAKL,aAAa,CAACS,EAAE,IAAI,CAACH;IACvD,CACF;EAAE,CACH,CACK,CAAC,EACTV,KAAA,CAAAW,aAAA;IACE,eAAY,yBAAyB;IACrCD,QAAQ,EAAEA,QAAQ,IAAID,QAAQ,KAAKL,aAAa,CAACY,IAAK;IACtDF,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAER,iBAAkB;IAC3BK,SAAS,EAAEX,UAAU,CACnB,0JAA0J,EAC1J;MACE,gBAAgB,EAAEQ,QAAQ,KAAKL,aAAa,CAACY,IAAI,IAAI,CAACN;IACxD,CACF;EAAE,GAEFV,KAAA,CAAAW,aAAA,CAACR,aAAa;IACZS,SAAS,EAAEX,UAAU,CACnB,yBAAyB,EACzB;MACE,oBAAoB,EAAES,QAAQ;MAC9B,oBAAoB,EAAED,QAAQ,KAAKL,aAAa,CAACY,IAAI,IAAI,CAACN,QAAQ;MAClE,iBAAiB,EAAED,QAAQ,KAAKL,aAAa,CAACY,IAAI,IAAI,CAACN;IACzD,CACF;EAAE,CACH,CACK,CACL,CAAC;AAAA,CACP;AAED,SACEL,UAAU"}
+{"version":3,"file":"SortSwitch.js","names":["React","useContext","classnames","LongArrowUp","LongArrowDown","Theme","ThemeContext","SelectedArrow","SortSwitch","_ref","onClickButtonDown","onClickButtonUp","selected","disabled","isDark","Dark","createElement","className","UP","type","onClick","DOWN"],"sources":["../../../../../src/SentimentWidget/components/SortSwitch/SortSwitch.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classnames from 'classnames';\nimport {\n  LongArrowUp, LongArrowDown, Theme, ThemeContext,\n} from '@oanda/labs-widget-common';\nimport { SelectedArrow, SortSwitchProps } from './types';\n\nconst SortSwitch = ({\n  onClickButtonDown, onClickButtonUp, selected, disabled,\n}: SortSwitchProps) => {\n  const isDark = useContext(ThemeContext) === Theme.Dark;\n\n  return (\n    <div\n      data-testid=\"sort-switch\"\n      className={classnames(\n        'lw-flex lw-rounded lw-border-[1px] lw-border-solid lw-font-sans lw-text-xs lw-tracking-normal',\n        {\n          'lw-border-border-disabled': disabled,\n          'lw-border-secondary': !disabled,\n        },\n      )}\n    >\n      <button\n        data-testid=\"sort-switch-button-up\"\n        disabled={disabled || selected === SelectedArrow.UP}\n        type=\"button\"\n        onClick={onClickButtonUp}\n        className={classnames(\n          'lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center  lw-border-solid focus:lw-outline-secondary [&:enabled:hover>*]:-lw-translate-y-1',\n          {\n            'lw-border-r-[1px] lw-border-r-border-disabled': disabled,\n            'lw-bg-secondary': selected === SelectedArrow.UP && !disabled,\n          },\n        )}\n      >\n        <LongArrowUp\n          className={classnames(\n            'lw-transition-transform',\n            {\n              'lw-stroke-darkGrey': disabled,\n              'lw-stroke-secondary': selected !== SelectedArrow.UP && !disabled,\n              'lw-stroke-bg-primary': selected === SelectedArrow.UP && !disabled && isDark,\n              'lw-stroke-ok': selected === SelectedArrow.UP && !disabled && !isDark,\n            },\n          )}\n        />\n      </button>\n      <button\n        data-testid=\"sort-switch-button-down\"\n        disabled={disabled || selected === SelectedArrow.DOWN}\n        type=\"button\"\n        onClick={onClickButtonDown}\n        className={classnames(\n          'lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center lw-text-center focus:lw-outline-secondary [&:enabled:hover>*]:lw-translate-y-1',\n          {\n            'lw-bg-secondary': selected === SelectedArrow.DOWN && !disabled,\n          },\n        )}\n      >\n        <LongArrowDown\n          className={classnames(\n            'lw-transition-transform',\n            {\n              'lw-stroke-darkGrey': disabled,\n              'lw-stroke-secondary': selected !== SelectedArrow.DOWN && !disabled,\n              'lw-stroke-bg-primary': selected === SelectedArrow.DOWN && !disabled && isDark,\n              'lw-stroke-ok': selected === SelectedArrow.DOWN && !disabled && !isDark,\n            },\n          )}\n        />\n      </button>\n    </div>\n  );\n};\n\nexport {\n  SortSwitch,\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,WAAW,EAAEC,aAAa,EAAEC,KAAK,EAAEC,YAAY,QAC1C,2BAA2B;AAClC,SAASC,aAAa,QAAyB,SAAS;AAExD,MAAMC,UAAU,GAAGC,IAAA,IAEI;EAAA,IAFH;IAClBC,iBAAiB;IAAEC,eAAe;IAAEC,QAAQ;IAAEC;EAC/B,CAAC,GAAAJ,IAAA;EAChB,MAAMK,MAAM,GAAGb,UAAU,CAACK,YAAY,CAAC,KAAKD,KAAK,CAACU,IAAI;EAEtD,OACEf,KAAA,CAAAgB,aAAA;IACE,eAAY,aAAa;IACzBC,SAAS,EAAEf,UAAU,CACnB,+FAA+F,EAC/F;MACE,2BAA2B,EAAEW,QAAQ;MACrC,qBAAqB,EAAE,CAACA;IAC1B,CACF;EAAE,GAEFb,KAAA,CAAAgB,aAAA;IACE,eAAY,uBAAuB;IACnCH,QAAQ,EAAEA,QAAQ,IAAID,QAAQ,KAAKL,aAAa,CAACW,EAAG;IACpDC,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAET,eAAgB;IACzBM,SAAS,EAAEf,UAAU,CACnB,uJAAuJ,EACvJ;MACE,+CAA+C,EAAEW,QAAQ;MACzD,iBAAiB,EAAED,QAAQ,KAAKL,aAAa,CAACW,EAAE,IAAI,CAACL;IACvD,CACF;EAAE,GAEFb,KAAA,CAAAgB,aAAA,CAACb,WAAW;IACVc,SAAS,EAAEf,UAAU,CACnB,yBAAyB,EACzB;MACE,oBAAoB,EAAEW,QAAQ;MAC9B,qBAAqB,EAAED,QAAQ,KAAKL,aAAa,CAACW,EAAE,IAAI,CAACL,QAAQ;MACjE,sBAAsB,EAAED,QAAQ,KAAKL,aAAa,CAACW,EAAE,IAAI,CAACL,QAAQ,IAAIC,MAAM;MAC5E,cAAc,EAAEF,QAAQ,KAAKL,aAAa,CAACW,EAAE,IAAI,CAACL,QAAQ,IAAI,CAACC;IACjE,CACF;EAAE,CACH,CACK,CAAC,EACTd,KAAA,CAAAgB,aAAA;IACE,eAAY,yBAAyB;IACrCH,QAAQ,EAAEA,QAAQ,IAAID,QAAQ,KAAKL,aAAa,CAACc,IAAK;IACtDF,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAEV,iBAAkB;IAC3BO,SAAS,EAAEf,UAAU,CACnB,oJAAoJ,EACpJ;MACE,iBAAiB,EAAEU,QAAQ,KAAKL,aAAa,CAACc,IAAI,IAAI,CAACR;IACzD,CACF;EAAE,GAEFb,KAAA,CAAAgB,aAAA,CAACZ,aAAa;IACZa,SAAS,EAAEf,UAAU,CACnB,yBAAyB,EACzB;MACE,oBAAoB,EAAEW,QAAQ;MAC9B,qBAAqB,EAAED,QAAQ,KAAKL,aAAa,CAACc,IAAI,IAAI,CAACR,QAAQ;MACnE,sBAAsB,EAAED,QAAQ,KAAKL,aAAa,CAACc,IAAI,IAAI,CAACR,QAAQ,IAAIC,MAAM;MAC9E,cAAc,EAAEF,QAAQ,KAAKL,aAAa,CAACc,IAAI,IAAI,CAACR,QAAQ,IAAI,CAACC;IACnE,CACF;EAAE,CACH,CACK,CACL,CAAC;AAEV,CAAC;AAED,SACEN,UAAU"}

package/dist/module/SentimentWidget/render.js

@@ -15,6 +15,7 @@ const sentimentParamsElements = document.querySelectorAll('div[data-sentiment-pa
 if (sentimentParamsElements.length > 0) {
   sentimentParamsElements.forEach(element => {
     const params = element.getAttribute('data-sentiment-params');
+    const mode = element.getAttribute('data-mode');
     const {
       instrument,
       division,
@@ -24,7 +25,8 @@ if (sentimentParamsElements.length > 0) {
       graphqlUrl: graphqlUrl,
       division: division,
       instrument: instrument,
-      locale: locale
+      locale: locale,
+      theme: mode
     }), element);
   });
 } else {

package/dist/module/SentimentWidget/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","names":["React","render","SentimentWidget","graphqlUrl","configGraphQl","division","configDivision","instrument","configInstrument","renderElementId","configRenderElementId","locale","configLocale","window","sentimentWidgetConfig","widgetsConfig","sentimentParamsElements","document","querySelectorAll","length","forEach","element","params","getAttribute","JSON","parse","createElement","getElementById"],"sources":["../../../src/SentimentWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { render } from 'react-dom';\nimport { SentimentWidget } from './SentimentWidget';\n\nconst {\n  graphqlUrl: configGraphQl,\n  division: configDivision,\n  instrument: configInstrument,\n  renderElementId: configRenderElementId,\n  locale: configLocale,\n} = window.sentimentWidgetConfig || {};\n\nconst {\n  graphqlUrl,\n} = window.widgetsConfig || {};\n\nconst sentimentParamsElements = document.querySelectorAll('div[data-sentiment-params]');\n\nif (sentimentParamsElements.length > 0) {\n  sentimentParamsElements.forEach((element) => {\n    const params = element.getAttribute('data-sentiment-params');\n    const { instrument, division, locale } = JSON.parse(params as string);\n\n    render(\n      <SentimentWidget\n        graphqlUrl={graphqlUrl}\n        division={division}\n        instrument={instrument}\n        locale={locale}\n      />,\n      element,\n    );\n  });\n} else {\n  render(\n    <SentimentWidget\n      graphqlUrl={configGraphQl}\n      division={configDivision}\n      instrument={configInstrument}\n      locale={configLocale}\n    />,\n    document.getElementById(configRenderElementId),\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,MAAM;EACJC,UAAU,EAAEC,aAAa;EACzBC,QAAQ,EAAEC,cAAc;EACxBC,UAAU,EAAEC,gBAAgB;EAC5BC,eAAe,EAAEC,qBAAqB;EACtCC,MAAM,EAAEC;AACV,CAAC,GAAGC,MAAM,CAACC,qBAAqB,IAAI,CAAC,CAAC;AAEtC,MAAM;EACJX;AACF,CAAC,GAAGU,MAAM,CAACE,aAAa,IAAI,CAAC,CAAC;AAE9B,MAAMC,uBAAuB,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,4BAA4B,CAAC;AAEvF,IAAIF,uBAAuB,CAACG,MAAM,GAAG,CAAC,EAAE;EACtCH,uBAAuB,CAACI,OAAO,CAAEC,OAAO,IAAK;IAC3C,MAAMC,MAAM,GAAGD,OAAO,CAACE,YAAY,CAAC,uBAAuB,CAAC;IAC5D,MAAM;MAAEhB,UAAU;MAAEF,QAAQ;MAAEM;IAAO,CAAC,GAAGa,IAAI,CAACC,KAAK,CAACH,MAAgB,CAAC;IAErErB,MAAM,CACJD,KAAA,CAAA0B,aAAA,CAACxB,eAAe;MACdC,UAAU,EAAEA,UAAW;MACvBE,QAAQ,EAAEA,QAAS;MACnBE,UAAU,EAAEA,UAAW;MACvBI,MAAM,EAAEA;IAAO,CAChB,CAAC,EACFU,OACF,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACLpB,MAAM,CACJD,KAAA,CAAA0B,aAAA,CAACxB,eAAe;IACdC,UAAU,EAAEC,aAAc;IAC1BC,QAAQ,EAAEC,cAAe;IACzBC,UAAU,EAAEC,gBAAiB;IAC7BG,MAAM,EAAEC;EAAa,CACtB,CAAC,EACFK,QAAQ,CAACU,cAAc,CAACjB,qBAAqB,CAC/C,CAAC;AACH"}
+{"version":3,"file":"render.js","names":["React","render","SentimentWidget","graphqlUrl","configGraphQl","division","configDivision","instrument","configInstrument","renderElementId","configRenderElementId","locale","configLocale","window","sentimentWidgetConfig","widgetsConfig","sentimentParamsElements","document","querySelectorAll","length","forEach","element","params","getAttribute","mode","JSON","parse","createElement","theme","getElementById"],"sources":["../../../src/SentimentWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { render } from 'react-dom';\nimport { Theme } from '@oanda/labs-widget-common';\nimport { SentimentWidget } from './SentimentWidget';\n\nconst {\n  graphqlUrl: configGraphQl,\n  division: configDivision,\n  instrument: configInstrument,\n  renderElementId: configRenderElementId,\n  locale: configLocale,\n} = window.sentimentWidgetConfig || {};\n\nconst {\n  graphqlUrl,\n} = window.widgetsConfig || {};\n\nconst sentimentParamsElements = document.querySelectorAll('div[data-sentiment-params]');\n\nif (sentimentParamsElements.length > 0) {\n  sentimentParamsElements.forEach((element) => {\n    const params = element.getAttribute('data-sentiment-params');\n    const mode = element.getAttribute('data-mode');\n    const { instrument, division, locale } = JSON.parse(params as string);\n\n    render(\n      <SentimentWidget\n        graphqlUrl={graphqlUrl}\n        division={division}\n        instrument={instrument}\n        locale={locale}\n        theme={mode as Theme}\n      />,\n      element,\n    );\n  });\n} else {\n  render(\n    <SentimentWidget\n      graphqlUrl={configGraphQl}\n      division={configDivision}\n      instrument={configInstrument}\n      locale={configLocale}\n    />,\n    document.getElementById(configRenderElementId),\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,WAAW;AAElC,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,MAAM;EACJC,UAAU,EAAEC,aAAa;EACzBC,QAAQ,EAAEC,cAAc;EACxBC,UAAU,EAAEC,gBAAgB;EAC5BC,eAAe,EAAEC,qBAAqB;EACtCC,MAAM,EAAEC;AACV,CAAC,GAAGC,MAAM,CAACC,qBAAqB,IAAI,CAAC,CAAC;AAEtC,MAAM;EACJX;AACF,CAAC,GAAGU,MAAM,CAACE,aAAa,IAAI,CAAC,CAAC;AAE9B,MAAMC,uBAAuB,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,4BAA4B,CAAC;AAEvF,IAAIF,uBAAuB,CAACG,MAAM,GAAG,CAAC,EAAE;EACtCH,uBAAuB,CAACI,OAAO,CAAEC,OAAO,IAAK;IAC3C,MAAMC,MAAM,GAAGD,OAAO,CAACE,YAAY,CAAC,uBAAuB,CAAC;IAC5D,MAAMC,IAAI,GAAGH,OAAO,CAACE,YAAY,CAAC,WAAW,CAAC;IAC9C,MAAM;MAAEhB,UAAU;MAAEF,QAAQ;MAAEM;IAAO,CAAC,GAAGc,IAAI,CAACC,KAAK,CAACJ,MAAgB,CAAC;IAErErB,MAAM,CACJD,KAAA,CAAA2B,aAAA,CAACzB,eAAe;MACdC,UAAU,EAAEA,UAAW;MACvBE,QAAQ,EAAEA,QAAS;MACnBE,UAAU,EAAEA,UAAW;MACvBI,MAAM,EAAEA,MAAO;MACfiB,KAAK,EAAEJ;IAAc,CACtB,CAAC,EACFH,OACF,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACLpB,MAAM,CACJD,KAAA,CAAA2B,aAAA,CAACzB,eAAe;IACdC,UAAU,EAAEC,aAAc;IAC1BC,QAAQ,EAAEC,cAAe;IACzBC,UAAU,EAAEC,gBAAiB;IAC7BG,MAAM,EAAEC;EAAa,CACtB,CAAC,EACFK,QAAQ,CAACY,cAAc,CAACnB,qBAAqB,CAC/C,CAAC;AACH"}

package/dist/module/SentimentWidget/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/SentimentWidget/types.ts"],"sourcesContent":["import { Locale } from '@oanda/mono-i18n';\nimport { Division } from '../gql/types/graphql';\n\nexport interface SentimentConfig {\n  graphqlUrl: string;\n  division: Division;\n  instrument?: string;\n  locale: Locale;\n}\nexport interface SentimentWrapperConfig extends SentimentConfig {\n  renderElementId: string;\n}\nexport interface SentimentWidgetConfig {\n  division: Division;\n  instrument: string;\n}\n\nexport interface SentimentToolConfig {\n  division: Division;\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/SentimentWidget/types.ts"],"sourcesContent":["import { Locale } from '@oanda/mono-i18n';\nimport { Theme } from '@oanda/labs-widget-common';\nimport { Division } from '../gql/types/graphql';\n\nexport interface SentimentConfig {\n  graphqlUrl: string;\n  division: Division;\n  instrument?: string;\n  locale: Locale;\n  theme?: Theme;\n}\nexport interface SentimentWrapperConfig extends SentimentConfig {\n  renderElementId: string;\n}\nexport interface SentimentWidgetConfig {\n  division: Division;\n  instrument: string;\n}\n\nexport interface SentimentToolConfig {\n  division: Division;\n}\n"],"mappings":""}

package/dist/types/SentimentWidget/SentimentWidget.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SentimentConfig } from './types';
-declare const SentimentWidget: ({ graphqlUrl, division, instrument, locale, }: SentimentConfig) => JSX.Element;
+declare const SentimentWidget: ({ graphqlUrl, division, instrument, locale, theme, }: SentimentConfig) => JSX.Element;
 export { SentimentWidget };

package/dist/types/SentimentWidget/types.d.ts

@@ -1,10 +1,12 @@
 import { Locale } from '@oanda/mono-i18n';
+import { Theme } from '@oanda/labs-widget-common';
 import { Division } from '../gql/types/graphql';
 export interface SentimentConfig {
     graphqlUrl: string;
     division: Division;
     instrument?: string;
     locale: Locale;
+    theme?: Theme;
 }
 export interface SentimentWrapperConfig extends SentimentConfig {
     renderElementId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-sentiment-widget",
-  "version": "1.0.53",
+  "version": "1.0.55",
   "description": "Labs Sentiment Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -13,7 +13,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@apollo/client": "3.7.17",
-    "@oanda/labs-widget-common": "^1.0.53",
+    "@oanda/labs-widget-common": "^1.0.55",
     "@oanda/mono-i18n": "9.0.0",
     "classnames": "2.3.2",
     "graphql": "16.7.1"
@@ -22,5 +22,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "0d64a270c9214d67fddbfa3ebc81763e98a04924"
+  "gitHead": "90fe8ce2b3c2c431e738025a66816f9eeb013568"
 }

package/src/SentimentWidget/SentimentWidget.tsx

@@ -8,7 +8,7 @@ import { SentimentConfig } from './types';
 import { translations } from '../translations';
 
 const SentimentWidget = ({
-  graphqlUrl, division, instrument, locale,
+  graphqlUrl, division, instrument, locale, theme,
 }: SentimentConfig) => {
   const client = new ApolloClient({
     uri: graphqlUrl,
@@ -16,7 +16,7 @@ const SentimentWidget = ({
   });
 
   return (
-    <ThemeProvider>
+    <ThemeProvider theme={theme}>
       <LocaleProvider locale={getLocale(locale)} translations={translations}>
         <ApolloProvider client={client}>
           {instrument ? (

package/src/SentimentWidget/Tool.tsx

@@ -34,7 +34,7 @@ const Tool = ({ division }: SentimentToolConfig) => {
   const { lang } = useLocale();
 
   return (
-    <div data-testid="sentiment-tool" className="lw-relative lw-overflow-hidden lw-text-sm lw-tracking-normal lw-text-black">
+    <div data-testid="sentiment-tool" className="lw-relative lw-overflow-hidden lw-text-sm lw-tracking-normal lw-text-text-primary">
       {error || sortedData.length === 0 ? (
         <div className="lw-flex lw-h-[200px] lw-items-center lw-justify-center lw-border lw-border-solid lw-border-grey lw-p-2">
           <ChartError />

package/src/SentimentWidget/Widget.tsx

@@ -26,7 +26,7 @@ const Widget = ({ instrument, division }: SentimentWidgetConfig) => {
     || sentiment?.longPercent === undefined;
 
   return (
-    <div data-testid="sentiment-widget" className="lw-border lw-border-solid lw-border-grey lw-p-4 lw-text-sm lw-tracking-normal lw-text-black">
+    <div data-testid="sentiment-widget" className="lw-border lw-border-solid lw-border-border-primary lw-p-4 lw-text-sm lw-tracking-normal lw-text-text-primary">
       <div className="lw-flex lw-items-center lw-justify-between">
         <div className="lw-w-[120px] lw-shrink-0">
           {loading && <Loader size={LoaderSize.md} />}

package/src/SentimentWidget/components/SortSwitch/SortSwitch.tsx

@@ -1,69 +1,78 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import classnames from 'classnames';
-import { LongArrowUp, LongArrowDown } from '@oanda/labs-widget-common';
+import {
+  LongArrowUp, LongArrowDown, Theme, ThemeContext,
+} from '@oanda/labs-widget-common';
 import { SelectedArrow, SortSwitchProps } from './types';
 
 const SortSwitch = ({
   onClickButtonDown, onClickButtonUp, selected, disabled,
-}: SortSwitchProps) => (
-  <div
-    data-testid="sort-switch"
-    className={classnames(
-      'lw-flex lw-rounded lw-border-[1px] lw-border-solid lw-font-sans lw-text-xs lw-tracking-normal',
-      {
-        'lw-border-darkGrey': disabled,
-        'lw-border-navyBlue': !disabled,
-      },
-    )}
-  >
-    <button
-      data-testid="sort-switch-button-up"
-      disabled={disabled || selected === SelectedArrow.UP}
-      type="button"
-      onClick={onClickButtonUp}
+}: SortSwitchProps) => {
+  const isDark = useContext(ThemeContext) === Theme.Dark;
+
+  return (
+    <div
+      data-testid="sort-switch"
       className={classnames(
-        'lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center lw-border-r-[1px] lw-border-solid focus:lw-outline-bottleGreenDark [&:enabled:hover>*]:-lw-translate-y-1',
+        'lw-flex lw-rounded lw-border-[1px] lw-border-solid lw-font-sans lw-text-xs lw-tracking-normal',
         {
-          'lw-bg-navyBlue': selected === SelectedArrow.UP && !disabled,
+          'lw-border-border-disabled': disabled,
+          'lw-border-secondary': !disabled,
         },
       )}
     >
-      <LongArrowUp
+      <button
+        data-testid="sort-switch-button-up"
+        disabled={disabled || selected === SelectedArrow.UP}
+        type="button"
+        onClick={onClickButtonUp}
         className={classnames(
-          'lw-transition-transform',
+          'lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center  lw-border-solid focus:lw-outline-secondary [&:enabled:hover>*]:-lw-translate-y-1',
           {
-            'lw-stroke-darkGrey': disabled,
-            'lw-stroke-navyBlue': selected !== SelectedArrow.UP && !disabled,
-            'lw-stroke-green': selected === SelectedArrow.UP && !disabled,
+            'lw-border-r-[1px] lw-border-r-border-disabled': disabled,
+            'lw-bg-secondary': selected === SelectedArrow.UP && !disabled,
           },
         )}
-      />
-    </button>
-    <button
-      data-testid="sort-switch-button-down"
-      disabled={disabled || selected === SelectedArrow.DOWN}
-      type="button"
-      onClick={onClickButtonDown}
-      className={classnames(
-        'lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center lw-text-center focus:lw-outline-bottleGreenDark [&:enabled:hover>*]:lw-translate-y-1',
-        {
-          'lw-bg-navyBlue': selected === SelectedArrow.DOWN && !disabled,
-        },
-      )}
-    >
-      <LongArrowDown
+      >
+        <LongArrowUp
+          className={classnames(
+            'lw-transition-transform',
+            {
+              'lw-stroke-darkGrey': disabled,
+              'lw-stroke-secondary': selected !== SelectedArrow.UP && !disabled,
+              'lw-stroke-bg-primary': selected === SelectedArrow.UP && !disabled && isDark,
+              'lw-stroke-ok': selected === SelectedArrow.UP && !disabled && !isDark,
+            },
+          )}
+        />
+      </button>
+      <button
+        data-testid="sort-switch-button-down"
+        disabled={disabled || selected === SelectedArrow.DOWN}
+        type="button"
+        onClick={onClickButtonDown}
         className={classnames(
-          'lw-transition-transform',
+          'lw-flex lw-h-11 lw-w-11 lw-grow-0 lw-items-center lw-justify-center lw-text-center focus:lw-outline-secondary [&:enabled:hover>*]:lw-translate-y-1',
           {
-            'lw-stroke-darkGrey': disabled,
-            'lw-stroke-navyBlue': selected !== SelectedArrow.DOWN && !disabled,
-            'lw-stroke-green': selected === SelectedArrow.DOWN && !disabled,
+            'lw-bg-secondary': selected === SelectedArrow.DOWN && !disabled,
           },
         )}
-      />
-    </button>
-  </div>
-);
+      >
+        <LongArrowDown
+          className={classnames(
+            'lw-transition-transform',
+            {
+              'lw-stroke-darkGrey': disabled,
+              'lw-stroke-secondary': selected !== SelectedArrow.DOWN && !disabled,
+              'lw-stroke-bg-primary': selected === SelectedArrow.DOWN && !disabled && isDark,
+              'lw-stroke-ok': selected === SelectedArrow.DOWN && !disabled && !isDark,
+            },
+          )}
+        />
+      </button>
+    </div>
+  );
+};
 
 export {
   SortSwitch,

package/src/SentimentWidget/render.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';
+import { Theme } from '@oanda/labs-widget-common';
 import { SentimentWidget } from './SentimentWidget';
 
 const {
@@ -19,6 +20,7 @@ const sentimentParamsElements = document.querySelectorAll('div[data-sentiment-pa
 if (sentimentParamsElements.length > 0) {
   sentimentParamsElements.forEach((element) => {
     const params = element.getAttribute('data-sentiment-params');
+    const mode = element.getAttribute('data-mode');
     const { instrument, division, locale } = JSON.parse(params as string);
 
     render(
@@ -27,6 +29,7 @@ if (sentimentParamsElements.length > 0) {
         division={division}
         instrument={instrument}
         locale={locale}
+        theme={mode as Theme}
       />,
       element,
     );

package/src/SentimentWidget/types.ts

@@ -1,4 +1,5 @@
 import { Locale } from '@oanda/mono-i18n';
+import { Theme } from '@oanda/labs-widget-common';
 import { Division } from '../gql/types/graphql';
 
 export interface SentimentConfig {
@@ -6,6 +7,7 @@ export interface SentimentConfig {
   division: Division;
   instrument?: string;
   locale: Locale;
+  theme?: Theme;
 }
 export interface SentimentWrapperConfig extends SentimentConfig {
   renderElementId: string;