@gympass/yoga 7.43.0 → 7.46.0

package/cjs/BottomSheet/web/BottomSheet.js

@@ -15,6 +15,8 @@ var _templateObject;
 
 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 _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
 var StyledBottomSheet = (0, _styledComponents["default"])(_Dialog["default"])(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n  align-self: flex-end;\n  animation: content;\n  animation-duration: 400ms;\n  animation-fill-mode: forwards;\n  @keyframes content {\n    0% {\n      transform: translateY(100vh);\n    }\n    100% {\n      transform: translateY(0);\n    }\n  }\n"])), function (_ref) {
@@ -23,7 +25,9 @@ var StyledBottomSheet = (0, _styledComponents["default"])(_Dialog["default"])(_t
 });
 
 var BottomSheet = function BottomSheet(props) {
-  return /*#__PURE__*/_react["default"].createElement(StyledBottomSheet, props);
+  return /*#__PURE__*/_react["default"].createElement(StyledBottomSheet, _extends({
+    hideCloseButton: true
+  }, props));
 };
 
 BottomSheet.propTypes = {

package/cjs/BottomSheet/web/BottomSheet.test.js

@@ -43,4 +43,19 @@ describe('<BottomSheet />', function () {
 
     expect(onActionMock).toHaveBeenCalledTimes(1);
   });
+  it('should hide the close button', function () {
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], {
+      isOpen: true,
+      onClose: function onClose() {}
+    }, /*#__PURE__*/_react["default"].createElement(_2["default"].Header, null, "Title"))));
+    expect(_react2.screen.queryByRole('button')).toBeNull();
+  });
+  it('should show the close button', function () {
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], {
+      isOpen: true,
+      hideCloseButton: false,
+      onClose: function onClose() {}
+    }, /*#__PURE__*/_react["default"].createElement(_2["default"].Header, null, "Title"))));
+    expect(_react2.screen.getByRole('button')).not.toBeNull();
+  });
 });

package/cjs/Card/web/PlanCard/List.js

@@ -34,7 +34,7 @@ exports.List = List;
 
 var IconWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-right: ", "px;\n"])), cardweb.plan.list.item.icon.margin.right);
 
