@hipay/hipay-material-ui 2.3.1-rc2 → 2.3.1-rc4

package/HiBreadcrumb/HiStepConnector.test.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow } from '../test-utils';
+import HiStepConnector from './HiStepConnector';
+describe('<HiStepConnector />', function () {
+  var shallow;
+  var wrapper;
+  var steps = [{
+    id: 0,
+    status: 'validated',
+    label: 'Informations légales'
+  }, {
+    id: 1,
+    status: 'validated',
+    label: 'Les bénéficiaires effectifs'
+  }, {
+    id: 2,
+    status: 'validated',
+    label: 'Les mandataires'
+  }, {
+    id: 3,
+    status: 'active',
+    label: 'Autres documents'
+  }, {
+    id: 4,
+    status: 'unreviewed',
+    label: 'Mise en place du compte'
+  }];
+  before(function () {
+    shallow = createShallow();
+  });
+  describe('with a steps prop', function () {
+    before(function () {
+      wrapper = shallow(React.createElement(HiStepConnector, {
+        steps: steps
+      }));
+    });
+    it('should render a HiStepConnector component', function () {
+      assert.strictEqual(wrapper.name(), 'HiStepConnector');
+    });
+    it('should render a div', function () {
+      assert.strictEqual(wrapper.dive().name(), 'div');
+    });
+    it('should have its validConnector prop set correctly', function () {
+      assert.strictEqual(wrapper.props().validConnector, false);
+    });
+    it('should have its type prop set correctly', function () {
+      assert.strictEqual(wrapper.props().type, 'back');
+    });
+    it('should have its active prop set correctly', function () {
+      assert.strictEqual(wrapper.props().active, false);
+    });
+  });
+  describe('with a validConnector prop', function () {
+    before(function () {
+      wrapper = shallow(React.createElement(HiStepConnector, {
+        validConnector: true
+      }));
+    });
+    it('should have its validConnector prop set correctly', function () {
+      assert.strictEqual(wrapper.props().validConnector, true);
+    });
+  });
+  describe('with a type prop', function () {
+    before(function () {
+      wrapper = shallow(React.createElement(HiStepConnector, {
+        type: "front-dark"
+      }));
+    });
+    it('should have its type prop set correctly', function () {
+      assert.strictEqual(wrapper.props().type, 'front-dark');
+    });
+  });
+  describe('with an active prop', function () {
+    before(function () {
+      wrapper = shallow(React.createElement(HiStepConnector, {
+        active: true
+      }));
+    });
+    it('should have its type prop set correctly', function () {
+      assert.strictEqual(wrapper.props().active, true);
+    });
+  });
+  describe('with an active prop and a type prop', function () {
+    before(function () {
+      wrapper = shallow(React.createElement(HiStepConnector, {
+        steps: steps,
+        type: "front-dark",
+        active: true
+      }));
+    }); // Pour ce test, on vérifie que la hauteur du connector est correctement calculée.
+    // Elle est fonction du nombre d'étapes, est le polynome permettant de la calculer est le suivant :
+    // height = screenHeight - 58 * (nbSteps - 1), ce qui pour notre cas de test où nbSteps = 5 et la hauteur de l'écran est initialisée à 768 donne 310
+
+    it('should have its length calculated correctly', function () {
+      assert.strictEqual(wrapper.dive().find('span').props().style.height, 310);
+    });
+  });
+  describe('with content attached, in the case of a front-light breadcrumb', function () {
+    before(function () {
+      var content = React.createElement("span", null, "Test");
+      wrapper = shallow(React.createElement(HiStepConnector, {
+        steps: steps,
+        type: "front-light",
+        active: true,
+        content: content
+      }));
+    });
+    it('should render a HiStepContent component with content in it', function () {
+      assert.strictEqual(wrapper.dive().childAt(1).dive().name(), 'HiStepContent');
+    });
+  });
+});

package/HiBreadcrumb/HiStepContent.js

