@gympass/yoga 7.79.2 → 7.81.0

package/cjs/Dropdown/web/Dropdown.js

@@ -18,7 +18,7 @@ var _Helper = _interopRequireDefault(require("../../Input/web/Helper"));
 var _Input = _interopRequireDefault(require("../../Input/web/Input"));
 
 var _excluded = ["isOpen", "selected"],
-    _excluded2 = ["error", "label", "disabled", "full", "options", "onChange"];
+    _excluded2 = ["error", "label", "disabled", "full", "options", "onChange", "isMaxHeight"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
@@ -37,7 +37,7 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
 var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var full = _ref.full,
       dropdown = _ref.theme.yoga.components.dropdown;
-  return "\n    position: relative;\n    display: inline-block;\n    vertical-align: top;\n\n    width: " + (full ? '100%' : dropdown.width + "px") + ";\n  ";
+  return "\n    position: relative;\n    display: inline-block;\n    vertical-align: top;\n    \n    width: " + (full ? '100%' : dropdown.width + "px") + ";\n  ";
 });
 
 var labelTransition = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
@@ -74,8 +74,9 @@ var Button = _styledComponents["default"].button(_templateObject9 || (_templateO
 });
 
 var OptionsList = _styledComponents["default"].ul(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref6) {
-  var dropdown = _ref6.theme.yoga.components.dropdown;
-  return "\n    position: absolute;\n    top: 46px;\n    z-index: 1;\n    box-sizing: border-box;\n\n    width: 100%;\n    max-height: " + dropdown.option.height * 3.5 + "px;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    list-style-type: none;\n\n    background: " + dropdown.optionsList.backgroundColor + ";\n    border-width: " + dropdown.optionsList.border.width + "px;\n    border-style: solid;\n    border-color: " + dropdown.optionsList.border.color + ";\n    border-top: none;\n\n    border-radius:\n        " + dropdown.option.border.radius.topLeft + "px\n        " + dropdown.option.border.radius.topRight + "px\n        " + dropdown.option.border.radius.bottomRight + "px\n        " + dropdown.option.border.radius.bottomLeft + "px;\n  ";
+  var isMaxHeight = _ref6.isMaxHeight,
+      dropdown = _ref6.theme.yoga.components.dropdown;
+  return "\n    position: absolute;\n    top: 46px;\n    z-index: 1;\n    box-sizing: border-box;\n\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    list-style-type: none;\n\n    background: " + dropdown.optionsList.backgroundColor + ";\n    border-width: " + dropdown.optionsList.border.width + "px;\n    border-style: solid;\n    border-color: " + dropdown.optionsList.border.color + ";\n    border-top: none;\n\n    border-radius:\n        " + dropdown.option.border.radius.topLeft + "px\n        " + dropdown.option.border.radius.topRight + "px\n        " + dropdown.option.border.radius.bottomRight + "px\n        " + dropdown.option.border.radius.bottomLeft + "px;\n\n    " + (isMaxHeight && "max-height: " + dropdown.option.height * 3.5 + "px;") + "\n  ";
 });
 
 var Option = _styledComponents["default"].li(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref7) {
@@ -112,6 +113,7 @@ var Dropdown = /*#__PURE__*/_react["default"].forwardRef(function (_ref10, ref)
       full = _ref10.full,
       options = _ref10.options,
       onChange = _ref10.onChange,
+      isMaxHeight = _ref10.isMaxHeight,
       rest = _objectWithoutPropertiesLoose(_ref10, _excluded2);
 
   var inputRef = ref || _react["default"].useRef(null);
@@ -174,6 +176,7 @@ var Dropdown = /*#__PURE__*/_react["default"].forwardRef(function (_ref10, ref)
       selected: selectedItem !== null,
       disabled: disabled
     }))), isOpen && /*#__PURE__*/_react["default"].createElement(OptionsList, _extends({
+      isMaxHeight: isMaxHeight,
       selected: selectedItem !== null
     }, getMenuProps()), options.map(function (item, index) {
       return /*#__PURE__*/_react["default"].createElement(Option, getItemProps({
@@ -200,14 +203,16 @@ Dropdown.propTypes = {
     value: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number]),
     selected: _propTypes.bool
   })).isRequired,
-  onChange: _propTypes.func
+  onChange: _propTypes.func,
+  isMaxHeight: _propTypes.bool
 };
 Dropdown.defaultProps = {
   label: '',
   error: undefined,
   full: false,
   disabled: false,
-  onChange: function onChange() {}
+  onChange: function onChange() {},
+  isMaxHeight: true
 };
 var _default = Dropdown;
 exports["default"] = _default;

package/cjs/Icon/Icon.js

@@ -13,7 +13,7 @@ var _lodash = _interopRequireDefault(require("lodash.get"));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
-var _excluded = ["as", "size", "width", "height", "fill", "stroke", "theme"];
+var _excluded = ["as", "size", "width", "height", "fill", "stroke", "theme", "title", "description", "ariaLabel"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -31,17 +31,56 @@ var Icon = function Icon(_ref) {
       fill = _ref.fill,
       stroke = _ref.stroke,
       theme = _ref.theme,
+      title = _ref.title,
+      description = _ref.description,
+      ariaLabel = _ref.ariaLabel,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  var componentWithTitle = function componentWithTitle(propsTitle) {
+    var titleId = ariaLabel + "-titleId";
+    var ariaDescribedBy = titleId;
+
+    var titleElement = /*#__PURE__*/_react["default"].createElement("title", {
+      id: titleId,
+      key: titleId
+    }, title);
+
+    var svgChildren = [titleElement];
+
+    if (description) {
+      var descId = ariaLabel + "-descId";
+
+      var descElement = /*#__PURE__*/_react["default"].createElement("desc", {
+        id: descId,
+        key: descId
+      }, description);
+
+      ariaDescribedBy += " " + descId;
+      svgChildren = [].concat(svgChildren, [descElement]);
+    }
+
+    var defaultProps = {
+      viewBox: '0 0 12 12',
+      role: 'img',
+      'aria-describedby': ariaDescribedBy
+    };
+
+    var newSvg = /*#__PURE__*/_react["default"].createElement('svg', _extends({}, propsTitle, defaultProps), svgChildren, Component().props.children);
+
+    return newSvg;
+  };
+
   return /*#__PURE__*/_react["default"].createElement(_Box["default"], _extends({
-    as: Component,
+    as: title && ariaLabel ? componentWithTitle : Component,
     width: (0, _lodash["default"])(theme.yoga.spacing, width, width),
     height: (0, _lodash["default"])(theme.yoga.spacing, height, height)
   }, fill && {
     fill: (0, _lodash["default"])(theme.yoga.colors, fill, fill)
   }, stroke && {
     stroke: (0, _lodash["default"])(theme.yoga.colors, stroke, stroke)
-  }, props));
+  }, props, {
+    "aria-hidden": title ? undefined : true
+  }));
 };
 
 var commonSizes = ['xxxsmall', 'xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge', 'xxxlarge', 'huge', 'xhuge'];