-var Item = _styledComponents["default"].li(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  margin-bottom: ", "px;\n"])), card.plan.list.item.margin.bottom);
+var Item = _styledComponents["default"].li(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  :not(:last-child) {\n    margin-bottom: ", "px;\n  }\n"])), card.plan.list.item.margin.bottom);
 
 var Wrapper = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  min-width: 0;\n  align-items: center;\n\n  svg {\n    flex-shrink: 0;\n  }\n"])));
 

package/cjs/Dialog/web/Dialog.js

@@ -17,7 +17,7 @@ var _hooks = require("../../hooks");
 
 var _ = require("../..");
 
-var _excluded = ["isOpen", "children", "onClose"];
+var _excluded = ["isOpen", "hideCloseButton", "children", "onClose"];
 
 var _templateObject, _templateObject2;
 
@@ -47,12 +47,14 @@ var Overlay = _styledComponents["default"].div(_templateObject2 || (_templateObj
 
 var Dialog = function Dialog(_ref3) {
   var isOpen = _ref3.isOpen,
+      hideCloseButton = _ref3.hideCloseButton,
       children = _ref3.children,
       onClose = _ref3.onClose,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded);
 
   var dialogRef = (0, _react.useRef)(null);
   var dialogElement = (0, _hooks.usePortal)('dialog');
+  var isCloseButtonVisible = onClose && !hideCloseButton;
   var closeDialog = (0, _react.useCallback)(function (e) {
     if (dialogRef.current === e.target && isOpen && onClose) {
       onClose(e);
@@ -79,7 +81,7 @@ var Dialog = function Dialog(_ref3) {
     ref: dialogRef
   }, /*#__PURE__*/_react["default"].createElement(StyledDialog, _extends({
     onClose: onClose
-  }, props), onClose && /*#__PURE__*/_react["default"].createElement(_.Box, {
+  }, props), isCloseButtonVisible && /*#__PURE__*/_react["default"].createElement(_.Box, {
     d: "flex",
     justifyContent: "flex-end",
     w: "100%"
@@ -94,12 +96,16 @@ Dialog.propTypes = {
   /** Control the dialog visibility. */
   isOpen: _propTypes.bool,
 
+  /** Hide the close button when onClose prop is defined. */
+  hideCloseButton: _propTypes.bool,
+
   /** Function to close the dialog. */
   onClose: _propTypes.func,
   children: _propTypes.node.isRequired
 };
 Dialog.defaultProps = {
   isOpen: false,
+  hideCloseButton: false,
   onClose: undefined
 };
 Dialog.displayName = 'Dialog';

package/cjs/Dialog/web/Dialog.test.js

@@ -67,4 +67,12 @@ describe('<Dialog />', function () {
 
     expect(onCloseMock).toHaveBeenCalledTimes(1);
   });
+  it('should hide the close button when hideCloseButton prop is true', function () {
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], {
+      isOpen: true,
+      hideCloseButton: true,
+      onClose: function onClose() {}
+    }, /*#__PURE__*/_react["default"].createElement(_2["default"].Header, null, "Title"))));
+    expect(_react2.screen.queryByRole('button')).toBeNull();
+  });
 });

package/cjs/Menu/web/MenuList.js

@@ -31,25 +31,43 @@ var StyledMenuList = (0, _styledComponents["default"])(_reactDropdownMenu.Conten
 });
 var MenuList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var children = _ref2.children,
-      align = _ref2.align;
+      align = _ref2.align,
+      alignOffset = _ref2.alignOffset,
+      side = _ref2.side,
+      sideOffset = _ref2.sideOffset;
   return /*#__PURE__*/_react["default"].createElement(StyledMenuList, {
     asChild: true,
-    sideOffset: 2,
-    alignOffset: -5,
-    align: align
+    side: side,
+    sideOffset: sideOffset,
+    align: align,
+    alignOffset: alignOffset
   }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     as: "ul",
+    m: "zero",
     ref: ref
   }, children));
 });
 MenuList.propTypes = {
+  /** Component to be rendered inside the Menu.List container */
   children: _propTypes.node.isRequired,
 
-  /** Align Menu is a alignement that menu will appear on the screen | start | center | end   */
-  align: _propTypes.string
+  /** Setup the vertical placement relative to Menu.Action component */
+  align: (0, _propTypes.oneOf)(['start', 'center', 'end']),
+
+  /** Add vertical space between the Menu.Action and the Menu.List */
+  alignOffset: _propTypes.number,
+
+  /** Setup the horizontal placement relative to Menu.Action component */
+  side: (0, _propTypes.oneOf)(['top', 'right', 'bottom', 'left']),
+
+  /** Add horizontal space between the Menu.Action and the Menu.List */
+  sideOffset: _propTypes.number
 };
 MenuList.defaultProps = {
-  align: 'start'
+  align: 'start',
+  alignOffset: 0,
+  side: 'bottom',
+  sideOffset: 4
 };
 MenuList.displayName = 'Menu.List';
 var _default = MenuList;

package/esm/BottomSheet/web/BottomSheet.js

@@ -1,5 +1,7 @@
 var _templateObject;
 
+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 _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
 import React from 'react';
