@pingux/astro 2.131.0 → 2.132.0-alpha.0

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

@@ -23,7 +23,8 @@ var innerContainer = {
 };
 var thumbSwitch = _objectSpread(_objectSpread({}, base), {}, {
   border: '0',
-  display: 'inline-flex',
+  display: 'flex',
+  gap: 'sm',
   height: '26px',
   lineHeight: '26px',
   fontSize: '13px',
@@ -37,7 +38,15 @@ var thumbSwitch = _objectSpread(_objectSpread({}, 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({}, defaultFocus),
   '&.is-hovered': {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AstroProvider, NextGenDarkTheme } from '../../..';
-import { Default as RockerButtonGroupNextGen } from './RockerButtonGroup.chromatic.stories';
+import RockerButtonGroupNextGen from './RockerButtonGroupNextGen';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Chromatic Only Onyx Dark RockerButtonGroup'

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AstroProvider, NextGenTheme } from '../../..';
-import { Default as RockerButtonGroupNextGen } from './RockerButtonGroup.chromatic.stories';
+import RockerButtonGroupNextGen from './RockerButtonGroupNextGen';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Chromatic Only Onyx RockerButtonGroup'

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

@@ -1,21 +1,11 @@
 import React from 'react';
-import { RockerButton, RockerButtonGroup } from '../../../index';
 import WithUiLibraryCss from '../../../styles/themeOverrides/withUiLibraryCss';
+import RockerButtonGroupNextGen from './RockerButtonGroupNextGen';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Chromatic Only RockerButtonGroup',
-  component: RockerButtonGroup,
   decorators: [WithUiLibraryCss]
 };
 export var Default = function Default() {
-  return ___EmotionJSX(RockerButtonGroup, null, ___EmotionJSX(RockerButton, {
-    name: "and",
-    key: "and"
-  }, "And"), ___EmotionJSX(RockerButton, {
-    name: "or",
-    key: "or"
-  }, "Or"), ___EmotionJSX(RockerButton, {
-    name: "maybe",
-    key: "maybe"
-  }, "Maybe"));
+  return ___EmotionJSX(RockerButtonGroupNextGen, null);
 };

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { RockerButton, RockerButtonGroup } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var RockerButtonGroupNextGen = function RockerButtonGroupNextGen() {
+  return ___EmotionJSX(RockerButtonGroup, null, ___EmotionJSX(RockerButton, {
+    name: "and",
+    key: "and"
+  }, "And"), ___EmotionJSX(RockerButton, {
+    name: "or",
+    key: "or"
+  }, "Or"), ___EmotionJSX(RockerButton, {
+    name: "maybe",
+    key: "maybe"
+  }, "Maybe"));
+};
+export default RockerButtonGroupNextGen;

package/lib/components/StatusIcon/StatusIcon.js

@@ -0,0 +1,32 @@
+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 = ["status", "className", "isSelected", "iconProps"];
+import React from 'react';
+import { Box, Icon } from '../..';
+import { useGetTheme, useStatusClasses } from '../../hooks';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+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 = _objectWithoutProperties(props, _excluded);
+  var _useGetTheme = useGetTheme(),
+    icons = _useGetTheme.icons;
+  var _useStatusClasses = useStatusClasses(className, (_useStatusClasses2 = {
+      'status-icon': true
+    }, _defineProperty(_useStatusClasses2, "is-".concat(status), true), _defineProperty(_useStatusClasses2, 'is-selected', isSelected), _useStatusClasses2)),
+    classNames = _useStatusClasses.classNames;
+  return ___EmotionJSX(Box, _extends({
+    variant: "statusIcon.base",
+    className: classNames
+  }, others), ___EmotionJSX(Icon, _extends({
+    icon: icons[status],
+    "data-testid": "status-icon-".concat(status)
+  }, iconProps)));
+};
+StatusIcon.displayName = 'StatusIcon';
+export default StatusIcon;

package/lib/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/components/StatusIcon/StatusIcon.stories.js

@@ -0,0 +1,187 @@
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { withDesign } from 'storybook-addon-designs';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Box, RockerButton, RockerButtonGroup, StatusIcon, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../..';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
+import { statusIcon } from '../../utils/devUtils/constants/statuses';
+import StatusIconReadme from './StatusIcon.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/StatusIcon',
+  component: StatusIcon,
+  decorators: [withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(StatusIconReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['RockerButton', 'RockerButtonGroup', 'StatusIcon', 'Table', 'TableBody', 'TableCell', 'TableRow', 'Text']
+      }
+    }
+  }
+};
+var sx = {
+  tableHead: {
+    justifyContent: 'center'
+  },
+  tableCell: {
+    alignItems: 'center'
+  }
+};
+export var Default = function Default(_ref) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return ___EmotionJSX(Table, {
+    width: "500px"
+  }, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+    key: "head"
+  }, ___EmotionJSX(TableCell, {
+    isHeading: true
+  }), ___EmotionJSX(TableCell, {
+    isHeading: true,
+    sx: sx.tableHead
+  }, ___EmotionJSX(Text, null, "Normal")), ___EmotionJSX(TableCell, {
+    isHeading: true,
+    sx: sx.tableHead
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Text, null, "Selected"), ___EmotionJSX(Text, null, "(in button)"))))), ___EmotionJSX(TableBody, {
+    sx: {
+      border: 'unset'
+    }
+  }, ___EmotionJSX(TableRow, {
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "Critical")), ___EmotionJSX(TableCell, {
+    sx: sx.tableCell
+  }, ___EmotionJSX(StatusIcon, _extends({}, args, {
+    status: statusIcon.CRITICAL
+  }))), ___EmotionJSX(TableCell, {
+    sx: sx.tableCell
+  }, ___EmotionJSX(Text, null, ___EmotionJSX(StatusIcon, _extends({}, args, {
+    status: statusIcon.CRITICAL,
+    isSelected: true
+  }))))), ___EmotionJSX(TableRow, {
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "Major")), ___EmotionJSX(TableCell, {
+    sx: sx.tableCell
+  }, ___EmotionJSX(StatusIcon, _extends({}, args, {
+    status: statusIcon.MAJOR
+  }))), ___EmotionJSX(TableCell, {
+    sx: sx.tableCell
+  }, ___EmotionJSX(Text, null, ___EmotionJSX(StatusIcon, _extends({}, args, {
+    status: statusIcon.MAJOR,
+    isSelected: true
+  }))))), ___EmotionJSX(TableRow, {
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "Minor")), ___EmotionJSX(TableCell, {
+    sx: sx.tableCell
+  }, ___EmotionJSX(StatusIcon, _extends({}, args, {
+    status: statusIcon.MINOR
+  }))), ___EmotionJSX(TableCell, {
+    sx: sx.tableCell
+  }, ___EmotionJSX(Text, null, ___EmotionJSX(StatusIcon, _extends({}, args, {
+    status: statusIcon.MINOR,
+    isSelected: true
+  }))))), ___EmotionJSX(TableRow, {
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "Warning Neutral")), ___EmotionJSX(TableCell, {
+    sx: sx.tableCell
+  }, ___EmotionJSX(StatusIcon, _extends({}, args, {
+    status: statusIcon.WARNING_NEUTRAL
+  }))), ___EmotionJSX(TableCell, {
+    sx: sx.tableCell
+  }, ___EmotionJSX(Text, null, ___EmotionJSX(StatusIcon, _extends({}, args, {
+    status: statusIcon.WARNING_NEUTRAL,
+    isSelected: true
+  }))))), ___EmotionJSX(TableRow, {
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "Info")), ___EmotionJSX(TableCell, {
+    sx: sx.tableCell
+  }, ___EmotionJSX(StatusIcon, _extends({}, args, {
+    status: statusIcon.INFO
+  }))), ___EmotionJSX(TableCell, {
+    sx: sx.tableCell
+  }, ___EmotionJSX(Text, null, ___EmotionJSX(StatusIcon, _extends({}, args, {
+    status: statusIcon.INFO,
+    isSelected: true
+  }))))), ___EmotionJSX(TableRow, {
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "Warning")), ___EmotionJSX(TableCell, {
+    sx: sx.tableCell
+  }, ___EmotionJSX(StatusIcon, _extends({}, args, {
+    status: statusIcon.WARNING
+  }))), ___EmotionJSX(TableCell, {
+    sx: sx.tableCell
+  }, ___EmotionJSX(Text, null, ___EmotionJSX(StatusIcon, _extends({}, args, {
+    status: statusIcon.WARNING,
+    isSelected: true
+  }))))), ___EmotionJSX(TableRow, {
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "Fatal")), ___EmotionJSX(TableCell, {
+    sx: sx.tableCell
+  }, ___EmotionJSX(StatusIcon, _extends({}, args, {
+    status: statusIcon.FATAL
+  }))), ___EmotionJSX(TableCell, {
+    sx: sx.tableCell
+  }, ___EmotionJSX(Text, null, ___EmotionJSX(StatusIcon, _extends({}, args, {
+    status: statusIcon.FATAL,
+    isSelected: true
+  })))))));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.statusIcon.onyx
+  }
+};
+export var InRockerButton = function InRockerButton(_ref2) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+  return ___EmotionJSX(RockerButtonGroup, _extends({}, args, {
+    defaultSelectedKeys: ['all']
+  }), ___EmotionJSX(RockerButton, {
+    name: "all",
+    key: "all"
+  }, "Show All"), ___EmotionJSX(RockerButton, {
+    name: "critical",
+    key: "critical"
+  }, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.CRITICAL
+  }), "0 Criticals"), ___EmotionJSX(RockerButton, {
+    name: "major",
+    key: "major"
+  }, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.MAJOR
+  }), "0 Majors"), ___EmotionJSX(RockerButton, {
+    name: "minor",
+    key: "minor"
+  }, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.MINOR
+  }), "0 Minors"), ___EmotionJSX(RockerButton, {
+    name: "warning",
+    key: "warning"
+  }, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.WARNING
+  }), "0 Warnings"));
+};
+InRockerButton.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.statusIcon.inRockerButton
+  }
+};

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

