Related Pages: << Links to related pages, if relevant >>
| Table of Contents |
|---|
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 | Usage | Image | ‘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 with informational message | Redirect to login page with informational message | Redirect to login page with informational message | ||
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 | ? | ||
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 messageDo not render | Render the LUX template (masthead and navigation) but the container area should render the 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 container 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 messageDo not render | Render the LUX template (masthead and navigation) but the container area should render the 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
<Whenever a recommendation (not a must) is provided>>
Use:
<…>
<…>
Don’t use
<…>
<…>
General
<…>
Future Version (TBD)
< Edge cases, uncertain aspects, incomplete description>
<…>
<…>
Accessibility Compliance
...
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
Code
<<a box containing the code - when there is no code to present use the Coming Soon GIF>>
...