@pingux/astro 2.80.0 → 2.81.0-alpha.1

package/lib/cjs/components/NavBar/NavBar.styles.d.ts

@@ -142,6 +142,7 @@ declare const _default: {
         display: string;
     };
     itemButton: {
+        marginY: string;
         textDecoration: string;
         outline: string;
         cursor: string;
@@ -199,6 +200,7 @@ declare const _default: {
             bg: string;
             color: string;
         };
+        marginY: string;
         textDecoration: string;
         outline: string;
         cursor: string;
@@ -367,5 +369,33 @@ declare const _default: {
         height: string;
         marginBottom: number;
     };
+    itemLinkButtonColor: {
+        color: string;
+    };
+    sectionList: {
+        margin: number;
+        padding: number;
+        listStyle: string;
+    };
+    itemIcon: {
+        mr: string;
+        color: string;
+        fill: string;
+    };
+    itemIconSelected: {
+        color: string;
+        fill: string;
+        mr: string;
+    };
+    itemCustomIcon: {
+        color: string;
+        fill: string;
+        ml: string;
+    };
+    itemCustomIconSelected: {
+        color: string;
+        fill: string;
+        ml: string;
+    };
 };
 export default _default;

package/lib/cjs/components/NavBar/NavBar.styles.js

@@ -127,6 +127,7 @@ var sectionBody = _objectSpread(_objectSpread({}, _AccordionGrid["default"].body
   pl: '0'
 });
 var itemButton = {
+  marginY: '2px',
   textDecoration: 'none',
   outline: 'none',
   cursor: 'pointer',
@@ -296,6 +297,32 @@ var navBarItemBody = {
 var popUpNavBarItemBody = _objectSpread(_objectSpread({}, navBarItemBody), {}, {
   mb: 0
 });
+var itemLinkButtonColor = {
+  color: 'white'
+};
+var sectionList = {
+  margin: 0,
+  padding: 0,
+  listStyle: 'none'
+};
+var itemIcon = {
+  mr: 'sm',
+  color: 'neutral.95',
+  fill: 'neutral.95'
+};
+var itemIconSelected = _objectSpread(_objectSpread({}, itemIcon), {}, {
+  color: 'white',
+  fill: 'white'
+});
+var itemCustomIcon = {
+  color: 'neutral.95',
+  fill: 'neutral.95',
+  ml: 'auto'
+};
+var itemCustomIconSelected = _objectSpread(_objectSpread({}, itemCustomIcon), {}, {
+  color: 'white',
+  fill: 'white'
+});
 var _default = {
   container: container,
   popUpContainer: popUpContainer,
@@ -316,6 +343,12 @@ var _default = {
   item: item,
   popUpItem: popUpItem,
   navBarItemBody: navBarItemBody,
-  popUpNavBarItemBody: popUpNavBarItemBody
+  popUpNavBarItemBody: popUpNavBarItemBody,
+  itemLinkButtonColor: itemLinkButtonColor,
+  sectionList: sectionList,
+  itemIcon: itemIcon,
+  itemIconSelected: itemIconSelected,
+  itemCustomIcon: itemCustomIcon,
+  itemCustomIconSelected: itemCustomIconSelected
 };
 exports["default"] = _default;

package/lib/cjs/components/NavBarSection/NavBarItemLink.js

@@ -47,10 +47,7 @@ var NavBarItemLink = function NavBarItemLink(props) {
     onPress: onNavPress,
     color: isSelected ? 'white' : undefined
   }, others, {
-    sx: _objectSpread({
-      paddingLeft: '45px',
-      paddingRight: 'md'
-    }, props.sx)
+    sx: _objectSpread({}, props.sx)
   }));
 };
 var _default = NavBarItemLink;

package/lib/cjs/components/NavSideBar/Icon.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/NavSideBar/Icon.test.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@testing-library/react");
+var _index = require("../../index");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _icons = require("./icons");
+var _react3 = require("@emotion/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var testId = 'test-icon';
+var defaultProps = {
+  'data-testid': testId
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_index.Icon, (0, _extends2["default"])({}, defaultProps, props)));
+};
+
+// The mdi-react and @pingux/mid-react libraries don't support ref forwarding
+// A simple implementation of an SVG component demonstrates ref forwarding
+var SVGTestComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return (0, _react3.jsx)("svg", (0, _extends2["default"])({
+    ref: ref
+  }, props, {
+    "aria-labelledby": "id"
+  }), (0, _react3.jsx)("title", {
+    id: "id"
+  }, "title"));
+});
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react3.jsx)(_index.Icon, (0, _extends2["default"])({
+      icon: SVGTestComponent
+    }, props));
+  }
+});
+test('Credentials icon', function () {
+  getComponent({
+    icon: _icons.Credentials,
+    title: {
+      name: 'Credentials Icon'
+    }
+  });
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toBeInstanceOf(SVGSVGElement);
+  expect(icon).toBeInTheDocument();
+});
+test('Verify icon', function () {
+  getComponent({
+    icon: _icons.Verify,
+    title: {
+      name: 'Verify Icon'
+    }
+  });
+  var icon = _react2.screen.getByTestId(testId);
+  expect(icon).toBeInstanceOf(SVGSVGElement);
+  expect(icon).toBeInTheDocument();
+});

package/lib/cjs/components/NavSideBar/NavSideBar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NavSideBarProps } from '../../types';
+declare const NavSideBar: React.ForwardRefExoticComponent<NavSideBarProps & React.RefAttributes<HTMLElement>>;
+export default NavSideBar;

