@gympass/yoga 7.65.0 → 7.66.1

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 ? 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); }
+
+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;

package/esm/Progress/native/Progress.test.js

@@ -0,0 +1,222 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, Progress } from '../..';
+describe('<Progress />', function () {
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, null), /*#__PURE__*/React.createElement(Progress, {
+      max: 100
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 60
+    }))),
+        toJSON = _render.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot with label string', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      label: {
+        value: 'Some decription here'
+      }
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 65,
+      label: {
+        value: 'Some decription here',
+        placement: 'right'
+      }
+    }))),
+        toJSON = _render2.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot with label number', function () {
+    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      }
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 65,
+      label: {
+        value: 65,
+        placement: 'right'
+      }
+    }))),
+        toJSON = _render3.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot with all variants', function () {
+    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "primary"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "secondary"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "vibin"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "hope"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "energy"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "relax"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "peace"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "verve"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "uplift"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "deepPurple"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "stamina"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "dark"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "medium"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "deep"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "light"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "clear"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "white"
+    }))),
+        toJSON = _render4.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot with positions prop system', function () {
+    var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
+      position: "absolute",
+      top: "small",
+      left: "small"
+    }))),
+        toJSON = _render5.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot with spacing prop system', function () {
+    var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
+      m: "small",
+      padding: "medium"
+    }))),
+        toJSON = _render6.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot with background color prop system', function () {
+    var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
+      backgroundColor: "primary"
+    }))),
+        toJSON = _render7.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot with border prop system', function () {
+    var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
+      b: "small",
+      bRadius: "small"
+    }))),
+        toJSON = _render8.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot with elevation prop system', function () {
+    var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
+      elevation: "small"
+    }))),
+        toJSON = _render9.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/esm/Progress/native/index.js

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

package/esm/Progress/web/Progress.test.js

@@ -0,0 +1,222 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider, Progress } from '../..';
+describe('<Progress />', function () {
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, null), /*#__PURE__*/React.createElement(Progress, {
+      max: 100
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 60
+    }))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with label string', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      label: {
+        value: 'Some decription here'
+      }
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 65,
+      label: {
+        value: 'Some decription here',
+        placement: 'right'
+      }
+    }))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with label number', function () {
+    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      }
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 65,
+      label: {
+        value: 65,
+        placement: 'right'
+      }
+    }))),
+        container = _render3.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with all variants', function () {
+    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "primary"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "secondary"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "vibin"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "hope"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "energy"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "relax"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "peace"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "verve"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "uplift"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "deepPurple"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "stamina"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "dark"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "medium"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "deep"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "light"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "clear"
+    }), /*#__PURE__*/React.createElement(Progress, {
+      max: 100,
+      value: 20,
+      label: {
+        value: 20
+      },
+      variant: "white"
+    }))),
+        container = _render4.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with positions prop system', function () {
+    var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
+      position: "fixed",
+      top: "small",
+      left: "small"
+    }))),
+        container = _render5.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with spacing prop system', function () {
+    var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
+      m: "small",
+      padding: "medium"
+    }))),
+        container = _render6.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with background color prop system', function () {
+    var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
+      backgroundColor: "primary"
+    }))),
+        container = _render7.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with border prop system', function () {
+    var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
+      b: "small",
+      bRadius: "small"
+    }))),
+        container = _render8.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with elevation prop system', function () {
+    var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Progress, {
+      elevation: "small"
+    }))),
+        container = _render9.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/esm/RadioGroup/index.native.js

@@ -0,0 +1,4 @@
+import { RadioGroup, RadioButton, Radio } from './native';
+RadioGroup.Button = RadioButton;
+RadioGroup.Radio = Radio;
+export default RadioGroup;

package/esm/RadioGroup/native/Button/RadioButton.js

@@ -0,0 +1,64 @@
+var _excluded = ["value", "children"],
+    _excluded2 = ["onChange", "small", "selectedValue"];
+
+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); }
+
+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, { useContext } from 'react';
+import { string, oneOfType, number, node } from 'prop-types';
+import { TouchableWithoutFeedback } from 'react-native';
+import styled from 'styled-components';
+import RadioGroupContext from '../../RadioGroupContext';
+var RadioMark = styled.View(function (_ref) {
+  var radiogroup = _ref.theme.yoga.components.radiogroup,
+      small = _ref.small,
+      checked = _ref.checked;
+  return "\n  align-items: center;\n  justify-content: center;\n\n  height: " + (small ? radiogroup.button.height.small : radiogroup.button.height.normal) + "px;\n  padding-left: " + radiogroup.button.padding.left + "px;\n  padding-right: " + radiogroup.button.padding.right + "px;\n\n  background-color: " + radiogroup.button.backgroundColor + ";\n  border-radius: " + radiogroup.button.border.radius + "px;\n\n  font-size: " + radiogroup.font.size + "px;\n\n  " + (checked ? "\n          background-color: " + radiogroup.checked.backgroundColor + ";\n        " : "") + "\n";
+});
+var Text = styled.Text(function (_ref2) {
+  var _ref2$theme$yoga = _ref2.theme.yoga,
+      baseFont = _ref2$theme$yoga.baseFont,
+      radiogroup = _ref2$theme$yoga.components.radiogroup,
+      checked = _ref2.checked;
+  return "\n    font-family: " + baseFont.family + ";\n    color: " + radiogroup.font.color + ";\n\n    " + (checked ? "\n          color: " + radiogroup.checked.font.color + ";\n          font-weight: " + radiogroup.checked.font.weight + ";\n        " : '') + "\n    ";
+});
+/** Radio group allows user to select one option from a set of options. Use
+value on group to set the selected option. */
+
+var RadioGroupButton = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var value = _ref3.value,
+      children = _ref3.children,
+      rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
+
+  var _useContext = useContext(RadioGroupContext),
+      onChange = _useContext.onChange,
+      small = _useContext.small,
+      selectedValue = _useContext.selectedValue,
+      context = _objectWithoutPropertiesLoose(_useContext, _excluded2);
+
+  var inputValue = value || children;
+  var checked = inputValue === selectedValue;
+  return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, _extends({
+    onPress: function onPress() {
+      onChange({
+        value: inputValue
+      });
+    }
+  }, context), /*#__PURE__*/React.createElement(RadioMark, _extends({
+    small: small,
+    checked: checked,
+    ref: ref
+  }, rest), /*#__PURE__*/React.createElement(Text, {
+    checked: checked
+  }, children)));
+});
+RadioGroupButton.displayName = 'RadioGroup.Button';
+RadioGroupButton.propTypes = {
+  value: oneOfType([string, number]),
+  children: node.isRequired
+};
+RadioGroupButton.defaultProps = {
+  value: ''
+};
+export default RadioGroupButton;