@oanda/labs-sentiment-widget 1.0.75 → 1.0.77

package/CHANGELOG.md

@@ -3,6 +3,594 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.77 (2024-01-25)
+
+
+
+## 1.0.76 (2024-01-25)
+
+
+
+## 1.0.75 (2024-01-22)
+
+
+
+## 1.0.74 (2024-01-22)
+
+
+
+## 1.0.73 (2024-01-22)
+
+
+
+## 1.0.72 (2024-01-19)
+
+
+
+## 1.0.71 (2024-01-18)
+
+
+
+## 1.0.70 (2024-01-17)
+
+
+
+## 1.0.69 (2024-01-17)
+
+
+
+## 1.0.68 (2024-01-15)
+
+
+
+## 1.0.67 (2024-01-15)
+
+
+
+## 1.0.66 (2024-01-12)
+
+
+
+## 1.0.65 (2024-01-11)
+
+
+
+## 1.0.64 (2024-01-11)
+
+
+
+## 1.0.63 (2024-01-11)
+
+
+
+## 1.0.62 (2024-01-10)
+
+
+
+## 1.0.61 (2024-01-09)
+
+
+
+## 1.0.60 (2024-01-05)
+
+
+
+## 1.0.59 (2023-12-27)
+
+
+
+## 1.0.58 (2023-12-22)
+
+
+
+## 1.0.57 (2023-12-22)
+
+
+
+## 1.0.56 (2023-12-21)
+
+
+
+## 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.76 (2024-01-25)
+
+
+
+## 1.0.75 (2024-01-22)
+
+
+
+## 1.0.74 (2024-01-22)
+
+
+
+## 1.0.73 (2024-01-22)
+
+
+
+## 1.0.72 (2024-01-19)
+
+
+
+## 1.0.71 (2024-01-18)
+
+
+
+## 1.0.70 (2024-01-17)
+
+
+
+## 1.0.69 (2024-01-17)
+
+
+
+## 1.0.68 (2024-01-15)
+
+
+
+## 1.0.67 (2024-01-15)
+
+
+
+## 1.0.66 (2024-01-12)
+
+
+
+## 1.0.65 (2024-01-11)
+
+
+
+## 1.0.64 (2024-01-11)
+
+
+
+## 1.0.63 (2024-01-11)
+
+
+
+## 1.0.62 (2024-01-10)
+
+
+
+## 1.0.61 (2024-01-09)
+
+
+
+## 1.0.60 (2024-01-05)
+
+
+
+## 1.0.59 (2023-12-27)
+
+
+
+## 1.0.58 (2023-12-22)
+
+
+
+## 1.0.57 (2023-12-22)
+
+
+
+## 1.0.56 (2023-12-21)
+
+
+
+## 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.75 (2024-01-22)
 
 

package/dist/main/SentimentWidget/Tool.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Tool = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _client = require("@apollo/client");
 var _monoI18n = require("@oanda/mono-i18n");
@@ -13,12 +14,16 @@ var _utils = require("./utils");
 var _SortSwitch = require("./components/SortSwitch");
 var _graphql = require("../gql/types/graphql");
 var _constant = require("../constant");
