@gympass/yoga 7.37.0 → 7.38.0

package/esm/Input/web/Password.test.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { ThemeProvider, Input } from '../..';
+describe('<Input.Password />', function () {
+  describe('Snapshots', function () {
+    it('should match with default input', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with disabled input', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        disabled: true
+      }))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with full width', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Label",
+        full: true
+      }))),
+          container = _render3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe('Events', function () {
+    it('should call onChange', function () {
+      var onChangeMock = jest.fn();
+
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        "data-testid": "input",
+        onChange: onChangeMock
+      }))),
+          getByTestId = _render4.getByTestId;
+
+      fireEvent.change(getByTestId('input'), {
+        target: {
+          value: 'foo'
+        }
+      });
+      expect(onChangeMock).toHaveBeenCalled();
+    });
+    it('should call onFocus', function () {
+      var onFocusMock = jest.fn();
+
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        "data-testid": "input",
+        onFocus: onFocusMock
+      }))),
+          getByTestId = _render5.getByTestId;
+
+      fireEvent.focus(getByTestId('input'));
+      expect(onFocusMock).toHaveBeenCalled();
+    });
+    it('should call onBlur', function () {
+      var onBlurMock = jest.fn();
+
+      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        "data-testid": "input",
+        onBlur: onBlurMock
+      }))),
+          getByTestId = _render6.getByTestId;
+
+      fireEvent.focus(getByTestId('input'));
+      fireEvent.blur(getByTestId('input'));
+      expect(onBlurMock).toHaveBeenCalled();
+    });
+  });
+  describe('visibility button', function () {
+    it('should toggle password visibility when click visibility button', function () {
+      var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        "data-testid": "input"
+      }))),
+          getByRole = _render7.getByRole,
+          getByTestId = _render7.getByTestId;
+
+      expect(getByTestId('input').type).toBe('password');
+      fireEvent.click(getByRole('button'));
+      expect(getByTestId('input').type).toBe('text');
+    });
+  });
+});

package/esm/Input/web/Tel.test.js

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

package/esm/List/index.native.js

@@ -0,0 +1,3 @@
+import { List, ListItem } from './native';
+List.Item = ListItem;
+export default List;

package/esm/List/native/List.js

@@ -0,0 +1,22 @@
+var _templateObject;
+
+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 _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import React from 'react';
+import styled from 'styled-components';
+var StyledFlatList = styled.FlatList(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+/** Lists are a continuous group of text or images. They are composed of items
+containing primary and supplemental actions, which are represented by icons and
+text. */
+
+var List = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var rest = _extends({}, _ref);
+
+  return /*#__PURE__*/React.createElement(StyledFlatList, _extends({
+    ref: ref
+  }, rest));
+});
+List.displayName = 'List';
+export default List;

package/esm/List/native/List.test.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import ThemeProvider from '../../Theme';
+import List from '..';
+var data = [{
+  key: 'Devin'
+}, {
+  key: 'Dan'
+}, {
+  key: 'Dominic'
+}, {
+  key: 'Jackson'
+}, {
+  key: 'James'
+}, {
+  key: 'Joel'
+}, {
+  key: 'John'
+}, {
+  key: 'Jillian'
+}, {
+  key: 'Jimmy'
+}, {
+  key: 'Julie'
+}];
+describe('<List />', function () {
+  describe('Snapshots', function () {
+    describe('Without props', function () {
+      it('should match snapshot with a default list', function () {
+        var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(List, {
+          data: data,
+          renderItem: function renderItem(_ref) {
+            var item = _ref.item;
+            return /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(Text, null, item.key));
+          }
+        }))),
+            container = _render.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with a small list', function () {
+        var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(List, {
+          data: data,
+          renderItem: function renderItem(_ref2) {
+            var item = _ref2.item;
+            return /*#__PURE__*/React.createElement(List.Item, {
+              small: true
+            }, /*#__PURE__*/React.createElement(Text, null, item.key));
+          }
+        }))),
+            container = _render2.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with a list without divisors', function () {
+        var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(List, {
+          data: data,
+          renderItem: function renderItem(_ref3) {
+            var item = _ref3.item;
+            return /*#__PURE__*/React.createElement(List.Item, {
+              divided: false
+            }, /*#__PURE__*/React.createElement(Text, null, item.key));
+          }
+        }))),
+            container = _render3.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with a horizontal list', function () {
+        var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(List, {
+          horizontal: true,
+          data: data,
+          renderItem: function renderItem(_ref4) {
+            var item = _ref4.item;
+            return /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(Text, null, item.key));
+          }
+        }))),
+            container = _render4.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should call onPress when selectable item is pressed', function () {
+        var a = {
+          key: 'Devin',
+          onPress: jest.fn()
+        };
+
+        var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(List, {
+          data: [a],
+          renderItem: function renderItem(_ref5) {
+            var item = _ref5.item;
+            return /*#__PURE__*/React.createElement(List.Item, {
+              onPress: item.onPress
+            }, /*#__PURE__*/React.createElement(Text, null, item.key));
+          }
+        }))),
+            getByText = _render5.getByText;
+
+        var selectableItem = getByText(a.key);
+        fireEvent.press(selectableItem);
+        expect(a.onPress).toHaveBeenCalled();
+      });
+    });
+  });
+});

