@sis-cc/dotstatsuite-visions 7.12.1 → 7.12.2

package/es/DataHeader/DataHeader.js

@@ -61,9 +61,12 @@ var useStyles = makeStyles(function (theme) {
       }
     }),
     disclaimer: _extends({
-      marginLeft: theme.spacing(0.5),
-      width: 'unset',
-      fontSize: 'inherit'
+      padding: theme.spacing(0.5),
+      fontSize: function fontSize(_ref4) {
+        var isWidthLess = _ref4.isWidthLess;
+        return R.cond([[R.always(isWidthLess(T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(T4_BREAKPOINTS.sm)), R.always(13)]])(14);
+      },
+      lineHeight: 1.5
     }, R.pathOr({}, ['mixins', 'dataHeader', 'disclaimer'], theme)),
     infoIcon: {
       height: '0.8em',
@@ -104,19 +107,19 @@ var useStyles = makeStyles(function (theme) {
   };
 });
 
-var DataHeader = function DataHeader(_ref4) {
+var DataHeader = function DataHeader(_ref5) {
   var _cx;
 
-  var children = _ref4.children,
-      title = _ref4.title,
-      _ref4$subtitle = _ref4.subtitle,
-      subtitle = _ref4$subtitle === undefined ? [] : _ref4$subtitle,
-      uprs = _ref4.uprs,
-      disclaimer = _ref4.disclaimer,
-      sideProps = _ref4.sideProps,
-      SideIcon = _ref4.SideIcon,
-      _ref4$isSticky = _ref4.isSticky,
-      isSticky = _ref4$isSticky === undefined ? false : _ref4$isSticky;
+  var children = _ref5.children,
+      title = _ref5.title,
+      _ref5$subtitle = _ref5.subtitle,
+      subtitle = _ref5$subtitle === undefined ? [] : _ref5$subtitle,
+      uprs = _ref5.uprs,
+      disclaimer = _ref5.disclaimer,
+      sideProps = _ref5.sideProps,
+      SideIcon = _ref5.SideIcon,
+      _ref5$isSticky = _ref5.isSticky,
+      isSticky = _ref5$isSticky === undefined ? false : _ref5$isSticky;
 
   var target = React.useRef(null);
 
@@ -151,27 +154,7 @@ var DataHeader = function DataHeader(_ref4) {
           { className: classes.sideIconContainer },
           React.createElement(SideIcon, { sideProps: sideProps })
         ),
-        React.createElement(Flags, { classes: classes, content: R.propOr([], 'flags', title) }),
-        disclaimer && React.createElement(
-          Tooltip,
-          {
-            className: cx(classes.title, classes.disclaimer),
-            title: disclaimer,
-            tabIndex: 0,
-            'data-testid': 'data-header-disclaimer',
-            variant: 'warning',
-            'aria-hidden': false,
-            placement: 'bottom',
-            PopperProps: {
-              modifiers: {
-                flip: {
-                  behavior: ['bottom', 'top', 'left', 'right']
-                }
-              }
-            }
-          },
-          React.createElement(WarningIcon, { pathBackgroundColor: warningColor, pathColor: warningTextColor })
-        )
+        React.createElement(Flags, { classes: classes, content: R.propOr([], 'flags', title) })
       ),
       isWidthUp(T4_BREAKPOINTS.xs3) && subtitle && R.not(R.isEmpty(subtitle)) && React.createElement(
         'div',
@@ -200,6 +183,11 @@ var DataHeader = function DataHeader(_ref4) {
         { className: classes.subtitle },
         React.createElement(Title, { header: uprs.header }),
         uprs.label
+      ),
+      isWidthUp(T4_BREAKPOINTS.xs3) && disclaimer && React.createElement(
+        Typography,
+        { 'data-testid': 'data-header-disclaimer', className: classes.disclaimer },
+        disclaimer
       )
     ),
     React.createElement(

package/es/theme.js

@@ -255,7 +255,7 @@ export var sisccTheme = function sisccTheme(_ref) {
           color: '#494444'
         },
         disclaimer: {
-          color: outerPalette.highlight1 || innerPalette.highlight1
+          backgroundColor: outerPalette.highlight1 || innerPalette.highlight1
         },
         subtitle: {
           color: '#494444',

package/lib/DataHeader/DataHeader.js

@@ -101,9 +101,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       }
     }),
     disclaimer: _extends({
-      marginLeft: theme.spacing(0.5),
-      width: 'unset',
-      fontSize: 'inherit'
+      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: {
       height: '0.8em',
@@ -144,19 +147,19 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   };
 });
 
-var DataHeader = function DataHeader(_ref4) {
+var DataHeader = function DataHeader(_ref5) {
   var _cx;
 
-  var children = _ref4.children,
-      title = _ref4.title,
-      _ref4$subtitle = _ref4.subtitle,
-      subtitle = _ref4$subtitle === undefined ? [] : _ref4$subtitle,
-      uprs = _ref4.uprs,
-      disclaimer = _ref4.disclaimer,
-      sideProps = _ref4.sideProps,
-      SideIcon = _ref4.SideIcon,
-      _ref4$isSticky = _ref4.isSticky,
-      isSticky = _ref4$isSticky === undefined ? false : _ref4$isSticky;
+  var children = _ref5.children,
+      title = _ref5.title,
+      _ref5$subtitle = _ref5.subtitle,
+      subtitle = _ref5$subtitle === undefined ? [] : _ref5$subtitle,
+      uprs = _ref5.uprs,
+      disclaimer = _ref5.disclaimer,
+      sideProps = _ref5.sideProps,
+      SideIcon = _ref5.SideIcon,
+      _ref5$isSticky = _ref5.isSticky,
+      isSticky = _ref5$isSticky === undefined ? false : _ref5$isSticky;
 
   var target = _react2.default.useRef(null);
 
@@ -191,27 +194,7 @@ var DataHeader = function DataHeader(_ref4) {
           { className: classes.sideIconContainer },
           _react2.default.createElement(SideIcon, { sideProps: sideProps })
         ),
-        _react2.default.createElement(_Flags2.default, { classes: classes, content: R.propOr([], 'flags', title) }),
-        disclaimer && _react2.default.createElement(
-          _.Tooltip,
-          {
-            className: (0, _classnames2.default)(classes.title, classes.disclaimer),
-            title: disclaimer,
-            tabIndex: 0,
-            'data-testid': 'data-header-disclaimer',
-            variant: 'warning',
-            'aria-hidden': false,
-            placement: 'bottom',
-            PopperProps: {
-              modifiers: {
-                flip: {
-                  behavior: ['bottom', 'top', 'left', 'right']
-                }
-              }
-            }
-          },
-          _react2.default.createElement(_.Warning, { pathBackgroundColor: warningColor, pathColor: warningTextColor })
-        )
+        _react2.default.createElement(_Flags2.default, { classes: classes, content: R.propOr([], 'flags', title) })
       ),
       isWidthUp(_theme.T4_BREAKPOINTS.xs3) && subtitle && R.not(R.isEmpty(subtitle)) && _react2.default.createElement(
         'div',
@@ -240,6 +223,11 @@ var DataHeader = function DataHeader(_ref4) {
         { className: classes.subtitle },
         _react2.default.createElement(_Title2.default, { header: uprs.header }),
         uprs.label
+      ),
+      isWidthUp(_theme.T4_BREAKPOINTS.xs3) && disclaimer && _react2.default.createElement(
+        _Typography2.default,
+        { 'data-testid': 'data-header-disclaimer', className: classes.disclaimer },
+        disclaimer
       )
     ),
     _react2.default.createElement(

package/lib/theme.js

@@ -258,7 +258,7 @@ var sisccTheme = exports.sisccTheme = function sisccTheme(_ref) {
           color: '#494444'
         },
         disclaimer: {
-          color: outerPalette.highlight1 || innerPalette.highlight1
+          backgroundColor: outerPalette.highlight1 || innerPalette.highlight1
         },
         subtitle: {
           color: '#494444',

package/package.json

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