@gympass/yoga 7.48.0 → 7.50.0

package/cjs/Datepicker/web/Datepicker.test.js

@@ -0,0 +1,229 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _ = require("../..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('<Datepicker />', function () {
+  var testDate = new Date(2022, 7, 3);
+  describe('Snapshots', function () {
+    it('should match with single Datepicker', function () {
+      var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single"
+      }))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with range Datepicker', function () {
+      var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "range"
+      }))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with default selected date single Datepicker', function () {
+      var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        startDate: testDate
+      }))),
+          container = _render3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with default selected dates range Datepicker', function () {
+      var endDate = new Date();
+      endDate.setDate(testDate.getDate() + 15);
+
+      var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "range",
+        startDate: testDate,
+        endDate: endDate
+      }))),
+          container = _render4.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with custom placeholder single Datepicker', function () {
+      var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        placeholder: "This is a custom placeholder :)"
+      }))),
+          container = _render5.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with disabled past dates Datepicker', function () {
+      var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        disablePastDates: true
+      }))),
+          container = _render6.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with disabled future dates Datepicker', function () {
+      var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        disableFutureDates: true
+      }))),
+          container = _render7.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with disabled Datepicker', function () {
+      var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        disabled: true
+      }))),
+          container = _render8.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with error Datepicker', function () {
+      var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        error: "This is an error"
+      }))),
+          container = _render9.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe('Unit', function () {
+    var dateFormat = 'MMM D, YYYY';
+    it('should call onSelectSingle function on single Datepicker', function () {
+      var onSelectSingle = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        onSelectSingle: onSelectSingle
+      })));
+      expect(onSelectSingle).toHaveBeenCalledTimes(1);
+
+      _react2.fireEvent.click(_react2.screen.getByRole('button'));
+
+      var day10 = _react2.screen.queryAllByText('10')[0];
+
+      _react2.fireEvent.click(day10);
+
+      expect(onSelectSingle).toHaveBeenCalledTimes(2);
+    });
+    it('should call onSelectRange function on range Datepicker', function () {
+      var onSelectRange = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "range",
+        onSelectRange: onSelectRange
+      })));
+      expect(onSelectRange).toHaveBeenCalledTimes(1);
+
+      _react2.fireEvent.click(_react2.screen.getByRole('button'));
+
+      var day10 = _react2.screen.queryAllByText('10')[0];
+
+      var day20 = _react2.screen.queryAllByText('20')[0];
+
+      _react2.fireEvent.click(day10);
+
+      expect(onSelectRange).toHaveBeenCalledTimes(2);
+
+      _react2.fireEvent.click(day20);
+
+      expect(onSelectRange).toHaveBeenCalledTimes(3);
+    });
+    it('should display default date on single Datepicker', function () {
+      var currentDate = new Date();
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        startDate: currentDate
+      })));
+      var formattedDate = (0, _moment["default"])(currentDate).format(dateFormat);
+      expect(_react2.screen.getByText(formattedDate)).toBeVisible();
+    });
+    it('should display default date range on range Datepicker', function () {
+      var currentDate = new Date();
+      var end = new Date();
+      end.setDate(currentDate.getDate() + 15);
+      var formattedStartDate = (0, _moment["default"])(currentDate).format(dateFormat);
+      var formattedEndDate = (0, _moment["default"])(end).format(dateFormat);
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "range",
+        startDate: currentDate,
+        endDate: end
+      })));
+      expect(_react2.screen.getByText(formattedStartDate + " - " + formattedEndDate)).toBeVisible();
+    });
+    it('should display custom placeholder and "Select Date" if none is provided', function () {
+      var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        placeholder: "This is a custom placeholder :)"
+      }))),
+          rerender = _render10.rerender;
+
+      expect(_react2.screen.getByText('This is a custom placeholder :)')).toBeVisible();
+      rerender( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single"
+      })));
+      expect(_react2.screen.getByText('Select Date')).toBeVisible();
+    });
+    it('should disable past dates', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        disablePastDates: true
+      })));
+
+      _react2.fireEvent.click(_react2.screen.getByRole('button'));
+
+      var previousMonthArrow = _react2.screen.getByTestId('previous-month-arrow');
+
+      _react2.fireEvent.click(previousMonthArrow);
+
+      [].concat(Array(25)).forEach(function (_e, i) {
+        return expect(_react2.screen.getAllByText("" + (i + 1))[0].closest('div')).toHaveAttribute('disabled');
+      });
+    });
+    it('should disable future dates', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        startDate: testDate,
+        disableFutureDates: true
+      })));
+
+      _react2.fireEvent.click(_react2.screen.getByRole('button'));
+
+      var nextMonthArrow = _react2.screen.getByTestId('next-month-arrow');
+
+      _react2.fireEvent.click(nextMonthArrow);
+
+      [].concat(Array(25)).forEach(function (_e, i) {
+        return expect(_react2.screen.getAllByText("" + (i + 1))[0].closest('div')).toHaveAttribute('disabled');
+      });
+    });
+    it('should be disabled', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        startDate: testDate,
+        disabled: true
+      })));
+      var formattedDate = (0, _moment["default"])(testDate).format(dateFormat);
+
+      var datepickerInput = _react2.screen.getByText(formattedDate);
+
+      expect(datepickerInput).toHaveAttribute('disabled');
+      expect(datepickerInput.closest('div')).toHaveAttribute('disabled');
+    });
+    it('should display an error', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        error: "This is an error"
+      })));
+      expect(_react2.screen.getByText('This is an error')).toBeVisible();
+    });
+  });
+});

