@pingux/astro 2.131.0 → 2.132.0-alpha.1

package/lib/cjs/components/RockerButton/RockerButton.js

@@ -68,6 +68,7 @@ var RockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     focusRingClass: "is-focused"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     as: "button",
+    isRow: true,
     className: classNames,
     variant: "variants.rockerButton.thumbSwitch",
     ref: rockerButtonRef,

package/lib/cjs/components/RockerButton/RockerButton.styles.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
     thumbSwitch: {
         border: string;
         display: string;
+        gap: string;
         height: string;
         lineHeight: string;
         fontSize: string;
@@ -27,6 +28,14 @@ declare const _default: {
             bg: string;
             color: string;
             zIndex: string;
+            '& > div.status-icon': {
+                bg: string;
+                '& > svg': {
+                    path: {
+                        fill: string;
+                    };
+                };
+            };
         };
         '&.is-focused': {
             outline: string;

package/lib/cjs/components/RockerButton/RockerButton.styles.js

@@ -30,7 +30,8 @@ var innerContainer = {
 };
 var thumbSwitch = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
   border: '0',
-  display: 'inline-flex',
+  display: 'flex',
+  gap: 'sm',
   height: '26px',
   lineHeight: '26px',
   fontSize: '13px',
@@ -44,7 +45,15 @@ var thumbSwitch = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
   '&.is-selected': {
     bg: 'accent.20',
     color: 'white',
-    zIndex: '1'
+    zIndex: '1',
+    '& > div.status-icon': {
+      bg: 'white',
+      '& > svg': {
+        path: {
+          fill: 'accent.30'
+        }
+      }
+    }
   },
   '&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
   '&.is-hovered': {

package/lib/cjs/components/RockerButtonGroup/stories/NextGenDarkRockerButtonGroup.chromatic.stories.js

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ = require("../../..");
-var _RockerButtonGroupChromatic = require("./RockerButtonGroup.chromatic.stories");
+var _RockerButtonGroupNextGen = _interopRequireDefault(require("./RockerButtonGroupNextGen"));
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Chromatic Only Onyx Dark RockerButtonGroup'
@@ -17,6 +17,6 @@ exports["default"] = _default;
 var Default = function Default() {
   return (0, _react2.jsx)(_.AstroProvider, {
     themeOverrides: [_.NextGenDarkTheme]
-  }, (0, _react2.jsx)(_RockerButtonGroupChromatic.Default, null));
+  }, (0, _react2.jsx)(_RockerButtonGroupNextGen["default"], null));
 };
 exports.Default = Default;

package/lib/cjs/components/RockerButtonGroup/stories/NextGenRockerButtonGroup.chromatic.stories.js

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ = require("../../..");
-var _RockerButtonGroupChromatic = require("./RockerButtonGroup.chromatic.stories");
+var _RockerButtonGroupNextGen = _interopRequireDefault(require("./RockerButtonGroupNextGen"));
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Chromatic Only Onyx RockerButtonGroup'
@@ -17,6 +17,6 @@ exports["default"] = _default;
 var Default = function Default() {
   return (0, _react2.jsx)(_.AstroProvider, {
     theme: _.NextGenTheme
-  }, (0, _react2.jsx)(_RockerButtonGroupChromatic.Default, null));
+  }, (0, _react2.jsx)(_RockerButtonGroupNextGen["default"], null));
 };
 exports.Default = Default;

package/lib/cjs/components/RockerButtonGroup/stories/RockerButtonGroup.chromatic.stories.js

@@ -7,25 +7,15 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _index = require("../../../index");
 var _withUiLibraryCss = _interopRequireDefault(require("../../../styles/themeOverrides/withUiLibraryCss"));
