@gympass/yoga 7.42.2 → 7.45.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -15,6 +15,8 @@ var _templateObject;
15
15
 
16
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
17
17
 
18
+ 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); }
19
+
18
20
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
19
21
 
20
22
  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
23
25
  });
24
26
 
25
27
  var BottomSheet = function BottomSheet(props) {
26
- return /*#__PURE__*/_react["default"].createElement(StyledBottomSheet, props);
28
+ return /*#__PURE__*/_react["default"].createElement(StyledBottomSheet, _extends({
29
+ hideCloseButton: true
30
+ }, props));
27
31
  };
28
32
 
29
33
  BottomSheet.propTypes = {
@@ -43,4 +43,19 @@ describe('<BottomSheet />', function () {
43
43
 
44
44
  expect(onActionMock).toHaveBeenCalledTimes(1);
45
45
  });
46
+ it('should hide the close button', function () {
47
+ (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], {
48
+ isOpen: true,
49
+ onClose: function onClose() {}
50
+ }, /*#__PURE__*/_react["default"].createElement(_2["default"].Header, null, "Title"))));
51
+ expect(_react2.screen.queryByRole('button')).toBeNull();
52
+ });
53
+ it('should show the close button', function () {
54
+ (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], {
55
+ isOpen: true,
56
+ hideCloseButton: false,
57
+ onClose: function onClose() {}
58
+ }, /*#__PURE__*/_react["default"].createElement(_2["default"].Header, null, "Title"))));
59
+ expect(_react2.screen.getByRole('button')).not.toBeNull();
60
+ });
46
61
  });
