@pingux/astro 2.1.3 → 2.2.0-alpha.0

package/lib/cjs/components/Icon/Icon.js

@@ -52,7 +52,19 @@ Icon.propTypes = {
    * rendering 15, 20, and 25 pixel svg containers.  */
   size: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
   /** A theme-aware prop to set the icon's color. */
-  color: _propTypes["default"].string
+  color: _propTypes["default"].string,
+  /**
+   * The title associated with the icon. It is recommended that icons always have an associated
+   * title in order to allow a better user experience for those using screen readers.
+   * The **`id`** in the title object will be the id of the title and
+   * is also what will be supplied to the **`aria-labelledby`** attribute in the SVG.
+   * The **`name`** in the title object will be the content of the title.
+   * This prop can only be used when importing the icon from [@pingux/mdi-react](https://www.npmjs.com/package/@pingux/mdi-react).
+   * */
+  title: _propTypes["default"].shape({
+    id: _propTypes["default"].string,
+    name: _propTypes["default"].string
+  })
 };
 Icon.defaultProps = {
   size: 20

package/lib/cjs/components/Icon/Icon.stories.js

@@ -11,11 +11,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _react = _interopRequireDefault(require("react"));
-var _AccountGroupIcon = _interopRequireDefault(require("mdi-react/AccountGroupIcon"));
-var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
-var _LockIcon = _interopRequireDefault(require("mdi-react/LockIcon"));
-var _SearchIcon = _interopRequireDefault(require("mdi-react/SearchIcon"));
-var _TagIcon = _interopRequireDefault(require("mdi-react/TagIcon"));
+var _AccountGroupIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountGroupIcon"));
+var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
+var _LockIcon = _interopRequireDefault(require("@pingux/mdi-react/LockIcon"));
+var _SearchIcon = _interopRequireDefault(require("@pingux/mdi-react/SearchIcon"));
+var _TagIcon = _interopRequireDefault(require("@pingux/mdi-react/TagIcon"));
 var _uuid = require("uuid");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
@@ -66,7 +66,12 @@ var _default = {
 };
 exports["default"] = _default;
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_index.Icon, args);
+  return (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({}, args, {
+    title: {
+      id: 'search-icon-title',
+      name: 'Search Icon'
+    }
+  }));
 };
 exports.Default = Default;
 var SVGIcons = function SVGIcons() {
@@ -113,7 +118,11 @@ var Sizes = function Sizes() {
     fontFamily: "monospace"
   }, '<Icon icon={SearchIcon}/> size="xs"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
     icon: _SearchIcon["default"],
-    size: "xs"
+    size: "xs",
+    title: {
+      id: 'search-icon-title',
+      name: 'Search Icon'
+    }
   }))), (0, _react2.jsx)(_index.TableRow, {
     height: "45px",
     bg: "transparent !important"
@@ -121,7 +130,11 @@ var Sizes = function Sizes() {
     fontFamily: "monospace"
   }, '<Icon icon={SearchIcon}/> size="sm"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
     icon: _SearchIcon["default"],
-    size: "sm"
+    size: "sm",
+    title: {
+      id: 'search-icon-title',
+      name: 'Search Icon'
+    }
   }))), (0, _react2.jsx)(_index.TableRow, {
     height: "45px",
     bg: "transparent !important"
@@ -129,7 +142,11 @@ var Sizes = function Sizes() {
     fontFamily: "monospace"
   }, '<Icon icon={SearchIcon}/> size="md"/>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Icon, {
     icon: _SearchIcon["default"],
-    size: "md"
+    size: "md",
+    title: {
+      id: 'search-icon-title',
+      name: 'Search Icon'
+    }
   })))));
 };
 exports.Sizes = Sizes;
