@pingux/astro 2.163.1-alpha.5 → 2.164.0

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/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/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"]);

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

@@ -2126,6 +2126,7 @@ declare const _default: {
             fontSize: string;
             lineHeight: string;
             color: string;
+            mt: number;
         };
         itemTitle: {
             fontWeight: number;

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

@@ -46,7 +46,7 @@ var baseBadge = _objectSpread({
   alignItems: 'center',
   justifyContent: 'center',
   py: '.25em',
-  px: '.4em',
+  px: '.34em',
   borderRadius: '4px',
   maxHeight: '18px',
   minHeight: '18px',

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

@@ -1,4 +1,4 @@
-export declare const focusBoxShadow = "0 0 0 3px inset #1a73e8";
+export declare const focusBoxShadow = "0 0 0 2px inset #1a73e8";
 export declare const borderRadius = "16px";
 export declare const listViewItem: {
     rightOfData: {

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

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.listViewItem = exports.listView = exports.lisViewItemChart = exports.focusBoxShadow = exports.borderRadius = void 0;
-var focusBoxShadow = exports.focusBoxShadow = '0 0 0 3px inset #1a73e8';
+var focusBoxShadow = exports.focusBoxShadow = '0 0 0 2px inset #1a73e8';
 var borderRadius = exports.borderRadius = '16px';
 var listViewItem = exports.listViewItem = {
   rightOfData: {

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

@@ -180,6 +180,7 @@ export declare const text: {
         fontSize: string;
         lineHeight: string;
         color: string;
+        mt: number;
     };
     itemTitle: {
         fontWeight: number;

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

@@ -160,7 +160,8 @@ var text = exports.text = _objectSpread(_objectSpread({
   listViewItemSubtext: {
     fontSize: 'md',
     lineHeight: 'body',
-    color: 'gray-700'
+    color: 'font.light',
+    mt: 0
   },
   itemTitle: {
     fontWeight: 2,

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

@@ -1,12 +1,12 @@
 import React, { useRef } from 'react';
 import { Item } from 'react-stately';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
-import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
+import ClockOutlineIcon from '@pingux/mdi-react/ClockOutlineIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Badge, Box, ListViewItem, ListViewItemChart, ListViewItemEditButton, ListViewItemMenu, ListViewItemSwitchField, Separator, Text } from '../..';
+import { Badge, Box, ListViewItem, ListViewItemChart, ListViewItemMenu, ListViewItemSwitchField, Separator, Text } from '../..';
 import { useGetTheme } from '../../hooks';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
-import { pingImg } from '../../utils/devUtils/constants/images';
+import { userImagePanelHeader } from '../../utils/devUtils/constants/images';
 import { chartData } from './controls/chart/chartData';
 import ListViewItemReadMe from './ListViewItem.mdx';
 import { listViewItemArgTypes } from './listViewItemAttributes';
@@ -54,7 +54,7 @@ export var Default = function Default() {
     },
     iconWrapperProps: {
       size: 'sm',
-      color: 'green'
+      color: 'blue'
     }
   }));
 };
@@ -73,7 +73,7 @@ export var WithSubtext = function WithSubtext() {
     },
     iconWrapperProps: {
       size: 'sm',
-      color: 'pink'
+      color: 'blue'
     }
   }));
 };
@@ -87,7 +87,7 @@ export var WithImage = function WithImage() {
   return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
     data: {
       image: {
-        src: pingImg,
+        src: userImagePanelHeader,
         alt: 'avatar',
         'aria-label': 'avatar'
       },
@@ -105,16 +105,14 @@ WithImage.parameters = {
 export var WithControls = function WithControls() {
   return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
     data: {
-      icon: FormSelectIcon,
+      icon: AccountIcon,
       text: 'Fons Vernall'
     },
     iconWrapperProps: {
       size: 'sm',
-      color: 'orange'
+      color: 'blue'
     }
-  }, ___EmotionJSX(ListViewItemEditButton, {
-    "aria-label": "edit-icon"
-  }), ___EmotionJSX(ListViewItemSwitchField, {
+  }, ___EmotionJSX(ListViewItemSwitchField, {
     "aria-label": "active user"
   }), ___EmotionJSX(ListViewItemMenu, null, ___EmotionJSX(Item, {
     key: "enable"
@@ -131,15 +129,30 @@ WithControls.parameters = {
   }
 };
 export var WithRightOfDataSlot = function WithRightOfDataSlot() {
+  var _useGetTheme2 = useGetTheme(),
+    _useGetTheme2$badgeSt = _useGetTheme2.badgeStyles,
+    blueBg = _useGetTheme2$badgeSt.blueBg,
+    greyBg = _useGetTheme2$badgeSt.greyBg,
+    blueText = _useGetTheme2$badgeSt.blueText,
+    greyText = _useGetTheme2$badgeSt.greyText;
   var renderRightOfData = ___EmotionJSX(Box, {
     isRow: true,
     gap: "sm",
     ml: "sm"
   }, ___EmotionJSX(Badge, {
-    label: "Label"
+    label: "Label",
+    textColor: greyText,
+    bg: greyBg,
+    sx: {
+      minWidth: 'unset'
+    }
   }), ___EmotionJSX(Badge, {
     label: "Label",
-    bg: "active"
+    textColor: blueText,
+    bg: blueBg,
+    sx: {
+      minWidth: 'unset'
+    }
   }));
   return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
     data: {
@@ -149,7 +162,7 @@ export var WithRightOfDataSlot = function WithRightOfDataSlot() {
     },
     iconWrapperProps: {
       size: 'sm',
-      color: 'teal'
+      color: 'blue'
     },
     slots: {
       rightOfData: renderRightOfData
@@ -170,11 +183,14 @@ WithRightOfDataSlot.parameters = {
 };
 export var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
   var renderLeftOfData = ___EmotionJSX(Box, {
-    mx: "sm",
+    pr: "md",
+    pl: "lg",
     minWidth: 35
   }, ___EmotionJSX(Text, {
     pr: 3,
-    variant: "H3"
+    variant: "H3",
+    fontSize: "md",
+    fontWeight: "3"
   }, "Ping"));
   return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
     data: {
@@ -213,11 +229,11 @@ export var WithCharts = function WithCharts() {
     data: {
       text: 'Kangaroo',
       subtext: 'kangaroo@example.com',
-      icon: FormSelectIcon
+      icon: ClockOutlineIcon
     },
     iconWrapperProps: {
       size: 'sm',
-      color: 'purple'
+      color: 'green'
     }
   }, ___EmotionJSX(ListViewItemChart, {
     containerRef: containerRef,
@@ -245,15 +261,30 @@ WithCharts.parameters = {
   }
 };
 export var WithExtraLongText = function WithExtraLongText() {
+  var _useGetTheme3 = useGetTheme(),
+    _useGetTheme3$badgeSt = _useGetTheme3.badgeStyles,
+    blueBg = _useGetTheme3$badgeSt.blueBg,
+    greyBg = _useGetTheme3$badgeSt.greyBg,
+    blueText = _useGetTheme3$badgeSt.blueText,
+    greyText = _useGetTheme3$badgeSt.greyText;
   var renderRightOfData = ___EmotionJSX(Box, {
     isRow: true,
     gap: "sm",
     mx: "sm"
   }, ___EmotionJSX(Badge, {
-    label: "Label"
+    label: "Label",
+    textColor: greyText,
+    bg: greyBg,
+    sx: {
+      minWidth: 'unset'
+    }
   }), ___EmotionJSX(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 ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
@@ -264,7 +295,7 @@ export var WithExtraLongText = function WithExtraLongText() {
     },
     iconWrapperProps: {
       size: 'sm',
-      color: 'orange'
+      color: 'blue'
     },
     slots: {
       rightOfData: renderRightOfData

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

@@ -18,5 +18,11 @@ export var nextGenDarkThemeValues = _objectSpread(_objectSpread({}, nextGenTheme
   backgroundBaseColor: backgroundBaseColor,
   iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
   icons: icons,
-  defaultIconColor: defaultIconColor
+  defaultIconColor: defaultIconColor,
+  badgeStyles: {
+    blueBg: '#1A73E8',
+    greyBg: '#F6F8FA',
+    blueText: '#000000',
+    greyText: '#000000'
+  }
 });

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

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

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

@@ -21,6 +21,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';
 export var nextGenThemeValues = _objectSpread({
@@ -38,5 +44,6 @@ export var nextGenThemeValues = _objectSpread({
   defaultIconSize: defaultIconSize,
   calendarIconSize: calendarIconSize,
   buttonLoaderSize: buttonLoaderSize,
+  badgeStyles: badgeStyles,
   linkSelectFieldWidth: linkSelectFieldWidth
 }, customSizes);

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

@@ -39,7 +39,7 @@ var baseBadge = _objectSpread({
   alignItems: 'center',
   justifyContent: 'center',
   py: '.25em',
-  px: '.4em',
+  px: '.34em',
   borderRadius: '4px',
   maxHeight: '18px',
   minHeight: '18px',

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

@@ -1,4 +1,4 @@
-export var focusBoxShadow = '0 0 0 3px inset #1a73e8';
+export var focusBoxShadow = '0 0 0 2px inset #1a73e8';
 export var borderRadius = '16px';
 export var listViewItem = {
   rightOfData: {

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

@@ -153,7 +153,8 @@ export var text = _objectSpread(_objectSpread({
   listViewItemSubtext: {
     fontSize: 'md',
     lineHeight: 'body',
-    color: 'gray-700'
+    color: 'font.light',
+    mt: 0
   },
   itemTitle: {
     fontWeight: 2,