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

package/es/HiColoredLabel/HiColoredLabel.js

@@ -1,31 +1,12 @@
-"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
-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 _helpers = require("../utils/helpers");
-
-var _colorManipulator = require("@material-ui/core/styles/colorManipulator");
-
-var styles = function styles(theme) {
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import { capitalize } from '../utils/helpers';
+import { fade } from '@material-ui/core/styles/colorManipulator';
+export var styles = function styles(theme) {
   return {
     root: {
       display: 'inline-block',
@@ -38,11 +19,11 @@ var styles = function styles(theme) {
       whiteSpace: 'nowrap',
       lineHeight: 1
     },
-    body1: (0, _objectSpread2.default)({}, theme.typography.b1),
-    body2: (0, _objectSpread2.default)({}, theme.typography.b2),
-    body3: (0, _objectSpread2.default)({}, theme.typography.b3),
-    body4: (0, _objectSpread2.default)({}, theme.typography.b4),
-    body5: (0, _objectSpread2.default)({}, theme.typography.b5),
+    body1: _objectSpread({}, theme.typography.b1),
+    body2: _objectSpread({}, theme.typography.b2),
+    body3: _objectSpread({}, theme.typography.b3),
+    body4: _objectSpread({}, theme.typography.b4),
+    body5: _objectSpread({}, theme.typography.b5),
     color: {
       fontWeight: 400
     },
@@ -50,37 +31,37 @@ var styles = function styles(theme) {
     /* 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)
+      backgroundColor: 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)
+      backgroundColor: 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)
+      backgroundColor: 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)
+      backgroundColor: 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)
+      backgroundColor: 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)
+      backgroundColor: fade(theme.palette.neutral.main, 0.08)
     },
     activeColor: {
       fontWeight: 500
@@ -132,9 +113,6 @@ var styles = function styles(theme) {
  * Label with background color & text color
  */
 
-
-exports.styles = styles;
-
 function HiColoredLabel(props) {
   var _classNames;
 
@@ -148,14 +126,15 @@ function HiColoredLabel(props) {
       fontWeight = props.fontWeight,
       style = props.style,
       theme = props.theme,
-      other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "fontSize", "label", "color", "active", "outlined", "fontWeight", "style", "theme"]);
+      other = _objectWithoutProperties(props, ["classes", "className", "fontSize", "label", "color", "active", "outlined", "fontWeight", "style", "theme"]);
+
   var color = propsColor || 'primary';
   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.outlined, outlined), (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), (0, _defineProperty2.default)(_classNames, classes.body1, fontSize >= 15), (0, _defineProperty2.default)(_classNames, classes.body2, fontSize === 14), (0, _defineProperty2.default)(_classNames, classes.body3, fontSize === 13), (0, _defineProperty2.default)(_classNames, classes.body4, fontSize === 12), (0, _defineProperty2.default)(_classNames, classes.body5, fontSize <= 11), _classNames), className),
-    style: (0, _objectSpread2.default)({}, style, {}, isHexColor && {
-      backgroundColor: active ? color : (0, _colorManipulator.fade)(color, 0.08),
+  return React.createElement("div", Object.assign({
+    className: classNames(classes.root, (_classNames = {}, _defineProperty(_classNames, classes.color, !active), _defineProperty(_classNames, classes.activeColor, active), _defineProperty(_classNames, classes.outlined, outlined), _defineProperty(_classNames, classes["activeColor".concat(capitalize(color))], active && isHiColor), _defineProperty(_classNames, classes["color".concat(capitalize(color))], !active && isHiColor), _defineProperty(_classNames, classes.body1, fontSize >= 15), _defineProperty(_classNames, classes.body2, fontSize === 14), _defineProperty(_classNames, classes.body3, fontSize === 13), _defineProperty(_classNames, classes.body4, fontSize === 12), _defineProperty(_classNames, classes.body5, fontSize <= 11), _classNames), className),
+    style: _objectSpread({}, style, {}, isHexColor && {
+      backgroundColor: active ? color : fade(color, 0.08),
       color: active ? theme.palette.getContrastText(color) : color
     }, {}, fontWeight && {
       fontWeight: fontWeight
@@ -169,11 +148,8 @@ HiColoredLabel.defaultProps = {
   fontSize: 15,
   outlined: false
 };
-
-var _default = (0, _styles.withStyles)(styles, {
+export default withStyles(styles, {
   hiComponent: true,
   withTheme: true,
   name: 'HmuiHiColoredLabel'
-})(HiColoredLabel);
-
-exports.default = _default;
+})(HiColoredLabel);

package/es/HiColoredLabel/HiColoredLabel.test.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow, createMount, getClasses } from '../test-utils';
+import HiColoredLabel from './HiColoredLabel';
+describe('<HiColoredLabel />', function () {
+  var shallow;
+  var classes;
+  var mount;
+  before(function () {
+    shallow = createShallow({
+      dive: true
+    });
+    classes = getClasses(React.createElement(HiColoredLabel, {
+      label: "",
+      color: ""
+    }));
+    mount = createMount();
+  });
+  after(function () {
+    mount.cleanUp();
+  });
+  describe('color text only', function () {
+    var wrapper;
+    before(function () {
+      wrapper = shallow(React.createElement(HiColoredLabel, {
+        label: 'Test Label',
+        color: '#e4e4e4',
+        fontWeight: 600
+      }));
+    });
+    it('should render a div with classes root', function () {
+      assert.strictEqual(wrapper.name(), 'div');
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+    });
+    it('should have color and background opacity 0.08', function () {
+      assert.strictEqual(wrapper.props().style.backgroundColor, 'rgba(228, 228, 228, 0.08)');
+      assert.strictEqual(wrapper.props().style.color, '#e4e4e4');
+      assert.strictEqual(wrapper.props().style.fontWeight, 600);
+    });
+  });
+  describe('active color text', function () {
+    var wrapper;
+    before(function () {
+      wrapper = shallow(React.createElement(HiColoredLabel, {
+        label: 'Test Label',
+        color: '#e4e4e4',
+        active: true
+      }));
+    });
+    it('should render a div with classes root', function () {
+      assert.strictEqual(wrapper.name(), 'div');
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+    });
+    it('should have color and background opacity 0.08', function () {
+      assert.strictEqual(wrapper.props().style.backgroundColor, '#e4e4e4');
+      assert.strictEqual(wrapper.props().style.color, '#20272B');
+    });
+  });
+  describe('beta active color text', function () {
+    var wrapper;
+    before(function () {
+      wrapper = shallow(React.createElement(HiColoredLabel, {
+        label: 'Test Label',
+        color: '#e4e4e4',
+        active: true,
+        beta: true
+      }));
+    });
+    it('should render a div with classes root', function () {
+      assert.strictEqual(wrapper.name(), 'div');
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+    });
+    it('should have color and background opacity 0.08', function () {
+      assert.strictEqual(wrapper.props().style.backgroundColor, '#e4e4e4');
+      assert.strictEqual(wrapper.props().style.color, '#20272B');
+    });
+  });
+  describe('null color', function () {
+    var wrapper;
+    before(function () {
+      wrapper = shallow(React.createElement(HiColoredLabel, {
+        label: 'Test Label',
+        color: null,
+        active: true
+      }));
+    });
+    it('should render a div with classes root', function () {
+      assert.strictEqual(wrapper.name(), 'div');
+      assert.strictEqual(wrapper.hasClass(classes.root), true);
+    });
+    it('should have color and background opacity 0.08', function () {
+      assert.strictEqual(wrapper.props().style.backgroundColor, undefined);
+      assert.strictEqual(wrapper.props().style.color, undefined);
+    });
+  });
+});

package/es/HiColoredLabel/index.js

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

package/es/HiDatePicker/Caption.js

@@ -1,23 +1,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.styles = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _HiButton = _interopRequireDefault(require("../HiButton"));
-
-var styles = function styles(theme) {
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import HiButton from '../HiButton';
+export var styles = function styles(theme) {
   return {
-    caption: (0, _objectSpread2.default)({
+    caption: _objectSpread({
       display: 'table-caption',
       height: 40,
       textAlign: 'center',
@@ -28,8 +15,6 @@ var styles = function styles(theme) {
   };
 };
 
-exports.styles = styles;
-
 var Caption = function Caption(_ref) {
   var classes = _ref.classes,
       date = _ref.date,
@@ -39,19 +24,17 @@ var Caption = function Caption(_ref) {
       onMonthClick = _ref.onMonthClick,
       onYearClick = _ref.onYearClick;
   var months = localeUtils.getMonths(locale);
-  return _react.default.createElement("div", {
+  return React.createElement("div", {
     className: classes.caption
-  }, _react.default.createElement(_HiButton.default, {
+  }, React.createElement(HiButton, {
     size: "small",
     onClick: onMonthClick
-  }, months[date.getMonth()]), _react.default.createElement(_HiButton.default, {
+  }, months[date.getMonth()]), React.createElement(HiButton, {
     size: "small",
     onClick: onYearClick
   }, date.getFullYear()));
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+export default withStyles(styles, {
   name: 'HmuiCaption'
-})(Caption);
-
-exports.default = _default;
+})(Caption);

package/es/HiDatePicker/Caption.test.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { assert } from 'chai';
+import { spy } from 'sinon';
+import MomentLocaleUtils from 'react-day-picker/moment';
+import { createShallow, createMount, getClasses } from '../test-utils';
+import Caption from './Caption';
+import HiButton from '../HiButton/HiButton';
+describe('<Caption />', function () {
+  var shallow;
+  var mount;
+  var classes;
+  var wrapper;
+  var date = new Date();
+  before(function () {
+    shallow = createShallow({
+      untilSelector: 'Badge'
+    });
+    classes = getClasses(React.createElement(Caption, {
+      date: date,
+      localeUtils: MomentLocaleUtils
+    }));
+  });
+  beforeEach(function () {
+    mount = createMount();
+  });
+  afterEach(function () {
+    mount.cleanUp();
+  });
+  describe('text with leftIcon', function () {
+    before(function () {
+      wrapper = shallow(React.createElement(Caption, {
+        date: date,
+        localeUtils: MomentLocaleUtils
+      }));
+    });
+    it('should render a div containing two spans', function () {
+      assert.strictEqual(wrapper.name(), 'div');
+      assert.strictEqual(wrapper.find('div').length, 1, 'should have 1 div');
+      assert.strictEqual(wrapper.find(HiButton).length, 2, 'should have 2 HiButton');
+    });
+    it('should merge user classes & spread custom props to the root node', function () {
+      assert.strictEqual(wrapper.hasClass(classes.caption), true);
+    });
+  });
+  describe('mount', function () {
+    it('should call onDelete when clicking', function () {
+      var handleClickMonth = spy();
+      var handleClickYear = spy();
+      wrapper = mount(React.createElement(Caption, {
+        date: date,
+        localeUtils: MomentLocaleUtils,
+        onMonthClick: handleClickMonth,
+        onYearClick: handleClickYear
+      }));
+      assert.strictEqual(wrapper.find(HiButton).length, 2, 'should have 2 HiButton');
+      wrapper.find(HiButton).at(0).simulate('click');
+      assert.strictEqual(handleClickMonth.callCount, 1, 'should have been called once handleClickMonth');
+      assert.strictEqual(handleClickYear.callCount, 0, 'should not have been called handleClickYear');
+      wrapper.find(HiButton).at(1).simulate('click');
+      assert.strictEqual(handleClickMonth.callCount, 1, 'should not have been called twice handleClickMonth');
+      assert.strictEqual(handleClickYear.callCount, 1, 'should have been called once handleClickYear');
+      wrapper.unmount();
+    });
+  });
+});