@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.35

package/HiColoredLabel/HiColoredLabel.js

@@ -1,117 +1,196 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-exports.styles = undefined;
-
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _withStyles = require('../styles/withStyles');
-
-var _withStyles2 = _interopRequireDefault(_withStyles);
-
-var _colorManipulator = require('../styles/colorManipulator');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var styles = exports.styles = function styles(theme) {
-    return {
-        root: {
-            display: 'inline-flex',
-            alignItems: 'baseline',
-            maxWidth: '100%',
-            padding: '2px 4px',
-            borderRadius: 2,
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            whiteSpace: 'nowrap'
-        },
-        beta: {
-            fontWeight: 600,
-            fontSize: 12,
-            fontFamily: theme.typography.fontFamily,
-            paddingLeft: 9,
-            paddingRight: 9,
-            paddingTop: 3,
-            paddingBottom: 2
-        }
-    };
+exports.default = exports.styles = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var _helpers = require("../utils/helpers");
+
+var _colorManipulator = require("../styles/colorManipulator");
+
+var styles = function styles(theme) {
+  return {
+    root: (0, _extends2.default)({}, theme.typography.b3, {
+      display: 'inline-block',
+      alignItems: 'baseline',
+      maxWidth: '100%',
+      padding: '2px 8px',
+      borderRadius: 2,
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap'
+    }),
+    color: {
+      fontWeight: 400
+    },
+
+    /* Styles applied to the root element if `color="primary"`. */
+    colorPrimary: {
+      color: theme.palette.primary.main,
+      backgroundColor: (0, _colorManipulator.fade)(theme.palette.primary.main, 0.08)
+    },
+
+    /* Styles applied to the root element if `color="secondary"`. */
+    colorSecondary: {
+      color: theme.palette.secondary.main,
+      backgroundColor: (0, _colorManipulator.fade)(theme.palette.secondary.main, 0.08)
+    },
+
+    /* Styles applied to the root element if `color="positive"`. */
+    colorPositive: {
+      color: theme.palette.positive.main,
+      backgroundColor: (0, _colorManipulator.fade)(theme.palette.positive.main, 0.08)
+    },
+
+    /* Styles applied to the root element if `color="negative"`. */
+    colorNegative: {
+      color: theme.palette.negative.main,
+      backgroundColor: (0, _colorManipulator.fade)(theme.palette.negative.main, 0.08)
+    },
+
+    /* Styles applied to the root element if `color="middle"`. */
+    colorMiddle: {
+      color: theme.palette.middle.main,
+      backgroundColor: (0, _colorManipulator.fade)(theme.palette.middle.main, 0.08)
+    },
+
+    /* Styles applied to the root element if `color="neutral"`. */
+    colorNeutral: {
+      color: theme.palette.neutral.main,
+      backgroundColor: (0, _colorManipulator.fade)(theme.palette.neutral.main, 0.08)
+    },
+    activeColor: {
+      fontWeight: 500
+    },
+
+    /* Styles applied to the root element if `color="primary"`. */
+    activeColorPrimary: {
+      color: theme.palette.primary.contrastText,
+      backgroundColor: theme.palette.primary.main
+    },
+
+    /* Styles applied to the root element if `color="secondary"`. */
+    activeColorSecondary: {
+      color: theme.palette.secondary.contrastText,
+      backgroundColor: theme.palette.secondary.main
+    },
+
+    /* Styles applied to the root element if `color="positive"`. */
+    activeColorPositive: {
+      color: theme.palette.positive.contrastText,
+      backgroundColor: theme.palette.positive.main
+    },
+
+    /* Styles applied to the root element if `color="negative"`. */
+    activeColorNegative: {
+      color: theme.palette.negative.contrastText,
+      backgroundColor: theme.palette.negative.main
+    },
+
+    /* Styles applied to the root element if `color="middle"`. */
+    activeColorMiddle: {
+      color: theme.palette.middle.contrastText,
+      backgroundColor: theme.palette.middle.main
+    },
+
+    /* Styles applied to the root element if `color="neutral"`. */
+    activeColorNeutral: {
+      color: theme.palette.neutral.contrastText,
+      backgroundColor: theme.palette.neutral.main
+    }
+  };
 };
-
 /**
  * HiColoredLabel
  *
  * Label with background color & text color
  */
+
+
+exports.styles = styles;
+
 function HiColoredLabel(props) {
-    var classes = props.classes,
-        label = props.label,
-        color = props.color,
-        active = props.active,
-        beta = props.beta;
-
-    var fontWeight = 400;
-    if (beta) {
-        fontWeight = 600;
-    } else if (active) {
-        fontWeight = 500;
-    }
-    return _react2.default.createElement(
-        'div',
-        {
-            className: (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes.beta, beta)),
-            style: {
-                backgroundColor: active ? color : (0, _colorManipulator.fade)(color, 0.08),
-                color: active ? (0, _colorManipulator.getContrastedTextColor)(color, '#4C4C4C', '#FFF') : color,
-                fontWeight: fontWeight
-            }
-        },
-        label
-    );
+  var _classNames;
+
+  var classes = props.classes,
+      className = props.className,
+      label = props.label,
+      color = props.color,
+      active = props.active,
+      fontWeight = props.fontWeight,
+      theme = props.theme,
+      other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "label", "color", "active", "fontWeight", "theme"]);
+  var isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
+  var isHexColor = !isHiColor && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
+  return _react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.color, !active), (0, _defineProperty2.default)(_classNames, classes.activeColor, active), (0, _defineProperty2.default)(_classNames, classes["activeColor".concat((0, _helpers.capitalize)(color))], active && isHiColor), (0, _defineProperty2.default)(_classNames, classes["color".concat((0, _helpers.capitalize)(color))], !active && isHiColor), _classNames), className),
+    style: (0, _extends2.default)({}, isHexColor && {
+      backgroundColor: active ? color : (0, _colorManipulator.fade)(color, 0.08),
+      color: active ? theme.palette.getContrastText(color) : color
+    }, fontWeight && {
+      fontWeight: fontWeight
+    })
+  }, other), label);
 }
 
 HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Applique le style du label actif
