@pingux/astro 2.75.1-alpha.0 → 2.76.0-alpha.0

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

@@ -0,0 +1,462 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.badges = exports.badgeDeleteButton = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _button = _interopRequireDefault(require("./button"));
+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) { (0, _defineProperty2["default"])(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 fieldHelperText = {
+  title: {
+    color: 'text.secondary',
+    fontSize: 'sm',
+    pt: '0px !important',
+    mt: '.25rem',
+    '&.is-error': {
+      color: 'critical.dark'
+    },
+    '&.is-warning': {
+      color: 'warning.bright'
+    },
+    '&.is-success': {
+      color: 'success.dark'
+    }
+  }
+};
+var message = {
+  item: {
+    maxWidth: 400,
+    pointerEvents: 'all',
+    mb: 'md',
+    p: '1.25rem',
+    wordBreak: 'break-word',
+    alignItems: 'center',
+    backgroundColor: 'blue-100',
+    borderLeftWidth: '5px',
+    borderLeftStyle: 'solid',
+    borderLeftColor: 'teal-500',
+    color: 'gray-700',
+    fontSize: '15px !important',
+    borderRadius: 4,
+    '&.is-success': {
+      bg: 'green-100',
+      borderLeftColor: 'green-500',
+      color: 'gray-700'
+    },
+    '&.is-warning': {
+      bg: 'warning.light',
+      borderLeftColor: 'yellow-500',
+      color: 'gray-700'
+    },
+    '&.is-error, > .is-error': {
+      bg: 'red-100',
+      color: 'gray-700'
+    },
+    '&.is-error, > button > svg': {
+      color: 'gray-700 !important',
+      path: {
+        fill: 'gray-700'
+      }
+    },
+    '&.is-error': {
+      borderLeftColor: 'red-500'
+    }
+  }
+};
+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)
+};
+var badgeDeleteButton = _objectSpread(_objectSpread({}, _button["default"].iconButtons.base), {}, {
+  borderRadius: '50%',
+  cursor: 'pointer',
+  height: 14,
+  p: 0,
+  width: 14
+});
+exports.badgeDeleteButton = badgeDeleteButton;
+var badges = {
+  primary: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#eaf1fb !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: '#1967d2'
+    })
+  }),
+  baseBadge: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#eaf1fb !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: '#1967d2'
+    })
+  }),
+  secondary: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#f6f8fa !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: 'gray-900'
+    })
+  }),
+  success: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#d3eddf !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: 'success.dark'
+    })
+  }),
+  danger: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#f8d8d5 !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: 'red-700'
+    })
+  }),
+  warning: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#fff1da !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: 'yellow-700'
+    })
+  }),
+  dark: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: 'black !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: 'white'
+    })
+  }),
+  selectedItemBadge: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#eaf2fd !important',
+    paddingRight: '0px !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      fontSize: '14px',
+      color: 'text.primary',
+      fontWeight: 400
+    })
+  }),
+  readOnlyBadge: {
+    '& span': {
+      fontSize: '14px'
+    }
+  },
+  badgeDeleteButton: badgeDeleteButton
+};
+exports.badges = badges;
+var modal = {
+  content: {
+    borderRadius: '4px'
+  }
+};
+var tab = {
+  borderRadius: '2px',
+  pt: '.5rem',
+  '& > span': {
+    px: '1rem',
+    fontSize: '.9375rem'
+  },
+  '&.is-focused': {
+    boxShadow: 'none',
+    outline: '3px solid',
+    outlineColor: 'active',
+    outlineOffset: '1px',
+    '& > span': {
+      outline: 'none'
+    }
+  },
+  '& > div': {
+    borderBottom: '3px solid',
+    borderBottomColor: 'primary',
+    ml: '0px'
+  }
+};
+var menuTab = {
+  ml: '0px !important'
+};
+var listBox = {
+  option: {
+    '&.is-focused': {
+      color: 'text.primary',
+      bg: 'gray-100'
+    },
+    '&.is-selected': {
+      color: 'text.primary',
+      bg: 'lightblue',
+      pl: 0
+    }
+  }
+};
+var menuItem = {
+  item: {
+    bg: 'transparent',
+    padding: '10px 10px',
+    outline: 'none',
+    color: 'text.primary',
+    cursor: 'pointer',
+    '&.is-focused, &.is-selected, &.is-pressed': {
+      bg: 'gray-100',
+      color: 'text.primary',
+      '> *': {
+        color: 'text.primary'
+      }
+    },
+    '&.is-pressed': {
+      color: 'text.primary',
+      bg: 'lightblue'
+    }
+  }
+};
+var separator = {
+  base: {
+    bg: 'gray-200'
+  }
+};
+var avatarBase = {
+  borderRadius: '50%',
+  textAlign: 'center',
+  justifyContent: 'center',
+  fontFamily: 'standard'
+};
+var avatar = {
+  xl: _objectSpread({
+    size: '104px',
+    fontSize: 'calc(104px * .4)'
+  }, avatarBase),
+  lg: _objectSpread(_objectSpread({
+    size: '72px'
+  }, avatarBase), {}, {
+    fontSize: 'calc(72px * .4)'
+  }),
+  md: _objectSpread(_objectSpread({
+    size: '34px'
+  }, avatarBase), {}, {
+    fontSize: 'calc(34px * .4)'
+  }),
+  sm: _objectSpread(_objectSpread({
+    size: '24px'
+  }, avatarBase), {}, {
+    fontSize: 'calc(24px * .4)'
+  })
+};
+var progressBarContainer = {
+  backgroundColor: 'gray-200',
+  borderRadius: '.5rem',
+  height: '1rem'
+};
+var progressBar = {
+  transition: 'width .6s ease',
+  container: _objectSpread({}, progressBarContainer),
+  percentageBar: _objectSpread(_objectSpread({}, progressBarContainer), {}, {
+    backgroundColor: 'active'
+  })
+};
+var listViewItem = {
+  iconContainer: {
+    mr: 'sm'
+  },
+  styledListItem: {
+    bg: 'white',
+    '&.is-selected': {
+      bg: 'gray-100'
+    },
+    borderBottom: 'none',
+    '&.has-separator': {
+      borderBottom: '1px solid',
+      borderBottomColor: 'gray-200'
+    },
+    '&.is-hovered': {
+      bg: 'gray-100'
+    },
+    '&.is-focused': {
+      boxShadow: '0 0 0 3px inset #1a73e8',
+      bg: 'gray-100'
+    }
+  },
+  styledContainer: {
+    py: '1.25rem',
+    px: '1rem',
+    bg: 'transparent',
+    '&.is-hovered': {
+      bg: 'transparent',
+      cursor: 'pointer'
+    }
+  },
+  expandableStyledListItem: {
+    pr: '1.25rem',
+    pl: 0
+  },
+  expandableItemBody: {
+    px: '1.5rem'
+  },
+  expandableRow: {
+    '&.has-separator': {
+      borderBottom: '1px solid',
+      borderBottomColor: 'gray-300'
+    }
+  }
+};
+var navBarSelected = {
+  backgroundColor: 'lightblue'
+};
+var navBarFocus = {
+  outline: '2px solid',
+  outlineColor: 'active',
+  outlineOffset: '-2px'
+};
+var navBar = {
+  container: {
+    width: '252px',
+    p: 'sm',
+    backgroundColor: 'white',
+    boxShadow: '0 .5rem 1rem rgba(0, 0, 0, .15)'
+  },
+  sectionButton: {
+    '&.is-hovered': {
+      backgroundColor: 'light'
+    },
+    '&.is-pressed': {
+      backgroundColor: 'gray-200'
+    },
+    '&.is-focused': _objectSpread({}, navBarFocus)
+  },
+  itemButton: {
+    color: 'text.primary',
+    '&.is-focused': _objectSpread({}, navBarFocus),
+    '&.is-hovered': {
+      backgroundColor: 'light'
+    },
+    '&.is-pressed': {
+      backgroundColor: 'gray-200',
+      color: 'text.primary'
+    },
+    '&.is-selected': {
+      bg: 'lightblue',
+      color: 'darkblue'
+    }
+  },
+  subtitle: {
+    color: 'text.primary'
+  },
+  headerText: {
+    color: 'text.primary',
+    '.is-selected &': {
+      color: 'darkblue'
+    }
+  },
+  headerNav: {
+    color: 'text.primary',
+    '&.is-hovered': {
+      backgroundColor: 'light'
+    },
+    '&.is-focused': {
+      boxShadow: 'none',
+      WebkitBoxShadow: 'none',
+      MozBoxShadow: 'none'
+    }
+  },
+  item: {
+    px: '1rem',
+    py: '.75rem',
+    color: 'text.primary',
+    '&.is-hovered': {
+      backgroundColor: 'light'
+    },
+    '> div > svg': {
+      fill: 'text.primary'
+    },
+    '&.is-selected': _objectSpread(_objectSpread({}, navBarSelected), {}, {
+      '> div > svg': {
+        fill: 'darkblue'
+      }
+    }),
+    '&.is-focused': {
+      outline: '2px solid',
+      outlineColor: 'active',
+      outlineOffset: '-2px',
+      boxShadow: 'none',
+      WebkitBoxShadow: 'none',
+      MozBoxShadow: 'none'
+    }
+  },
+  itemHeaderContainer: {
+    px: '1rem',
+    py: '.75rem',
+    '&.is-selected': _objectSpread({}, navBarSelected),
+    backgroundColor: 'transparent',
+    '> svg': {
+      fill: 'text.primary'
+    },
+    '> div > svg': {
+      fill: 'text.primary'
+    }
+  }
+};
+var listView = {
+  container: {
+    borderRadius: '16px',
+    border: '1px solid',
+    borderColor: '#e7eef4',
+    '& > div': {
+      borderRadius: '16px'
+    }
+  }
+};
+var dataTable = {
+  container: {
+    border: '1px solid',
+    borderColor: 'gray-300',
+    borderRadius: '16px'
+  },
+  tableRow: {
+    borderTop: '1px solid',
+    borderTopColor: 'gray-300',
+    borderBottom: '0',
+    pl: 'lg'
+  },
+  tableHeadWrapper: {
+    borderBottom: '0'
+  },
+  tableHeadCell: {
+    pl: 'lg',
+    fontWeight: '2',
+    fontSize: 'md'
+  },
+  rowHeader: {
+    py: '20px !important'
+  },
+  tableCell: {
+    fontSize: 'md'
+  }
+};
+var _default = {
+  navBar: navBar,
+  fieldHelperText: fieldHelperText,
+  message: message,
+  modal: modal,
+  tab: tab,
+  menuTab: menuTab,
+  listBox: listBox,
+  separator: separator,
+  menuItem: menuItem,
+  avatar: avatar,
+  listViewItem: listViewItem,
+  progressBar: progressBar,
+  listView: listView,
+  dataTable: dataTable
+};
+exports["default"] = _default;

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