package/cjs/Datepicker/web/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Datepicker = _interopRequireDefault(require("./Datepicker"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = _Datepicker["default"];
+exports["default"] = _default;

package/cjs/Dialog/web/Dialog.js

@@ -42,7 +42,7 @@ exports.StyledDialog = StyledDialog;
 
 var Overlay = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
   var dialog = _ref2.theme.yoga.components.dialog;
-  return "\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n\n  position: fixed;\n  top: " + dialog.position["default"] + ";\n  right: " + dialog.position["default"] + ";\n  left: " + dialog.position["default"] + ";\n  bottom: " + dialog.position["default"] + ";\n\n  background-color: rgba(35, 27, 34, 0.48);\n  ";
+  return "\n  display: flex;\n  z-index: 3;\n  justify-content: center;\n  align-items: center;\n\n  position: fixed;\n  top: " + dialog.position["default"] + ";\n  right: " + dialog.position["default"] + ";\n  left: " + dialog.position["default"] + ";\n  bottom: " + dialog.position["default"] + ";\n\n  background-color: rgba(35, 27, 34, 0.48);\n  ";
 });
 
 var Dialog = function Dialog(_ref3) {

package/cjs/Drawer/Drawer.theme.js

@@ -0,0 +1,22 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var Drawer = function Drawer(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    padding: {
+      top: spacing.small,
+      right: spacing.xxxlarge,
+      bottom: spacing.xxlarge,
+      left: spacing.xxxlarge
+    },
+    width: {
+      "default": 600
+    }
+  };
+};
+
+var _default = Drawer;
+exports["default"] = _default;

package/cjs/Drawer/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _web = _interopRequireDefault(require("./web"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = _web["default"];
+exports["default"] = _default;

package/cjs/Drawer/web/Drawer.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = require("prop-types");
+
+var _Dialog = _interopRequireDefault(require("../../Dialog"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+var StyledDrawer = (0, _styledComponents["default"])(_Dialog["default"])(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n  border-radius: 0!important;\n  height: 100%;\n  align-self: flex-end;\n  position: absolute;\n  right: 0;\n  animation: content;\n  animation-duration: 400ms;\n  animation-fill-mode: forwards;\n  transition: 0.25s ease-in-out;\n  @keyframes content {\n    0% {\n      transform: translate3d(100%, 0, 0);\n    }\n  }\n"])), function (_ref) {
+  var drawer = _ref.theme.yoga.components.drawer;
+  return "\n  padding: " + drawer.padding.top + "px " + drawer.padding.right + "px " + drawer.padding.bottom + "px " + drawer.padding.left + "px;\n  width: " + drawer.width["default"] + "px;\n  ";
+});
+
+function Drawer(props) {
+  return /*#__PURE__*/_react["default"].createElement(StyledDrawer, props);
+}
+
+Drawer.propTypes = {
+  children: _propTypes.node.isRequired
+};
+var _default = Drawer;
+exports["default"] = _default;

package/cjs/Drawer/web/Drawer.test.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = require("../..");
+
+var _2 = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('<Drawer />', function () {
+  afterEach(_react2.cleanup);
+  it('should match snapshot', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], {
+      isOpen: true
+    }, /*#__PURE__*/_react["default"].createElement(_2["default"].Header, null, "Title"), /*#__PURE__*/_react["default"].createElement(_2["default"].Content, null, "Subtitle"), /*#__PURE__*/_react["default"].createElement(_2["default"].Footer, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
+      secondary: true
+    }, "Ok, got it"))))),
+        baseElement = _render.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  it('should render a minimal drawer', function () {
+    var onActionMock = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], {
+      isOpen: true
+    }, /*#__PURE__*/_react["default"].createElement(_2["default"].Header, null, "Title"), /*#__PURE__*/_react["default"].createElement(_2["default"].Content, null, "Subtitle"), /*#__PURE__*/_react["default"].createElement(_2["default"].Footer, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
+      onClick: onActionMock,
+      secondary: true
+    }, "Ok, got it")))));
+
+    _react2.screen.getByText('Title');
+
+    _react2.screen.getByText('Subtitle');
+
+    var button = _react2.screen.getByRole('button', {
+      name: /Ok, got it/i
+    });
+
+    _react2.fireEvent.click(button);
+
+    expect(onActionMock).toHaveBeenCalledTimes(1);
+  });
+});