+var _RockerButtonGroupNextGen = _interopRequireDefault(require("./RockerButtonGroupNextGen"));
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Chromatic Only RockerButtonGroup',
-  component: _index.RockerButtonGroup,
   decorators: [_withUiLibraryCss["default"]]
 };
 exports["default"] = _default;
 var Default = function Default() {
-  return (0, _react2.jsx)(_index.RockerButtonGroup, null, (0, _react2.jsx)(_index.RockerButton, {
-    name: "and",
-    key: "and"
-  }, "And"), (0, _react2.jsx)(_index.RockerButton, {
-    name: "or",
-    key: "or"
-  }, "Or"), (0, _react2.jsx)(_index.RockerButton, {
-    name: "maybe",
-    key: "maybe"
-  }, "Maybe"));
+  return (0, _react2.jsx)(_RockerButtonGroupNextGen["default"], null);
 };
 exports.Default = Default;

package/lib/cjs/components/RockerButtonGroup/stories/RockerButtonGroupNextGen.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const RockerButtonGroupNextGen: () => React.JSX.Element;
+export default RockerButtonGroupNextGen;

package/lib/cjs/components/RockerButtonGroup/stories/RockerButtonGroupNextGen.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../../../index");
+var _react2 = require("@emotion/react");
+var RockerButtonGroupNextGen = function RockerButtonGroupNextGen() {
+  return (0, _react2.jsx)(_index.RockerButtonGroup, null, (0, _react2.jsx)(_index.RockerButton, {
+    name: "and",
+    key: "and"
+  }, "And"), (0, _react2.jsx)(_index.RockerButton, {
+    name: "or",
+    key: "or"
+  }, "Or"), (0, _react2.jsx)(_index.RockerButton, {
+    name: "maybe",
+    key: "maybe"
+  }, "Maybe"));
+};
+var _default = RockerButtonGroupNextGen;
+exports["default"] = _default;

package/lib/cjs/components/StatusIcon/StatusIcon.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { IconProps } from '../../types';
+export type Status = 'default' | 'warning' | 'info' | 'critical' | 'major' | 'minor' | 'warningNeutral' | 'fatal';
+export interface StatusIconProps {
+    'data-testid'?: string;
+    status?: Status;
+    className?: string;
+    isSelected?: boolean;
+    iconProps?: IconProps;
+}
+declare const StatusIcon: {
+    (props: StatusIconProps): React.JSX.Element;
+    displayName: string;
+};
+export default StatusIcon;

package/lib/cjs/components/StatusIcon/StatusIcon.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _hooks = require("../../hooks");
+var _react2 = require("@emotion/react");
+var _excluded = ["status", "className", "isSelected", "iconProps"];
+var StatusIcon = function StatusIcon(props) {
+  var _useStatusClasses2;
+  var _props$status = props.status,
+    status = _props$status === void 0 ? 'default' : _props$status,
+    className = props.className,
+    isSelected = props.isSelected,
+    iconProps = props.iconProps,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    icons = _useGetTheme.icons;
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (_useStatusClasses2 = {
+      'status-icon': true
+    }, (0, _defineProperty2["default"])(_useStatusClasses2, "is-".concat(status), true), (0, _defineProperty2["default"])(_useStatusClasses2, 'is-selected', isSelected), _useStatusClasses2)),
+    classNames = _useStatusClasses.classNames;
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    variant: "statusIcon.base",
+    className: classNames
+  }, others), (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
+    icon: icons[status],
+    "data-testid": "status-icon-".concat(status)
+  }, iconProps)));
+};
+StatusIcon.displayName = 'StatusIcon';
+var _default = StatusIcon;
+exports["default"] = _default;

