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

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

@@ -0,0 +1,452 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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) { _defineProperty(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; }
+import buttons from './button';
+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)
+};
+export var badgeDeleteButton = _objectSpread(_objectSpread({}, buttons.iconButtons.base), {}, {
+  borderRadius: '50%',
+  cursor: 'pointer',
+  height: 14,
+  p: 0,
+  width: 14
+});
+export 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
+};
+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'
+  }
+};
+export 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
+};

package/lib/styles/variants/variants.js

@@ -27,6 +27,7 @@ import helpHint from '../../components/HelpHint/HelpHint.styles';
 import imageUpload from '../../components/ImageUploadField/imageUpload';
 import listBox from '../../components/ListBox/ListBox.styles';
 import listItem from '../../components/ListItem/ListItem.styles';
+import listView from '../../components/ListView/ListView.styles';
 import lisViewItemChart from '../../components/ListViewItem/controls/chart/ListViewItemChart.styles';
 import listViewItem from '../../components/ListViewItem/ListViewItem.styles';
 import loader from '../../components/Loader/Loader.styles';
@@ -70,6 +71,7 @@ export default _objectSpread({
   imageUpload: imageUpload,
   listBox: listBox,
   listItem: listItem,
+  listView: listView,
   listViewItem: listViewItem,
   lisViewItemChart: lisViewItemChart,
   loader: loader,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.75.1-alpha.0",
+  "version": "2.76.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -101,6 +101,7 @@
     "@storybook/addon-actions": "^7.1.0",
     "@storybook/api": "^7.1.0",
     "@storybook/components": "^7.1.0",
+    "@storybook/preset-scss": "^1.0.3",
     "@styled-system/prop-types": "^5.1.5",
     "@styled-system/props": "^5.1.5",
     "@styled-system/should-forward-prop": "^5.1.5",
@@ -113,6 +114,7 @@
     "chromatic": "^6.5.3",
     "classnames": "^2.2.6",
     "countries-list": "^2.6.1",
+    "deepmerge": "^4.3.1",
     "emotion-normalize": "^11.0.1",
     "listbox-layout": "npm:@react-stately/layout@3.9.0",
     "listbox-virtualizer": "npm:@react-aria/virtualizer@3.6.0",