@hipay/hipay-material-ui 2.0.0-beta.56 → 2.0.0-beta.58

package/HiSelectNew/HiSelect.js

@@ -37,8 +37,6 @@ var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
 
 var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
 
-var _reactDom = require("react-dom");
-
 var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
 
 var _HiSelectableList = _interopRequireDefault(require("../HiSelectableList"));
@@ -106,7 +104,10 @@ var styles = function styles(theme) {
     }, theme.typography.b1, {
       display: 'inline-flex',
       width: '100%'
-    })
+    }),
+    separator: {
+      borderTop: "1px solid ".concat(theme.palette.input.bottomLine)
+    }
   };
 };
 /**
@@ -203,7 +204,14 @@ function (_React$PureComponent) {
           }, _react.default.createElement("img", {
             className: classes.labelImg,
             src: item.img,
-            alt: item.label
+            alt: item.label,
+            onError: function onError(e) {
+              if (item.fallbackImage) {
+                e.target.src = "".concat(item.fallbackImage);
+              } else {
+                e.target.style.display = 'none';
+              }
+            }
           }), item.label);
         } else {
           inputValue = item.label;
@@ -214,11 +222,13 @@ function (_React$PureComponent) {
     };
 
     _this.focusOnFirstItem = function () {
-      var overlay = (0, _reactDom.findDOMNode)(_this.overlay);
-      setTimeout(function () {
-        var item = overlay.getElementsByTagName('li')[0];
-        item.focus();
-      }, 1);
+      if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
+        setTimeout(function () {
+          var item = _this.overlay.getElementsByTagName('li')[0];
+
+          item.focus();
+        }, 1);
+      }
     };
 
     _this.getInputElement = function (el) {
@@ -257,15 +267,14 @@ function (_React$PureComponent) {
     };
 
     _this.focusOnSelectedItem = function (selectedValue) {
-      var overlay = (0, _reactDom.findDOMNode)(_this.overlay);
       setTimeout(function () {
         // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
-        var item = overlay.getElementsByTagName('li')[0];
+        var item = _this.overlay.getElementsByTagName('li')[0];
 
         if (selectedValue && typeof selectedValue === 'string') {
-          item = overlay.getElementsByTagName('li')[selectedValue];
+          item = _this.overlay.getElementsByTagName('li')[selectedValue];
         } else if (selectedValue && typeof selectedValue === 'number') {
-          item = overlay.getElementsByTagName('li')[selectedValue - 1];
+          item = _this.overlay.getElementsByTagName('li')[selectedValue - 1];
         }
 
         if (item) {
@@ -303,6 +312,18 @@ function (_React$PureComponent) {
       });
     };
 
+    _this.handleKeyDownInput = function (event) {
+      var key = (0, _keycode.default)(event);
+
+      if (key === 'down' || key === 'up') {
+        _this.handleClick();
+      } else if (key === 'enter' && _this.props.onSubmit) {
+        event.preventDefault();
+
+        _this.props.onSubmit(event);
+      }
+    };
+
     _this.handleKeyDown = function (event) {
       var nextItem;
       var key = (0, _keycode.default)(event);
@@ -317,23 +338,73 @@ function (_React$PureComponent) {
         _this.setState({
           open: false
         });
-      } else if (key === 'space' || key === 'enter' && !_this.props.multiple) {
+      } else if (key === 'space') {
+        // Cancel scroll
         event.preventDefault();
+      }
+
+      if (nextItem) {
+        nextItem.focus();
+      }
+    };
+
+    _this.getItemById = function (id) {
+      var item;
+
+      if (_this.props.hasAll && String(id) === '_all') {
+        return {
+          id: '_all'
+        };
+      }
+
+      for (var i = 0; i < _this.props.options.length; i += 1) {
+        var elem = _this.props.options[i];
+
+        if (String(elem.id) === String(id)) {
+          item = elem;
+          break;
+        }
+
+        if (elem.children) {
+          for (var j = 0; j < elem.children.length; j += 1) {
+            if (String(elem.children[j].id) === String(id)) {
+              item = elem.children[j];
+              break;
+            }
+          }
+        }
+      }
+
+      return item;
+    };
+
+    _this.handleKeyUp = function (event) {
+      var key = (0, _keycode.default)(event);
 
-        var item = _this.props.options.find(function (elem) {
-          return String(elem.id) === event.target.id;
+      if (key === 'esc') {
+        _this.setState({
+          open: false
         });
+      } else if (key === 'space' || key === 'enter' && !_this.props.multiple) {
+        event.preventDefault();
+
+        var item = _this.getItemById(event.target.id);
 
-        _this.handleSelect(null, item);
+        if (item) {
+          // Select for nested select
+          if (_this.props.hiSelectableListProps && _this.props.hiSelectableListProps.onSelect) {
+            _this.props.hiSelectableListProps.onSelect(null, item);
+          } else {
+            _this.handleSelect(null, item);
+          }
+        } else {
+          console.warn("Can not find item #".concat(event.target.id));
+        }
       } else if (key === 'enter' && _this.props.multiple) {
         event.preventDefault();
 
         _this.handleClose();
       }
-
-      if (nextItem) {
-        nextItem.focus();
-      }
     };
 
     _this.handleKeyDownSearch = function (event) {
@@ -345,6 +416,10 @@ function (_React$PureComponent) {
         event.preventDefault();
 
         _this.handleClose();
+      } else if (key === 'tab') {
+        _this.setState({
+          open: false
+        });
       }
     };
 
@@ -444,7 +519,8 @@ function (_React$PureComponent) {
       open: false,
       focused: false,
       searchValue: props.searchValue ? undefined : '',
-      suggestions: props.options
+      suggestions: props.options,
+      openDown: true
     };
     _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleClose = _this.handleClose.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
@@ -525,43 +601,70 @@ function (_React$PureComponent) {
 
       var popperClass = (0, _classnames.default)(classes.popper, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.popperWidth, !this.props.containerWidth), (0, _defineProperty2.default)(_classNames, classes.popperRightAlign, this.props.containerWidth && this.props.align === 'right'), _classNames));
 
-      var content = _react.default.createElement(_ClickAwayListener.default, {
-        onClickAway: this.handleClickAway
-      }, _react.default.createElement(_Grow.default, {
-        in: open,
-        id: "menu-list",
-        style: {
-          transformOrigin: '0 0 0'
+      var searchInput = function searchInput(position) {
+        if (searchable) {
+          return _react.default.createElement(_HiInput.default, (0, _extends2.default)({
+            value: searchValue,
+            autoFocus: true,
+            inputRef: _this2.getInputElement,
+            onKeyDown: _this2.handleKeyDownSearch,
+            onChange: _this2.handleSearch,
+            onReset: _this2.handleSearchReset,
+            placeholder: translations.search,
+            startAdornment: 'search',
+            tabIndex: 0,
+            className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.separator, position === 'top'))
+          }, hiSearchInputProps));
         }
-      }, _react.default.createElement(_Paper.default, {
-        className: classes.paper
-      }, !!searchable && _react.default.createElement(_HiInput.default, (0, _extends2.default)({
-        value: searchValue,
-        autoFocus: true,
-        inputRef: this.getInputElement,
-        onKeyDown: this.handleKeyDownSearch,
-        onChange: this.handleSearch,
-        onReset: this.handleSearchReset,
-        placeholder: translations.search,
-        startAdornment: 'search',
-        tabIndex: 0
-      }, hiSearchInputProps)), startAdornment, _react.default.createElement(_reactCustomScrollbars.default, (0, _extends2.default)({
-        ref: function ref(contentEl) {
-          _this2.optionsContent = contentEl;
-        },
-        autoHeight: true,
-        autoHeightMax: 400 // TODO ?
-
-      }, onScrollReachBottom && {
-        onScroll: this.handleScroll
-      }), _react.default.createElement(_HiSelectableList.default, (0, _extends2.default)({
-        type: type,
-        itemList: itemList,
-        onKeyDown: this.handleKeyDown,
-        onSelect: this.handleSelect,
-        selectedItemIdList: selectedItemIdList,
-        fallbackImage: this.props.fallbackImage
-      }, hiSelectableListProps))))));
+
+        return null;
+      }; // Replace popper onSearch when popper displayed on top of selectButton
+
+
+      if (this.placement && this.placement.indexOf('top') >= 0 && !!searchable) {
+        // +1 for search input
+        var nbItems = itemList.length <= 10 ? itemList.length + 1 : 11;
+        popperStyle.transform = "translate3d(-1px, -".concat(nbItems * 40 + 2, "px, 0px)");
+      } else if (this.placement && this.placement.indexOf('top') < 0 && !!searchable) {
+        popperStyle.transform = 'translate3d(-1px, 40px, 0px)';
+      }
+
+      var content = function content(_ref) {
+        var placement = _ref.placement;
+
+        if (placement !== _this2.placement) {
+          _this2.placement = placement;
+        }
+
+        return _react.default.createElement(_ClickAwayListener.default, {
+          onClickAway: _this2.handleClickAway
+        }, _react.default.createElement(_Grow.default, {
+          in: open,
+          id: "menu-list",
+          style: {
+            transformOrigin: '0 0 0'
+          }
+        }, _react.default.createElement(_Paper.default, {
+          className: classes.paper
+        }, (_this2.placement && _this2.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, _react.default.createElement(_reactCustomScrollbars.default, (0, _extends2.default)({
+          ref: function ref(contentEl) {
+            _this2.optionsContent = contentEl;
+          },
+          autoHeight: true,
+          autoHeightMax: 400 // TODO ?
+
+        }, onScrollReachBottom && {
+          onScroll: _this2.handleScroll
+        }), _react.default.createElement(_HiSelectableList.default, (0, _extends2.default)({
+          type: type,
+          itemList: itemList,
+          onKeyDown: _this2.handleKeyDown,
+          onKeyUp: _this2.handleKeyUp,
+          onSelect: _this2.handleSelect,
+          selectedItemIdList: selectedItemIdList,
+          fallbackImage: _this2.props.fallbackImage
+        }, hiSelectableListProps))), _this2.placement && _this2.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
+      };
 
       return _react.default.createElement("div", {
         className: classes.root,
@@ -580,6 +683,7 @@ function (_React$PureComponent) {
         onClick: this.handleClick,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
+        onKeyDown: this.handleKeyDownInput,
         onSubmit: onSubmit,
         onMouseEnter: this.props.onMouseEnter,
         onMouseLeave: this.props.onMouseLeave,
@@ -592,7 +696,7 @@ function (_React$PureComponent) {
       })), open && staticPosition ? _react.default.createElement("div", {
         style: popperStyle,
         className: popperClass
-      }, content) : _react.default.createElement(_Popper.default, {
+      }, content({})) : _react.default.createElement(_Popper.default, {
         anchorEl: this.inputEl,
         placement: "bottom-start",
         open: open,

package/HiSelectNew/HiSelectInput.js

@@ -172,6 +172,8 @@ function (_React$PureComponent) {
 
       if (_this.props.onKeyDown) {
         _this.props.onKeyDown(event);
+
+        event.preventDefault();
       } else if (key === 'down' || key === 'up') {
         _this.props.onClick();
       } else if (key === 'enter' && _this.props.onSubmit) {
@@ -193,8 +195,12 @@ function (_React$PureComponent) {
     };
 
     _this.handleClick = function (event) {
+      // Do not open select if press on resetIcon
       if ((!_this.resetIcon || !_this.resetIcon.contains(event.target)) && _this.props.onClick) {
-        _this.props.onClick(event);
+        // Do not open select if press enter on button => submit form
+        if (event.type !== 'keydown' || (0, _keycode.default)(event) !== 'enter') {
+          _this.props.onClick(event);
+        }
       }
     };
 
@@ -269,6 +275,7 @@ function (_React$PureComponent) {
       }, value || placeholder), _react.default.createElement(_ArrowDropDown.default, {
         className: iconClass
       })) : _react.default.createElement(_ButtonBase.default, {
+        component: "div",
         id: id,
         className: rootClass,
         onClick: this.handleClick,

package/HiSelectableList/HiSelectableList.js

@@ -33,8 +33,6 @@ var _HiSelectableListItem = _interopRequireDefault(require("./HiSelectableListIt
 
 var _helpers = require("../utils/helpers");
 
-var _keycode = _interopRequireDefault(require("keycode"));
-
 var styles = function styles() {
   return {
     root: {
@@ -73,31 +71,6 @@ function (_React$PureComponent) {
       };
     };
 
-    _this.handleKeyDown = function (event) {
-      var nextItem;
-      var key = (0, _keycode.default)(event);
-
-      if (key === 'down') {
-        event.preventDefault();
-        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'down');
-      } else if (key === 'up') {
-        event.preventDefault();
-        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
-      } else if (key === 'space' || key === 'enter' && !_this.props.multiple) {
-        event.preventDefault();
-
-        var item = _this.props.options.find(function (elem) {
-          return String(elem.id) === event.target.id;
-        });
-
-        _this.handleSelect(null, item);
-      }
-
-      if (nextItem) {
-        nextItem.focus();
-      }
-    };
-
     _this.buildRecursiveListItem = function (item) {
       var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var _this$props = _this.props,
@@ -109,9 +82,9 @@ function (_React$PureComponent) {
           icon = _this$props.icon,
           selectedItemIdList = _this$props.selectedItemIdList,
           sort = _this$props.sort,
-          _this$props$onKeyDown = _this$props.onKeyDown,
-          onKeyDown = _this$props$onKeyDown === void 0 ? _this.handleKeyDown : _this$props$onKeyDown,
-          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort", "onKeyDown"]);
+          onKeyDown = _this$props.onKeyDown,
+          onKeyUp = _this$props.onKeyUp,
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
 
       if (sort && item.children) {
         item.children.sort(_this.compareItem);
@@ -128,6 +101,7 @@ function (_React$PureComponent) {
         level: level,
         onSelect: _this.handleSelect(item),
         onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp,
         selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
 
       }, item)), item.children && item.children.length > 0 && item.children.filter(function (subItem) {

package/HiSelectableList/HiSelectableListItem.js

@@ -116,11 +116,7 @@ var styles = function styles(theme) {
       padding: '8px 0',
       margin: 'auto'
     },
-    listItemContent: (0, _extends2.default)({
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    }, theme.typography.b1, {
+    listItemContent: (0, _extends2.default)({}, theme.typography.b1, {
       fontWeight: 'inherit',
       width: '100%',
       minWidth: '50%',
@@ -135,6 +131,10 @@ var styles = function styles(theme) {
     }),
     listItemContentSelected: {},
     label: {
+      maxWidth: '100%',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
       display: 'inline-block',
       margin: '1px 0',
       paddingLeft: 4
@@ -295,6 +295,7 @@ function (_React$PureComponent) {
           hideCheckbox = _this$props2.hideCheckbox,
           onSelect = _this$props2.onSelect,
           onKeyDown = _this$props2.onKeyDown,
+          onKeyUp = _this$props2.onKeyUp,
           indeterminate = _this$props2.indeterminate,
           indeterminateIcon = _this$props2.indeterminateIcon,
           icon = _this$props2.icon,
@@ -342,7 +343,8 @@ function (_React$PureComponent) {
         onClick: onSelect,
         onMouseEnter: this.setHover(true),
         onMouseLeave: this.setHover(false),
-        onKeyDown: onKeyDown
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp
       }, {
         style: {
           paddingLeft: "".concat(paddingLeft + level * 32, "px")
@@ -361,12 +363,6 @@ function (_React$PureComponent) {
         icon: displayedIcon,
         indeterminate: indeterminate,
         indeterminateIcon: indeterminateIcon
-      }), _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
-        "data-id": id
-      }, type === 'icon' && icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
-        icon: icon,
-        className: classes.icon
       }), type === 'image' && img && _react.default.createElement("img", {
         src: img,
         alt: img,
@@ -378,6 +374,12 @@ function (_React$PureComponent) {
           }
         },
         className: classes.img
+      }), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
+        "data-id": id
+      }, type === 'icon' && icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
+        icon: icon,
+        className: classes.icon
       }), this.buildItemLabel())), _react.default.createElement("div", {
         className: (0, _classnames.default)(classes.infosContent, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.infosWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosWithSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosInlineWithoutSecondary, secondaryInline && !secondaryLabel), _classNames4))
       }, !!secondaryLabel && _react.default.createElement("div", {
@@ -496,6 +498,11 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onKeyDown: _propTypes.default.func,
 
+  /**
+   * Fonction de callback à la sélection de l'élément
+   */
+  onKeyUp: _propTypes.default.func,
+
   /**
    * Fonction de callback à la sélection de l'élément
    */