package/lib/cjs/components/StatusIcon/StatusIcon.mdx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/StatusIcon" />
+
+# StatusIcon
+
+StatusIcon are small images that represent status of an item, often providing visual feedback to users.
+
+Import icons from the [Material UI Icon Library](https://materialdesignicons.com/)
+
+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.
+
+#### Screen Readers
+
+If the icon has a title associated with it, the **`aria-labelledby`** attribute is used to provide the label ID.

package/lib/cjs/components/StatusIcon/StatusIcon.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn;
+export declare const InRockerButton: StoryFn;

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

@@ -0,0 +1,198 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.InRockerButton = exports.Default = void 0;
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _storybookAddonDesigns = require("storybook-addon-designs");
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _ = require("../..");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
+var _statuses = require("../../utils/devUtils/constants/statuses");
+var _StatusIcon = _interopRequireDefault(require("./StatusIcon.mdx"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Components/StatusIcon',
+  component: _.StatusIcon,
+  decorators: [_storybookAddonDesigns.withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_StatusIcon["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['RockerButton', 'RockerButtonGroup', 'StatusIcon', 'Table', 'TableBody', 'TableCell', 'TableRow', 'Text']
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var sx = {
+  tableHead: {
+    justifyContent: 'center'
+  },
+  tableCell: {
+    alignItems: 'center'
+  }
+};
+var Default = function Default(_ref) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
+  return (0, _react2.jsx)(_.Table, {
+    width: "500px"
+  }, (0, _react2.jsx)(_.TableHead, null, (0, _react2.jsx)(_.TableRow, {
+    key: "head"
+  }, (0, _react2.jsx)(_.TableCell, {
+    isHeading: true
+  }), (0, _react2.jsx)(_.TableCell, {
+    isHeading: true,
+    sx: sx.tableHead
+  }, (0, _react2.jsx)(_.Text, null, "Normal")), (0, _react2.jsx)(_.TableCell, {
+    isHeading: true,
+    sx: sx.tableHead
+  }, (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.Text, null, "Selected"), (0, _react2.jsx)(_.Text, null, "(in button)"))))), (0, _react2.jsx)(_.TableBody, {
+    sx: {
+      border: 'unset'
+    }
+  }, (0, _react2.jsx)(_.TableRow, {
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_.Text, null, "Critical")), (0, _react2.jsx)(_.TableCell, {
+    sx: sx.tableCell
+  }, (0, _react2.jsx)(_.StatusIcon, (0, _extends2["default"])({}, args, {
+    status: _statuses.statusIcon.CRITICAL
+  }))), (0, _react2.jsx)(_.TableCell, {
+    sx: sx.tableCell
+  }, (0, _react2.jsx)(_.Text, null, (0, _react2.jsx)(_.StatusIcon, (0, _extends2["default"])({}, args, {
+    status: _statuses.statusIcon.CRITICAL,
+    isSelected: true
+  }))))), (0, _react2.jsx)(_.TableRow, {
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_.Text, null, "Major")), (0, _react2.jsx)(_.TableCell, {
+    sx: sx.tableCell
+  }, (0, _react2.jsx)(_.StatusIcon, (0, _extends2["default"])({}, args, {
+    status: _statuses.statusIcon.MAJOR
+  }))), (0, _react2.jsx)(_.TableCell, {
+    sx: sx.tableCell
+  }, (0, _react2.jsx)(_.Text, null, (0, _react2.jsx)(_.StatusIcon, (0, _extends2["default"])({}, args, {
+    status: _statuses.statusIcon.MAJOR,
+    isSelected: true
+  }))))), (0, _react2.jsx)(_.TableRow, {
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_.Text, null, "Minor")), (0, _react2.jsx)(_.TableCell, {
+    sx: sx.tableCell
+  }, (0, _react2.jsx)(_.StatusIcon, (0, _extends2["default"])({}, args, {
+    status: _statuses.statusIcon.MINOR
+  }))), (0, _react2.jsx)(_.TableCell, {
+    sx: sx.tableCell
+  }, (0, _react2.jsx)(_.Text, null, (0, _react2.jsx)(_.StatusIcon, (0, _extends2["default"])({}, args, {
+    status: _statuses.statusIcon.MINOR,
+    isSelected: true
+  }))))), (0, _react2.jsx)(_.TableRow, {
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_.Text, null, "Warning Neutral")), (0, _react2.jsx)(_.TableCell, {
+    sx: sx.tableCell
+  }, (0, _react2.jsx)(_.StatusIcon, (0, _extends2["default"])({}, args, {
+    status: _statuses.statusIcon.WARNING_NEUTRAL
+  }))), (0, _react2.jsx)(_.TableCell, {
+    sx: sx.tableCell
+  }, (0, _react2.jsx)(_.Text, null, (0, _react2.jsx)(_.StatusIcon, (0, _extends2["default"])({}, args, {
+    status: _statuses.statusIcon.WARNING_NEUTRAL,
+    isSelected: true
+  }))))), (0, _react2.jsx)(_.TableRow, {
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_.Text, null, "Info")), (0, _react2.jsx)(_.TableCell, {
+    sx: sx.tableCell
+  }, (0, _react2.jsx)(_.StatusIcon, (0, _extends2["default"])({}, args, {
+    status: _statuses.statusIcon.INFO
+  }))), (0, _react2.jsx)(_.TableCell, {
+    sx: sx.tableCell
+  }, (0, _react2.jsx)(_.Text, null, (0, _react2.jsx)(_.StatusIcon, (0, _extends2["default"])({}, args, {
+    status: _statuses.statusIcon.INFO,
+    isSelected: true
+  }))))), (0, _react2.jsx)(_.TableRow, {
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_.Text, null, "Warning")), (0, _react2.jsx)(_.TableCell, {
+    sx: sx.tableCell
+  }, (0, _react2.jsx)(_.StatusIcon, (0, _extends2["default"])({}, args, {
+    status: _statuses.statusIcon.WARNING
+  }))), (0, _react2.jsx)(_.TableCell, {
+    sx: sx.tableCell
+  }, (0, _react2.jsx)(_.Text, null, (0, _react2.jsx)(_.StatusIcon, (0, _extends2["default"])({}, args, {
+    status: _statuses.statusIcon.WARNING,
+    isSelected: true
+  }))))), (0, _react2.jsx)(_.TableRow, {
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, (0, _react2.jsx)(_.TableCell, null, (0, _react2.jsx)(_.Text, null, "Fatal")), (0, _react2.jsx)(_.TableCell, {
+    sx: sx.tableCell
+  }, (0, _react2.jsx)(_.StatusIcon, (0, _extends2["default"])({}, args, {
+    status: _statuses.statusIcon.FATAL
+  }))), (0, _react2.jsx)(_.TableCell, {
+    sx: sx.tableCell
+  }, (0, _react2.jsx)(_.Text, null, (0, _react2.jsx)(_.StatusIcon, (0, _extends2["default"])({}, args, {
+    status: _statuses.statusIcon.FATAL,
+    isSelected: true
+  })))))));
+};
+exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.statusIcon.onyx
+  }
+};
+var InRockerButton = function InRockerButton(_ref2) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
+  return (0, _react2.jsx)(_.RockerButtonGroup, (0, _extends2["default"])({}, args, {
+    defaultSelectedKeys: ['all']
+  }), (0, _react2.jsx)(_.RockerButton, {
+    name: "all",
+    key: "all"
+  }, "Show All"), (0, _react2.jsx)(_.RockerButton, {
+    name: "critical",
+    key: "critical"
+  }, (0, _react2.jsx)(_.StatusIcon, {
+    status: _statuses.statusIcon.CRITICAL
+  }), "0 Criticals"), (0, _react2.jsx)(_.RockerButton, {
+    name: "major",
+    key: "major"
+  }, (0, _react2.jsx)(_.StatusIcon, {
+    status: _statuses.statusIcon.MAJOR
+  }), "0 Majors"), (0, _react2.jsx)(_.RockerButton, {
+    name: "minor",
+    key: "minor"
+  }, (0, _react2.jsx)(_.StatusIcon, {
+    status: _statuses.statusIcon.MINOR
+  }), "0 Minors"), (0, _react2.jsx)(_.RockerButton, {
+    name: "warning",
+    key: "warning"
+  }, (0, _react2.jsx)(_.StatusIcon, {
+    status: _statuses.statusIcon.WARNING
+  }), "0 Warnings"));
+};
+exports.InRockerButton = InRockerButton;
+InRockerButton.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.statusIcon.inRockerButton
+  }
+};