-     * Background de la couleur pur et label blanc
-     */
-    active: _propTypes2.default.bool,
-    /**
-     * Applique le style du label "BETA" dans la topBar
-     */
-    beta: _propTypes2.default.bool,
-    /**
-     * Surcharge les classes du composant
-     */
-    classes: _propTypes2.default.object,
-    /**
-     * Couleur du text & du background
-     */
-    color: _propTypes2.default.string.isRequired,
-    /**
-     * Label à afficher
-     */
-    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.node]).isRequired
+  /**
+   * Applique le style du label actif
+   * Background de la couleur pur et label blanc
+   */
+  active: _propTypes.default.bool,
+
+  /**
+   * Surcharge les classes du composant
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * Surcharge les classes du composant
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * Couleur du text & du background
+   */
+  color: _propTypes.default.string,
+
+  /**
+   * Graisse du text
+   */
+  fontWeight: _propTypes.default.number,
+
+  /**
+   * Label à afficher
+   */
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.node]).isRequired
 } : {};
-
 HiColoredLabel.defaultProps = {
-    active: false,
-    color: '#737373'
+  active: false,
+  color: 'primary'
 };
 
-exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiColoredLabel' })(HiColoredLabel);
+var _default = (0, _withStyles.default)(styles, {
+  hiComponent: true,
+  withTheme: true,
+  name: 'HmuiHiColoredLabel'
+})(HiColoredLabel);
+
+exports.default = _default;

package/HiColoredLabel/index.js

@@ -1,16 +1,15 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _HiColoredLabel = require('./HiColoredLabel');
-
-Object.defineProperty(exports, 'default', {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_HiColoredLabel).default;
+    return _HiColoredLabel.default;
   }
 });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _HiColoredLabel = _interopRequireDefault(require("./HiColoredLabel"));

package/HiDatePicker/Caption.js

@@ -1,93 +1,88 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-exports.styles = undefined;
-
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _withStyles = require('../styles/withStyles');
-
-var _withStyles2 = _interopRequireDefault(_withStyles);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+// @flow weak
+var styles = function styles(theme) {
+  return {
+    caption: (0, _extends2.default)({
+      display: 'table-caption',
+      height: 40,
+      textAlign: 'center',
+      padding: '10px 0'
+    }, theme.typography.body1, {
+      color: theme.palette.neutral.main
+    }),
+    clickableSpan: {
+      cursor: 'pointer'
+    }
+  };
+};
 
-var styles = exports.styles = function styles(theme) {
-    return {
-        caption: (0, _extends3.default)({
-            display: 'table-caption',
-            height: 40,
-            textAlign: 'center',
-            padding: '10px 0'
-        }, theme.typography.body1, {
-            color: theme.palette.neutral.normal
-        }),
-        clickableSpan: {
-            cursor: 'pointer'
-        }
-    };
-}; //  weak
+exports.styles = styles;
 
 var Caption = function Caption(_ref) {
-    var classes = _ref.classes,
-        date = _ref.date,
-        localeUtils = _ref.localeUtils,
-        onMonthClick = _ref.onMonthClick,
-        onYearClick = _ref.onYearClick;
-
-    var months = localeUtils.getMonths();
-
-    return _react2.default.createElement(
-        'div',
-        { className: classes.caption },
-        _react2.default.createElement(
-            'span',
-            { className: classes.clickableSpan, onClick: onMonthClick },
-            months[date.getMonth()]
-        ),
-        '\xA0',
-        _react2.default.createElement(
-            'span',
-            { className: classes.clickableSpan, onClick: onYearClick },
-            date.getFullYear()
-        )
-    );
+  var classes = _ref.classes,
+      date = _ref.date,
+      localeUtils = _ref.localeUtils,
+      onMonthClick = _ref.onMonthClick,
+      onYearClick = _ref.onYearClick;
+  var months = localeUtils.getMonths();
+  return _react.default.createElement("div", {
+    className: classes.caption
+  }, _react.default.createElement("span", {
+    className: classes.clickableSpan,
+    onClick: onMonthClick
+  }, months[date.getMonth()]), "\xA0", _react.default.createElement("span", {
+    className: classes.clickableSpan,
+    onClick: onYearClick
+  }, date.getFullYear()));
 };
 
 Caption.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: _propTypes2.default.object,
