GithubHelp home page GithubHelp logo

cerner / terra-framework Goto Github PK

View Code? Open in Web Editor NEW
66.0 31.0 72.0 799.44 MB

Terra framework houses composed and higher order react components to help developers quickly build out new applications.

Home Page: http://terra-ui.com

License: Apache License 2.0

JavaScript 79.67% Dockerfile 0.01% SCSS 12.60% MDX 7.72%
react monorepo react-components application-framework hacktoberfest

terra-framework's Introduction

Terra Framework

Cerner OSS License Build Status devDependencies status lerna

Packages

Versioning

When a component reaches v1.0.0., it is considered to be stable and will follow SemVer for versioning.

  1. MAJOR versions represent breaking changes
  2. MINOR versions represent added functionality in a backwards-compatible manner
  3. PATCH versions represent backwards-compatible bug fixes

Consult the component CHANGELOGs, related issues, and PRs for more information.

We view the React.js props API of our components as our main public API. We use this to guide us when versioning components.

Prior to components reaching v1.0.0, a component is considered to be in a beta stage. Components in beta stage may include breaking changes, new features, and bug fixes all within v0.x.x releases.

Status

Stable Beta Deprecated

Terra Package Version Status Dependencies
terra-abstract-modal NPM version Stable terra-abstract-modal
terra-aggregator NPM version Stable terra-aggregator
terra-application-header-layout NPM version Stable terra-application-header-layout
terra-application-layout NPM version Stable terra-application-layout
terra-application-links NPM version Stable terra-application-links
terra-application-menu-layout NPM version Stable terra-application-menu-layout
terra-application-name NPM version Stable terra-application-name
terra-application-navigation NPM version Stable terra-application-navigation
terra-application-utility NPM version Stable terra-application-utility
terra-brand-footer NPM version Stable terra-brand-footer
terra-collapsible-menu-view NPM version Stable terra-collapsible-menu-view
terra-date-picker NPM version Stable terra-date-picker
terra-date-time-picker NPM version Stable terra-date-time-picker
terra-dialog-modal NPM version Deprecated terra-dialog-modal
terra-disclosure-manager NPM version Stable terra-disclosure-manager
terra-embedded-content-consumer NPM version Stable terra-embedded-content-consumer
terra-form-validation NPM version Stable terra-form-validation
terra-hookshot NPM version Stable terra-hookshot
terra-infinite-list NPM version Deprecated terra-infinite-list
terra-layout NPM version Stable terra-layout
terra-menu NPM version Stable terra-menu
terra-modal-manager NPM version Stable terra-modal-manager
terra-navigation-layout NPM version Stable terra-navigation-layout
terra-navigation-prompt NPM version Stable terra-navigation-prompt
terra-navigation-side-menu NPM version Stable terra-navigation-side-menu
terra-notification-dialog NPM version Stable terra-notification-dialog
terra-popup NPM version Stable terra-popup
terra-slide-group NPM version Stable terra-slide-group
terra-slide-panel NPM version Stable terra-slide-panel
terra-slide-panel-manager NPM version Stable terra-slide-panel-manager
terra-tabs NPM version Stable terra-tabs
terra-theme-provider NPM version Stable terra-theme-provider
terra-time-input NPM version Stable terra-time-input

Deprecated

Terra Package Version Status
terra-app-delegate NPM version Deprecated

Supported Browsers

Browser Version
Chrome & Chrome for Android Current
Edge Current
Firefox Current
Internet Explorer 10 & 11
Safari & Mobile Safari Current

Internationalization (I18n)

Please review Terra's Internationalization documentation for more information. Included are directions on consumption and how internationalization is setup.

Packages Requiring I18n

Contributing

Please read through our contributing guidelines. Included are directions for issue reporting and pull requests.

Local Development

  1. Install docker https://www.docker.com/ to run browser tests.
  2. Install dependencies and run tests.
npm install
npm run test

Local Development using Docker (Dev Containers)

  1. Install Rancher or Docker.
    • Rancher is free and open-source and is highly recommended whereas Docker may require a license for use.
  2. Install Microsoft VS Code.
  3. Install the Dev Container extension.
    • Navigate to View -> Extension -> Search for and install Dev Containers (or "ms-vscode-remote.remote-containers")
    • More information on Dev Containers
  4. Build the dev container:
    • (Option 1) - Opening local workspace in dev container
      • Clone the repository (or fork) locally and open the project in Visual Studio Code
      • Navigate to View -> Command Palette and run Dev Containers: Open Workspace in Container
    • (Option 2) - Recommended for Windows for hot-reloading to work during development and improved performance: Creating the dev container using dev volumes (for more information and guidance, see the Official Guide)
      • If you have git setup and have global config file ~/.gitconfig locally, these settings should automatically be transferred to the dev container
      • Navigate to View -> Command Palette and run Dev Containers: Clone Repository in Container Volume
      • Paste the GitHub URL of this repository (or fork)
      • VS Code will now reload the workspace and create/start the dev container and volume
      • Please note: changes made using this option will only update files in the Docker volume. It is recommended to commit changes often in case the volume is deleted or dev container gets removed.
  5. You're now running in a dev container. Use the terminal of the dev container in Visual Studio Code to issue any npm or bash commands.
  6. Before running any WDIO tests, make sure to perform the following steps:
    • Open a new terminal (outside the dev container) and navigate to ".devcontainer/" path in your repository.
    • Execute the command "docker compose -f docker-compose-wdio.yml up". Selenium hub should spin up. Leave this running in the background. If you see errors saying "container name already exists", run "docker container prune" command followed by pressing "y" to clear up any unused containers and try running the previous command again.
    • You can now run npm run test:docker or npm run wdio:docker commands to run WDIO tests from inside the Dev Container.
    • NOTE: Optionally, if you want to run other WDIO commands in the dev container, you can also edit the root package.json file WDIO scripts to include --disable-selenium-service=true flag. This will disable the selenium service from spinning up again. For example:
      "scripts": {
       "wdio:fusion": "terra wdio --disable-selenium-service=true --themes orion-fusion-theme",
       }
    • If any of the compose files were to be changed, you must refresh the docker container by deleting the corresponding existing docker images, then running the following command:
        docker compose -f <changed compose file name>.yml up
  7. To terminate a dev container:
    • Use command line or Rancher/Docker Desktop OR
    • Using Visual Studio Code
      • Select the Remote Explorer icon in the Activity Bar or View -> Command Palette and run Remote Explorer: Focus on Containers View
      • Locate the terra-framework_devcontainer or currently running dev container under "Dev Containers"
      • Right click and select Stop Container and close the workspace
        • You can also select Rebuild Container to restart the dev container
  8. To reopen a dev container:
    • Existing local workspace (for Option 1)
      • Open the project in Visual Studio Code
      • Ensure the workspace contains the .devcontainer folder
      • Navigate to View -> Command Palette and run Dev Containers: Open Workspace in Container
    • Isolated dev container volume (for Option 2)
      • Open Visual Studio Code
      • Use the Remote Explorer icon in the Activity Bar or View -> Command Palette and run Remote Explorer: Focus on Containers View to view containers
      • Locate the terra-framework_devcontainer under "Dev Containers"
      • Hover over the dev container and click the Folder icon labelled Open Folder in Container or by right clicking and selecting Open Folder in Container