@@ -1,33 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.styles = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
-
-var _styles = require("@material-ui/core/styles");
-
-var styles = function styles() {
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import classNames from 'classnames';
+import Paper from '@material-ui/core/Paper';
+import { withStyles } from '@material-ui/core/styles';
+export var styles = function styles() {
   return {
     root: {
       display: 'flex',
@@ -54,44 +35,42 @@ var styles = function styles() {
   };
 };
 
-exports.styles = styles;
-
 var HiStepContent =
 /*#__PURE__*/
 function (_React$PureComponent) {
-  (0, _inherits2.default)(HiStepContent, _React$PureComponent);
+  _inherits(HiStepContent, _React$PureComponent);
 
   function HiStepContent() {
-    (0, _classCallCheck2.default)(this, HiStepContent);
-    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiStepContent).apply(this, arguments));
+    _classCallCheck(this, HiStepContent);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(HiStepContent).apply(this, arguments));
   }
 
-  (0, _createClass2.default)(HiStepContent, [{
+  _createClass(HiStepContent, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
           classes = _this$props.classes,
           content = _this$props.content,
           isLast = _this$props.isLast;
-      return _react.default.createElement(_Paper.default, {
+      return React.createElement(Paper, {
         square: true,
-        className: (0, _classnames.default)(classes.contentContainer, (0, _defineProperty2.default)({}, classes.lastStep, isLast))
-      }, _react.default.createElement("div", {
+        className: classNames(classes.contentContainer, _defineProperty({}, classes.lastStep, isLast))
+      }, React.createElement("div", {
         className: classes.root
       }, content));
     }
   }]);
+
   return HiStepContent;
-}(_react.default.PureComponent);
+}(React.PureComponent);
 
-(0, _defineProperty2.default)(HiStepContent, "defaultProps", {
-  content: _react.default.createElement("span", null),
+_defineProperty(HiStepContent, "defaultProps", {
+  content: React.createElement("span", null),
   isLast: false
 });
 
-var _default = (0, _styles.withStyles)(styles, {
+export default withStyles(styles, {
   hiComponent: true,
   name: 'HiMuiHiStepContent'
-})(HiStepContent);
-
-exports.default = _default;
+})(HiStepContent);

package/HiBreadcrumb/HiStepContent.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow } from '../test-utils';
+import HiStepContent from './HiStepContent';
+describe('<HiStepContent />', function () {
+  var shallow;
+  var wrapper;
+  before(function () {
+    shallow = createShallow();
+  });
+  describe('with default values', function () {
+    before(function () {
+      wrapper = shallow(React.createElement(HiStepContent, null));
+    });
+    it('should render a HiStepContent component', function () {
+      assert.strictEqual(wrapper.name(), 'HiStepContent');
+    });
+    it('should render a Paper component', function () {
+      assert.strictEqual(wrapper.dive().name(), 'WithStyles(Paper)');
+    });
+  });
+  describe('with a content prop', function () {
+    before(function () {
+      wrapper = shallow(React.createElement(HiStepContent, {
+        content: "Test"
+      }));
+    });
+    it('should have its content prop set correctly', function () {
+      assert.strictEqual(wrapper.props().content, 'Test');
+    });
+  });
+});

package/HiBreadcrumb/HiStepIcon.js

@@ -1,31 +1,13 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.styles = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _styles = require("@material-ui/core/styles");
-
-var styles = function styles(theme) {
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+export var styles = function styles(theme) {
   return {
     circle: {
       borderRadius: '50%',
@@ -103,19 +85,18 @@ var styles = function styles(theme) {
   };
 };
 
-exports.styles = styles;
-
 var HiStepIcon =
 /*#__PURE__*/
 function (_React$PureComponent) {
-  (0, _inherits2.default)(HiStepIcon, _React$PureComponent);
+  _inherits(HiStepIcon, _React$PureComponent);
 
   function HiStepIcon() {
-    (0, _classCallCheck2.default)(this, HiStepIcon);
-    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiStepIcon).apply(this, arguments));
+    _classCallCheck(this, HiStepIcon);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(HiStepIcon).apply(this, arguments));
   }
 
-  (0, _createClass2.default)(HiStepIcon, [{
+  _createClass(HiStepIcon, [{
     key: "render",
     value: function render() {
       var _classNames, _classNames2, _classNames3;
@@ -125,30 +106,29 @@ function (_React$PureComponent) {
           classes = _this$props.classes,
           status = _this$props.status,
           type = _this$props.type;
-      var dotAroundClass = (0, _classnames.default)(classes.dotAround, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.validated, status === 'validated'), (0, _defineProperty2.default)(_classNames, classes.refused, status === 'refused'), (0, _defineProperty2.default)(_classNames, classes.warning, status === 'warning'), (0, _defineProperty2.default)(_classNames, classes.active, status === 'active'), (0, _defineProperty2.default)(_classNames, classes.light, type === 'front-light'), _classNames));
-      var innerDotClass = (0, _classnames.default)(classes.dot, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.activeStep, active), (0, _defineProperty2.default)(_classNames2, classes.dotValidated, status === 'validated'), (0, _defineProperty2.default)(_classNames2, classes.dotRefused, status === 'refused'), (0, _defineProperty2.default)(_classNames2, classes.dotWarning, status === 'warning'), (0, _defineProperty2.default)(_classNames2, classes.dotActive, status === 'active'), (0, _defineProperty2.default)(_classNames2, classes.dotLight, type === 'front-light'), _classNames2));
-      var dotClassName = (0, _classnames.default)(classes.circle, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.refused, status === 'refused'), (0, _defineProperty2.default)(_classNames3, classes.validated, status === 'validated'), (0, _defineProperty2.default)(_classNames3, classes.warning, status === 'warning'), (0, _defineProperty2.default)(_classNames3, classes.active, status === 'active'), (0, _defineProperty2.default)(_classNames3, classes.light, type === 'front-light'), _classNames3));
-      return _react.default.createElement(_react.default.Fragment, null, active && _react.default.createElement("div", {
+      var dotAroundClass = classNames(classes.dotAround, (_classNames = {}, _defineProperty(_classNames, classes.validated, status === 'validated'), _defineProperty(_classNames, classes.refused, status === 'refused'), _defineProperty(_classNames, classes.warning, status === 'warning'), _defineProperty(_classNames, classes.active, status === 'active'), _defineProperty(_classNames, classes.light, type === 'front-light'), _classNames));
+      var innerDotClass = classNames(classes.dot, (_classNames2 = {}, _defineProperty(_classNames2, classes.activeStep, active), _defineProperty(_classNames2, classes.dotValidated, status === 'validated'), _defineProperty(_classNames2, classes.dotRefused, status === 'refused'), _defineProperty(_classNames2, classes.dotWarning, status === 'warning'), _defineProperty(_classNames2, classes.dotActive, status === 'active'), _defineProperty(_classNames2, classes.dotLight, type === 'front-light'), _classNames2));
+      var dotClassName = classNames(classes.circle, (_classNames3 = {}, _defineProperty(_classNames3, classes.refused, status === 'refused'), _defineProperty(_classNames3, classes.validated, status === 'validated'), _defineProperty(_classNames3, classes.warning, status === 'warning'), _defineProperty(_classNames3, classes.active, status === 'active'), _defineProperty(_classNames3, classes.light, type === 'front-light'), _classNames3));
+      return React.createElement(React.Fragment, null, active && React.createElement("div", {
         className: dotAroundClass
-      }, _react.default.createElement("div", {
+      }, React.createElement("div", {
         className: innerDotClass
-      })), !active && _react.default.createElement("div", {
+      })), !active && React.createElement("div", {
         className: dotClassName
       }));
     }
   }]);
+
   return HiStepIcon;
-}(_react.default.PureComponent);
+}(React.PureComponent);
 
-(0, _defineProperty2.default)(HiStepIcon, "defaultProps", {
+_defineProperty(HiStepIcon, "defaultProps", {
   active: false,
   status: 'unreviewed',
   type: 'back'
 });
 
-var _default = (0, _styles.withStyles)(styles, {
+export default withStyles(styles, {
   hiComponent: true,
   name: 'HiMuiHiStepIcon'
-})(HiStepIcon);
-
-exports.default = _default;
+})(HiStepIcon);

package/HiBreadcrumb/HiStepIcon.test.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow, getClasses } from '../test-utils';
+import HiStepIcon from './HiStepIcon';
+describe('<HiStepIcon />', function () {
+  var shallow;
+  var classes;
+  before(function () {
+    shallow = createShallow();
+    classes = getClasses(React.createElement(HiStepIcon, null));
+  });
+  it('should render a HiStep component', function () {
+    var wrapper = shallow(React.createElement(HiStepIcon, null));
+    assert.strictEqual(wrapper.name(), 'HiStepIcon');
+  });
+  it('should initiate with correct default props', function () {
+    var wrapper = shallow(React.createElement(HiStepIcon, null));
+    assert.strictEqual(wrapper.props().active, false);
+    assert.strictEqual(wrapper.props().status, 'unreviewed');
+  });
+  it('should have correct classes applied if active', function () {
+    var wrapper = shallow(React.createElement(HiStepIcon, {
+      active: true
+    }));
+    assert.strictEqual(wrapper.dive().find('div').at(1).hasClass(classes.dotAround), true);
+    assert.strictEqual(wrapper.dive().find('div').at(2).hasClass(classes.dot), true);
+    assert.strictEqual(wrapper.dive().find('div').at(2).hasClass(classes.activeStep), true);
+  });
+  it('should have correct classes applied if active and validated', function () {
+    var wrapper = shallow(React.createElement(HiStepIcon, {
+      active: true,
+      status: "validated"
+    }));
+    assert.strictEqual(wrapper.dive().find('div').at(1).hasClass(classes.dotAround), true);
+    assert.strictEqual(wrapper.dive().find('div').at(1).hasClass(classes.validated), true);
+    assert.strictEqual(wrapper.dive().find('div').at(2).hasClass(classes.dot), true);
+    assert.strictEqual(wrapper.dive().find('div').at(2).hasClass(classes.activeStep), true);
+    assert.strictEqual(wrapper.dive().find('div').at(2).hasClass(classes.dotValidated), true);
+  });
+  it('should have correct classes applied if active and refused', function () {
+    var wrapper = shallow(React.createElement(HiStepIcon, {
+      active: true,
+      status: "refused"
+    }));
+    assert.strictEqual(wrapper.dive().find('div').at(1).hasClass(classes.dotAround), true);
+    assert.strictEqual(wrapper.dive().find('div').at(1).hasClass(classes.refused), true);
+    assert.strictEqual(wrapper.dive().find('div').at(2).hasClass(classes.dot), true);
+    assert.strictEqual(wrapper.dive().find('div').at(2).hasClass(classes.activeStep), true);
+    assert.strictEqual(wrapper.dive().find('div').at(2).hasClass(classes.dotRefused), true);
+  });
+  it('should have correct classes applied if validated', function () {
+    var wrapper = shallow(React.createElement(HiStepIcon, {
+      status: "validated"
+    }));
+    assert.strictEqual(wrapper.dive().find('div').at(1).hasClass(classes.circle), true);
+    assert.strictEqual(wrapper.dive().find('div').at(1).hasClass(classes.validated), true);
+  });
+  it('should have correct classes applied if refused', function () {
+    var wrapper = shallow(React.createElement(HiStepIcon, {
+      status: "refused"
+    }));
+    assert.strictEqual(wrapper.dive().find('div').at(1).hasClass(classes.circle), true);
+    assert.strictEqual(wrapper.dive().find('div').at(1).hasClass(classes.refused), true);
+  });
+});

package/HiBreadcrumb/HiStepLabel.js

@@ -1,41 +1,17 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.styles = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _HiStepIcon = _interopRequireDefault(require("./HiStepIcon"));
-
-var _HiPin = _interopRequireDefault(require("../HiPin"));
-
-var styles = function styles(theme) {
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import HiStepIcon from './HiStepIcon';
+import HiPin from '../HiPin';
+export var styles = function styles(theme) {
   return {
     root: {
       display: 'flex',
@@ -44,7 +20,7 @@ var styles = function styles(theme) {
     hipin: {
       marginLeft: 0
     },
-    label: (0, _objectSpread2.default)({
+    label: _objectSpread({
       display: 'inline-block',
       marginLeft: 4,
       fontWeight: theme.typography.fontWeightRegular,
@@ -108,19 +84,18 @@ var styles = function styles(theme) {
   };
 };
 
-exports.styles = styles;
-
 var HiStepLabel =
 /*#__PURE__*/
 function (_React$PureComponent) {
-  (0, _inherits2.default)(HiStepLabel, _React$PureComponent);
+  _inherits(HiStepLabel, _React$PureComponent);
 
   function HiStepLabel() {
-    (0, _classCallCheck2.default)(this, HiStepLabel);
-    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiStepLabel).apply(this, arguments));
+    _classCallCheck(this, HiStepLabel);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(HiStepLabel).apply(this, arguments));
   }
 
-  (0, _createClass2.default)(HiStepLabel, [{
+  _createClass(HiStepLabel, [{
     key: "render",
     value: function render() {
       var _classNames, _classNames2;
@@ -134,29 +109,31 @@ function (_React$PureComponent) {
           status = _this$props.status,
           type = _this$props.type,
           disableNavigation = _this$props.disableNavigation,
-          other = (0, _objectWithoutProperties2.default)(_this$props, ["active", "children", "classes", "className", "notificationNumber", "status", "type", "disableNavigation"]);
-      return _react.default.createElement("div", (0, _extends2.default)({
-        className: (0, _classnames.default)(classes.root, classNameProp)
-      }, other), _react.default.createElement(_HiStepIcon.default, {
+          other = _objectWithoutProperties(_this$props, ["active", "children", "classes", "className", "notificationNumber", "status", "type", "disableNavigation"]);
+
+      return React.createElement("div", Object.assign({
+        className: classNames(classes.root, classNameProp)
+      }, other), React.createElement(HiStepIcon, {
         active: active,
         status: status,
         type: type
-      }), _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.labelContainer, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.largeLabelContainer, type !== 'back'), (0, _defineProperty2.default)(_classNames, classes.shortLabelContainer, type === 'back'), _classNames))
-      }, _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.label, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.labelHover, disableNavigation === false), (0, _defineProperty2.default)(_classNames2, classes.validated, status === 'validated'), (0, _defineProperty2.default)(_classNames2, classes.refused, status === 'refused'), (0, _defineProperty2.default)(_classNames2, classes.warning, status === 'warning'), (0, _defineProperty2.default)(_classNames2, classes.active, status === 'active'), (0, _defineProperty2.default)(_classNames2, classes.light, type === 'front-light'), (0, _defineProperty2.default)(_classNames2, classes.activeStep, active), (0, _defineProperty2.default)(_classNames2, classes.frontLabel, type !== 'back'), (0, _defineProperty2.default)(_classNames2, classes.shortEllipsis, notificationNumber > 0), (0, _defineProperty2.default)(_classNames2, classes.longEllipsis, notificationNumber === 0 && type === 'back'), _classNames2))
-      }, children), notificationNumber > 0 && _react.default.createElement("div", {
+      }), React.createElement("div", {
+        className: classNames(classes.labelContainer, (_classNames = {}, _defineProperty(_classNames, classes.largeLabelContainer, type !== 'back'), _defineProperty(_classNames, classes.shortLabelContainer, type === 'back'), _classNames))
+      }, React.createElement("div", {
+        className: classNames(classes.label, (_classNames2 = {}, _defineProperty(_classNames2, classes.labelHover, disableNavigation === false), _defineProperty(_classNames2, classes.validated, status === 'validated'), _defineProperty(_classNames2, classes.refused, status === 'refused'), _defineProperty(_classNames2, classes.warning, status === 'warning'), _defineProperty(_classNames2, classes.active, status === 'active'), _defineProperty(_classNames2, classes.light, type === 'front-light'), _defineProperty(_classNames2, classes.activeStep, active), _defineProperty(_classNames2, classes.frontLabel, type !== 'back'), _defineProperty(_classNames2, classes.shortEllipsis, notificationNumber > 0), _defineProperty(_classNames2, classes.longEllipsis, notificationNumber === 0 && type === 'back'), _classNames2))
+      }, children), notificationNumber > 0 && React.createElement("div", {
         className: classes.pin
-      }, _react.default.createElement(_HiPin.default, {
+      }, React.createElement(HiPin, {
         className: classes.hipin,
         color: "primary"
       }, notificationNumber))));
     }
   }]);
+
   return HiStepLabel;
-}(_react.default.PureComponent);
+}(React.PureComponent);
 
-(0, _defineProperty2.default)(HiStepLabel, "defaultProps", {
+_defineProperty(HiStepLabel, "defaultProps", {
   active: false,
   children: '',
   notificationNumber: 0,
@@ -164,10 +141,8 @@ function (_React$PureComponent) {
   type: 'back'
 });
 
-var _default = (0, _styles.withStyles)(styles, {
+export default withStyles(styles, {
   hiComponent: true,
   name: 'HiMuiHiStepLabel',
   withTheme: true
-})(HiStepLabel);
-
-exports.default = _default;
+})(HiStepLabel);

package/HiBreadcrumb/HiStepLabel.test.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow } from '../test-utils';
+import HiStepLabel from './HiStepLabel';
+import HiPin from '../HiPin';
+describe('<HiStepLabel />', function () {
+  var shallow;
+  before(function () {
+    shallow = createShallow();
+  });
+  it('should render a HiStepLabel component', function () {
+    var wrapper = shallow(React.createElement(HiStepLabel, null));
+    assert.strictEqual(wrapper.name(), 'HiStepLabel');
+  });
+  it('should initiate with correct default props', function () {
+    var wrapper = shallow(React.createElement(HiStepLabel, null));
+    assert.strictEqual(wrapper.props().active, false);
+    assert.strictEqual(wrapper.props().status, 'unreviewed');
+  });
+  it('should render a span', function () {
+    var wrapper = shallow(React.createElement(HiStepLabel, null));
+    assert.strictEqual(wrapper.dive().name(), 'span');
+  });
+  it('should render a notification HiPin', function () {
+    var wrapper = shallow(React.createElement(HiStepLabel, {
+      notificationNumber: 2
+    }));
+    assert.strictEqual(wrapper.dive().find(HiPin).children().text(), '2');
+  });
+});