Description of Issue

The terra-clinical-item-view does not display custom props placed on the display subcomponent.

Considering the following:
const display = <ItemView.Display text="display" style={{ color: 'red' }} />;
<ItemView displays={[display]} />;
If ItemView.Display is rendered individually, the red styling is placed on the text, however when passed to the ItemView component, the red styling does not appear.

Expected Outcomes

• The custom props places on the subcomponents should render when rendered within the ItemView component.

To see what changes are going into each package release, a changelog for each package needs to be generated.

References cerner/terra-core#248.

Add quick access to the README file for each package.

References cerner/terra-core#373.

Please fill out the below template as best you can.

Description of Issue

We need to update the image in the error view to use a more proper svg. There was one that was used in legacy terra rails view models that we should use until the glyphs are more officially released.

Please fill out the below template as best you can.

Description of Issue

Terra Clinical Item View has three failing Nightwatch tests.

Expected Outcomes

• Links can be styled as buttons
• Disabled links behave the same as disabled buttons

Issue Description

To better align with modern CSS practices and modern CSS theming capabilities, we want to update this component to use CSS modules and if applicable, CSS custom properties.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Component styles are converted to use CSS modules. If applicable, convert SCSS variables to CSS custom properties.

Current Behavior

Component styles use manual name spaced classes and SCSS variables.

Issue Description

To better align with modern CSS practices and modern CSS theming capabilities, we want to update this component to use CSS modules and if applicable, CSS custom properties.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Component styles are converted to use CSS modules. If applicable, convert SCSS variables to CSS custom properties.

Current Behavior

Component styles use manual name spaced classes and SCSS variables.

Issue Description

We should ignore aggregated-translations.

https://github.com/cerner/terra-clinical/tree/master/packages/terra-clinical-site/aggregated-translations
https://github.com/cerner/terra-clinical/blob/master/.gitignore#L53
https://github.com/cerner/terra-core/blob/master/.gitignore#L53

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Issue Description

To better align with modern CSS practices and modern CSS theming capabilities, we want to update this component to use CSS modules and if applicable, CSS custom properties.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Component styles are converted to use CSS modules. If applicable, convert SCSS variables to CSS custom properties.

Current Behavior

Component styles use manual name spaced classes and SCSS variables.

Progress

• Design Input
• Expected Behaviour
• Tech Design
• Development
• Functional Validation
• UX Validation
• Released

Feature / Enhancement Request

Future React applications will need to embed iFrame content into themselves in order to present non-React content. However, we still want content in those embedded frames to communicate to their containing applications (using a messaging system like XFC) in order to drive workflows.

I would like to develop a generic EmbeddedContentConsumer component that will mount an iFrame within itself using XFC and handle the generated messages in a standard way.

Expected Behavior

I have an (admittedly out of data) example in this branch: https://github.com/cerner/terra-clinical/blob/pdf_redux/packages/terra-clinical-application/src/patient-app/embedded-content-consumer/EmbeddedContentConsumer.jsx

Ideally, the EmbeddedContentConsumer (better names welcome :D) would have a simple prop API:

• src - The URL for the iFrame's src attribute
• handlers - An Object mapping message names to function handlers

When the EmbeddedContentConsumer mounts, it will mount the iFrame using XFC and establish communication with the Provider in the iFrame content. Then, when the Provider dispatches messages back to the EmbeddedContentConsumer, the EmbeddedContentConsumer will use the message name to lookup the proper handler from the handlers prop and will call the handler with the message payload as a parameter.

This would allow more opinionated components to wrap the EmbeddedContentConsumer and provide specific URLs and handlers. We may wish to include some default handlers in the EmbeddedContentConsumer itself, but I'm not sure what those defaults would be at this time.

The above linked branch also includes a EmbeddedContentProvider: https://github.com/cerner/terra-clinical/blob/pdf_redux/packages/terra-clinical-application/src/patient-app/embedded-content-provider/EmbeddedContentProvider.jsx

Theoretically, React content in the iFrame could be wrapped in that component and have the bootstrapping handled automatically. Non-React content would have to handle the bootstrapping separately (but in a similar way). I'm not sure a component like EmbeddedContentProvider is necessary at this time, but I'm documenting the prototype here to hopefully give everything a bit more context.

Description of Issue

Using lerna publish creates git tags when publishing packages. These tags are used to help determine if a package contains any new commits that should be released since the last time the package was published.

Using the individual release:version scripts will publish a package without making a tag for the release. This results in sync issues when trying to use lerna publish again. To avoid this issue, we should use lerna publish solely for publishing and avoid using individual publish scripts.

Description of Issue

A common pattern for npm modules is to add the lib(es5) directory to the .gitignore and add the src(es6) directory to the .npmignore. Babel is an example of this pattern that also uses lerna.

More information can be found in this article:
http://jamesknelson.com/writing-npm-packages-with-es6-using-the-babel-6-cli/

To Do:

• Update the .gitignore to no longer check in the lib directory.
• We can probably remove the prepush script after this is completed.
• Compile for travis CI tests
• Add script which compiles before publishing cerner/terra-core#353

