@gympass/yoga 7.35.1 → 7.36.0

package/cjs/Feedback/Feedback.theme.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var Feedback = function Feedback() {
+  return {
+    text: {
+      maxWidth: 520
+    }
+  };
+};
+
+var _default = Feedback;
+exports["default"] = _default;

package/cjs/Feedback/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _web = _interopRequireDefault(require("./web"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = _web["default"];
+exports["default"] = _default;

package/cjs/Feedback/web/Feedback.js

@@ -0,0 +1,95 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _propTypes = require("prop-types");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _yogaIcons = require("@gympass/yoga-icons");
+
+var _Icon = _interopRequireDefault(require("../../Icon"));
+
+var _Box = _interopRequireDefault(require("../../Box"));
+
+var _Text = _interopRequireDefault(require("../../Text"));
+
+var _StyledFeedback = require("./StyledFeedback");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var ICON_SIZE = 64;
+var VARIANT_ICONS = {
+  success: {
+    as: _yogaIcons.CheckedFull,
+    fill: 'hope'
+  },
+  informative: {
+    as: _yogaIcons.AlertCircle,
+    fill: 'relax'
+  },
+  attention: {
+    as: _yogaIcons.AlertTriangle,
+    fill: 'brandingVerve'
+  }
+};
+
+function isChildFromComponent(child, component) {
+  return child.type.displayName === component.displayName;
+}
+
+function Feedback(_ref) {
+  var variant = _ref.variant,
+      title = _ref.title,
+      description = _ref.description,
+      children = _ref.children;
+  var iconProps = VARIANT_ICONS[variant];
+  var primaryButton;
+  var secondaryButton;
+
+  var titleElement = /*#__PURE__*/_react["default"].createElement(_StyledFeedback.Title, null, title);
+
+  function defineCompoundComponents() {
+    _react["default"].Children.forEach(children, function (child) {
+      if (isChildFromComponent(child, _StyledFeedback.PrimaryButton)) primaryButton = child;
+      if (isChildFromComponent(child, _StyledFeedback.SecondaryButton)) secondaryButton = child;
+      if (isChildFromComponent(child, _StyledFeedback.Title)) titleElement = child;
+    });
+  }
+
+  defineCompoundComponents();
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    ph: "medium",
+    pv: "xxlarge",
+    minHeight: "100%",
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-end",
+    bg: "white"
+  }, /*#__PURE__*/_react["default"].createElement(_StyledFeedback.Content, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({}, iconProps, {
+    size: ICON_SIZE,
+    mb: "large",
+    "data-testid": "feedback-icon"
+  })), /*#__PURE__*/_react["default"].createElement(_StyledFeedback.TextContainer, null, titleElement, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+    mt: "small",
+    color: "deep"
+  }, description)), /*#__PURE__*/_react["default"].createElement(_StyledFeedback.Actions, {
+    mt: "xxxlarge"
+  }, primaryButton, secondaryButton)));
+}
+
+Feedback.propTypes = {
+  variant: (0, _propTypes.oneOf)(Object.keys(VARIANT_ICONS)).isRequired,
+  title: _propTypes.string,
+  description: _propTypes.string.isRequired,
+  children: (0, _propTypes.oneOfType)([(0, _propTypes.arrayOf)(_propTypes.node), _propTypes.node])
+};
+Feedback.defaultProps = {
+  title: undefined,
+  children: undefined
+};
+var _default = Feedback;
+exports["default"] = _default;

package/cjs/Feedback/web/StyledFeedback.js

@@ -0,0 +1,58 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Title = exports.TextContainer = exports.SecondaryButton = exports.PrimaryButton = exports.Content = exports.Actions = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _Box = _interopRequireDefault(require("../../Box"));
+
+var _Button = _interopRequireDefault(require("../../Button"));
+
+var _Text = _interopRequireDefault(require("../../Text"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+var Content = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  @media (min-width: 769px) {\n    margin: auto;\n  }\n"])));
+
+exports.Content = Content;
+
+var TextContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "}\n"])), function (_ref) {
+  var feedback = _ref.theme.yoga.components.feedback;
+  return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      max-width: ", "px;\n    "])), feedback.text.maxWidth);
+});
+
+exports.TextContainer = TextContainer;
+var Title = (0, _styledComponents["default"])(_Text["default"].H4).attrs(function () {
+  return {
+    as: 'p'
+  };
+})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "}\n"])), function (_ref2) {
+  var fontSizes = _ref2.theme.yoga.fontSizes;
+  return (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      @media (min-width: 769px) {\n        font-size: ", "px;\n        line-height: ", "px;\n      }\n    "])), fontSizes.huge, fontSizes.huge);
+});
+exports.Title = Title;
+var Actions = (0, _styledComponents["default"])(_Box["default"])(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  ", "}\n"])), function (_ref3) {
+  var spacing = _ref3.theme.yoga.spacing;
+  return (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      flex-direction: column;\n\n      @media (min-width: 769px) {\n        flex-direction: row;\n        margin-top: ", "px;\n      }\n    "])), spacing.xxlarge);
+});
+exports.Actions = Actions;
+var buttonsStyles = (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  ", "}\n"])), function (_ref4) {
+  var spacing = _ref4.theme.yoga.spacing;
+  return (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n\n      :last-child(:not(:first-child)) {\n        margin-top: ", "px;\n      }\n\n      @media (min-width: 769px) {\n        width: auto;\n\n        :last-child(:not(:first-child)) {\n          margin-top: 0;\n          margin-left: ", "px;\n        }\n      }\n    "])), spacing.small, spacing.large);
+});
+var PrimaryButton = (0, _styledComponents["default"])(_Button["default"])(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), buttonsStyles);
+exports.PrimaryButton = PrimaryButton;
+var SecondaryButton = (0, _styledComponents["default"])(_Button["default"].Text)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), buttonsStyles);
+exports.SecondaryButton = SecondaryButton;
+Title.displayName = 'Feedback.Title';
+PrimaryButton.displayName = 'Feedback.PrimaryButton';
+SecondaryButton.displayName = 'Feedback.SecondaryButton';

