@gympass/yoga 7.82.1 → 7.83.0

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

@@ -34,35 +34,45 @@ var List = _styledComponents["default"].ul(_templateObject2 || (_templateObject2
 
 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 IconWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: ", "px;\n  min-height: ", "px;\n"])), cardweb.plan.list.item.icon.margin.right, function (props) {
+  return props.theme.yoga.spacing.medium;
+});
 
 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 = (0, _styledComponents["default"])(_Box["default"])(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  min-width: 0;\n  align-items: center;\n\n  ", "\n\n  svg {\n    flex-shrink: 0;\n  }\n"])), function (props) {
+var Wrapper = (0, _styledComponents["default"])(_Box["default"])(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n\n  ", "\n\n  svg {\n    flex-shrink: 0;\n  }\n"])), function (props) {
   return props.as === 'button' && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      border: none;\n      padding: 0;\n      background: transparent;\n      cursor: pointer;\n    "])));
 });
-var ItemText = (0, _styledComponents["default"])(_Text["default"].Small)(_templateObject7 || (_templateObject7 = _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 ItemText = (0, _styledComponents["default"])(_Text["default"].Small)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  height: 100%;\n  vertical-align: middle;\n\n  color: ", ";\n\n  ", "\n"])), card.plan.list.item.font.color, function (props) {
+  return props.truncate && truncateStyle;
+});
 
 var Button = _styledComponents["default"].button(_templateObject8 || (_templateObject8 = _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, _themeReader["default"].baseFont.family, card.plan.list.button.font.size, card.plan.list.button.font.weight, card.plan.list.button.font.color, truncateStyle);
 
-var ListItem = (0, _styledComponents.withTheme)(function (_ref) {
-  var text = _ref.text,
-      Icon = _ref.icon,
-      buttonProps = _ref.buttonProps,
-      yogaTheme = _ref.theme,
-      onClick = _ref.onClick;
+var ListItem = (0, _styledComponents.withTheme)(function (props) {
+  var text = props.text,
+      truncate = props.truncate,
+      Icon = props.icon,
+      buttonProps = props.buttonProps,
+      yogaTheme = props.theme,
+      children = props.children,
+      onClick = props.onClick;
   var wrapperProps = onClick ? {
     as: 'button',
     type: 'button',
     onClick: onClick
   } : {};
-  return /*#__PURE__*/_react["default"].createElement(Item, null, /*#__PURE__*/_react["default"].createElement(Wrapper, wrapperProps, Icon && /*#__PURE__*/_react["default"].createElement(IconWrapper, null, /*#__PURE__*/(0, _react.isValidElement)(Icon) ? Icon : /*#__PURE__*/_react["default"].createElement(Icon, {
+  return /*#__PURE__*/_react["default"].createElement(Item, null, /*#__PURE__*/_react["default"].createElement(Wrapper, wrapperProps, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    display: "flex",
+    alignItems: "flex-start"
+  }, Icon && /*#__PURE__*/_react["default"].createElement(IconWrapper, null, /*#__PURE__*/(0, _react.isValidElement)(Icon) ? Icon : /*#__PURE__*/_react["default"].createElement(Icon, {
     width: 16,
     height: 16,
     fill: yogaTheme.yoga.colors.text.primary
   })), /*#__PURE__*/_react["default"].createElement(ItemText, {
-    as: "span"
-  }, text)), Boolean(Object.keys(buttonProps).length) && /*#__PURE__*/_react["default"].createElement(Button, buttonProps));
+    as: "span",
+    truncate: truncate
+  }, text)), children), Boolean(Object.keys(buttonProps).length) && /*#__PURE__*/_react["default"].createElement(Button, buttonProps));
 });
 exports.ListItem = ListItem;
 List.displayName = 'PlanCard.List';
@@ -79,10 +89,14 @@ ListItem.propTypes = {
   buttonProps: (0, _propTypes.shape)({}),
 
   /** if provided makes the item clickable */
-  onClick: _propTypes.func
+  onClick: _propTypes.func,
+  children: _propTypes.node,
+  truncate: _propTypes.bool
 };
 ListItem.defaultProps = {
+  truncate: true,
   icon: undefined,
   buttonProps: {},
-  onClick: undefined
+  onClick: undefined,
+  children: undefined
 };

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

@@ -4,7 +4,7 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
 
 import React, { isValidElement } from 'react';
 import styled, { css, withTheme } from 'styled-components';
-import { string, node, shape, oneOfType, func } from 'prop-types';
+import { string, node, shape, oneOfType, func, bool } from 'prop-types';
 import Text from '../../../Text';
 import theme from '../../../Theme/helpers/themeReader';
 import Box from '../../../Box';
@@ -13,31 +13,41 @@ var _theme$components = theme.components,
     cardweb = _theme$components.cardweb;
 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 IconWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: ", "px;\n  min-height: ", "px;\n"])), cardweb.plan.list.item.icon.margin.right, function (props) {
+  return props.theme.yoga.spacing.medium;
+});
 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(Box)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  min-width: 0;\n  align-items: center;\n\n  ", "\n\n  svg {\n    flex-shrink: 0;\n  }\n"])), function (props) {
