@sis-cc/dotstatsuite-visions 10.4.2 → 10.5.1

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/UserRightForm/UserRightForm.js

@@ -163,18 +163,18 @@ var UserRightForm = function UserRightForm(_ref) {
       { item: true, container: true, xs: 12, md: 12, justifyContent: 'space-between' },
       React.createElement(
         Grid,
-        { item: true, container: true, xs: 12, sm: 12, md: 5, 'flex-direction': 'column' },
+        { item: true, container: true, xs: 12, sm: 12, md: 6, 'flex-direction': 'column' },
         React.createElement(
           Grid,
           { item: true, container: true, xs: 12, alignItems: 'center' },
           React.createElement(
             Grid,
-            { item: true, xs: 12, md: 4, style: { marginTop: '4px' } },
+            { item: true, xs: 12, md: 5, style: { marginTop: '4px' } },
             React.createElement(Mode, { modes: modes, mode: mode, changeMode: onChange, isSmall: true })
           ),
           React.createElement(
             Grid,
-            { item: true, xs: 12, md: 8 },
+            { item: true, xs: 12, md: 7 },
             React.createElement(Input, {
               variant: 'outlined',
               name: 'User',
@@ -194,7 +194,7 @@ var UserRightForm = function UserRightForm(_ref) {
           { item: true, container: true, xs: 12, alignItems: 'center' },
           React.createElement(
             Grid,
-            { item: true, xs: 12, md: 4 },
+            { item: true, xs: 12, md: 5 },
             React.createElement(
               Typography,
               { variant: 'h6', className: classes.contentLabel, style: { paddingTop: 8 } },
@@ -203,7 +203,7 @@ var UserRightForm = function UserRightForm(_ref) {
           ),
           React.createElement(
             Grid,
-            { item: true, xs: 12, md: 8 },
+            { item: true, xs: 12, md: 7 },
             React.createElement(Select, {
               value: R.defaultTo('*', dataspaceValue),
               items: dataSpaces,
@@ -220,7 +220,7 @@ var UserRightForm = function UserRightForm(_ref) {
           { item: true, container: true, xs: 12, alignItems: 'center' },
           React.createElement(
             Grid,
-            { item: true, xs: 12, md: 4 },
+            { item: true, xs: 12, md: 5 },
             React.createElement(
               Typography,
               { variant: 'h6', className: classes.contentLabel, style: { paddingTop: 8 } },
@@ -229,7 +229,7 @@ var UserRightForm = function UserRightForm(_ref) {
           ),
           React.createElement(
             Grid,
-            { item: true, xs: 12, md: 8 },
+            { item: true, xs: 12, md: 7 },
             React.createElement(Select, {
               value: R.defaultTo('*', artefactTypeValue),
               items: artefactTypes,

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/UserRightForm/UserRightForm.js

@@ -194,18 +194,18 @@ var UserRightForm = function UserRightForm(_ref) {
       { item: true, container: true, xs: 12, md: 12, justifyContent: 'space-between' },
       _react2.default.createElement(
         _core.Grid,
-        { item: true, container: true, xs: 12, sm: 12, md: 5, 'flex-direction': 'column' },
+        { item: true, container: true, xs: 12, sm: 12, md: 6, 'flex-direction': 'column' },
         _react2.default.createElement(
           _core.Grid,
           { item: true, container: true, xs: 12, alignItems: 'center' },
           _react2.default.createElement(
             _core.Grid,
-            { item: true, xs: 12, md: 4, style: { marginTop: '4px' } },
+            { item: true, xs: 12, md: 5, style: { marginTop: '4px' } },
             _react2.default.createElement(_.Mode, { modes: modes, mode: mode, changeMode: onChange, isSmall: true })
           ),
           _react2.default.createElement(
             _core.Grid,
-            { item: true, xs: 12, md: 8 },
+            { item: true, xs: 12, md: 7 },
             _react2.default.createElement(_Input2.default, {
               variant: 'outlined',
               name: 'User',
@@ -225,7 +225,7 @@ var UserRightForm = function UserRightForm(_ref) {
           { item: true, container: true, xs: 12, alignItems: 'center' },
           _react2.default.createElement(
             _core.Grid,
-            { item: true, xs: 12, md: 4 },
+            { item: true, xs: 12, md: 5 },
             _react2.default.createElement(
               _core.Typography,
               { variant: 'h6', className: classes.contentLabel, style: { paddingTop: 8 } },
@@ -234,7 +234,7 @@ var UserRightForm = function UserRightForm(_ref) {
           ),
           _react2.default.createElement(
             _core.Grid,
-            { item: true, xs: 12, md: 8 },
+            { item: true, xs: 12, md: 7 },
             _react2.default.createElement(_Select2.default, {
               value: R.defaultTo('*', dataspaceValue),
               items: dataSpaces,
@@ -251,7 +251,7 @@ var UserRightForm = function UserRightForm(_ref) {
           { item: true, container: true, xs: 12, alignItems: 'center' },
           _react2.default.createElement(
             _core.Grid,
-            { item: true, xs: 12, md: 4 },
+            { item: true, xs: 12, md: 5 },
             _react2.default.createElement(
               _core.Typography,
               { variant: 'h6', className: classes.contentLabel, style: { paddingTop: 8 } },
@@ -260,7 +260,7 @@ var UserRightForm = function UserRightForm(_ref) {
           ),
           _react2.default.createElement(
             _core.Grid,
-            { item: true, xs: 12, md: 8 },
+            { item: true, xs: 12, md: 7 },
             _react2.default.createElement(_Select2.default, {
               value: R.defaultTo('*', artefactTypeValue),
               items: artefactTypes,

package/package.json

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