@@ -34,6 +34,7 @@ var _HelpHint = _interopRequireDefault(require("../../components/HelpHint/HelpHi
 var _imageUpload = _interopRequireDefault(require("../../components/ImageUploadField/imageUpload"));
 var _ListBox = _interopRequireDefault(require("../../components/ListBox/ListBox.styles"));
 var _ListItem = _interopRequireDefault(require("../../components/ListItem/ListItem.styles"));
+var _ListView = _interopRequireDefault(require("../../components/ListView/ListView.styles"));
 var _ListViewItemChart = _interopRequireDefault(require("../../components/ListViewItem/controls/chart/ListViewItemChart.styles"));
 var _ListViewItem = _interopRequireDefault(require("../../components/ListViewItem/ListViewItem.styles"));
 var _Loader = _interopRequireDefault(require("../../components/Loader/Loader.styles"));
@@ -81,6 +82,7 @@ var _default = _objectSpread({
   imageUpload: _imageUpload["default"],
   listBox: _ListBox["default"],
   listItem: _ListItem["default"],
+  listView: _ListView["default"],
   listViewItem: _ListViewItem["default"],
   lisViewItemChart: _ListViewItemChart["default"],
   loader: _Loader["default"],

package/lib/cjs/types/dataTable.d.ts

@@ -62,7 +62,7 @@ export interface DataTableProps {
     };
     width?: string | number;
     children: ReactNode;
-    scale?: 'large' | 'medium';
+    scale?: 'large' | 'medium' | 'xl';
 }
 export interface DataTableCellProps {
     cell: GridNode<object>;

package/lib/cjs/types/listView.d.ts

@@ -11,6 +11,7 @@ export interface ListViewProps extends Omit<TreeProps<object>, 'selectionMode'>
     onFocus?: (event: any) => void;
     onLoadMore?: () => void;
     'aria-label'?: string;
+    containerProps?: object;
 }
 export interface ExpandableItemChildrenContainerProps {
     children?: ReactNode;

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

@@ -214,6 +214,38 @@ var removableBadge = _objectSpread(_objectSpread({}, invertedRemovableBadge), {}
     color: 'text.primary'
   }
 });
+var dataTableBase = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  border: '1px',
+  borderStyle: 'solid',
+  flexDirection: 'row-reverse !important',
+  bg: 'white !important'
+});
+var dataTable = {
+  pending: _objectSpread(_objectSpread({}, dataTableBase), {}, {
+    '& span, & > svg': {
+      color: 'line.light'
+    },
+    borderColor: 'line.light'
+  }),
+  failed: _objectSpread(_objectSpread({}, dataTableBase), {}, {
+    '& span, & > svg': {
+      color: 'warning.bright'
+    },
+    borderColor: 'warning.bright'
+  }),
+  rejected: _objectSpread(_objectSpread({}, dataTableBase), {}, {
+    '& span, & > svg': {
+      color: 'critical.bright'
+    },
+    borderColor: 'critical.bright'
+  }),
+  approved: _objectSpread(_objectSpread({}, dataTableBase), {}, {
+    '& span, & > svg': {
+      color: 'success.dark'
+    },
+    borderColor: 'success.dark'
+  })
+};
 export default {
   activeStatusBadge: activeStatusBadge,
   badgeDeleteButton: badgeDeleteButton,
@@ -237,5 +269,6 @@ export default {
   warningStatusBadge: warningStatusBadge,
   healthyStatusBadge: healthyStatusBadge,
   removableBadge: removableBadge,
-  invertedRemovableBadge: invertedRemovableBadge
+  invertedRemovableBadge: invertedRemovableBadge,
+  dataTable: dataTable
 };

package/lib/components/Button/Button.stories.js

@@ -108,8 +108,8 @@ export var TextIconButton = function TextIconButton() {
     mb: "sm",
     variant: "primaryWithIcon"
   }, ___EmotionJSX(Icon, {
-    icon: PlusIcon,
     mr: "xs",
+    icon: PlusIcon,
     color: "white",
     size: 20,
     title: {

package/lib/components/DataTable/DataTable.js

@@ -48,7 +48,8 @@ var ROW_HEIGHTS = {
   },
   spacious: {
     medium: 48,
-    large: 60
+    large: 60,
+    xl: 74
   }
 };
 var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -207,7 +208,9 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   };
   var mergedProps = mergeProps(gridProps, focusProps);
-  return ___EmotionJSX(DataTableContext.Provider, {
+  return ___EmotionJSX(Box, {
+    variant: "dataTable.container"
+  }, ___EmotionJSX(DataTableContext.Provider, {
     value: {
       state: state,
       layout: layout,
@@ -232,7 +235,7 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
     style: {
       whiteSpace: props.overflowMode === 'wrap' ? 'normal' : 'initial'
     }
-  })));
+  }))));
 });
 var TableHeader = function TableHeader(_ref2) {
   var children = _ref2.children,
@@ -375,7 +378,8 @@ var CenteredWrapper = function CenteredWrapper(_ref7) {
     variant: "dataTable.tableCenteredWrapper"
   }, ___EmotionJSX(Box, {
     role: "rowheader",
-    "aria-colspan": state.collection.columns.length
+    "aria-colspan": state.collection.columns.length,
+    variant: "dataTable.rowHeader"
   }, children));
 };
 export default DataTable;