package/cjs/Feedback/web/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Feedback = _interopRequireDefault(require("./Feedback"));
+
+var _StyledFeedback = require("./StyledFeedback");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+_Feedback["default"].Title = _StyledFeedback.Title;
+_Feedback["default"].PrimaryButton = _StyledFeedback.PrimaryButton;
+_Feedback["default"].SecondaryButton = _StyledFeedback.SecondaryButton;
+var _default = _Feedback["default"];
+exports["default"] = _default;

package/cjs/Theme/theme/theme.js

@@ -31,6 +31,8 @@ var _DividerTheme = _interopRequireDefault(require("./../../Divider/Divider.them
 
 var _DropdownTheme = _interopRequireDefault(require("./../../Dropdown/Dropdown.theme.js"));
 
+var _FeedbackTheme = _interopRequireDefault(require("./../../Feedback/Feedback.theme.js"));
+
 var _GridTheme = _interopRequireDefault(require("./../../Grid/Grid.theme.js"));
 
 var _HeaderTheme = _interopRequireDefault(require("./../../Header/Header.theme.js"));
@@ -81,6 +83,7 @@ var componentThemes = {
   Dialog$Dialog: _DialogTheme["default"],
   Divider$Divider: _DividerTheme["default"],
   Dropdown$Dropdown: _DropdownTheme["default"],
+  Feedback$Feedback: _FeedbackTheme["default"],
   Grid$Grid: _GridTheme["default"],
   Header$Header: _HeaderTheme["default"],
   Heading$Heading: _HeadingTheme["default"],

package/cjs/index.js

@@ -123,6 +123,10 @@ var _Heading = _interopRequireDefault(require("./Heading"));
 
 exports.Heading = _Heading["default"];
 
+var _Feedback = _interopRequireDefault(require("./Feedback"));
+
+exports.Feedback = _Feedback["default"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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); }

package/esm/Feedback/Feedback.theme.js

@@ -0,0 +1,9 @@
+var Feedback = function Feedback() {
+  return {
+    text: {
+      maxWidth: 520
+    }
+  };
+};
+
+export default Feedback;

package/esm/Feedback/index.js

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

package/esm/Feedback/web/Feedback.js

@@ -0,0 +1,79 @@
+function _extends() { _extends = Object.assign || 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 { arrayOf, node, oneOf, oneOfType, string } from 'prop-types';
+import React from 'react';
+import { CheckedFull, AlertCircle, AlertTriangle } from '@gympass/yoga-icons';
+import Icon from '../../Icon';
+import Box from '../../Box';
+import Text from '../../Text';
+import { Actions, Content, Title, PrimaryButton, SecondaryButton, TextContainer } from './StyledFeedback';
+var ICON_SIZE = 64;
+var VARIANT_ICONS = {
+  success: {
+    as: CheckedFull,
+    fill: 'hope'
+  },
+  informative: {
+    as: AlertCircle,
+    fill: 'relax'
+  },
+  attention: {
+    as: AlertTriangle,
+    fill: 'brandingVerve'
+  }
+};
+
+function isChildFromComponent(child, component) {
+  return child.type.displayName === component.displayName;
+}
+
+function Feedback(_ref) {
+  var variant = _ref.variant,
+      title = _ref.title,
+      description = _ref.description,
+      children = _ref.children;
+  var iconProps = VARIANT_ICONS[variant];
+  var primaryButton;
+  var secondaryButton;
+  var titleElement = /*#__PURE__*/React.createElement(Title, null, title);
+
+  function defineCompoundComponents() {
+    React.Children.forEach(children, function (child) {
+      if (isChildFromComponent(child, PrimaryButton)) primaryButton = child;
+      if (isChildFromComponent(child, SecondaryButton)) secondaryButton = child;
+      if (isChildFromComponent(child, Title)) titleElement = child;
+    });
+  }
+
+  defineCompoundComponents();
+  return /*#__PURE__*/React.createElement(Box, {
+    ph: "medium",
+    pv: "xxlarge",
+    minHeight: "100%",
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-end",
+    bg: "white"
+  }, /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
+    size: ICON_SIZE,
+    mb: "large",
+    "data-testid": "feedback-icon"
+  })), /*#__PURE__*/React.createElement(TextContainer, null, titleElement, /*#__PURE__*/React.createElement(Text, {
+    mt: "small",
+    color: "deep"
+  }, description)), /*#__PURE__*/React.createElement(Actions, {
+    mt: "xxxlarge"
+  }, primaryButton, secondaryButton)));
+}
+
+Feedback.propTypes = {
+  variant: oneOf(Object.keys(VARIANT_ICONS)).isRequired,
+  title: string,
+  description: string.isRequired,
+  children: oneOfType([arrayOf(node), node])
+};
+Feedback.defaultProps = {
+  title: undefined,
+  children: undefined
+};
+export default Feedback;

