@pingux/astro 2.131.0 → 2.132.0-alpha.1

package/lib/styles/themes/astro/customProperties/icons.js

@@ -1,15 +1,21 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _MenuDown$MenuUp$stat;
 import AlertCircleIcon from '@pingux/mdi-react/AlertCircleIcon';
+import AlertCircleOutlineIcon from '@pingux/mdi-react/AlertCircleOutlineIcon';
 import AlertIcon from '@pingux/mdi-react/AlertIcon';
+import AlertOutlineIcon from '@pingux/mdi-react/AlertOutlineIcon';
+import ArrowDownIcon from '@pingux/mdi-react/ArrowDownIcon';
+import ArrowUpIcon from '@pingux/mdi-react/ArrowUpIcon';
 import CheckCircleIcon from '@pingux/mdi-react/CheckCircleIcon';
+import CloseOctagonOutlineIcon from '@pingux/mdi-react/CloseOctagonOutlineIcon';
 import InformationIcon from '@pingux/mdi-react/InformationIcon';
+import InformationOutlineIcon from '@pingux/mdi-react/InformationOutlineIcon';
 import MenuDown from '@pingux/mdi-react/MenuDownIcon';
 import MenuUp from '@pingux/mdi-react/MenuUpIcon';
 import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
 import { pingLogoHorizontalSmallWhite } from '../../../../utils/devUtils/constants/logos';
