[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

@@ -2,6 +2,7 @@ import React, {
   useRef, useCallback, Suspense,
 } from 'react';
 import PropTypes from 'prop-types';
+import uuidv4 from 'uuid/v4';
 import TerraApplicationNavigation from './private/ApplicationNavigation';
 import {
   titleConfigPropType, navigationItemsPropType, extensionItemsPropType, utilityItemsPropType, userConfigPropType,
@@ -12,6 +13,7 @@ import ApplicationLoadingOverlay, { ApplicationLoadingOverlayProvider } from '..
 import { ApplicationStatusOverlayProvider } from '../application-status-overlay';
 import { NavigationPromptCheckpoint, navigationPromptResolutionOptionsShape, getUnsavedChangesPromptOptions } from '../navigation-prompt';
 import { ApplicationIntlContext } from '../application-intl';
+import ApplicationNavigationWorkspace from './private/workspace-layout/ApplicationNavigationWorkspace';
 
 const propTypes = {
   /**
@@ -44,6 +46,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 +122,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 ApplicationNavigationWorkspaceItems.
+   */
+  workspace: PropTypes.element,
 };
 
 const ApplicationNavigation = ({
@@ -125,6 +135,7 @@ const ApplicationNavigation = ({
   disablePromptsForNavigationItems,
   extensionItems,
   hero,
+  id,
   navigationItems,
   navigationPromptResolutionOptions,
   notifications,
@@ -138,10 +149,11 @@ const ApplicationNavigation = ({
   titleConfig,
   userConfig,
   utilityItems,
+  workspace,
 }) => {
   const applicationIntl = React.useContext(ApplicationIntlContext);
-
   const navigationPromptCheckpointRef = useRef();
+  const idRef = React.useRef(uuidv4());
 
   const onSelectNavigationItem = useCallback((selectedItemKey) => {
     if (disablePromptsForNavigationItems) {
@@ -167,6 +179,7 @@ const ApplicationNavigation = ({
 
   return (
     <TerraApplicationNavigation
+      id={id || idRef.current}
       hero={hero}
       notifications={notifications}
       titleConfig={titleConfig}
@@ -182,6 +195,7 @@ const ApplicationNavigation = ({
       onSelectHelp={onSelectHelp}
       onSelectLogout={propOnSelectLogout && onSelectLogout}
       onDrawerMenuStateChange={onDrawerMenuStateChange}
+      workspace={workspace}
     >
       <ApplicationLoadingOverlayProvider>
         <ApplicationStatusOverlayProvider>
@@ -201,5 +215,6 @@ const ApplicationNavigation = ({
 };
 
 ApplicationNavigation.propTypes = propTypes;
+ApplicationNavigation.Workspace = ApplicationNavigationWorkspace;
 
 export default ApplicationNavigation;

src/application-navigation/index.js

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

src/application-navigation/private/ApplicationNavigation.jsx

@@ -17,6 +17,7 @@ import { shouldRenderCompactNavigation } from './utils/helpers';
 import {
   titleConfigPropType, userConfigPropType, navigationItemsPropType, extensionItemsPropType, utilityItemsPropType,
 } from './utils/propTypes';
+import WorkspaceLayout from './workspace-layout/WorkspaceLayout';
 
 import styles from './ApplicationNavigation.module.scss';
 
@@ -108,6 +109,10 @@ const propTypes = {
    * A collection of child elements to render within the ApplicationNavigation body.
    */
   children: PropTypes.node,
+  /**
+   * An ApplicationNavigationWorkspace element and it's associated ApplicationNavigationWorkspaceItems.
+   */
+  workspace: PropTypes.element,
 };
 
 const defaultProps = {
@@ -134,6 +139,7 @@ const ApplicationNavigation = ({
   onSelectUtilityItem,
   notifications,
   children,
+  workspace,
 }) => {
   const drawerMenuRef = useRef();
   const contentLayoutRef = useRef();
@@ -145,9 +151,11 @@ const ApplicationNavigation = ({
   const drawerMenuIsOpenRef = useRef(false);
   const closeMenuCallbackRef = useRef();
   const renderedNavItemKeyRef = useRef(activeNavigationItemKey);
+  const skipToWorkspaceActionRef = useRef();
 
   const [drawerMenuIsOpen, setDrawerMenuIsOpen] = useState(false);
   const [popupMenuIsOpen, setPopupMenuIsOpen] = useState(false);
+  const [renderSkipToWorkspace, setRenderSkipToWorkspace] = useState(false);
 
   const closeMenuEvent = 'terra-application-navigation.dismiss-menu';
 
@@ -273,6 +281,19 @@ const ApplicationNavigation = ({
     );
   }
 
+  function createWorkspaceAction() {
+    let skipToAction;
+    if (renderSkipToWorkspace) {
+      skipToAction = () => {
+        if (!skipToWorkspaceActionRef.current) {
+          return;
+        }
+        skipToWorkspaceActionRef.current();
+      };
+    }
+    return skipToAction;
+  }
+
   function renderCompactHeader() {
     return (
       <CompactHeader
@@ -295,6 +316,7 @@ const ApplicationNavigation = ({
         onSelectHelp={onSelectHelp}
         onSelectLogout={onSelectLogout}
         id={id}
+        skipToWorkspaceAction={createWorkspaceAction()}
       />
     );
   }
@@ -321,6 +343,7 @@ const ApplicationNavigation = ({
         onSelectSettings={onSelectSettings}
         onSelectHelp={onSelectHelp}
         onSelectLogout={onSelectLogout}
+        skipToWorkspaceAction={createWorkspaceAction()}
       />
     );
   }
@@ -442,6 +465,35 @@ const ApplicationNavigation = ({
   const theme = React.useContext(ThemeContext);
   const appNavClassNames = cx('application-navigation', theme.className);
 
+  const renderMain = () => {
+    const skipToCallback = action => {
+      skipToWorkspaceActionRef.current = action;
+
+      if (action && !renderSkipToWorkspace) {
+        setRenderSkipToWorkspace(true);
+      }
+    };
+
+    return (
+      <WorkspaceLayout
+        id={`${id}-workspace-layout`}
+        workspace={workspace}
+        skipToCallback={skipToCallback}
+      >
+        <main
+          ref={mainContainerRef}
+          tabIndex="-1"
+          role="main"
+          className={cx('main-container')}
+          aria-labelledby={hiddenMainTitle ? 'main-inner-title' : null}
+        >
+          {hiddenMainTitle}
+          {children}
+        </main>
+      </WorkspaceLayout>
+    );
+  };
+
   return (
     <div className={appNavClassNames}>
       <div
@@ -457,16 +509,7 @@ const ApplicationNavigation = ({
         className={cx('content-layout', { 'drawer-menu-is-open': drawerMenuIsOpen })}
       >
         {shouldRenderCompactNavigation(activeBreakpoint) ? renderCompactHeader() : renderHeader()}
-        <main
-          ref={mainContainerRef}
-          tabIndex="-1"
-          role="main"
-          className={cx('main-container')}
-          aria-labelledby={hiddenMainTitle ? 'main-inner-title' : null}
-        >
-          {hiddenMainTitle}
-          {children}
-        </main>
+        {renderMain()}
         <Overlay
           className={cx('overlay')}
           isOpen={drawerMenuIsOpen}

src/application-navigation/private/clinical-lowlight-theme/ResizeHandle.module.scss

@@ -0,0 +1,6 @@
+:local {
+  .clinical-lowlight-theme {
+    --terra-application-resize-handle-hover-background-color: rgba(34, 42, 46, 0.6);
+    --terra-application-resize-handle-dragging-background-color: rgba(34, 42, 46, 1);
+  }
+}

src/application-navigation/private/clinical-lowlight-theme/WorkspaceLayout.module.scss

@@ -0,0 +1,5 @@
+:local {
+  .clinical-lowlight-theme {
+    --terra-application-workspace-layout-workspace-overlay-background-color: rgba(0, 0, 0, 0.3);
+  }
+}

src/application-navigation/private/header/_CompactHeader.jsx

@@ -121,6 +121,10 @@ const propTypes = {
    * A configuration object with information pertaining to the application's user.
    */
   userConfig: userConfigPropType,
+  /**
+   * Action to tie to the skipToLink for workspace.
+   */
+  skipToWorkspaceAction: PropTypes.func,
 };
 
 const defaultProps = {
@@ -169,6 +173,7 @@ const CompactHeader = ({
   intl,
   hero,
   userConfig,
+  skipToWorkspaceAction,
 }) => {
   const [navigationIsOpen, setNavigationIsOpen] = useState(false);
   const [utilitiesIsOpen, setUtilitiesIsOpen] = useState(false);
@@ -333,11 +338,24 @@ const CompactHeader = ({
     );
   }
 
+  function renderSkipToWorkspace() {
+    if (!skipToWorkspaceAction) {
+      return undefined;
+    }
+
+    return (
+      <button type="button" role="link" onClick={skipToWorkspaceAction} className={cx('skip-content-button')}>
+        {intl.formatMessage({ id: 'terraApplication.workspace.skipToLabel' })}
+      </button>
+    );
+  }
+
   return (
     <header role="banner" className={cx('compact-header')}>
       <button type="button" role="link" onClick={onSelectSkipToContent} className={cx('skip-content-button')}>
         {intl.formatMessage({ id: 'terraApplication.navigation.header.skipToContentTitle' })}
       </button>
+      {renderSkipToWorkspace()}
       {renderMenuButton()}
       <div className={cx('title-container')}>
         {renderTitle()}

src/application-navigation/private/header/_Header.jsx

@@ -102,6 +102,10 @@ const propTypes = {
    * If `onSelectLogout` is not provided, the Logout action button will not be rendered.
    */
   onSelectLogout: PropTypes.func,
+  /**
+   * Action to tie to the skipToLink for workspace.
+   */
+  skipToWorkspaceAction: PropTypes.func,
 };
 
 const defaultProps = {
@@ -129,6 +133,7 @@ const Header = ({
   onSelectSettings,
   onSelectHelp,
   onSelectLogout,
+  skipToWorkspaceAction,
 }) => {
   function renderTitle() {
     if (!titleConfig) {
@@ -198,11 +203,24 @@ const Header = ({
     );
   }
 
+  function renderSkipToWorkspace() {
+    if (!skipToWorkspaceAction) {
+      return undefined;
+    }
+
+    return (
+      <button type="button" role="link" onClick={skipToWorkspaceAction} className={cx('skip-content-button')}>
+        {intl.formatMessage({ id: 'terraApplication.workspace.skipToLabel' })}
+      </button>
+    );
+  }
+
   return (
     <header role="banner" className={cx('header')}>
       <button type="button" role="link" onClick={onSelectSkipToContent} className={cx('skip-content-button')}>
         {intl.formatMessage({ id: 'terraApplication.navigation.header.skipToContentTitle' })}
       </button>
+      {renderSkipToWorkspace()}
       <div className={cx('title-container')}>
         {renderTitle()}
       </div>

src/application-navigation/private/orion-fusion-theme/ResizeHandle.module.scss

@@ -0,0 +1,6 @@
+:local {
+  .orion-fusion-theme {
+    --terra-application-resize-handle-hover-background-color: rgba(34, 42, 46, 0.6);
+    --terra-application-resize-handle-dragging-background-color: rgba(34, 42, 46, 1);
+  }
+}

src/application-navigation/private/orion-fusion-theme/WorkspaceLayout.module.scss

@@ -0,0 +1,5 @@
+:local {
+  .orion-fusion-theme {
+    --terra-application-workspace-layout-workspace-overlay-background-color: rgba(0, 0, 0, 0.3);
+  }
+}