LICENSE

Copyright 2017 - 2024 Cerner Innovation, Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

ย ย ย ย http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

terra-framework's People

Contributors

adoroshk avatar amichaelparker avatar artpark avatar ashishkumbhare116 avatar avinashg1994 avatar benbcai avatar benboersma avatar bjankord avatar cm9361 avatar dkasper-was-taken avatar emilyrohrbough avatar kenk2 avatar lokesh-0813 avatar madankumargovindaswamy avatar mjhenkes avatar nikhitasharma avatar nramamurth avatar pk106552 avatar pranav300 avatar rm012685 avatar ryanthemanuel avatar saket2403 avatar sdadn avatar smason0 avatar sugan2416 avatar supreethmr avatar sycombs avatar tbiethman avatar xenoworf avatar yuderekyu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

terra-framework's Issues

[terra-navigation-side-menu] Update chevrons for rtl support

Issue Description

The chevrons inside NavigationSideMenu items are not flipped for the 'rtl' direction.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

The chevron should be rotated when the direction is changed.

Current Behavior

The chevron remains right-facing when 'rtl' direction is enabled.

Create template component for Application Menu

Issue Description

Create template component for Application Menu

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Template should provide buckets to place content into, to be used with the navigation layout.

Translations for Utilities

Issue Description

Utilities needs translations for various aria-labels.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

fi-FI translations for Utilities

Issue Description

fi-FI translations are needed for various aria-labels within Utilities.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Migrate components from terra-core repo

Issue Description

To help reduce test times in terra-core repo, we'll be moving some of the packages into the terra-framework repo.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

  • The following packages are moved from terra-core to terra-framework:
  • terra-app-delegate
  • terra-abstact-modal
  • terra-date-picker
  • terra-date-time-picker
  • terra-collapsbile-menu
  • terra-embedded-content-consumer
  • terra-hookshot
  • terra-menu
  • terra-modal-manager
  • terra-popup
  • terra-slide-group
  • terra-slide-panel
  • terra-theme-provider
  • terra-time-input
  • terra-tabs
  • WDIO tests are written for these packages
  • The packages are updated to the new directory structure for terra-dev-site.

Create Application Header, implementing the layout and subcomponents

Issue Description

Create Application Header component that implements:

  • terra-application-header-layout
  • terra-application-header-name
  • terra-application-header-utilities
  • terra-tabs

This is where the background theming will occur.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

[Framework] Breadcrumb back-style navigation pattern needs to be built into a mobile header component

Issue Description

The userโ€™s mental model of navigation on mobile is different than that of a desktop experience. As the user navigates into different sections of the application on mobile, having a clear method of navigating back and forth is vital to support a consistent wayfinding experience.

Issue Type

  • New Feature
  • Enhancement
  • Usability Concern
  • Bug
  • Other

Expected Behavior

The header throughout the mobile experience should provide breadcrumbing-like back navigation and should not be required to support access to high-level nav items at all times.

Current Behavior

High-level nav items are accessible at all times and causing the stacking of navigational bars. This limits the available real estate for content and causes usability issues.

Create "notification dialog" component

Issue Description

Create a prompt type component that can be presented over the top of all z-index. Built upon terra-modal, but outside of the modal manager stack. A common component to be used for confirmation/acceptance criteria style dialogs.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

The dialog should present above the highest z-indexes of modal's 6000 and popup's 7000. A common visual pattern and size should be used for this component, and content should be limited, as we are placing a component outside of visual stacks. This needs design input as to what the limited content should be.

Datepicker add `required` prop

Issue Description

Add a required prop to datepicker to match the forms api.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Datepicker component includes required prop.

Current Behavior

Datepicker does not include required prop.

Create component Aggregator to maintain state and focus across component groups

Issue Description

Let's start with a definition.

"microcontainer" - a small, purposeful component with its own state, data sources, interactions with an application framework, etc.

Microcontainers tend to be combined or presented side-by-side to build workflows or information dashboards. This is fine as long as these microcontainers are isolated from one another. However, issues arise when actions within one microcontainer impact another.

For example, given Microcontainers A and B (M-A and M-B), if a list selection within M-A needs to perform a list deselection within M-B, how does M-B get notified that it needs to update? Or if M-B is in the middle of a complex workflow and cannot perform its deselection without losing user data, how can M-B gracefully deny the intrusion without leaving both components in a half-formed state?

Many of these microcontainers also make use of shared disclosure mechanisms (historically SlidePanels) to present further information. Actions within that disclosure can impact the microcontainer. If a selection in the microcontainer was made to present the disclosure, does closing the disclosure perform a deselection? If the disclosure is managed by a parent component and shared amongst various microcontainers, how does that microcontainer even know that the disclosure was closed?

To help answer these questions, we're going to develop an Aggregator component (final name TBD) that will facilitate communication between its child microcontainers.

Example (pardon the weird flashing with the headers, CloudApp must know that my trial period is over):
Example

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Tech design to follow.

Advice on appropriate use of terra-modal-manager in a container with display type as 'flex'

Issue Description

A terra-button, with block styling, wrapped in a modal-manager doesn't span complete width of container with display type as flex.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

terra-button, with block styling wrapped in a modal-manager should span complete width of any container.

Current Behavior

As seen here the button, with block styling is placed in div, that is in the div for the modal manager which in-turn is in a div that has the display set as flex.
screen shot 2018-03-19 at 4 35 08 pm

The button can be made to span complete width by wrapping the modal-manager with a div that has the width set as 100%.
Is that the recommended way ?

Keycode Utils

Issue Description

Currently, Terra components have their own key code constants defined within their respective packages. This results in key codes being repeated throughout components. Consolidating these into a reusable util file would reduce boilerplate.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Create Application Menu

Issue Description

Create Application Menu that implements:

  • terra-application-menu-layout
  • terra-application-menu-header
  • terra-application-menu-item
  • terra-application-menu-utility

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

[terra-tabs] - Menu dropdown is not displayed near dropdown text

Issue Description

On small viewports the Tab component collapses each tab into a drop down. The options are left aligned but the menu is displayed to the right.

image

image

This may be related to: cerner/terra-core#1056

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Cosmetic
  • Other

Expected Behavior

The Menu dropdown should display near the dropdown text.