package/esm/List/native/ListItem.js

@@ -0,0 +1,51 @@
+var _excluded = ["theme", "small", "divided", "onPress"];
+
+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 from 'react';
+import { TouchableHighlight } from 'react-native';
+import PropTypes from 'prop-types';
+import styled, { withTheme } from 'styled-components';
+var StyledView = styled.View(function (_ref) {
+  var divided = _ref.divided,
+      small = _ref.small,
+      list = _ref.theme.yoga.components.list;
+  return "\n  " + (divided ? "\n          border-bottom-width: " + list.border.width + "px;\n          border-bottom-color: " + list.border.color + ";\n        " : '') + "\n\n  " + (small ? "\n          padding:\n            " + list.listItem.small.padding.top + "px\n            " + list.listItem.small.padding.right + "px\n            " + list.listItem.small.padding.bottom + "px\n            " + list.listItem.small.padding.left + "px;\n        " : "\n          padding:\n            " + list.listItem.padding.top + "px\n            " + list.listItem.padding.right + "px\n            " + list.listItem.padding.bottom + "px\n            " + list.listItem.padding.left + "px;\n        ") + "\n  ";
+});
+
+var ListItem = function ListItem(_ref2) {
+  var listItem = _ref2.theme.yoga.components.list.listItem,
+      small = _ref2.small,
+      divided = _ref2.divided,
+      onPress = _ref2.onPress,
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  var Component = /*#__PURE__*/React.createElement(StyledView, _extends({
+    small: small,
+    divided: divided
+  }, rest));
+
+  if (onPress) {
+    return /*#__PURE__*/React.createElement(TouchableHighlight, {
+      onPress: onPress,
+      underlayColor: listItem.selectable.color
+    }, Component);
+  }
+
+  return Component;
+};
+
+ListItem.propTypes = {
+  small: PropTypes.bool,
+  divided: PropTypes.bool,
+  onPress: PropTypes.func
+};
+ListItem.defaultProps = {
+  small: false,
+  divided: true,
+  onPress: undefined
+};
+ListItem.displayName = 'List.Item';
+export default withTheme(ListItem);

package/esm/List/native/index.js

@@ -0,0 +1,3 @@
+import ListItem from './ListItem';
+import List from './List';
+export { List, ListItem };

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider, List } from '../..';
+describe('<List />', function () {
+  describe('Snapshots', function () {
+    describe('Without props', function () {
+      it('should match snapshot with a default list', function () {
+        var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement("div", null, "List test"))))),
+            container = _render.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with a default list and multiple items', function () {
+        var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement("div", null, "List test")), /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement("div", null, "List test"))))),
+            container = _render2.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with a default list, multiple items and no dividers', function () {
+        var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(List, {
+          divided: false
+        }, /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement("div", null, "List test")), /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement("div", null, "List test"))))),
+            container = _render3.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with a horizontal list', function () {
+        var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(List, {
+          horizontal: true
+        }, /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement("button", {
+          type: "button"
+        }, "List test"))))),
+            container = _render4.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with a horizontal list and multiple items', function () {
+        var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(List, {
+          horizontal: true
+        }, /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement("div", null, "List test")), /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement("div", null, "List test"))))),
+            container = _render5.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with a horizontal list, multiple items and no dividers', function () {
+        var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(List, {
+          horizontal: true,
+          divided: false
+        }, /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement("div", null, "List test")), /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement("div", null, "List test"))))),
+            container = _render6.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with a default list and using a link item', function () {
+        var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(List.LinkItem, null, /*#__PURE__*/React.createElement("div", null, "List test"))))),
+            container = _render7.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+  });
+});

package/esm/Progress/index.native.js

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

package/esm/Progress/native/Progress.js

