@pingux/astro 1.2.1 → 1.3.2-alpha.0

package/lib/hooks/useField/useField.js

@@ -156,8 +156,8 @@ var useField = function useField() {
   }),
       focusWithinProps = _useFocusWithin.focusWithinProps;
 
-  var isFloatLabel = labelMode === labelModes.FLOAT;
-  var isLeftLabel = labelMode === labelModes.LEFT;
+  var isFloatLabel = labelMode === labelModes.FLOAT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === labelModes.FLOAT;
+  var isLeftLabel = labelMode === labelModes.LEFT || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.labelMode) === labelModes.LEFT;
   var isFloatLabelActive = isFloatLabel && (hasValue || hasFocusWithin || (containerProps === null || containerProps === void 0 ? void 0 : containerProps.isFloatLabelActive));
 
   var _useStatusClasses2 = useStatusClasses(containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, {

package/lib/hooks/useNavBarPress/index.js

@@ -0,0 +1 @@
+export { default } from './useNavBarPress';

package/lib/hooks/useNavBarPress/useNavBarPress.js

@@ -0,0 +1,27 @@
+/**
+ * A custom hook that will call an onPressCallback function, if the function is provided.
+ * @param {Object} params The accepted parameters object
+ * @param {string} props.key The unique identifier that is assigned to the element being pressed
+ * @param {Object} state The state object tracking selected keys
+ * @param {function} state.setSelectedKeys The function that sets the selected keys
+ * @callback props.onPressCallback The callback that will be called only if provided
+ */
+var useNavBarPress = function useNavBarPress(_ref, state) {
+  var key = _ref.key,
+      onPressCallback = _ref.onPressCallback;
+  var setSelectedKeys = state.setSelectedKeys;
+
+  var onNavPress = function onNavPress() {
+    setSelectedKeys(key);
+
+    if (onPressCallback) {
+      onPressCallback();
+    }
+  };
+
+  return {
+    onNavPress: onNavPress
+  };
+};
+
+export default useNavBarPress;

package/lib/hooks/useNavBarPress/useNavBarPress.test.js

@@ -0,0 +1,36 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useNavBarPress from './';
+var key = 'testKey';
+test('using the onPress prop works as a callback', function () {
+  var onPress = jest.fn();
+  var setSelectedKeys = jest.fn();
+
+  var _renderHook = renderHook(function () {
+    return useNavBarPress({
+      key: key,
+      onPressCallback: onPress
+    }, {
+      setSelectedKeys: setSelectedKeys
+    });
+  }),
+      result = _renderHook.result;
+
+  result.current.onNavPress();
+  expect(onPress).toHaveBeenCalled();
+});
+test('if no onPress prop there is no callback', function () {
+  var onPress = jest.fn();
+  var setSelectedKeys = jest.fn();
+
+  var _renderHook2 = renderHook(function () {
+    return useNavBarPress({
+      key: key
+    }, {
+      setSelectedKeys: setSelectedKeys
+    });
+  }),
+      result = _renderHook2.result;
+
+  result.current.onNavPress();
+  expect(onPress).not.toHaveBeenCalled();
+});

package/lib/index.js

@@ -11,6 +11,8 @@ export { default as AccordionItem } from './components/AccordionItem';
 export * from './components/AccordionItem';
 export { default as AccordionGridItem } from './components/AccordionGridItem';
 export * from './components/AccordionGridItem';
+export { default as ArrayField } from './components/ArrayField';
+export * from './components/ArrayField';
 export { default as Avatar } from './components/Avatar';
 export * from './components/Avatar';
 export { default as Box } from './components/Box';

package/lib/styles/forms/checkbox.js

@@ -2,7 +2,6 @@
 // Default checkbox
 export var checkbox = {
   color: 'active',
-  mr: 'sm',
   'input:focus ~ &': {
     bg: 'transparent'
   },

package/lib/styles/forms/input.js

@@ -186,5 +186,5 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {},
   }
 });
 input.numberField = _objectSpread(_objectSpread({}, input), {}, {
-  pr: '27px'
+  pr: '28px'
 });

package/lib/styles/forms/label.js

@@ -69,4 +69,7 @@ label.checkbox = _objectSpread(_objectSpread({}, text.base), {}, {
   width: 'auto',
   alignItems: 'center',
   cursor: 'pointer'
+});
+label.radioGroup = _objectSpread(_objectSpread({}, label), {}, {
+  fontWeight: 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), {}, {
@@ -197,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,
@@ -312,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 = {

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,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.2.1",
+  "version": "1.3.2-alpha.0",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",
@@ -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",