Description of Issue

The site has been deployed using the heroku cli. Instead, we want to automatically deploy the site when code is merged to master.

https://devcenter.heroku.com/articles/github-integration

I was hoping to check out the component lib after reading your blog post. The site does not seem to exist any longer :/

Description of Issue

Navigating to http://terra-ui.com goes to a GoDaddy placeholder page. https://www.terra-ui.com is unaccessable.

Browser and Version

Chrome (latest)

Issue Description

Some of the examples are throwing console errors when viewing them.

The following pages are throwing errors:

• Datepicker
• Forms
• Time Input
• Status - only throws error when served over https. Issue with img resource coming from http url.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Example pages don't throw console errors.

Current Behavior

Some of the example pages throw console errors.

Steps to Reproduce

1. Navigate to the documentation pages for the components above
2. Open the developer console

Issue Description

To help ensure our documentation is accessible, we should audit it for Section 508 and WCAG 2 AA issues that can be determined programmatically.

Recommend using https://www.npmjs.com/package/axe-puppeteer for automation.

Description of Issue

Review all of the OSS files to ensure they are up-to-date.

• CONTRIBUTING.md
• CONTRIBUTORS.md
• LICENSE
• NOTICE
• README
• .github/PULL_REQUEST_TEMPLATE.md
• .github/ISSUE_TEMPLATE.md

Issue Description

On the home page we use a custom footer. We should update this to use terra-brand-footer.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Use our pretty react components

Current Behavior

Being custom

Issue Description

A couple of the props-tables were missing. After merging this pr: cerner/terra-core#584 and releasing the components, we need to add the missing tables on terra-ui.com

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Issue Description

Add documentation for CSS custom properties used in terra components

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Terra UI components include documentation on the available CSS custom properties they support

Current Behavior

No doc provided

Description of Issue

Add props table for each component. We have a props table for each component on our functional testing site. However, props table does not currently work on terra-ui.com because we do not distribute our src directory(react-docgen only works with our src directory for generating the table).

Issue Description

In IE11, when navigating to one of documentation examples of a component that uses the terra responsive element component, it will trigger an JS error with a message "Invalid calling object".
This happens on the Alert, Demographics Banner, ReposniveElement, and Clinical Item Collection pages

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Navigating to the Alert, Demographics Banner, ReposniveElement, and Clinical Item Collection pages does not trigger a JS error.

Current Behavior

Navigating to the Alert, Demographics Banner, ReposniveElement, and Clinical Item Collection pages does trigger a JS error.

Steps to Reproduce

1. Open the developer tools in IE 11:
2. Navigate to one of the following pages in IE11:

• https://terra-ui.herokuapp.com/components/core/alert
• https://terra-ui.herokuapp.com/components/core/demographics-banner
• https://terra-ui.herokuapp.com/components/core/responsive-element
• https://terra-ui.herokuapp.com/components/clinical/item-collection

Loading one of these pages without the developer tools being open seems to avoid the error from being triggered.

Environment

• Component Version: terra-site 1.8.0
• Browser Name and Version: IE 11
• Operating System and version (desktop or mobile): Desktop

OCS Updates

terra-core PR

Terra Core update has been released.

terra-framework PR

terra-clinical PR

Description of Issue

We want to add a navigation bar on each page similar to the functional testing site. http://engineering.cerner.com/terra-core/#/site

We are moving away from using scss variables for theming.

Remove:
https://github.com/cerner/terra-ui.com/blob/master/client/webpack.config.js#L113-L115

Description of Issue

We currently only have pages for each of the terra-core components. We want to add pages for all of the terra-clinical components.

Issue Description

Add favicon to terra-ui.com

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Issue Description

Ant Design uses hotjar to collect feedback of users. This might be something nice to add to our site as well. https://incoming.hotjar.com/

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Spike on adding hotjar widget to collect feedback.

Issue Description