@@ -57,6 +96,31 @@ Icon.propTypes = {
    * tokens (vibin, neutral, stamina...) */
   stroke: _propTypes.string,
 
+  /** Text that will be displayed in the title element, used for accessibility */
+  title: _propTypes.string,
+
+  /** Text used as element description, used for accessibility.
+   * A title must be given in order to use description corretly.
+   */
+  description: _propTypes.string,
+
+  /** Text used as identifier for aria-describedby, title and description */
+  ariaLabel: function ariaLabel(props, propName, componentName) {
+    var _checkPropTypes;
+
+    var title = props.title,
+        ariaLabel = props.ariaLabel;
+
+    if (title && !ariaLabel) {
+      return new Error("accessible elements, such as title, must receive the " + propName + " property as an identifier.");
+    }
+
+    (0, _propTypes.checkPropTypes)((_checkPropTypes = {}, _checkPropTypes[propName] = _propTypes.string, _checkPropTypes), {
+      ariaLabel: ariaLabel
+    }, 'prop', componentName);
+    return null;
+  },
+
   /** Horizontal size of the SVG. Use it as one of
    * theme.spacing tokens (xxsmall, small, medium...) */
   width: (0, _propTypes.oneOfType)([(0, _propTypes.oneOf)(commonSizes), _propTypes.string, _propTypes.number]),
@@ -67,29 +131,17 @@ Icon.propTypes = {
 
   /** Size for vertical and horizontal of the SVG.
    * Use it as one of theme.spacing tokens (xxsmall, small, medium...) */
-  size: function size(props, propName, componentName) {
-    var _checkPropTypes;
-
-    var size = props.size,
-        width = props.width,
-        height = props.height;
-
-    if (size && (width || height)) {
-      return new Error("you must use only " + propName + ", alone, or width and/or height in " + componentName);
-    }
-
-    (0, _propTypes.checkPropTypes)((_checkPropTypes = {}, _checkPropTypes[propName] = (0, _propTypes.oneOfType)([(0, _propTypes.oneOf)(commonSizes), _propTypes.string, _propTypes.number]), _checkPropTypes), {
-      size: size
-    }, 'prop', componentName);
-    return null;
-  }
+  size: (0, _propTypes.oneOfType)([(0, _propTypes.oneOf)(commonSizes), _propTypes.string, _propTypes.number])
 };
 Icon.defaultProps = {
   fill: undefined,
   stroke: undefined,
+  title: undefined,
+  description: undefined,
+  ariaLabel: undefined,
   width: undefined,
   height: undefined,
-  size: undefined
+  size: 12
 };
 
 var _default = (0, _styledComponents.withTheme)(Icon);

package/esm/Dropdown/web/Dropdown.js

@@ -1,5 +1,5 @@
 var _excluded = ["isOpen", "selected"],
-    _excluded2 = ["error", "label", "disabled", "full", "options", "onChange"];
+    _excluded2 = ["error", "label", "disabled", "full", "options", "onChange", "isMaxHeight"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
@@ -19,7 +19,7 @@ import Input from '../../Input/web/Input';
 var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var full = _ref.full,
       dropdown = _ref.theme.yoga.components.dropdown;
-  return "\n    position: relative;\n    display: inline-block;\n    vertical-align: top;\n\n    width: " + (full ? '100%' : dropdown.width + "px") + ";\n  ";
+  return "\n    position: relative;\n    display: inline-block;\n    vertical-align: top;\n    \n    width: " + (full ? '100%' : dropdown.width + "px") + ";\n  ";
 });
 var labelTransition = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
   var _ref2$theme$yoga = _ref2.theme.yoga,
