@pingux/astro 2.136.1-alpha.3 → 2.137.0-alpha.0

package/lib/components/Badge/Badge.stories.js

@@ -4,10 +4,12 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
 import Clear from '@pingux/mdi-react/CloseIcon';
-import ContentCopy from '@pingux/mdi-react/ContentCopyIcon';
-import Earth from '@pingux/mdi-react/EarthIcon';
+import CogIcon from '@pingux/mdi-react/CogIcon';
+import PencilOutlineIcon from '@pingux/mdi-react/PencilOutlineIcon';
+import PlusCircleMultipleOutlineIcon from '@pingux/mdi-react/PlusCircleMultipleOutlineIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { useGetTheme } from '../../hooks';
 import { Badge, Box, Icon, IconButton } from '../../index';
 import { flatColorList } from '../../styles/colors';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
@@ -58,43 +60,9 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(BadgeReadme, null), ___EmotionJSX(DocsLayout, null));
       }
-    },
-    codesandbox: {
-      mapComponent: {
-        '@pingux/astro': ['Badge', 'Box', 'Icon', 'IconButton']
-      }
     }
   }
 };
-var VariableIcon = function VariableIcon(props) {
-  return ___EmotionJSX("svg", _extends({
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": "variable-icon-title"
-  }, props), ___EmotionJSX("title", {
-    id: "variable-icon-title"
-  }, "Variable Icon"), ___EmotionJSX("g", {
-    clipPath: "url(#clip0_709_18965)"
-  }, ___EmotionJSX("circle", {
-    cx: "8",
-    cy: "8",
-    r: "7.5",
-    fill: "white",
-    stroke: "#7AC7F2"
-  }), ___EmotionJSX("path", {
-    d: "M11.5042 4.25C12.0833 5.37917 12.3125 6.68333 12.1667 8C12.0833 9.31667 11.625 10.6208 10.8458 11.75L10.2083 11.3333C10.8792 10.3208 11.2708 9.16667 11.3333 8C11.475 6.83333 11.2875 5.67917 10.7917 4.66667L11.5042 4.25ZM5.15416 4.25L5.79166 4.66667C5.12083 5.67917 4.72916 6.83333 4.66666 8C4.525 9.16667 4.71666 10.3208 5.20833 11.3333L4.50416 11.75C3.92083 10.6208 3.6875 9.32083 3.83333 8C3.91666 6.68333 4.375 5.37917 5.15416 4.25ZM8.03333 7.45L9 6.10417H10.0542L8.47916 8.1875L9.39583 10.2375H8.45416L7.87916 8.83333L6.86666 10.2208H5.81666L7.44166 8.0875L6.55416 6.10417H7.5L8.03333 7.45Z",
-    fill: "#7AC7F2"
-  })), ___EmotionJSX("defs", null, ___EmotionJSX("clipPath", {
-    id: "clip0_709_18965"
-  }, ___EmotionJSX("rect", {
-    width: "16",
-    height: "16",
-    fill: "white"
-  }))));
-};
 export var Default = function Default(_ref5) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
   return ___EmotionJSX(Badge, _extends({
@@ -126,63 +94,100 @@ CountBadge.parameters = {
   }
 };
 export var BadgeWithCustomColors = function BadgeWithCustomColors(args) {
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
+  var bg = isOnyx ? 'indigo-100' : 'green';
+  var textColor = isOnyx ? 'cyan-800' : 'white';
   return ___EmotionJSX(Badge, _extends({}, args, {
     label: "Custom Colors",
-    bg: "green",
-    textColor: "#ffffff"
+    bg: bg,
+    textColor: textColor,
+    sx: {
+      color: textColor
+    }
   }));
 };
 export var BadgeWithIcon = function BadgeWithIcon() {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Badge, {
+  var _useGetTheme2 = useGetTheme(),
+    isOnyx = _useGetTheme2.themeState.isOnyx;
+  return ___EmotionJSX(Box, {
+    gap: "10px"
+  }, !isOnyx ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Badge, {
     label: "Badge with Icon Button",
-    bg: "navy"
+    bg: "navy",
+    textColor: "white"
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "Setting Badge with Icon Button",
+    variant: "inverted",
+    ml: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: CogIcon,
+    size: "14px",
+    title: {
+      name: 'Setting Icon'
+    }
+  }))), ___EmotionJSX(Badge, {
+    label: "Badge with Icon Button"
   }, ___EmotionJSX(IconButton, {
     "aria-label": "Clear Badge with Icon Button",
-    variant: "inverted"
+    variant: "inverted",
+    ml: "xs"
   }, ___EmotionJSX(Icon, {
     icon: Clear,
-    ml: "xs",
     size: "14px",
     title: {
       name: 'Clear Icon'
     }
-  }))), ___EmotionJSX("div", {
-    style: {
-      padding: '5px'
+  }))), ___EmotionJSX(Badge, {
+    label: "Badge with Icon",
+    bg: "green",
+    textColor: "white"
+  }, ___EmotionJSX(Icon, {
+    icon: PencilOutlineIcon,
+    ml: "xs",
+    size: "14px",
+    color: "white",
+    "aria-hidden": "true",
+    focusable: "false",
+    title: {
+      name: 'Edit Icon'
+    }
+  }))) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Badge, {
+    label: "Badge with Icon Button",
+    variant: "primary"
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "Setting Badge with Icon Button",
+    ml: "xs"
+  }, ___EmotionJSX(Icon, {
+    icon: CogIcon,
+    size: "xxs",
+    title: {
+      name: 'Setting Icon'
     }
-  }), ___EmotionJSX(Badge, {
+  }))), ___EmotionJSX(Badge, {
     label: "Badge with Icon Button"
   }, ___EmotionJSX(IconButton, {
     "aria-label": "Clear Badge with Icon Button",
-    variant: "inverted"
+    ml: "xs"
   }, ___EmotionJSX(Icon, {
-    icon: Earth,
-    ml: "xs",
-    size: "14px",
+    icon: Clear,
+    size: "xxs",
     title: {
-      name: 'Earth Icon'
-    }
-  }))), ___EmotionJSX("div", {
-    style: {
-      padding: '5px'
+      name: 'Clear Icon'
     }
-  }), ___EmotionJSX(Badge, {
+  }))), ___EmotionJSX(Badge, {
     label: "Badge with Icon",
-    bg: "green"
+    variant: "success"
   }, ___EmotionJSX(Icon, {
-    icon: ContentCopy,
+    icon: PencilOutlineIcon,
     ml: "xs",
     size: "14px",
-    color: "white",
     "aria-hidden": "true",
     focusable: "false",
     title: {
-      name: 'Copy Icon'
+      name: 'Edit Icon'
     }
-  })));
-};
-BadgeWithIcon.parameters = {
-  codesandbox: false
+  }))));
 };
 export var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
   return ___EmotionJSX(Badge, {
@@ -191,8 +196,9 @@ export var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
     variant: "itemBadgeWithSlot",
     slots: {
       leftIcon: ___EmotionJSX(Icon, {
-        icon: VariableIcon,
-        size: 16
+        icon: PlusCircleMultipleOutlineIcon,
+        size: 16,
+        color: "text.primary"
       })
     }
   }, ___EmotionJSX(IconButton, {
@@ -206,9 +212,6 @@ export var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
     }
   })));
 };
