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

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

@@ -12,10 +12,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _react = _interopRequireDefault(require("react"));
 var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
-var _ContentCopyIcon = _interopRequireDefault(require("@pingux/mdi-react/ContentCopyIcon"));
-var _EarthIcon = _interopRequireDefault(require("@pingux/mdi-react/EarthIcon"));
+var _CogIcon = _interopRequireDefault(require("@pingux/mdi-react/CogIcon"));
+var _PencilOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/PencilOutlineIcon"));
+var _PlusCircleMultipleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusCircleMultipleOutlineIcon"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _colors = require("../../styles/colors");
 var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
@@ -66,44 +68,10 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Badge["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
-    },
-    codesandbox: {
-      mapComponent: {
-        '@pingux/astro': ['Badge', 'Box', 'Icon', 'IconButton']
-      }
     }
   }
 };
 exports["default"] = _default;
-var VariableIcon = function VariableIcon(props) {
-  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": "variable-icon-title"
-  }, props), (0, _react2.jsx)("title", {
-    id: "variable-icon-title"
-  }, "Variable Icon"), (0, _react2.jsx)("g", {
-    clipPath: "url(#clip0_709_18965)"
-  }, (0, _react2.jsx)("circle", {
-    cx: "8",
-    cy: "8",
-    r: "7.5",
-    fill: "white",
-    stroke: "#7AC7F2"
-  }), (0, _react2.jsx)("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"
-  })), (0, _react2.jsx)("defs", null, (0, _react2.jsx)("clipPath", {
-    id: "clip0_709_18965"
-  }, (0, _react2.jsx)("rect", {
-    width: "16",
-    height: "16",
-    fill: "white"
-  }))));
-};
 var Default = function Default(_ref5) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref5), _ref5));
   return (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({
@@ -137,66 +105,103 @@ CountBadge.parameters = {
   }
 };
 var BadgeWithCustomColors = function BadgeWithCustomColors(args) {
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
+  var bg = isOnyx ? 'indigo-100' : 'green';
+  var textColor = isOnyx ? 'cyan-800' : 'white';
   return (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({}, args, {
     label: "Custom Colors",
-    bg: "green",
-    textColor: "#ffffff"
+    bg: bg,
+    textColor: textColor,
+    sx: {
+      color: textColor
+    }
   }));
 };
 exports.BadgeWithCustomColors = BadgeWithCustomColors;
 var BadgeWithIcon = function BadgeWithIcon() {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Badge, {
+  var _useGetTheme2 = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme2.themeState.isOnyx;
+  return (0, _react2.jsx)(_index.Box, {
+    gap: "10px"
+  }, !isOnyx ? (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Badge, {
     label: "Badge with Icon Button",
-    bg: "navy"
+    bg: "navy",
+    textColor: "white"
+  }, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "Setting Badge with Icon Button",
+    variant: "inverted",
+    ml: "xs"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CogIcon["default"],
+    size: "14px",
+    title: {
+      name: 'Setting Icon'
+    }
+  }))), (0, _react2.jsx)(_index.Badge, {
+    label: "Badge with Icon Button"
   }, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "Clear Badge with Icon Button",
-    variant: "inverted"
+    variant: "inverted",
+    ml: "xs"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CloseIcon["default"],
-    ml: "xs",
     size: "14px",
     title: {
       name: 'Clear Icon'
     }
-  }))), (0, _react2.jsx)("div", {
-    style: {
-      padding: '5px'
+  }))), (0, _react2.jsx)(_index.Badge, {
+    label: "Badge with Icon",
+    bg: "green",
+    textColor: "white"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PencilOutlineIcon["default"],
+    ml: "xs",
+    size: "14px",
+    color: "white",
+    "aria-hidden": "true",
+    focusable: "false",
+    title: {
+      name: 'Edit Icon'
+    }
+  }))) : (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Badge, {
+    label: "Badge with Icon Button",
+    variant: "primary"
+  }, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "Setting Badge with Icon Button",
+    ml: "xs"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CogIcon["default"],
+    size: "xxs",
+    title: {
+      name: 'Setting Icon'
     }
-  }), (0, _react2.jsx)(_index.Badge, {
+  }))), (0, _react2.jsx)(_index.Badge, {
     label: "Badge with Icon Button"
   }, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "Clear Badge with Icon Button",
-    variant: "inverted"
+    ml: "xs"
   }, (0, _react2.jsx)(_index.Icon, {
-    icon: _EarthIcon["default"],
-    ml: "xs",
-    size: "14px",
+    icon: _CloseIcon["default"],
+    size: "xxs",
     title: {
-      name: 'Earth Icon'
-    }
-  }))), (0, _react2.jsx)("div", {
-    style: {
-      padding: '5px'
+      name: 'Clear Icon'
     }
-  }), (0, _react2.jsx)(_index.Badge, {
+  }))), (0, _react2.jsx)(_index.Badge, {
     label: "Badge with Icon",
-    bg: "green"
+    variant: "success"
   }, (0, _react2.jsx)(_index.Icon, {
-    icon: _ContentCopyIcon["default"],
+    icon: _PencilOutlineIcon["default"],
     ml: "xs",
     size: "14px",
-    color: "white",
     "aria-hidden": "true",
     focusable: "false",
     title: {
-      name: 'Copy Icon'
+      name: 'Edit Icon'
     }
-  })));
+  }))));
 };
 exports.BadgeWithIcon = BadgeWithIcon;