package/esm/Feedback/web/StyledFeedback.js

@@ -0,0 +1,34 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import styled, { css } from 'styled-components';
+import Box from '../../Box';
+import Button from '../../Button';
+import Text from '../../Text';
+export var Content = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  @media (min-width: 769px) {\n    margin: auto;\n  }\n"])));
+export var TextContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "}\n"])), function (_ref) {
+  var feedback = _ref.theme.yoga.components.feedback;
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      max-width: ", "px;\n    "])), feedback.text.maxWidth);
+});
+export var Title = styled(Text.H4).attrs(function () {
+  return {
+    as: 'p'
+  };
+})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "}\n"])), function (_ref2) {
+  var fontSizes = _ref2.theme.yoga.fontSizes;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      @media (min-width: 769px) {\n        font-size: ", "px;\n        line-height: ", "px;\n      }\n    "])), fontSizes.huge, fontSizes.huge);
+});
+export var Actions = styled(Box)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  ", "}\n"])), function (_ref3) {
+  var spacing = _ref3.theme.yoga.spacing;
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      flex-direction: column;\n\n      @media (min-width: 769px) {\n        flex-direction: row;\n        margin-top: ", "px;\n      }\n    "])), spacing.xxlarge);
+});
+var buttonsStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  ", "}\n"])), function (_ref4) {
+  var spacing = _ref4.theme.yoga.spacing;
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n\n      :last-child(:not(:first-child)) {\n        margin-top: ", "px;\n      }\n\n      @media (min-width: 769px) {\n        width: auto;\n\n        :last-child(:not(:first-child)) {\n          margin-top: 0;\n          margin-left: ", "px;\n        }\n      }\n    "])), spacing.small, spacing.large);
+});
+export var PrimaryButton = styled(Button)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), buttonsStyles);
+export var SecondaryButton = styled(Button.Text)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), buttonsStyles);
+Title.displayName = 'Feedback.Title';
+PrimaryButton.displayName = 'Feedback.PrimaryButton';
+SecondaryButton.displayName = 'Feedback.SecondaryButton';

package/esm/Feedback/web/index.js

@@ -0,0 +1,6 @@
+import Feedback from './Feedback';
+import { Title, PrimaryButton, SecondaryButton } from './StyledFeedback';
+Feedback.Title = Title;
+Feedback.PrimaryButton = PrimaryButton;
+Feedback.SecondaryButton = SecondaryButton;
+export default Feedback;

package/esm/Theme/theme/theme.js

@@ -15,6 +15,7 @@ import _componentThemes_Checkbox$CheckboxSwitch from "./../../Checkbox/CheckboxS
 import _componentThemes_Dialog$Dialog from "./../../Dialog/Dialog.theme.js";
 import _componentThemes_Divider$Divider from "./../../Divider/Divider.theme.js";
 import _componentThemes_Dropdown$Dropdown from "./../../Dropdown/Dropdown.theme.js";
+import _componentThemes_Feedback$Feedback from "./../../Feedback/Feedback.theme.js";
 import _componentThemes_Grid$Grid from "./../../Grid/Grid.theme.js";
 import _componentThemes_Header$Header from "./../../Header/Header.theme.js";
 import _componentThemes_Heading$Heading from "./../../Heading/Heading.theme.js";
@@ -45,6 +46,7 @@ var componentThemes = {
   Dialog$Dialog: _componentThemes_Dialog$Dialog,
   Divider$Divider: _componentThemes_Divider$Divider,
   Dropdown$Dropdown: _componentThemes_Dropdown$Dropdown,
+  Feedback$Feedback: _componentThemes_Feedback$Feedback,
   Grid$Grid: _componentThemes_Grid$Grid,
   Header$Header: _componentThemes_Header$Header,
   Heading$Heading: _componentThemes_Heading$Heading,

package/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.35.1",
+  "version": "7.36.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -49,7 +49,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "376ecd1c6fa5fe38ccac039ba58c9a1b8742b696",
+  "gitHead": "a0e72e8e9d72ab13d5c02db0e4c37bd5b719aad1",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"