@pingux/astro 1.2.0-alpha.9 → 1.3.1

package/lib/styles/forms/radio.js

@@ -4,7 +4,7 @@ export var radio = {
   width: 20,
   height: 20,
   color: 'active',
-  mr: 'sm',
+  mr: 'xs',
   // override the default focus styling
   'input:focus ~ &': {
     bg: 'transparent'

package/lib/styles/forms/switch.js

@@ -1,5 +1,7 @@
 export var label = {
-  alignItems: 'center'
+  alignItems: 'center',
+  fontSize: 'md',
+  color: 'text.primary'
 };
 export var container = {
   mr: 5,

package/lib/styles/variants/accordion.js

@@ -1,3 +1,17 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+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); if (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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 var accordionTitle = {
   display: 'inline-block !important',
   overflowWrap: 'break-word',
@@ -71,7 +85,6 @@ var accordionGridHeaderNav = {
   flexGrow: 1,
   fontWeight: 0,
   fontSize: '16px',
-  mt: '5px',
   '&.is-focused': {
     outline: 'none',
     boxShadow: 'focus',
@@ -79,13 +92,20 @@ var accordionGridHeaderNav = {
     MozBoxShadow: 'focus'
   },
   '&.is-hovered': {
-    backgroundColor: 'accent.10',
-    boxShadow: 'inset 2px 0 0 0 white'
+    backgroundColor: 'accent.10'
   },
   '&.is-pressed': {
-    backgroundColor: 'accent.10'
+    backgroundColor: 'accent.5'
   }
 };
+
+var accordionGridNavItem = _objectSpread(_objectSpread({}, accordionGridHeaderNav), {}, {
+  '&.is-selected': {
+    backgroundColor: 'accent.5',
+    boxShadow: 'inset 2px 0 0 0 white'
+  }
+});
+
 var accordionGridBody = {
   display: 'none !important',
   pl: 'sm',
@@ -100,5 +120,6 @@ export default {
   accordionTitle: accordionTitle,
   accordion: accordion,
   accordionBody: accordionBody,
-  accordionGridHeaderNav: accordionGridHeaderNav
+  accordionGridHeaderNav: accordionGridHeaderNav,
+  accordionGridNavItem: accordionGridNavItem
 };

package/lib/styles/variants/boxes.js

@@ -34,7 +34,10 @@ var radioContainer = {
 }; // Used to add spacing for content shown when a radio is checked
 
 var radioCheckedContent = {
-  py: 'md'
+  pb: 'sm',
+  pl: 'lg',
+  color: 'text.secondary',
+  fontSize: 'md'
 };
 
 var listItem = _objectSpread(_objectSpread({}, base), {}, {
@@ -117,6 +120,14 @@ var inputInContainerSlot = {
   top: '50%',
   transform: 'translateY(-50%)'
 };
+var textFieldInContainerSlot = {
+  position: 'absolute',
+  bg: 'transparent',
+  width: '20px',
+  right: '10px',
+  top: '50%',
+  transform: 'translateY(-50%)'
+};
 var copy = {
   alignItems: 'center',
   width: 'max-content',
@@ -189,26 +200,6 @@ var expandableRow = {
     }
   }
 };
-var navBar = {
-  height: '100%',
-  width: '230px',
-  position: 'absolute',
-  zIndex: '1',
-  top: '0',
-  left: '0',
-  backgroundColor: 'accent.20',
-  overflowY: 'hidden'
-};
-var navBarSectionContainer = {
-  height: '100%',
-  maxHeight: '100%',
-  overflowY: 'overlay !important'
-};
-var navBarItemHeaderContainer = {
-  flexGrow: 1,
-  alignItems: 'center',
-  maxWidth: '180px'
-};
 var datePicker = {
   '.react-calendar': {
     width: 280,
@@ -295,6 +286,7 @@ export default {
   environmentChip: environmentChip,
   expandableRow: expandableRow,
   inputInContainerSlot: inputInContainerSlot,
+  textFieldInContainerSlot: textFieldInContainerSlot,
   fileInputFieldWrapper: fileInputFieldWrapper,
   listItem: listItem,
   listBoxSectionTitle: listBoxSectionTitle,
@@ -303,8 +295,5 @@ export default {
   radioContainer: radioContainer,
   scrollbox: scrollbox,
   topShadowScrollbox: topShadowScrollbox,
-  bottomShadowScrollbox: bottomShadowScrollbox,
-  navBar: navBar,
-  navBarSectionContainer: navBarSectionContainer,
-  navBarItemHeaderContainer: navBarItemHeaderContainer
+  bottomShadowScrollbox: bottomShadowScrollbox
 };

package/lib/styles/variants/buttons.js

@@ -75,8 +75,14 @@ var navItemButton = {
   wordBreak: 'break-word',
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-hovered': {
-    bg: 'accent.10',
+    bg: 'accent.10'
+  },
+  '&.is-selected': {
+    bg: 'accent.5',
     boxShadow: 'inset 2px 0 0 0 white'
+  },
+  '&.is-pressed': {
+    bg: 'accent.5'
   }
 };
 var iconButton = {
@@ -375,6 +381,7 @@ var chipDeleteButton = {
 };
 
 var rocker = _objectSpread(_objectSpread({}, base), {}, {
+  border: '0',
   display: 'inline-flex',
   height: '26px',
   lineHeight: '26px',
@@ -386,6 +393,7 @@ var rocker = _objectSpread(_objectSpread({}, base), {}, {
   textTransform: 'uppercase',
   bg: 'accent.95',
   '&.is-selected': {
+    bg: 'active',
     color: 'white'
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
@@ -539,6 +547,23 @@ var tooltipInline = _objectSpread(_objectSpread({}, text), {}, {
   }
 });
 
+var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
+  bg: 'white',
+  border: '1px solid',
+  borderColor: 'active',
+  '&.is-hovered': _objectSpread({}, defaultHover),
+  '&.is-pressed': _objectSpread({}, defaultActive),
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
+  px: 'sm',
+  borderColor: 'neutral.80',
+  height: 40,
+  color: 'active',
+  display: 'flex'
+});
+
 var colorBlock = {
   bg: 'neutral.95',
   border: '1px solid',
@@ -611,6 +636,7 @@ export default {
   environmentBreadcrumb: environmentBreadcrumb,
   expandableRow: expandableRow,
   fileInputField: fileInputField,
+  filter: filter,
   iconButton: iconButton,
   imageUpload: imageUpload,
   inline: inline,

package/lib/styles/variants/codeView.js

@@ -1,3 +1,93 @@
+var theme = {
+  plain: {
+    color: '#545454',
+    background: 'none',
+    lineHeight: 1.5,
+    tabSize: 4
+  },
+  styles: [{
+    types: ['prolog', 'constant', 'builtin'],
+    style: {
+      color: 'rgb(189, 147, 249)'
+    }
+  }, {
+    types: ['inserted', 'function'],
+    style: {
+      color: 'rgb(80, 250, 123)'
+    }
+  }, {
+    types: ['deleted'],
+    style: {
+      color: 'rgb(255, 85, 85)'
+    }
+  }, {
+    types: ['changed'],
+    style: {
+      color: 'rgb(255, 184, 108)'
+    }
+  }, {
+    types: ['punctuation', 'symbol'],
+    style: {
+      color: 'rgb(248, 248, 242)'
+    }
+  }, {
+    types: ['string', 'char', 'tag', 'selector'],
+    style: {
+      color: 'rgb(255, 121, 198)'
+    }
+  }, {
+    types: ['keyword', 'variable'],
+    style: {
+      color: 'rgb(189, 147, 249)',
+      fontStyle: 'italic'
+    }
+  }, {
+    types: ['comment'],
+    style: {
+      color: 'rgb(98, 114, 164)'
+    }
+  }, {
+    types: ['attr-name'],
+    style: {
+      color: 'rgb(241, 250, 140)'
+    }
+  }, {
+    types: ['comment', 'prolog', 'doctype', 'cdata'],
+    style: {
+      color: '#696969'
+    }
+  }, {
+    types: ['punctuation'],
+    style: {
+      color: '#545454'
+    }
+  }, {
+    types: ['property', 'tag', 'constant', 'symbol', 'deleted'],
+    style: {
+      color: '#007299'
+    }
+  }, {
+    types: ['boolean', 'number', 'operator', 'entity', 'url', 'variable'],
+    style: {
+      color: '#008000'
+    }
+  }, {
+    types: ['selector', 'attr-name', 'char', 'builtin', 'inserted', 'atrule', 'attr-value', 'function', 'string'],
+    style: {
+      color: '#aa5d00'
+    }
+  }, {
+    types: ['keyword', 'regex', 'important'],
+    style: {
+      color: '#d91e18'
+    }
+  }, {
+    types: ['keyword'],
+    style: {
+      fontStyle: 'normal'
+    }
+  }]
+};
 var wrapper = {
   bg: 'accent.99',
   border: '1px solid',
@@ -62,6 +152,7 @@ var lineNo = {
   color: 'white'
 };
 export default {
+  theme: theme,
   wrapper: wrapper,
   lineNo: lineNo
 };

package/lib/styles/variants/navBar.js

@@ -0,0 +1,46 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+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); if (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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import accordion from './accordion';
+var container = {
+  height: '100%',
+  width: '230px',
+  position: 'absolute',
+  zIndex: '1',
+  top: '0',
+  left: '0',
+  backgroundColor: 'accent.20',
+  overflowY: 'hidden'
+};
+var itemHeaderContainer = {
+  flexGrow: 1,
+  alignItems: 'center',
+  maxWidth: '180px'
+};
+var sectionContainer = {
+  height: '100%',
+  maxHeight: '100%',
+  overflowY: 'overlay !important'
+};
+
+var sectionBody = _objectSpread(_objectSpread({}, accordion.accordionGridBody), {}, {
+  pl: '0'
+});
+
+export default {
+  container: container,
+  itemHeaderContainer: itemHeaderContainer,
+  sectionContainer: sectionContainer,
+  sectionBody: sectionBody
+};

package/lib/styles/variants/separator.js

@@ -30,9 +30,10 @@ var navBarSeparator = _objectSpread(_objectSpread({}, base), {}, {
 });
 
 var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, base), {}, {
+  mt: 'sm',
+  mb: '20px',
   ml: '45px',
   width: 'calc(100% - 75px)',
-  mb: '15px',
   backgroundColor: 'neutral.60'
 });
 

package/lib/styles/variants/text.js

@@ -28,7 +28,7 @@ var wordWrap = {
 };
 
 var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
-  fontSize: 'md',
+  fontSize: 'sm',
   fontWeight: 1,
   mb: 6,
   color: 'neutral.40',
@@ -128,6 +128,8 @@ var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
 });
 
 var navBarSubtitle = {
+  my: 'md',
+  ml: 'md',
   fontWeight: 3,
   fontSize: '11px',
   color: 'accent.80'

package/lib/styles/variants/variants.js

@@ -24,6 +24,7 @@ import modal from './modal';
 import menu from './menu';
 import menuItem from './menuItem';
 import messages from './messages';
+import navBar from './navBar';
 import numberField from './numberField';
 import overlayPanel from './overlayPanel';
 import popoverMenu from './popoverMenu';
@@ -46,6 +47,7 @@ export default _objectSpread(_objectSpread({
   menuItem: menuItem,
   messages: messages,
   modal: modal,
+  navBar: navBar,
   numberField: numberField,
   overlayPanel: overlayPanel,
   popoverMenu: popoverMenu,

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pingux/astro",
-  "version": "1.2.0-alpha.9",
+  "version": "1.3.1",
   "description": "PingUX themeable React component library",
-  "author": "uxdev@pingidentity.com",
+  "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",
   "main": "lib/cjs/index.js",
   "module": "lib/index.js",
@@ -38,9 +38,11 @@
     "@emotion/eslint-plugin": "^11.2.0",
     "@storybook/addon-a11y": "^6.1.16",
     "@storybook/addon-actions": "^6.1.16",
+    "@storybook/addon-console": "^1.2.3",
     "@storybook/addon-docs": "^6.1.16",
     "@storybook/addon-essentials": "^6.1.16",
     "@storybook/addon-links": "^6.1.16",
+    "@storybook/addon-storysource": "^6.4.14",
     "@storybook/addons": "^6.1.16",
     "@storybook/react": "^6.1.16",
     "@storybook/theming": "^6.1.16",