@@ -11,7 +11,6 @@ var CardNative = function CardNative(_ref) {
11
11
  plan: {
12
12
  title: {
13
13
  margin: {
14
- top: spacing.xxsmall,
15
14
  bottom: spacing.xxsmall
16
15
  },
17
16
  lineHeight: lineHeights.medium
@@ -39,7 +38,7 @@ var CardNative = function CardNative(_ref) {
39
38
  actions: {
40
39
  buttonText: {
41
40
  margin: {
42
- top: spacing.medium
41
+ top: spacing.xsmall
43
42
  }
44
43
  },
45
44
  margin: {
@@ -27,15 +27,15 @@ var Card = function Card(_ref) {
27
27
  plan: {
28
28
  padding: {
29
29
  top: spacing.xxxlarge,
30
- right: spacing.medium,
31
- bottom: spacing.xlarge,
32
- left: spacing.medium
30
+ right: spacing.large,
31
+ bottom: spacing.large,
32
+ left: spacing.large
33
33
  },
34
34
  radius: 16,
35
35
  tag: {
36
36
  position: {
37
- top: spacing.medium,
38
- left: spacing.medium
37
+ top: spacing.large,
38
+ left: spacing.large
39
39
  }
40
40
  },
41
41
  subtitle: {
@@ -26,7 +26,7 @@ var CardWeb = function CardWeb(_ref) {
26
26
  item: {
27
27
  icon: {
28
28
  margin: {
29
- right: spacing.xsmall
29
+ right: spacing.xxsmall
30
30
  }
31
31
  }
32
32
  }
@@ -38,7 +38,7 @@ var CardWeb = function CardWeb(_ref) {
38
38
  }
39
39
  },
40
40
  margin: {
41
- top: spacing.xxsmall
41
+ top: spacing.large
42
42
  }
43
43
  }
44
44
  }
@@ -1 +1 @@
1
- var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireDefault(require("react"));var _styledComponents=_interopRequireWildcard(require("styled-components"));var _propTypes=require("prop-types");var _Content=_interopRequireDefault(require("../Card/Content"));var _Text=_interopRequireDefault(require("../../../Text"));var _themeReader=_interopRequireDefault(require("../../../Theme/helpers/themeReader"));var _Subtitle=_interopRequireDefault(require("./Subtitle"));var _Divider=_interopRequireDefault(require("../../../Divider"));var _excluded=["title","subtitle","description","currency","suffix","price","period","children"];var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6;function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Title=(0,_styledComponents["default"])(_Text["default"].Medium)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n ","\n"])),function(props){var _theme=(0,_themeReader["default"])(props),_theme$components=_theme.components,cardnative=_theme$components.cardnative,card=_theme$components.card;return(0,_styledComponents.css)(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n color: ",";\n margin-top: ","px;\n margin-bottom: ","px;\n line-height: ","px;\n "])),card.plan.title.color,cardnative.plan.title.margin.top,cardnative.plan.title.margin.bottom,cardnative.plan.title.lineHeight);});var Description=(0,_styledComponents["default"])(_Text["default"].Small)(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2["default"])(["\n height: 40px;\n\n color: ",";\n"])),_themeReader["default"].components.card.plan.description.color);var Price=_styledComponents["default"].View(_templateObject4||(_templateObject4=(0,_taggedTemplateLiteralLoose2["default"])(["\n flex-direction: row;\n\n ","\n"])),function(props){var _theme2=(0,_themeReader["default"])(props),plan=_theme2.components.cardnative.plan;return(0,_styledComponents.css)(_templateObject5||(_templateObject5=(0,_taggedTemplateLiteralLoose2["default"])(["\n margin-bottom: ","px;\n "])),plan.price.margin.bottom);});var EnhancePrice=_styledComponents["default"].View(_templateObject6||(_templateObject6=(0,_taggedTemplateLiteralLoose2["default"])(["\n align-self: center;\n"])));var PlanCardContent=function PlanCardContent(_ref){var title=_ref.title,subtitle=_ref.subtitle,description=_ref.description,currency=_ref.currency,suffix=_ref.suffix,price=_ref.price,period=_ref.period,children=_ref.children,rest=(0,_objectWithoutProperties2["default"])(_ref,_excluded);return _react["default"].createElement(_Content["default"],rest,subtitle&&_react["default"].createElement(_Subtitle["default"],null,subtitle),title&&_react["default"].createElement(Title,null,title),description&&_react["default"].createElement(Description,{numberOfLines:2},description),_react["default"].createElement(Price,null,currency&&_react["default"].createElement(_Text["default"].H4,null,currency),price&&_react["default"].createElement(_Text["default"].H4,null,price),suffix&&_react["default"].createElement(_Text["default"].H4,null,suffix),period&&_react["default"].createElement(EnhancePrice,null,_react["default"].createElement(_Text["default"].Medium,null,""+period))),_react["default"].createElement(_Divider["default"],null),children);};PlanCardContent.propTypes={title:_propTypes.string.isRequired,currency:_propTypes.string,suffix:_propTypes.string,price:_propTypes.string.isRequired,period:_propTypes.string.isRequired,description:_propTypes.string,subtitle:_propTypes.string,children:_propTypes.node};PlanCardContent.defaultProps={children:null,description:null,subtitle:null,currency:null,suffix:null};PlanCardContent.displayName='PlanCard.Content';var _default=PlanCardContent;exports["default"]=_default;
1
+ var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireDefault(require("react"));var _styledComponents=_interopRequireWildcard(require("styled-components"));var _propTypes=require("prop-types");var _Content=_interopRequireDefault(require("../Card/Content"));var _Text=_interopRequireDefault(require("../../../Text"));var _themeReader=_interopRequireDefault(require("../../../Theme/helpers/themeReader"));var _Subtitle=_interopRequireDefault(require("./Subtitle"));var _Divider=_interopRequireDefault(require("../../../Divider"));var _excluded=["title","subtitle","description","currency","suffix","price","period","children"];var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6;function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Title=(0,_styledComponents["default"])(_Text["default"].Medium)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n ","\n"])),function(props){var _theme=(0,_themeReader["default"])(props),_theme$components=_theme.components,cardnative=_theme$components.cardnative,card=_theme$components.card;return(0,_styledComponents.css)(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n color: ",";\n margin-bottom: ","px;\n line-height: ","px;\n "])),card.plan.title.color,cardnative.plan.title.margin.bottom,cardnative.plan.title.lineHeight);});var Description=(0,_styledComponents["default"])(_Text["default"].Small)(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2["default"])(["\n height: 40px;\n\n color: ",";\n"])),_themeReader["default"].components.card.plan.description.color);var Price=_styledComponents["default"].View(_templateObject4||(_templateObject4=(0,_taggedTemplateLiteralLoose2["default"])(["\n flex-direction: row;\n\n ","\n"])),function(props){var _theme2=(0,_themeReader["default"])(props),plan=_theme2.components.cardnative.plan;return(0,_styledComponents.css)(_templateObject5||(_templateObject5=(0,_taggedTemplateLiteralLoose2["default"])(["\n margin-bottom: ","px;\n "])),plan.price.margin.bottom);});var EnhancePrice=_styledComponents["default"].View(_templateObject6||(_templateObject6=(0,_taggedTemplateLiteralLoose2["default"])(["\n align-self: center;\n"])));var PlanCardContent=function PlanCardContent(_ref){var title=_ref.title,subtitle=_ref.subtitle,description=_ref.description,currency=_ref.currency,suffix=_ref.suffix,price=_ref.price,period=_ref.period,children=_ref.children,rest=(0,_objectWithoutProperties2["default"])(_ref,_excluded);return _react["default"].createElement(_Content["default"],rest,subtitle&&_react["default"].createElement(_Subtitle["default"],null,subtitle),title&&_react["default"].createElement(Title,null,title),description&&_react["default"].createElement(Description,{numberOfLines:2},description),_react["default"].createElement(Price,null,currency&&_react["default"].createElement(_Text["default"].H4,null,currency),price&&_react["default"].createElement(_Text["default"].H4,null,price),suffix&&_react["default"].createElement(_Text["default"].H4,null,suffix),period&&_react["default"].createElement(EnhancePrice,null,_react["default"].createElement(_Text["default"].Medium,null,""+period))),_react["default"].createElement(_Divider["default"],null),children);};PlanCardContent.propTypes={title:_propTypes.string.isRequired,currency:_propTypes.string,suffix:_propTypes.string,price:_propTypes.string.isRequired,period:_propTypes.string.isRequired,description:_propTypes.string,subtitle:_propTypes.string,children:_propTypes.node};PlanCardContent.defaultProps={children:null,description:null,subtitle:null,currency:null,suffix:null};PlanCardContent.displayName='PlanCard.Content';var _default=PlanCardContent;exports["default"]=_default;
@@ -1 +1 @@
1
- var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=exports.PLAN_LINE_HEIGHT=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireDefault(require("react"));var _styledComponents=_interopRequireWildcard(require("styled-components"));var _propTypes=require("prop-types");var _themeReader=_interopRequireDefault(require("../../../Theme/helpers/themeReader"));var _Card=_interopRequireDefault(require("../Card"));var _excluded=["children","variant"];var _templateObject,_templateObject2,_templateObject3;function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var PLAN_LINE_HEIGHT=8;exports.PLAN_LINE_HEIGHT=PLAN_LINE_HEIGHT;var Plan=(0,_styledComponents["default"])(_Card["default"])(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n max-width: 312px;\n width: 100%;\n position: relative;\n\n ","\n"])),function(props){var _theme=(0,_themeReader["default"])(props),colors=_theme.colors,plan=_theme.components.card.plan;return(0,_styledComponents.css)(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n padding: ","px ","px\n ","px ","px;\n\n border-radius: ","px;\n\n background-color: ",";\n "])),plan.padding.top,plan.padding.right,plan.padding.bottom,plan.padding.left,plan.radius,colors.white);});var Border=_styledComponents["default"].View(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2["default"])(["\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n\n height: 8px;\n background-color: ",";\n"])),function(_ref){var variant=_ref.variant,_ref$theme$yoga$color=_ref.theme.yoga.colors,deepPurple=_ref$theme$yoga$color.deepPurple,_ref$theme$yoga$color2=_ref$theme$yoga$color[variant],color=_ref$theme$yoga$color2===void 0?deepPurple:_ref$theme$yoga$color2;return color;});var PlanCard=function PlanCard(_ref2){var children=_ref2.children,variant=_ref2.variant,rest=(0,_objectWithoutProperties2["default"])(_ref2,_excluded);return _react["default"].createElement(Plan,rest,_react["default"].createElement(Border,{variant:variant}),children);};PlanCard.propTypes={children:_propTypes.node,variant:(0,_propTypes.oneOf)(['primary','secondary','vibin','hope','energy','relax','peace','verve','uplift','deepPurple','stamina','dark','medium','deep','light','clear','white'])};PlanCard.defaultProps={children:undefined,variant:'deepPurple'};PlanCard.displayName='PlanCard';var _default=PlanCard;exports["default"]=_default;
1
+ var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=exports.PLAN_LINE_HEIGHT=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireDefault(require("react"));var _styledComponents=_interopRequireWildcard(require("styled-components"));var _propTypes=require("prop-types");var _Box=_interopRequireDefault(require("../../../Box"));var _excluded=["children","variant"];var _templateObject,_templateObject2,_templateObject3;function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var PLAN_LINE_HEIGHT=8;exports.PLAN_LINE_HEIGHT=PLAN_LINE_HEIGHT;var Plan=(0,_styledComponents["default"])(_Box["default"])(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n max-width: 312px;\n width: 100%;\n position: relative;\n overflow: hidden;\n\n ","\n"])),function(props){var theme=props.theme.yoga;var plan=theme.components.card.plan;return(0,_styledComponents.css)(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n padding: ","px ","px\n ","px ","px;\n border: ","px solid ",";\n border-radius: ","px;\n\n background-color: ",";\n "])),plan.padding.top,plan.padding.right,plan.padding.bottom,plan.padding.left,theme.borders.small,theme.colors.light,plan.radius,theme.colors.white);});var Border=_styledComponents["default"].View(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2["default"])(["\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n\n height: 8px;\n background-color: ",";\n"])),function(_ref){var variant=_ref.variant,_ref$theme$yoga$color=_ref.theme.yoga.colors,deepPurple=_ref$theme$yoga$color.deepPurple,_ref$theme$yoga$color2=_ref$theme$yoga$color[variant],color=_ref$theme$yoga$color2===void 0?deepPurple:_ref$theme$yoga$color2;return color;});var PlanCard=function PlanCard(_ref2){var children=_ref2.children,variant=_ref2.variant,rest=(0,_objectWithoutProperties2["default"])(_ref2,_excluded);return _react["default"].createElement(_Box["default"],null,_react["default"].createElement(Plan,rest,_react["default"].createElement(Border,{variant:variant}),children));};PlanCard.propTypes={children:_propTypes.node,variant:(0,_propTypes.oneOf)(['primary','secondary','vibin','hope','energy','relax','peace','verve','uplift','deepPurple','stamina','dark','medium','deep','light','clear','white'])};PlanCard.defaultProps={children:undefined,variant:'deepPurple'};PlanCard.displayName='PlanCard';var _default=PlanCard;exports["default"]=_default;
@@ -1 +1 @@
1
- var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireDefault(require("react"));var _styledComponents=_interopRequireWildcard(require("styled-components"));var _propTypes=require("prop-types");var _PlanCard=require("./PlanCard");var _Tag=_interopRequireDefault(require("../../../Tag"));var _themeReader=_interopRequireDefault(require("../../../Theme/helpers/themeReader"));var _excluded=["children"];var _templateObject,_templateObject2;function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var StyledTag=(0,_styledComponents["default"])(_Tag["default"].Informative)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n position: absolute;\n align-items: center;\n justify-content: center;\n\n ","\n"])),function(props){var _theme=(0,_themeReader["default"])(props),plan=_theme.components.card.plan;return(0,_styledComponents.css)(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n top: ","px;\n left: ","px;\n "])),plan.tag.position.top+_PlanCard.PLAN_LINE_HEIGHT,plan.tag.position.left);});var PlanCardTag=function PlanCardTag(_ref){var children=_ref.children,rest=(0,_objectWithoutProperties2["default"])(_ref,_excluded);return _react["default"].createElement(StyledTag,rest,children);};PlanCardTag.displayName='PlanCard.Tag';PlanCardTag.propTypes={children:_propTypes.node.isRequired};var _default=PlanCardTag;exports["default"]=_default;
1
+ var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireDefault(require("react"));var _styledComponents=_interopRequireWildcard(require("styled-components"));var _propTypes=require("prop-types");var _PlanCard=require("./PlanCard");var _Tag=_interopRequireDefault(require("../../../Tag"));var _excluded=["children"];var _templateObject,_templateObject2;function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var StyledTag=(0,_styledComponents["default"])(_Tag["default"].Informative).attrs(function(){return{small:true};})(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n position: absolute;\n align-items: center;\n justify-content: center;\n\n ","\n"])),function(props){var plan=props.theme.yoga.components.card.plan;return(0,_styledComponents.css)(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n top: ","px;\n left: ","px;\n "])),plan.tag.position.top+_PlanCard.PLAN_LINE_HEIGHT,plan.tag.position.left);});var PlanCardTag=function PlanCardTag(_ref){var children=_ref.children,rest=(0,_objectWithoutProperties2["default"])(_ref,_excluded);return _react["default"].createElement(StyledTag,rest,children);};PlanCardTag.displayName='PlanCard.Tag';PlanCardTag.propTypes={children:_propTypes.node.isRequired};var _default=PlanCardTag;exports["default"]=_default;
@@ -21,7 +21,7 @@ var _Divider = _interopRequireDefault(require("../../../Divider"));
21
21
 