@@ -12,7 +14,9 @@ var StyledBottomSheet = styled(Dialog)(_templateObject || (_templateObject = _ta
 });
 
 var BottomSheet = function BottomSheet(props) {
-  return /*#__PURE__*/React.createElement(StyledBottomSheet, props);
+  return /*#__PURE__*/React.createElement(StyledBottomSheet, _extends({
+    hideCloseButton: true
+  }, props));
 };
 
 BottomSheet.propTypes = {

package/esm/BottomSheet/web/BottomSheet.test.js

@@ -30,4 +30,19 @@ describe('<BottomSheet />', function () {
     fireEvent.click(button);
     expect(onActionMock).toHaveBeenCalledTimes(1);
   });
+  it('should hide the close button', function () {
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BottomSheet, {
+      isOpen: true,
+      onClose: function onClose() {}
+    }, /*#__PURE__*/React.createElement(BottomSheet.Header, null, "Title"))));
+    expect(screen.queryByRole('button')).toBeNull();
+  });
+  it('should show the close button', function () {
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BottomSheet, {
+      isOpen: true,
+      hideCloseButton: false,
+      onClose: function onClose() {}
+    }, /*#__PURE__*/React.createElement(BottomSheet.Header, null, "Title"))));
+    expect(screen.getByRole('button')).not.toBeNull();
+  });
 });

package/esm/Card/web/PlanCard/List.js

@@ -13,7 +13,7 @@ var _theme$components = theme.components,
 var truncateStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
 var List = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  margin: ", "px 0 0;\n  padding: 0;\n\n  list-style: none;\n"])), cardweb.plan.list.margin.top);
 var IconWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-right: ", "px;\n"])), cardweb.plan.list.item.icon.margin.right);