@@ -141,49 +158,69 @@ var CommonlyUsed = function CommonlyUsed() {
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _AccountIcon["default"],
     color: "accent.40",
-    size: "sm"
+    size: "sm",
+    title: {
+      id: 'account-icon-title',
+      name: 'Account Icon'
+    }
   }), (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
-  }, "import AccountIcon from 'mdi-react/AccountIcon'; ")), (0, _react2.jsx)(_index.Box, {
+  }, "import AccountIcon from '@pingux/mdi-react/AccountIcon'; ")), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     gap: "md",
     mb: "xs"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _AccountGroupIcon["default"],
     color: "accent.40",
-    size: "sm"
+    size: "sm",
+    title: {
+      id: 'account-group-title',
+      name: 'Account Group Icon'
+    }
   }), (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
-  }, "import AccountGroupIcon from 'mdi-react/AccountGroupIcon'; ")), (0, _react2.jsx)(_index.Box, {
+  }, "import AccountGroupIcon from '@pingux/mdi-react/AccountGroupIcon'; ")), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     gap: "md",
     mb: "xs"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _LockIcon["default"],
     color: "accent.40",
-    size: "sm"
+    size: "sm",
+    title: {
+      id: 'lock-icon-title',
+      name: 'Lock Icon'
+    }
   }), (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
-  }, "import LockIcon from 'mdi-react/LockIcon'; ")), (0, _react2.jsx)(_index.Box, {
+  }, "import LockIcon from '@pingux/mdi-react/LockIcon'; ")), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     gap: "md",
     mb: "xs"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _SearchIcon["default"],
     color: "accent.40",
-    size: "sm"
+    size: "sm",
+    title: {
+      id: 'search-icon-title',
+      name: 'Search Icon'
+    }
   }), (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
-  }, "import SearchIcon from 'mdi-react/SearchIcon'; ")), (0, _react2.jsx)(_index.Box, {
+  }, "import SearchIcon from '@pingux/mdi-react/SearchIcon'; ")), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     gap: "md",
     mb: "xs"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _TagIcon["default"],
     color: "accent.40",
-    size: "sm"
+    size: "sm",
+    title: {
+      id: 'tag-icon-title',
+      name: 'Tag Icon'
+    }
   }), (0, _react2.jsx)(_index.Text, {
     fontFamily: "monospace"
-  }, "import TagIcon from 'mdi-react/TagIcon'; ")));
+  }, "import TagIcon from '@pingux/mdi-react/TagIcon'; ")));
 };
 exports.CommonlyUsed = CommonlyUsed;

package/lib/cjs/components/Icon/Icon.test.js

@@ -3,15 +3,19 @@
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _EarthIcon = _interopRequireDefault(require("@pingux/mdi-react/EarthIcon"));
 var _react2 = require("@testing-library/react");
-var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 var _ = _interopRequireDefault(require("."));
 var _react3 = require("@emotion/react");
 var testId = 'test-icon';
 var defaultProps = {
   'data-testid': testId,
-  icon: _EarthIcon["default"]
+  icon: _EarthIcon["default"],
+  title: {
+    id: 'title-id',
+    name: 'Earth Icon'
+  }
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -46,4 +50,13 @@ test('icon renders correct medium tshirt size', function () {
   });
   var mdIcon = _react2.screen.getByTestId(testId);
   expect(mdIcon).toHaveStyleRule('width', '25px');
+});
+test('icon renders with associated title', function () {
+  getComponent();
+  var icon = _react2.screen.getByTestId(testId);
+  var title = _react2.screen.getByText('Earth Icon');
+  expect(icon).toBeInstanceOf(SVGSVGElement);
+  expect(icon).toBeInTheDocument();
+  expect(icon).toHaveAttribute('aria-labelledby', 'title-id');
+  expect(title).toBeInTheDocument();
 });

package/lib/components/Icon/Icon.js