22
22
  var _excluded = ["title", "subtitle", "description", "currency", "suffix", "price", "period", "children"];
23
23
 
24
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
24
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
25
25
 
26
26
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
27
27
 
@@ -33,24 +33,25 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
33
33
 
34
34
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
35
35
 
36
- var Title = (0, _styledComponents["default"])(_Text["default"].Medium)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (props) {
36
+ var Wrapper = (0, _styledComponents["default"])(_Content["default"])(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n flex: 1;\n"])));
37
+ var Title = (0, _styledComponents["default"])(_Text["default"].Medium)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (props) {
37
38
  var _theme = (0, _themeReader["default"])(props),
38
39
  _theme$components = _theme.components,
39
40
  card = _theme$components.card,
40
41
  cardweb = _theme$components.cardweb;
41
42
 
42
- return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n color: ", ";\n margin-bottom: ", "px;\n line-height: ", "px;\n "])), card.plan.title.color, cardweb.plan.title.margin.bottom, cardweb.plan.title.lineHeight);
43
+ return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n color: ", ";\n margin-bottom: ", "px;\n line-height: ", "px;\n "])), card.plan.title.color, cardweb.plan.title.margin.bottom, cardweb.plan.title.lineHeight);
43
44
  });
44
- var Description = (0, _styledComponents["default"])(_Text["default"].Small)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n height: 40px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n\n color: ", ";\n\n overflow: hidden;\n text-overflow: ellipsis;\n text-overflow: -o-ellipsis-lastline;\n"])), _themeReader["default"].components.card.plan.description.color);
45
+ var Description = (0, _styledComponents["default"])(_Text["default"].Small)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n height: 40px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n\n color: ", ";\n\n overflow: hidden;\n text-overflow: ellipsis;\n text-overflow: -o-ellipsis-lastline;\n"])), _themeReader["default"].components.card.plan.description.color);
45
46
 
46
- var Price = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n display: flex;\n\n ", "\n"])), function (props) {
47
+ var Price = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n display: flex;\n\n ", "\n"])), function (props) {
47
48
  var _theme2 = (0, _themeReader["default"])(props),
48
49
  cardweb = _theme2.components.cardweb;
49
50
 
50
- return (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n "])), cardweb.plan.price.margin.bottom);
51
+ return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n "])), cardweb.plan.price.margin.bottom);
51
52
  });
