Sync main with terra app v2 (#378)

jest.enzymeSetup.js

@@ -2,7 +2,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable object-curly-newline */
 import Enzyme, { mount, render, shallow } from 'enzyme';
-import { mockIntl, mountWithIntl, renderWithIntl, shallowWithIntl } from 'terra-enzyme-intl';
+import { mockIntl, mountWithIntl, renderWithIntl, shallowWithIntl } from '@cerner/terra-enzyme-intl';
 import Adapter from 'enzyme-adapter-react-16';
 
 Enzyme.configure({ adapter: new Adapter() });

package.json

@@ -41,7 +41,7 @@
   "peerDependencies": {
     "react": "16",
     "react-dom": "16",
-    "react-intl": "2"
+    "react-intl": "5"
   },
   "devDependencies": {
     "@babel/cli": "7",
@@ -57,6 +57,7 @@
     "@cerner/package-json-lint-config-terra": "2",
     "@cerner/stylelint-config-terra": "5",
     "@cerner/terra-cli": "1",
+    "@cerner/terra-enzyme-intl": "4",
     "@cerner/terra-functional-testing": "4",
     "@cerner/terra-open-source-scripts": "1",
     "@cerner/webpack-config-terra": "3",
@@ -75,7 +76,6 @@
     "lerna": "6",
     "postcss": "8",
     "stylelint": "15",
-    "terra-enzyme-intl": "3",
     "webpack": "5",
     "webpack-cli": "4",
     "webpack-dev-server": "4",

packages/terra-application-docs/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 ## Unreleased
 
+## 3.1.0 - (June 22, 2022)
+
+* Changed
+  * Minor dependency version bump
+
+## 3.0.1 - (June 8, 2022)
+
+* Changed
+  * Minor dependency bump.
+
+## 3.0.0 - (May 31, 2022)
+
+* Breaking Changes
+  * Dropped react-intl v2-v4 support.
+
+---
+
 ## 2.15.0 - (May 1, 2024)
 
 * Changed

packages/terra-application-docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerner/terra-application-docs",
-  "version": "2.15.0",
+  "version": "3.1.0",
   "description": "Contains documentation for packages in the terra-application monorepo",
   "author": "Cerner Corporation",
   "repository": {
@@ -30,7 +30,7 @@
     "src"
   ],
   "dependencies": {
-    "@cerner/terra-dev-site": "^7.14.0",
+    "@cerner/terra-dev-site": "8",
     "@cerner/terra-docs": "1",
     "classnames": "2",
     "prop-types": "15",
@@ -44,11 +44,8 @@
   "peerDependencies": {
     "react": "16",
     "react-dom": "16",
-    "react-intl": "2 || 3 || 4 || 5",
-    "terra-application": "1"
-  },
-  "devDependencies": {
-    "terra-application": "^1.58.0"
+    "react-intl": "5",
+    "terra-application": "2"
   },
   "scripts": {
     "compile": "babel --root-mode upward src --out-dir lib --copy-files",

packages/terra-application/CHANGELOG.md

@@ -2,6 +2,37 @@
 
 ## Unreleased
 
+* Changed
+  * Updated size explanations for ModalManager managed by DisclosureManagerContext.
+
+* The following changes from v1 are added:
+  * Added `noScroll` prop to remove scroll in powerchart.
+  * Added user action utility button.
+  * Locked `uuid` dependency to `3.4.0`.
+  * Updated `getBrowserLocale` method for IE.
+  * Updated jest snapshots for terra-icon and terra-button changes.
+  * Updated size explanations for ModalManager managed by DisclosureManagerContext.
+
+## 2.1.0 - (June 22, 2022)
+
+* Changed
+  * Updated condition statement added to check `inert` polyfill is required.
+  * Updated `wicg-inert` to latest version.
+
+## 2.0.1 - (June 8, 2022)
+
+* Minor dependency bump.
+
+## 2.0.0 - (May 31, 2022)
+
+* Breaking Changes
+  * Dropped react-intl v2-v4 support.
+  * `customTranslatedMessages` prop removed, thus dropping support for the ability of consumers to provide translations for an unsupported locale.
+  * `contextShape` will not be provided by `ApplicationIntlContext` anymore since `intlShape` is no longer exported by `react-intl`.
+  * `translationsLoadingPlaceholder` prop removed.
+
+---
+
 ## 1.58.0 - (April 23, 2024)
 
 * Added
@@ -17,7 +48,7 @@
 
 ## 1.56.0 - (September 19, 2023)
 
-* Changed
+* Added
  * Added `noScroll` prop to remove scroll in powerchart.
 
 ## 1.56.0-alpha.0 - (September 8, 2023)

packages/terra-application/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terra-application",
-  "version": "1.58.0",
+  "version": "2.1.0",
   "description": "A framework to support application development with Terra components",
   "author": "Cerner Corporation",
   "repository": {
@@ -30,9 +30,12 @@
   ],
   "dependencies": {
     "@cerner/terra-docs": "1",
+    "@formatjs/intl-relativetimeformat": "8",
     "classnames": "2",
     "eventemitter3": "4",
     "focus-trap-react": "6",
+    "intl": "1",
+    "intl-locales-supported": ">=1.8.4 <1.8.12 || ^1.8.13",
     "keycode-js": "3",
     "lodash.debounce": "4",
     "mutationobserver-shim": "<=0.3.3",
@@ -43,7 +46,6 @@
     "terra-action-footer": "2",
     "terra-action-header": "2",
     "terra-avatar": "3",
-    "terra-base": "5",
     "terra-breakpoints": "2",
     "terra-button": "3",
     "terra-collapsible-menu-view": "6",
@@ -69,7 +71,7 @@
   "peerDependencies": {
     "react": "16",
     "react-dom": "16",
-    "react-intl": "2"
+    "react-intl": "5"
   },
   "scripts": {
     "compile": "babel --root-mode upward src --out-dir lib --copy-files",

packages/terra-application/src/application-base/ApplicationBase.jsx

@@ -1,15 +1,15 @@
 /* global TERRA_THEME_CONFIG */
 
 import React, {
-  useRef, useEffect, Suspense, useMemo,
+  useRef, useEffect, useMemo, useState, Suspense,
 } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import Base from 'terra-base';
 import ThemeProvider from 'terra-theme-provider';
 import { ActiveBreakpointProvider } from 'terra-breakpoints';
 import ThemeContextProvider from 'terra-theme-context/lib/ThemeContextProvider';
+import { IntlProvider } from 'react-intl';
+import i18nLoader from './private/i18nLoader';
 
 import ApplicationErrorBoundary from '../application-error-boundary';
 import { ApplicationIntlProvider } from '../application-intl';
@@ -18,8 +18,10 @@ import { ApplicationStatusOverlayProvider } from '../application-status-overlay'
 import { NavigationPromptCheckpoint } from '../navigation-prompt';
 import getBrowserLocale from './private/getBrowserLocale';
 import useTestOverrides from './private/useTestOverrides';
+import Logger from '../utils/logger';
 
 import './private/initializeInert';
+import './baseStyles';
 
 import styles from './ApplicationBase.module.scss';
 
@@ -41,34 +43,10 @@ const propTypes = {
    * If the `locale` prop is not provided, the preferred language from the browser will be used.
    */
   locale: PropTypes.string,
-  /**
-   * Custom translations for the current locale.
-   */
-  customTranslatedMessages: (props, propName, componentName) => {
-    if (!props[propName]) {
-      return null;
-    }
-
-    if (Object.keys(props[propName]).length !== 0 && props.locale === undefined) {
-      return new Error(`Missing locale prop for ${propName} in ${componentName} props`);
-    }
-
-    return null;
-  },
-  /**
-   * The component to render while the translation files are being retrieved.
-   * NOTE: Absolutely no locale-dependent logic should be
-   * utilized in this placeholder.
-   */
-  translationsLoadingPlaceholder: PropTypes.node,
   /**
    * The name of the theme to apply to the application using terra-theme-provider.
    */
   themeName: PropTypes.string,
-  /**
-   * The density of the theme to apply to the application using terra-theme-provider.
-   */
-  themeDensity: PropTypes.string,
   /**
    * By default, the elements rendered by ApplicationBase are fit to the Application's parent using 100% height.
    * If `fitToParentIsDisabled` is provided, the Application will render at its intrinsic content height and
@@ -86,13 +64,13 @@ const propTypes = {
    * When set to true scroll will be disabled. internal prop to be used by Mpages for terra-tabs in  Powerchart.
    */
   noScroll: PropTypes.bool,
-
 };
 
 const ApplicationBase = ({
-  locale, customTranslatedMessages, translationsLoadingPlaceholder, themeName, themeDensity, fitToParentIsDisabled, children, unloadPromptIsDisabled, noScroll,
+  locale, themeName, fitToParentIsDisabled, children, unloadPromptIsDisabled, noScroll,
 }) => {
   const registeredPromptsRef = useRef();
+  const [messages, setMessages] = useState();
 
   useEffect(() => {
     if (unloadPromptIsDisabled) {
@@ -122,27 +100,34 @@ const ApplicationBase = ({
 
   const { localeOverride, themeOverride } = useTestOverrides(); // Allows us to test deployed applications in different locales.
 
-  let density = themeDensity || themeConfig?.density;
-  if (themeName === 'redwood-theme' && !density) {
-    density = 'comfortable';
-  }
+  const finalLocale = localeOverride || locale || browserLocale;
+
+  useEffect(() => {
+    if (finalLocale !== undefined) {
+      i18nLoader(finalLocale).then(translationsModule => setMessages(translationsModule.default)).catch((error) => {
+        // eslint-disable-next-line no-console
+        Logger.error(error);
+        throw error;
+      });
+    }
+  }, [finalLocale]);
 
   const theme = useMemo(() => ({
     // If the theme class name is undefined or an empty string, that indicates we have the root theme and should apply the root theme name.
     name: themeOverride || themeName || rootThemeName,
     className: themeOverride || themeName,
-    density,
-  }), [themeOverride, themeName, density]);
+  }), [themeOverride, themeName]);
+
+  if (messages === undefined) return null;
 
   return (
     <div data-terra-application-base className={cx('application-base', { fill: !fitToParentIsDisabled })}>
-      <ThemeProvider themeName={theme.className} density={theme.density}>
+      <ThemeProvider themeName={themeName}>
         <ThemeContextProvider theme={theme}>
-          <Base
-            customMessages={customTranslatedMessages}
-            throwOnI18nLoadError
-            translationsLoadingPlaceholder={translationsLoadingPlaceholder}
-            locale={localeOverride || locale || browserLocale}
+          <IntlProvider
+            key={finalLocale}
+            locale={finalLocale}
+            messages={messages}
           >
             <ApplicationErrorBoundary>
               <ApplicationIntlProvider>
@@ -163,7 +148,7 @@ const ApplicationBase = ({
                 </ActiveBreakpointProvider>
               </ApplicationIntlProvider>
             </ApplicationErrorBoundary>
-          </Base>
+          </IntlProvider>
         </ThemeContextProvider>
       </ThemeProvider>
     </div>

packages/terra-application/src/application-base/Base.scss

@@ -0,0 +1,39 @@
+// Themes
+@import './clinical-lowlight-theme/Base';
+@import './orion-fusion-theme/Base';
+
+html {
+  background-attachment: var(--terra-application-base-background-attachment);
+  background-color: var(--terra-application-base-background-color, #fff);
+  background-image: var(--terra-application-base-background-image);
+  background-position: var(--terra-application-base-background-position);
+  background-repeat: var(--terra-application-base-background-repeat);
+  background-size: var(--terra-application-base-background-size);
+  // Normalize box-sizing.
+  // More info: https://css-tricks.com/box-sizing/#article-header-id-6
+  box-sizing: border-box;
+  font-family: var(--terra-application-base-font-family, 'Helvetica Neue', Helvetica, Arial, sans-serif);
+  font-size: var(--terra-application-base-font-size, 87.5%);
+  height: var(--terra-application-base-html-height, 100%);
+  margin: var(--terra-application-base-html-margin, 0);
+  text-size-adjust: 100%;
+}
+
+body {
+  color: var(--terra-application-base-color, #1c1f21);
+  font-size: 1rem;
+  height: var(--terra-application-base-body-height, 100%);
+  line-height: var(--terra-application-base-line-height, 1.4285714285714286);
+  margin: var(--terra-application-base-body-margin, 0);
+
+  @media print {
+    background-color: transparent !important;
+    color: #000 !important;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}

packages/terra-application/src/application-base/baseStyles.js

@@ -0,0 +1,11 @@
+import './Base.scss';
+import Logger from '../utils/logger';
+
+// Checks to run when not in production
+if (process.env.NODE_ENV !== 'production') {
+  // Check to ensure dir attribute is set on html element
+  if (!document.documentElement.hasAttribute('dir')) {
+    // eslint-disable-next-line
+    Logger.warn('The html element is missing the dir attribute. For terra directionality based styles to render correctly, add dir="ltr" or dir="rtl" to the html element.');
+  }
+}

packages/terra-application/src/application-base/clinical-lowlight-theme/Base.scss

@@ -0,0 +1,18 @@
+:global {
+  .clinical-lowlight-theme {
+    --terra-application-base-background-attachment: none;
+    --terra-application-base-background-color: #222a2e;
+    --terra-application-base-background-image: none;
+    --terra-application-base-background-position: none;
+    --terra-application-base-background-repeat: none;
+    --terra-application-base-background-size: none;
+    --terra-application-base-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    --terra-application-base-font-size: 87.5%;            // root: 16px, base: 12px
+    --terra-application-base-html-height: 100%;
+    --terra-application-base-html-margin: 0;
+    --terra-application-base-color: #b2b5b6;
+    --terra-application-base-body-height: 100%;
+    --terra-application-base-line-height: 1.4285694285714286;
+    --terra-application-base-body-margin: 0;
+  }
+}