@@ -41,7 +41,19 @@ Icon.propTypes = {
    * rendering 15, 20, and 25 pixel svg containers.  */
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** A theme-aware prop to set the icon's color. */
-  color: PropTypes.string
+  color: PropTypes.string,
+  /**
+   * The title associated with the icon. It is recommended that icons always have an associated
+   * title in order to allow a better user experience for those using screen readers.
+   * The **`id`** in the title object will be the id of the title and
+   * is also what will be supplied to the **`aria-labelledby`** attribute in the SVG.
+   * The **`name`** in the title object will be the content of the title.
+   * This prop can only be used when importing the icon from [@pingux/mdi-react](https://www.npmjs.com/package/@pingux/mdi-react).
+   * */
+  title: PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string
+  })
 };
 Icon.defaultProps = {
   size: 20

package/lib/components/Icon/Icon.stories.js

@@ -3,11 +3,11 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
-import AccountGroupIcon from 'mdi-react/AccountGroupIcon';
-import AccountIcon from 'mdi-react/AccountIcon';
-import LockIcon from 'mdi-react/LockIcon';
-import SearchIcon from 'mdi-react/SearchIcon';
-import TagIcon from 'mdi-react/TagIcon';
+import AccountGroupIcon from '@pingux/mdi-react/AccountGroupIcon';
+import AccountIcon from '@pingux/mdi-react/AccountIcon';
+import LockIcon from '@pingux/mdi-react/LockIcon';
+import SearchIcon from '@pingux/mdi-react/SearchIcon';
+import TagIcon from '@pingux/mdi-react/TagIcon';
 import { v4 as uuid } from 'uuid';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Icon, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
@@ -57,7 +57,12 @@ export default {
   }
 };
 export var Default = function Default(args) {
-  return ___EmotionJSX(Icon, args);
+  return ___EmotionJSX(Icon, _extends({}, args, {
+    title: {
+      id: 'search-icon-title',
+      name: 'Search Icon'
+    }
+  }));
 };
 export var SVGIcons = function SVGIcons() {
   // SVGR can used to convert .svg files to components instead of doing this manually
@@ -102,7 +107,11 @@ export var Sizes = function Sizes() {
     fontFamily: "monospace"
   }, '<Icon icon={SearchIcon}/> size="xs"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
     icon: SearchIcon,
-    size: "xs"
+    size: "xs",
+    title: {
+      id: 'search-icon-title',
+      name: 'Search Icon'
+    }
   }))), ___EmotionJSX(TableRow, {
     height: "45px",
     bg: "transparent !important"
@@ -110,7 +119,11 @@ export var Sizes = function Sizes() {
     fontFamily: "monospace"
   }, '<Icon icon={SearchIcon}/> size="sm"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
     icon: SearchIcon,
-    size: "sm"
+    size: "sm",
+    title: {
+      id: 'search-icon-title',
+      name: 'Search Icon'
+    }
   }))), ___EmotionJSX(TableRow, {
     height: "45px",
     bg: "transparent !important"
@@ -118,7 +131,11 @@ export var Sizes = function Sizes() {
     fontFamily: "monospace"
   }, '<Icon icon={SearchIcon}/> size="md"/>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(Icon, {
     icon: SearchIcon,
-    size: "md"
+    size: "md",
+    title: {
+      id: 'search-icon-title',
+      name: 'Search Icon'
+    }
   })))));
 };
 export var CommonlyUsed = function CommonlyUsed() {
@@ -129,48 +146,68 @@ export var CommonlyUsed = function CommonlyUsed() {
   }, ___EmotionJSX(Icon, {
     icon: AccountIcon,
     color: "accent.40",
-    size: "sm"
+    size: "sm",
+    title: {
+      id: 'account-icon-title',
+      name: 'Account Icon'
+    }
   }), ___EmotionJSX(Text, {
     fontFamily: "monospace"
-  }, "import AccountIcon from 'mdi-react/AccountIcon'; ")), ___EmotionJSX(Box, {
+  }, "import AccountIcon from '@pingux/mdi-react/AccountIcon'; ")), ___EmotionJSX(Box, {
     isRow: true,
     gap: "md",
     mb: "xs"
   }, ___EmotionJSX(Icon, {
     icon: AccountGroupIcon,
     color: "accent.40",
-    size: "sm"
+    size: "sm",
+    title: {
+      id: 'account-group-title',
+      name: 'Account Group Icon'
+    }
   }), ___EmotionJSX(Text, {
     fontFamily: "monospace"
-  }, "import AccountGroupIcon from 'mdi-react/AccountGroupIcon'; ")), ___EmotionJSX(Box, {
+  }, "import AccountGroupIcon from '@pingux/mdi-react/AccountGroupIcon'; ")), ___EmotionJSX(Box, {
     isRow: true,
     gap: "md",
     mb: "xs"
   }, ___EmotionJSX(Icon, {
     icon: LockIcon,
     color: "accent.40",
-    size: "sm"
+    size: "sm",
+    title: {
+      id: 'lock-icon-title',
+      name: 'Lock Icon'
+    }
   }), ___EmotionJSX(Text, {
     fontFamily: "monospace"
-  }, "import LockIcon from 'mdi-react/LockIcon'; ")), ___EmotionJSX(Box, {
+  }, "import LockIcon from '@pingux/mdi-react/LockIcon'; ")), ___EmotionJSX(Box, {
     isRow: true,
     gap: "md",
     mb: "xs"
   }, ___EmotionJSX(Icon, {
     icon: SearchIcon,
     color: "accent.40",
-    size: "sm"
+    size: "sm",
+    title: {
+      id: 'search-icon-title',
+      name: 'Search Icon'
+    }
   }), ___EmotionJSX(Text, {
     fontFamily: "monospace"
-  }, "import SearchIcon from 'mdi-react/SearchIcon'; ")), ___EmotionJSX(Box, {
+  }, "import SearchIcon from '@pingux/mdi-react/SearchIcon'; ")), ___EmotionJSX(Box, {
     isRow: true,
     gap: "md",
     mb: "xs"
   }, ___EmotionJSX(Icon, {
     icon: TagIcon,
     color: "accent.40",
-    size: "sm"
+    size: "sm",
+    title: {
+      id: 'tag-icon-title',
+      name: 'Tag Icon'
+    }
   }), ___EmotionJSX(Text, {
     fontFamily: "monospace"
-  }, "import TagIcon from 'mdi-react/TagIcon'; ")));
+  }, "import TagIcon from '@pingux/mdi-react/TagIcon'; ")));
 };