52
53
 
53
- var EnhancePrice = (0, _styledComponents["default"])(_Text["default"].Medium)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n align-self: center;\n"])));
54
+ var EnhancePrice = (0, _styledComponents["default"])(_Text["default"].Medium)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n align-self: center;\n"])));
54
55
 
55
56
  var PlanCardContent = function PlanCardContent(_ref) {
56
57
  var title = _ref.title,
@@ -63,7 +64,7 @@ var PlanCardContent = function PlanCardContent(_ref) {
63
64
  children = _ref.children,
64
65
  rest = _objectWithoutPropertiesLoose(_ref, _excluded);
65
66
 
66
- return /*#__PURE__*/_react["default"].createElement(_Content["default"], rest, subtitle && /*#__PURE__*/_react["default"].createElement(_Subtitle["default"], null, subtitle), title && /*#__PURE__*/_react["default"].createElement(Title, null, title), description && /*#__PURE__*/_react["default"].createElement(Description, null, description), /*#__PURE__*/_react["default"].createElement(Price, null, currency && /*#__PURE__*/_react["default"].createElement(_Text["default"].H4, {
67
+ return /*#__PURE__*/_react["default"].createElement(Wrapper, rest, subtitle && /*#__PURE__*/_react["default"].createElement(_Subtitle["default"], null, subtitle), title && /*#__PURE__*/_react["default"].createElement(Title, null, title), description && /*#__PURE__*/_react["default"].createElement(Description, null, description), /*#__PURE__*/_react["default"].createElement(Price, null, currency && /*#__PURE__*/_react["default"].createElement(_Text["default"].H4, {
67
68
  as: "sup"
68
69
  }, currency), price && /*#__PURE__*/_react["default"].createElement(_Text["default"].H4, {
69
70
  as: "strong"
@@ -32,11 +32,11 @@ var List = _styledComponents["default"].ul(_templateObject2 || (_templateObject2
32
32
 
33
33
  exports.List = List;
34
34
 
35
- var IconWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n margin-right: ", "px;\n"])), cardweb.plan.list.item.icon.margin.right);
35
+ var IconWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n display: flex;\n margin-right: ", "px;\n"])), cardweb.plan.list.item.icon.margin.right);
36
36
 
37
- var Item = _styledComponents["default"].li(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n"])), card.plan.list.item.margin.bottom);
37
+ var Item = _styledComponents["default"].li(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n :not(:last-child) {\n margin-bottom: ", "px;\n }\n"])), card.plan.list.item.margin.bottom);
38
38
 
39
- var Wrapper = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n display: flex;\n min-width: 0;\n\n svg {\n flex-shrink: 0;\n }\n"])));
39
+ 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"])));
40
40
 
41
41
  var ItemText = (0, _styledComponents["default"])(_Text["default"].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);
42
42
 
@@ -9,8 +9,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
9
 
10
10
  var _propTypes = require("prop-types");
11
11
 
12
- var _themeReader = _interopRequireDefault(require("../../../Theme/helpers/themeReader"));
13
-
14
12
  var _excluded = ["children", "variant"];
15
13
 
16
14
  var _templateObject, _templateObject2, _templateObject3;
@@ -28,14 +26,10 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
28
26
  var PLAN_LINE_HEIGHT = 8;
29
27
  exports.PLAN_LINE_HEIGHT = PLAN_LINE_HEIGHT;
30
28
 
31
- var Plan = _styledComponents["default"].article(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: inline-block;\n position: relative;\n max-width: 312px;\n\n overflow: hidden;\n\n ", "\n"])), function (props) {
32
- var _theme = (0, _themeReader["default"])(props),
33
- colors = _theme.colors,
34
- _theme$components$car = _theme.components.card,
35
- plan = _theme$components$car.plan,
36
- elevation = _theme$components$car.elevation;
37
-
38
- return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n padding: ", "px ", "px\n ", "px ", "px;\n\n border-radius: ", "px;\n\n background-color: ", ";\n\n box-shadow: ", ";\n "])), plan.padding.top + PLAN_LINE_HEIGHT, plan.padding.right, plan.padding.bottom, plan.padding.left, plan.radius, colors.white, elevation);
29
+ var Plan = _styledComponents["default"].article(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n max-width: 312px;\n\n overflow: hidden;\n\n ", "\n"])), function (props) {
30
+ var theme = props.theme.yoga;
31
+ var plan = theme.components.card.plan;
32
+ return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n padding: ", "px ", "px\n ", "px ", "px;\n border: ", "px solid ", ";\n border-radius: ", "px;\n\n background-color: ", ";\n "])), plan.padding.top, plan.padding.right, plan.padding.bottom, plan.padding.left, theme.borders.small, theme.colors.light, plan.radius, theme.colors.white);
39
33
  });
40
34
 
41
35
  var Border = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n\n display: inline-block;\n width: 100%;\n\n height: ", "px;\n background-color: ", ";\n"])), PLAN_LINE_HEIGHT, function (_ref) {
@@ -9,8 +9,6 @@ var _PlanCard = require("./PlanCard");
9
9
 
10
10
  var _Tag = _interopRequireDefault(require("../../../Tag"));
11
11
 
12
- var _themeReader = _interopRequireDefault(require("../../../Theme/helpers/themeReader"));
13
-
14
12
  var _templateObject, _templateObject2;
15
13
 
16
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -21,10 +19,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
21
19
 
22
20
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
23
21
 
24
- var StyledTag = (0, _styledComponents["default"])(_Tag["default"].Informative)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n ", "\n"])), function (props) {
25
- var _theme = (0, _themeReader["default"])(props),
26
- plan = _theme.components.card.plan;
27
-
22
+ var StyledTag = (0, _styledComponents["default"])(_Tag["default"].Informative).attrs(function () {
23
+ return {
24
+ small: true
25
+ };
26
+ })(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n ", "\n"])), function (props) {
27
+ var plan = props.theme.yoga.components.card.plan;
28
28
  return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n top: ", "px;\n left: ", "px;\n "])), plan.tag.position.top + _PlanCard.PLAN_LINE_HEIGHT, plan.tag.position.left);
29
29
  });
30
30
  StyledTag.displayName = 'PlanCard.Tag';
@@ -17,7 +17,7 @@ var _hooks = require("../../hooks");
17
17
 
18
18
  var _ = require("../..");
19
19
 
20
- var _excluded = ["isOpen", "children", "onClose"];
20
+ var _excluded = ["isOpen", "hideCloseButton", "children", "onClose"];
21
21
 
22
22
  var _templateObject, _templateObject2;
23
23
 
@@ -47,12 +47,14 @@ var Overlay = _styledComponents["default"].div(_templateObject2 || (_templateObj
47
47
 
48
48
  var Dialog = function Dialog(_ref3) {
49
49
  var isOpen = _ref3.isOpen,
50
+ hideCloseButton = _ref3.hideCloseButton,
50
51
  children = _ref3.children,
51
52
  onClose = _ref3.onClose,
52
53
  props = _objectWithoutPropertiesLoose(_ref3, _excluded);
53
54
 
54
55
  var dialogRef = (0, _react.useRef)(null);
55
56
  var dialogElement = (0, _hooks.usePortal)('dialog');
57
+ var isCloseButtonVisible = onClose && !hideCloseButton;
56
58
  var closeDialog = (0, _react.useCallback)(function (e) {
57
59
  if (dialogRef.current === e.target && isOpen && onClose) {
58
60
  onClose(e);
@@ -79,7 +81,7 @@ var Dialog = function Dialog(_ref3) {
79
81
  ref: dialogRef
80
82
  }, /*#__PURE__*/_react["default"].createElement(StyledDialog, _extends({
81
83
  onClose: onClose
82
- }, props), onClose && /*#__PURE__*/_react["default"].createElement(_.Box, {
84
+ }, props), isCloseButtonVisible && /*#__PURE__*/_react["default"].createElement(_.Box, {
83
85
  d: "flex",
84
86
  justifyContent: "flex-end",
85
87
  w: "100%"
@@ -94,12 +96,16 @@ Dialog.propTypes = {
94
96
  /** Control the dialog visibility. */
95
97
  isOpen: _propTypes.bool,
96
98
 
99
+ /** Hide the close button when onClose prop is defined. */
100
+ hideCloseButton: _propTypes.bool,
101
+
97
102
  /** Function to close the dialog. */
98
103
  onClose: _propTypes.func,
99
104
  children: _propTypes.node.isRequired
100
105
  };
101
106
  Dialog.defaultProps = {
102
107
  isOpen: false,
108
+ hideCloseButton: false,
103
109
  onClose: undefined
104
110
  };
105
111
  Dialog.displayName = 'Dialog';
@@ -67,4 +67,12 @@ describe('<Dialog />', function () {
67
67
 
68
68
  expect(onCloseMock).toHaveBeenCalledTimes(1);
69
69
  });
70
+ it('should hide the close button when hideCloseButton prop is true', function () {
71
+ (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], {
72
+ isOpen: true,
73
+ hideCloseButton: true,
74
+ onClose: function onClose() {}
75
+ }, /*#__PURE__*/_react["default"].createElement(_2["default"].Header, null, "Title"))));
76
+ expect(_react2.screen.queryByRole('button')).toBeNull();
77
+ });
70
78
  });
@@ -1,5 +1,7 @@
1
1
  var _templateObject;
2
2
 
3
+ 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); }
4
+
3
5
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
4
6
 
5
7
  import React from 'react';
@@ -12,7 +14,9 @@ var StyledBottomSheet = styled(Dialog)(_templateObject || (_templateObject = _ta
12
14
  });
13
15
 
14
16
  var BottomSheet = function BottomSheet(props) {
15
- return /*#__PURE__*/React.createElement(StyledBottomSheet, props);
17
+ return /*#__PURE__*/React.createElement(StyledBottomSheet, _extends({
18
+ hideCloseButton: true
19
+ }, props));
16
20
  };
17
21
 
18
22
  BottomSheet.propTypes = {
@@ -30,4 +30,19 @@ describe('<BottomSheet />', function () {
30
30
  fireEvent.click(button);
31
31
  expect(onActionMock).toHaveBeenCalledTimes(1);
32
32
  });
33
+ it('should hide the close button', function () {
34
+ render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BottomSheet, {
35
+ isOpen: true,
36
+ onClose: function onClose() {}
37
+ }, /*#__PURE__*/React.createElement(BottomSheet.Header, null, "Title"))));
38
+ expect(screen.queryByRole('button')).toBeNull();
39
+ });
40
+ it('should show the close button', function () {
41
+ render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BottomSheet, {
42
+ isOpen: true,
43
+ hideCloseButton: false,
44
+ onClose: function onClose() {}
45
+ }, /*#__PURE__*/React.createElement(BottomSheet.Header, null, "Title"))));
46
+ expect(screen.getByRole('button')).not.toBeNull();
47
+ });
33
48
  });
@@ -6,7 +6,6 @@ var CardNative = function CardNative(_ref) {
6
6
  plan: {
7
7
  title: {
8
8
  margin: {
9
- top: spacing.xxsmall,
10
9
  bottom: spacing.xxsmall
11
10
  },
12
11
  lineHeight: lineHeights.medium
@@ -34,7 +33,7 @@ var CardNative = function CardNative(_ref) {
34
33
  actions: {
35
34
  buttonText: {
36
35
  margin: {
37
- top: spacing.medium
36
+ top: spacing.xsmall
38
37
  }
39
38
  },
40
39
  margin: {
@@ -22,15 +22,15 @@ var Card = function Card(_ref) {
22
22
  plan: {
23
23
  padding: {
24
24
  top: spacing.xxxlarge,
25
- right: spacing.medium,
26
- bottom: spacing.xlarge,
27
- left: spacing.medium
25
+ right: spacing.large,
26
+ bottom: spacing.large,
27
+ left: spacing.large
28
28
  },
29
29
  radius: 16,
30
30
  tag: {
31
31
  position: {
32
- top: spacing.medium,
33
- left: spacing.medium
32
+ top: spacing.large,
33
+ left: spacing.large
34
34
  }
35
35
  },
36
36
  subtitle: {
@@ -21,7 +21,7 @@ var CardWeb = function CardWeb(_ref) {
21
21
  item: {
22
22
  icon: {
23
23
  margin: {
24
- right: spacing.xsmall
24
+ right: spacing.xxsmall
25
25
  }
26
26
  }
27
27
  }
@@ -33,7 +33,7 @@ var CardWeb = function CardWeb(_ref) {
33
33
  }
34
34
  },
35
35
  margin: {
36
- top: spacing.xxsmall
36
+ top: spacing.large
37
37
  }
38
38
  }
39
39
  }
@@ -20,7 +20,7 @@ var Title = styled(Text.Medium)(_templateObject || (_templateObject = _taggedTem
20
20
  cardnative = _theme$components.cardnative,
21
21
  card = _theme$components.card;
22
22
 
23
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n color: ", ";\n margin-top: ", "px;\n margin-bottom: ", "px;\n line-height: ", "px;\n "])), card.plan.title.color, cardnative.plan.title.margin.top, cardnative.plan.title.margin.bottom, cardnative.plan.title.lineHeight);
23
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n color: ", ";\n margin-bottom: ", "px;\n line-height: ", "px;\n "])), card.plan.title.color, cardnative.plan.title.margin.bottom, cardnative.plan.title.lineHeight);
24
24
  });
25
25
  var Description = styled(Text.Small)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n height: 40px;\n\n color: ", ";\n"])), theme.components.card.plan.description.color);
26
26
  var Price = styled.View(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n flex-direction: row;\n\n ", "\n"])), function (props) {
@@ -9,15 +9,12 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
9
9
  import React from 'react';
10
10
  import styled, { css } from 'styled-components';
11
11
  import { node, oneOf } from 'prop-types';
12
- import theme from '../../../Theme/helpers/themeReader';
13
- import Card from '../Card';
12
+ import Box from '../../../Box';
14
13
  export var PLAN_LINE_HEIGHT = 8;
15
- var Plan = styled(Card)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n max-width: 312px;\n width: 100%;\n position: relative;\n\n ", "\n"])), function (props) {
16
- var _theme = theme(props),
17
- colors = _theme.colors,
18
- plan = _theme.components.card.plan;
19
-
20
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n padding: ", "px ", "px\n ", "px ", "px;\n\n border-radius: ", "px;\n\n background-color: ", ";\n "])), plan.padding.top, plan.padding.right, plan.padding.bottom, plan.padding.left, plan.radius, colors.white);
14
+ var Plan = styled(Box)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n max-width: 312px;\n width: 100%;\n position: relative;\n overflow: hidden;\n\n ", "\n"])), function (props) {
15
+ var theme = props.theme.yoga;
16
+ var plan = theme.components.card.plan;
17
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n padding: ", "px ", "px\n ", "px ", "px;\n border: ", "px solid ", ";\n border-radius: ", "px;\n\n background-color: ", ";\n "])), plan.padding.top, plan.padding.right, plan.padding.bottom, plan.padding.left, theme.borders.small, theme.colors.light, plan.radius, theme.colors.white);
21
18
  });
22
19
  var Border = styled.View(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n\n height: 8px;\n background-color: ", ";\n"])), function (_ref) {
23
20
  var variant = _ref.variant,
@@ -33,9 +30,9 @@ var PlanCard = function PlanCard(_ref2) {
33
30
  variant = _ref2.variant,
34
31
  rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
35
32
 
36
- return /*#__PURE__*/React.createElement(Plan, rest, /*#__PURE__*/React.createElement(Border, {
33
+ return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Plan, rest, /*#__PURE__*/React.createElement(Border, {
37
34
  variant: variant
38
- }), children);
35
+ }), children));
39
36
  };
40
37
 
41
38
  PlanCard.propTypes = {
@@ -11,11 +11,12 @@ import styled, { css } from 'styled-components';
11
11
  import { node } from 'prop-types';
12
12
  import { PLAN_LINE_HEIGHT } from './PlanCard';
13
13
  import Tag from '../../../Tag';
14
- import theme from '../../../Theme/helpers/themeReader';
15
- var StyledTag = styled(Tag.Informative)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n position: absolute;\n align-items: center;\n justify-content: center;\n\n ", "\n"])), function (props) {
16
- var _theme = theme(props),
17
- plan = _theme.components.card.plan;
18
-
14
+ var StyledTag = styled(Tag.Informative).attrs(function () {
15
+ return {
16
+ small: true
17
+ };
18
+ })(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n position: absolute;\n align-items: center;\n justify-content: center;\n\n ", "\n"])), function (props) {
19
+ var plan = props.theme.yoga.components.card.plan;
19
20
  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n top: ", "px;\n left: ", "px;\n "])), plan.tag.position.top + PLAN_LINE_HEIGHT, plan.tag.position.left);
20
21
  });
21
22
 
@@ -1,6 +1,6 @@
1
1
  var _excluded = ["title", "subtitle", "description", "currency", "suffix", "price", "period", "children"];
2
2
 
3
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
3
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
4
4
 
5
5
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
6
6
 
@@ -14,22 +14,23 @@ import Text from '../../../Text';
14
14
  import Content from '../Card/Content';
15
15
  import Subtitle from './Subtitle';
16
16
  import Divider from '../../../Divider';
17
- var Title = styled(Text.Medium)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (props) {
17
+ var Wrapper = styled(Content)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n flex: 1;\n"])));
18
+ var Title = styled(Text.Medium)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (props) {
18
19
  var _theme = theme(props),
19
20
  _theme$components = _theme.components,
20
21
  card = _theme$components.card,
21
22
  cardweb = _theme$components.cardweb;
22
23
 
23
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n color: ", ";\n margin-bottom: ", "px;\n line-height: ", "px;\n "])), card.plan.title.color, cardweb.plan.title.margin.bottom, cardweb.plan.title.lineHeight);
24
+ return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n color: ", ";\n margin-bottom: ", "px;\n line-height: ", "px;\n "])), card.plan.title.color, cardweb.plan.title.margin.bottom, cardweb.plan.title.lineHeight);
24
25
  });
25
- var Description = styled(Text.Small)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n height: 40px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n\n color: ", ";\n\n overflow: hidden;\n text-overflow: ellipsis;\n text-overflow: -o-ellipsis-lastline;\n"])), theme.components.card.plan.description.color);
26
- var Price = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n display: flex;\n\n ", "\n"])), function (props) {
26
+ var Description = styled(Text.Small)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n height: 40px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n\n color: ", ";\n\n overflow: hidden;\n text-overflow: ellipsis;\n text-overflow: -o-ellipsis-lastline;\n"])), theme.components.card.plan.description.color);
27
+ var Price = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n display: flex;\n\n ", "\n"])), function (props) {
27
28
  var _theme2 = theme(props),
28
29
  cardweb = _theme2.components.cardweb;
29
30
 
30
- return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n "])), cardweb.plan.price.margin.bottom);
31
+ return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n "])), cardweb.plan.price.margin.bottom);
31
32
  });
32
- var EnhancePrice = styled(Text.Medium)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n align-self: center;\n"])));
33
+ var EnhancePrice = styled(Text.Medium)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n align-self: center;\n"])));
33
34
 
34
35
  var PlanCardContent = function PlanCardContent(_ref) {
35
36
  var title = _ref.title,
@@ -42,7 +43,7 @@ var PlanCardContent = function PlanCardContent(_ref) {
42
43
  children = _ref.children,
43
44
  rest = _objectWithoutPropertiesLoose(_ref, _excluded);
44
45
 
45
- return /*#__PURE__*/React.createElement(Content, rest, subtitle && /*#__PURE__*/React.createElement(Subtitle, null, subtitle), title && /*#__PURE__*/React.createElement(Title, null, title), description && /*#__PURE__*/React.createElement(Description, null, description), /*#__PURE__*/React.createElement(Price, null, currency && /*#__PURE__*/React.createElement(Text.H4, {
46
+ return /*#__PURE__*/React.createElement(Wrapper, rest, subtitle && /*#__PURE__*/React.createElement(Subtitle, null, subtitle), title && /*#__PURE__*/React.createElement(Title, null, title), description && /*#__PURE__*/React.createElement(Description, null, description), /*#__PURE__*/React.createElement(Price, null, currency && /*#__PURE__*/React.createElement(Text.H4, {
46
47
  as: "sup"
47
48
  }, currency), price && /*#__PURE__*/React.createElement(Text.H4, {
48
49
  as: "strong"
@@ -12,9 +12,9 @@ var _theme$components = theme.components,
12
12
  cardweb = _theme$components.cardweb;
13
13
  var truncateStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"])));
14
14
  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);
15
- var IconWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n margin-right: ", "px;\n"])), cardweb.plan.list.item.icon.margin.right);
16
- var Item = styled.li(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n"])), card.plan.list.item.margin.bottom);
17
- var Wrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n display: flex;\n min-width: 0;\n\n svg {\n flex-shrink: 0;\n }\n"])));
15
+ var IconWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n display: flex;\n margin-right: ", "px;\n"])), cardweb.plan.list.item.icon.margin.right);
16
+ var Item = styled.li(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n :not(:last-child) {\n margin-bottom: ", "px;\n }\n"])), card.plan.list.item.margin.bottom);
17
+ 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"])));
18
18
  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);
19
19
  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);
20
20
  var ListItem = withTheme(function (_ref) {
@@ -9,16 +9,11 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
9
9
  import React from 'react';
10
10
  import styled, { css } from 'styled-components';
11
11
  import { node, oneOf } from 'prop-types';
12
- import theme from '../../../Theme/helpers/themeReader';
13
12
  export var PLAN_LINE_HEIGHT = 8;
14
- var Plan = styled.article(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: inline-block;\n position: relative;\n max-width: 312px;\n\n overflow: hidden;\n\n ", "\n"])), function (props) {
15
- var _theme = theme(props),
16
- colors = _theme.colors,
17
- _theme$components$car = _theme.components.card,
18
- plan = _theme$components$car.plan,
19
- elevation = _theme$components$car.elevation;
20
-
21
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n padding: ", "px ", "px\n ", "px ", "px;\n\n border-radius: ", "px;\n\n background-color: ", ";\n\n box-shadow: ", ";\n "])), plan.padding.top + PLAN_LINE_HEIGHT, plan.padding.right, plan.padding.bottom, plan.padding.left, plan.radius, colors.white, elevation);
13
+ var Plan = styled.article(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n max-width: 312px;\n\n overflow: hidden;\n\n ", "\n"])), function (props) {
14
+ var theme = props.theme.yoga;
15
+ var plan = theme.components.card.plan;
16
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n padding: ", "px ", "px\n ", "px ", "px;\n border: ", "px solid ", ";\n border-radius: ", "px;\n\n background-color: ", ";\n "])), plan.padding.top, plan.padding.right, plan.padding.bottom, plan.padding.left, theme.borders.small, theme.colors.light, plan.radius, theme.colors.white);
22
17
  });
23
18
  var Border = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n\n display: inline-block;\n width: 100%;\n\n height: ", "px;\n background-color: ", ";\n"])), PLAN_LINE_HEIGHT, function (_ref) {
24
19
  var variant = _ref.variant,
@@ -5,11 +5,12 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
5
5
  import styled, { css } from 'styled-components';
6
6
  import { PLAN_LINE_HEIGHT } from './PlanCard';
7
7
  import Tag from '../../../Tag';
8
- import theme from '../../../Theme/helpers/themeReader';
9
- var StyledTag = styled(Tag.Informative)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n ", "\n"])), function (props) {
10
- var _theme = theme(props),
11
- plan = _theme.components.card.plan;
12
-
8
+ var StyledTag = styled(Tag.Informative).attrs(function () {
9
+ return {
10
+ small: true
11
+ };
12
+ })(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n ", "\n"])), function (props) {
13
+ var plan = props.theme.yoga.components.card.plan;
13
14
  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n top: ", "px;\n left: ", "px;\n "])), plan.tag.position.top + PLAN_LINE_HEIGHT, plan.tag.position.left);
14
15
  });
15
16
  StyledTag.displayName = 'PlanCard.Tag';
@@ -1,4 +1,4 @@
1
- var _excluded = ["isOpen", "children", "onClose"];
1
+ var _excluded = ["isOpen", "hideCloseButton", "children", "onClose"];
2
2
 
3
3
  var _templateObject, _templateObject2;
4
4
 
@@ -27,12 +27,14 @@ var Overlay = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplate
27
27
 
28
28
  var Dialog = function Dialog(_ref3) {
29
29
  var isOpen = _ref3.isOpen,
30
+ hideCloseButton = _ref3.hideCloseButton,
30
31
  children = _ref3.children,
31
32
  onClose = _ref3.onClose,
32
33
  props = _objectWithoutPropertiesLoose(_ref3, _excluded);
33
34
 
34
35
  var dialogRef = useRef(null);
35
36
  var dialogElement = usePortal('dialog');
37
+ var isCloseButtonVisible = onClose && !hideCloseButton;
36
38
  var closeDialog = useCallback(function (e) {
37
39
  if (dialogRef.current === e.target && isOpen && onClose) {
38
40
  onClose(e);
@@ -59,7 +61,7 @@ var Dialog = function Dialog(_ref3) {
59
61
  ref: dialogRef
60
62
  }, /*#__PURE__*/React.createElement(StyledDialog, _extends({
61
63
  onClose: onClose
62
- }, props), onClose && /*#__PURE__*/React.createElement(Box, {
64
+ }, props), isCloseButtonVisible && /*#__PURE__*/React.createElement(Box, {
63
65
  d: "flex",
64
66
  justifyContent: "flex-end",
65
67
  w: "100%"
@@ -74,12 +76,16 @@ Dialog.propTypes = {
74
76
  /** Control the dialog visibility. */
75
77
  isOpen: bool,
76
78
 
79
+ /** Hide the close button when onClose prop is defined. */
80
+ hideCloseButton: bool,
81
+
77
82
  /** Function to close the dialog. */
78
83
  onClose: func,
79
84
  children: node.isRequired
80
85
  };
81
86
  Dialog.defaultProps = {
82
87
  isOpen: false,
88
+ hideCloseButton: false,
83
89
  onClose: undefined
84
90
  };
85
91
  Dialog.displayName = 'Dialog';
@@ -51,4 +51,12 @@ describe('<Dialog />', function () {
51
51
  fireEvent.click(button);
52
52
  expect(onCloseMock).toHaveBeenCalledTimes(1);
53
53
  });
54
+ it('should hide the close button when hideCloseButton prop is true', function () {
55
+ render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dialog, {
56
+ isOpen: true,
57
+ hideCloseButton: true,
58
+ onClose: function onClose() {}
59
+ }, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title"))));
60
+ expect(screen.queryByRole('button')).toBeNull();
61
+ });
54
62
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gympass/yoga",
3
- "version": "7.42.2",
3
+ "version": "7.45.0",
4
4
  "description": "Gympass component library",
5
5
  "main": "./cjs",
6
6
  "sideEffects": false,
@@ -28,7 +28,7 @@
28
28
  "@gympass/yoga-common": "^1.1.1",
29
29
  "@gympass/yoga-helpers": "^1.0.3",
30
30
  "@gympass/yoga-icons": "^1.5.0",
31
- "@gympass/yoga-illustrations": "^0.1.1",
31
+ "@gympass/yoga-illustrations": "^0.5.0",
32
32
  "@gympass/yoga-system": "^0.10.2",
33
33
  "@gympass/yoga-tokens": "^3.1.4",
34
34
  "@ptomasroos/react-native-multi-slider": "^1.0.0",
@@ -51,7 +51,7 @@
51
51
  "react": ">=16",
52
52
  "styled-components": "^4.4.0"
53
53
  },
54
- "gitHead": "e1a2c062cda24d711eb3e9b227df53973e97a96f",
54
+ "gitHead": "4e607bdc60a2d1a57338f2294debb4be08341573",
55
55
  "module": "./esm",
56
56
  "private": false,
57
57
  "react-native": "./cjs/index.native.js"