Adding Page component and related files

packages/terra-application-docs/src/terra-dev-site/test/terra-application/primary-navigation-layout/PrimaryNavigationLayout3.jsx

@@ -1,24 +1,39 @@
 import React from 'react';
+import IconPanelRight from 'terra-icon/lib/icon/IconPanelRight';
 
 import ApplicationBase from '@cerner/terra-application/lib/application-base';
 import ApplicationContainer from '@cerner/terra-application/lib/application-container';
 import PrimaryNavigationLayout from '@cerner/terra-application/lib/primary-navigation-layout';
+import LayoutActionsContext from '@cerner/terra-application/lib/shared/LayoutActionsContext';
 
 import TestPage from '../shared/TestPage';
 
 const PrimaryNavigationLayout3 = () => (
   <ApplicationBase locale="en-US">
     <ApplicationContainer>
-      <PrimaryNavigationLayout
-        id="primary-nav-test-3"
-        titleConfig={{
-          title: 'PrimaryNavigationLayout Test 3',
-          subline: 'renderPage content',
+      <LayoutActionsContext.Provider
+        value={{
+          actions: [{
+            key: '1',
+            label: 'Layout Action 1',
+            onSelect: () => {
+              console.log('layout action 1'); // eslint-disable-line no-console
+            },
+            icon: <IconPanelRight />,
+          }],
         }}
-        renderPage={() => (
-          <TestPage index={0} testLabel="Test Page" />
-        )}
-      />
+      >
+        <PrimaryNavigationLayout
+          id="primary-nav-test-3"
+          titleConfig={{
+            title: 'PrimaryNavigationLayout Test 3',
+            subline: 'renderPage content',
+          }}
+          renderPage={() => (
+            <TestPage index={1} testLabel="Test Page" />
+          )}
+        />
+      </LayoutActionsContext.Provider>
     </ApplicationContainer>
   </ApplicationBase>
 );

packages/terra-application-docs/src/terra-dev-site/test/terra-application/primary-navigation-layout/PrimaryNavigationLayout4.jsx

@@ -33,21 +33,21 @@ const PrimaryNavigationLayout1 = () => {
             navigationKey="1"
             label="Nav 1"
             renderPage={() => (
-              <TestPage index={0} testLabel="Nav 1 Test Page" />
+              <TestPage index={1} testLabel="Nav 1 Test Page" />
             )}
           />
           <NavigationItem
             navigationKey="2"
             label="Nav 2"
             renderPage={() => (
-              <TestPage index={0} testLabel="Nav 2 Test Page" />
+              <TestPage index={1} testLabel="Nav 2 Test Page" />
             )}
           />
           <NavigationItem
             navigationKey="3"
             label="Nav 3"
             renderPage={() => (
-              <TestPage index={0} testLabel="Nav 3 Test Page" />
+              <TestPage index={1} testLabel="Nav 3 Test Page" />
             )}
           />
         </PrimaryNavigationLayout>

packages/terra-application-docs/src/terra-dev-site/test/terra-application/shared/TestPage.jsx

@@ -1,40 +1,175 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import usePagePortal from '@cerner/terra-application/lib/page-container/usePagePortal';
+import classNames from 'classnames/bind';
+import Button from 'terra-button';
+import IconSearch from 'terra-icon/lib/icon/IconSearch';
+import IconAdd from 'terra-icon/lib/icon/IconAdd';
+import IconPerson from 'terra-icon/lib/icon/IconPerson';
+import IconEdit from 'terra-icon/lib/icon/IconEdit';
+import IconAttachment from 'terra-icon/lib/icon/IconAttachment';
 
+import NavigationPrompt from '@cerner/terra-application/lib/navigation-prompt';
+import NotificationBanner from '@cerner/terra-application/lib/notification-banner';
+import Page from '@cerner/terra-application/lib/page';
+
+import styles from './TestPage.module.scss';
+
+const cx = classNames.bind(styles);
+
+/* eslint-disable no-console */
 const TestPage = ({
   index, testLabel, onRequestDismiss,
 }) => {
   const label = `Page ${index}`;
-  const metaData = { data: index };
-
   const [showChildPage, setShowChildPage] = React.useState(false);
-  const { PagePortal } = usePagePortal({
-    label,
-    metaData,
-  });
+  const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false);
+  const [showToolbar, setShowToolbar] = React.useState(false);
+  const [showHazardHigh, setShowHazardHigh] = React.useState(false);
+  const [showHazardMedium, setShowHazardMedium] = React.useState(false);
+  const [showHazardLow, setShowHazardLow] = React.useState(false);
+  const [showLongText, setShowLongText] = React.useState(false);
+
+  const metaData = React.useRef({ test: index });
 
   return (
-    <PagePortal>
-      <div>{testLabel}</div>
-      {onRequestDismiss ? <button type="button" onClick={onRequestDismiss}>Back</button> : undefined}
-      <button type="button" onClick={() => { setShowChildPage(true); }}>Show Child</button>
-      <p>
-        Label:
-        {' '}
-        <span>{label}</span>
-      </p>
-      <p>
-        Meta:
-        {' '}
-        <span>{JSON.stringify(metaData)}</span>
-      </p>
-      {showChildPage ? (
-        <TestPage testLabel={testLabel} index={index + 1} onRequestDismiss={() => { setShowChildPage(false); }} />
+    <Page
+      label={showLongText ? (
+        `${label} With A Lot Of Extra Text Test Wrapping Scenarios Within the Page Header - Mississippi, hydrocodone/acetaminophen, OnabotulinumtoxinA, Talimogene Laherparepvec`
+      ) : label}
+      metaData={metaData.current}
+      onRequestClose={onRequestDismiss}
+      actions={(
+        <Page.Actions>
+          <Page.Action
+            label="Action 1"
+            onSelect={() => { console.log('action-1'); }}
+            icon={<IconSearch />}
+          />
+          {index % 2 === 0 && (
+            <Page.Action
+              label="Action 2 With A Really Long Label To See How It Wraps"
+              onSelect={() => { console.log('action-2'); }}
+              icon={<IconAdd />}
+            />
+          )}
+          {index % 2 === 0 && (
+            <Page.Action
+              label="Disabled Action"
+              icon={<IconPerson />}
+            />
+          )}
+        </Page.Actions>
+      )}
+      toolbar={showToolbar ? (
+        <Page.Toolbar>
+          <Button
+            isIconOnly
+            variant="utility"
+            text="Edit"
+            icon={<IconEdit />}
+            onClick={() => { console.log('edit'); }}
+          />
+          <Button
+            text="Attach"
+            icon={<IconAttachment />}
+            onClick={() => { console.log('attach'); }}
+          />
+        </Page.Toolbar>
       ) : undefined}
-    </PagePortal>
+    >
+      <div className={cx('layout')}>
+        <p>{testLabel}</p>
+        <button type="button" onClick={() => { setShowChildPage(true); }}>Show Child</button>
+        <p>
+          Label:
+          {' '}
+          <span>{label}</span>
+        </p>
+        <p>
+          Meta:
+          {' '}
+          <span>{JSON.stringify(metaData.current)}</span>
+        </p>
+        <p>
+          Has Unsaved Changes:
+          {' '}
+          {hasUnsavedChanges ? 'true' : 'false'}
+          {' '}
+          <button type="button" onClick={() => setHasUnsavedChanges(state => !state)}>Toggle</button>
+        </p>
+        {hasUnsavedChanges ? <NavigationPrompt description={label} /> : undefined}
+        <p>
+          Show Toolbar:
+          {' '}
+          {showToolbar ? 'true' : 'false'}
+          {' '}
+          <button type="button" onClick={() => setShowToolbar(state => !state)}>Toggle</button>
+        </p>
+        <p>
+          Show High Hazard Banner:
+          {' '}
+          {showHazardHigh ? 'true' : 'false'}
+          {' '}
+          <button type="button" onClick={() => setShowHazardHigh(state => !state)}>Toggle</button>
+        </p>
+        <p>
+          Show Medium Hazard Banner:
+          {' '}
+          {showHazardMedium ? 'true' : 'false'}
+          {' '}
+          <button type="button" onClick={() => setShowHazardMedium(state => !state)}>Toggle</button>
+        </p>
+        <p>
+          Show Low Hazard Banner:
+          {' '}
+          {showHazardLow ? 'true' : 'false'}
+          {' '}
+          <button type="button" onClick={() => setShowHazardLow(state => !state)}>Toggle</button>
+        </p>
+        <p>
+          Show Long Label Text:
+          {' '}
+          {showLongText ? 'true' : 'false'}
+          {' '}
+          <button type="button" onClick={() => setShowLongText(state => !state)}>Toggle</button>
+        </p>
+        {showHazardHigh && (
+          <NotificationBanner
+            variant="hazard-high"
+            id="test-page-hazard-high-banner"
+            description="You need to look at something"
+            bannerAction={{
+              text: 'Resolve',
+            }}
+          />
+        )}
+        {showHazardMedium && (
+          <NotificationBanner
+            variant="hazard-medium"
+            id="test-page-hazard-medium-banner"
+            description="You should probably look at something"
+          />
+        )}
+        {showHazardLow && (
+          <NotificationBanner
+            variant="hazard-low"
+            id="test-page-hazard-low-banner"
+            description="You might want to look at something"
+            onRequestClose={() => { setShowHazardLow(false); }}
+          />
+        )}
+        {showChildPage ? (
+          <TestPage
+            testLabel={testLabel}
+            index={index + 1}
+            onRequestDismiss={() => { setShowChildPage(false); }}
+          />
+        ) : undefined}
+      </div>
+    </Page>
   );
 };
+/* eslint-enable no-console */
 
 TestPage.propTypes = {
   index: PropTypes.number,

packages/terra-application-docs/src/terra-dev-site/test/terra-application/shared/TestPage.module.scss

@@ -0,0 +1,7 @@
+:local {
+  .layout {
+    height: 100%;
+    overflow: auto;
+    padding: 1rem;
+  }
+}

packages/terra-application/package.json

@@ -77,6 +77,7 @@
     "terra-slide-panel-manager": "^5.19.0",
     "terra-status-view": "^4.10.0",
     "terra-theme-context": "^1.0.0",
+    "terra-toolbar": "^1.22.0",
     "terra-visually-hidden-text": "^2.30.0",
     "uuid": "^3.0.0",
     "wicg-inert": "^3.0.2"

packages/terra-application/src/action-menu/ActionMenuCheckbox.module.scss

@@ -26,7 +26,7 @@
     flex: 0 0 auto;
     height: var(--terra-application-action-menu-checkbox-icon-checkbox-height, 0.8571rem);
     margin-right: var(--terra-application-action-menu-checkbox-icon-checkbox-margin-right, 0.4286rem);
-    margin-top: var(--terra-application-action-menu-radio-icon-checkbox-margin-top, 0.1429rem);
+    margin-top: var(--terra-application-action-menu-checkbox-icon-checkbox-margin-top, 0.25rem);
     position: relative;
     width: var(--terra-application-action-menu-checkbox-icon-checkbox-width, 0.8571rem);
 

packages/terra-application/src/action-menu/ActionMenuItem.module.scss

@@ -3,7 +3,7 @@
 
 :local {
   .action-menu-item {
-    align-items: center;
+    align-items: start;
     color: var(--terra-application-action-menu-item-color, #222a2e);
     cursor: pointer;
     display: flex;
@@ -14,7 +14,7 @@
     padding-right: var(--terra-application-action-menu-item-padding-right, 0.7143rem);
     padding-top: var(--terra-application-action-menu-item-padding-top, 0.3571rem);
     position: relative;
-    vertical-align: center;
+    vertical-align: middle;
 
     &:last-child {
       border-bottom: 0;
@@ -26,10 +26,11 @@
   }
 
   .icon {
+    color: var(--terra-application-action-menu-item-icon-color, #007cc3);
     flex: 0 0 auto;
     height: var(--terra-application-action-menu-item-icon-height, 0.8571rem);
     margin-right: var(--terra-application-action-menu-item-icon-margin-right, 0.4286rem);
-    margin-top: var(--terra-application-action-menu-item-icon-margin-top, 0.1429rem);
+    margin-top: var(--terra-application-action-menu-item-icon-margin-top, 0.25rem);
     position: relative;
     width: var(--terra-application-action-menu-item-icon-width, 0.8571rem);
 
@@ -52,6 +53,10 @@
   .is-disabled {
     color: var(--terra-application-action-menu-item-is-disabled-color, #ccc);
     cursor: default;
+
+    .icon {
+      opacity: 0.3;
+    }
   }
 
   .is-actionable {

packages/terra-application/src/action-menu/ActionMenuLink.module.scss

@@ -3,7 +3,7 @@
 
 :local {
   .action-menu-link {
-    align-items: center;
+    align-items: start;
     color: var(--terra-application-action-menu-link-color, #222a2e);
     cursor: pointer;
     display: flex;
@@ -14,7 +14,7 @@
     padding-right: var(--terra-application-action-menu-link-padding-right, 0.7143rem);
     padding-top: var(--terra-application-action-menu-link-padding-top, 0.3571rem);
     position: relative;
-    vertical-align: center;
+    vertical-align: middle;
 
     &:last-child {
       border-bottom: 0;
@@ -26,10 +26,11 @@
   }
 
   .icon {
+    color: var(--terra-application-action-menu-link-icon-color, #007cc3);
     flex: 0 0 auto;
     height: var(--terra-application-action-menu-link-icon-height, 0.8571rem);
     margin-right: var(--terra-application-action-menu-link-icon-margin-right, 0.4286rem);
-    margin-top: var(--terra-application-action-menu-link-icon-margin-top, 0.1429rem);
+    margin-top: var(--terra-application-action-menu-link-icon-margin-top, 0.25rem);
     position: relative;
     width: var(--terra-application-action-menu-link-icon-width, 0.8571rem);
 
@@ -52,6 +53,10 @@
   .is-disabled {
     color: var(--terra-application-action-menu-link-is-disabled-color, #ccc);
     cursor: default;
+
+    .icon {
+      opacity: 0.3;
+    }
   }
 
   .is-actionable {