Related Pages: << Links to related pages, if relevant >>

Description

<< Short description of the component and when it is used >>

System errors are errors which occur from a failure of communication between the client application and its server. These take the form of the list of HTTP status codes attached to every client\server request.

<< Most communicative screenshot of the component >>

Basic Flow

<< Relevant only for patterns that have a more complex flow than the typical control (e.g. drag & drop) >>

Types

<< Relevant only if the component has several distinct types (e.g. editable tables, nested tables). In this case, each type should be described in a sub-page. The main page should be used only for the common grounds of the component>>

Type	‘Regular’ HTTP request flow	AJAX request flow with target container area	AJAX request flow without target container area
401 Unauthorized - Bad, missing, or expired token	Redirect to login page. Once login is completed, redirect back to originating page	Redirect to login page. Once login is completed, redirect back to originating page	Redirect to login page. Once login is completed, redirect back to originating page
403 Forbidden - Not authorized	Render the LUX template (masthead and navigation) but the full content area should render the error message	Render the LUX template (masthead and navigation) but the container area should render the error message	User closable toast error message
404 Not Found - Page or resource not found	Do not render the LUX template (masthead and navigation) but the full page should render the error message	Render the LUX template (masthead and navigation) but the container area should render the error message	User closable toast error message
5XX Server Error - Server Infrastructure errors	Do not render the LUX template (masthead and navigation) but the full page should render the error message	Do not render the LUX template (masthead and navigation) but the full page should render the error message	Do not render the LUX template (masthead and navigation) but the full page should render the error message
Generic	Do not render the LUX template (masthead and navigation) but the full page should render the error message	Render the LUX template (masthead and navigation) but the container area should render the error message	User closable toast error message

Usage & Behavior

General guidelines

<<use the sub-section below for description, use only those which fit the component >>

Structure

<<Describe the different parts that structure the component. See example: Numeric stepper structure >>

Placement and Positioning

<<Where should the component be located on the screen. See example: Pagination placement and positioning>>

Default State

<<When there is more than one state for control or area. Including default values> see example: Numeric stepper default state >>

Content

<<Including labels, microcopy, number of items, order of items etc… See example: Buttons content >>

Internal Logic

<<if there is a certain mechanism that cannot be separated from the component. See example: Data tables internal logic >>

States

<<Remove non-related states or use NA to emphasize the component don’t have that state. See Text fields states >>

State	Image	Comment
Regular
Hover
Active
Selected
Selected, Hover
Disabled
Read Only
Error
Warning
Focused
Focused, Hover
Focused, Selected

Interaction

<<for example, how to change value – type, arrows, use slider. See example: Numeric stepper interaction>>

Validations and errors

<<Show images for Errors and warnings. See example: Radio button validations and errors>>

Transitions

<<Where possible describe shortly and demonstrate transitions or animations of the component pattern with animated GIF>>

Best practices

Use:

<…>
<…>

Don’t use

<…>
<…>

General

<…>

Future Version (TBD)

< Edge cases, uncertain aspects, incomplete description>

<…>
<…>

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Design

Zeplin link	Screen thumbnail
<<Short Zeplin link. You Use this >>	<<Screen with 200 width>>

Code

<<a box containing the code - when there is no code to present use the Coming Soon GIF>>

System Errors