@pingux/astro 2.1.2 → 2.2.0-alpha.0

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.2",
+  "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",