@pingux/astro 2.163.1-alpha.4 → 2.163.1-alpha.6

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

@@ -12,7 +12,7 @@ exports["default"] = exports.WithSubtext = exports.WithRightOfDataSlot = exports
 var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
 var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
-var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
+var _ClockOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ClockOutlineIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
@@ -66,7 +66,7 @@ var Default = exports.Default = function Default() {
     },
     iconWrapperProps: {
       size: 'sm',
-      color: 'green'
+      color: 'blue'
     }
   }));
 };
@@ -85,7 +85,7 @@ var WithSubtext = exports.WithSubtext = function WithSubtext() {
     },
     iconWrapperProps: {
       size: 'sm',
-      color: 'pink'
+      color: 'blue'
     }
   }));
 };
@@ -99,7 +99,7 @@ var WithImage = exports.WithImage = function WithImage() {
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
     data: {
       image: {
-        src: _images.pingImg,
+        src: _images.userImagePanelHeader,
         alt: 'avatar',
         'aria-label': 'avatar'
       },
@@ -117,16 +117,14 @@ WithImage.parameters = {
 var WithControls = exports.WithControls = function WithControls() {
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
     data: {
-      icon: _FormSelectIcon["default"],
+      icon: _AccountIcon["default"],
       text: 'Fons Vernall'
     },
     iconWrapperProps: {
       size: 'sm',
-      color: 'orange'
+      color: 'blue'
     }
-  }, (0, _react2.jsx)(_.ListViewItemEditButton, {
-    "aria-label": "edit-icon"
-  }), (0, _react2.jsx)(_.ListViewItemSwitchField, {
+  }, (0, _react2.jsx)(_.ListViewItemSwitchField, {
     "aria-label": "active user"
   }), (0, _react2.jsx)(_.ListViewItemMenu, null, (0, _react2.jsx)(_reactStately.Item, {
     key: "enable"
@@ -143,15 +141,30 @@ WithControls.parameters = {
   }
 };
 var WithRightOfDataSlot = exports.WithRightOfDataSlot = function WithRightOfDataSlot() {
+  var _useGetTheme2 = (0, _hooks.useGetTheme)(),
+    _useGetTheme2$badgeSt = _useGetTheme2.badgeStyles,
+    blueBg = _useGetTheme2$badgeSt.blueBg,
+    greyBg = _useGetTheme2$badgeSt.greyBg,
+    blueText = _useGetTheme2$badgeSt.blueText,
+    greyText = _useGetTheme2$badgeSt.greyText;
   var renderRightOfData = (0, _react2.jsx)(_.Box, {
     isRow: true,
     gap: "sm",
     ml: "sm"
   }, (0, _react2.jsx)(_.Badge, {
-    label: "Label"
+    label: "Label",
+    textColor: greyText,
+    bg: greyBg,
+    sx: {
+      minWidth: 'unset'
+    }
   }), (0, _react2.jsx)(_.Badge, {
     label: "Label",
-    bg: "active"
+    textColor: blueText,
+    bg: blueBg,
+    sx: {
+      minWidth: 'unset'
+    }
   }));
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
     data: {
@@ -161,7 +174,7 @@ var WithRightOfDataSlot = exports.WithRightOfDataSlot = function WithRightOfData
     },
     iconWrapperProps: {
       size: 'sm',
-      color: 'teal'
+      color: 'blue'
     },
     slots: {
       rightOfData: renderRightOfData
@@ -182,11 +195,14 @@ WithRightOfDataSlot.parameters = {
 };
 var WithLeftOfDataSlot = exports.WithLeftOfDataSlot = function WithLeftOfDataSlot() {
   var renderLeftOfData = (0, _react2.jsx)(_.Box, {
-    mx: "sm",
+    pr: "md",
+    pl: "lg",
     minWidth: 35
   }, (0, _react2.jsx)(_.Text, {
     pr: 3,
-    variant: "H3"
+    variant: "H3",
+    fontSize: "md",
+    fontWeight: "3"
   }, "Ping"));
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
     data: {
@@ -225,11 +241,11 @@ var WithCharts = exports.WithCharts = function WithCharts() {
     data: {
       text: 'Kangaroo',
       subtext: 'kangaroo@example.com',
-      icon: _FormSelectIcon["default"]
+      icon: _ClockOutlineIcon["default"]
     },
     iconWrapperProps: {
       size: 'sm',
-      color: 'purple'
+      color: 'green'
     }
   }, (0, _react2.jsx)(_.ListViewItemChart, {
     containerRef: containerRef,
@@ -257,15 +273,30 @@ WithCharts.parameters = {
   }
 };
 var WithExtraLongText = exports.WithExtraLongText = function WithExtraLongText() {
+  var _useGetTheme3 = (0, _hooks.useGetTheme)(),
+    _useGetTheme3$badgeSt = _useGetTheme3.badgeStyles,
+    blueBg = _useGetTheme3$badgeSt.blueBg,
+    greyBg = _useGetTheme3$badgeSt.greyBg,
+    blueText = _useGetTheme3$badgeSt.blueText,
+    greyText = _useGetTheme3$badgeSt.greyText;
   var renderRightOfData = (0, _react2.jsx)(_.Box, {
     isRow: true,
     gap: "sm",
     mx: "sm"
   }, (0, _react2.jsx)(_.Badge, {
-    label: "Label"
+    label: "Label",
+    textColor: greyText,
+    bg: greyBg,
+    sx: {
+      minWidth: 'unset'
+    }
   }), (0, _react2.jsx)(_.Badge, {
     label: "Label",
-    bg: "active"
+    textColor: blueText,
+    bg: blueBg,
+    sx: {
+      minWidth: 'unset'
+    }
   }));
   var longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum';
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
@@ -276,7 +307,7 @@ var WithExtraLongText = exports.WithExtraLongText = function WithExtraLongText()
     },
     iconWrapperProps: {
       size: 'sm',
-      color: 'orange'
+      color: 'blue'
     },
     slots: {
       rightOfData: renderRightOfData

package/lib/cjs/hooks/useGetTheme/useGetTheme.d.ts

@@ -80,6 +80,12 @@ declare const useGetTheme: () => {
     defaultIconSize: import("../..").IconSize;
     calendarIconSize: import("../..").IconSize;
     buttonLoaderSize: import("../..").LoaderSize;
+    badgeStyles: {
+        blueBg: string;
+        greyBg: string;
+        blueText: string;
+        greyText: string;
+    };
     linkSelectFieldWidth: string;
     themeState: {
         isAstro: boolean;
@@ -134,6 +140,12 @@ declare const useGetTheme: () => {
         WarningIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
     };
     defaultIconColor: string;
+    badgeStyles: {
+        blueBg: string;
+        greyBg: string;
+        blueText: string;
+        greyText: string;
+    };
     copyButtonSize: import("../..").IconSize;
     breadcrumbIconSize: import("../..").IconSize;
     breadcrumbIconMargin: string;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.d.ts

@@ -44,6 +44,12 @@ export declare const nextGenDarkThemeValues: {
         WarningIcon: import("@pingux/mdi-react").MdiReactIconComponentType;
     };
     defaultIconColor: string;
+    badgeStyles: {
+        blueBg: string;
+        greyBg: string;
+        blueText: string;
+        greyText: string;
+    };
     copyButtonSize: import("../../../..").IconSize;
     breadcrumbIconSize: import("../../../..").IconSize;
     breadcrumbIconMargin: string;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/customProperties/index.js

@@ -25,5 +25,11 @@ var nextGenDarkThemeValues = exports.nextGenDarkThemeValues = _objectSpread(_obj
   backgroundBaseColor: backgroundBaseColor,
   iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
   icons: _icons["default"],
-  defaultIconColor: defaultIconColor
+  defaultIconColor: defaultIconColor,
+  badgeStyles: {
+    blueBg: '#1A73E8',
+    greyBg: '#F6F8FA',
+    blueText: '#000000',
+    greyText: '#000000'
+  }
 });

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

@@ -50,45 +50,50 @@ declare const badges: {
         backgroundColor: string;
         color: string;
     };
-    readOnlyFieldBadge: {
+    countBadge: {
         backgroundColor: string;
         '& span': {
             color: string;
         };
     };
-    selectedItemBadge: {
+    countNeutral: {
         backgroundColor: string;
-        paddingRight: string;
-        pl: string;
         '& span': {
-            fontSize: string;
             color: string;
-            fontWeight: number;
         };
     };
-    countBadge: {
+    selectedItemBadge: {
         backgroundColor: string;
         '& span': {
             color: string;
         };
     };
-    countNeutral: {
+    readOnlyBadge: {
+        color: string;
         backgroundColor: string;
+        borderColor: string;
         '& span': {
             color: string;
         };
     };
-    itemBadgeWithSlot: {
-        bg: string;
-        fontWeight: number;
+    readOnlyFieldBadge: {
+        color: string;
+        backgroundColor: string;
+        borderColor: string;
         '& span': {
             color: string;
         };
+    };
+    itemBadgeWithSlot: {
         '& svg': {
             path: {
                 fill: string;
             };
         };
+        backgroundColor: string;
+        '& span': {
+            color: string;
+        };
     };
     errorCalloutBadge: {
         backgroundColor: string;

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

@@ -64,18 +64,35 @@ var countNeutral = {
     color: 'white'
   }
 };
-var itemBadgeWithSlot = {
-  bg: '#455469 !important',
-  fontWeight: 2,
+var readOnlyBadge = {
+  color: 'gray-100',
+  backgroundColor: '#23282E !important',
+  borderColor: 'border.attachment',
   '& span': {
     color: 'gray-100'
-  },
+  }
+};
+var readOnlyFieldBadge = {
+  color: 'gray-100',
+  backgroundColor: '#23282E !important',
+  borderColor: 'border.attachment',
+  '& span': {
+    color: 'gray-100'
+  }
+};
+var selectedItemBadge = {
+  backgroundColor: '#155CBA !important',
+  '& span': {
+    color: 'gray-100'
+  }
+};
+var itemBadgeWithSlot = _objectSpread(_objectSpread({}, selectedItemBadge), {}, {
   '& svg': {
     path: {
       fill: 'gray-100'
     }
   }
-};
+});
 var badges = {
   baseBadge: baseBadge,
   primary: primary,
@@ -90,24 +107,11 @@ var badges = {
   criticalStatusBadge: criticalStatusBadge,
   healthyStatusBadge: healthyStatusBadge,
   secondaryStatusBadge: secondaryStatusBadge,
-  readOnlyFieldBadge: {
-    backgroundColor: '#F6F8FA !important',
-    '& span': {
-      color: 'black'
-    }
-  },
-  selectedItemBadge: {
-    backgroundColor: '#1a73e8 !important',
-    paddingRight: '0px !important',
-    pl: '10px',
-    '& span': {
-      fontSize: '14px',
-      color: 'gray-400',
-      fontWeight: 400
-    }
-  },
   countBadge: countBadge,
   countNeutral: countNeutral,
+  selectedItemBadge: selectedItemBadge,
+  readOnlyBadge: readOnlyBadge,
+  readOnlyFieldBadge: readOnlyFieldBadge,
   itemBadgeWithSlot: itemBadgeWithSlot,
   errorCalloutBadge: {
     backgroundColor: '#23282e !important',

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

@@ -423,6 +423,7 @@ declare const _default: {
             borderRadius: string;
         };
         option: {
+            color: string;
             '&.is-focused': {
                 color: string;
                 bg: string;
@@ -434,6 +435,12 @@ declare const _default: {
                     color: string;
                 };
             };
+            '&.is-condensed': {
+                color: string;
+                '&.is-focused': {
+                    color: string;
+                };
+            };
             '&.is-focus-visible': {
                 zIndex: number;
             };

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

@@ -26,15 +26,22 @@ var listBox = {
     borderRadius: '4px'
   },
   option: {
+    color: 'gray-400',
     '&.is-focused': {
-      color: 'text.primary',
-      bg: 'gray-800'
+      color: 'gray-200',
+      bg: '#2C323A'
     },
     '&.is-selected': {
-      color: 'text.primary',
-      bg: 'gray-800',
+      color: 'gray-200',
+      bg: '#2C323A',
       '&.is-focused': {
-        color: 'text.primary'
+        color: 'gray-200'
+      }
+    },
+    '&.is-condensed': {
+      color: 'gray-400',
+      '&.is-focused': {
+        color: 'gray-200'
       }
     },
     '&.is-focus-visible': {

package/lib/cjs/styles/themes/astro/customProperties/index.d.ts

@@ -74,5 +74,11 @@ export declare const astroThemeValues: {
     defaultIconSize: IconSize;
     calendarIconSize: IconSize;
     buttonLoaderSize: LoaderSize;
+    badgeStyles: {
+        blueBg: string;
+        greyBg: string;
+        blueText: string;
+        greyText: string;
+    };
     linkSelectFieldWidth: string;
 };

package/lib/cjs/styles/themes/astro/customProperties/index.js

@@ -51,5 +51,11 @@ var astroThemeValues = exports.astroThemeValues = {
   defaultIconSize: defaultIconSize,
   calendarIconSize: calendarIconSize,
   buttonLoaderSize: buttonLoaderSize,
+  badgeStyles: {
+    blueBg: '#4462ed',
+    greyBg: '#253746',
+    blueText: '#FFFFFF',
+    greyText: '#FFFFFF'
+  },
   linkSelectFieldWidth: linkSelectFieldWidth
 };

package/lib/cjs/styles/themes/next-gen/colors/colors.d.ts

@@ -274,6 +274,7 @@ declare const colors: {
         link: string;
         label: string;
         reverse: string;
+        hover: string;
     };
     active_hover: string;
     active_pressed: string;

package/lib/cjs/styles/themes/next-gen/customProperties/index.d.ts

@@ -84,5 +84,11 @@ export declare const nextGenThemeValues: {
     defaultIconSize: IconSize;
     calendarIconSize: IconSize;
     buttonLoaderSize: LoaderSize;
+    badgeStyles: {
+        blueBg: string;
+        greyBg: string;
+        blueText: string;
+        greyText: string;
+    };
     linkSelectFieldWidth: string;
 };

package/lib/cjs/styles/themes/next-gen/customProperties/index.js

@@ -31,6 +31,12 @@ var iFrameContentDivBackgroundColor = backgroundBaseColor;
 var defaultIconColor = 'gray-800';
 var defaultIconSize = 'md';
 var buttonLoaderSize = 'sm';
+var badgeStyles = {
+  blueBg: '#EAF2FD',
+  greyBg: '#455469',
+  blueText: '#155CBA',
+  greyText: '#FFFFFF'
+};
 var linkSelectFieldWidth = '12em';
 var calendarIconSize = 'sm';
 var nextGenThemeValues = exports.nextGenThemeValues = _objectSpread({
@@ -48,5 +54,6 @@ var nextGenThemeValues = exports.nextGenThemeValues = _objectSpread({
   defaultIconSize: defaultIconSize,
   calendarIconSize: calendarIconSize,
   buttonLoaderSize: buttonLoaderSize,
+  badgeStyles: badgeStyles,
   linkSelectFieldWidth: linkSelectFieldWidth
 }, _customSizes["default"]);