@sis-cc/dotstatsuite-visions 10.28.0 → 10.29.0

package/lib/DataHeader/DataHeader.js

@@ -58,11 +58,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     header: {
       alignItems: 'center',
-      display: 'flex',
-      justifyContent: function justifyContent(_ref) {
-        var isWidthLess = _ref.isWidthLess;
-        return isWidthLess(_theme.T4_BREAKPOINTS.xs2) ? 'flex-end' : 'space-between';
-      }
+      display: 'flex'
     },
     container: _extends({
       display: 'flex',
@@ -76,12 +72,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       display: 'inline-block',
       width: '100%',
       lineHeight: 1.5
-    }, R.pathOr({}, ['mixins', 'dataHeader', 'title'], theme), {
-      fontSize: function fontSize(_ref2) {
-        var isWidthLess = _ref2.isWidthLess;
-        return R.cond([[R.always(isWidthLess(_theme.T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(_theme.T4_BREAKPOINTS.sm)), R.always(14)], [R.always(isWidthLess(_theme.T4_BREAKPOINTS.md2)), R.always(16)], [R.T, R.identity]])(18);
-      }
-    }),
+    }, R.pathOr({}, ['mixins', 'dataHeader', 'title'], theme)),
     wrapperSubtitle: {
       alignItems: 'center',
       display: 'flex',
@@ -92,18 +83,9 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     subtitle: _extends({
       lineHeight: 1.6,
       color: theme.palette.grey[600]
-    }, R.pathOr({}, ['mixins', 'dataHeader', 'subtitle'], theme), {
-      fontSize: function fontSize(_ref3) {
-        var isWidthLess = _ref3.isWidthLess;
-        return R.cond([[R.always(isWidthLess(_theme.T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(_theme.T4_BREAKPOINTS.sm)), R.always(13)]])(14);
-      }
-    }),
+    }, R.pathOr({}, ['mixins', 'dataHeader', 'subtitle'], theme)),
     disclaimer: _extends({
       padding: theme.spacing(0.5),
-      fontSize: function fontSize(_ref4) {
-        var isWidthLess = _ref4.isWidthLess;
-        return R.cond([[R.always(isWidthLess(_theme.T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(_theme.T4_BREAKPOINTS.sm)), R.always(13)]])(14);
-      },
       lineHeight: 1.5
     }, R.pathOr({}, ['mixins', 'dataHeader', 'disclaimer'], theme)),
     infoIcon: {
@@ -145,19 +127,19 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   };
 });
 