package/lib/cjs/components/StatusIcon/StatusIcon.styles.d.ts

@@ -0,0 +1,75 @@
+declare const _default: {
+    base: {
+        width: string;
+        height: string;
+        minWidth: string;
+        minHeight: string;
+        alignItems: string;
+        justifyContent: string;
+        borderRadius: string;
+        p: string;
+        '& > svg': {
+            width: string;
+            height: string;
+            minWidth: string;
+            minHeight: string;
+        };
+        '&.is-default': {
+            bg: string;
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-critical': {
+            bg: string;
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-warning': {
+            bg: string;
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-info': {
+            bg: string;
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-major': {
+            bg: string;
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-minor': {
+            bg: string;
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-warning-neutral': {
+            bg: string;
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-fatal': {
+            bg: string;
+            path: {
+                fill: string;
+            };
+        };
+        '&.is-selected.is-selected': {
+            bg: string;
+            '& > svg': {
+                path: {
+                    fill: string;
+                };
+            };
+        };
+    };
+};
+export default _default;

package/lib/cjs/components/StatusIcon/StatusIcon.styles.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var base = {
+  width: '20px',
+  height: '20px',
+  minWidth: '20px',
+  minHeight: '20px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '50%',
+  p: '0',
+  '& > svg': {
+    width: '16px',
+    height: '16px',
+    minWidth: '16px',
+    minHeight: '16px'
+  },
+  '&.is-default': {
+    bg: 'neutral.90',
+    path: {
+      fill: 'text.primary'
+    }
+  },
+  '&.is-critical': {
+    bg: 'critical.light',
+    path: {
+      fill: 'critical.bright'
+    }
+  },
+  '&.is-warning': {
+    bg: 'warning.light',
+    path: {
+      fill: 'warning.bright'
+    }
+  },
+  '&.is-info': {
+    bg: 'accent.95',
+    path: {
+      fill: 'active'
+    }
+  },
+  '&.is-major': {
+    bg: 'critical.light',
+    path: {
+      fill: 'critical.bright'
+    }
+  },
+  '&.is-minor': {
+    bg: 'warning.light',
+    path: {
+      fill: 'warning.bright'
+    }
+  },
+  '&.is-warning-neutral': {
+    bg: 'neutral.90',
+    path: {
+      fill: 'text.secondary'
+    }
+  },
+  '&.is-fatal': {
+    bg: 'neutral.10',
+    path: {
+      fill: 'white'
+    }
+  },
+  '&.is-selected.is-selected': {
+    bg: 'white',
+    '& > svg': {
+      path: {
+        fill: 'accent.30'
+      }
+    }
+  }
+};
+var _default = {
+  base: base
+};
+exports["default"] = _default;

