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

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/themeOverrides/nextGenDarkMode/variants/badges.js

@@ -57,18 +57,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,
@@ -83,24 +100,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/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -18,15 +18,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/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/tokens/colorTokens.js

@@ -123,7 +123,8 @@ export var nextGenColors = {
     'light': '#5e6d82',
     'link': '#1a73e8',
     'label': '#5e6d82',
-    'reverse': '#ffffff'
+    'reverse': '#ffffff',
+    'hover': '#121518'
   },
   'active': '#1a73e8',
   'active_hover': '#1462C8',

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

@@ -11,8 +11,8 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import buttons from './button';
 var badgeFont = {
-  fontSize: '12px',
-  fontWeight: 2
+  fontSize: 'tiny',
+  fontWeight: '2'
 };
 var badgeIconStyle = {
   '& span': _objectSpread({}, badgeFont),
@@ -39,11 +39,11 @@ var baseBadge = _objectSpread({
   alignItems: 'center',
   justifyContent: 'center',
   py: '.25em',
-  px: '.4em',
+  px: '.34em',
   borderRadius: '4px',
   maxHeight: '18px',
   minHeight: '18px',
-  fontSize: '12px',
+  fontSize: 'tiny',
   alignSelf: 'flex-start',
   display: 'inline-flex !important',
   width: 'fit-content',
@@ -81,30 +81,31 @@ var selectedItemBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#eaf2fd !important',
   paddingRight: '0px !important',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'text.primary',
-    fontWeight: 400
+    color: 'text.primary'
   })
 });
 var readOnlyBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
-  border: 'none',
+  border: '1px solid',
+  borderColor: 'border.hairline',
+  backgroundColor: '#FFFFFF !important',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
     color: 'text.primary',
-    fontWeight: 2
+    lineHeight: 'xs'
   })
 });
 var readOnlyFieldBadge = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
-    color: 'white'
+    color: 'text.primary',
+    lineHeight: 'xs'
   })
 });
-var itemBadgeWithSlot = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
-  bg: '#EAF2FD !important',
-  fontWeight: 2,
+var itemBadgeWithSlot = _objectSpread(_objectSpread({}, selectedItemBadge), {}, {
+  border: 'none',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
     color: 'text.primary'
   }),
   '& svg': {
-    fill: 'gray-900'
+    fill: 'text.primary'
   }
 });
 export var badgeDeleteButton = _objectSpread(_objectSpread({}, buttons.iconButtons.base), {}, {

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,

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

@@ -148,8 +148,11 @@ var listBox = {
     pl: '.75rem',
     pr: 'md',
     justifyContent: 'space-between',
+    borderRadius: '4px',
+    lineHeight: 'body',
+    color: 'gray-700',
     '&.is-focused': {
-      color: 'text.primary',
+      color: 'font.hover',
       bg: 'gray-100',
       borderRadius: '4px'
     },
@@ -177,13 +180,24 @@ var listBox = {
     '&.is-condensed': {
       pl: 'md',
       bg: 'backgroundBase',
+      color: 'gray-700',
       '&.is-selected': {
         bg: 'backgroundBase'
       },
       '&.is-focused': {
-        bg: 'backgroundBase'
+        bg: 'backgroundBase',
+        color: 'font.hover'
       }
     }
+  },
+  sectionTitle: {
+    color: 'font.light',
+    fontWeight: '1',
+    fontSize: 'tiny',
+    lineHeight: 'xs',
+    textTransform: 'uppercase',
+    letterSpacing: '1px',
+    ml: 'md'
   }
 };
 var separator = {