@sis-cc/dotstatsuite-visions 10.4.1 → 10.5.0

package/es/ExpansionPanel/ExpansionPanel.js

@@ -8,8 +8,10 @@ import AccordionDetails from '@material-ui/core/AccordionDetails';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import HelpIcon from '@material-ui/icons/EmojiObjects';
 import { useStyles } from './styles';
 import { withBlank } from '../utils';
+import Tooltip from '../Tooltip';
 
 var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
   var _cx, _cx2;
@@ -32,7 +34,11 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
       pinnedLabel = _ref.pinnedLabel,
       moreFilters = _ref.moreFilters,
       _ref$isNarrow = _ref.isNarrow,
-      isNarrow = _ref$isNarrow === undefined ? false : _ref$isNarrow;
+      isNarrow = _ref$isNarrow === undefined ? false : _ref$isNarrow,
+      _ref$isPopper = _ref.isPopper,
+      isPopper = _ref$isPopper === undefined ? false : _ref$isPopper,
+      _ref$popperLabels = _ref.popperLabels,
+      popperLabels = _ref$popperLabels === undefined ? {} : _ref$popperLabels;
 
   var classes = useStyles();
 
@@ -84,6 +90,18 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
           'div',
           { className: classes.pinnedIcon },
           '\u2022'
+        ),
+        isPopper && !R.isEmpty(R.propOr('', 'title', popperLabels)) && React.createElement(
+          Tooltip,
+          {
+            variant: 'light',
+            tabIndex: 0,
+            'aria-label': R.propOr('', 'ariaLabel', popperLabels),
+            'aria-hidden': false,
+            placement: 'bottom-start',
+            title: R.propOr('', 'title', popperLabels)
+          },
+          React.createElement(HelpIcon, { fontSize: 'small' })
         )
       ),
       R.isNil(tag) ? null : tag
@@ -115,7 +133,12 @@ CustomExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   fullWidth: PropTypes.bool,
   isPinned: PropTypes.bool,
   moreFilters: PropTypes.bool,