Current Behavior

The Menu and drop down text are not displayed near each other.

Steps to Reproduce

  1. Create a Tabs component
  2. Shrink the screen down to a small view port
  3. Click the Tab text to open the drop down
  4. Observe the drop down is not displayed near the dropdown text

Environment

  • Component Version:
  • Browser Name and Version:
  • Operating System and version (desktop or mobile):

[Framework] Main navigation needs to support popover container to handle both static and dynamic content

Issue Description

There are use cases of options that will need to be handled with a popover menu for the main navigation header. This content does not fit into any other existing components.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

The application header should support a popover menu option.

Current Behavior

Currently, the application header does not support a popover control.

[Framework] Navigation containers to be able to string together

Issue Description

The responsive pattern of the navigation containers should be able to string together with drill-in functionality.

Issue Type

  • New Feature
  • Enhancement
  • Usability Concern
  • Bug
  • Other

Expected Behavior

The user should be able to drill-in through multiple levels of navigation

Current Behavior

Not all levels of navigation string together.

Modals created with Modal Manager need onClose property

Issue Description

We need an onClose on modals that are managed by the Modal Manager. When a modal is closed or canceled the application needs a hook to execute any actions that are needed if the modal is canceled. The current implementation works ok if a Cancel button is provided and the user presses the cancel button. But, if the user closes by using the ESC key there isn't a way to dispatch any actions that are needed.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

An example is changes to redux state that we need to dispatch on cancel of a model. If the user presses the Cancel button we can dispatch the appropriate action.
The expectation is that the same action can be dispatched when the user cancels the model with the ESC key.

Current Behavior

Currently, if the user uses the ESC key the application state is left is not is the appropriate state because the "cancel" action wasn't dispatched.

Steps to Reproduce

Environment

  • Component Version:
  • Browser Name and Version:
  • Operating System and version (desktop or mobile):

Create Application Menu Utilities

Issue Description

Create application menu style utilities that launch further into the utility menu.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

[terra-modal-manager] Increase specificity of ModalManager size selectors

Issue Description

The terra-modal was updated with a handful of additional themeable variables with cerner/terra-core#1209. This has opened the door for style conflicts with the height/width values set by the ModalManager. We need to increase the specificity of these selectors in order to prevent conflicts altogether.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

The ModalManager size classes should supplant any size values defined by the Modal directly.

Current Behavior

The Modal sizes can supersede those of the ModalManager, causing the Modal to not render whatsoever.

Steps to Reproduce

Reproduction is highly reliant on component import order. This was originally detected in a package that imports terra-modal-manager as a dependency and terra-modal as a devDependency.

Environment

  • Component Version: ModalManager ^2.x, Modal ^2.3
  • Browser Name and Version: Any
  • Operating System and version (desktop or mobile): Any

Update disclosure manager sizes

Issue Description

Current sizes for modal manager and slide manager are a limited subset. Consumers are requesting additional options for modal and slide panel sizes.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Embedded Content Consumer doc does not render

Issue Description

The Embedded Content consumer doc at this link does not render. It also messes up navigation, so the user can't navigate back to their last page. They have to refresh the previous page to see any content.

Log

terra-dev-site-cc70ac2eceb28ef7393b.js:195 TypeError: Cannot convert undefined or null to object
    at keys (<anonymous>)
    at Object.mount (terra-dev-site-cc70ac2eceb28ef7393b.js:353)
    at t.value (terra-dev-site-cc70ac2eceb28ef7393b.js:62)
    at commitLifeCycles (terra-dev-site-cc70ac2eceb28ef7393b.js:195)
    at t (terra-dev-site-cc70ac2eceb28ef7393b.js:195)
    at D (terra-dev-site-cc70ac2eceb28ef7393b.js:195)
    at _ (terra-dev-site-cc70ac2eceb28ef7393b.js:195)
    at batchedUpdates (terra-dev-site-cc70ac2eceb28ef7393b.js:195)
    at Z (terra-dev-site-cc70ac2eceb28ef7393b.js:195)
    at Pe (terra-dev-site-cc70ac2eceb28ef7393b.js:195)
u @ terra-dev-site-cc70ac2eceb28ef7393b.js:195
terra-dev-site-cc70ac2eceb28ef7393b.js:195 Uncaught TypeError: Cannot convert undefined or null to object
    at keys (<anonymous>)
    at Object.mount (terra-dev-site-cc70ac2eceb28ef7393b.js:353)
    at t.value (terra-dev-site-cc70ac2eceb28ef7393b.js:62)
    at commitLifeCycles (terra-dev-site-cc70ac2eceb28ef7393b.js:195)
    at t (terra-dev-site-cc70ac2eceb28ef7393b.js:195)
    at D (terra-dev-site-cc70ac2eceb28ef7393b.js:195)
    at _ (terra-dev-site-cc70ac2eceb28ef7393b.js:195)
    at batchedUpdates (terra-dev-site-cc70ac2eceb28ef7393b.js:195)
    at Z (terra-dev-site-cc70ac2eceb28ef7393b.js:195)
    at Pe (terra-dev-site-cc70ac2eceb28ef7393b.js:195)

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Doc should render

Current Behavior

Doc doesn't render.

Steps to Reproduce

  1. Navigate to link

Environment

  • Component Version:
  • Browser Name and Version: Chrome Version 64.0.3282.186 (Official Build) (32-bit)
  • Operating System and version (desktop or mobile): Windows 10 Desktop

`npm run test` on fresh install

Issue Description

npm run test command results in failures on fresh checkout and install.

Test Suites: 1 failed, 25 passed, 26 total
Tests:       6 failed, 159 passed, 165 total
Snapshots:   6 failed, 71 passed, 77 total
Time:        13.788s

Here is the full output of test command:

โžœ  terra-framework git:(master) npm run test

> [email protected] pretest /Users/eh012472/src/terra-framework
> npm run lint


> [email protected] lint /Users/eh012472/src/terra-framework
> npm run lint:js && npm run lint:scss


> [email protected] lint:js /Users/eh012472/src/terra-framework
> eslint --ext .js,.jsx .


> [email protected] lint:scss /Users/eh012472/src/terra-framework
> lerna run lint:scss

lerna info version 2.9.0
lerna info versioning independent

> [email protected] lint:scss /Users/eh012472/src/terra-framework/packages/terra-application-header-layout
> stylelint src/**/*.scss


> [email protected] lint:scss /Users/eh012472/src/terra-framework/packages/terra-disclosure-manager
> stylelint src/**/*.scss


> [email protected] lint:scss /Users/eh012472/src/terra-framework/packages/terra-application-menu-layout
> stylelint src/**/*.scss


> [email protected] lint:scss /Users/eh012472/src/terra-framework/packages/terra-application-utility
> stylelint src/**/*.scss