@@ -0,0 +1,75 @@
+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'
+      }
+    }
+  }
+};
+export default {
+  base: base
+};

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

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { statusIcon } from '../../utils/devUtils/constants/statuses';
+import StatusIcon from './StatusIcon';
+import { jsx as ___EmotionJSX } from "@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 render(___EmotionJSX(StatusIcon, _extends({}, defaultProps, props)));
+};
+describe('StatusIcon', function () {
+  test('renders', function () {
+    getComponent();
+    screen.getByTestId(testId);
+  });
+  test.each([[statusIcon.DEFAULT, 'default'], [statusIcon.CRITICAL, 'critical'], [statusIcon.MAJOR, 'major'], [statusIcon.MINOR, 'minor'], [statusIcon.WARNING, 'warning'], [statusIcon.INFO, 'info'], [statusIcon.WARNING_NEUTRAL, 'warningNeutral'], [statusIcon.FATAL, 'fatal']])('when given status %s it renders icon with %s', function (status, icon) {
+    getComponent({
+      status: status,
+      'data-testid': icon
+    });
+    screen.getByTestId(icon);
+  });
+});

package/lib/components/StatusIcon/index.js

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

package/lib/components/StatusIcon/stories/NextGenDarkStatusIcon.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, NextGenDarkTheme } from '../../..';
+import NextGenStatusIcon from './NextGenStatusIcon';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx Dark StatusIcon'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    themeOverrides: [NextGenDarkTheme]
+  }, ___EmotionJSX(NextGenStatusIcon, null));
+};