package/lib/cjs/components/StatusIcon/StatusIcon.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _statuses = require("../../utils/devUtils/constants/statuses");
+var _StatusIcon = _interopRequireDefault(require("./StatusIcon"));
+var _react3 = require("@emotion/react");
+var testId = 'test-icon';
+var defaultProps = {
+  'data-testid': testId
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_StatusIcon["default"], (0, _extends2["default"])({}, defaultProps, props)));
+};
+describe('StatusIcon', function () {
+  test('renders', function () {
+    getComponent();
+    _react2.screen.getByTestId(testId);
+  });
+  test.each([[_statuses.statusIcon.DEFAULT, 'default'], [_statuses.statusIcon.CRITICAL, 'critical'], [_statuses.statusIcon.MAJOR, 'major'], [_statuses.statusIcon.MINOR, 'minor'], [_statuses.statusIcon.WARNING, 'warning'], [_statuses.statusIcon.INFO, 'info'], [_statuses.statusIcon.WARNING_NEUTRAL, 'warningNeutral'], [_statuses.statusIcon.FATAL, 'fatal']])('when given status %s it renders icon with %s', function (status, icon) {
+    getComponent({
+      status: status,
+      'data-testid': icon
+    });
+    _react2.screen.getByTestId(icon);
+  });
+});

package/lib/cjs/components/StatusIcon/index.d.ts

@@ -0,0 +1 @@
+export { default } from './StatusIcon';

package/lib/cjs/components/StatusIcon/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _StatusIcon["default"];
+  }
+});
+var _StatusIcon = _interopRequireDefault(require("./StatusIcon"));

package/lib/cjs/components/StatusIcon/stories/NextGenDarkStatusIcon.chromatic.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;