package/lib/components/DataTable/DataTable.styles.js

@@ -133,7 +133,8 @@ var tableBody = {
   overflow: 'auto'
 };
 var tableMenu = {
-  borderRadius: '50px'
+  borderRadius: '50px',
+  mr: 'md'
 };
 export default {
   tableBody: tableBody,

package/lib/components/DataTable/DataTableBadge.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 /* eslint-disable no-nested-ternary */
 import React, { forwardRef } from 'react';
 import AlertCircleIcon from '@pingux/mdi-react/AlertCircleIcon';
@@ -7,26 +8,55 @@ import { Badge, Icon } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var DataTableBadge = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var cell = _ref.cell;
-  var color = cell === 'Pending' ? 'line.light' : cell === 'Failed' ? 'warning.bright' : cell === 'Rejected' ? 'critical.bright' : 'success.dark';
-  return ___EmotionJSX(Badge, {
-    label: cell,
-    bg: "white",
-    ref: ref,
-    textColor: cell === 'Pending' || cell === 'Failed' ? 'text.primary' : color,
-    sx: {
-      border: '1px',
-      borderStyle: 'solid',
-      borderColor: color,
-      flexDirection: 'row-reverse !important'
-    }
-  }, cell && cell !== 'Pending' && ___EmotionJSX(Icon, {
-    icon: cell === 'Approved' ? CheckIcon : cell === 'Rejected' ? AlertCircleIcon : cell === 'Failed' ? AlertIcon : undefined,
-    title: {
-      name: cell === 'Approved' ? 'Check Icon' : cell === 'Rejected' ? 'Alert Circle Icon' : cell === 'Failed' ? 'Alert Icon' : ''
+  var componentProps = {
+    'Pending': {
+      badgeProps: {
+        variant: 'dataTable.pending'
+      },
+      iconProps: {
+        icon: CheckIcon
+      }
+    },
+    'Failed': {
+      badgeProps: {
+        variant: 'dataTable.failed'
+      },
+      iconProps: {
+        icon: AlertIcon,
+        title: {
+          name: 'Alert Icon'
+        }
+      }
     },
+    'Rejected': {
+      badgeProps: {
+        variant: 'dataTable.rejected'
+      },
+      iconProps: {
+        icon: AlertCircleIcon,
+        title: {
+          name: 'Alert Circle Icon'
+        }
+      }
+    },
+    'Approved': {
+      badgeProps: {
+        variant: 'dataTable.approved'
+      },
+      iconProps: {
+        icon: CheckIcon,
+        title: {
+          name: 'Check Icon'
+        }
+      }
+    }
+  };
+  return ___EmotionJSX(Badge, _extends({
+    label: cell,
+    ref: ref
+  }, cell && componentProps[cell].badgeProps), cell && cell !== 'Pending' && ___EmotionJSX(Icon, _extends({
     mr: "xs",
-    size: "14px",
-    color: color
-  }));
+    size: "14px"
+  }, cell && componentProps[cell].iconProps)));
 });
 export default DataTableBadge;