@gympass/yoga 7.48.1 → 7.50.1

package/esm/Datepicker/web/Datepicker.test.js

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

package/esm/Datepicker/web/index.js

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

package/esm/Dialog/web/Dialog.js

@@ -22,7 +22,7 @@ export var StyledDialog = styled(Card)(_templateObject || (_templateObject = _ta
 });
 var Overlay = styled.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/esm/Drawer/Drawer.theme.js

@@ -0,0 +1,16 @@
+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
+    }
+  };
+};
+
+export default Drawer;

package/esm/Drawer/index.js

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

package/esm/Drawer/web/Drawer.js

@@ -0,0 +1,21 @@
+var _templateObject;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import React from 'react';
+import styled from 'styled-components';
+import { node } from 'prop-types';
+import Dialog from '../../Dialog';
+var StyledDrawer = styled(Dialog)(_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.createElement(StyledDrawer, props);
+}
+
+Drawer.propTypes = {
+  children: node.isRequired
+};
+export default Drawer;

package/esm/Drawer/web/Drawer.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { screen, render, fireEvent, cleanup } from '@testing-library/react';
+import { ThemeProvider, Button } from '../..';
+import Drawer from '.';
+describe('<Drawer />', function () {
+  afterEach(cleanup);
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Drawer, {
+      isOpen: true
+    }, /*#__PURE__*/React.createElement(Drawer.Header, null, "Title"), /*#__PURE__*/React.createElement(Drawer.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(Drawer.Footer, null, /*#__PURE__*/React.createElement(Button, {
+      secondary: true
+    }, "Ok, got it"))))),
+        baseElement = _render.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  it('should render a minimal drawer', function () {
+    var onActionMock = jest.fn();
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Drawer, {
+      isOpen: true
+    }, /*#__PURE__*/React.createElement(Drawer.Header, null, "Title"), /*#__PURE__*/React.createElement(Drawer.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(Drawer.Footer, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: onActionMock,
+      secondary: true
+    }, "Ok, got it")))));
+    screen.getByText('Title');
+    screen.getByText('Subtitle');
+    var button = screen.getByRole('button', {
+      name: /Ok, got it/i
+    });
+    fireEvent.click(button);
+    expect(onActionMock).toHaveBeenCalledTimes(1);
+  });
+});

package/esm/Drawer/web/Footer.js

@@ -0,0 +1,15 @@
+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); }
+
+import React from 'react';
+import Box from '../../Box';
+
+function Footer(props) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "footer",
+    width: "100%",
+    d: "flex"
+  }, props));
+}
+
+Footer.displayName = 'Drawer.Footer';
+export default Footer;

package/esm/Drawer/web/Header.js

@@ -0,0 +1,15 @@
+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); }
+
+import React from 'react';
+import Box from '../../Box';
+
+var Header = function Header(props) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "header",
+    width: "100%",
+    color: "text.primary"
+  }, props));
+};
+
+Header.displayName = 'Drawer.Header';
+export default Header;

package/esm/Drawer/web/index.js

@@ -0,0 +1,8 @@
+import Drawer from './Drawer';
+import Header from './Header';
+import Content from './Content';
+import Footer from './Footer';
+Drawer.Header = Header;
+Drawer.Content = Content;
+Drawer.Footer = Footer;
+export default Drawer;

package/esm/Header/web/GympassLogo.js

@@ -7,7 +7,7 @@ var GympassLogo = function GympassLogo() {
     viewBox: "0 0 129 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, /*#__PURE__*/React.createElement("title", null, "Gympass Logo"), /*#__PURE__*/React.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.createElement("path", {

package/esm/Header/web/Header.test.js

@@ -17,6 +17,10 @@ describe('<Header />', function () {
       href: gympassLink
     });
   });
+  it('should show gympass logo', function () {
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Header, null)));
+    screen.getByTitle('Gympass Logo');
+  });
   it('should show custom logo', function () {
     var CustomLogo = function CustomLogo() {
       return /*#__PURE__*/React.createElement("div", null, "Custom logo");

package/esm/Theme/theme/theme.js

@@ -12,8 +12,10 @@ import _componentThemes_Card$Card from "./../../Card/Card.theme.js";
 import _componentThemes_Card$CardWeb from "./../../Card/Card.web.theme.js";
 import _componentThemes_Checkbox$Checkbox from "./../../Checkbox/Checkbox.theme.js";
 import _componentThemes_Checkbox$CheckboxSwitch from "./../../Checkbox/CheckboxSwitch.theme.js";
+import _componentThemes_Datepicker$Datepicker from "./../../Datepicker/Datepicker.theme.js";
 import _componentThemes_Dialog$Dialog from "./../../Dialog/Dialog.theme.js";
 import _componentThemes_Divider$Divider from "./../../Divider/Divider.theme.js";
+import _componentThemes_Drawer$Drawer from "./../../Drawer/Drawer.theme.js";
 import _componentThemes_Dropdown$Dropdown from "./../../Dropdown/Dropdown.theme.js";
 import _componentThemes_Feedback$Feedback from "./../../Feedback/Feedback.theme.js";
 import _componentThemes_Grid$Grid from "./../../Grid/Grid.theme.js";
@@ -45,8 +47,10 @@ var componentThemes = {
   Card$CardWeb: _componentThemes_Card$CardWeb,
   Checkbox$Checkbox: _componentThemes_Checkbox$Checkbox,
   Checkbox$CheckboxSwitch: _componentThemes_Checkbox$CheckboxSwitch,
+  Datepicker$Datepicker: _componentThemes_Datepicker$Datepicker,
   Dialog$Dialog: _componentThemes_Dialog$Dialog,
   Divider$Divider: _componentThemes_Divider$Divider,
+  Drawer$Drawer: _componentThemes_Drawer$Drawer,
   Dropdown$Dropdown: _componentThemes_Dropdown$Dropdown,
   Feedback$Feedback: _componentThemes_Feedback$Feedback,
   Grid$Grid: _componentThemes_Grid$Grid,

package/esm/index.js

@@ -28,5 +28,7 @@ import Menu from './Menu';
 import Banner from './Banner';
 import Heading from './Heading';
 import Feedback from './Feedback';
+import Datepicker from './Datepicker';
+import Drawer from './Drawer';
 import Skeleton from './Skeleton';
-export { ThemeProvider, FontLoader, createTheme, yogaTheme, theme, Button, List, Checkbox, RadioGroup, Slider, Card, PlanCard, Stepper, Container, Row, Col, Hide, Text, Rating, EventCard, Tag, Input, Progress, Dropdown, TextArea, AutoComplete, Icon, Chips, Box, Snackbar, Avatar, BottomSheet, Dialog, Divider, Header, Menu, Banner, Heading, Feedback, Skeleton };
+export { ThemeProvider, FontLoader, createTheme, yogaTheme, theme, Button, List, Checkbox, RadioGroup, Slider, Card, PlanCard, Stepper, Container, Row, Col, Hide, Text, Rating, EventCard, Tag, Input, Progress, Dropdown, TextArea, AutoComplete, Icon, Chips, Box, Snackbar, Avatar, BottomSheet, Dialog, Divider, Header, Menu, Banner, Heading, Feedback, Datepicker, Drawer, Skeleton };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.48.1",
+  "version": "7.50.1",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -51,7 +51,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "cd0637336ba6ba72f4bde25b53ab66092317c328",
+  "gitHead": "f471eeb204055b872473147a7967e5eea8fbdd57",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"