-var Item = styled.li(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  margin-bottom: ", "px;\n"])), card.plan.list.item.margin.bottom);
+var Item = styled.li(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  :not(:last-child) {\n    margin-bottom: ", "px;\n  }\n"])), card.plan.list.item.margin.bottom);
 var Wrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  min-width: 0;\n  align-items: center;\n\n  svg {\n    flex-shrink: 0;\n  }\n"])));
 var ItemText = styled(Text.Small)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  height: 100%;\n  vertical-align: middle;\n\n  color: ", ";\n\n  ", "\n"])), card.plan.list.item.font.color, truncateStyle);
 var Button = styled.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  display: block;\n  padding: 0;\n  margin-top: ", "px;\n\n  width: 100%;\n\n  letter-spacing: normal;\n\n  background-color: transparent;\n  border: none;\n\n  font-family: ", ";\n  font-size: ", "px;\n  font-weight: ", ";\n  color: ", ";\n\n  cursor: pointer;\n  text-decoration: none;\n  text-align: left;\n  outline: none;\n\n  ", "\n"])), card.plan.list.button.margin.top, theme.baseFont.family, card.plan.list.button.font.size, card.plan.list.button.font.weight, card.plan.list.button.font.color, truncateStyle);

package/esm/Dialog/web/Dialog.js

@@ -1,4 +1,4 @@
-var _excluded = ["isOpen", "children", "onClose"];
+var _excluded = ["isOpen", "hideCloseButton", "children", "onClose"];
 
 var _templateObject, _templateObject2;
 
@@ -27,12 +27,14 @@ var Overlay = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplate
 
 var Dialog = function Dialog(_ref3) {
   var isOpen = _ref3.isOpen,
+      hideCloseButton = _ref3.hideCloseButton,
       children = _ref3.children,
       onClose = _ref3.onClose,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded);
 
   var dialogRef = useRef(null);
   var dialogElement = usePortal('dialog');
+  var isCloseButtonVisible = onClose && !hideCloseButton;
   var closeDialog = useCallback(function (e) {
     if (dialogRef.current === e.target && isOpen && onClose) {
       onClose(e);
@@ -59,7 +61,7 @@ var Dialog = function Dialog(_ref3) {
     ref: dialogRef
   }, /*#__PURE__*/React.createElement(StyledDialog, _extends({
     onClose: onClose
-  }, props), onClose && /*#__PURE__*/React.createElement(Box, {
+  }, props), isCloseButtonVisible && /*#__PURE__*/React.createElement(Box, {
     d: "flex",
     justifyContent: "flex-end",
     w: "100%"
@@ -74,12 +76,16 @@ Dialog.propTypes = {
   /** Control the dialog visibility. */
   isOpen: bool,
 
+  /** Hide the close button when onClose prop is defined. */
+  hideCloseButton: bool,
+
   /** Function to close the dialog. */
   onClose: func,
   children: node.isRequired
 };
 Dialog.defaultProps = {
   isOpen: false,
+  hideCloseButton: false,
   onClose: undefined
 };
 Dialog.displayName = 'Dialog';

package/esm/Dialog/web/Dialog.test.js

@@ -51,4 +51,12 @@ describe('<Dialog />', function () {
     fireEvent.click(button);
     expect(onCloseMock).toHaveBeenCalledTimes(1);
   });
+  it('should hide the close button when hideCloseButton prop is true', function () {
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dialog, {
+      isOpen: true,
+      hideCloseButton: true,
+      onClose: function onClose() {}
+    }, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title"))));
+    expect(screen.queryByRole('button')).toBeNull();
+  });
 });

package/esm/Menu/web/MenuList.js

@@ -5,7 +5,7 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { Content as MenuListRoot } from '@radix-ui/react-dropdown-menu';
-import { node, string } from 'prop-types';
+import { node, number, oneOf } from 'prop-types';
 import Box from '../../Box';
 var StyledMenuList = styled(MenuListRoot)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  ", "\n"])), function (_ref) {
   var _ref$theme$yoga = _ref.theme.yoga,
@@ -15,25 +15,43 @@ var StyledMenuList = styled(MenuListRoot)(_templateObject || (_templateObject =
 });
 var MenuList = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
-      align = _ref2.align;
+      align = _ref2.align,
+      alignOffset = _ref2.alignOffset,
+      side = _ref2.side,
+      sideOffset = _ref2.sideOffset;
   return /*#__PURE__*/React.createElement(StyledMenuList, {
     asChild: true,
-    sideOffset: 2,
-    alignOffset: -5,
-    align: align
+    side: side,
+    sideOffset: sideOffset,
+    align: align,
+    alignOffset: alignOffset
   }, /*#__PURE__*/React.createElement(Box, {
     as: "ul",
+    m: "zero",
     ref: ref
   }, children));
 });
 MenuList.propTypes = {
+  /** Component to be rendered inside the Menu.List container */
   children: node.isRequired,
 
-  /** Align Menu is a alignement that menu will appear on the screen | start | center | end   */
-  align: string
+  /** Setup the vertical placement relative to Menu.Action component */
+  align: oneOf(['start', 'center', 'end']),
+
+  /** Add vertical space between the Menu.Action and the Menu.List */
+  alignOffset: number,
+
+  /** Setup the horizontal placement relative to Menu.Action component */
+  side: oneOf(['top', 'right', 'bottom', 'left']),
+
+  /** Add horizontal space between the Menu.Action and the Menu.List */
+  sideOffset: number
 };
 MenuList.defaultProps = {
-  align: 'start'
+  align: 'start',
+  alignOffset: 0,
+  side: 'bottom',
+  sideOffset: 4
 };
 MenuList.displayName = 'Menu.List';
 export default MenuList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.43.0",
+  "version": "7.46.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -28,7 +28,7 @@
     "@gympass/yoga-common": "^1.1.1",
     "@gympass/yoga-helpers": "^1.0.3",
     "@gympass/yoga-icons": "^1.5.0",
-    "@gympass/yoga-illustrations": "^0.1.1",
+    "@gympass/yoga-illustrations": "^0.5.0",
     "@gympass/yoga-system": "^0.10.2",
     "@gympass/yoga-tokens": "^3.1.4",
     "@ptomasroos/react-native-multi-slider": "^1.0.0",
@@ -51,7 +51,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "a914ea403b981de87e3e6ff7ae8553d534d69dd7",
+  "gitHead": "2bdf788e27df157afdb419bb89e78145ac147f07",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"