@gympass/yoga 7.48.1 → 7.50.1

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/Header/web/GympassLogo.js

@@ -14,7 +14,7 @@ var GympassLogo = function GympassLogo() {
     viewBox: "0 0 129 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
+  }, /*#__PURE__*/_react["default"].createElement("title", null, "Gympass Logo"), /*#__PURE__*/_react["default"].createElement("path", {
     d: "M14.814 6.64083L18.1979 4.72868C17.0449 1.75711 14.1623 0 10.3021 0C3.93536 0 0 4.05685 0 9.97416C0 16.4341 5.21372 20 10.1768 20C14.7388 20 17.7216 17.8036 19 15.969V9.01809H9.19921V12.2222H15.3404L15.3153 14.4186C15.3153 14.4186 13.5106 16.2015 10.252 16.2015C6.74274 16.2015 4.73747 13.7468 4.73747 9.8708C4.73747 5.96899 6.74274 3.51421 10.2018 3.51421C12.2573 3.51421 13.7863 4.78036 14.814 6.64083Z",
     fill: "#F46152"
   }), /*#__PURE__*/_react["default"].createElement("path", {

package/cjs/Header/web/Header.test.js

@@ -25,6 +25,11 @@ describe('<Header />', function () {
       href: gympassLink
     });
   });
+  it('should show gympass logo', function () {
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Header, null)));
+
+    _react2.screen.getByTitle('Gympass Logo');
+  });
   it('should show custom logo', function () {
     var CustomLogo = function CustomLogo() {
       return /*#__PURE__*/_react["default"].createElement("div", null, "Custom logo");

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;