@gympass/yoga 7.37.0 → 7.38.0

package/esm/Header/web/Header.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { ThemeProvider, Header } from '../..';
+describe('<Header />', function () {
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Header, null))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should have link', function () {
+    var gympassLink = 'https://site.gympass.com/br';
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Header, {
+      link: gympassLink
+    })));
+    screen.getByRole('link', {
+      href: gympassLink
+    });
+  });
+  it('should show custom logo', function () {
+    var CustomLogo = function CustomLogo() {
+      return /*#__PURE__*/React.createElement("div", null, "Custom logo");
+    };
+
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Header, {
+      logo: CustomLogo
+    })));
+    screen.getByText('Custom logo');
+  });
+  it('should show children', function () {
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement("p", null, "Make wellbeing universal"))));
+    screen.getByText('Make wellbeing universal');
+  });
+});

package/esm/Heading/web/Heading.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Upload2 } from '@gympass/yoga-icons/src';
+import { ThemeProvider, Heading } from '../..';
+import Title from './Title';
+import BackButton from './BackButton';
+import RightButton from './RightButton';
+
+var onClick = function onClick() {};
+
+describe('<Heading />', function () {
+  it('should match snapshot with title', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Heading, null, /*#__PURE__*/React.createElement(Title, null, "Gympass")))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with title and back button', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Heading, null, /*#__PURE__*/React.createElement(Title, null, "Gympass"), /*#__PURE__*/React.createElement(BackButton, {
+      onClick: onClick
+    })))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with all components', function () {
+    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Heading, null, /*#__PURE__*/React.createElement(Title, null, "Gympass"), /*#__PURE__*/React.createElement(BackButton, {
+      onClick: onClick
+    }), /*#__PURE__*/React.createElement(RightButton, {
+      icon: Upload2,
+      onClick: onClick
+    })))),
+        container = _render3.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with back button', function () {
+    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Heading, null, /*#__PURE__*/React.createElement(BackButton, {
+      onClick: onClick
+    })))),
+        container = _render4.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/esm/Heading/web/RightButton.js

@@ -22,6 +22,6 @@ var RightButton = function RightButton(_ref) {
 
 RightButton.propTypes = {
   onClick: PropTypes.func.isRequired,
-  icon: PropTypes.node.isRequired
+  icon: PropTypes.elementType.isRequired
 };
 export default RightButton;

package/esm/Icon/index.native.js

@@ -0,0 +1,2 @@
+import Icon from './native';
+export default Icon;

package/esm/Icon/native/Icon.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, Icon } from '../..';
+
+var Circle = function Circle(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("circle", {
+    cx: "16",
+    cy: "16",
+    r: "16"
+  }));
+};
+
+describe('Snapshots', function () {
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Icon, {
+      as: Circle,
+      width: "small",
+      height: "small",
+      fill: "stamina"
+    }))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with size prop', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Icon, {
+      as: Circle,
+      size: "small",
+      fill: "stamina"
+    }))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with system props', function () {
+    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Icon, {
+      as: Circle,
+      size: "small",
+      fill: "stamina",
+      margin: "medium",
+      elevation: "medium"
+    }))),
+        container = _render3.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/esm/Icon/native/index.js

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

package/esm/Icon/web/Icon.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider, Icon } from '../..';
+
+var Circle = function Circle(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("circle", {
+    cx: "16",
+    cy: "16",
+    r: "16"
+  }));
+};
+
+describe('Snapshots', function () {
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Icon, {
+      as: Circle,
+      width: "small",
+      height: "small",
+      fill: "stamina"
+    }))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with size prop', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Icon, {
+      as: Circle,
+      size: "small",
+      fill: "stamina"
+    }))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with system props', function () {
+    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Icon, {
+      as: Circle,
+      size: "small",
+      fill: "stamina",
+      margin: "medium",
+      elevation: "medium"
+    }))),
+        container = _render3.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/esm/Input/index.native.js

@@ -0,0 +1,6 @@
+import { Input, Password, Email, InputNumber, Tel } from './native';
+Input.Password = Password;
+Input.Email = Email;
+Input.Number = InputNumber;
+Input.Tel = Tel;
+export default Input;

package/esm/Input/native/Email.js

