@pingux/astro 2.171.0-alpha.0 → 2.172.0

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -1593,10 +1593,8 @@ declare const _default: {
                 backgroundColor: string;
                 '& > div.status-icon': {
                     bg: string;
-                    '& > svg': {
-                        path: {
-                            fill: string;
-                        };
+                    span: {
+                        color: string;
                     };
                 };
             };
@@ -1839,58 +1837,64 @@ declare const _default: {
         base: {
             '&.is-default': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    fontSize: string;
+                    color: string;
                 };
             };
             '&.is-critical': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    fontSize: string;
+                    color: string;
                 };
             };
             '&.is-warning': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    fontSize: string;
+                    color: string;
                 };
             };
             '&.is-info': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    fontSize: string;
+                    color: string;
                 };
             };
             '&.is-major': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    fontSize: string;
+                    color: string;
                 };
             };
             '&.is-minor': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    fontSize: string;
+                    color: string;
                 };
             };
             '&.is-warning-neutral': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    fontSize: string;
+                    color: string;
                 };
             };
             '&.is-fatal': {
                 bg: string;
-                path: {
-                    fill: string;
+                span: {
+                    fontSize: string;
+                    color: string;
                 };
             };
             '&.is-selected.is-selected': {
                 bg: string;
-                '& > svg': {
-                    path: {
-                        fill: string;
-                    };
+                span: {
+                    color: string;
                 };
             };
         };

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -326,10 +326,8 @@ var rockerButton = {
       backgroundColor: 'active',
       '& > div.status-icon': {
         bg: 'white',
-        '& > svg': {
-          path: {
-            fill: 'active'
-          }
+        span: {
+          color: 'active'
         }
       }
     },
@@ -368,58 +366,64 @@ var statusIcon = {
   base: {
     '&.is-default': {
       bg: 'gray-100',
-      path: {
-        fill: 'gray-700'
+      span: {
+        fontSize: 'md',
+        color: 'gray-700'
       }
     },
     '&.is-critical': {
       bg: 'red-100',
-      path: {
-        fill: 'red-700'
+      span: {
+        fontSize: 'md',
+        color: 'red-700'
       }
     },
     '&.is-warning': {
       bg: 'yellow-100',
-      path: {
-        fill: 'yellow-800'
+      span: {
+        fontSize: 'md',
+        color: 'yellow-800'
       }
     },
     '&.is-info': {
       bg: 'blue-100',
-      path: {
-        fill: 'blue-600'
+      span: {
+        fontSize: 'md',
+        color: 'blue-600'
       }
     },
     '&.is-major': {
       bg: 'orange-100',
-      path: {
-        fill: 'orange-700'
+      span: {
+        fontSize: 'md',
+        color: 'orange-700'
       }
     },
     '&.is-minor': {
       bg: 'yellow-100',
-      path: {
-        fill: 'yellow-800'
+      span: {
+        fontSize: 'md',
+        color: 'yellow-800'
       }
     },
     '&.is-warning-neutral': {
       bg: 'gray-100',
-      path: {
-        fill: 'gray-700'
+      span: {
+        fontSize: 'md',
+        color: 'gray-700'
       }
     },
     '&.is-fatal': {
       bg: 'gray-700',
-      path: {
-        fill: 'gray-100'
+      span: {
+        fontSize: 'md',
+        color: 'gray-100'
       }
     },
     '&.is-selected.is-selected': {
       bg: 'white',
-      '& > svg': {
-        path: {
-          fill: 'active'
-        }
+      span: {
+        color: 'active'
       }
     }
   }

package/lib/cjs/types/icon.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import type { MaterialSymbol } from '@material-symbols/font-400';
 import { TestingAttributes } from './shared/test';
 import { DOMAttributes, IconSize, StyleProps } from './shared';
 export type SVGComponentProps = {
@@ -23,8 +24,9 @@ export interface IconProps extends StyleProps, DOMAttributes, TestingAttributes
         name: string;
     };
     /** The icon to render. */
-    icon?: IconTypeExtended;
+    icon?: IconTypeExtended | MaterialSymbol | string;
     size?: IconSize;
     /** A theme-aware prop to set the icon's color. */
     color?: string;
+    hasFill?: boolean;
 }

package/lib/cjs/types/navBar.d.ts

@@ -1,4 +1,5 @@
 import React, { Key } from 'react';
+import type { MaterialSymbol } from '@material-symbols/font-400';
 import { ThemeUICSSObject } from 'theme-ui';
 import { IconProps, IconTypeExtended } from './icon';
 import { DOMAttributes, StyleProps } from './shared';
@@ -27,7 +28,7 @@ export interface NavBarItemProps extends StyleProps, DOMAttributes {
     /**  Handler that is called when the press is released over the target. */
     onPress?: () => void;
     /** The icon to render in between each node. */
-    icon?: IconTypeExtended;
+    icon?: IconTypeExtended | MaterialSymbol | string;
     /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
     id?: string;
     /** Text that will render within the component */

package/lib/components/Icon/Icon.js

@@ -1,53 +1,17 @@
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["color", "icon", "sx", "size", "variant", "title"];
-function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { forwardRef } from 'react';
-import { useGetTheme, useTShirtSize } from '../../hooks';
-import Box from '../Box';
+import IconDefault from './IconDefault';
+import IconSymbol from './IconSymbol';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
-  var theme = useGetTheme();
-  var color = props.color,
-    IconComponent = props.icon,
-    sx = props.sx,
-    _props$size = props.size,
-    size = _props$size === void 0 ? theme.defaultIconSize : _props$size,
-    variant = props.variant,
-    title = props.title,
-    others = _objectWithoutProperties(props, _excluded);
-  var _useTShirtSize = useTShirtSize({
-      size: size,
-      sizes: theme.tShirtSizes
-    }),
-    sizeProps = _useTShirtSize.sizeProps;
-  var defaultIconColor = theme.defaultIconColor;
-  var resolvedTitle = title !== null && title !== void 0 ? title : _typeof(IconComponent) === 'object' && 'type' in IconComponent ? {
-    name: IconComponent.type.name
-  } : '';
-  return ___EmotionJSX(Box, _extends({
-    as: IconComponent,
-    ref: ref,
-    role: "img",
-    title: resolvedTitle,
-    variant: variant,
-    size: sizeProps.size,
-    sx: _objectSpread({
-      fill: color || defaultIconColor,
-      minWidth: sizeProps.size
-    }, sx)
-  }, others));
+  var icon = props.icon;
+  if (typeof icon === 'string') {
+    return ___EmotionJSX(IconSymbol, _extends({}, props, {
+      ref: ref
+    }));
+  }
+  return ___EmotionJSX(IconDefault, _extends({}, props, {
+    ref: ref
+  }));
 });
-Icon.displayName = 'Icon';
 export default Icon;

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

@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react';
 import Earth from '@pingux/mdi-react/EarthIcon';
 import { render, screen } from '@testing-library/react';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
-import Icon from '.';
+import Icon from './Icon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-icon';
 var defaultProps = {
@@ -45,40 +45,11 @@ test('default icon', function () {
   expect(icon).toBeInstanceOf(SVGSVGElement);
   expect(icon).toBeInTheDocument();
 });
-test('icon renders correct xxsmall tshirt size', function () {
+test('icon render for type symbol', function () {
   getComponent({
-    size: 'xxs'
+    icon: 'search'
   });
-  var xsIcon = screen.getByTestId(testId);
-  expect(xsIcon).toHaveStyleRule('width', '9px');
-});
-test('icon renders correct xsmall tshirt size', function () {
-  getComponent({
-    size: 'xs'
-  });
-  var xsIcon = screen.getByTestId(testId);
-  expect(xsIcon).toHaveStyleRule('width', '15px');
-});
-test('icon renders correct small tshirt size', function () {
-  getComponent({
-    size: 'sm'
-  });
-  var smIcon = screen.getByTestId(testId);
-  expect(smIcon).toHaveStyleRule('width', '20px');
-});
-test('icon renders correct medium tshirt size', function () {
-  getComponent({
-    size: 'md'
-  });
-  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();
+  expect(icon).toHaveClass('material-symbols-outlined');
+  screen.getByText(/search/i);
 });

package/lib/components/Icon/IconDefault.js

@@ -0,0 +1,53 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["color", "icon", "sx", "size", "variant", "title"];
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { forwardRef } from 'react';
+import { useGetTheme, useTShirtSize } from '../../hooks';
+import Box from '../Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var IconDefault = /*#__PURE__*/forwardRef(function (props, ref) {
+  var theme = useGetTheme();
+  var color = props.color,
+    IconComponent = props.icon,
+    sx = props.sx,
+    _props$size = props.size,
+    size = _props$size === void 0 ? theme.defaultIconSize : _props$size,
+    variant = props.variant,
+    title = props.title,
+    others = _objectWithoutProperties(props, _excluded);
+  var _useTShirtSize = useTShirtSize({
+      size: size,
+      sizes: theme.tShirtSizes
+    }),
+    sizeProps = _useTShirtSize.sizeProps;
+  var defaultIconColor = theme.defaultIconColor;
+  var resolvedTitle = title !== null && title !== void 0 ? title : _typeof(IconComponent) === 'object' && 'type' in IconComponent ? {
+    name: IconComponent.type.name
+  } : '';
+  return ___EmotionJSX(Box, _extends({
+    as: IconComponent,
+    ref: ref,
+    role: "img",
+    title: resolvedTitle,
+    variant: variant,
+    size: sizeProps.size,
+    sx: _objectSpread({
+      fill: color || defaultIconColor,
+      minWidth: sizeProps.size
+    }, sx)
+  }, others));
+});
+IconDefault.displayName = 'Icon';
+export default IconDefault;

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

@@ -0,0 +1,84 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { forwardRef } from 'react';
+import Earth from '@pingux/mdi-react/EarthIcon';
+import { render, screen } from '@testing-library/react';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import Icon from './IconDefault';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-icon';
+var defaultProps = {
+  'data-testid': testId,
+  icon: Earth,
+  title: {
+    id: 'title-id',
+    name: 'Earth Icon'
+  }
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(Icon, _extends({}, defaultProps, props)));
+};
+
+// The mdi-react and @pingux/mid-react libraries don't support ref forwarding
+// A simple implementation of an SVG component demonstrates ref forwarding
+var SVGTestComponent = /*#__PURE__*/forwardRef(function (props, ref) {
+  return ___EmotionJSX("svg", _extends({
+    ref: ref
+  }, props, {
+    "aria-labelledby": "id"
+  }), ___EmotionJSX("title", {
+    id: "id"
+  }, "title"));
+});
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Icon, _extends({
+      icon: SVGTestComponent
+    }, props));
+  }
+});
+test('default icon', function () {
+  getComponent();
+  var icon = screen.getByTestId(testId);
+  expect(icon).toBeInstanceOf(SVGSVGElement);
+  expect(icon).toBeInTheDocument();
+});
+test('icon renders correct xxsmall tshirt size', function () {
+  getComponent({
+    size: 'xxs'
+  });
+  var xsIcon = screen.getByTestId(testId);
+  expect(xsIcon).toHaveStyleRule('width', '9px');
+});
+test('icon renders correct xsmall tshirt size', function () {
+  getComponent({
+    size: 'xs'
+  });
+  var xsIcon = screen.getByTestId(testId);
+  expect(xsIcon).toHaveStyleRule('width', '15px');
+});
+test('icon renders correct small tshirt size', function () {
+  getComponent({
+    size: 'sm'
+  });
+  var smIcon = screen.getByTestId(testId);
+  expect(smIcon).toHaveStyleRule('width', '20px');
+});
+test('icon renders correct medium tshirt size', function () {
+  getComponent({
+    size: 'md'
+  });
+  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/lib/components/Icon/IconSymbol.js

@@ -0,0 +1,50 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["icon", "className", "title", "size", "color", "hasFill"];
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { forwardRef } from 'react';
+import { useGetTheme, useTShirtSize } from '../../hooks';
+import Box from '../Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var IconSymbol = /*#__PURE__*/forwardRef(function (props, ref) {
+  var theme = useGetTheme();
+  var _props$icon = props.icon,
+    icon = _props$icon === void 0 ? 'disabled_by_default' : _props$icon,
+    className = props.className,
+    title = props.title,
+    _props$size = props.size,
+    size = _props$size === void 0 ? theme.defaultIconSize : _props$size,
+    _props$color = props.color,
+    color = _props$color === void 0 ? theme.defaultIconColor : _props$color,
+    hasFill = props.hasFill,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useTShirtSize = useTShirtSize({
+      size: size,
+      sizes: theme.tShirtSizes
+    }),
+    sizeProps = _useTShirtSize.sizeProps;
+  return ___EmotionJSX(Box, _extends({
+    as: "span",
+    ref: ref,
+    className: "material-symbols-outlined ".concat(className || ''),
+    title: title === null || title === void 0 ? void 0 : title.name
+  }, rest, {
+    sx: _objectSpread(_objectSpread({}, rest.sx), {}, {
+      color: color,
+      fontSize: sizeProps.size,
+      fontVariationSettings: hasFill ? "'FILL' 1" : "'FILL' 0"
+    })
+  }), icon);
+});
+IconSymbol.displayName = 'Icon';
+export default IconSymbol;

package/lib/components/Icon/IconSymbol.mdx

@@ -0,0 +1,46 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Icon/Icon" />
+
+# Icon
+
+Icons are small images that represent concepts or capabilities that often provide information or lead users to other pages within the application. 
+
+Icon should be:
+- Centrally aligned when used in a group with an appropriate amount of space between them.
+- Paired with text or a tooltip when its intention is not immediately evident. 
+- Relatively sized when used with text.
+
+Icon shouldn’t:
+- Include letters in the icon design.
+- Be randomly scaled to fit the layout.
+
+Regarding sizing, this component uses the **1em x 1em** container by default and maintains the aspect ratios. You can:
+
+- Use the theme to color the icon.
+  
+- Use font icon text from the [Material Symbol Library](https://marella.github.io/material-symbols/demo/)
+
+It is built on top of the [Box from Theme-UI](https://theme-ui.com/components/box/) and uses the available [props from Theme-UI](https://theme-ui.com/sx-prop).
+
+### Required Components
+
+This component can be used independently and does not require additional components.
+
+### Accessibility
+
+#### Labelling
+
+The Icon component accepts the title prop:
+`title={{ id: 'unique id', name: 'short description of the icon'}}`.
+The `name` will be passed inside title attribute of span element.
+The `id` is optional. If not specified, it will be generated automatically.
+This is needed to make font icon accessible.
+
+#### Screen Readers
+
+If the icon has a title associated with it, the **`aria-labelledby`** attribute is used to provide the label ID.
+
+
+
+

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

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import IconSymbol from './IconSymbol';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-icon';
+var testIcon = 'Search';
+var defaultProps = {
+  'data-testid': testId,
+  icon: testIcon,
+  title: {
+    id: 'title-id',
+    name: 'Search Icon'
+  }
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(IconSymbol, _extends({}, defaultProps, props)));
+};
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(IconSymbol, _extends({
+      icon: testIcon
+    }, props));
+  }
+});
+test('default icon', function () {
+  getComponent();
+  var icon = screen.getByTestId(testId);
+  expect(icon).toHaveClass('material-symbols-outlined');
+  screen.getByText(/search/i);
+});
+test('default icon', function () {
+  getComponent({
+    icon: 'face'
+  });
+  var icon = screen.getByTestId(testId);
+  expect(icon).toHaveClass('material-symbols-outlined');
+  screen.getByText(/face/i);
+});
+test('size prop', function () {
+  getComponent({
+    size: 'sm'
+  });
+  var icon = screen.getByTestId(testId);
+  expect(icon).toHaveStyle('font-size: 20px');
+});
+test('color prop', function () {
+  getComponent({
+    color: 'red'
+  });
+  var icon = screen.getByTestId(testId);
+  expect(icon).toHaveStyle('color: red');
+});
+test('hasFill prop', function () {
+  getComponent({
+    hasFill: true
+  });
+  var icon = screen.getByTestId(testId);
+  expect(icon).toHaveStyle("font-variation-settings: 'FILL' 1");
+});
+test('title prop', function () {
+  getComponent();
+  var icon = screen.getByTestId(testId);
+  expect(icon).toHaveAttribute('title', 'Search Icon');
+});
+test('className prop', function () {
+  var customClass = 'custom-icon-class';
+  getComponent({
+    className: customClass
+  });
+  var icon = screen.getByTestId(testId);
+  expect(icon).toHaveClass(customClass);
+});