-    /**
-     * ReactDayPicker prop
-     */
-    date: _propTypes2.default.object.isRequired,
-    /**
-     * ReactDayPicker prop
-     */
-    localeUtils: _propTypes2.default.object.isRequired,
-    /**
-     * Fonction de callback au click
-     * Permet de modifier le mois
-     */
-    onMonthClick: _propTypes2.default.func,
-    /**
-     * Fonction de callback au click
-     * Permet de modifier l'année
-     */
-    onYearClick: _propTypes2.default.func
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * ReactDayPicker prop
+   */
+  date: _propTypes.default.object.isRequired,
+
+  /**
+   * ReactDayPicker prop
+   */
+  localeUtils: _propTypes.default.object.isRequired,
+
+  /**
+   * Fonction de callback au click
+   * Permet de modifier le mois
+   */
+  onMonthClick: _propTypes.default.func,
+
+  /**
+   * Fonction de callback au click
+   * Permet de modifier l'année
+   */
+  onYearClick: _propTypes.default.func
 } : {};
 
-exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiCaption' })(Caption);
+var _default = (0, _withStyles.default)(styles, {
+  name: 'HmuiCaption'
+})(Caption);
+
+exports.default = _default;

package/HiDatePicker/Caption.spec.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _chai = require("chai");
+
+var _sinon = require("sinon");
+
+var _moment = _interopRequireDefault(require("react-day-picker/moment"));
+
+var _testUtils = require("../test-utils");
+
+var _Caption = _interopRequireDefault(require("./Caption"));
+
+describe('<Caption />', function () {
+  var shallow;
+  var mount;
+  var classes;
+  var wrapper;
+  var date = new Date();
+
+  var _ref = _react.default.createElement(_Caption.default, {
+    date: date,
+    localeUtils: _moment.default
+  });
+
+  before(function () {
+    shallow = (0, _testUtils.createShallow)({
+      untilSelector: 'Badge'
+    });
+    mount = (0, _testUtils.createMount)();
+    classes = (0, _testUtils.getClasses)(_ref);
+  });
+  after(function () {
+    mount.cleanUp();
+  });
+
+  var _ref2 = _react.default.createElement(_Caption.default, {
+    date: date,
+    localeUtils: _moment.default
+  });
+
+  describe('text with leftIcon', function () {
+    before(function () {
+      wrapper = shallow(_ref2);
+    });
+    it('should render a div containing two spans', function () {
+      _chai.assert.strictEqual(wrapper.name(), 'div');
+
+      _chai.assert.strictEqual(wrapper.childAt(0).is('span'), true, 'should be a span');
+
+      _chai.assert.strictEqual(wrapper.childAt(2).is('span'), true, 'should be a span');
+    });
+    it('should merge user classes & spread custom props to the root node', function () {
+      _chai.assert.strictEqual(wrapper.hasClass(classes.caption), true);
+    });
+  });
+  describe('mount', function () {
+    it('should call onDelete when clicking', function () {
+      var handleClickMonth = (0, _sinon.spy)();
+      var handleClickYear = (0, _sinon.spy)();
+      wrapper = mount(_react.default.createElement(_Caption.default, {
+        date: date,
+        localeUtils: _moment.default,
+        onMonthClick: handleClickMonth,
+        onYearClick: handleClickYear
+      }));
+
+      _chai.assert.strictEqual(wrapper.find('span').length, 2, 'should have 2 spans');
+
+      wrapper.find('span').at(0).simulate('click');
+
+      _chai.assert.strictEqual(handleClickMonth.callCount, 1, 'should have been called once handleClickMonth');
+
+      _chai.assert.strictEqual(handleClickYear.callCount, 0, 'should not have been called handleClickYear');
+
+      wrapper.find('span').at(1).simulate('click');
+
+      _chai.assert.strictEqual(handleClickMonth.callCount, 1, 'should not have been called twice handleClickMonth');
+
+      _chai.assert.strictEqual(handleClickYear.callCount, 1, 'should have been called once handleClickYear');
+
+      wrapper.unmount();
+    });
+  });
+});