package/lib/components/Icon/Icon.test.js

@@ -1,14 +1,18 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import Earth from '@pingux/mdi-react/EarthIcon';
 import { render, screen } from '@testing-library/react';
-import Earth from 'mdi-react/EarthIcon';
 import axeTest from '../../utils/testUtils/testAxe';
 import Icon from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-icon';
 var defaultProps = {
   'data-testid': testId,
-  icon: Earth
+  icon: Earth,
+  title: {
+    id: 'title-id',
+    name: 'Earth Icon'
+  }
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -43,4 +47,13 @@ test('icon renders correct medium tshirt size', function () {
   });
   var mdIcon = screen.getByTestId(testId);
   expect(mdIcon).toHaveStyleRule('width', '25px');
+});
+test('icon renders with associated title', function () {
+  getComponent();
+  var icon = screen.getByTestId(testId);
+  var title = screen.getByText('Earth Icon');
+  expect(icon).toBeInstanceOf(SVGSVGElement);
+  expect(icon).toBeInTheDocument();
+  expect(icon).toHaveAttribute('aria-labelledby', 'title-id');
+  expect(title).toBeInTheDocument();
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.1.3",
+  "version": "2.2.0-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",
@@ -40,6 +40,7 @@
     "@emotion/styled": "^11.1.1",
     "@faker-js/faker": "~7.5.0",
     "@mdx-js/react": "^1.6.22",
+    "@pingux/mdi-react": "^1.0.0",
     "@react-aria/accordion": "~3.0.0-alpha.11",
     "@react-aria/breadcrumbs": "^3.1.4",
     "@react-aria/button": "^3.2.1",