@gympass/yoga 7.80.0 → 7.81.0

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/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.80.0",
+  "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": "b09f7aecfc9457a0f2e2ce269cd07c2d6d1c175f",
+  "gitHead": "f839d0ec99d5438e966d931c2467a9dcc7a4dd4c",
   "module": "./esm",
   "types": "./typings/index.d.ts",
   "private": false,