+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 Tool = _ref => {
   let {
     division
   } = _ref;
+  const {
+    isDesktop
+  } = (0, _react.useContext)(_labsWidgetCommon.ThemeContext);
   const [sort, setSort] = (0, _react.useState)(_graphql.Sort.Bullish);
   const [sortedData, setSortedData] = (0, _react.useState)(new Array(20).fill({}));
   const {
@@ -59,9 +64,14 @@ const Tool = _ref => {
   }, _react.default.createElement("div", {
     className: "lw-mb-2 lw-flex lw-justify-between lw-font-semibold"
   }, _react.default.createElement("span", {
-    className: "lw-ml-[7.5rem] lw-uppercase md:lw-ml-40"
+    className: (0, _classnames.default)('lw-uppercase', {
+      'lw-ml-40': isDesktop,
+      'lw-ml-[7.5rem]': !isDesktop
+    })
   }, lang('net_short')), _react.default.createElement("span", {
-    className: "lw-text-right lw-uppercase md:lw-mr-10"
+    className: (0, _classnames.default)('lw-text-right lw-uppercase', {
+      'lw-mr-10': isDesktop
+    })
   }, lang('net_long'))), sortedData.map((item, index) => _react.default.createElement("div", {
     className: "lw-flex lw-h-8 lw-w-full lw-items-center",
     key: item.name || index

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","fetchPolicy","lang","useLocale","updatedTimestamp","setUpdatedTimestamp","EMPTY_VALUE","useEffect","_","sortData","formatUpdatedTimestamp","sentimentList","updatedAt","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","InfoBox","concat","exports"],"sources":["../../../src/SentimentWidget/Tool.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport {\n  Sentiment,\n  SentimentHeight,\n  Loader,\n  LoaderSize,\n  ChartError,\n  Truncate,\n  Tooltip,\n  InfoBox,\n  formatUpdatedTimestamp,\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 { EMPTY_VALUE, 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    fetchPolicy: 'cache-and-network',\n  });\n\n  const { lang } = useLocale();\n  const [updatedTimestamp, setUpdatedTimestamp] = useState(EMPTY_VALUE);\n\n  useEffect(() => {\n    if (data) {\n      setSortedData(sortData(data, sort));\n      setUpdatedTimestamp(formatUpdatedTimestamp(data.sentimentList![0]?.updatedAt, lang('today')));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [data, sort]);\n\n  return (\n    <div data-testid=\"sentiment-tool\" className=\"lw-relative lw-bg-bg-primary 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-border-primary 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-border-primary 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      {!error\n        && (\n        <div className=\"lw-mt-2 lw-h-8\">\n          <InfoBox text={`${lang('last_updated')}: ${updatedTimestamp}`} />\n        </div>\n        )}\n    </div>\n  );\n};\n\nexport { Tool };\n"],"mappings":"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"}
+{"version":3,"file":"Tool.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_labsWidgetCommon","_client","_monoI18n","_getSentimentList","_utils","_SortSwitch","_graphql","_constant","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Tool","_ref","division","isDesktop","useContext","ThemeContext","sort","setSort","useState","Sort","Bullish","sortedData","setSortedData","Array","fill","loading","data","error","useQuery","getSentimentList","variables","fetchPolicy","lang","useLocale","updatedTimestamp","setUpdatedTimestamp","EMPTY_VALUE","useEffect","_","sortData","formatUpdatedTimestamp","sentimentList","updatedAt","createElement","className","length","ChartError","Fragment","SortSwitch","disabled","selected","SelectedArrow","UP","DOWN","onClickButtonDown","Bearish","onClickButtonUp","classNames","map","item","index","key","name","Loader","size","LoaderSize","md","Truncate","maxWidth","tooltipId","INSTRUMENT_TOOLTIP_ID","text","displayName","Sentiment","isLoading","height","SentimentHeight","sentiment","Tooltip","id","InfoBox","concat","exports"],"sources":["../../../src/SentimentWidget/Tool.tsx"],"sourcesContent":["import React, { useEffect, useState, useContext } from 'react';\nimport classNames from 'classnames';\nimport {\n  Sentiment,\n  SentimentHeight,\n  Loader,\n  LoaderSize,\n  ChartError,\n  Truncate,\n  Tooltip,\n  InfoBox,\n  formatUpdatedTimestamp,\n  ThemeContext,\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 { EMPTY_VALUE, INSTRUMENT_TOOLTIP_ID } from '../constant';\n\nconst Tool = ({ division }: SentimentToolConfig) => {\n  const { isDesktop } = useContext(ThemeContext);\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    fetchPolicy: 'cache-and-network',\n  });\n\n  const { lang } = useLocale();\n  const [updatedTimestamp, setUpdatedTimestamp] = useState(EMPTY_VALUE);\n\n  useEffect(() => {\n    if (data) {\n      setSortedData(sortData(data, sort));\n      setUpdatedTimestamp(formatUpdatedTimestamp(data.sentimentList![0]?.updatedAt, lang('today')));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [data, sort]);\n\n  return (\n    <div data-testid=\"sentiment-tool\" className=\"lw-relative lw-bg-bg-primary 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-border-primary 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-border-primary lw-p-2\">\n            <div className=\"lw-mb-2 lw-flex lw-justify-between lw-font-semibold\">\n              <span className={classNames('lw-uppercase', {\n                'lw-ml-40': isDesktop,\n                'lw-ml-[7.5rem]': !isDesktop,\n              })}\n              >\n                {lang('net_short')}\n              </span>\n              <span className={classNames('lw-text-right lw-uppercase', {\n                'lw-mr-10': isDesktop,\n              })}\n              >\n                {lang('net_long')}\n              </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      {!error\n        && (\n        <div className=\"lw-mt-2 lw-h-8\">\n          <InfoBox text={`${lang('last_updated')}: ${updatedTimestamp}`} />\n        </div>\n        )}\n    </div>\n  );\n};\n\nexport { Tool };\n"],"mappings":"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"}

package/dist/main/SentimentWidget/Widget.js

@@ -4,13 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Widget = 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 _monoI18n = require("@oanda/mono-i18n");
 var _client = require("@apollo/client");
 var _getInstrumentSentiment = require("../gql/getInstrumentSentiment");
 var _constant = require("../constant");
 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 Widget = _ref => {
   var _data$sentiment;
   let {
@@ -29,6 +32,9 @@ const Widget = _ref => {
     },
     fetchPolicy: 'cache-and-network'
   });
+  const {
+    isDesktop
+  } = (0, _react.useContext)(_labsWidgetCommon.ThemeContext);
   const {
     lang
   } = (0, _monoI18n.useLocale)();
@@ -44,9 +50,14 @@ const Widget = _ref => {
   }, includeDescriptionLabels && _react.default.createElement("div", {
     className: "lw-mb-2 lw-flex lw-justify-between lw-font-semibold"
   }, _react.default.createElement("span", {
-    className: "lw-ml-[7.5rem] lw-uppercase md:lw-ml-40"
+    className: (0, _classnames.default)('lw-uppercase', {
+      'lw-ml-40': isDesktop,
+      'lw-ml-[7.5rem]': !isDesktop
+    })
   }, lang('net_short')), _react.default.createElement("span", {
-    className: "lw-text-right lw-uppercase md:lw-mr-10"
+    className: (0, _classnames.default)('lw-text-right lw-uppercase', {
+      'lw-mr-10': isDesktop
+    })
   }, lang('net_long'))), _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","_monoI18n","_client","_getInstrumentSentiment","_constant","obj","__esModule","default","Widget","_ref","_data$sentiment","instrument","division","includeDescriptionLabels","loading","data","error","useQuery","getInstrumentSentiment","variables","name","fetchPolicy","lang","useLocale","displayName","sentiment","updatedAt","isError","shortPercent","longPercent","undefined","createElement","Fragment","className","Loader","size","LoaderSize","md","Truncate","maxWidth","tooltipId","INSTRUMENT_TOOLTIP_ID","text","Sentiment","withError","isLoading","height","SentimentHeight","Error","InfoBox","concat","formatUpdatedTimestamp","EMPTY_VALUE","exports"],"sources":["../../../src/SentimentWidget/Widget.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Sentiment, SentimentHeight, Error, Loader, LoaderSize, Truncate, InfoBox, formatUpdatedTimestamp,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { useQuery } from '@apollo/client';\nimport { getInstrumentSentiment } from '../gql/getInstrumentSentiment';\nimport { SentimentWidgetConfig } from './types';\nimport { GetInstrumentSentimentQuery, GetInstrumentSentimentQueryVariables } from '../gql/types/graphql';\nimport { EMPTY_VALUE, INSTRUMENT_TOOLTIP_ID } from '../constant';\n\nconst Widget = ({\n  instrument,\n  division,\n  includeDescriptionLabels = false,\n}: SentimentWidgetConfig) => {\n  const { loading, data, error } = useQuery<\n  GetInstrumentSentimentQuery,\n  GetInstrumentSentimentQueryVariables\n  >(getInstrumentSentiment, {\n    variables: {\n      name: instrument,\n      division,\n    },\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const { lang } = useLocale();\n\n  const { displayName, sentiment, updatedAt } = data?.sentiment?.[0] || {};\n\n  const isError = error\n    || (sentiment?.shortPercent === 0 && sentiment?.longPercent === 0)\n    || sentiment?.shortPercent === undefined\n    || sentiment?.longPercent === undefined;\n\n  return (\n    <>\n      <div data-testid=\"sentiment-widget\" className=\"lw-border lw-border-solid lw-border-border-primary lw-bg-bg-primary lw-p-4 lw-text-sm lw-tracking-normal lw-text-text-primary\">\n        {includeDescriptionLabels\n          && (\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          )}\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={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\n        {!loading && isError && <Error />}\n      </div>\n      {!isError && updatedAt && (\n        <div className=\"lw-mt-2 lw-h-8\">\n          <InfoBox text={`${lang('last_updated')}: ${formatUpdatedTimestamp(updatedAt, lang('today')) || EMPTY_VALUE}`} />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Widget };\n"],"mappings":"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"}
+{"version":3,"file":"Widget.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_labsWidgetCommon","_monoI18n","_client","_getInstrumentSentiment","_constant","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Widget","_ref","_data$sentiment","instrument","division","includeDescriptionLabels","loading","data","error","useQuery","getInstrumentSentiment","variables","name","fetchPolicy","isDesktop","useContext","ThemeContext","lang","useLocale","displayName","sentiment","updatedAt","isError","shortPercent","longPercent","undefined","createElement","Fragment","className","classNames","Loader","size","LoaderSize","md","Truncate","maxWidth","tooltipId","INSTRUMENT_TOOLTIP_ID","text","Sentiment","withError","isLoading","height","SentimentHeight","Error","InfoBox","concat","formatUpdatedTimestamp","EMPTY_VALUE","exports"],"sources":["../../../src/SentimentWidget/Widget.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport {\n  Sentiment,\n  SentimentHeight,\n  Error,\n  Loader,\n  LoaderSize,\n  Truncate,\n  InfoBox,\n  formatUpdatedTimestamp,\n  ThemeContext,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { useQuery } from '@apollo/client';\nimport { getInstrumentSentiment } from '../gql/getInstrumentSentiment';\nimport { SentimentWidgetConfig } from './types';\nimport { GetInstrumentSentimentQuery, GetInstrumentSentimentQueryVariables } from '../gql/types/graphql';\nimport { EMPTY_VALUE, INSTRUMENT_TOOLTIP_ID } from '../constant';\n\nconst Widget = ({\n  instrument,\n  division,\n  includeDescriptionLabels = false,\n}: SentimentWidgetConfig) => {\n  const { loading, data, error } = useQuery<\n  GetInstrumentSentimentQuery,\n  GetInstrumentSentimentQueryVariables\n  >(getInstrumentSentiment, {\n    variables: {\n      name: instrument,\n      division,\n    },\n    fetchPolicy: 'cache-and-network',\n  });\n  const { isDesktop } = useContext(ThemeContext);\n  const { lang } = useLocale();\n\n  const { displayName, sentiment, updatedAt } = data?.sentiment?.[0] || {};\n\n  const isError = error\n    || (sentiment?.shortPercent === 0 && sentiment?.longPercent === 0)\n    || sentiment?.shortPercent === undefined\n    || sentiment?.longPercent === undefined;\n\n  return (\n    <>\n      <div\n        data-testid=\"sentiment-widget\"\n        className=\"lw-border lw-border-solid lw-border-border-primary lw-bg-bg-primary lw-p-4 lw-text-sm lw-tracking-normal lw-text-text-primary\"\n      >\n        {includeDescriptionLabels\n          && (\n          <div className=\"lw-mb-2 lw-flex lw-justify-between lw-font-semibold\">\n            <span className={classNames('lw-uppercase', {\n              'lw-ml-40': isDesktop,\n              'lw-ml-[7.5rem]': !isDesktop,\n            })}\n            >\n              {lang('net_short')}\n            </span>\n            <span className={classNames('lw-text-right lw-uppercase', {\n              'lw-mr-10': isDesktop,\n            })}\n            >\n              {lang('net_long')}\n            </span>\n          </div>\n          )}\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={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\n        {!loading && isError && <Error />}\n      </div>\n      {!isError && updatedAt && (\n        <div className=\"lw-mt-2 lw-h-8\">\n          <InfoBox text={`${lang('last_updated')}: ${formatUpdatedTimestamp(updatedAt, lang('today')) || EMPTY_VALUE}`} />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Widget };\n"],"mappings":"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"}

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

@@ -18,7 +18,9 @@ const SortSwitch = _ref => {
     selected,
     disabled
   } = _ref;
-  const isDark = (0, _react.useContext)(_labsWidgetCommon.ThemeContext) === _labsWidgetCommon.Theme.Dark;
+  const {
+    isDark
+  } = (0, _react.useContext)(_labsWidgetCommon.ThemeContext);
   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', {

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

@@ -1 +1 @@
-{"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-border-disabled': 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-border-disabled': 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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"}
+{"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","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, 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);\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-border-disabled': 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-border-disabled': 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/module/SentimentWidget/Tool.js

@@ -1,5 +1,6 @@
-import React, { useEffect, useState } from 'react';
-import { Sentiment, SentimentHeight, Loader, LoaderSize, ChartError, Truncate, Tooltip, InfoBox, formatUpdatedTimestamp } from '@oanda/labs-widget-common';
+import React, { useEffect, useState, useContext } from 'react';
+import classNames from 'classnames';
+import { Sentiment, SentimentHeight, Loader, LoaderSize, ChartError, Truncate, Tooltip, InfoBox, formatUpdatedTimestamp, ThemeContext } from '@oanda/labs-widget-common';
 import { useQuery } from '@apollo/client';
 import { useLocale } from '@oanda/mono-i18n';
 import { getSentimentList } from '../gql/getSentimentList';
@@ -11,6 +12,9 @@ const Tool = _ref => {
   let {
     division
   } = _ref;
+  const {
+    isDesktop
+  } = useContext(ThemeContext);
   const [sort, setSort] = useState(Sort.Bullish);
   const [sortedData, setSortedData] = useState(new Array(20).fill({}));
   const {
@@ -51,9 +55,14 @@ const Tool = _ref => {
   }, React.createElement("div", {
     className: "lw-mb-2 lw-flex lw-justify-between lw-font-semibold"
   }, React.createElement("span", {
-    className: "lw-ml-[7.5rem] lw-uppercase md:lw-ml-40"
+    className: classNames('lw-uppercase', {
+      'lw-ml-40': isDesktop,
+      'lw-ml-[7.5rem]': !isDesktop
+    })
   }, lang('net_short')), React.createElement("span", {
-    className: "lw-text-right lw-uppercase md:lw-mr-10"
+    className: classNames('lw-text-right lw-uppercase', {
+      'lw-mr-10': isDesktop
+    })
   }, lang('net_long'))), sortedData.map((item, index) => React.createElement("div", {
     className: "lw-flex lw-h-8 lw-w-full lw-items-center",
     key: item.name || index

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","InfoBox","formatUpdatedTimestamp","useQuery","useLocale","getSentimentList","sortData","SelectedArrow","SortSwitch","Sort","EMPTY_VALUE","INSTRUMENT_TOOLTIP_ID","Tool","_ref","division","sort","setSort","Bullish","sortedData","setSortedData","Array","fill","loading","data","error","variables","fetchPolicy","lang","updatedTimestamp","setUpdatedTimestamp","_","sentimentList","updatedAt","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","concat"],"sources":["../../../src/SentimentWidget/Tool.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport {\n  Sentiment,\n  SentimentHeight,\n  Loader,\n  LoaderSize,\n  ChartError,\n  Truncate,\n  Tooltip,\n  InfoBox,\n  formatUpdatedTimestamp,\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 { EMPTY_VALUE, 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    fetchPolicy: 'cache-and-network',\n  });\n\n  const { lang } = useLocale();\n  const [updatedTimestamp, setUpdatedTimestamp] = useState(EMPTY_VALUE);\n\n  useEffect(() => {\n    if (data) {\n      setSortedData(sortData(data, sort));\n      setUpdatedTimestamp(formatUpdatedTimestamp(data.sentimentList![0]?.updatedAt, lang('today')));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [data, sort]);\n\n  return (\n    <div data-testid=\"sentiment-tool\" className=\"lw-relative lw-bg-bg-primary 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-border-primary 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-border-primary 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      {!error\n        && (\n        <div className=\"lw-mt-2 lw-h-8\">\n          <InfoBox text={`${lang('last_updated')}: ${updatedTimestamp}`} />\n        </div>\n        )}\n    </div>\n  );\n};\n\nexport { Tool };\n"],"mappings":"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"}
+{"version":3,"file":"Tool.js","names":["React","useEffect","useState","useContext","classNames","Sentiment","SentimentHeight","Loader","LoaderSize","ChartError","Truncate","Tooltip","InfoBox","formatUpdatedTimestamp","ThemeContext","useQuery","useLocale","getSentimentList","sortData","SelectedArrow","SortSwitch","Sort","EMPTY_VALUE","INSTRUMENT_TOOLTIP_ID","Tool","_ref","division","isDesktop","sort","setSort","Bullish","sortedData","setSortedData","Array","fill","loading","data","error","variables","fetchPolicy","lang","updatedTimestamp","setUpdatedTimestamp","_","sentimentList","updatedAt","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","concat"],"sources":["../../../src/SentimentWidget/Tool.tsx"],"sourcesContent":["import React, { useEffect, useState, useContext } from 'react';\nimport classNames from 'classnames';\nimport {\n  Sentiment,\n  SentimentHeight,\n  Loader,\n  LoaderSize,\n  ChartError,\n  Truncate,\n  Tooltip,\n  InfoBox,\n  formatUpdatedTimestamp,\n  ThemeContext,\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 { EMPTY_VALUE, INSTRUMENT_TOOLTIP_ID } from '../constant';\n\nconst Tool = ({ division }: SentimentToolConfig) => {\n  const { isDesktop } = useContext(ThemeContext);\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    fetchPolicy: 'cache-and-network',\n  });\n\n  const { lang } = useLocale();\n  const [updatedTimestamp, setUpdatedTimestamp] = useState(EMPTY_VALUE);\n\n  useEffect(() => {\n    if (data) {\n      setSortedData(sortData(data, sort));\n      setUpdatedTimestamp(formatUpdatedTimestamp(data.sentimentList![0]?.updatedAt, lang('today')));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [data, sort]);\n\n  return (\n    <div data-testid=\"sentiment-tool\" className=\"lw-relative lw-bg-bg-primary 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-border-primary 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-border-primary lw-p-2\">\n            <div className=\"lw-mb-2 lw-flex lw-justify-between lw-font-semibold\">\n              <span className={classNames('lw-uppercase', {\n                'lw-ml-40': isDesktop,\n                'lw-ml-[7.5rem]': !isDesktop,\n              })}\n              >\n                {lang('net_short')}\n              </span>\n              <span className={classNames('lw-text-right lw-uppercase', {\n                'lw-mr-10': isDesktop,\n              })}\n              >\n                {lang('net_long')}\n              </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      {!error\n        && (\n        <div className=\"lw-mt-2 lw-h-8\">\n          <InfoBox text={`${lang('last_updated')}: ${updatedTimestamp}`} />\n        </div>\n        )}\n    </div>\n  );\n};\n\nexport { Tool };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,OAAO;AAC9D,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,SAAS,EACTC,eAAe,EACfC,MAAM,EACNC,UAAU,EACVC,UAAU,EACVC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,sBAAsB,EACtBC,YAAY,QACP,2BAA2B;AAClC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,gBAAgB,QAAQ,yBAAyB;AAE1D,SAASC,QAAQ,QAAQ,SAAS;AAClC,SAASC,aAAa,EAAEC,UAAU,QAAQ,yBAAyB;AACnE,SAC8EC,IAAI,QAC3E,sBAAsB;AAC7B,SAASC,WAAW,EAAEC,qBAAqB,QAAQ,aAAa;AAEhE,MAAMC,IAAI,GAAGC,IAAA,IAAuC;EAAA,IAAtC;IAAEC;EAA8B,CAAC,GAAAD,IAAA;EAC7C,MAAM;IAAEE;EAAU,CAAC,GAAGxB,UAAU,CAACW,YAAY,CAAC;EAC9C,MAAM,CAACc,IAAI,EAAEC,OAAO,CAAC,GAAG3B,QAAQ,CAACmB,IAAI,CAACS,OAAO,CAAC;EAC9C,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG9B,QAAQ,CAAoC,IAAI+B,KAAK,CAAC,EAAE,CAAC,CAACC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;EACvG,MAAM;IAAEC,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGtB,QAAQ,CAGvCE,gBAAgB,EAAE;IAClBqB,SAAS,EAAE;MACTZ;IACF,CAAC;IACDa,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAM;IAAEC;EAAK,CAAC,GAAGxB,SAAS,CAAC,CAAC;EAC5B,MAAM,CAACyB,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGxC,QAAQ,CAACoB,WAAW,CAAC;EAErErB,SAAS,CAAC,MAAM;IACd,IAAImC,IAAI,EAAE;MAAA,IAAAO,CAAA;MACRX,aAAa,CAACd,QAAQ,CAACkB,IAAI,EAAER,IAAI,CAAC,CAAC;MACnCc,mBAAmB,CAAC7B,sBAAsB,EAAA8B,CAAA,GAACP,IAAI,CAACQ,aAAa,CAAE,CAAC,CAAC,cAAAD,CAAA,uBAAtBA,CAAA,CAAwBE,SAAS,EAAEL,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/F;EAEF,CAAC,EAAE,CAACJ,IAAI,EAAER,IAAI,CAAC,CAAC;EAEhB,OACE5B,KAAA,CAAA8C,aAAA;IAAK,eAAY,gBAAgB;IAACC,SAAS,EAAC;EAAiF,GAC1HV,KAAK,IAAIN,UAAU,CAACiB,MAAM,KAAK,CAAC,GAC/BhD,KAAA,CAAA8C,aAAA;IAAKC,SAAS,EAAC;EAAkH,GAC/H/C,KAAA,CAAA8C,aAAA,CAACrC,UAAU,MAAE,CACV,CAAC,GAENT,KAAA,CAAA8C,aAAA,CAAA9C,KAAA,CAAAiD,QAAA,QACEjD,KAAA,CAAA8C,aAAA;IAAKC,SAAS,EAAC;EAAgC,GAC7C/C,KAAA,CAAA8C,aAAA,CAAC1B,UAAU;IACT8B,QAAQ,EAAEf,OAAQ;IAClBgB,QAAQ,EAAEvB,IAAI,KAAKP,IAAI,CAACS,OAAO,GAAGX,aAAa,CAACiC,EAAE,GAAGjC,aAAa,CAACkC,IAAK;IACxEC,iBAAiB,EAAEA,CAAA,KAAMzB,OAAO,CAACR,IAAI,CAACkC,OAAO,CAAE;IAC/CC,eAAe,EAAEA,CAAA,KAAM3B,OAAO,CAACR,IAAI,CAACS,OAAO;EAAE,CAC9C,CACE,CAAC,EACN9B,KAAA,CAAA8C,aAAA;IAAKC,SAAS,EAAC;EAA+E,GAC5F/C,KAAA,CAAA8C,aAAA;IAAKC,SAAS,EAAC;EAAqD,GAClE/C,KAAA,CAAA8C,aAAA;IAAMC,SAAS,EAAE3C,UAAU,CAAC,cAAc,EAAE;MAC1C,UAAU,EAAEuB,SAAS;MACrB,gBAAgB,EAAE,CAACA;IACrB,CAAC;EAAE,GAEAa,IAAI,CAAC,WAAW,CACb,CAAC,EACPxC,KAAA,CAAA8C,aAAA;IAAMC,SAAS,EAAE3C,UAAU,CAAC,4BAA4B,EAAE;MACxD,UAAU,EAAEuB;IACd,CAAC;EAAE,GAEAa,IAAI,CAAC,UAAU,CACZ,CACH,CAAC,EACLT,UAAU,CAAC0B,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAC1B3D,KAAA,CAAA8C,aAAA;IAAKC,SAAS,EAAC,0CAA0C;IAACa,GAAG,EAAEF,IAAI,CAACG,IAAI,IAAIF;EAAM,GAChF3D,KAAA,CAAA8C,aAAA;IAAKC,SAAS,EAAC;EAA0B,GACtCZ,OAAO,GACNnC,KAAA,CAAA8C,aAAA,CAACvC,MAAM;IAACuD,IAAI,EAAEtD,UAAU,CAACuD;EAAG,CAAE,CAAC,GAE/B/D,KAAA,CAAA8C,aAAA,CAACpC,QAAQ;IACPsD,QAAQ,EAAE,GAAI;IACdC,SAAS,EAAE1C,qBAAsB;IACjCwB,SAAS,EAAC,8CAA8C;IACxDmB,IAAI,EAAER,IAAI,CAACS,WAAW,IAAI;EAAS,CACpC,CAEA,CAAC,EACNnE,KAAA,CAAA8C,aAAA,CAACzC,SAAS;IACR+D,SAAS,EAAEjC,OAAQ;IACnBkC,MAAM,EAAE/D,eAAe,CAACyD,EAAG;IAC3BO,SAAS,EAAEZ,IAAI,CAACY;EAAU,CAC3B,CACE,CACN,CACE,CACL,CACH,EACDtE,KAAA,CAAA8C,aAAA,CAACnC,OAAO;IAAC4D,EAAE,EAAEhD;EAAsB,CAAE,CAAC,EACrC,CAACc,KAAK,IAELrC,KAAA,CAAA8C,aAAA;IAAKC,SAAS,EAAC;EAAgB,GAC7B/C,KAAA,CAAA8C,aAAA,CAAClC,OAAO;IAACsD,IAAI,KAAAM,MAAA,CAAKhC,IAAI,CAAC,cAAc,CAAC,QAAAgC,MAAA,CAAK/B,gBAAgB;EAAG,CAAE,CAC7D,CAEJ,CAAC;AAEV,CAAC;AAED,SAASjB,IAAI"}

package/dist/module/SentimentWidget/Widget.js

@@ -1,5 +1,6 @@
-import React from 'react';
-import { Sentiment, SentimentHeight, Error, Loader, LoaderSize, Truncate, InfoBox, formatUpdatedTimestamp } from '@oanda/labs-widget-common';
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import { Sentiment, SentimentHeight, Error, Loader, LoaderSize, Truncate, InfoBox, formatUpdatedTimestamp, ThemeContext } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { useQuery } from '@apollo/client';
 import { getInstrumentSentiment } from '../gql/getInstrumentSentiment';
@@ -22,6 +23,9 @@ const Widget = _ref => {
     },
     fetchPolicy: 'cache-and-network'
   });
+  const {
+    isDesktop
+  } = useContext(ThemeContext);
   const {
     lang
   } = useLocale();
@@ -37,9 +41,14 @@ const Widget = _ref => {
   }, includeDescriptionLabels && React.createElement("div", {
     className: "lw-mb-2 lw-flex lw-justify-between lw-font-semibold"
   }, React.createElement("span", {
-    className: "lw-ml-[7.5rem] lw-uppercase md:lw-ml-40"
+    className: classNames('lw-uppercase', {
+      'lw-ml-40': isDesktop,
+      'lw-ml-[7.5rem]': !isDesktop
+    })
   }, lang('net_short')), React.createElement("span", {
-    className: "lw-text-right lw-uppercase md:lw-mr-10"
+    className: classNames('lw-text-right lw-uppercase', {
+      'lw-mr-10': isDesktop
+    })
   }, lang('net_long'))), 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","InfoBox","formatUpdatedTimestamp","useLocale","useQuery","getInstrumentSentiment","EMPTY_VALUE","INSTRUMENT_TOOLTIP_ID","Widget","_ref","_data$sentiment","instrument","division","includeDescriptionLabels","loading","data","error","variables","name","fetchPolicy","lang","displayName","sentiment","updatedAt","isError","shortPercent","longPercent","undefined","createElement","Fragment","className","size","md","maxWidth","tooltipId","text","withError","isLoading","height","concat"],"sources":["../../../src/SentimentWidget/Widget.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Sentiment, SentimentHeight, Error, Loader, LoaderSize, Truncate, InfoBox, formatUpdatedTimestamp,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { useQuery } from '@apollo/client';\nimport { getInstrumentSentiment } from '../gql/getInstrumentSentiment';\nimport { SentimentWidgetConfig } from './types';\nimport { GetInstrumentSentimentQuery, GetInstrumentSentimentQueryVariables } from '../gql/types/graphql';\nimport { EMPTY_VALUE, INSTRUMENT_TOOLTIP_ID } from '../constant';\n\nconst Widget = ({\n  instrument,\n  division,\n  includeDescriptionLabels = false,\n}: SentimentWidgetConfig) => {\n  const { loading, data, error } = useQuery<\n  GetInstrumentSentimentQuery,\n  GetInstrumentSentimentQueryVariables\n  >(getInstrumentSentiment, {\n    variables: {\n      name: instrument,\n      division,\n    },\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const { lang } = useLocale();\n\n  const { displayName, sentiment, updatedAt } = data?.sentiment?.[0] || {};\n\n  const isError = error\n    || (sentiment?.shortPercent === 0 && sentiment?.longPercent === 0)\n    || sentiment?.shortPercent === undefined\n    || sentiment?.longPercent === undefined;\n\n  return (\n    <>\n      <div data-testid=\"sentiment-widget\" className=\"lw-border lw-border-solid lw-border-border-primary lw-bg-bg-primary lw-p-4 lw-text-sm lw-tracking-normal lw-text-text-primary\">\n        {includeDescriptionLabels\n          && (\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          )}\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={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\n        {!loading && isError && <Error />}\n      </div>\n      {!isError && updatedAt && (\n        <div className=\"lw-mt-2 lw-h-8\">\n          <InfoBox text={`${lang('last_updated')}: ${formatUpdatedTimestamp(updatedAt, lang('today')) || EMPTY_VALUE}`} />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Widget };\n"],"mappings":"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"}
+{"version":3,"file":"Widget.js","names":["React","useContext","classNames","Sentiment","SentimentHeight","Error","Loader","LoaderSize","Truncate","InfoBox","formatUpdatedTimestamp","ThemeContext","useLocale","useQuery","getInstrumentSentiment","EMPTY_VALUE","INSTRUMENT_TOOLTIP_ID","Widget","_ref","_data$sentiment","instrument","division","includeDescriptionLabels","loading","data","error","variables","name","fetchPolicy","isDesktop","lang","displayName","sentiment","updatedAt","isError","shortPercent","longPercent","undefined","createElement","Fragment","className","size","md","maxWidth","tooltipId","text","withError","isLoading","height","concat"],"sources":["../../../src/SentimentWidget/Widget.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport {\n  Sentiment,\n  SentimentHeight,\n  Error,\n  Loader,\n  LoaderSize,\n  Truncate,\n  InfoBox,\n  formatUpdatedTimestamp,\n  ThemeContext,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { useQuery } from '@apollo/client';\nimport { getInstrumentSentiment } from '../gql/getInstrumentSentiment';\nimport { SentimentWidgetConfig } from './types';\nimport { GetInstrumentSentimentQuery, GetInstrumentSentimentQueryVariables } from '../gql/types/graphql';\nimport { EMPTY_VALUE, INSTRUMENT_TOOLTIP_ID } from '../constant';\n\nconst Widget = ({\n  instrument,\n  division,\n  includeDescriptionLabels = false,\n}: SentimentWidgetConfig) => {\n  const { loading, data, error } = useQuery<\n  GetInstrumentSentimentQuery,\n  GetInstrumentSentimentQueryVariables\n  >(getInstrumentSentiment, {\n    variables: {\n      name: instrument,\n      division,\n    },\n    fetchPolicy: 'cache-and-network',\n  });\n  const { isDesktop } = useContext(ThemeContext);\n  const { lang } = useLocale();\n\n  const { displayName, sentiment, updatedAt } = data?.sentiment?.[0] || {};\n\n  const isError = error\n    || (sentiment?.shortPercent === 0 && sentiment?.longPercent === 0)\n    || sentiment?.shortPercent === undefined\n    || sentiment?.longPercent === undefined;\n\n  return (\n    <>\n      <div\n        data-testid=\"sentiment-widget\"\n        className=\"lw-border lw-border-solid lw-border-border-primary lw-bg-bg-primary lw-p-4 lw-text-sm lw-tracking-normal lw-text-text-primary\"\n      >\n        {includeDescriptionLabels\n          && (\n          <div className=\"lw-mb-2 lw-flex lw-justify-between lw-font-semibold\">\n            <span className={classNames('lw-uppercase', {\n              'lw-ml-40': isDesktop,\n              'lw-ml-[7.5rem]': !isDesktop,\n            })}\n            >\n              {lang('net_short')}\n            </span>\n            <span className={classNames('lw-text-right lw-uppercase', {\n              'lw-mr-10': isDesktop,\n            })}\n            >\n              {lang('net_long')}\n            </span>\n          </div>\n          )}\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={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\n        {!loading && isError && <Error />}\n      </div>\n      {!isError && updatedAt && (\n        <div className=\"lw-mt-2 lw-h-8\">\n          <InfoBox text={`${lang('last_updated')}: ${formatUpdatedTimestamp(updatedAt, lang('today')) || EMPTY_VALUE}`} />\n        </div>\n      )}\n    </>\n  );\n};\n\nexport { Widget };\n"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import classnames from 'classnames';
-import { LongArrowUp, LongArrowDown, Theme, ThemeContext } from '@oanda/labs-widget-common';
+import { LongArrowUp, LongArrowDown, ThemeContext } from '@oanda/labs-widget-common';
 import { SelectedArrow } from './types';
 const SortSwitch = _ref => {
   let {
@@ -9,7 +9,9 @@ const SortSwitch = _ref => {
     selected,
     disabled
   } = _ref;
-  const isDark = useContext(ThemeContext) === Theme.Dark;
+  const {
+    isDark
+  } = useContext(ThemeContext);
   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', {

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

@@ -1 +1 @@
-{"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-border-disabled': 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-border-disabled': 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,2BAA2B,EAAEW,QAAQ;MACrC,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,2BAA2B,EAAEW,QAAQ;MACrC,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"}
+{"version":3,"file":"SortSwitch.js","names":["React","useContext","classnames","LongArrowUp","LongArrowDown","ThemeContext","SelectedArrow","SortSwitch","_ref","onClickButtonDown","onClickButtonUp","selected","disabled","isDark","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, 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);\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-border-disabled': 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-border-disabled': 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,YAAY,QACnC,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,MAAM;IAAEK;EAAO,CAAC,GAAGZ,UAAU,CAACI,YAAY,CAAC;EAE3C,OACEL,KAAA,CAAAc,aAAA;IACE,eAAY,aAAa;IACzBC,SAAS,EAAEb,UAAU,CACnB,+FAA+F,EAC/F;MACE,2BAA2B,EAAEU,QAAQ;MACrC,qBAAqB,EAAE,CAACA;IAC1B,CACF;EAAE,GAEFZ,KAAA,CAAAc,aAAA;IACE,eAAY,uBAAuB;IACnCF,QAAQ,EAAEA,QAAQ,IAAID,QAAQ,KAAKL,aAAa,CAACU,EAAG;IACpDC,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAER,eAAgB;IACzBK,SAAS,EAAEb,UAAU,CACnB,uJAAuJ,EACvJ;MACE,+CAA+C,EAAEU,QAAQ;MACzD,iBAAiB,EAAED,QAAQ,KAAKL,aAAa,CAACU,EAAE,IAAI,CAACJ;IACvD,CACF;EAAE,GAEFZ,KAAA,CAAAc,aAAA,CAACX,WAAW;IACVY,SAAS,EAAEb,UAAU,CACnB,yBAAyB,EACzB;MACE,2BAA2B,EAAEU,QAAQ;MACrC,qBAAqB,EAAED,QAAQ,KAAKL,aAAa,CAACU,EAAE,IAAI,CAACJ,QAAQ;MACjE,sBAAsB,EAAED,QAAQ,KAAKL,aAAa,CAACU,EAAE,IAAI,CAACJ,QAAQ,IAAIC,MAAM;MAC5E,cAAc,EAAEF,QAAQ,KAAKL,aAAa,CAACU,EAAE,IAAI,CAACJ,QAAQ,IAAI,CAACC;IACjE,CACF;EAAE,CACH,CACK,CAAC,EACTb,KAAA,CAAAc,aAAA;IACE,eAAY,yBAAyB;IACrCF,QAAQ,EAAEA,QAAQ,IAAID,QAAQ,KAAKL,aAAa,CAACa,IAAK;IACtDF,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAET,iBAAkB;IAC3BM,SAAS,EAAEb,UAAU,CACnB,oJAAoJ,EACpJ;MACE,iBAAiB,EAAES,QAAQ,KAAKL,aAAa,CAACa,IAAI,IAAI,CAACP;IACzD,CACF;EAAE,GAEFZ,KAAA,CAAAc,aAAA,CAACV,aAAa;IACZW,SAAS,EAAEb,UAAU,CACnB,yBAAyB,EACzB;MACE,2BAA2B,EAAEU,QAAQ;MACrC,qBAAqB,EAAED,QAAQ,KAAKL,aAAa,CAACa,IAAI,IAAI,CAACP,QAAQ;MACnE,sBAAsB,EAAED,QAAQ,KAAKL,aAAa,CAACa,IAAI,IAAI,CAACP,QAAQ,IAAIC,MAAM;MAC9E,cAAc,EAAEF,QAAQ,KAAKL,aAAa,CAACa,IAAI,IAAI,CAACP,QAAQ,IAAI,CAACC;IACnE,CACF;EAAE,CACH,CACK,CACL,CAAC;AAEV,CAAC;AAED,SACEN,UAAU"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-sentiment-widget",
-  "version": "1.0.75",
+  "version": "1.0.77",
   "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.75",
+    "@oanda/labs-widget-common": "^1.0.77",
     "@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": "fa0f3cf9bb370b1b86112081879eb65f753a1946"
+  "gitHead": "9dfd2c059bd9c6451f8677c2fa6c3763fb49661d"
 }

package/src/SentimentWidget/Tool.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
+import classNames from 'classnames';
 import {
   Sentiment,
   SentimentHeight,
@@ -9,6 +10,7 @@ import {
   Tooltip,
   InfoBox,
   formatUpdatedTimestamp,
+  ThemeContext,
 } from '@oanda/labs-widget-common';
 import { useQuery } from '@apollo/client';
 import { useLocale } from '@oanda/mono-i18n';
@@ -22,6 +24,7 @@ import {
 import { EMPTY_VALUE, INSTRUMENT_TOOLTIP_ID } from '../constant';
 
 const Tool = ({ division }: SentimentToolConfig) => {
+  const { isDesktop } = useContext(ThemeContext);
   const [sort, setSort] = useState(Sort.Bullish);
   const [sortedData, setSortedData] = useState<Omit<SentimentInstrument, 'id'>[]>(new Array(20).fill({}));
   const { loading, data, error } = useQuery<
@@ -63,8 +66,19 @@ const Tool = ({ division }: SentimentToolConfig) => {
           </div>
           <div className="lw-flex lw-flex-col lw-border lw-border-solid lw-border-border-primary lw-p-2">
             <div className="lw-mb-2 lw-flex lw-justify-between lw-font-semibold">
-              <span className="lw-ml-[7.5rem] lw-uppercase md:lw-ml-40">{lang('net_short')}</span>
-              <span className="lw-text-right lw-uppercase md:lw-mr-10">{lang('net_long')}</span>
+              <span className={classNames('lw-uppercase', {
+                'lw-ml-40': isDesktop,
+                'lw-ml-[7.5rem]': !isDesktop,
+              })}
+              >
+                {lang('net_short')}
+              </span>
+              <span className={classNames('lw-text-right lw-uppercase', {
+                'lw-mr-10': isDesktop,
+              })}
+              >
+                {lang('net_long')}
+              </span>
             </div>
             {sortedData.map((item, index) => (
               <div className="lw-flex lw-h-8 lw-w-full lw-items-center" key={item.name || index}>

package/src/SentimentWidget/Widget.tsx

@@ -1,6 +1,15 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import classNames from 'classnames';
 import {
-  Sentiment, SentimentHeight, Error, Loader, LoaderSize, Truncate, InfoBox, formatUpdatedTimestamp,
+  Sentiment,
+  SentimentHeight,
+  Error,
+  Loader,
+  LoaderSize,
+  Truncate,
+  InfoBox,
+  formatUpdatedTimestamp,
+  ThemeContext,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { useQuery } from '@apollo/client';
@@ -24,7 +33,7 @@ const Widget = ({
     },
     fetchPolicy: 'cache-and-network',
   });
-
+  const { isDesktop } = useContext(ThemeContext);
   const { lang } = useLocale();
 
   const { displayName, sentiment, updatedAt } = data?.sentiment?.[0] || {};
@@ -36,12 +45,26 @@ const Widget = ({
 
   return (
     <>
-      <div data-testid="sentiment-widget" className="lw-border lw-border-solid lw-border-border-primary lw-bg-bg-primary lw-p-4 lw-text-sm lw-tracking-normal lw-text-text-primary">
+      <div
+        data-testid="sentiment-widget"
+        className="lw-border lw-border-solid lw-border-border-primary lw-bg-bg-primary lw-p-4 lw-text-sm lw-tracking-normal lw-text-text-primary"
+      >
         {includeDescriptionLabels
           && (
           <div className="lw-mb-2 lw-flex lw-justify-between lw-font-semibold">
-            <span className="lw-ml-[7.5rem] lw-uppercase md:lw-ml-40">{lang('net_short')}</span>
-            <span className="lw-text-right lw-uppercase md:lw-mr-10">{lang('net_long')}</span>
+            <span className={classNames('lw-uppercase', {
+              'lw-ml-40': isDesktop,
+              'lw-ml-[7.5rem]': !isDesktop,
+            })}
+            >
+              {lang('net_short')}
+            </span>
+            <span className={classNames('lw-text-right lw-uppercase', {
+              'lw-mr-10': isDesktop,
+            })}
+            >
+              {lang('net_long')}
+            </span>
           </div>
           )}
         <div className="lw-flex lw-items-center lw-justify-between">

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

@@ -1,14 +1,14 @@
 import React, { useContext } from 'react';
 import classnames from 'classnames';
 import {
-  LongArrowUp, LongArrowDown, Theme, ThemeContext,
+  LongArrowUp, LongArrowDown, ThemeContext,
 } from '@oanda/labs-widget-common';
 import { SelectedArrow, SortSwitchProps } from './types';
 
 const SortSwitch = ({
   onClickButtonDown, onClickButtonUp, selected, disabled,
 }: SortSwitchProps) => {
-  const isDark = useContext(ThemeContext) === Theme.Dark;
+  const { isDark } = useContext(ThemeContext);
 
   return (
     <div