+var Wrapper = styled(Box)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n\n  ", "\n\n  svg {\n    flex-shrink: 0;\n  }\n"])), function (props) {
   return props.as === 'button' && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      border: none;\n      padding: 0;\n      background: transparent;\n      cursor: pointer;\n    "])));
 });
-var ItemText = styled(Text.Small)(_templateObject7 || (_templateObject7 = _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 ItemText = styled(Text.Small)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  height: 100%;\n  vertical-align: middle;\n\n  color: ", ";\n\n  ", "\n"])), card.plan.list.item.font.color, function (props) {
+  return props.truncate && truncateStyle;
+});
 var Button = styled.button(_templateObject8 || (_templateObject8 = _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);
-var ListItem = withTheme(function (_ref) {
-  var text = _ref.text,
-      Icon = _ref.icon,
-      buttonProps = _ref.buttonProps,
-      yogaTheme = _ref.theme,
-      onClick = _ref.onClick;
+var ListItem = withTheme(function (props) {
+  var text = props.text,
+      truncate = props.truncate,
+      Icon = props.icon,
+      buttonProps = props.buttonProps,
+      yogaTheme = props.theme,
+      children = props.children,
+      onClick = props.onClick;
   var wrapperProps = onClick ? {
     as: 'button',
     type: 'button',
     onClick: onClick
   } : {};
-  return /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(Wrapper, wrapperProps, Icon && /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/isValidElement(Icon) ? Icon : /*#__PURE__*/React.createElement(Icon, {
+  return /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(Wrapper, wrapperProps, /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    alignItems: "flex-start"
+  }, Icon && /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/isValidElement(Icon) ? Icon : /*#__PURE__*/React.createElement(Icon, {
     width: 16,
     height: 16,
     fill: yogaTheme.yoga.colors.text.primary
   })), /*#__PURE__*/React.createElement(ItemText, {
-    as: "span"
-  }, text)), Boolean(Object.keys(buttonProps).length) && /*#__PURE__*/React.createElement(Button, buttonProps));
+    as: "span",
+    truncate: truncate
+  }, text)), children), Boolean(Object.keys(buttonProps).length) && /*#__PURE__*/React.createElement(Button, buttonProps));
 });
 List.displayName = 'PlanCard.List';
 ListItem.displayName = 'PlanCard.ListItem';
@@ -53,11 +63,15 @@ ListItem.propTypes = {
   buttonProps: shape({}),
 
   /** if provided makes the item clickable */
-  onClick: func
+  onClick: func,
+  children: node,
+  truncate: bool
 };
 ListItem.defaultProps = {
+  truncate: true,
   icon: undefined,
   buttonProps: {},
-  onClick: undefined
+  onClick: undefined,
+  children: undefined
 };
 export { List, ListItem };

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

@@ -0,0 +1,32 @@
+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 { render, screen } from '@testing-library/react';
+import ThemeProvider from '../../../Theme';
+import { ListItem } from './List';
+var text = '2.900 gyms and studios';
+
+function setup(props) {
+  render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(ListItem, _extends({
+    text: text
+  }, props))));
+}
+
+describe('<ListItem />', function () {
+  it('should display text truncated', function () {
+    setup();
+    expect(screen.getByText(text)).toMatchSnapshot();
+  });
+  it('should not display text truncated when truncate prop is false', function () {
+    setup({
+      truncate: false
+    });
+    expect(screen.getByText(text)).toMatchSnapshot();
+  });
+  it('should display children element', function () {
+    setup({
+      children: /*#__PURE__*/React.createElement("ul", null)
+    });
+    expect(screen.getByRole('list')).toBeInTheDocument();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.82.1",
+  "version": "7.83.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -55,7 +55,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "d36f81a8328b12473195f27b2a6bc70f1c98b9de",
+  "gitHead": "7877b5478680fe119d49c0527d8400cac17de572",
   "module": "./esm",
   "types": "./typings/index.d.ts",
   "private": false,