-  isNarrow: PropTypes.bool
+  isNarrow: PropTypes.bool,
+  isPopper: PropTypes.bool,
+  popperLabels: PropTypes.shape({
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+  })
 } : {};
 
 export default withBlank(function (_ref2) {

package/es/ExpansionPanel/index.js

@@ -1,52 +1,58 @@
-/**
- * ExpansionPanel hide or show children
- *
- * @memberOf VISIONS
- * @name ExpansionPanel
- * @tag component
- * @api public
- * @props
- * ExpansionPanel.propTypes = {
- *   testId: PropTypes.string,
- *   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- *   topElementComponent: PropTypes.element,
- *   onChangeActivePanel: PropTypes.func,
- *   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *   tag: PropTypes.element,
- *   overflow: PropTypes.bool,
- *   isOpen: PropTypes.bool,
- *   isBlank: PropTypes.bool,
- *   maxHeight: PropTypes.bool,
- *   children: PropTypes.oneOfType([
- *     PropTypes.arrayOf(PropTypes.node),
- *     PropTypes.node
- *   ]),
- *   fullWidth: PropTypes.bool,
- *   isPinned: PropTypes.bool,
- *   moreFilters: PropTypes.bool,
- * };
- * @theme
- * {
- *   palette: {
- *     primary: {
- *       main: // icon color open colapse/close colapse. global override: outerPalette.primaryMain
- *     },
- *     grey: {
- *       700: // divider color, pinned icon, label
- *     },
- *   },
- *   mixins: {
- *     expansionPanel: {
- *       title: {
- *         // color, font
- *       }
- *     }
- *   }
- * }
- * @testId
- * @demoReady
- * root: [testId]
- * panel: [testId]_panel
+/**
+ * ExpansionPanel hide or show children
+ *
+ * @memberOf VISIONS
+ * @name ExpansionPanel
+ * @tag component
+ * @api public
+ * @props
+ * ExpansionPanel.propTypes = {
+ *   testId: PropTypes.string,
+ *   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ *   topElementComponent: PropTypes.element,
+ *   onChangeActivePanel: PropTypes.func,
+ *   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *   tag: PropTypes.element,
+ *   overflow: PropTypes.bool,
+ *   isOpen: PropTypes.bool,
+ *   isBlank: PropTypes.bool,
+ *   maxHeight: PropTypes.bool,
+ *   children: PropTypes.oneOfType([
+ *     PropTypes.arrayOf(PropTypes.node),
+ *     PropTypes.node
+ *   ]),
+ *   fullWidth: PropTypes.bool,
+ *   isPinned: PropTypes.bool,
+ *   moreFilters: PropTypes.bool,
+ *   isNarrow: PropTypes.bool,
+ *   isPopper: PropTypes.bool,
+ *   popperLabels: PropTypes.shape({
+ *    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *    ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+ * }),
+ * };
+ * @theme
+ * {
+ *   palette: {
+ *     primary: {
+ *       main: // icon color open colapse/close colapse. global override: outerPalette.primaryMain
+ *     },
+ *     grey: {
+ *       700: // divider color, pinned icon, label
+ *     },
+ *   },
+ *   mixins: {
+ *     expansionPanel: {
+ *       title: {
+ *         // color, font
+ *       }
+ *     }
+ *   }
+ * }
+ * @testId
+ * @demoReady
+ * root: [testId]
+ * panel: [testId]_panel
  */
 
 export { default } from './ExpansionPanel';

package/es/Mode/Mode.js

@@ -48,6 +48,8 @@ var Mode = function Mode(_ref2) {
       mode = _ref2.mode,
       _ref2$modes = _ref2.modes,
       modes = _ref2$modes === undefined ? [] : _ref2$modes,
+      _ref2$isSmall = _ref2.isSmall,
+      isSmall = _ref2$isSmall === undefined ? false : _ref2$isSmall,
       children = _ref2.children;
 
   var classes = useStyles();
@@ -69,7 +71,7 @@ var Mode = function Mode(_ref2) {
         classes: { label: classes.label },
         key: value,
         checked: mode === value,
-        control: React.createElement(Radio, { variant: 'outlined', color: 'primary' }),
+        control: React.createElement(Radio, { variant: 'outlined', color: 'primary', size: isSmall ? 'small' : 'medium' }),
         label: React.createElement(
           'span',
           null,
@@ -82,7 +84,8 @@ var Mode = function Mode(_ref2) {
         ),
         labelPlacement: placement,
         value: value,
-        disabled: disabled || false
+        disabled: disabled || false,
+        style: { height: isSmall ? '25px' : null }
       });
     })(modes)
   );
@@ -98,7 +101,8 @@ Mode.propTypes = process.env.NODE_ENV !== "production" ? {
     value: PropTypes.string,
     popperLabel: PropTypes.string,
     disabled: PropTypes.bool
-  }))
+  })),
+  isSmall: PropTypes.bool
 } : {};
 
 export default Mode;

package/es/Mode/index.js

@@ -15,7 +15,7 @@
  *    value: PropTypes.string,
  *    popperLabel: PropTypes.string,
  *  }),
- * ,
+ * isSmall: PropTypes.bool,
  * }
  * @theme
  * // no custom theme there

package/es/UserRightForm/UserRightForm.js