@@ -51,8 +51,9 @@ var Button = styled.button(_templateObject9 || (_templateObject9 = _taggedTempla
   return "\n    display: flex;\n    align-content: center;\n    align-items: center;\n    justify-content: flex-end;\n    position: absolute;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    padding-right: " + dropdown.button.padding.right + "px;\n    padding-top: " + dropdown.button.padding.top + "px;\n    padding-bottom: " + dropdown.button.padding.bottom + "px;\n\n    border: none;\n    outline: none;\n    background-color: transparent;\n    cursor: " + (disabled ? 'not-allowed' : 'pointer') + ";\n  ";
 });
 var OptionsList = styled.ul(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref6) {
-  var dropdown = _ref6.theme.yoga.components.dropdown;
-  return "\n    position: absolute;\n    top: 46px;\n    z-index: 1;\n    box-sizing: border-box;\n\n    width: 100%;\n    max-height: " + dropdown.option.height * 3.5 + "px;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    list-style-type: none;\n\n    background: " + dropdown.optionsList.backgroundColor + ";\n    border-width: " + dropdown.optionsList.border.width + "px;\n    border-style: solid;\n    border-color: " + dropdown.optionsList.border.color + ";\n    border-top: none;\n\n    border-radius:\n        " + dropdown.option.border.radius.topLeft + "px\n        " + dropdown.option.border.radius.topRight + "px\n        " + dropdown.option.border.radius.bottomRight + "px\n        " + dropdown.option.border.radius.bottomLeft + "px;\n  ";
+  var isMaxHeight = _ref6.isMaxHeight,
+      dropdown = _ref6.theme.yoga.components.dropdown;
+  return "\n    position: absolute;\n    top: 46px;\n    z-index: 1;\n    box-sizing: border-box;\n\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    list-style-type: none;\n\n    background: " + dropdown.optionsList.backgroundColor + ";\n    border-width: " + dropdown.optionsList.border.width + "px;\n    border-style: solid;\n    border-color: " + dropdown.optionsList.border.color + ";\n    border-top: none;\n\n    border-radius:\n        " + dropdown.option.border.radius.topLeft + "px\n        " + dropdown.option.border.radius.topRight + "px\n        " + dropdown.option.border.radius.bottomRight + "px\n        " + dropdown.option.border.radius.bottomLeft + "px;\n\n    " + (isMaxHeight && "max-height: " + dropdown.option.height * 3.5 + "px;") + "\n  ";
 });
 var Option = styled.li(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref7) {
   var isSelected = _ref7.isSelected,
@@ -87,6 +88,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref10, ref) {
       full = _ref10.full,
       options = _ref10.options,
       onChange = _ref10.onChange,
+      isMaxHeight = _ref10.isMaxHeight,
       rest = _objectWithoutPropertiesLoose(_ref10, _excluded2);
 
   var inputRef = ref || React.useRef(null);
@@ -148,6 +150,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref10, ref) {
       selected: selectedItem !== null,
       disabled: disabled
     }))), isOpen && /*#__PURE__*/React.createElement(OptionsList, _extends({
+      isMaxHeight: isMaxHeight,
       selected: selectedItem !== null
     }, getMenuProps()), options.map(function (item, index) {
       return /*#__PURE__*/React.createElement(Option, getItemProps({
@@ -173,13 +176,15 @@ Dropdown.propTypes = {
     value: oneOfType([string, number]),
     selected: bool
   })).isRequired,
-  onChange: func
+  onChange: func,
+  isMaxHeight: bool
 };
 Dropdown.defaultProps = {
   label: '',
   error: undefined,
   full: false,
   disabled: false,
-  onChange: function onChange() {}
+  onChange: function onChange() {},
+  isMaxHeight: true
 };
 export default Dropdown;

package/esm/Icon/Icon.js

@@ -1,4 +1,4 @@
-var _excluded = ["as", "size", "width", "height", "fill", "stroke", "theme"];
+var _excluded = ["as", "size", "width", "height", "fill", "stroke", "theme", "title", "description", "ariaLabel"];
 
 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); }
 
@@ -20,17 +20,50 @@ var Icon = function Icon(_ref) {
       fill = _ref.fill,
       stroke = _ref.stroke,
       theme = _ref.theme,
+      title = _ref.title,
+      description = _ref.description,
+      ariaLabel = _ref.ariaLabel,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  var componentWithTitle = function componentWithTitle(propsTitle) {
+    var titleId = ariaLabel + "-titleId";
+    var ariaDescribedBy = titleId;
+    var titleElement = /*#__PURE__*/React.createElement("title", {
+      id: titleId,
+      key: titleId
+    }, title);
+    var svgChildren = [titleElement];
+
+    if (description) {
+      var descId = ariaLabel + "-descId";
+      var descElement = /*#__PURE__*/React.createElement("desc", {
+        id: descId,
+        key: descId
+      }, description);
+      ariaDescribedBy += " " + descId;
+      svgChildren = [].concat(svgChildren, [descElement]);
+    }
+
+    var defaultProps = {
+      viewBox: '0 0 12 12',
+      role: 'img',
+      'aria-describedby': ariaDescribedBy
+    };
+    var newSvg = /*#__PURE__*/React.createElement('svg', _extends({}, propsTitle, defaultProps), svgChildren, Component().props.children);
+    return newSvg;
+  };
+
   return /*#__PURE__*/React.createElement(Box, _extends({
-    as: Component,
+    as: title && ariaLabel ? componentWithTitle : Component,
     width: get(theme.yoga.spacing, width, width),
     height: get(theme.yoga.spacing, height, height)
   }, fill && {
     fill: get(theme.yoga.colors, fill, fill)
   }, stroke && {
     stroke: get(theme.yoga.colors, stroke, stroke)
-  }, props));
+  }, props, {
+    "aria-hidden": title ? undefined : true
+  }));
 };
 
 var commonSizes = ['xxxsmall', 'xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge', 'xxxlarge', 'huge', 'xhuge'];
