@sis-cc/dotstatsuite-visions 10.4.2 → 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/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/package.json

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