@@ -169,8 +169,8 @@ var UserRightForm = function UserRightForm(_ref) {
           { item: true, container: true, xs: 12, alignItems: 'center' },
           React.createElement(
             Grid,
-            { item: true, xs: 12, md: 4 },
-            React.createElement(Mode, { modes: modes, mode: mode, changeMode: onChange })
+            { item: true, xs: 12, md: 4, style: { marginTop: '4px' } },
+            React.createElement(Mode, { modes: modes, mode: mode, changeMode: onChange, isSmall: true })
           ),
           React.createElement(
             Grid,

package/lib/ExpansionPanel/ExpansionPanel.js

@@ -42,10 +42,18 @@ var _ExpandMore = require('@material-ui/icons/ExpandMore');
 
 var _ExpandMore2 = _interopRequireDefault(_ExpandMore);
 
+var _EmojiObjects = require('@material-ui/icons/EmojiObjects');
+
+var _EmojiObjects2 = _interopRequireDefault(_EmojiObjects);
+
 var _styles = require('./styles');
 
 var _utils = require('../utils');
 
+var _Tooltip = require('../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -71,7 +79,11 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
       pinnedLabel = _ref.pinnedLabel,
       moreFilters = _ref.moreFilters,
       _ref$isNarrow = _ref.isNarrow,
-      isNarrow = _ref$isNarrow === undefined ? false : _ref$isNarrow;
+      isNarrow = _ref$isNarrow === undefined ? false : _ref$isNarrow,
+      _ref$isPopper = _ref.isPopper,
+      isPopper = _ref$isPopper === undefined ? false : _ref$isPopper,
+      _ref$popperLabels = _ref.popperLabels,
+      popperLabels = _ref$popperLabels === undefined ? {} : _ref$popperLabels;
 
   var classes = (0, _styles.useStyles)();
 
@@ -123,6 +135,18 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
           'div',
           { className: classes.pinnedIcon },
           '\u2022'
+        ),
+        isPopper && !R.isEmpty(R.propOr('', 'title', popperLabels)) && _react2.default.createElement(
+          _Tooltip2.default,
+          {
+            variant: 'light',
+            tabIndex: 0,
+            'aria-label': R.propOr('', 'ariaLabel', popperLabels),
+            'aria-hidden': false,
+            placement: 'bottom-start',
+            title: R.propOr('', 'title', popperLabels)
+          },
+          _react2.default.createElement(_EmojiObjects2.default, { fontSize: 'small' })
         )
       ),
       R.isNil(tag) ? null : tag
@@ -154,7 +178,12 @@ CustomExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   fullWidth: _propTypes2.default.bool,
   isPinned: _propTypes2.default.bool,
   moreFilters: _propTypes2.default.bool,
-  isNarrow: _propTypes2.default.bool
+  isNarrow: _propTypes2.default.bool,
+  isPopper: _propTypes2.default.bool,
+  popperLabels: _propTypes2.default.shape({
+    title: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+    ariaLabel: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
+  })
 } : {};
 
 exports.default = (0, _utils.withBlank)(function (_ref2) {

package/lib/Mode/Mode.js

@@ -75,6 +75,8 @@ var Mode = function Mode(_ref2) {
       mode = _ref2.mode,
       _ref2$modes = _ref2.modes,
       modes = _ref2$modes === undefined ? [] : _ref2$modes,
+      _ref2$isSmall = _ref2.isSmall,
+      isSmall = _ref2$isSmall === undefined ? false : _ref2$isSmall,
       children = _ref2.children;
 
   var classes = useStyles();
@@ -96,7 +98,7 @@ var Mode = function Mode(_ref2) {
         classes: { label: classes.label },
         key: value,
         checked: mode === value,
-        control: _react2.default.createElement(_Radio2.default, { variant: 'outlined', color: 'primary' }),
+        control: _react2.default.createElement(_Radio2.default, { variant: 'outlined', color: 'primary', size: isSmall ? 'small' : 'medium' }),
         label: _react2.default.createElement(
           'span',
           null,
@@ -109,7 +111,8 @@ var Mode = function Mode(_ref2) {
         ),
         labelPlacement: placement,
         value: value,
-        disabled: disabled || false
+        disabled: disabled || false,
+        style: { height: isSmall ? '25px' : null }
       });
     })(modes)
   );
@@ -125,7 +128,8 @@ Mode.propTypes = process.env.NODE_ENV !== "production" ? {
     value: _propTypes2.default.string,
     popperLabel: _propTypes2.default.string,
     disabled: _propTypes2.default.bool
-  }))
+  })),
+  isSmall: _propTypes2.default.bool
 } : {};
 
 exports.default = Mode;

package/lib/UserRightForm/UserRightForm.js

@@ -200,8 +200,8 @@ var UserRightForm = function UserRightForm(_ref) {
           { item: true, container: true, xs: 12, alignItems: 'center' },
           _react2.default.createElement(
             _core.Grid,
-            { item: true, xs: 12, md: 4 },
-            _react2.default.createElement(_.Mode, { modes: modes, mode: mode, changeMode: onChange })
+            { item: true, xs: 12, md: 4, style: { marginTop: '4px' } },
+            _react2.default.createElement(_.Mode, { modes: modes, mode: mode, changeMode: onChange, isSmall: true })
           ),
           _react2.default.createElement(
             _core.Grid,

package/package.json

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