@@ -46,6 +79,31 @@ Icon.propTypes = {
    * tokens (vibin, neutral, stamina...) */
   stroke: string,
 
+  /** Text that will be displayed in the title element, used for accessibility */
+  title: string,
+
+  /** Text used as element description, used for accessibility.
+   * A title must be given in order to use description corretly.
+   */
+  description: string,
+
+  /** Text used as identifier for aria-describedby, title and description */
+  ariaLabel: function ariaLabel(props, propName, componentName) {
+    var _checkPropTypes;
+
+    var title = props.title,
+        ariaLabel = props.ariaLabel;
+
+    if (title && !ariaLabel) {
+      return new Error("accessible elements, such as title, must receive the " + propName + " property as an identifier.");
+    }
+
+    checkPropTypes((_checkPropTypes = {}, _checkPropTypes[propName] = string, _checkPropTypes), {
+      ariaLabel: ariaLabel
+    }, 'prop', componentName);
+    return null;
+  },
+
   /** Horizontal size of the SVG. Use it as one of
    * theme.spacing tokens (xxsmall, small, medium...) */
   width: oneOfType([oneOf(commonSizes), string, number]),
@@ -56,28 +114,16 @@ Icon.propTypes = {
 
   /** Size for vertical and horizontal of the SVG.
    * Use it as one of theme.spacing tokens (xxsmall, small, medium...) */
-  size: function size(props, propName, componentName) {
-    var _checkPropTypes;
-
-    var size = props.size,
-        width = props.width,
-        height = props.height;
-
-    if (size && (width || height)) {
-      return new Error("you must use only " + propName + ", alone, or width and/or height in " + componentName);
-    }
-
-    checkPropTypes((_checkPropTypes = {}, _checkPropTypes[propName] = oneOfType([oneOf(commonSizes), string, number]), _checkPropTypes), {
-      size: size
-    }, 'prop', componentName);
-    return null;
-  }
+  size: oneOfType([oneOf(commonSizes), string, number])
 };
 Icon.defaultProps = {
   fill: undefined,
   stroke: undefined,
+  title: undefined,
+  description: undefined,
+  ariaLabel: undefined,
   width: undefined,
   height: undefined,
-  size: undefined
+  size: 12
 };
 export default withTheme(Icon);

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

@@ -44,4 +44,17 @@ describe('Snapshots', function () {
 
     expect(toJSON()).toMatchSnapshot();
   });
+  it('should match snapshot with accessible props', function () {
+    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Icon, {
+      as: Circle,
+      size: "small",
+      fill: "stamina",
+      title: "Circle icon",
+      description: "This is a circular icon",
+      ariaLabel: "circleIcon"
+    }))),
+        toJSON = _render4.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

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

@@ -44,4 +44,17 @@ describe('Snapshots', function () {
 
     expect(container).toMatchSnapshot();
   });
+  it('should match snapshot with acessible props', function () {
+    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Icon, {
+      as: Circle,
+      size: "small",
+      fill: "stamina",
+      title: "Circle icon",
+      description: "This is a circular icon",
+      ariaLabel: "circleIcon"
+    }))),
+        container = _render4.container;
+
+    expect(container).toMatchSnapshot();
+  });
 });

package/package.json

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