-import statuses from '../../../../utils/devUtils/constants/statuses';
+import statuses, { statusIcon } from '../../../../utils/devUtils/constants/statuses';
 export default (_MenuDown$MenuUp$stat = {
   MenuDown: MenuDown,
   MenuUp: MenuUp
-}, _defineProperty(_MenuDown$MenuUp$stat, statuses.DEFAULT, InformationIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.ERROR, AlertCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.SUCCESS, CheckCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.WARNING, AlertIcon), _defineProperty(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), _defineProperty(_MenuDown$MenuUp$stat, "listViewMenu", MoreVertIcon), _MenuDown$MenuUp$stat);
+}, _defineProperty(_MenuDown$MenuUp$stat, statuses.DEFAULT, InformationIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.ERROR, AlertCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.SUCCESS, CheckCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.WARNING, AlertIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.INFO, InformationOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.CRITICAL, AlertCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.MAJOR, ArrowUpIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.MINOR, ArrowDownIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.WARNING_NEUTRAL, AlertOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.FATAL, CloseOctagonOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), _defineProperty(_MenuDown$MenuUp$stat, "listViewMenu", MoreVertIcon), _MenuDown$MenuUp$stat);

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['GridList', 'DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination', 'Callout', 'Table', 'TableBase', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField'];
+var nextGenConvertedComponents = ['GridList', 'DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination', 'StatusIcon', 'Callout', 'Table', 'TableBase', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],
@@ -13,7 +13,8 @@ export var astroBlacklistStory = {
   DataTable: ['Onyx Default'],
   NavBar: ['Onyx Default'],
   SearchField: ['Onyx With Filter'],
-  Callout: ['Customizations']
+  Callout: ['Customizations'],
+  StatusIcon: ['Default', 'In Rocker Button']
 };
 export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer'];
 export default nextGenConvertedComponents;

package/lib/styles/themes/next-gen/customProperties/icons.js

@@ -2,14 +2,17 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _MenuDown$MenuUp$stat;
 import AlertCircleOutlineIcon from '@pingux/mdi-react/AlertCircleOutlineIcon';
 import AlertOutlineIcon from '@pingux/mdi-react/AlertOutlineIcon';
+import ArrowDownIcon from '@pingux/mdi-react/ArrowDownIcon';
+import ArrowUpIcon from '@pingux/mdi-react/ArrowUpIcon';
 import CheckCircleOutlineIcon from '@pingux/mdi-react/CheckCircleOutlineIcon';
 import ChevronDownIcon from '@pingux/mdi-react/ChevronDownIcon';
 import ChevronUpIcon from '@pingux/mdi-react/ChevronUpIcon';
+import CloseOctagonOutlineIcon from '@pingux/mdi-react/CloseOctagonOutlineIcon';
 import DotsHorizontalIcon from '@pingux/mdi-react/DotsHorizontalIcon';
 import InformationOutlineIcon from '@pingux/mdi-react/InformationOutlineIcon';
 import { pingLogoHorizontalSmall } from '../../../../utils/devUtils/constants/logos';
-import statuses from '../../../../utils/devUtils/constants/statuses';
+import statuses, { statusIcon } from '../../../../utils/devUtils/constants/statuses';
 export default (_MenuDown$MenuUp$stat = {
   MenuDown: ChevronDownIcon,
   MenuUp: ChevronUpIcon
-}, _defineProperty(_MenuDown$MenuUp$stat, statuses.DEFAULT, InformationOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.ERROR, AlertCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.SUCCESS, CheckCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.WARNING, AlertOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", pingLogoHorizontalSmall), _defineProperty(_MenuDown$MenuUp$stat, "listViewMenu", DotsHorizontalIcon), _MenuDown$MenuUp$stat);
+}, _defineProperty(_MenuDown$MenuUp$stat, statuses.DEFAULT, InformationOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.ERROR, AlertCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.SUCCESS, CheckCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.WARNING, AlertOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.INFO, InformationOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.CRITICAL, AlertCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.MAJOR, ArrowUpIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.MINOR, ArrowDownIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.WARNING_NEUTRAL, AlertOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.FATAL, CloseOctagonOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", pingLogoHorizontalSmall), _defineProperty(_MenuDown$MenuUp$stat, "listViewMenu", DotsHorizontalIcon), _MenuDown$MenuUp$stat);

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

@@ -13,7 +13,7 @@ import attachment from '../../../../components/AIComponents/Attachment/Attachmen
 import skeleton from '../../../../components/Skeleton/Skeleton.styles';
 import codeView from '../codeView/codeView';
 import { avatar } from './avatar';
-import button from './button';
+import button, { defaultFocus } from './button';
 import callout from './callout';
 import { dataTable } from './dataTable';
 import { footer } from './footer';
@@ -292,53 +292,58 @@ var overlayPanel = {
 };
 var rockerButton = {
   innerContainer: {
-    height: 50,
     boxShadow: 'none',
-    backgroundColor: 'white',
+    backgroundColor: 'common.background.base',
     borderRadius: '50px',
     padding: 0,
-    'button': {
-      backgroundColor: 'white',
-      padding: '0px 15px',
-      height: '100%',
-      color: 'active',
-      border: '1px solid',
-      borderColor: 'active',
-      borderRadius: 0,
-      '&.is-selected': {
-        color: 'white',
-        backgroundColor: 'active'
-      },
-      '&.is-hovered': {
-        backgroundColor: '#1462C8 !important',
-        color: 'white'
-      },
-      '&.is-pressed': {
-        backgroundColor: '#135CBC !important',
-        color: 'white'
-      },
-      '&.is-focused': {
-        outline: '2px solid',
-        outlineColor: 'focus',
-        outlineOffset: '2px',
-        position: 'relative',
-        zIndex: '1000'
-      }
-    },
-    'button:not(:first-child)': {
-      borderLeft: 0
+    border: 'none'
+  },
+  thumbSwitch: {
+    textTransform: 'none',
+    backgroundColor: 'common.background.base',
+    padding: 'md',
+    height: '50px',
+    color: 'active',
+    border: '1px solid',
+    borderColor: 'active',
+    borderRadius: 0,
+    '&:not(:last-of-type)': {
+      borderRight: 'none'
     },
-    'button:first-child': {
+    '&:first-of-type': {
       borderTopLeftRadius: '50px',
       borderBottomLeftRadius: '50px'
     },
-    'button:last-child': {
+    '&:last-of-type': {
       borderTopRightRadius: '50px',
       borderBottomRightRadius: '50px'
-    }
-  },
-  thumbSwitch: {
-    textTransform: 'none'
+    },
+    '&.is-selected': {
+      color: 'white',
+      backgroundColor: 'active',
+      '& > div.status-icon': {
+        bg: 'white',
+        '& > svg': {
+          path: {
+            fill: 'active'
+          }
+        }
+      }
+    },
+    '&.is-hovered': {
+      borderColor: '#1462C8',
+      backgroundColor: '#1462C8 !important',
+      color: 'white'
+    },
+    '&.is-pressed': {
+      borderColor: '#135CBC',
+      backgroundColor: '#135CBC !important',
+      color: 'white'
+    },
+    '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+      position: 'relative',
+      zIndex: '1000'
+    })
   }
 };
 var loader = {
@@ -346,6 +351,66 @@ var loader = {
     color: 'active'
   }
 };
+var statusIcon = {
+  base: {
+    '&.is-default': {
+      bg: 'gray-100',
+      path: {
+        fill: 'gray-700'
+      }
+    },
+    '&.is-critical': {
+      bg: 'red-100',
+      path: {
+        fill: 'red-700'
+      }
+    },
+    '&.is-warning': {
+      bg: 'yellow-100',
+      path: {
+        fill: 'yellow-800'
+      }
+    },
+    '&.is-info': {
+      bg: 'blue-100',
+      path: {
+        fill: 'blue-600'
+      }
+    },
+    '&.is-major': {
+      bg: 'orange-100',
+      path: {
+        fill: 'orange-700'
+      }
+    },
+    '&.is-minor': {
+      bg: 'yellow-100',
+      path: {
+        fill: 'yellow-800'
+      }
+    },
+    '&.is-warning-neutral': {
+      bg: 'gray-100',
+      path: {
+        fill: 'gray-700'
+      }
+    },
+    '&.is-fatal': {
+      bg: 'gray-700',
+      path: {
+        fill: 'gray-100'
+      }
+    },
+    '&.is-selected.is-selected': {
+      bg: 'white',
+      '& > svg': {
+        path: {
+          fill: 'active'
+        }
+      }
+    }
+  }
+};
 export default {
   attachment: attachment,
   navBar: navBar,
@@ -381,6 +446,7 @@ export default {
   callout: callout,
   table: table,
   tableBase: tableBase,
+  statusIcon: statusIcon,
   box: {
     indeterminateCheckboxIcon: {
       height: '19.25px',

package/lib/styles/variants/variants.js

@@ -51,6 +51,7 @@ import scrollBox from '../../components/ScrollBox/ScrollBox.styles';
 import separator from '../../components/Separator/Separator.styles';
 import skeleton from '../../components/Skeleton/Skeleton.styles';
 import slider from '../../components/SliderField/Slider.styles';
+import statusIcon from '../../components/StatusIcon/StatusIcon.styles';
 import stepper from '../../components/Stepper/Stepper.styles';
 import table from '../../components/Table/Table.styles';
 import tableBase from '../../components/TableBase/TableBase.styles';
@@ -109,5 +110,6 @@ export default _objectSpread(_objectSpread({
   tooltip: tooltip,
   treeView: treeView
 }, tab), {}, {
+  statusIcon: statusIcon,
   tableBase: tableBase
 });

package/lib/utils/designUtils/figmaLinks.js

@@ -224,5 +224,9 @@ export var FIGMA_LINKS = {
   },
   searchField: {
     onyx: 'https://www.figma.com/file/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=249-542&p=f&t=ZRXGSYrM1OXJ41QB-0'
+  },
+  statusIcon: {
+    onyx: 'https://www.figma.com/file/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=1516-84&p=f&t=1IrTSMDCAftH6Roq-0',
+    inRockerButton: 'https://www.figma.com/file/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=1516-498&t=TcHspIxapoPWqWJC-4'
   }
 };

package/lib/utils/devUtils/constants/statuses.js

@@ -1,6 +1,17 @@
-export default {
+var statuses = {
   DEFAULT: 'default',
   ERROR: 'error',
   SUCCESS: 'success',
   WARNING: 'warning'
-};
+};
+export var statusIcon = {
+  DEFAULT: 'default',
+  CRITICAL: 'critical',
+  MAJOR: 'major',
+  MINOR: 'minor',
+  WARNING_NEUTRAL: 'warningNeutral',
+  INFO: 'info',
+  WARNING: 'warning',
+  FATAL: 'fatal'
+};
+export default statuses;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.131.0",
+  "version": "2.132.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",