[workspace-v1-epic] Add WorkspaceLayout and SkipTos

CHANGELOG.md

@@ -4,6 +4,7 @@
 * Added
   * Local file inclusion of terra-application-navigation
   * Added ApplicationNavigationActionsContext to application-navigation
+  * Added WorkspaceLayout to local ApplicationNavigation instance
 
 ## 1.48.0 - (June 15, 2021)
 

package.json

@@ -104,6 +104,7 @@
     "keycode-js": "^3.1.0",
     "mutationobserver-shim": "0.3.3",
     "prop-types": "^15.5.8",
+    "react-draggable": "^4.4.3",
     "react-onclickoutside": "^6.7.1",
     "resize-observer-polyfill": "^1.4.1",
     "terra-action-footer": "^2.61.0",

src/application-navigation/ApplicationNavigation.jsx

@@ -44,6 +44,10 @@ const propTypes = {
    * An element to render within the ApplicationNavigation utility menu, shifted to the drawer at the `medium` breakpoint and below.
    */
   hero: PropTypes.element,
+  /**
+   * The base id used to generate ids of workspace, navigation, utility, and extension items
+   */
+  id: PropTypes.string,
   /**
    * An array of configuration objects with information specifying the creation of navigation items. These items
    * are rendered within the ApplicationNavigation header at larger breakpoints and within the drawer menu at smaller breakpoints.
@@ -116,6 +120,10 @@ const propTypes = {
    * These items are rendered within the popup utility menu at larger breakpoints and within the drawer menu at smaller breakpoints.
    */
   utilityItems: utilityItemsPropType,
+  /**
+   * An ApplicationNavigationWorkspace element and it's associated ApplicationNavigationWorkspace.
+   */
+  workspace: PropTypes.element,
 };
 
 const ApplicationNavigation = ({
@@ -125,6 +133,7 @@ const ApplicationNavigation = ({
   disablePromptsForNavigationItems,
   extensionItems,
   hero,
+  id,
   navigationItems,
   navigationPromptResolutionOptions,
   notifications,
@@ -138,6 +147,7 @@ const ApplicationNavigation = ({
   titleConfig,
   userConfig,
   utilityItems,
+  workspace,
 }) => {
   const applicationIntl = React.useContext(ApplicationIntlContext);
 
@@ -167,6 +177,7 @@ const ApplicationNavigation = ({
 
   return (
     <TerraApplicationNavigation
+      id={id}
       hero={hero}
       notifications={notifications}
       titleConfig={titleConfig}
@@ -182,6 +193,7 @@ const ApplicationNavigation = ({
       onSelectHelp={onSelectHelp}
       onSelectLogout={propOnSelectLogout && onSelectLogout}
       onDrawerMenuStateChange={onDrawerMenuStateChange}
+      workspace={workspace}
     >
       <ApplicationLoadingOverlayProvider>
         <ApplicationStatusOverlayProvider>

src/application-navigation/ApplicationNavigationWorkspace.jsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Workspace, { WorkspaceItem } from '../workspace';
+import ApplicationNavigationWorkspaceItem from './ApplicationNavigationWorkspaceItem';
+
+const propTypes = {
+  /**
+   * Callback function triggering when the workspace size changes.
+   */
+  onSizeChange: PropTypes.func,
+  /**
+   * Callback function triggering when the presentation state changes.
+   */
+  onPresentationStateChange: PropTypes.func,
+  /**
+   * Callback function triggering when the active.
+   */
+  onActiveItemChange: PropTypes.func,
+  /**
+   * The string key linked to the action workspace.
+   */
+  initialActiveItemKey: PropTypes.string.isRequired,
+  /**
+   * Child content to be placed within the main content region.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Whether or not the workspace should initially display as open.
+   */
+  initialIsOpen: PropTypes.bool,
+  /**
+   * The size string value matching the active size option.
+   */
+  initialSize: PropTypes.object,
+  /**
+   * @private
+   * Id string to apply to the workspace
+   */
+  id: PropTypes.string.isRequired,
+  /**
+   * @private
+   * Whether or not the workspace is open
+   */
+  isOpen: PropTypes.bool,
+  /**
+   * @private
+   * Function callback i.e. `onRequest(event)`
+   */
+  onRequestClose: PropTypes.func,
+  /**
+   * @private
+   * Whether or not the workspace is present as an overlay
+   */
+  isPresentedAsOverlay: PropTypes.bool,
+  /**
+   * @private
+   * Numeric scale value ranging from `0.0 - 1.0` as the minimum to maximum size for the workspace
+   */
+  sizeScalar: PropTypes.number,
+  /**
+   * @private
+   * The string representation of the workspace size
+   */
+  activeSize: PropTypes.string,
+  /**
+   * @private
+   * Array of objects containing key/text pairs for the available size options
+   */
+  sizeOptions: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+  })),
+  /**
+   * @private
+   * Function callback i.e. `onRequestSizeChange(size)`
+   */
+  onRequestSizeChange: PropTypes.func,
+};
+
+const ApplicationNavigationWorkspace = ({
+  // consumer props
+  onSizeChange,
+  onPresentationStateChange,
+  onActiveItemChange,
+  initialActiveItemKey,
+  children,
+  // These props are read by the parent to determine the controlled values to pass down.
+  initialIsOpen, // eslint-disable-line no-unused-vars, react/no-unused-prop-types
+  initialSize, // eslint-disable-line no-unused-vars, react/no-unused-prop-types
+
+  // private injected props
+  id,
+  isOpen,
+  onRequestClose,
+  isPresentedAsOverlay,
+  sizeScalar,
+  activeSize,
+  sizeOptions,
+  onRequestSizeChange,
+}) => {
+  const [activeItemKey, setActiveItemKey] = React.useState(initialActiveItemKey);
+
+  React.useEffect(() => {
+    if (onSizeChange && sizeScalar !== undefined) {
+      onSizeChange(sizeScalar);
+    }
+  }, [sizeScalar, onSizeChange]);
+
+  React.useEffect(() => {
+    if (onPresentationStateChange) {
+      onPresentationStateChange(isOpen);
+    }
+  }, [isOpen, onPresentationStateChange]);
+
+  React.useEffect(() => {
+    if (onActiveItemChange) {
+      onActiveItemChange(activeItemKey);
+    }
+  }, [activeItemKey, onActiveItemChange]);
+
+  return (
+    <Workspace
+      id={id}
+      activeItemKey={activeItemKey}
+      onRequestActivate={itemKey => {
+        setActiveItemKey(itemKey);
+      }}
+      activeSize={activeSize}
+      sizeOptions={sizeOptions}
+      onRequestSizeChange={onRequestSizeChange}
+      onRequestDismiss={onRequestClose}
+      dismissButtonIsVisible={isPresentedAsOverlay}
+      isPresentedAsOverlay={isPresentedAsOverlay}
+    >
+      {React.Children.map(children, (child) => (
+        <WorkspaceItem
+          itemKey={child.props.itemKey}
+          label={child.props.label}
+          metaData={child.props.metaData}
+          render={child.props.render}
+        />
+      ))}
+    </Workspace>
+  );
+};
+
+ApplicationNavigationWorkspace.propTypes = propTypes;
+ApplicationNavigationWorkspace.Item = ApplicationNavigationWorkspaceItem;
+
+export default ApplicationNavigationWorkspace;

src/application-navigation/ApplicationNavigationWorkspaceItem.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/* eslint-disable no-unused-vars, react/no-unused-prop-types */
+const propTypes = {
+  /**
+   * Key to match with the activeItemKey to handle the display of selection.
+   */
+  itemKey: PropTypes.string.isRequired,
+  /**
+   * Text to be displayed on the item or as it's aria-label.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Object to be returned in the onRequestActive.
+   */
+  metaData: PropTypes.object,
+  /**
+   * The render block for the workspace item
+   */
+  render: PropTypes.func,
+};
+
+const ApplicationNavigationWorkspaceItem = () => <React.Fragment />;
+
+ApplicationNavigationWorkspaceItem.propTypes = propTypes;
+
+export default ApplicationNavigationWorkspaceItem;

src/application-navigation/index.js

@@ -1,10 +1,23 @@
 import {
-  titleConfigPropType, navigationItemsPropType, extensionItemsPropType, utilityItemsPropType, userConfigPropType,
+  titleConfigPropType,
+  navigationItemsPropType,
+  extensionItemsPropType,
+  utilityItemsPropType,
+  userConfigPropType,
 } from './private/utils/propTypes';
+import ApplicationNavigationActionsContext from './ApplicationNavigationActionsContext';
 import ApplicationNavigation from './ApplicationNavigation';
+import ApplicationNavigationWorkspace from './ApplicationNavigationWorkspace';
+import ApplicationNavigationWorkspaceItem from './ApplicationNavigationWorkspaceItem';
 
 export default ApplicationNavigation;
 export {
-  titleConfigPropType, navigationItemsPropType, extensionItemsPropType, utilityItemsPropType, userConfigPropType,
+  titleConfigPropType,
+  navigationItemsPropType,
+  extensionItemsPropType,
+  utilityItemsPropType,
+  userConfigPropType,
+  ApplicationNavigationActionsContext,
+  ApplicationNavigationWorkspace,
+  ApplicationNavigationWorkspaceItem,
 };
-