package/lib/cjs/components/NavSideBar/NavSideBar.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _focus = require("@react-aria/focus");
+var _NavBarContext = require("../../context/NavBarContext");
+var _hooks = require("../../hooks");
+var _useNavBarStyling = _interopRequireDefault(require("../../hooks/useNavBarStyling/useNavBarStyling"));
+var _useProgressiveState3 = _interopRequireDefault(require("../../hooks/useProgressiveState"));
+var _Box = _interopRequireDefault(require("../Box/Box"));
+var _react2 = require("@emotion/react");
+var _excluded = ["isAuto\u0421ollapsible", "defaultSelectedKey", "selectedKey", "setSelectedKey", "hasRestoreFocus", "defaultExpandedKeys", "children", "variant"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var NavSideBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _context;
+  var isAutoСollapsible = props.isAutoСollapsible,
+    defaultSelectedKey = props.defaultSelectedKey,
+    selectedKeyProp = props.selectedKey,
+    setSelectedKeyProp = props.setSelectedKey,
+    hasRestoreFocus = props.hasRestoreFocus,
+    defaultExpandedKeys = props.defaultExpandedKeys,
+    children = props.children,
+    variant = props.variant,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var initialExpandedKeys = isAutoСollapsible && (0, _isArray["default"])(defaultExpandedKeys) && defaultExpandedKeys.length ? defaultExpandedKeys[0] : defaultExpandedKeys;
+  var _useState = (0, _react.useState)(initialExpandedKeys),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    expandedKeys = _useState2[0],
+    setExpandedKeys = _useState2[1];
+  var _useProgressiveState = (0, _useProgressiveState3["default"])(selectedKeyProp, defaultSelectedKey),
+    _useProgressiveState2 = (0, _slicedToArray2["default"])(_useProgressiveState, 2),
+    selectedKey = _useProgressiveState2[0],
+    setSelectedKey = _useProgressiveState2[1];
+  var navStyles = (0, _useNavBarStyling["default"])(variant || 'default');
+  var items = (0, _map["default"])(_context = _react["default"].Children.toArray(children)).call(_context, function (child) {
+    return {
+      item: child,
+      key: /*#__PURE__*/_react["default"].isValidElement(child) ? child.key : ''
+    };
+  });
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      isAutoСollapsible: isAutoСollapsible,
+      selectedKey: selectedKey,
+      setSelectedKey: setSelectedKeyProp || setSelectedKey,
+      expandedKeys: expandedKeys,
+      setExpandedKeys: setExpandedKeys,
+      navStyles: navStyles
+    };
+  }, [isAutoСollapsible, selectedKey, setSelectedKeyProp, setSelectedKey, expandedKeys, setExpandedKeys, navStyles]);
+  var navSideBarRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  return (0, _react2.jsx)(_NavBarContext.NavBarContext.Provider, {
+    value: contextValue
+  }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    ref: navSideBarRef,
+    variant: navStyles.navBar,
+    role: "navigation",
+    as: "nav"
+  }, others), items.length ? (0, _react2.jsx)(_focus.FocusScope, {
+    restoreFocus: hasRestoreFocus
+  }, (0, _map["default"])(items).call(items, function (_ref, index) {
+    var item = _ref.item,
+      key = _ref.key;
+    return (0, _react2.jsx)(FocusableItem, {
+      key: key || "key".concat(index)
+    }, item);
+  })) : null));
+});
+var FocusableItem = function FocusableItem(props) {
+  var focusManager = (0, _focus.useFocusManager)();
+  var onKeyDown = function onKeyDown(e) {
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        e.preventDefault();
+        focusManager.focusNext();
+        break;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        e.preventDefault();
+        focusManager.focusPrevious();
+        break;
+      default:
+        break;
+    }
+  };
+  var childWithFocusHandle = /*#__PURE__*/_react["default"].cloneElement(props.children, {
+    onKeyDown: onKeyDown
+  });
+  return childWithFocusHandle;
+};
+NavSideBar.defaultProps = {
+  isAutoСollapsible: false,
+  defaultSelectedKey: '',
+  defaultExpandedKeys: [],
+  variant: 'default',
+  hasRestoreFocus: true
+};
+NavSideBar.displayName = 'NavSideBar';
+var _default = NavSideBar;
+exports["default"] = _default;

package/lib/cjs/components/NavSideBar/NavSideBar.mdx

@@ -0,0 +1,42 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/NavSideBar/NavSideBar" />
+
+# NavSideBar
+
+The NavSideBar component is primarily to navigate within apps.
+This component is built to have the NavSideBarSection component passed into it. Inside the NavSideBarSection, the NavSideBarSectionItem is passed.
+
+The NavSideBar should:
+- Be visually separate from the content.
+- Have descriptive titles describing the destination, action item or category.
+- Group navigation items into sections based on related categories.
+- Order content logically for a natural progression.
+
+### Required Components
+
+This component requires these components:
+- NavSideBarHeader
+- NavSideBarItem
+- NavSideBarSectionItem
+- NavSideBarSection
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component.
+
+| Key | Functions |
+| ---- | ---- |
+| Tab | All of the content in the NavSideBar is focusable. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Space or Enter | Toggles the component when the accordion is focused. |
+| Arrow keys | All components within the NavSideBar are accessible using arrow keys. |
+| Esc | Pressing the escape key when the accordion is open and focused collapses the component. |
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+- Each Link component uses the **`aria-label`** attribute to provide an accessible name.
+- The Icon uses the **`aria-hidden`** attribute to hide its content from assistive technology.

package/lib/cjs/components/NavSideBar/NavSideBar.stories.d.ts

@@ -0,0 +1,8 @@
+import { StoryFn } from '@storybook/react';
+import { NavSideBarProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<NavSideBarProps>;
+export declare const Controlled: StoryFn<NavSideBarProps>;
+export declare const AutoCollapse: StoryFn<NavSideBarProps>;
+export declare const Dynamic: StoryFn<NavSideBarProps>;