-BadgeWithLeftSlotAndIcon.parameters = {
-  codesandbox: false
-};
 export var StatusBadgeVariants = function StatusBadgeVariants(_ref6) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref6), _ref6));
   return ___EmotionJSX(Box, null, ___EmotionJSX(Badge, _extends({}, args, {

package/lib/components/Badge/Badge.styles.js

@@ -37,10 +37,7 @@ export var baseBadge = {
 var defaultBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: 'white !important',
   outline: '1px solid',
-  outlineColor: 'neutral.80',
-  '& span': {
-    color: 'text.primary'
-  }
+  outlineColor: 'neutral.80'
 });
 var multivaluesBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   alignSelf: 'center',
@@ -147,11 +144,11 @@ var countNeutral = _objectSpread(_objectSpread({}, countDefault), {}, {
 var convenienceDefault = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#4462ED !important',
   '& span': {
-    fontWeight: 1
+    fontWeight: 1,
+    color: 'white'
   }
 });
 var calloutBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  height: '21px',
   backgroundColor: '#FFF !important',
   border: 'solid 1px',
   '& span': {
@@ -172,7 +169,6 @@ var infoCalloutBadge = _objectSpread(_objectSpread({}, calloutBadge), {}, {
 });
 var statusBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   border: 'solid 1px',
-  height: '21px',
   '& span': {
     color: 'text.primary'
   }
@@ -198,7 +194,6 @@ var secondaryStatusBadge = _objectSpread(_objectSpread({}, statusBadge), {}, {
   backgroundColor: '#F7F8FD !important'
 });
 var invertedRemovableBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  height: '21px',
   '& span': {
     color: 'white'
   },

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

@@ -17,6 +17,9 @@ export var overrides = {
   },
   disabled: '#30373f'
 };
+var font = {
+  base: nextGenColors['gray-100']
+};
 var hoverDark = chroma.mix('#23282e', 'white', 0.04, 'rgb').hex();
 var border = {
   base: chroma.mix('#23282e', 'white', 0.15, 'rgb').hex(),
@@ -26,7 +29,7 @@ var border = {
   attachment: '#39414b'
 };
 var badge = {
-  background: nextGenColors['gray-700'],
+  background: nextGenColors['gray-800'],
   textColor: nextGenColors['gray-100']
 };
 var iconWrapper = {
@@ -104,8 +107,6 @@ export var colors = _objectSpread(_objectSpread({
     card: '#1a1e22',
     hover: hoverDark
   },
-  font: {
-    base: nextGenColors['gray-100']
-  },
+  font: font,
   badge: badge
 });

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

@@ -9,75 +9,122 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-var badgeFont = {
-  fontSize: '11.25px',
-  fontWeight: 2
-};
 var baseBadge = {
-  alignItems: 'center',
-  justifyContent: 'center',
-  py: '.25em',
-  px: '.4em',
-  borderRadius: '4px',
-  fontSize: '11.25px',
-  alignSelf: 'flex-start',
-  display: 'inline-flex !important',
-  width: 'fit-content',
-  '& span': _objectSpread({}, badgeFont)
+  color: 'badge.textColor'
+};
+var primary = {
+  backgroundColor: '#1a73e8 !important',
+  color: 'black'
+};
+var secondary = {
+  backgroundColor: '#324054 !important',
+  color: 'gray-100'
+};
+var success = {
+  backgroundColor: '#22a75f !important',
+  color: 'black'
+};
+var danger = {
+  backgroundColor: '#da3a2b !important',
+  color: 'black'
+};
+var warning = {
+  backgroundColor: '#ffb946 !important',
+  color: 'black'
+};
+var info = {
+  backgroundColor: '#324054 !important',
+  color: 'gray-100'
+};
+var dark = {
+  backgroundColor: '#c0c9d5 !important',
+  color: 'gray-100'
+};
+var activeStatusBadge = _objectSpread({}, primary);
+var warningStatusBadge = _objectSpread({}, warning);
+var criticalStatusBadge = _objectSpread({}, danger);
+var healthyStatusBadge = _objectSpread({}, success);
+var secondaryStatusBadge = _objectSpread({}, secondary);
+var countBadge = {
+  backgroundColor: '#F6F8FA !important',
+  '& span': {
+    color: 'black'
+  }
+};
+var countNeutral = {
+  backgroundColor: '#455469 !important',
+  '& span': {
+    color: 'white'
+  }
+};
+var itemBadgeWithSlot = {
+  bg: '#455469 !important',
+  fontWeight: 2,
+  '& span': {
+    color: 'gray-100'
+  },
+  '& svg': {
+    path: {
+      fill: 'gray-100'
+    }
+  }
 };
 var badges = {
-  primary: {
-    backgroundColor: '#155CBA !important',
+  baseBadge: baseBadge,
+  primary: primary,
+  secondary: secondary,
+  success: success,
+  danger: danger,
+  warning: warning,
+  info: info,
+  dark: dark,
+  activeStatusBadge: activeStatusBadge,
+  warningStatusBadge: warningStatusBadge,
+  criticalStatusBadge: criticalStatusBadge,
+  healthyStatusBadge: healthyStatusBadge,
+  secondaryStatusBadge: secondaryStatusBadge,
+  readOnlyFieldBadge: {
+    backgroundColor: '#F6F8FA !important',
     '& span': {
-      color: 'active_light'
+      color: 'black'
     }
   },
-  secondary: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#324054 !important',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      color: 'gray-400'
-    })
-  }),
-  baseBadge: _objectSpread({}, baseBadge),
-  success: {
-    backgroundColor: '#0E4326 !important',
+  selectedItemBadge: {
+    backgroundColor: '#1a73e8 !important',
+    paddingRight: '0px !important',
+    pl: '10px',
     '& span': {
-      color: 'success_light'
+      fontSize: '14px',
+      color: 'gray-400',
+      fontWeight: 400
     }
   },
-  danger: {
-    backgroundColor: '#83231A !important',
+  countBadge: countBadge,
+  countNeutral: countNeutral,
+  itemBadgeWithSlot: itemBadgeWithSlot,
+  errorCalloutBadge: {
+    backgroundColor: '#23282e !important',
     '& span': {
-      color: 'critical_light'
+      color: 'font.base'
     }
   },
-  warning: {
-    backgroundColor: '#664A1C !important',
+  infoCalloutBadge: {
+    backgroundColor: '#23282e !important',
     '& span': {
-      color: 'yellow-100'
+      color: 'font.base'
     }
   },
-  info: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#324054 !important',
-    '& span': _objectSpread({
-      color: 'dark'
-    }, badgeFont)
-  }),
-  dark: {
-    backgroundColor: '#F6F8FA !important',
+  successCalloutBadge: {
+    backgroundColor: '#23282e !important',
     '& span': {
-      color: 'black'
+      color: 'font.base'
     }
   },
-  selectedItemBadge: _objectSpread(_objectSpread({}, baseBadge), {}, {
-    backgroundColor: '#1a73e8 !important',
-    paddingRight: '0px !important',
-    pl: '10px',
-    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-      fontSize: '14px',
-      color: 'gray-400',
-      fontWeight: 400
-    })
-  })
+  warningCalloutBadge: {
+    backgroundColor: '#23282e !important',
+    '& span': {
+      color: 'font.base'
+    }
+  }
 };
 export default badges;

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

@@ -64,8 +64,8 @@ var colorsObject = {
 };
 export var critical = {
   bright: colorsObject.red,
-  dark: nextGenColors['red-600'],
-  light: colorsObject.red
+  dark: nextGenColors['red-700'],
+  light: nextGenColors['red-100']
 };
 export var success = {
   bright: nextGenColors['green-600'],
@@ -77,6 +77,11 @@ export var warning = {
   dark: nextGenColors['yellow-800'],
   light: nextGenColors['yellow-100']
 };
+export var info = {
+  bright: colorsObject.blue,
+  dark: nextGenColors['blue-600'],
+  light: nextGenColors['blue-100']
+};
 var text = {
   primary: nextGenColors['gray-900'],
   secondary: nextGenColors['gray-500'],
@@ -107,7 +112,7 @@ var card = {
   gray: nextGenColors['gray-100']
 };
 var badge = {
-  textColor: nextGenColors['gray-900'],
+  textColor: nextGenColors.font.base,
   background: nextGenColors['gray-100']
 };
 var tooltip = nextGenColors['gray-900'];
@@ -117,6 +122,7 @@ var colors = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, subColo
   critical: critical,
   success: success,
   warning: warning,
+  info: info,
   text: text,
   border: border,
   active: colorsObject.blue,

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

@@ -1,7 +1,6 @@
 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'],
   Messages: ['Customization'],
   MultivaluesField: ['Condensed', 'Condensed With Section'],
   PasswordField: ['Success'],