Reference: cerner/terra-core#316

cerner/terra-core#78
cerner/terra-core#295

Increasing the browser magnification on safari causes the item comment to be incorrectly aligned.

Issue Description

terra-clinical-site currently lists terra-i18n-plugin as a runtime dependency, this plugin should be listed as a devDependency instead.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

terra-clinical-site should build and deploy using terra-i18n-plugin as a devDependency

Current Behavior

N/A

See terra-core:
https://github.com/cerner/terra-core/blob/master/packages/terra-site/package.json#L83

Issue Description

An Item Collection is a wrapper component to display data as either a table or list of items dependent on the relative container size.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Initially data is displayed in a tabular format that flexes the rendered component, but as the container is resized and the indicated breakpoint is hit, the display changes to shows the data as a list of items. The terra-table and terra-clinical-item react components will be utilized for displaying the data in these two ways.

Ultimately, the terra-clinical-item-collection component allows consumers to organize tabular data and ensure this data is readable as screen sizes become progressively smaller.

Issue Description

To better align with modern CSS practices and modern CSS theming capabilities, we want to update this component to use CSS modules and if applicable, CSS custom properties.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Component styles are converted to use CSS modules. If applicable, convert SCSS variables to CSS custom properties.

Current Behavior

Component styles use manual name spaced classes and SCSS variables.

Issue Description

To fix the heroku slug issue, the terra-toolkit devDependency was removed in each package level. With the removal of this devDependency, test scripts on a package level are resulting in the following error:

Error: Cannot find module '/Users/er047227/terra-clinical/packages/terra-clinical-item-view/node_modules/terra-toolkit/lib/scripts/nightwatch.js'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3

The tests scripts on a package level uses the following path, which is causing the error:
node ./node_modules/terra-toolkit/lib/scripts/nightwatch.js

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Steps to Reproduce

1. In any package directory, run npm run test:nightwatch-default to produce the error.

Issue Description

Fix line-height/margin/padding/vertical-aligment of Displays when presented in the table view of the Clinical Item Collection, so that all text “baselines” are aligned and icons and text all appear to look centered vertically when there is only one line of text content.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

All Text and icons, when there is only a single line of content, in the table view should appear visually "centered" or aligned to the same baseline.

Current Behavior

Start and End Accessories (icons) correctly display vertically centered. The Clinical Item Displays (text) are correctly aligned top but when single line of text, they align too high visually (row height could be too tall) and icons, the basic displays, and the comments - all align to different visual baselines.

Required Enhancement

Will resolve fix comment added in PR #91

Description of Issue

Terra-clinical nightwatch tests uses the terra-toolkit for the webpack configuration. Nightwatch tests cannot be ran for individual packages because the server-launcher default config-path is '../../terra-site/webpack.config', it results in the error:

Error: Cannot find module '../../terra-site/webpack.config'

Each package needs updated to include a webpack_config_path so these tests can be run for each individual package.

Steps to Reproduce the Issue

1. cd into package directory
2. npm run test:nightwatch-default

cerner/terra-core#203

Summary

References cerner/terra-core#237. This changes would make code reviews easier by deploying a new site for each pull request.

Steps Required

1. Add Heroku configuration and scripts. cerner/terra-core#318
2. Use express for heroku reviews app. cerner/terra-core#326

Expected Outcomes

A new site is deployed for each pull request.

Issue Description

To better align with modern CSS practices and modern CSS theming capabilities, we want to update this component to use CSS modules and if applicable, CSS custom properties.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Component styles are converted to use CSS modules. If applicable, convert SCSS variables to CSS custom properties.

Current Behavior

Component styles use manual name spaced classes and SCSS variables.

Add a document with the 3rd party libraries we use in terra-clinical.

References cerner/terra-core#337.

cerner/terra-core#156

cerner/terra-core@9763d00

Once terra-list is release, the site layout should be updated to mimic terra-core's site layout to maintain consistency.

Issue Description

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Icon scales with font-size

Current Behavior

Icon does not scale with font-size. At large font-sizes, icon is no longer visible.

Steps to Reproduce

1. Navigate to the item display examples
2. Increase or decrease the font-size of the item-display.

Environment

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

• Alias moment and react-dom. There were multiple copies of moment being pulled into our bundle. This is due to react-datepicker having moment as a dependency instead of a peerDependency. React-datepicker has an outstanding issue for this here: Hacker0x01/react-datepicker#122

After adding the alias for moment and react-dom, we can see that only one copy is pulled into our bundle.

References: cerner/terra-core#297

https://github.com/isaacs/rimraf

rimraf is a popular library that replaces rm -rf and is OS agnostic.

cerner/terra-core#273
cerner/terra-core@66c5554

To get rid of the jest warnings, add this to your jestsetup.js file.

const htmlTag = document.getElementsByTagName('html')[0];
htmlTag.setAttribute('class', 'terra-Base');
htmlTag.setAttribute('dir', 'ltr');

Issue Description

