Status View Component

Issue Description

As an application developer, I need “Status View” card which can fulfill the needs of both the Error View Component, and the No Data Component http://engineering.cerner.com/terra-clinical/#/site/no-data-view http://engineering.cerner.com/terra-clinical/#/site/error-view

Questions

I also want to figure out if terra-core just containers a Custom Type view which takes any text and icon to display, allowing terra-consumer and terra-clinical to wrap it providing proper types. Or to bake all the common types into terra-core, theme the icons, and also provide a custom type for consumer to use.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

This should work similar to terra-clinical No Data View component with theming option to satisfy terra-consumer and Cerner OCS and Error view e.g Not Authorized, No results found, Error Loading etc.

Tech Design:

Considerations:

• Meets specification of No Data View component in terra-clinical.
• Meet specification of terra-consumer e.g having divider, heading / subtext alignment options
• Covers most of the Cerner one style No Data view component ( Where can I get the callout for OCS component ?) @alex-bezek @mhemesath
• Meets specification of Error view - terra-clinical and terra-consumer

Responsiveness:

• TBD

Bidirectionality

• TBD

Accessibility

• TBD

Approach 1 - Custom

React Props:

Prop	Type	Default	Description
icon	element	undefined	The icon component displayed on the top. It can be any icon consumer wants
heading	string	required	The title of the status view.
subtext	string	undefined	The subtext description of the no data view.
subtextContent	element	undefined	The content to be rendered last. The consumer has total control on what to display inside this.
isIconHidden	bool	false	Whether or not the Icon should be displayed.

Question : If icon is not passed then Icon will not be rendered then I believe we don’t need isIconHidden. Let me know if I am missing any use case for this prop.

Approach 2 - Common

React Props:

Prop	Type	Default	Description
type	string	required	The objective of the status view component is defined by consumer by selecting type. As per type we internally decide which icon and heading will be rendered. See more details on type below
heading	string	undefined	If heading is provided then it will take precedence over the heading value from Type-Icon mapping.
subtext	string	undefined	The subtext description of the no data view.
subtextContent	element	undefined	The content to be rendered last. The consumer has total control on what to display inside this.
isIconHidden	bool	false	Whether or not the Icon should be displayed.

Combine Approach - Common - Custom

React Props:

Prop	Type	Default	Description
type	string	required	The objective of the status view component is defined by consumer by selecting type. As per type we internally decide which icon and heading will be rendered. See more details on type below
icon	element	undefined	The icon component displayed on the top. It can be any icon consumer wants. This icon will be honored if type is CUSTOM.
heading	string	undefined	The title of the status view. This heading will be honored if type is CUSTOM.
subtext	string	undefined	The subtext description of the no data view.
subtextContent	element	undefined	The content to be rendered last. The consumer has total control on what to display inside this.
isIconHidden	bool	false	Whether or not the Icon should be displayed.

Prop - type:

value	Icon	Heading
CLINICAL	TBD	TBD
NO_DATA	folder icon	No Data
NO_RESULT	Magnifying glass	No Matching Results
NOT_AUTHORISED	lock	Not Authorized
SENSITIVE_DATA	lock	Sensitive Data
ERROR	triangle	Error
NO_INTERNET	triangle	No Internet Connection
ERROR_LOADING	triangle	Error Loading
CUSTOM	given icon	given heading

I feel this list will go long with time. Being this component at terra-core level it would be nice if we keep the icon and heading configurable as mentioned in Approach 1.

Example:

import React from 'react';
import NoDataView from 'terra-no-data-view';

<NoDataView  />
<ThemeProvider themeName="terra-consumer-theme/cerner-one-style">
      <NoDataView />
 </ThemeProvider>

CSS Classes:

Selector	Description
.status-view	The root class for the CSS component. It will be applied under all theme. It will have common css across all the theme like left and right padding for card component.
.icon	The class for the icon to set the size of icon and alignment
.heading	The class for the heading to set text size and color and if required line height
.subtext	The class for the subtext to set text size and color and if required line height.
.subtext-content	The class for the subtext to set alignment.
.divider	The class will decide whether horizontal rule will be rendered or not

Note: Themed variable will be used to set the values wherever required for different themes (terra-clinical, terra-consumer and OCS). Be default terra-clinical theme will be applied.

Theme CSS

StatusView.scss

 @include cerner-consumer-theme {
   --terra-statusview-icon-size: TBD ;
     --terra-statusview-heading-text-size: xxRes-Large (30 mobile /36 px desktop);
     --terra-statusview-heading-text-color: text-Light;
     --terra-statusview-subtext-text-size: Body ;
     --terra-statusview-subtext-text-color: Text-Dark;
     --terra-statusview-divider: block;
     --terra-statusview-heading-line-height: TBD;
     --terra-statusview-subtextcontent-aligment: center;
  }

  @include cerner-clinical-theme {
     --terra-statusview-icon-size: 100x100px ;
     --terra-statusview-heading-text-size: 24 px;
     --terra-statusview-heading-text-color: --black-60 ;
     --terra-statusview-subtext-text-size: 14 px ;
     --terra-statusview-subtext-text-color: --black-40;
     --terra-statusview-divider: none;
     --terra-statusview-heading-line-height: 28px;
     --terra-statusview-subtextcontent-aligment: center;
   }

Note : I am assuming the padding between the elements e.g. heading, subtext, divider and content will be common across the theme.

[amf9t2]

@jmsv6d how about adding new type called CUSTOM and honoring icon and heading given via props. So if consumer doesn’t like our mapping then they will have to set type CUSTOM and provide icon and heading. With this type prop become mandatory and if selected type is ‘CUSTOM’ then given icon and heading will be rendered.

[bjankord]

Duplicate to https://github.com/cerner/terra-core/issues/1028