-var DataHeader = function DataHeader(_ref5) {
+var DataHeader = function DataHeader(_ref) {
   var _cx;
 
-  var children = _ref5.children,
-      title = _ref5.title,
-      _ref5$subtitle = _ref5.subtitle,
-      subtitle = _ref5$subtitle === undefined ? [] : _ref5$subtitle,
-      combinations = _ref5.combinations,
-      disclaimer = _ref5.disclaimer,
-      sideProps = _ref5.sideProps,
-      SideIcon = _ref5.SideIcon,
-      _ref5$isSticky = _ref5.isSticky,
-      isSticky = _ref5$isSticky === undefined ? false : _ref5$isSticky;
+  var children = _ref.children,
+      title = _ref.title,
+      _ref$subtitle = _ref.subtitle,
+      subtitle = _ref$subtitle === undefined ? [] : _ref$subtitle,
+      combinations = _ref.combinations,
+      disclaimer = _ref.disclaimer,
+      sideProps = _ref.sideProps,
+      SideIcon = _ref.SideIcon,
+      _ref$isSticky = _ref.isSticky,
+      isSticky = _ref$isSticky === undefined ? false : _ref$isSticky;
 
   var target = _react2.default.useRef(null);
 
@@ -166,7 +148,7 @@ var DataHeader = function DataHeader(_ref5) {
 
   var isWidthUp = R.gte(width);
   var isWidthLess = R.lt(width);
-  var classes = useStyles({ isWidthLess: isWidthLess });
+  var classes = useStyles();
 
   var reducedContent = (0, _utils.getReducedContent)({
     isWidthLess: isWidthLess,
@@ -178,13 +160,21 @@ var DataHeader = function DataHeader(_ref5) {
 
   var theme = (0, _styles.useTheme)();
   var iconColor = R.path(['mixins', 'dataHeader', 'icon', 'color'], theme);
-
+  var fontSizeTitle = R.cond([[R.always(isWidthLess(_theme.T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(_theme.T4_BREAKPOINTS.sm)), R.always(14)], [R.always(isWidthLess(_theme.T4_BREAKPOINTS.md2)), R.always(16)], [R.T, R.identity]])(18);
+  var fontSizeSubtitle = R.cond([[R.always(isWidthLess(_theme.T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(_theme.T4_BREAKPOINTS.sm)), R.always(13)]])(14);
   var subtitleLength = R.length(subtitle);
   var combinationsLength = R.length(combinations);
 
   return _react2.default.createElement(
     'div',
-    { className: classes.header, ref: target, 'data-testid': 'data-header' },
+    {
+      className: classes.header,
+      style: {
+        justifyContent: isWidthLess(_theme.T4_BREAKPOINTS.xs2) ? 'flex-end' : 'space-between'
+      },
+      ref: target,
+      'data-testid': 'data-header'
+    },
     _react2.default.createElement(
       'div',
       { className: (0, _classnames2.default)(classes.container, (_cx = {}, _cx[classes.sticky] = isSticky, _cx)) },
@@ -193,6 +183,7 @@ var DataHeader = function DataHeader(_ref5) {
         {
           variant: 'h1',
           className: classes.title,
+          style: { fontSize: fontSizeTitle },
           'data-testid': 'data-header-title',
           'aria-label': title.label
         },
@@ -213,6 +204,7 @@ var DataHeader = function DataHeader(_ref5) {
             {
               key: 'subtitle-' + index,
               className: classes.subtitle,
+              style: { fontSize: fontSizeSubtitle },
               'data-testid': 'data-header-subtitle',
               'aria-label': sub.header
             },
@@ -260,7 +252,11 @@ var DataHeader = function DataHeader(_ref5) {
       ),
       isWidthUp(_theme.T4_BREAKPOINTS.xs3) && disclaimer && _react2.default.createElement(
         _Typography2.default,
-        { 'data-testid': 'data-header-disclaimer', className: classes.disclaimer },
+        {
+          'data-testid': 'data-header-disclaimer',
+          className: classes.disclaimer,
+          style: { fontSize: fontSizeSubtitle }
+        },
         disclaimer
       )
     ),

package/lib/HierarchicalFilter/HierarchicalFilter.js

@@ -73,7 +73,6 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
       activePanelId = props.activePanelId,
       Tag = props.Tag,
       testId = props.testId,
-      accessibility = props.accessibility,
       _props$expansionPanel = props.expansionPanelProps,
       expansionPanelProps = _props$expansionPanel === undefined ? {} : _props$expansionPanel,
       _props$labelRenderer = props.labelRenderer,
@@ -93,7 +92,7 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
       _props$simpleSelectio = props.simpleSelectionMode,
       simpleSelectionMode = _props$simpleSelectio === undefined ? false : _props$simpleSelectio;
 
-  var classes = (0, _styles.useStyles)({ accessibility: accessibility });
+  var classes = (0, _styles.useStyles)();
   var theme = (0, _core.useTheme)();
   var isRtl = (0, _utils2.getIsRtl)(theme);
   var Chip = R.isNil(Tag) ? _.Tag : Tag;
@@ -177,7 +176,6 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
 
 HierarchicalFilter.propTypes = process.env.NODE_ENV !== "production" ? {
   id: _propTypes2.default.string,
-  accessibility: _propTypes2.default.bool,
   activePanelId: _propTypes2.default.string,
   changeSelection: _propTypes2.default.func,
   onChangeActivePanel: _propTypes2.default.func,

package/lib/Logo/Logo.js

@@ -26,10 +26,6 @@ var useStyles = (0, _styles.makeStyles)(function () {
     },
     logo: {
       maxWidth: '100%',
-      maxHeight: function maxHeight(_ref) {
-        var _maxHeight = _ref.maxHeight;
-        return _maxHeight;
-      },
       imageRendering: 'crisp-edges'
     },
     // https://caniuse.com/mdn-css_properties_image-rendering_crisp-edges
@@ -39,17 +35,22 @@ var useStyles = (0, _styles.makeStyles)(function () {
   };
 });
 
-var Logo = function Logo(_ref2) {
-  var logo = _ref2.logo,
-      _ref2$maxHeight = _ref2.maxHeight,
-      maxHeight = _ref2$maxHeight === undefined ? 150 : _ref2$maxHeight,
-      children = _ref2.children;
+var Logo = function Logo(_ref) {
+  var logo = _ref.logo,
+      _ref$maxHeight = _ref.maxHeight,
+      maxHeight = _ref$maxHeight === undefined ? 150 : _ref$maxHeight,
+      children = _ref.children;
 
-  var classes = useStyles({ maxHeight: maxHeight });
+  var classes = useStyles();
   return _react2.default.createElement(
     'div',
     { className: classes.container },
-    _react2.default.createElement('img', { className: (0, _classnames2.default)(classes.logo, classes.alternativeBrowserLogo), src: logo, alt: 'logo' }),
+    _react2.default.createElement('img', {
+      className: (0, _classnames2.default)(classes.logo, classes.alternativeBrowserLogo),
+      style: { maxHeight: maxHeight },
+      src: logo,
+      alt: 'logo'
+    }),
     children
   );
 };

package/lib/ScopeList/Item.js

@@ -207,7 +207,8 @@ var Item = function Item(_ref) {
         onMouseEnter: R.is(Function, changeMouseSelection) ? changeMouseSelection(null, { isUp: true }) : null,
         style: _extends({}, R.evolve(containerStyles, style), {
           left: isRtl && 0,
-          right: R.not(isRtl) && 0
+          right: R.not(isRtl) && 0,
+          outline: accessibility ? undefined : 'none'
         }),
         className: classes.containerArrow,
         tabIndex: 0,

package/lib/ScopeList/ScopeList.js

@@ -117,7 +117,7 @@ var ScopeList = function ScopeList(props) {
       setScrollTop = _useState2[1];
 
   var ref = (0, _react.useRef)();
-  var classes = (0, _styles.useStyles)({ accessibility: accessibility });
+  var classes = (0, _styles.useStyles)();
   var theme = (0, _core.useTheme)();
 
   var _useState3 = (0, _react.useState)(false),

package/lib/ScopeList/styles.js

@@ -33,11 +33,7 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
       margin: 0,
       userSelect: 'none',
       cursor: 'pointer',
-      color: theme.palette.primary.main,
-      outline: function outline(_ref) {
-        var accessibility = _ref.accessibility;
-        return accessibility ? undefined : 'none';
-      }
+      color: theme.palette.primary.main
     },
     listItemHover: {
       '&:hover': {
@@ -132,10 +128,6 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
       color: theme.palette.primary.main,
       height: '100%',
       display: 'flex',
-      outline: function outline(_ref2) {
-        var accessibility = _ref2.accessibility;
-        return accessibility ? undefined : 'none';
-      },
       '&:hover, &:focus': {
         backgroundColor: theme.palette.primary.main,
         color: theme.palette.common.white

package/lib/ShortUrls/ShortUrls.js

@@ -34,6 +34,18 @@ var _useMediaQuery = require('@material-ui/core/useMediaQuery');
 
 var _useMediaQuery2 = _interopRequireDefault(_useMediaQuery);
 
+var _IconButton = require('@material-ui/core/IconButton');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+var _Collapse = require('@material-ui/core/Collapse');
+
+var _Collapse2 = _interopRequireDefault(_Collapse);
+
+var _Close = require('@material-ui/icons/Close');
+
+var _Close2 = _interopRequireDefault(_Close);
+
 var _ = require('../');
 
 var _core = require('@material-ui/core');
@@ -67,12 +79,16 @@ var ShortUrls = function ShortUrls(_ref) {
   var labels = _ref.labels,
       onClick = _ref.onClick,
       isLoading = _ref.isLoading,
-      contentValue = _ref.contentValue;
+      contentValue = _ref.contentValue,
+      _ref$isNotifOpen = _ref.isNotifOpen,
+      isNotifOpen = _ref$isNotifOpen === undefined ? false : _ref$isNotifOpen,
+      setIsNotifOpen = _ref.setIsNotifOpen;
 
   var isNarrow = (0, _useMediaQuery2.default)(function (theme) {
     return theme.breakpoints.down('sm');
   });
   var classes = useStyles();
+
   return _react2.default.createElement(
     _Grid2.default,
     { className: classes.container },
@@ -119,6 +135,29 @@ var ShortUrls = function ShortUrls(_ref) {
           value: contentValue
         })
       )
+    ),
+    _react2.default.createElement(
+      _Collapse2.default,
+      { 'in': isNotifOpen },
+      _react2.default.createElement(
+        _.Alert,
+        {
+          severity: 'error',
+          action: _react2.default.createElement(
+            _IconButton2.default,
+            {
+              'aria-label': 'close',
+              color: 'inherit',
+              size: 'small',
+              onClick: function onClick() {
+                setIsNotifOpen(false);
+              }
+            },
+            _react2.default.createElement(_Close2.default, { fontSize: 'inherit' })
+          )
+        },
+        R.prop('errorMessage', labels)
+      )
     )
   );
 };
@@ -126,6 +165,8 @@ ShortUrls.propTypes = process.env.NODE_ENV !== "production" ? {
   onClick: _propTypes2.default.func,
   isLoading: _propTypes2.default.bool,
   contentValue: _propTypes2.default.string,
+  isNotifOpen: _propTypes2.default.bool,
+  setIsNotifOpen: _propTypes2.default.func,
   labels: _propTypes2.default.shape({
     generateUrl: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
     title: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),

package/lib/ToggleButton/ToggleButton.js

@@ -53,10 +53,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       }
     },
     label: {
-      textTransform: function textTransform(_ref) {
-        var _textTransform = _ref.textTransform;
-        return _textTransform;
-      },
       textAlign: 'left',
       fontSize: '0.9375rem',
       lineHeight: '1.0'
@@ -68,19 +64,19 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   };
 });
 
-var ToggleButton = function ToggleButton(_ref2) {
+var ToggleButton = function ToggleButton(_ref) {
   var _cx;
 
-  var isOpen = _ref2.isOpen,
-      label = _ref2.label,
-      toggle = _ref2.toggle,
-      testId = _ref2.testId,
-      _ref2$tabindex = _ref2.tabindex,
-      tabindex = _ref2$tabindex === undefined ? 0 : _ref2$tabindex,
-      _ref2$textTransform = _ref2.textTransform,
-      textTransform = _ref2$textTransform === undefined ? 'capitalize' : _ref2$textTransform;
+  var isOpen = _ref.isOpen,
+      label = _ref.label,
+      toggle = _ref.toggle,
+      testId = _ref.testId,
+      _ref$tabindex = _ref.tabindex,
+      tabindex = _ref$tabindex === undefined ? 0 : _ref$tabindex,
+      _ref$textTransform = _ref.textTransform,
+      textTransform = _ref$textTransform === undefined ? 'capitalize' : _ref$textTransform;
 
-  var classes = useStyles({ textTransform: textTransform });
+  var classes = useStyles();
   return _react2.default.createElement(
     _Button2.default,
     {
@@ -90,6 +86,7 @@ var ToggleButton = function ToggleButton(_ref2) {
       'data-testid': testId,
       classes: { root: classes.root, label: classes.label },
       className: (0, _classnames2.default)((_cx = {}, _cx[classes.selected] = isOpen, _cx)),
+      style: { textTransform: textTransform },
       fullWidth: true,
       variant: 'text',
       onClick: R.is(Function)(toggle) ? toggle : null

package/lib/VirtualizedTree/Item.js

@@ -139,7 +139,10 @@ var Item = function Item(_ref) {
       onMouseDown: isDisabled || open ? null : eventsListeners.onMouseDown,
       onMouseEnter: isDisabled || open ? null : eventsListeners.onMouseEnter,
       title: isGreyed ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
-      style: { opacity: isDisabled && isGreyed ? '0.5' : '1' },
+      style: {
+        opacity: isDisabled && isGreyed ? '0.5' : '1',
+        outline: accessibility ? undefined : 'none'
+      },
       primary: _react2.default.createElement(
         'div',
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "10.28.0",
+  "version": "10.29.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",