> [email protected] lint:scss /Users/eh012472/src/terra-framework/packages/terra-application-links
> stylelint src/**/*.scss


> [email protected] lint:scss /Users/eh012472/src/terra-framework/packages/terra-layout
> stylelint src/**/*.scss


> [email protected] lint:scss /Users/eh012472/src/terra-framework/packages/terra-theme-provider
> stylelint src/**/*.scss


> [email protected] lint:scss /Users/eh012472/src/terra-framework/packages/terra-navigation-side-menu
> stylelint src/**/*.scss


> [email protected] lint:scss /Users/eh012472/src/terra-framework/packages/terra-slide-panel-manager
> stylelint src/**/*.scss


> [email protected] lint:scss /Users/eh012472/src/terra-framework/packages/terra-navigation-layout
> stylelint src/**/*.scss


> [email protected] lint:scss /Users/eh012472/src/terra-framework/packages/terra-modal-manager
> stylelint src/**/*.scss


> [email protected] lint:scss /Users/eh012472/src/terra-framework/packages/terra-application-name
> stylelint src/**/*.scss


> [email protected] lint:scss /Users/eh012472/src/terra-framework/packages/terra-aggregator
> stylelint src/**/*.scss

lerna success run Ran npm script 'lint:scss' in packages:
lerna success - terra-aggregator
lerna success - terra-application-header-layout
lerna success - terra-application-links
lerna success - terra-application-menu-layout
lerna success - terra-application-name
lerna success - terra-application-utility
lerna success - terra-disclosure-manager
lerna success - terra-layout
lerna success - terra-modal-manager
lerna success - terra-navigation-layout
lerna success - terra-navigation-side-menu
lerna success - terra-slide-panel-manager
lerna success - terra-theme-provider