package/lib/components/StatusIcon/stories/NextGenStatusIcon.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, NextGenTheme } from '../../..';
+import NextGenStatusIcon from './NextGenStatusIcon';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx StatusIcon'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    themeOverrides: [NextGenTheme]
+  }, ___EmotionJSX(NextGenStatusIcon, null));
+};

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import { StatusIcon, Table, TableBody, TableCell, TableRow, Text } from '../../..';
+import { statusIcon } from '../../../utils/devUtils/constants/statuses';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var NextGenStatusIcon = function NextGenStatusIcon() {
+  return ___EmotionJSX(Table, null, ___EmotionJSX(TableBody, {
+    sx: {
+      border: 'unset'
+    }
+  }, ___EmotionJSX(TableRow, {
+    height: "45px",
+    bg: "transparent !important",
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "Critical")), ___EmotionJSX(TableCell, null, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.CRITICAL
+  })), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.CRITICAL,
+    isSelected: true
+  })))), ___EmotionJSX(TableRow, {
+    height: "45px",
+    bg: "transparent !important",
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "Major")), ___EmotionJSX(TableCell, null, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.MAJOR
+  })), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.MAJOR,
+    isSelected: true
+  })))), ___EmotionJSX(TableRow, {
+    height: "45px",
+    bg: "transparent !important",
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "Minor")), ___EmotionJSX(TableCell, null, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.MINOR
+  })), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.MINOR,
+    isSelected: true
+  })))), ___EmotionJSX(TableRow, {
+    height: "45px",
+    bg: "transparent !important",
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "Warning Neutral")), ___EmotionJSX(TableCell, null, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.WARNING_NEUTRAL
+  })), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.WARNING_NEUTRAL,
+    isSelected: true
+  })))), ___EmotionJSX(TableRow, {
+    height: "45px",
+    bg: "transparent !important",
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "Info")), ___EmotionJSX(TableCell, null, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.INFO
+  })), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.INFO,
+    isSelected: true
+  })))), ___EmotionJSX(TableRow, {
+    height: "45px",
+    bg: "transparent !important",
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "Warning")), ___EmotionJSX(TableCell, null, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.WARNING
+  })), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.WARNING,
+    isSelected: true
+  })))), ___EmotionJSX(TableRow, {
+    height: "45px",
+    bg: "transparent !important",
+    sx: {
+      borderBottom: 'none !important'
+    }
+  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, "Fatal")), ___EmotionJSX(TableCell, null, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.FATAL
+  })), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, null, ___EmotionJSX(StatusIcon, {
+    status: statusIcon.FATAL,
+    isSelected: true
+  }))))));
+};
+export default NextGenStatusIcon;