To ensure we are using an authenticated NPM account when we run the publish command, we should check using npm whoami and bail if we are not signed in to an authenticated account

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Check npm whoami an ensure we're logged into to an authenticated NPM account before continuing with the publishing scripts.

Current Behavior

Users can run the publish script without being logged into NPM. This results in tags being created but nothing is published to NPM. This puts the repo in an odd state as trying to publish with lerna will note there are no changes since the last commit.

cerner/terra-core#384

Update .npmignore for each package. Add target, tests, and reports. This will prevent publishing excess files.

Issue Description

Lerna v2 has been released

https://github.com/lerna/lerna/releases/tag/v2.0.0

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Please fill out the below template as best you can.

Description of Issue

Since we are using the doc site to demo components right now, I'd like to update the doc site to be more realistic for terra-clinical-item-view. It's possible we might want to engage some functional people on this to get more realistic data.

Please fill out the below template as best you can.

Description of Issue

Neil recommended that we change the start and end accessories for clinical item view to (src/icons/0021_flag_a.svg) for the startAccessory and the trophy (0025_trophy_a.svg) as the endAccessory.

rm -rf does not work on Windows. Terra-core updated package scripts to use rimraf in replacement of rm -rf in this pull request.

cerner/terra-core#273
cerner/terra-core@66c5554

Issue Description

To better align with modern CSS practices and modern CSS theming capabilities, we want to update this component to use CSS modules and if applicable, CSS custom properties.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Component styles are converted to use CSS modules. If applicable, convert SCSS variables to CSS custom properties.

Current Behavior

Component styles use manual name spaced classes and SCSS variables.

Issue Description

We currently support theming via SCSS variables in various components. As we plan to switch to a css-in-js solution for styling, the current implementation of theming variables leaks implementation details of how we are styling/theming components.

With css-in-js, we'd plan to use JSON files for theming. Switching from SCSS variables to a JSON file for theming would be a non-passive change for our consumers.

We've discussed removing theming functionality via SCSS variables before the v1 release of the various components. This will allow use to roll out theming functionality via JSON files as a new feature rather than a non-passive change.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

All components use hard-coded values instead of SCSS theming variables.

Current Behavior

Various terra components use SCSS theming variables.

Description of Issue

The accessory element should not be added to the dom if an accessory isn't present, the renderAccessory function should return undefined in the case that the accessory isn't provided, rather than a blank div.

Porting issue from terra-core:

"The accessories in the ClinicalItemView currently have a max-width of 60px. We may want to consider increasing that value to support more complex use cases like groups of buttons, etc."

We are starting to use lerna publish to release several packages at once. We would like to add a script that uses lerna-publish.

• add script to compile, test, and lerna publish. Similar to what cloudflare-ui does
• remove existing release script: https://github.com/cerner/terra-core/tree/master/scripts/release

cerner/terra-core#369

Issue Description

When action header was missing the en translation, the component still loaded correctly. This was the error I saw in the console:

This is what the component looked like:

When translations are missing, it should not use the message id as a fallback

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Summary

The Heroku review app can't be deployed due to the code size (after installing all npm modules, around 1.6 GB). It exceeds Heroku slug size after the compression.

The root cause is terra-toolkit(which is around 130 MB) has been installed repeatedly.

Enhancement Request

Reorganize the source code and devDependencies to only import terra-toolkit once.

Expected Behavior

Only import terra-toolki once. Reduce the code size less than 1G.

Description of Issue

To move us to a more modern build tool, we should update to webpack 2.

This issues aligns with cerner/terra-core#209

Work on this has started on this branch in terra-core:
https://github.com/cerner/terra-core/tree/webpack2

Expected Outcomes

• webpack config is updated to be compatible with webpack 2
• webpack plugins are updated to be compatible with webpack 2

Description of Issue

The icons used in the action header buttons need to have fallback text in case the icons fail to load.

Progress

• Design Input
• Expected Behaviour
• Tech Design
• Development
• Functional Validation
• UX Validation
• Released

Feature / Enhancement Request

The terra-clinical-overlay component creates an overlay relative to the container which triggered the overlay.

Expected Behavior

This component will block interactions and fade out all elements of the triggering container.

We have a situation where we would like to provide an array of elements within the DetailView to display a series of Icons/Graphics under subtitles.

For items that need to retain multiple icons in

the detail view, we would like to be able to list them in the "header" area like the attached image.

We would like the DetailView's subtitles to take in elements, not just strings.

Issue Description

At larger font-sizes, icons get cropped off at the bottom.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Icons scaled with font-size.

Current Behavior

Icons are not scaled with font-size.

The person, comment, and information icon are cropped off at the bottom.

Steps to Reproduce

1. Open the item-view examples
2. Adjust the browser font-size to very large.

Environment

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

The accessory and body elements in the clinical item view have padding/margin, we might consider removing the padding selectively, in order to match the new padding utility pattern we are considering.

Progress

• Design Input
• Expected Behaviour
• Tech Design
• Development
• Functional Validation
• UX Validation
• Released

Feature / Enhancement Request

The nightwatch.conf.js file is repeated among all of the test directories in each package. We should investigate using just one file.