package/cjs/Drawer/web/Footer.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../../Box"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function Footer(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], _extends({
+    as: "footer",
+    width: "100%",
+    d: "flex"
+  }, props));
+}
+
+Footer.displayName = 'Drawer.Footer';
+var _default = Footer;
+exports["default"] = _default;

package/cjs/Drawer/web/Header.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../../Box"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var Header = function Header(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], _extends({
+    as: "header",
+    width: "100%",
+    color: "text.primary"
+  }, props));
+};
+
+Header.displayName = 'Drawer.Header';
+var _default = Header;
+exports["default"] = _default;

package/cjs/Drawer/web/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Drawer = _interopRequireDefault(require("./Drawer"));
+
+var _Header = _interopRequireDefault(require("./Header"));
+
+var _Content = _interopRequireDefault(require("./Content"));
+
+var _Footer = _interopRequireDefault(require("./Footer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+_Drawer["default"].Header = _Header["default"];
+_Drawer["default"].Content = _Content["default"];
+_Drawer["default"].Footer = _Footer["default"];
+var _default = _Drawer["default"];
+exports["default"] = _default;

package/cjs/Theme/theme/theme.js

@@ -25,10 +25,14 @@ var _CheckboxTheme = _interopRequireDefault(require("./../../Checkbox/Checkbox.t
 
 var _CheckboxSwitchTheme = _interopRequireDefault(require("./../../Checkbox/CheckboxSwitch.theme.js"));
 
+var _DatepickerTheme = _interopRequireDefault(require("./../../Datepicker/Datepicker.theme.js"));
+
 var _DialogTheme = _interopRequireDefault(require("./../../Dialog/Dialog.theme.js"));
 
 var _DividerTheme = _interopRequireDefault(require("./../../Divider/Divider.theme.js"));
 
+var _DrawerTheme = _interopRequireDefault(require("./../../Drawer/Drawer.theme.js"));
+
 var _DropdownTheme = _interopRequireDefault(require("./../../Dropdown/Dropdown.theme.js"));
 
 var _FeedbackTheme = _interopRequireDefault(require("./../../Feedback/Feedback.theme.js"));
@@ -84,8 +88,10 @@ var componentThemes = {
   Card$CardWeb: _CardWebTheme["default"],
   Checkbox$Checkbox: _CheckboxTheme["default"],
   Checkbox$CheckboxSwitch: _CheckboxSwitchTheme["default"],
+  Datepicker$Datepicker: _DatepickerTheme["default"],
   Dialog$Dialog: _DialogTheme["default"],
   Divider$Divider: _DividerTheme["default"],
+  Drawer$Drawer: _DrawerTheme["default"],
   Dropdown$Dropdown: _DropdownTheme["default"],
   Feedback$Feedback: _FeedbackTheme["default"],
   Grid$Grid: _GridTheme["default"],

package/cjs/index.js

@@ -131,6 +131,14 @@ var _Feedback = _interopRequireDefault(require("./Feedback"));
 
 exports.Feedback = _Feedback["default"];
 
+var _Datepicker = _interopRequireDefault(require("./Datepicker"));
+
+exports.Datepicker = _Datepicker["default"];
+
+var _Drawer = _interopRequireDefault(require("./Drawer"));
+
+exports.Drawer = _Drawer["default"];
+
 var _Skeleton = _interopRequireDefault(require("./Skeleton"));
 
 exports.Skeleton = _Skeleton["default"];

package/esm/Datepicker/Datepicker.theme.js

@@ -0,0 +1,12 @@
+var Datepicker = function Datepicker() {
+  return {
+    width: {
+      day: 32
+    },
+    height: {
+      day: 20
+    }
+  };
+};
+
+export default Datepicker;

package/esm/Datepicker/index.js

@@ -0,0 +1,2 @@
+import Datepicker from './web';
+export default Datepicker;