package/lib/index.js

@@ -179,6 +179,8 @@ export * from './components/Separator';
 export { default as Skeleton } from './components/Skeleton';
 export * from './components/Skeleton';
 export { default as SliderField } from './components/SliderField/SliderField';
+export { default as StatusIcon } from './components/StatusIcon';
+export * from './components/StatusIcon';
 export { Step, default as Stepper } from './components/Stepper';
 export * from './components/Stepper';
 export { default as Switch } from './components/Switch';

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -58,21 +58,22 @@ var modal = {
 };
 var rockerButton = {
   innerContainer: {
-    border: 0,
-    boxShadow: 'none',
-    backgroundColor: 'gray-900',
-    'button': {
-      backgroundColor: 'gray-900',
-      color: 'blue-400',
-      '&.is-selected': {
-        color: 'black'
-      },
-      '&.is-hovered': {
-        color: 'black'
-      },
-      '&.is-pressed': {
-        color: 'black'
+    backgroundColor: 'background.base'
+  },
+  thumbSwitch: {
+    backgroundColor: 'background.base',
+    color: 'blue-400',
+    '&.is-selected': {
+      color: 'black',
+      '& > div.status-icon': {
+        bg: 'black'
       }
+    },
+    '&.is-hovered': {
+      color: 'black'
+    },
+    '&.is-pressed': {
+      color: 'black'
     }
   }
 };
@@ -87,6 +88,66 @@ var tooltip = {
     color: 'blue-400'
   }
 };
+var statusIcon = {
+  base: {
+    '&.is-default': {
+      bg: 'gray-100',
+      path: {
+        fill: 'black'
+      }
+    },
+    '&.is-critical': {
+      bg: 'red-500',
+      path: {
+        fill: 'black'
+      }
+    },
+    '&.is-warning': {
+      bg: 'yellow-500',
+      path: {
+        fill: 'black'
+      }
+    },
+    '&.is-info': {
+      bg: 'blue-500',
+      path: {
+        fill: 'black'
+      }
+    },
+    '&.is-major': {
+      bg: 'orange-500',
+      path: {
+        fill: 'black'
+      }
+    },
+    '&.is-minor': {
+      bg: 'yellow-500',
+      path: {
+        fill: 'black'
+      }
+    },
+    '&.is-warning-neutral': {
+      bg: 'gray-700',
+      path: {
+        fill: 'gray-100'
+      }
+    },
+    '&.is-fatal': {
+      bg: 'gray-100',
+      path: {
+        fill: 'gray-700'
+      }
+    },
+    '&.is-selected.is-selected': {
+      bg: 'black',
+      '& > svg': {
+        path: {
+          fill: 'active'
+        }
+      }
+    }
+  }
+};
 export default {
   rockerButton: rockerButton,
   attachment: attachment,
@@ -141,6 +202,7 @@ export default {
       color: 'text.secondary'
     }
   },
+  statusIcon: statusIcon,
   fieldHelperText: {
     title: {
       '&.is-default': {