> [email protected] test /Users/eh012472/src/terra-framework
> jest && wdio

 PASS  packages/terra-aggregator/tests/jest/Aggregator.test.jsx
 PASS  packages/terra-navigation-layout/tests/jest/NavigationLayout.test.jsx
 PASS  packages/terra-application-header-layout/tests/jest/ApplicationHeader.test.jsx
 PASS  packages/terra-navigation-layout/tests/jest/RoutingStackDelegate.test.jsx
 FAIL  packages/terra-layout/tests/jest/Layout.test.jsx
  โ— Layout โ€บ should render a Layout without optional props

    expect(value).toMatchSnapshot()
    
    Received value does not match stored snapshot 1.
    
    - Snapshot
    + Received
    
    @@ -5,11 +5,10 @@
        <LayoutSlidePanel
          isAnimated={true}
          isOpen={false}
          isToggleEnabled={false}
          onToggle={[Function]}
    -     panelBehavior="overlay"
          panelContent={null}
          size="tiny"
        >
          <ContentContainer
            fill={true}
      
      at Object.<anonymous> (packages/terra-layout/tests/jest/Layout.test.jsx:15:20)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)

  โ— Layout โ€บ should render a Layout with custom props

    expect(value).toMatchSnapshot()
    
    Received value does not match stored snapshot 1.
    
    - Snapshot
    + Received
    
    @@ -6,11 +6,10 @@
        <LayoutSlidePanel
          isAnimated={true}
          isOpen={false}
          isToggleEnabled={false}
          onToggle={[Function]}
    -     panelBehavior="overlay"
          panelContent={null}
          size="tiny"
        >
          <ContentContainer
            fill={true}
      
      at Object.<anonymous> (packages/terra-layout/tests/jest/Layout.test.jsx:25:20)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)

  โ— Layout โ€บ Menu Disabled โ€บ should render a Layout when tiny

    expect(value).toMatchSnapshot()
    
    Received value does not match stored snapshot 1.
    
    - Snapshot
    + Received
    
    @@ -5,11 +5,10 @@
        <LayoutSlidePanel
          isAnimated={true}
          isOpen={false}
          isToggleEnabled={false}
          onToggle={[Function]}
    -     panelBehavior="overlay"
          panelContent={null}
          size="tiny"
        >
          <ContentContainer
            fill={true}
      
      at Object.<anonymous> (packages/terra-layout/tests/jest/Layout.test.jsx:41:22)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)

  โ— Layout โ€บ Menu Disabled โ€บ should render a Layout when small

    expect(value).toMatchSnapshot()
    
    Received value does not match stored snapshot 1.
    
    - Snapshot
    + Received
    
    @@ -5,11 +5,10 @@
        <LayoutSlidePanel
          isAnimated={true}
          isOpen={false}
          isToggleEnabled={false}
          onToggle={[Function]}
    -     panelBehavior="overlay"
          panelContent={null}
          size="small"
        >
          <ContentContainer
            fill={true}
      
      at Object.<anonymous> (packages/terra-layout/tests/jest/Layout.test.jsx:48:22)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)

  โ— Layout โ€บ Menu Enabled โ€บ should render a Layout when tiny

    expect(value).toMatchSnapshot()
    
    Received value does not match stored snapshot 1.
    
    - Snapshot
    + Received
    
    @@ -5,11 +5,10 @@
        <LayoutSlidePanel
          isAnimated={true}
          isOpen={false}
          isToggleEnabled={false}
          onToggle={[Function]}
    -     panelBehavior="overlay"
          panelContent={
            <div
              layoutConfig={
                Object {
                  "menuIsOpen": false,
      
      at Object.<anonymous> (packages/terra-layout/tests/jest/Layout.test.jsx:88:22)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)

  โ— Layout โ€บ Menu Enabled โ€บ should render a Layout when small

    expect(value).toMatchSnapshot()
    
    Received value does not match stored snapshot 1.
    
    - Snapshot
    + Received
    
    @@ -5,11 +5,10 @@
        <LayoutSlidePanel
          isAnimated={true}
          isOpen={false}
          isToggleEnabled={false}
          onToggle={[Function]}
    -     panelBehavior="overlay"
          panelContent={
            <div
              layoutConfig={
                Object {
                  "menuIsOpen": false,
      
      at Object.<anonymous> (packages/terra-layout/tests/jest/Layout.test.jsx:95:22)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)

 โ€บ 6 snapshot tests failed.
 PASS  packages/terra-application-menu-layout/tests/jest/ApplicationMenu.test.jsx
 PASS  packages/terra-slide-panel-manager/tests/jest/SlidePanelManager.test.jsx
 PASS  packages/terra-modal-manager/tests/jest/actions.test.jsx
 PASS  packages/terra-layout/tests/jest/LayoutSlidePanel.test.jsx
 PASS  packages/terra-modal-manager/tests/jest/ModalManager.test.jsx
 PASS  packages/terra-application-name/tests/jest/ApplicationMenuName.test.jsx
 PASS  packages/terra-application-name/tests/jest/ApplicationHeaderName.test.jsx
 PASS  packages/terra-navigation-side-menu/tests/jest/NavigationSideMenu.test.jsx
 PASS  packages/terra-navigation-layout/tests/jest/RoutingStack.test.jsx (5.732s)
 PASS  packages/terra-navigation-layout/tests/jest/routingUtils.test.jsx (5.847s)
 PASS  packages/terra-app-delegate/tests/jest/AppDelegate.test.jsx (5.961s)
 PASS  packages/terra-theme-provider/tests/jest/ThemeProvider.test.jsx
 PASS  packages/terra-application-utility/tests/jest/ApplicationUtility.test.jsx
 PASS  packages/terra-navigation-layout/tests/jest/NavigationLayoutContent.test.jsx
 PASS  packages/terra-layout/tests/jest/LayoutUtils.test.js
 PASS  packages/terra-modal-manager/tests/jest/index.test.js (6.44s)
 PASS  packages/terra-app-delegate/tests/jest/DisclosureComponentRegistry.test.jsx
 PASS  packages/terra-modal-manager/tests/jest/reducers.test.jsx (6.497s)
 PASS  packages/terra-modal-manager/tests/jest/withModalManager.test.jsx
 PASS  packages/terra-disclosure-manager/tests/jest/DisclosureManager.test.jsx (6.813s)
 PASS  packages/terra-application-links/tests/jest/ApplicationTabs.test.jsx

Summary of all failing tests
 FAIL  packages/terra-layout/tests/jest/Layout.test.jsx
  โ— Layout โ€บ should render a Layout without optional props

    expect(value).toMatchSnapshot()
    
    Received value does not match stored snapshot 1.
    
    - Snapshot
    + Received
    
    @@ -5,11 +5,10 @@
        <LayoutSlidePanel
          isAnimated={true}
          isOpen={false}
          isToggleEnabled={false}
          onToggle={[Function]}
    -     panelBehavior="overlay"
          panelContent={null}
          size="tiny"
        >
          <ContentContainer
            fill={true}
      
      at Object.<anonymous> (packages/terra-layout/tests/jest/Layout.test.jsx:15:20)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)

  โ— Layout โ€บ should render a Layout with custom props

    expect(value).toMatchSnapshot()
    
    Received value does not match stored snapshot 1.
    
    - Snapshot
    + Received
    
    @@ -6,11 +6,10 @@
        <LayoutSlidePanel
          isAnimated={true}
          isOpen={false}
          isToggleEnabled={false}
          onToggle={[Function]}
    -     panelBehavior="overlay"
          panelContent={null}
          size="tiny"
        >
          <ContentContainer
            fill={true}
      
      at Object.<anonymous> (packages/terra-layout/tests/jest/Layout.test.jsx:25:20)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)

  โ— Layout โ€บ Menu Disabled โ€บ should render a Layout when tiny

    expect(value).toMatchSnapshot()
    
    Received value does not match stored snapshot 1.
    
    - Snapshot
    + Received
    
    @@ -5,11 +5,10 @@
        <LayoutSlidePanel
          isAnimated={true}
          isOpen={false}
          isToggleEnabled={false}
          onToggle={[Function]}
    -     panelBehavior="overlay"
          panelContent={null}
          size="tiny"
        >
          <ContentContainer
            fill={true}
      
      at Object.<anonymous> (packages/terra-layout/tests/jest/Layout.test.jsx:41:22)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)

  โ— Layout โ€บ Menu Disabled โ€บ should render a Layout when small

    expect(value).toMatchSnapshot()
    
    Received value does not match stored snapshot 1.
    
    - Snapshot
    + Received
    
    @@ -5,11 +5,10 @@
        <LayoutSlidePanel
          isAnimated={true}
          isOpen={false}
          isToggleEnabled={false}
          onToggle={[Function]}
    -     panelBehavior="overlay"
          panelContent={null}
          size="small"
        >
          <ContentContainer
            fill={true}
      
      at Object.<anonymous> (packages/terra-layout/tests/jest/Layout.test.jsx:48:22)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)

  โ— Layout โ€บ Menu Enabled โ€บ should render a Layout when tiny

    expect(value).toMatchSnapshot()
    
    Received value does not match stored snapshot 1.
    
    - Snapshot
    + Received
    
    @@ -5,11 +5,10 @@
        <LayoutSlidePanel
          isAnimated={true}
          isOpen={false}
          isToggleEnabled={false}
          onToggle={[Function]}
    -     panelBehavior="overlay"
          panelContent={
            <div
              layoutConfig={
                Object {
                  "menuIsOpen": false,
      
      at Object.<anonymous> (packages/terra-layout/tests/jest/Layout.test.jsx:88:22)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)

  โ— Layout โ€บ Menu Enabled โ€บ should render a Layout when small

    expect(value).toMatchSnapshot()
    
    Received value does not match stored snapshot 1.
    
    - Snapshot
    + Received
    
    @@ -5,11 +5,10 @@
        <LayoutSlidePanel
          isAnimated={true}
          isOpen={false}
          isToggleEnabled={false}
          onToggle={[Function]}
    -     panelBehavior="overlay"
          panelContent={
            <div
              layoutConfig={
                Object {
                  "menuIsOpen": false,
      
      at Object.<anonymous> (packages/terra-layout/tests/jest/Layout.test.jsx:95:22)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)


Snapshot Summary
 โ€บ 6 snapshot tests failed in 1 test suite. Inspect your code changes or run with `npm test -- -u` to update them.

Test Suites: 1 failed, 25 passed, 26 total
Tests:       6 failed, 159 passed, 165 total
Snapshots:   6 failed, 71 passed, 77 total
Time:        13.788s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `jest && wdio`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/eh012472/.npm/_logs/2018-03-08T20_26_04_795Z-debug.log

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

All tests pass on fresh checkout, install

Current Behavior

See above table in description.

Steps to Reproduce

  1. clone out https://github.com/cerner/terra-framework/
  2. checkout master
  3. npm install
  4. npm run test

Environment

  • Component Version: master at daa8cb9
  • Browser Name and Version: n/a
  • Operating System and version (desktop or mobile): macOS 10.12.6

Here is my env output:

โžœ  ~ env
TMPDIR=/var/folders/d3/qy2v11j16xx6pt0h1qgsdz4jmfzrbc/T/
XPC_FLAGS=0x0
SYMC_CUI_LI=1436738036
Apple_PubSub_Socket_Render=/private/tmp/com.apple.launchd.w0AN0u9mEH/Render
LANG=en_US.UTF-8
DISPLAY=/private/tmp/com.apple.launchd.medBHm5QJN/org.macosforge.xquartz:0
SSH_AUTH_SOCK=/private/tmp/com.apple.launchd.TtthDzm1YU/Listeners
SECURITYSESSIONID=186a5
TERM=xterm-256color
TERM_PROGRAM=Apple_Terminal
XPC_SERVICE_NAME=0
TERM_PROGRAM_VERSION=388.1.1
TERM_SESSION_ID=17F8DB14-5341-455C-8745-7703221A0285
__CF_USER_TEXT_ENCODING=0x68EFE16C:0x0:0x0
SHELL=/usr/local/bin/zsh
HOME=/Users/eh012472
LOGNAME=eh012472
USER=eh012472
PATH=/Users/eh012472/.rbenv/shims:/Users/eh012472/.rbenv/bin:/Users/eh012472/.pyenv/shims:/Users/eh012472/bin:/Users/eh012472/.rbenv/shims:/Users/eh012472/.rbenv/bin:/Users/eh012472/.pyenv/shims:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin
SHLVL=1
PWD=/Users/eh012472
OLDPWD=/Users/eh012472
ZSH=/Users/eh012472/.oh-my-zsh
PAGER=less
LESS=-R
LC_CTYPE=en_US.UTF-8
LSCOLORS=Gxfxcxdxbxegedabagacad
HOMEBREW_GITHUB_API_TOKEN=cfe62d68b30254471a9f9ccf798c5d8ae4544e86
PYENV_SHELL=zsh
PYENV_VIRTUALENVWRAPPER_PYENV_VERSION=2.7.8
VIRTUALENVWRAPPER_PYTHON=/Users/eh012472/.pyenv/versions/2.7.8/bin/python
VIRTUALENVWRAPPER_VIRTUALENV=/Users/eh012472/.pyenv/versions/2.7.8/bin/virtualenv
VIRTUALENVWRAPPER_VIRTUALENV_CLONE=/Users/eh012472/.pyenv/versions/2.7.8/bin/virtualenv-clone
VIRTUALENVWRAPPER_SCRIPT=/Users/eh012472/.pyenv/versions/2.7.8/bin/virtualenvwrapper.sh
VIRTUALENVWRAPPER_LAZY_SCRIPT=/Users/eh012472/.pyenv/versions/2.7.8/bin/virtualenvwrapper_lazy.sh
VIRTUALENVWRAPPER_PROJECT_FILENAME=.project
VIRTUALENVWRAPPER_WORKON_CD=1
WORKON_HOME=/Users/eh012472/.virtualenvs
VIRTUALENVWRAPPER_HOOK_DIR=/Users/eh012472/.virtualenvs
PIP_FIND_LINKS=http://scm.healthe-axiom.cerner.corp/svn/axiom-python-services/trunk/ext/whl/ http://scm.healthe-axiom.cerner.corp/svn/axiom-python-services/trunk/ext/tgz/
PIP_TRUSTED_HOST=scm.healthe-axiom.cerner.corp
PROJECT_HOME=/Users/eh012472/Devel
RBENV_SHELL=zsh
_=/usr/bin/env

Add ability to render layout at full page height

Issue Description

For the terra-layout / terra-application-layout to render at full page height as expected, it's parent containers must be set to have height:100%; or its direct parent musth have height: 100vh;

However, I know there have been some concerns about setting those styles by default, as they conflict with the xfc / embedded-content-consumer styling.

Using the following config:

<BrowserRouter>
  <Base locale="en-US">
    <ApplicationLayout
      indexPath={indexPath}
      nameConfig={nameConfig}
      navigationItems={navigationItems}
      routingConfig={routingConfig}
    />
  </Base>
</BrowserRouter>

Results in a layout that is only as tall as the header.
menu

Looking at the generated markup, both the div#root and the direct child div rendered by the <Base /> component need height: 100% set to render at the full page height, or the modal manager needs its height changed from 100% to 100vh

screen shot 2018-03-22 at 12 05 32 pm

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Ability to render layout at full page height without custom styles.

Current Behavior

Custom styles are required to render layout at full page height.

Slide Panel Manager

Issue Description

Create SlidePanelManager component. (Issue moved from cerner/terra-core#915).

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

The SlidePanelManager will be a Redux-backed container component that dynamically presents components within the panel content, when the panel content is shown. This component is expected to have similar API to the modal manager. The SlidePanelManager expected to maintain the panel content displayed via the use of the slide-group component.

Redux Actions will Include:

  • OPEN: Open Slide Panel
  • CLOSE: Close Slide Panel
  • PUSH: Disclose next component
  • POP: Dismiss component and return to previous component
  • MAXIMIZE: Make slide panel fullscreen
  • MINIMIZE: Return slide panel to the panelSize specified

Tech Design

React Props:

Prop Type Default Description
app AppDelegate.propType undefined The AppDelegate instance provided by the containing component. If present, its properties will propagate to the children components.
children node null The content to be displayed as the main content of the SlidePanel
slidePanelComponentData Array of Objects-> [{key: string, name: string, props}] [] The Array of component data (key, name, and props) that will be used to instantiate the panel content of the Slide Panel.
panelBehavior string 'overlay' SlidePanelProp- The style of panel presentation. Options are 'overlay' or 'squish'.
panelPosition string 'end' SlidePanelProp-The position at which the panel will be displayed. This property honors the current direction setting. Options are 'start' or 'end'.
panelSize string 'small' SlidePanelProp-The size at which the panel will be displayed. Options are 'small' or 'large'.
isOpen bool false SlidePanelProp- Whether or not, when open, the panel should be displayed with the full width of the SlidePanel.
isFullscreen bool false SlidePanelProp-Whether or not the panel should be displayed.
fill bool false SlidePanelProp-Whether or not the SlidePanel should be sized relative to its parent container.
openPanel func undefined A function that dispatches a PANEL_OPEN action.
closePanel func undefined A function that dispatches a PANEL_CLOSE action.
pushPanel func undefined A function that dispatches a PANEL_PUSH action.
popPanel func undefined A function that dispatches a PANEL_POP action.
maximizePanel func undefined A function that dispatches a PANEL_MAXIMIZE action.
minimizePanel func undefined A function that dispatches a PANEL_MINIMIZE action.

Example:

//Demo Application

import React from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import SlidePanelManager, { reducers as slidePanelManagerReducers } from 'terra-slide-panel-manager';
import SlidePanelController from './SlidePanelController';

const store = createStore(combineReducers(slidePanelManagerReducers));

const SlidePanelManagerDemo = () => (
  <Provider store={store}>
    <SlidePanelManager>
      <SlidePanelController />
    </SlidePanelManager>
  </Provider>
);

export default SlidePanelManagerDemo;

//SlidePanelController.jsx

import React from 'react';
import PropTypes from 'prop-types';
import PanelContent, { disclosureName } from './PanelContent';

let nestedComponentIndex = 0;

DemoContainer.propTypes = {
  app: AppDelegate.propType,
};

class SlidePanelController extends React.Component {
  constructor(props) {
    super(props);

    this.disclose = this.disclose.bind(this);
    this.closeDisclosure = this.closeDisclosure.bind(this);
    this.goBack = this.goBack.bind(this);
    this.maximize = this.maximize.bind(this);
    this.minimize = this.minimize.bind(this);
  }

  disclose(size) {
    return () => {
      this.props.app.disclose({
        preferredType: 'panel',
        size,
        content: {
          key: `SlidePanelContainer-${nestedComponentIndex += 1}`,
          name: disclosureName,
          props: {
            someText: `DemoContainer-${nestedComponentIndex}`,
          },
        },
      });
    };
  }

  dismiss() {
    this.props.app.dismiss();
  }

  closeDisclosure() {
    this.props.app.closeDisclosure();
  }

  goBack() {
    this.props.app.goBack();
  }

  maximize() {
    this.props.app.maximize();
  }

  minimize() {
    this.props.app.minimize();
  }

  render() {
    const { app } = this.props;

    return (
      <div className="nested-component" style={{ height: '100%', padding: '10px' }}>
        <MainContent>
          <button className="disclose" onClick={this.disclose()}>Open Panel</button>
        </ MainContent>
      </div>
    );
  }
}

export default SlidePanelController;
// PanelContent.jsx

import AppDelegate from 'terra-app-delegate';

const PanelContent = ({ app, someText }) => (
  <div>
    {someText}
    <button onClick={app.closeDisclosure}>Close Modal</button>
    <button className="go-back" onClick={this.goBack}>Go Back</button>
    <button className="dismiss" onClick={this.dismiss}>Next</button>
    <button className="close-disclosure" onClick={this.closeDisclosure}>Close</button>
    <button className="maximize" onClick={this.maximize}>Maximize</button>
    <button className="minimize" onClick={this.minimize}>Minimize</button>
  </div>
)

export default PanelContent;

const disclosureName = 'PanelContentExample';
AppDelegate.registerComponentForDisclosure(disclosureName, PanelContent);
export { disclosureName };

[Framework] Create method to pass knowledge of child content to parent content

Issue Description

Parent navigation content has no knowledge of its children content. The list item does not know if its content is another menu or page content. This means we cannot show a difference between list items that expose another drill-in menu or actually paint a page. The UI needs to include a progressive disclosure indicator.

Issue Type

  • New Feature
  • Enhancement
  • Usability Concern
  • Bug
  • Other

Expected Behavior

Parent navigation content has no knowledge of its children content. The list item does not know if its content is another menu or page content. This means we cannot show a difference between list items that expose another drill-in menu or actually paint a page. The UI needs to include a progressive disclosure indicator.

Current Behavior

There is currently no method of passing this knowledge up to the parent and displaying a progressive disclosure indicator.

Add webdriver.io tests for terra-navigation-layout and remove other nightwatch tests

Issue Description

  • Add webdriver.io tests to terra-navigation-layout
  • Remove nightwatch tests from terra-navigation-layout, terra-layout, terra-modal-manager, terra-application-utility and terra-embedded-component.
  • Remove nightwatch script from package.json and consume only jest and wdio tests during test.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Create Application Menu Header

Issue Description

Create Application Menu Header with a title and navigational stack buttons.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Create Application Menu Item

Issue Description

Create application menu item, this will be the equivalent of the navigational tab item.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Create Layout

Issue Description

We'd like to create a Layout component that would provide consumers with a good starting for application development.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

The current idea for the Layout revolves around three defined content regions:

  • header: A header region at the top of the layout. It remains fixed (using flexbox).
  • content: A region in the body of the layout. The content region is displayed below the header and can overflow.
  • menu: A region in a sidebar-type disclosure that can be toggled on/off. This can also be pinned onscreen or hidden altogether.

Tech design to come.

Create Component to Embed External React Apps

Issue Description

We need the ability to mount external react applications into the DOM. This enables us to combine apps through configuration rather than maintaining a massive webpack instance with dynamic imports that must be updated with each app update.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

The component would be consumed like this:

import React, { Component } from 'react';
import EmbeddedComponent from './EmbeddedComponent';

import './App.css';

class App extends Component {
  render() {
    const loading=<div>Loading, please wait</div>;

    return (
      <div className="App">
        <EmbeddedComponent basePath="http://externaldomain.com/myApp" placeholder={loading}/>
      </div>
    );
  }
}

export default App;

The basePath will point to a base location which is expected to have a file manifest.json. The manifest is generated using the webpack-manifest-plugin. Example manifest:

{
  "ar-intl-local.js": "ar-intl-local.8b89e84b9dd407d27826.js",
  "ar-translations.js": "ar-translations.cdad6be775ddcb106b6c.js",
  "de-intl-local.js": "de-intl-local.e7014c301a02e34b135e.js",
  "de-translations.js": "de-translations.3e802213adb19ffad47f.js",
  "en-GB-intl-local.js": "en-GB-intl-local.466fe7ba468e71f59d48.js",
  "en-GB-translations.js": "en-GB-translations.8d392998b43336e205cf.js",
  "en-US-intl-local.js": "en-US-intl-local.329870131ef92acef02d.js",
  "en-US-translations.js": "en-US-translations.e86978e4d3f21af705c6.js",
  "en-intl-local.js": "en-intl-local.a2db357afa1f66cd3e9e.js",
  "en-translations.js": "en-translations.3b5203d3ff7000964dd2.js",
  "es-ES-intl-local.js": "es-ES-intl-local.50de76237c5b4ea61995.js",
  "es-ES-translations.js": "es-ES-translations.f77d13737c97e31e41da.js",
  "es-US-intl-local.js": "es-US-intl-local.99cbfee4baa20a778e8b.js",
  "es-US-translations.js": "es-US-translations.8d7f66af308b5d2bc5f1.js",
  "es-intl-local.js": "es-intl-local.e002521d76f8191b6b6c.js",
  "es-translations.js": "es-translations.1125a13e088d93527c05.js",
  "fi-FI-intl-local.js": "fi-FI-intl-local.49a9e7ec1da28b3c443e.js",
  "fi-FI-translations.js": "fi-FI-translations.27ac26a371caa681a6a3.js",
  "fr-FR-intl-local.js": "fr-FR-intl-local.c64e61ee5807e87d3309.js",
  "fr-FR-translations.js": "fr-FR-translations.65b2b276063a727981d9.js",
  "fr-intl-local.js": "fr-intl-local.190dc3a90deec3cafcaf.js",
  "fr-translations.js": "fr-translations.0b94599fef74b963a5b3.js",
  "index.css": "index-da3a61b0d0e7609c1b9a.css",
  "index.js": "index.cfbaa75b1d994643bd89.js",
  "intl-polyfill.js": "intl-polyfill.aa6e4001a389d6d438cb.js",
  "pt-BR-intl-local.js": "pt-BR-intl-local.97fe4cdd9f05e789ad35.js",
  "pt-BR-translations.js": "pt-BR-translations.013c4d5364d85ecbb227.js",
  "pt-intl-local.js": "pt-intl-local.3dc1794a6f0f1fc5d5fd.js",
  "pt-translations.js": "pt-translations.aa67b5f1751eb0eeaba8.js"
}

Upon loading the manifest, the component will download each CSS file and require the index.js file as an AMD module. AMD was chosen because it works cross browser and is supported by webpack. Once index.js and css is loaded, the component is mounted and any props passed into <EmbeddedComponent> are passed into the mounted external component.

In order make a react app embeddable, it simply needs to define its output in its webpack.config.js to be an AMD target and include the manifest plugin:

  output: {
    filename: '[name].[chunkhash].js',
    path: path.join(__dirname, 'dist'),
    publicPath: 'http://externaldomain.com/myApp',
    libraryTarget: 'amd',
    libraryExport: 'default',
  }

Once mounted, the EmbeddedApp is part of the react DOM tree and will propagate up errors, events as any normal react component.

Preloading

It's possible that this component could also expose a library to preload assets so that when they are requested for mounting the component will be mounted instantly without waiting for JS/CSS to load.

Limitations

  • A react 15x app cannot be mounted into a react 16x app.
  • The manifest.json response must enable access-control-allow-origin: * to be loaded in.

Modal Manager Scroll Behavior

Issue Description

The scroll bar behavior for terra-modal-manager seems odd on Internet Explorer and Safari & Chrome on iOS. We checked the examples on terra-framework's doc site http://engineering.cerner.com/terra-framework/#/site/components/modal-manager/index in IE and Safari.

NOTE: Scroll functionality is unaltered. Visual discrepancy only.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

  1. In Internet Explorer, we can should see one vertical single scroll bar(preferably thin)
  2. In Safari, on an iOS emulator and on device, the vertical scroll bar should be visible disclosures greater than 2.

Current Behavior

  1. In Internet Explorer, we can see two vertical scroll bars (one thick and one thin).
    modalmanagerscrollissue1

  2. In Safari/Chrome, on an iOS emulator and on device, the scroll bar disappears when we disclose after the first disclosure.
    modalmanagerscrollissue

Steps to Reproduce

For the issue on IE

  1. Open IE 11 and navigate to http://engineering.cerner.com/terra-framework/#/site/components/modal-manager/index
  2. Scroll all the way to the bottom where the examples are available.
  3. Click on button labeled Disclose (Medium).
  4. Reduce the size the window such that the content is more than the height of the window.
  5. If only vertical scroll is used, we can see a thin scroll bar.
  6. If the mouse is moved horizontally, we can see a thick scroll bar that sometimes overlaps the content of the disclosure.

For the issue in Safari/Chrome on iOS

  1. Open IE 11 and navigate to http://engineering.cerner.com/terra-framework/#/site/components/modal-manager/index
  2. Scroll all the way to the bottom where the examples are available.
  3. Click on button labeled Disclose (Medium) .
  4. Reduce the size the window such that the content is more than the height of the window.
  5. Click on disclose again to view the nested disclosure. The scroll bar disappears on the nested disclosure

Environment

  • Component Version: 2.1.0

  • Browser Name and Version: Internet Explorer 11

  • Operating System and version (desktop or mobile): Windows 7 desktop (mobile view)

  • Browser Name, Version and OS: Safari on iOS 10.2 emulator and Chrome (65.0.3325.152) on iOS 11.0.3

[Framework] Navigation on mobile needs to allow the user to abort and return to their previous base screen

Issue Description

The user needs the ability to explore the navigational items in the side menu on mobile while maintaining their previous location in the back. The user must be given the option to abort the menu exploration. If the user is on their schedule and wants to review other options in the navigation, they should be able to explore the side menu without navigating them away from their schedule.

Issue Type

  • New Feature
  • Enhancement
  • Usability Concern
  • Bug
  • Other

Expected Behavior

The user needs the ability to explore all navigational options with the option of aborting the exploration and returning back to their previous workflow.

Current Behavior

The current framework model does not allow for this exploratory workflow. It immediately navigates the user in the background away from their starting point.

Layout's slidepanel becomes hidden when sizing with broswer magnification

Issue Description

When using browser zoom, magnifying and then minifying can result in the terra-layout slide menu to become invisible.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Steps to Reproduce

  1. Zoom in changing the breakpoint sizes until viewing mobile form factor
  2. Zoom out back to 100% or lower.

Environment

  • Browser Name and Version: Safari

screen shot 2018-01-04 at 4 06 15 pm

Introduce terra-application-layout

Issue Description

We're going to reintroduce the terra-application package. Instead of the very simple wrapper that it previously exported, it will export a configurable Application component that utilizes the various 'terra-application-x' components and layouts that have been created in an opinionated fashion. This should be used as a starting point for application creation.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Create Infinite List Component

Issue Description

Create infinite list component, handling cell queuing/de-queuing.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Create Application Header Name component

Issue Description

Create ApplicationName/Logo component to be placed within the logo section of the application-header-layout.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Form Validation Utilities

Issue Description

Terra Framework needs to have a way to deal with form-validations. This will most likely be an external package that we recommend to consumers to use, but we need to have a common strategy that we can send to developers.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Create Application Header Utility w/Utility Menu

Issue Description

Create Application Utility to be placed within the terra-application-header-layout.
Component should also incorporate a Utility Menu to be displayed from the Header Utility.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

DatePicker fails accessibility testing.

Issue Description

Date picker fails accessibility testing

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

Passes accessibility tests

Current Behavior

  • Control button fails from not having text. Related to #1058
  • Contrast ratio of selected day is not high enough. I think this is because the text is so small.
  • The date picker doesn't generate a label for its input. Note: this may just be an example update, but looking at doc I don't see anything on how to create a datepicker with a label

Steps to Reproduce

  1. Install Axe Chrome Extension
  2. Navigate to a date picker example and open the datepicker by activating the control.
  3. Run axe by going to developer tools and clicking axe tab.

Environment

  • Component Version:
  • Browser Name and Version:
  • Operating System and version (desktop or mobile):

Enhance terra-layout to hide content in the menu when off screen.

Issue Description

Set hidden styles on the layout's slide menu to prevent tab focus from component off of the screen.

Issue Type

  • New Feature
  • Enhancement
  • Bug
  • Other

Expected Behavior

When the value for isOpen is set to false, the content inside the layout menu should not be focusable, so hidden styles should be applied to the whole panel.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.