To help monitor usage, logs, errors on the doc site, we'll want to hook up new relic. We currently have it set up in terra-core. We should shift this to monitor the terra-ui site to have broader reporting on more of terra.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Site includes new relic tracking

Issue Description

The alert, clinical-item-collection, clinical-item-view, infinite-list, notification-dialog pages are not rendering correctly on the doc site.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Component doc pages render

Current Behavior

Page errors out with the following error message:

TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at m (PropsTable.js:197)

Issue Description

These are outdates and the first thing people will read.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Issue Description

Update examples with latest update from terra-site

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Doc site is updated with latest examples of components

Issue Description

Terra documentation located here: link, is missing the documentation for terra-form/lib components such as TextField, NumberField, etc, that are documented here: link.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Components that are part of the terra-form/lib library should have their documentation listed on: link.

Current Behavior

The documentation for terra-form/lib components are not being shown.

Steps to Reproduce

1. Go to the URL: http://engineering.cerner.com/terra-ui/#/site/components/core/site.
2. Verify that the documentation for components in the terra-form/lib library is missing.

Environment

• Component Version: 2.1.0
• Browser Name and Version: Chrome 64.0.3282.186 (64-bit)
• Operating System and version (desktop or mobile): macOS Sierra (10.12.6)

Description of Issue

Currently, we only have a development webpack configuration file. We want to create a webpack configuration file for production.

https://webpack.js.org/guides/production/

Description of Issue

Some of our components are dependent on terra-base and specifying a locale. We want to only include base once in our application so we cannot put our layout in application.haml. If we use react-router, we only need to specify base once.

Issue Description

Webpacker is available for our applications to use. To get this app as a good example app for our teams, we need to switch over to using webpacker.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Issue Description

Form validation doesn't exist in terra-ui anymore. We need to add it back.

Issue Description

Select and Select-Field prop tables aren't enclosed correctly - the resulting table abruptly ends and props are being rendered in a paragraph.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Prop tables should fully display relevant information in the proper format.

Current Behavior

Prop tables for Select and Select-Field display information erratically.

As we get ready for v1.0.0 releases for terra components, we're doing one final check. If you come across any issues on https://terra-ui.herokuapp.com/, please leave a comment below.

Issue Description

ESLint 5 is available, we should update this repo to use the latest ESLint version and related plugins.

Issue Description

The terra-ui.com bundle is very large. We want to seperate the site into several bundles.
We can use dynamic imports with webpack to make this easier.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Issue Description

There are some accessibility issues in the doc site mainly related to heading order and color contrast of <code> blocks in markdown rendered content.

This issue serves as a collection of issues from manual testing with http://squizlabs.github.io/HTML_CodeSniffer/

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Doc site renders without any WCAG 2 AA or Section 508 errors reported from http://squizlabs.github.io/HTML_CodeSniffer/

Current Behavior

https://terra-ui.herokuapp.com/#/components/terra-alert/alert/alert

• This form does not contain a submit button
• This textinput element does not have a name available to an accessibility API
• This form field should be labelled in some way

https://terra-ui.herokuapp.com/#/components/terra-application-layout/application-layout/about

• Duplicate id attribute value "is-required-false" found on the web page.
• Duplicate id attribute value "is-required-true" found on the web page.

https://terra-ui.herokuapp.com/#/components/terra-application-links/application-links/application-links

• Color contrast issues

https://terra-ui.herokuapp.com/#/components/terra-application-utility/application-utility/application-utility

• Color contrast issue
• Duplicate id attribute value "default" found on the web page.

https://terra-ui.herokuapp.com/#/components/terra-arrange/arrange/arrange

• This form does not contain a submit button

https://terra-ui.herokuapp.com/#/components/terra-avatar/avatar/avatar

• Color contrast issues

https://terra-ui.herokuapp.com/#/components/terra-base/base/base

• This link points to a named anchor "license" within the document, but no anchor exists with that name.

