@pingux/astro 2.81.0-alpha.0 → 2.81.0-alpha.1

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

@@ -120,6 +120,7 @@ var sectionBody = _objectSpread(_objectSpread({}, accordionGrid.body), {}, {
   pl: '0'
 });
 var itemButton = {
+  marginY: '2px',
   textDecoration: 'none',
   outline: 'none',
   cursor: 'pointer',
@@ -289,6 +290,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'
+});
 export default {
   container: container,
   popUpContainer: popUpContainer,
@@ -309,5 +336,11 @@ export default {
   item: item,
   popUpItem: popUpItem,
   navBarItemBody: navBarItemBody,
-  popUpNavBarItemBody: popUpNavBarItemBody
+  popUpNavBarItemBody: popUpNavBarItemBody,
+  itemLinkButtonColor: itemLinkButtonColor,
+  sectionList: sectionList,
+  itemIcon: itemIcon,
+  itemIconSelected: itemIconSelected,
+  itemCustomIcon: itemCustomIcon,
+  itemCustomIconSelected: itemCustomIconSelected
 };

package/lib/components/NavBarSection/NavBarItemLink.js

@@ -40,10 +40,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)
   }));
 };
 export default NavBarItemLink;

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

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { forwardRef } from 'react';
+import { render, screen } from '@testing-library/react';
+import { Icon } from '../../index';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { Credentials, Verify } from './icons';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-icon';
+var defaultProps = {
+  'data-testid': testId
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(Icon, _extends({}, 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__*/forwardRef(function (props, ref) {
+  return ___EmotionJSX("svg", _extends({
+    ref: ref
+  }, props, {
+    "aria-labelledby": "id"
+  }), ___EmotionJSX("title", {
+    id: "id"
+  }, "title"));
+});
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Icon, _extends({
+      icon: SVGTestComponent
+    }, props));
+  }
+});
+test('Credentials icon', function () {
+  getComponent({
+    icon: Credentials,
+    title: {
+      name: 'Credentials Icon'
+    }
+  });
+  var icon = screen.getByTestId(testId);
+  expect(icon).toBeInstanceOf(SVGSVGElement);
+  expect(icon).toBeInTheDocument();
+});
+test('Verify icon', function () {
+  getComponent({
+    icon: Verify,
+    title: {
+      name: 'Verify Icon'
+    }
+  });
+  var icon = screen.getByTestId(testId);
+  expect(icon).toBeInstanceOf(SVGSVGElement);
+  expect(icon).toBeInTheDocument();
+});

package/lib/components/NavSideBar/NavSideBar.js

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["isAuto\u0421ollapsible", "defaultSelectedKey", "selectedKey", "setSelectedKey", "hasRestoreFocus", "defaultExpandedKeys", "children", "variant"];
+import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { forwardRef, useMemo, useState } from 'react';
+import { FocusScope, useFocusManager } from '@react-aria/focus';
+import { NavBarContext } from '../../context/NavBarContext';
+import { useLocalOrForwardRef } from '../../hooks';
+import useNavBarStyling from '../../hooks/useNavBarStyling/useNavBarStyling';
+import useProgressiveState from '../../hooks/useProgressiveState';
+import Box from '../Box/Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var NavSideBar = /*#__PURE__*/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 = _objectWithoutProperties(props, _excluded);
+  var initialExpandedKeys = isAutoСollapsible && _Array$isArray(defaultExpandedKeys) && defaultExpandedKeys.length ? defaultExpandedKeys[0] : defaultExpandedKeys;
+  var _useState = useState(initialExpandedKeys),
+    _useState2 = _slicedToArray(_useState, 2),
+    expandedKeys = _useState2[0],
+    setExpandedKeys = _useState2[1];
+  var _useProgressiveState = useProgressiveState(selectedKeyProp, defaultSelectedKey),
+    _useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
+    selectedKey = _useProgressiveState2[0],
+    setSelectedKey = _useProgressiveState2[1];
+  var navStyles = useNavBarStyling(variant || 'default');
+  var items = _mapInstanceProperty(_context = React.Children.toArray(children)).call(_context, function (child) {
+    return {
+      item: child,
+      key: /*#__PURE__*/React.isValidElement(child) ? child.key : ''
+    };
+  });
+  var contextValue = 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 = useLocalOrForwardRef(ref);
+  return ___EmotionJSX(NavBarContext.Provider, {
+    value: contextValue
+  }, ___EmotionJSX(Box, _extends({
+    ref: navSideBarRef,
+    variant: navStyles.navBar,
+    role: "navigation",
+    as: "nav"
+  }, others), items.length ? ___EmotionJSX(FocusScope, {
+    restoreFocus: hasRestoreFocus
+  }, _mapInstanceProperty(items).call(items, function (_ref, index) {
+    var item = _ref.item,
+      key = _ref.key;
+    return ___EmotionJSX(FocusableItem, {
+      key: key || "key".concat(index)
+    }, item);
+  })) : null));
+});
+var FocusableItem = function FocusableItem(props) {
+  var focusManager = 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.cloneElement(props.children, {
+    onKeyDown: onKeyDown
+  });
+  return childWithFocusHandle;
+};
+NavSideBar.defaultProps = {
+  isAutoСollapsible: false,
+  defaultSelectedKey: '',
+  defaultExpandedKeys: [],
+  variant: 'default',
+  hasRestoreFocus: true
+};
+NavSideBar.displayName = 'NavSideBar';
+export default NavSideBar;

package/lib/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.