@@ -0,0 +1,103 @@
+var _excluded = ["label", "max", "value", "variant"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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; }
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import React from 'react';
+import styled from 'styled-components';
+import { string, number, shape, oneOfType, oneOf } from 'prop-types';
+import { backgroundColor, borders, elevation, positions, display, spacing as systemSpacing } from '@gympass/yoga-system';
+import { charLength } from '../../shared';
+var ProgressWrapper = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_ref) {
+  var isNumber = _ref.isNumber,
+      align = _ref.align;
+  return "\n\n  " + (isNumber ? "\n      flex-direction: row;\n    " : "\n      flex-direction: column;\n    ") + "\n\n  " + (isNumber && align === 'left' ? 'flex-direction: row-reverse;' : '') + "\n  ";
+}, backgroundColor, borders, elevation, positions, display, systemSpacing);
+var ProgressBar = styled.View(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  flex-grow: 1;\n\n  margin: auto 0;\n\n  ", ";\n"])), function (_ref2) {
+  var progress = _ref2.theme.yoga.components.progress;
+  return "\n    height: " + progress.height + "px;\n\n    background-color: " + progress.backgroundColor.bar + ";\n\n    border-radius: " + progress.border.radius + "px;\n  ";
+});
+var ProgressValue = styled.View(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n\n  height: 100%;\n\n  ", "\n"])), function (_ref3) {
+  var variant = _ref3.variant,
+      width = _ref3.width,
+      _ref3$theme$yoga = _ref3.theme.yoga,
+      color = _ref3$theme$yoga.colors[variant],
+      progress = _ref3$theme$yoga.components.progress;
+  return "\n    width: " + width + "%;\n\n    background-color: " + color + ";\n\n    border-radius: " + progress.border.radius + "px;\n  ";
+});
+var Label = styled.Text(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref4) {
+  var isNumber = _ref4.isNumber,
+      align = _ref4.align,
+      _ref4$theme$yoga = _ref4.theme.yoga,
+      baseFont = _ref4$theme$yoga.baseFont,
+      spacing = _ref4$theme$yoga.spacing,
+      colors = _ref4$theme$yoga.colors,
+      progress = _ref4$theme$yoga.components.progress;
+  return "\n  font-family: " + baseFont.family + ";\n  font-size: " + progress.label.font.size + "px;\n  text-align: " + align + ";\n  color: " + colors.deep + ";\n\n  " + (isNumber ? "\n      width: 22px;\n\n      margin-" + (align === 'right' ? 'left' : 'right') + ": " + spacing.xxsmall + "px;\n    " : "\n      margin-top: " + spacing.xxxsmall + "px;\n    ") + "\n";
+});
+/** The Progress Bar is a component used to indicate a progress of an indicator
+ * of quantity.  The use of labels numeric or alphabetic can increase the user
+ * understanding. */
+
+var Progress = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
+  var label = _ref5.label,
+      max = _ref5.max,
+      value = _ref5.value,
+      variant = _ref5.variant,
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded);
+
+  var isNumber = !/[a-zA-Z]/g.test(label.value);
+  var align = label.placement || 'left';
+  return /*#__PURE__*/React.createElement(ProgressWrapper, _extends({
+    ref: ref
+  }, props, {
+    isNumber: isNumber,
+    align: align
+  }), /*#__PURE__*/React.createElement(ProgressBar, null, /*#__PURE__*/React.createElement(ProgressValue, {
+    width: value / max * 100,
+    variant: variant
+  })), Object.keys(label).length > 0 && (isNumber || label.value) && /*#__PURE__*/React.createElement(Label, {
+    isNumber: isNumber,
+    align: align
+  }, label.value));
+});
+Progress.propTypes = {
+  /** Use labels to increase users understanding. If the value is numeric, make
+   * sure it has a maximum of 3 characters */
+  label: shape({
+    value: charLength(3, oneOfType([number, string])),
+    placement: oneOf(['left', 'right'])
+  }),
+
+  /** This attribute describes how much work the task indicated by the progress
+   * element requires. The max attribute, if present, must have a value greater
+   * than zero and be a valid floating point number. The default value is 1. */
+  max: number,
+
+  /** This attribute specifies how much of the task that has been completed. It
+   * must be a valid floating point number between 0 and max, or between 0 and 1
+   * if max is omitted. If there is no value attribute, the progress bar is
+   * indeterminate; this indicates that an activity is ongoing with no
+   * indication of how long it is expected to take. */
+  value: number,
+
+  /** style the card following the theme (primary, secondary, vibin, hope,
+   * energy, relax, peace, verve, uplift, deepPurple, deep, stamina, dark,
+   * medium, light, clear, white) */
+  variant: oneOf(['primary', 'secondary', 'vibin', 'hope', 'energy', 'relax', 'peace', 'verve', 'uplift', 'deepPurple', 'stamina', 'dark', 'medium', 'deep', 'light', 'clear', 'white'])
+};
+Progress.defaultProps = {
+  label: {
+    value: undefined,
+    placement: 'left'
+  },
+  max: 1,
+  value: undefined,
+  variant: 'verve'
+};
+export default Progress;