-BadgeWithIcon.parameters = {
-  codesandbox: false
-};
 var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
   return (0, _react2.jsx)(_index.Badge, {
     label: "Badge with Icon Button and Left Slot",
@@ -204,8 +209,9 @@ var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
     variant: "itemBadgeWithSlot",
     slots: {
       leftIcon: (0, _react2.jsx)(_index.Icon, {
-        icon: VariableIcon,
-        size: 16
+        icon: _PlusCircleMultipleOutlineIcon["default"],
+        size: 16,
+        color: "text.primary"
       })
     }
   }, (0, _react2.jsx)(_index.IconButton, {
@@ -220,9 +226,6 @@ var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
   })));
 };
 exports.BadgeWithLeftSlotAndIcon = BadgeWithLeftSlotAndIcon;
-BadgeWithLeftSlotAndIcon.parameters = {
-  codesandbox: false
-};
 var StatusBadgeVariants = function StatusBadgeVariants(_ref6) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref6), _ref6));
   return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({}, args, {

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

@@ -99,7 +99,6 @@ declare const _default: {
         borderColor: string;
         backgroundColor: string;
         border: string;
-        height: string;
         '& span': {
             color: string;
         };
@@ -184,6 +183,7 @@ declare const _default: {
         backgroundColor: string;
         '& span': {
             fontWeight: number;
+            color: string;
         };
         cursor: string;
         p: string;
@@ -279,7 +279,6 @@ declare const _default: {
         borderColor: string;
         backgroundColor: string;
         border: string;
-        height: string;
         '& span': {
             color: string;
         };
@@ -310,9 +309,6 @@ declare const _default: {
         backgroundColor: string;
         outline: string;
         outlineColor: string;
-        '& span': {
-            color: string;
-        };
         cursor: string;
         p: string;
         alignItems: string;
@@ -383,7 +379,6 @@ declare const _default: {
     };
     errorCalloutBadge: {
         borderColor: string;
-        height: string;
         backgroundColor: string;
         border: string;
         '& span': {
@@ -414,7 +409,6 @@ declare const _default: {
     };
     infoCalloutBadge: {
         borderColor: string;
-        height: string;
         backgroundColor: string;
         border: string;
         '& span': {
@@ -608,7 +602,6 @@ declare const _default: {
     };
     successCalloutBadge: {
         borderColor: string;
-        height: string;
         backgroundColor: string;
         border: string;
         '& span': {
@@ -639,7 +632,6 @@ declare const _default: {
     };
     warningCalloutBadge: {
         borderColor: string;
-        height: string;
         backgroundColor: string;
         border: string;
         '& span': {
@@ -672,7 +664,6 @@ declare const _default: {
         borderColor: string;
         backgroundColor: string;
         border: string;
-        height: string;
         '& span': {
             color: string;
         };
@@ -703,7 +694,6 @@ declare const _default: {
         borderColor: string;
         backgroundColor: string;
         border: string;
-        height: string;
         '& span': {
             color: string;
         };
@@ -734,7 +724,6 @@ declare const _default: {
         borderColor: string;
         backgroundColor: string;
         border: string;
-        height: string;
         '& span': {
             color: string;
         };
@@ -768,7 +757,6 @@ declare const _default: {
         '& span': {
             color: string;
         };
-        height: string;
         '& button': {
             ml: string;
             mr: string;
@@ -787,7 +775,6 @@ declare const _default: {
         fontWeight: number;
     };
     invertedRemovableBadge: {
-        height: string;
         '& span': {
             color: string;
         };

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

@@ -45,10 +45,7 @@ exports.baseBadge = 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',
@@ -158,11 +155,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': {
@@ -183,7 +180,6 @@ var infoCalloutBadge = _objectSpread(_objectSpread({}, calloutBadge), {}, {
 });
 var statusBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   border: 'solid 1px',
-  height: '21px',
   '& span': {
     color: 'text.primary'
   }
@@ -209,7 +205,6 @@ var secondaryStatusBadge = _objectSpread(_objectSpread({}, statusBadge), {}, {
   backgroundColor: '#F7F8FD !important'
 });
 var invertedRemovableBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  height: '21px',
   '& span': {
     color: 'white'
   },

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

@@ -25,6 +25,9 @@ var overrides = {
   disabled: '#30373f'
 };
 exports.overrides = overrides;
+var font = {
+  base: _colorTokens.nextGenColors['gray-100']
+};
 var hoverDark = _chromaJs["default"].mix('#23282e', 'white', 0.04, 'rgb').hex();
 var border = {
   base: _chromaJs["default"].mix('#23282e', 'white', 0.15, 'rgb').hex(),
@@ -34,7 +37,7 @@ var border = {
   attachment: '#39414b'
 };
 var badge = {
-  background: _colorTokens.nextGenColors['gray-700'],
+  background: _colorTokens.nextGenColors['gray-800'],
   textColor: _colorTokens.nextGenColors['gray-100']
 };
 var iconWrapper = {
@@ -112,9 +115,7 @@ var colors = _objectSpread(_objectSpread({
     card: '#1a1e22',
     hover: hoverDark
   },
-  font: {
-    base: _colorTokens.nextGenColors['gray-100']
-  },
+  font: font,
   badge: badge
 });
 exports.colors = colors;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/badges.d.ts

@@ -1,101 +1,118 @@
 declare const badges: {
+    baseBadge: {
+        color: string;
+    };
     primary: {
         backgroundColor: string;
-        '& span': {
-            color: string;
-        };
+        color: string;
     };
     secondary: {
+        backgroundColor: string;
+        color: string;
+    };
+    success: {
+        backgroundColor: string;
+        color: string;
+    };
+    danger: {
+        backgroundColor: string;
+        color: string;
+    };
+    warning: {
+        backgroundColor: string;
+        color: string;
+    };
+    info: {
+        backgroundColor: string;
+        color: string;
+    };
+    dark: {
+        backgroundColor: string;
+        color: string;
+    };
+    activeStatusBadge: {
+        backgroundColor: string;
+        color: string;
+    };
+    warningStatusBadge: {
+        backgroundColor: string;
+        color: string;
+    };
+    criticalStatusBadge: {
+        backgroundColor: string;
+        color: string;
+    };
+    healthyStatusBadge: {
+        backgroundColor: string;
+        color: string;
+    };
+    secondaryStatusBadge: {
+        backgroundColor: string;
+        color: string;
+    };
+    readOnlyFieldBadge: {
         backgroundColor: string;
         '& span': {
             color: string;
-            fontSize: string;
-            fontWeight: number;
         };
-        alignItems: string;
-        justifyContent: string;
-        py: string;
-        px: string;
-        borderRadius: string;
-        fontSize: string;
-        alignSelf: string;
-        display: string;
-        width: string;
     };
-    baseBadge: {
-        alignItems: string;
-        justifyContent: string;
-        py: string;
-        px: string;
-        borderRadius: string;
-        fontSize: string;
-        alignSelf: string;
-        display: string;
-        width: string;
+    selectedItemBadge: {
+        backgroundColor: string;
+        paddingRight: string;
+        pl: string;
         '& span': {
             fontSize: string;
+            color: string;
             fontWeight: number;
         };
     };
-    success: {
+    countBadge: {
         backgroundColor: string;
         '& span': {
             color: string;
         };
     };
-    danger: {
+    countNeutral: {
         backgroundColor: string;
         '& span': {
             color: string;
         };
     };
-    warning: {
+    itemBadgeWithSlot: {
+        bg: string;
+        fontWeight: number;
+        '& span': {
+            color: string;
+        };
+        '& svg': {
+            path: {
+                fill: string;
+            };
+        };
+    };
+    errorCalloutBadge: {
         backgroundColor: string;
         '& span': {
             color: string;
         };
     };
-    info: {
+    infoCalloutBadge: {
         backgroundColor: string;
         '& span': {
-            fontSize: string;
-            fontWeight: number;
             color: string;
         };
-        alignItems: string;
-        justifyContent: string;
-        py: string;
-        px: string;
-        borderRadius: string;
-        fontSize: string;
-        alignSelf: string;
-        display: string;
-        width: string;
     };
-    dark: {
+    successCalloutBadge: {
         backgroundColor: string;
         '& span': {
             color: string;
         };
     };
-    selectedItemBadge: {
+    warningCalloutBadge: {
         backgroundColor: string;
-        paddingRight: string;
-        pl: string;
         '& span': {
-            fontSize: string;
             color: string;
-            fontWeight: number;
         };
-        alignItems: string;
-        justifyContent: string;
-        py: string;
-        px: string;
-        borderRadius: string;
-        fontSize: string;
-        alignSelf: string;
-        display: string;
-        width: string;
     };
 };
 export default badges;