package/README.md

@@ -13,20 +13,19 @@ Et connaîtres les [best practices](#best-practices)
 
 #### Via docker
 
-Il faut que sur votre poste soit installés
-- [Docker](https://www.docker.com/community-edition) (minimum version 17)
-- [Docker Compose](#https://docs.docker.com/compose/install/) (minimum version 1.13.0)
+Il faut que sur votre poste soit installé
+- [Docker](https://docs.docker.com/install/linux/docker-ce/ubuntu/)
 
 Puis lancez les commandes
 ```sh
-docker-compose build
-docker-compose up -d
+# En mode dev :
+docker-compose -f docker-compose.dev.yml build
+docker-compose -f docker-compose.dev.yml up # -d pour détacher du shell courant
 
-# En cas d'erreurs, vérifiez les logs
-docker-compose logs -f
+# En mode prod :
+docker-compose -f docker-compose.prod.yml build
+docker-compose -f docker-compose.prod.yml up # -d pour détacher du shell courant
 ```
-Le site est dispo à cette URL:
-[http://localhost:3222](http://localhost:3222)
 
 #### En local
 
@@ -227,7 +226,7 @@ npm install -g conventional-changelog-cli
 npm install -g cz-conventional-changelog
 ```
 
-1. Changer la version dans package.json
+1. Changer la version dans packages/hipay-material-ui/package.json
 2. Générer le fichier HI-CHANGELOG.md : ```npm run changelog```
 3. Commiter la release : ```git ci -am "chore(release): VERSION DATE```
 4. Build : ```npm run build```

package/es/HiAlertModal/HiAlertModal.js

@@ -10,18 +10,25 @@ import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import { withStyles } from '../styles';
 import HiButton from '../HiButton';
+import HiIcon from '../HiIcon';
 export const styles = theme => ({
   classContent: {
     fontSize: 14,
-    lineHeight: '24px',
-    color: '#484848'
+    lineHeight: '20px',
+    color: '#484848',
+    position: 'relative'
   },
-  classPaper: {
-    maxWidth: 300
+  classDialogPaper: {
+    minHeight: 280,
+    maxWidth: 280,
+    borderRadius: 2
   },
   classCancelButton: {
     float: 'right'
   },
+  classSubmitButton: {
+    margin: '0'
+  },
   classTitle: {
     fontSize: 20,
     fontFamily: theme.typography.fontFamily,
@@ -29,10 +36,20 @@ export const styles = theme => ({
     lineHeight: '24px'
   },
   classAction: {
-    display: 'inline-block'
+    display: 'inline-block',
+    margin: '0',
+    padding: '0px 24px 24px 24px'
   },
   classDialogRoot: {
     backgroundColor: 'rgba(0, 0, 0, 0.28)'
+  },
+  classBackgroundIcon: {
+    position: 'absolute',
+    top: 'calc(50%)',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    color: theme.palette.background2,
+    flex: '1'
   }
 });
 /**
@@ -71,6 +88,8 @@ class HiAlertModal extends React.PureComponent {
   render() {
     const _this$props = this.props,
           {
+      backgroundIcon,
+      iconSize,
       classes,
       content,
       labelCancelButton,
@@ -78,19 +97,25 @@ class HiAlertModal extends React.PureComponent {
       onCancelClick,
       onSubmitClick,
       open,
+      cancelColor,
       submitColor,
       title
     } = _this$props,
-          props = _objectWithoutProperties(_this$props, ["classes", "content", "labelCancelButton", "labelSubmitButton", "onCancelClick", "onSubmitClick", "open", "submitColor", "title"]);
+          props = _objectWithoutProperties(_this$props, ["backgroundIcon", "iconSize", "classes", "content", "labelCancelButton", "labelSubmitButton", "onCancelClick", "onSubmitClick", "open", "cancelColor", "submitColor", "title"]);
 
     return React.createElement(Dialog, _extends({
       open: open,
       onClose: this.handleOnClose,
       classes: {
-        paper: classes.classPaper,
-        root: classes.classDialogRoot
+        root: classes.classDialogRoot,
+        paper: classes.classDialogPaper
       }
-    }, props), React.createElement(DialogTitle, {
+    }, props), backgroundIcon && React.createElement("div", {
+      className: classes.classBackgroundIcon
+    }, React.createElement(HiIcon, {
+      icon: backgroundIcon,
+      size: iconSize
+    })), React.createElement(DialogTitle, {
       disableTypography: true,
       classes: {
         root: classes.classTitle
@@ -103,21 +128,38 @@ class HiAlertModal extends React.PureComponent {
       classes: {
         root: classes.classAction
       }
-    }, React.createElement(HiButton, {
+    }, labelSubmitButton && React.createElement(HiButton, {
+      classes: {
+        root: classes.classSubmitButton
+      },
       onClick: this.handleClickSubmit,
       color: submitColor
-    }, labelSubmitButton), React.createElement(HiButton, {
+    }, labelSubmitButton), labelCancelButton && React.createElement(HiButton, {
       classes: {
         root: classes.classCancelButton
       },
       onClick: this.handleClickCancel,
-      color: "neutral"
+      color: cancelColor
     }, labelCancelButton)));
   }
 
 }
 
+HiAlertModal.defaultProps = {
+  cancelColor: 'neutral',
+  submitColor: 'primary'
+};
 HiAlertModal.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Icon à mettre en fond
+   */
+  backgroundIcon: PropTypes.string,
+
+  /**
+   * The color of the cancel button. It supports those theme colors that make sense for this component.
+   */
+  cancelColor: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
+
   /**
    * Surcharge les classes du composant
    */
@@ -126,7 +168,7 @@ HiAlertModal.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Texte contenu dans la modal
    */
-  content: PropTypes.string,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
 
   /**
    * Texte sur le bouton d'annulation

package/es/HiColoredLabel/HiColoredLabel.js

@@ -8,7 +8,7 @@ import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
 import { fade } from '../styles/colorManipulator';
 export const styles = theme => ({
-  root: _objectSpread({}, theme.typography.b1, {
+  root: _objectSpread({}, theme.typography.b3, {
     display: 'inline-block',
     alignItems: 'baseline',
     maxWidth: '100%',