@@ -0,0 +1,15 @@
+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 React from 'react';
+import Input from './Input';
+var Email = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    ref: ref
+  }, props, {
+    autoCompleteType: "email",
+    autoCapitalize: "none",
+    keyboardType: "email-address",
+    textContentType: "emailAddress"
+  }));
+});
+export default Email;

package/esm/Input/native/Email.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, Input } from '../..';
+describe('<Input.Email />', function () {
+  describe('Snapshots', function () {
+    it('should match with default input', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Email, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/esm/Input/native/Helper.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+import { string, bool, number } from 'prop-types';
+import Text from '../../Text';
+var HelperWrapper = styled.View(function (_ref) {
+  var full = _ref.full,
+      input = _ref.theme.yoga.components.input;
+  return "\n    width: " + (full ? '100%' : input.width + "px") + ";\n    max-width: " + input.width + "px;\n    flex-direction: row;\n    justify-content: space-between;\n\n    margin-top: " + input.helper.margin.top + "px;\n  ";
+});
+var Info = styled(Text.Regular)(function (_ref2) {
+  var disabled = _ref2.disabled,
+      focused = _ref2.focused,
+      error = _ref2.error,
+      _ref2$theme$yoga = _ref2.theme.yoga,
+      colors = _ref2$theme$yoga.colors,
+      input = _ref2$theme$yoga.components.input;
+  return "\n    flex-wrap: wrap;\n\n    color: " + input.helper.color["default"] + ";\n    font-size: " + input.helper.font.size + "px;\n\n    " + (disabled ? "color: " + colors.text.disabled + ";" : '') + "\n    " + (focused ? "color: " + input.helper.color.focus + ";" : '') + "\n    " + (error ? "color: " + colors.feedback.attention.dark + ";" : '') + "\n  ";
+});
+var Helper = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var full = _ref3.full,
+      error = _ref3.error,
+      helper = _ref3.helper,
+      disabled = _ref3.disabled,
+      focused = _ref3.focused,
+      maxLength = _ref3.maxLength,
+      length = _ref3.length,
+      hideMaxLength = _ref3.hideMaxLength;
+  return /*#__PURE__*/React.createElement(HelperWrapper, {
+    ref: ref,
+    full: full,
+    disabled: disabled
+  }, (error || helper) && /*#__PURE__*/React.createElement(Info, {
+    disabled: disabled,
+    focused: focused,
+    error: error
+  }, error || helper), !hideMaxLength && maxLength && /*#__PURE__*/React.createElement(Info, {
+    disabled: disabled,
+    focused: focused,
+    error: error
+  }, length, "/", maxLength));
+});
+Helper.propTypes = {
+  disabled: bool,
+  error: string,
+  focused: bool,
+  full: bool,
+  helper: string,
+  maxLength: number,
+  length: number,
+  hideMaxLength: bool
+};
+Helper.defaultProps = {
+  disabled: undefined,
+  error: undefined,
+  focused: false,
+  full: false,
+  helper: undefined,
+  maxLength: undefined,
+  length: undefined,
+  hideMaxLength: false
+};
+export default Helper;

package/esm/Input/native/Input.js

@@ -0,0 +1,234 @@
+var _excluded = ["cleanable", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "textContentType", "value", "onBlur", "onClean", "onFocus", "hideMaxLength", "theme"],
+    _excluded2 = ["height"];
+
+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); }
+
+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; }
+
+import React, { useState, useEffect, useRef } from 'react';
+import { TouchableWithoutFeedback, Animated, Easing } from 'react-native';
+import { func, string, bool, number, oneOfType, shape, arrayOf } from 'prop-types';
+import styled, { withTheme } from 'styled-components';
+import { Close } from '@gympass/yoga-icons';
+import Helper from './Helper';
+var ICON_SIZE = 20;
+var Wrapper = styled.View(function (_ref) {
+  var full = _ref.full,
+      input = _ref.theme.yoga.components.input;
+  return "\n    position: relative;\n    width: " + (full ? '100%' : input.width + "px") + ";\n  ";
+});
+var Field = styled.TextInput(function (_ref2) {
+  var cleanable = _ref2.cleanable,
+      disabled = _ref2.disabled,
+      error = _ref2.error,
+      focus = _ref2.focus,
+      full = _ref2.full,
+      textContentType = _ref2.textContentType,
+      typed = _ref2.typed,
+      _ref2$theme$yoga = _ref2.theme.yoga,
+      baseFont = _ref2$theme$yoga.baseFont,
+      colors = _ref2$theme$yoga.colors,
+      input = _ref2$theme$yoga.components.input;
+  return "\n    width: " + (full ? '100%' : input.width + "px") + ";\n\n    padding-top: " + input.padding.top + "px;\n    padding-right: " + (cleanable || textContentType === 'password' ? ICON_SIZE + input.padding.right * 2 : input.padding.right) + "px;\n    padding-bottom: " + input.padding.bottom + "px;\n    padding-left: " + input.padding.left + "px;\n\n    border-radius: " + input.border.radius + "px;\n    border: " + input.border.width + "px solid " + input.border.color["default"] + ";\n\n    color: " + input.font.color["default"] + ";\n    font-family: " + baseFont.family + ";\n    font-size: " + input.font.size + "px;\n\n    " + (focus ? "border-color: " + input.border.color.typed + ";" : '') + "\n    " + (focus || typed ? "color: " + input.font.color.focus + ";" : '') + "\n    " + (error ? "border-color: " + colors.feedback.attention[1] + ";" : '') + "\n\n    " + (disabled ? "\n          border-color: " + colors.elements.lineAndBorders + ";\n          color: " + colors.text.disabled + ";\n        " : '') + "\n  ";
+});
+var LabelWrapper = styled(Animated.View)(function (_ref3) {
+  var focus = _ref3.focus,
+      typed = _ref3.typed,
+      input = _ref3.theme.yoga.components.input;
+  return "\n    position: absolute;\n    left: " + input.padding.left + "px;\n\n    transform: translateY(-" + input.padding.top / 2 + "px);\n\n    " + (focus || typed ? "left: " + (input.padding.left - 2) + "px;" : '') + "\n  ";
+});
+var Label = styled(Animated.Text)(function (_ref4) {
+  var disabled = _ref4.disabled,
+      error = _ref4.error,
+      focus = _ref4.focus,
+      typed = _ref4.typed,
+      _ref4$theme$yoga = _ref4.theme.yoga,
+      colors = _ref4$theme$yoga.colors,
+      baseFont = _ref4$theme$yoga.baseFont,
+      input = _ref4$theme$yoga.components.input;
+  return "\n    background-color: " + colors.white + ";\n\n    font-family: " + baseFont.family + ";\n    color: " + input.label.color["default"] + ";\n\n    " + (focus ? "\n          color: " + input.label.color.focus + ";\n        " : '') + "\n\n    " + (focus || typed ? "\n        padding-right: " + input.label.padding.right + "px;\n        padding-left: " + input.label.padding.left + "px;\n      " : '') + "\n\n    " + (error ? "color: " + colors.feedback.attention[1] + ";" : '') + "\n    " + (disabled ? "color: " + colors.text.disabled + ";" : '') + "\n  ";
+});
+var CloseIcon = styled.View(function (_ref5) {
+  var spacing = _ref5.theme.yoga.spacing;
+  return "\n    position: absolute;\n    top: 0px;\n    right: 0px;\n\n    padding-right: " + spacing.small + "px;\n    padding-left: " + spacing.small + "px;\n  ";
+});
+var Input = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
+  var cleanable = _ref6.cleanable,
+      disabled = _ref6.disabled,
+      error = _ref6.error,
+      full = _ref6.full,
+      helper = _ref6.helper,
+      label = _ref6.label,
+      maxLength = _ref6.maxLength,
+      readOnly = _ref6.readOnly,
+      style = _ref6.style,
+      textContentType = _ref6.textContentType,
+      value = _ref6.value,
+      _onBlur = _ref6.onBlur,
+      onClean = _ref6.onClean,
+      _onFocus = _ref6.onFocus,
+      hideMaxLength = _ref6.hideMaxLength,
+      _ref6$theme$yoga = _ref6.theme.yoga,
+      colors = _ref6$theme$yoga.colors,
+      transition = _ref6$theme$yoga.transition,
+      input = _ref6$theme$yoga.components.input,
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded);
+
+  var inputRef = ref || useRef(null);
+
+  var _useState = useState(false),
+      focused = _useState[0],
+      setFocused = _useState[1];
+
+  var _useState2 = useState(Boolean(value)),
+      typed = _useState2[0],
+      setTyped = _useState2[1];
+
+  useEffect(function () {
+    setTyped(Boolean(value));
+  }, [value]);
+
+  var iconColor = function iconColor() {
+    if (disabled) {
+      return colors.elements.backgroundAndDisabled;
+    }
+
+    if (focused) {
+      return input.font.color.focus;
+    }
+
+    return input.font.color["default"];
+  };
+
+  var _useState3 = useState(new Animated.Value(input.padding.top * 1.5)),
+      labelTopAnimation = _useState3[0];
+
+  var _useState4 = useState(new Animated.Value(input.label.font.size["default"])),
+      fontSizeAnimation = _useState4[0];
+
+  var animate = function animate(animation, toValue) {
+    return Animated.timing(animation, {
+      toValue: toValue,
+      duration: transition.duration[1],
+      easing: Easing.bezier.apply(Easing, transition.timing[0]),
+      useNativeDriver: false
+    }).start();
+  };
+
+  useEffect(function () {
+    var shouldAnimate = typed || focused;
+    animate(labelTopAnimation, shouldAnimate ? 1 : input.padding.top * 1.5);
+    animate(fontSizeAnimation, shouldAnimate ? input.label.font.size.typed : input.label.font.size["default"]);
+  }, [focused, typed]);
+
+  var _ref7 = Array.isArray(style) ? Object.assign.apply(Object, [{}].concat(style)) : style,
+      _ref7$height = _ref7.height,
+      height = _ref7$height === void 0 ? input.height : _ref7$height,
+      styles = _objectWithoutPropertiesLoose(_ref7, _excluded2);
+
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    full: full,
+    style: styles
+  }, /*#__PURE__*/React.createElement(Field, _extends({}, props, {
+    cleanable: cleanable,
+    disabled: disabled,
+    editable: !(readOnly || disabled),
+    error: error,
+    focus: focused,
+    full: full,
+    maxLength: maxLength,
+    style: {
+      height: height
+    },
+    textContentType: textContentType,
+    typed: typed,
+    value: value,
+    onFocus: function onFocus(e) {
+      setFocused(true);
+
+      _onFocus(e);
+    },
+    onBlur: function onBlur(e) {
+      setFocused(false);
+
+      _onBlur(e);
+    },
+    ref: inputRef
+  })), Boolean(label) && /*#__PURE__*/React.createElement(LabelWrapper, {
+    focus: focused,
+    pointerEvents: "none",
+    typed: typed,
+    style: {
+      top: labelTopAnimation
+    }
+  }, /*#__PURE__*/React.createElement(Label, {
+    disabled: disabled,
+    error: error,
+    focus: focused,
+    typed: typed,
+    style: {
+      fontSize: fontSizeAnimation
+    }
+  }, label)), cleanable && typed && /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+    accessibilityRole: "button",
+    onPress: function onPress() {
+      if (disabled) return;
+      onClean('');
+    }
+  }, /*#__PURE__*/React.createElement(CloseIcon, null, /*#__PURE__*/React.createElement(Close, {
+    height: input.height,
+    width: 20,
+    fill: iconColor()
+  }))), (helper || maxLength || error) && /*#__PURE__*/React.createElement(Helper, {
+    full: full,
+    error: error,
+    helper: helper,
+    focused: focused,
+    disabled: disabled,
+    maxLength: maxLength,
+    length: value.length,
+    hideMaxLength: hideMaxLength
+  }));
+});
+Input.propTypes = {
+  /** display a close icon to clean the field */
+  cleanable: bool,
+  disabled: bool,
+  error: string,
+  full: bool,
+
+  /** A helper text to be displayed below field */
+  helper: string,
+  label: string,
+
+  /** maximum length (number of characters) of value */
+  maxLength: number,
+  readOnly: bool,
+  textContentType: string,
+  value: oneOfType([string, number]),
+  style: oneOfType([shape({}), arrayOf(shape({}))]),
+  onBlur: func,
+
+  /** callback invoked when close icon is clicked */
+  onClean: func,
+  onFocus: func,
+  hideMaxLength: bool
+};
+Input.defaultProps = {
+  cleanable: true,
+  disabled: false,
+  error: undefined,
+  full: false,
+  helper: undefined,
+  label: '',
+  maxLength: undefined,
+  readOnly: false,
+  style: {},
+  textContentType: undefined,
+  value: '',
+  onBlur: function onBlur() {},
+  onClean: function onClean() {},
+  onFocus: function onFocus() {},
+  hideMaxLength: false
+};
+export default withTheme(Input);