@gympass/yoga 7.48.1 → 7.49.0

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

@@ -29,6 +29,8 @@ var _DialogTheme = _interopRequireDefault(require("./../../Dialog/Dialog.theme.j
 
 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"));
@@ -86,6 +88,7 @@ var componentThemes = {
   Checkbox$CheckboxSwitch: _CheckboxSwitchTheme["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,10 @@ var _Feedback = _interopRequireDefault(require("./Feedback"));
 
 exports.Feedback = _Feedback["default"];
 
+var _Drawer = _interopRequireDefault(require("./Drawer"));
+
+exports.Drawer = _Drawer["default"];
+
 var _Skeleton = _interopRequireDefault(require("./Skeleton"));
 
 exports.Skeleton = _Skeleton["default"];

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/Theme/theme/theme.js

@@ -14,6 +14,7 @@ import _componentThemes_Checkbox$Checkbox from "./../../Checkbox/Checkbox.theme.
 import _componentThemes_Checkbox$CheckboxSwitch from "./../../Checkbox/CheckboxSwitch.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";
@@ -47,6 +48,7 @@ var componentThemes = {
   Checkbox$CheckboxSwitch: _componentThemes_Checkbox$CheckboxSwitch,
   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,6 @@ import Menu from './Menu';
 import Banner from './Banner';
 import Heading from './Heading';
 import Feedback from './Feedback';
+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, Drawer, Skeleton };

package/package.json

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