https://terra-ui.herokuapp.com/#/components/terra-brand-footer/brand-footer/brand-footer

• Anchor element found with a valid href attribute, but no link content has been supplied.

https://terra-ui.herokuapp.com/#/components/terra-clinical-item-collection/clinical-item-collection

• Color contrast issues (Should be resolved with cerner/terra-clinical#378)
• The heading structure is not logically nested.

https://terra-ui.herokuapp.com/#/components/terra-clinical-onset-picker/clinical-onset-picker

• This fieldset element does not have a name available to an accessibility API.
• Fieldset does not contain a legend element.
• This select element does not have a name available to an accessibility API.
• This form field should be labelled in some way.
  There is currently no way to apply a legend for the field sets in this component. New issue logged here: cerner/terra-clinical#435

https://terra-ui.herokuapp.com/#/components/terra-date-picker/date-picker/date-picker

• This textinput element does not have a name available to an accessibility API.
• This form field should be labelled in some way.

https://terra-ui.herokuapp.com/#/components/terra-date-time-picker/date-time-picker/date-time-picker

• This textinput element does not have a name available to an accessibility API.
• This form field should be labelled in some way.

https://terra-ui.herokuapp.com/#/components/terra-dialog-modal/dialog-modal/dialog-modal

• Duplicate id attribute value "trigger-dialog-modal"

https://terra-ui.herokuapp.com/#/components/terra-dynamic-grid/dynamic-grid/dynamic-grid

• Color contrast issues

https://terra-ui.herokuapp.com/#/components/terra-embedded-content-consumer/embedded-content-consumer/embedded-content-consumer

• Iframe element requires a non-empty title attribute that identifies the frame.

https://terra-ui.herokuapp.com/#/components/terra-form-fieldset/form-fieldset/form-fieldset

• This form does not contain a submit button
• This textinput element does not have a name available to an accessibility API
• This form field should be labelled in some way

https://terra-ui.herokuapp.com/#/components/terra-form-input/form-input/input

• This textinput element does not have a name available to an accessibility API
• This form field should be labelled in some way.
• The heading structure is not logically nested

https://terra-ui.herokuapp.com/#/components/terra-form-select/form-select/select

• Color contrast issue (Should be resolved with cerner/terra-core#1917)

https://terra-ui.herokuapp.com/#/components/terra-form-textarea/form-textarea/textarea

• This textarea element does not have a name available to an accessibility API
• This form field should be labelled in some way.

https://terra-ui.herokuapp.com/#/components/terra-form-validation/form-validation/validation-events

• Color contrast issue (Should be resolved with cerner/terra-core#1917)

https://terra-ui.herokuapp.com/#/components/terra-hookshot/hookshot/hookshot

• This form does not contain a submit button
• This numberinput element does not have a name available to an accessibility API
• Duplicate id attribute value "hookshotAttachmentBehaviorundefined"
• Duplicate id attribute value "hookshotAttachmentMarginundefined"
• Duplicate id attribute value "hookshotContentAttachmentundefined"
• Duplicate id attribute value "hookshotTargetAttachmentundefined"

https://terra-ui.herokuapp.com/#/components/terra-i-18-n/i-18-n/i-18-n

• This select element does not have a name available to an accessibility API
• Select is missing label
• The heading structure is not logically nested.

https://terra-ui.herokuapp.com/#/components/terra-menu/menu/menu

• This form does not contain a submit button

https://terra-ui.herokuapp.com/#/components/terra-modal-manager/modal-manager/example

• This form does not contain a submit button.

https://terra-ui.herokuapp.com/#/components/terra-navigation-layout/navigation-layout/navigation-layout

• The heading structure is not logically nested.

https://terra-ui.herokuapp.com/#/components/terra-notification-dialog/notification-dialog/notification-dialog

• The heading structure is not logically nested.

https://terra-ui.herokuapp.com/#/components/terra-popup/popup/popup

• This select element does not have a name available to an accessibility API
• Select missing label
• Form does not contain a submit button
• The heading structure is not logically nested.

https://terra-ui.herokuapp.com/#/components/terra-section-header/section-header/section-header

• The heading structure is not logically nested.

https://terra-ui.herokuapp.com/#/components/terra-slide-panel-manager/slide-panel-manager/slide-panel-manager

• Form does not contain a submit button
• Duplicate id attribute value "disclosureHeightdimensions"
• Duplicate id attribute value "disclosureWidthdimensions"

https://terra-ui.herokuapp.com/#/components/terra-status-view/status-view/status-view

• Form does not contain a submit button

https://terra-ui.herokuapp.com/#/components/terra-table/table/table

• Color contrast issue with sample content

https://terra-ui.herokuapp.com/#/components/terra-tag/tag/tag

• Color contrast issue with component

https://terra-ui.herokuapp.com/#/components/terra-theme-provider/theme-provider/theme-provider

• Select is missing label
• The heading structure is not logically nested.

https://terra-ui.herokuapp.com/components/core/time-input

• Inputs missing labels

Common issues

• Color contrast for code blocks
• Duplicate ids for change log headers
• Links are indicated as an anchor since they start with #.

Steps to Reproduce

1. Navigate to URL
2. Run http://squizlabs.github.io/HTML_CodeSniffer/ bookmarklet
3. Check WCAG 2 AA errors
4. Check Section 508 errors

Issue Description

We want to update the vertical navigation to scroll separately from the content block. We can probably use a slide panel to get this behavior.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Issue Description

Update stylelint dependencies similar to terra-core:
cerner/terra-core#1459

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Stylelint dependencies are up to date

Issue Description

Hi,

We are seeing a strange issue with IE 11 only.

It looks fine in Chrome and Edge but looks squished in IE 11.

After further investigation, I've tracked down the responsible element that is causing the squished height.

It is the div with the class "_1d5no1b"

I have no idea why this div doesn't seem to respect height: 100% in IE 11 but does respect height: 400px

I think the component in question is DynamicGrid. https://engineering.cerner.com/terra-ui/#/components/terra-dynamic-grid/dynamic-grid/dynamic-grid

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Expect this div to have height of 100% in IE 11

Current Behavior

div looks squished

Environment

• Component Version:
• Browser Name and Version: IE 11 (Version 11.0.9600.17843)
  Update Versions: 11.0.20 (KB3058515)
• Operating System and version (desktop or mobile): Windows 7 Enterprise SP1

Issue Description

Need to make it clear in our developer contribution guide when to use injectIntl vs contextTypes vs FormattedMessage component and standardize testing these different approaches.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Developer guide explains when to use injectIntl vs contextTypes vs FormattedMessage component and standardize testing these different approaches.

Issue Description

Update to use Terra Site v2 to pull in the master branches of terra-core, terra-clinical, and terra-framework.

Issue Description

I propose we rename this repo from terra-ui.com to terra-ui. The reason for this change is to make the gh-pages url less strange. Currently the url is engineering.cerner.com/terra-ui.com which is weird. After the name change it would be engineering.cerner.com/terra-ui

Issue Description

Seeing 'Unable to get property 'getInstance' of undefined or null reference' in New Relic logs. This error is happening in react-onclickoutside. Likely one of our examples is causing this. It only seems to be showing up in IE10 and IE11.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Environment

• Browser Name and Version: IE 10 and 11
• Operating System and version (desktop or mobile): Desktop

It's been a while since we cut a major release holistically across all terra ui components. There are some non-passive changes needed in terra-ui components like terra-base and terra-i18n that will require a major version bump for all components.

We want to communicate these changes as well as other non-passive changes that we are considering across terra-ui. At this time, we are planning to cut a new major release involving terra-base and terra-i18n around then end of March 2019. We are planning to release some other major version bumps to individual packages are the updates become available.

Terra Core Updates planned for end of March 2019 Release

PR for this set of work: cerner/terra-core#2288

• Switch locale prop to be required on terra-base component
• Update codesplitting in terra-i18n to use dynamic imports
• Remove post install script from terra-i18n
• Remove aggregate-translations script from terra-i18n
• Improve usage of passed along react-intl modules
• Update react to latest stable release
• Add ability to render layout at full page height

Additional Terra Core Updates (Post March 2019 MVB release)

• [terra-responsive-element] Issue with repetitive resizing
• [terra-responsive-element] Consume terra-breakpoints and update size props
• Update Grid to consume terra-breakpoints package
• Update react-focus-trap dependency to latest version in terra-overlay
• [terra-status-view] Remove opt object and add proptype check
• Replace customStatusColor prop from Terra Alert

Terra Framework Major Version Bump changes (Post March 2019 MVB release)

• Does not honor time in maxDateTime
• Create/expose consolidated 'onBlur' for date-time-picker
• Update to react-router v5

Terra Toolkit Major Version Bump Proposal

cerner/terra-toolkit#262

Terra Dev Site Major Version Bump changes

• Update dependencies to latest stable releases (Babel 7, PostCSS)
• Remove Global Wdio Refresh
• Remove terra-app-delegate dependency

Description of Issue

Currently, when visiting terra-ui.herokuapp.com, it returns a page with a list of components. Instead, we want to have a professional looking landing page. UX has done some work on an initial landing page design.

Description of Issue

We want to be able to demonstrate how to use our components with different locales. We need to setup our documentation site to allow switching locales. After the locale has been updated, it should persist to the next page.

https://github.com/shakacode/react_on_rails/blob/master/docs/basics/i18n.md
https://github.com/cerner/terra-core/wiki/terra-i18n-Guide
https://github.com/cerner/terra-core/wiki/Terra-i18n-plugin-Guide

Issue Description

Terra-UI needs to display the most up-to-date terra-components available to consumer. With the completion of #57, this will be possible, however every time the master branch of a terra-repo is updated, this site will need manually redeployed. This should be automated

Expected Behavior

Lets add some sort of bot or webhook that will listen/receive master-branch merge updates. Upon receiving the update this will trigger a new deployment build to keep terra-ui in sync.

Issue Description

Several UI devDependencies should be dependencies. These should be evaluated & updated.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Issue Description

Terra code has several developers concerns such as theming and internationalization, as well as standards for concerns such as writing styles, jest tests, wdio tests, and other frontend aspects. We should have a page in our site that details these to developers so they know how to contribute appropriately.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Issue Description

Looking at the Testing Components Which Include Translations guide, it says to use enzyme-react-intl (which needs a new release so that each method is decoupled from actual translations, see: enzyme-intl will be moving this to toolkit soon 😉) as well as putting the following snippet in the jest setup config file:

import aggregateTranslations from 'terra-toolkit/scripts/aggregate-translations/aggregate-translations';

aggregateTranslations();

Why should a test be concerned with actual translations? Putting that code snippet in the setup file can D R A S T I C A L L Y slow down jest tests, which should be fast (unlike a certain functional/visual regression test suite coughwdiocough 😒😒😒).

I propose that we follow the react-intl docs suggestion and mock out translations. We can decouple tests from translations which is good because:

• faster tests
• less brittle tests
• mocking out formatMessage, like so will have expected translation ids in the snapshots/tests

If we want to make sure that all translations are present, we should make a tool that:

• gets all the keys from each translations/*.json file and ensure that each file has every key, e.g.:

const fs = require('fs-extra');

const translationsDir = './translations';
const translationFilePath = file => `${translationsDir}/${file}`;

const extractLocale = (file = '') => {
  const indexOfExt = file.indexOf('.json');
  return indexOfExt > 0 ? file.slice(0, indexOfExt) : '';
};

const allTranslations = () => {
  try {
    const translationFiles = fs.readdirSync(translationsDir);

    const translations = translationFiles.reduce((acc, file) => ({
      ...acc,
      [extractLocale(file)]: fs.readJsonSync(translationFilePath(file)),
    }), {});

    return translations;
  } catch (e) {
    console.error(e);
  }

  return {};
};

const translationsObj = allTranslations();
const standard = translationsObj.en;

const ensureAllKeysExist = (compareWith = {}) => (translationsDictionary = {}) => {
  const differences = Object.entries(translationsDictionary).reduce((acc, [locale, translations]) => {
    const diff = { ...compareWith, ...translations };

    return {
      ...acc,
      [locale]: Object.entries(diff).filter(([k, _]) => !(k in compareWith)).reduce((a, [k, v]) => ({ ...a, [k]: v }), {}),
    };
  }, {});

  Object.entries(differences).forEach(([locale, translations]) => {
    if (Object.entries(translations).length > 0) {
      console.error(`locale ${locale} has the following differences: ${JSON.stringify(translations, undefined, 2)}`);
    }
  });
};

ensureAllKeysExist(standard)(translationsObj);

• Makes sure that every call to intl.formatMessage({ id: '...' }) and <FormattedMessage id="..." /> has a corresponding entry for each id in each locale

Additional Info

react-intl has been compiled weird, so it's kind of hard to make a reusable component that can be imported, but we should suggest putting the following under app-name/__mocks__/react-intl.js:

/**
 * See: https://github.com/yahoo/react-intl/wiki/Testing-with-React-Intl#jest-mock
 */
const { createElement } = require('react');
const Intl = require.requireActual('react-intl');

const mockIntl = {
  defaultLocale: 'en',
  formatDate: (date, options) => `${date}`,
  formatHTMLMessage: ({ id }, options) => id,
  formatMessage: ({ id }, options) => id,
  formatNumber: (value, options) => `${value}`,
  formatPlural: (value, options) => `${value}`,
  formatTime: (value, options) => `${value}`,
  formatRelative: (value, options) => `${value}`,
  now: () => 0,
};

Intl.injectIntl = (Node) => {
  const renderWrapped = props => createElement(Node, Object.assign({}, props, { intl: mockIntl }));
  renderWrapped.displayName = Node.displayName || Node.name || 'Component';
  return renderWrapped;
};

module.exports = Intl;

Then in their jestSetup.js:

...

jest.mock('react-intl');

It has also been suggested to add a "pretest" script which just runs aggregateTranslations once per test run, not before every test.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Fast.

Current Behavior

Slow.

Issue Description

We want to be able to use hash-links with react router. This issue explains more about it: remix-run/react-router#394

We are using react-router 3.0.5.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Issue Description

To help facilitate users with reporting bugs and requesting new features, we should set up a page that helps guide users similar to https://new-issue.ant.design/
Source code: https://github.com/ant-design/antd-issue-helper

Currently, there is a link in the footer to "Log an issue". We should update this to go to a new page we make for logging issues for all components.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Terra UI site has a bug report/feature request page to log issues for components to their respective repo.

Current Behavior

Users have to figure out which repo a component is in to log a bug report or feature request.
At times, users don't provide all the information needed to be fully actionable on bug reports or feature requests. Creating a form with required fields should help with this.

Description of Issue

We want to add documentation on how to get started with terra components. There should be documentation on:

• Installing components
• Setting up webpack
• Importing components
• Setting up i18n
• Creating a simple page

Issue Description

It would be nice to display all the changelogs in one location for consumers. Using GitHub's APIs we might able to pull these out and generate them into a single unified page. This spike would cover prototyping this concept out.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

Doc site includes a page for changelogs

Issue Description

Add terra-consumer components. This is blocked by cerner/terra-consumer#114.