Welcome to ska-gui-components documentation!

This is a JavaScript library contained low level components and utilities for use within SKAO GUI applications. It makes use of the following:

Material-UI ( version 5 ) - Ensures that the SKAO theme is implemented in a consistent manner ska-javascript-components - JavaScript library containing functionality that does not require Material-UI

Note that functionality that is available from the ska-javascript-components library has been made available via this library so that separate inclusion is not required.

Every effort has been made to ensure that all components have a unique means of identification for testing purposes, as well as implementation of standard properties to allow for maximum accessibility for those that have access limitations

Usage

Configuration Addition

This repository is available from the Central Artefact Repository ( CAR ), so the following needs to be executed from the repository that needs to use this library

npm config set @ska-telescope:registry https://artefact.skao.int/repository/npm-internal/

Update the CI/CD processor

As the library is in an SKAO location, the .gitlab-ci.yml should be amended to the following so that the Ci/CD build will complete

npm config set @ska-telescope:registry https://artefact.skao.int/repository/npm-internal/
yarn build ( npm can be used here as an alternative )

Required addition to packagejson

As these are designed for use with React applications, the following needs to be run so that the library is added to the package.json

yarn add @ska-telescope/ska-gui-components ( npm can be used as an alternative )

Note that this will additionally provide access to all functionality within the ska-javascript-components

Addition into the JS/TS code

Implementation of the specific components vary and are detailed in later documentation, but the following format will need to be added at the top of each file where a component is to be used

import { ??????? } from “@ska-telescope/ska-gui-components”;

Functionality

There follows a list of the available functionality, together with sample usage and the associated properties.

There is also a summary of the ska-javascript-components that have been passed thru this library for convenience. Some of these components are in use within this repository so should not need to be accessed externally.

NOTE: To obtain the version of the library, VERSION has been provided which can be imported as below

import { GUI_COMPONENTS_VERSION } from ‘@ska-telescope/ska-gui-components’;

Functionality from ska-javascript-components library

All of the functionality that has built into the ska-javascript-components library has been included into this library for convenience as many of them have been used within this library as a basis.

To see the functionality provided, please refer to the ska-javascript-components library documentation Note that using the ska-gui-component library allows direct access to these components so where it is stated to import from ska-javascript-component, ska-gui-components can be used instead.

https://developer.skao.int/projects/ska-javascript-components/en/latest/index.html`

Functionality	Type	Summary
Colors	function	SKAO Theme colors
Logo	Component	SKAO Logo
LOGO_DEFAULT_HEIGHT	Constant	Standard Logo Height
SPACER_HORIZONTAL	Constant	For use with Spacer component
SPACER_VERTICAL	Constant	For use with Spacer component
Spacer	Component	Used to push spacing into the application
Status	Component	Provides standard colored shapes to indicate status
Styling	function	SKAO Theme styling
TelescopeList	Constant	List of available Telescopes
TELESCOPE_LOW	Constant	Telescope constants including location
TELESCOPE_MID	Constant	Telescope constants including location
THEME_DARK	Constant	For use with Theme function
THEME_LIGHT	Constant	For use with Theme function
Theme	Function	Implementation of the SKAO theme
JAVASCRIPT_COMPONENTS_VERSION	Constant	Version number of the library

Alert

Overview

Panel that is colored dependant upon the property provided

Usual implementation is that outlined is used for light mode, and filled for dark mode.

Example

import { Alert } from ‘@ska-telescope/ska-gui-components’;

…

CHILDREN defined are displayed in here

</AlertCard>

Properties
Property	Type	Required	default
action	function	No		Allows for an onClick activity
ariaDescription	string	No		Used by Screen Readers
ariaTitle	string	No	AlertCard	Used by Screen Readers
color	AlertColorTypes	No	Info	Identifies the coloring for the alert
children	JSX.Element	No		Allows for content to be added within the alert
variant	AlertVariantTypes	No	Outlined	Styling option
testId	string	Yes		Used for testing purposes

Constants

AlertColorTypes : ‘error’, ‘secondary’, ‘success’, ‘warning’
AlertVariantTypes : ‘filled’, ‘outlined’

Testing Identifier

Provided by the property testId

AlertCard

Overview

Panel that is colored dependant upon the most-urgent colored valued element provided The ordering of the colors is Error, Warning, Success & Info.

See also Alert

Example : Default usage

import { AlertCard } from '@ska-telescope/ska-gui-components';

...

<AlertCard array={ALERT_CARD_DATA} testId="testId" title="AlertCard Title" />

Properties
Property	Type	Required	default
action	function	No		Action to be taken onClick on the panel
ariaDescription	string	No		Used by Screen Readers
ariaTitle	string	No	AlertCard	Used by Screen Readers
array	Object	Yes		See below
clickFunction	Function	No	null	Executed when the individual card element is clicked
variant	AlertVariantTypes	No	AlertVariantTypes.Outlined	Styling option
showStatus	boolean	No	true	Allows for the appropriate status icon component to be displayed
showStatusIcon	boolean	No	true	Allows for the appropriate symbol on the status icon to be displayed
testId	string	Yes		Used for testing purposes
title	string	Yes		Displayed at the top of the Card

array values
Property	Type	Required	default
color	AlertColorTypes	Yes		Coloring of the card element
hideValue	boolean	No	false	If true, display of <strong>value<strong> is suppressed
title	string	No	‘’	Title that is used for the element
value	number	Yes		Value that is used to determine the coloring to be used
variant	AlertVariantTypes	Yes		Styling option

Constants

none

Testing Identifier

Provided by the property testId

Backdrop

Overview

Panel that inhibits activity upon the screen when active. Often used with the Progress component

Image not applicable

Example : Default usage

import { Backdrop } from '@ska-telescope/ska-gui-components';

...

<Backdrop open={open} >

  ...

 </Backdrop>

Properties
Property	Type	Required	default
children	JSX.Element	No		Allows for a components to be placed on top of the backdrop
open	boolean	No	Yes	Determines if the panel is active
visible	boolean	No	No	IF visible the panel has a semi-opaque grey colouring

Constants

none

Testing Identifier

none

Button

Overview

Button for use with all applications. The expectation that an appropriate icon will be provided, which is displayed to the left of the label.

Example : Default usage

import { Button } from '@ska-telescope/ska-gui-components';

...

<Button data={data} testId="testId" />

Properties
Property	Type	Required	default
ariaDescription	string	No		Used by Screen Readers
color	string	No		Color options : ButtonColorType
component	string	No	button	The component used for the root node. Either a string to use a HTML element or a component
disabled	boolean	No	false	Disabled when true
icon	JSX.Element	No	null	Prefixes the label when present
label	string	Yes		Test displayed upon the button
onClick	Function	No	null	Determines actions to be taken when the button is clicked
size	ButtonSizeTypes	No	ButtonSizeTypes.Medium	Allows for the sizing of the button to be changed
testId	string	Yes		Identifier for testing purposes
toolTip	string	No		Text displayed when the cursor is hovered over the button
variant	string	No	outlined	Styling options : ButtonVariantType

Constants

header:: “Constant”, “Values”, “Usage”

“ButtonColorTypes”, “Error,Inherit,Secondary,Success,Warning”, “Allows for the colouring of the button to be changed” “ButtonSizeTypes”, “Small, Medium, Large”, “Allows for the sizing of the button to be changed” “ButtonVariantTypes”, “Contained,Outlined,Text”, “Allows for the styling of the button to be changed”

Testing Identifier

Provided by the property testId

ButtonToggle

Overview

Button group showing 2 options, one of which must be active

Example : Default usage

_images/buttonToggle.png — import { ButtonToggle } from ‘@ska-telescope/ska-gui-components’;

…

<ButtonToggle data={data} testId=”testId” />

Properties
Property	Type	Required	default
ariaDescription	string	No		Used by Screen Readers
ariaTitle	string	No	ButtonToggle	Used by Screen Readers
current	string	Yes		Value of the currently active element
disabled	boolean	false		Allows the group to be disabled
options	object	Yes		{ id: string, label: string, value: any}[] Max 2
setValue	function	Yes		Function to update the value when clicked
testId	string	No	SPECIAL	Value is “telescopeSelectorId” for this component
toolTip	string	No	‘’	Optional toolTip for the toggle
value	object	Yes		Object of the currently active element

Constants

none

Testing Identifier

Provided by the property testId

DataGrid

Overview

Given the provided data, will provide a table of contents

Example : Default usage

import { DataGrid } from '@ska-telescope/ska-gui-components';

...

<DataGrid columns={DUMMY_COLUMNS} rows={DUMMY_ROWS} testId="testId" />

Properties
Property	Type	Required	default
ariaDescription	string	No		Used by Screen Readers
ariaTitle	string	No	AlertCard	Used by Screen Readers
checkboxSelection	boolean	No	false	Adds checkboxes as the first column
columns	number	Yes		Array containing the column specifics
columnVisibilityModel	any	No		Ability to dynamically show/hide columns
height	number	No	264	Determines the height that the component will use
initialState	object	No		Sets the initial state of the DataGrid
onColumnVisibilityModelChange	any	No	Used to listen to the changes to the visible columns and update the prop accordingly
onRowClick	function	No		Action if the row is clicked
onCellClick	function	No		Action if a cell is clicked
rows	array	Yes		Data that is to be presented
showBorder	boolean	No		When active, the border for the component is displayed
showMild	boolean	No		When active, the selected colouring is restricted to a lower contrast
testId	string	Yes		Identifier for testing purposes

Columns
Property	Type	Required
field	string	No	Identifies the data element to be displayed
headerName	string	No	Text displayed above the column
width	number	No	Width of the column

Constants

none

Testing Identifier

Provided by the property testId

DataTree

Overview

Passing data out of a JSON.parse() will produce an expandable TreeView of the data

Example : Default usage

import { DataTree } from '@ska-telescope/ska-gui-components';

...

<DataTree data={data} testId="testId" />

Properties
Property	Type	Required	default
ariaDescription	string	No		Used by Screen Readers
ariaTitle	string	No	AlertCard	Used by Screen Readers
data	number	Yes	‘’	Symbol that is placed top-left of the Component
height	number	No	264	Determines the height that the component will use
maxWidth	number	No	400	Determines the width that the component will use
testId	string	Yes		Identifier for testing purposes

Constants

none

Testing Identifier

Provided by the property testId

DateEntry

Overview

Field for entering Dates into the application. Clicking on the icon opens up a date picker

Example : Default usage

import { DateEntry } from '@ska-telescope/ska-gui-components';

...

<DateEntry label="Label" testId="testId" value={ENTRY_FIELD_VALUE} />

Properties
Property	Type	Required	default
ariaDescription	string	No		Used by Screen Readers
ariaTitle	string	No	AlertCard	Used by Screen Readers
disabled	boolean	No	false	Disables the component if true
errorText	string	No	‘’	Displayed if there is a value and component is coloured
helperText	string	No	‘’	Displayed is there is a value
label	string	Yes		Label displayed for the Component
labelBold	boolean	No	false	Label is displayed in bold unless disabled
labelPosition	LABEL_POSITION	No	LABEL_POSITION.CONTAINED	Allows for the positioning of the label
labelWidth	number	No	4	Sets the width of the label for LABEL_POSITION.START & LABEL_POSITION.END labelPositions
onFocus	Function	No		Function executed when the component is active
required	boolean	No	false	Asterisk is added to the label if true
setValue	function	No	null	Used to update the value onChange
testId	string	Yes		Identifier for testing purposes
value	string	Yes		Value that is displayed within the component

Constants

header:

“Constant”, “Values”, “Usage”

“LABEL_POSITION”, “Contained, Top, Bottom, Start, End”, “Allows for the positioning of the label”

Testing Identifier

Provided by the property testId

DropDown

Overview

Field for selecting an option from a possible list

Example : Default usage

import { DropDown } from '@ska-telescope/ska-gui-components';

...

<DropDown label="DropDown Label" options={DROP_DOWN_OPTIONS} testId="testId" value={DROP_DOWN_VALUE} />

Properties
Property	Type	Required	default
ariaDescription	string	No		Used by Screen Readers
ariaTitle	string	No	AlertCard	Used by Screen Readers
disabled	boolean	No	false	Disables the component if true
errorText	string	No	‘’	Displayed if there is a value and component is coloured
helperText	string	No	‘’	Displayed is there is a value
label	string	Yes		Label displayed for the Component
labelBold	boolean	No	false	Label is displayed in bold unless disabled
labelPosition	LABEL_POSITION	No	LABEL_POSITION.CONTAINED	Allows for the positioning of the label
onFocus	Function	No		Function executed when the component is active
options		Yes		Options to be displayed for selection. See below
required	boolean	No	false	Asterisk is added to the label if true
setValue	function	No	null	Used to update the value onChange
testId	string	Yes		Identifier for testing purposes
value	string	Yes		Value that is displayed within the component

Constants

header:

“Constant”, “Values”, “Usage”

“LABEL_POSITION”, “Contained, Top, Bottom, Start, End”, “Allows for the positioning of the label”

Testing Identifier

Provided by the property testId

FileUpload

Overview

This is a composite component that will allow for the selection of a local file for upload to a specific URL.

Example : Default usage

import { FileUpload } from '@ska-telescope/ska-gui-components';

...

<FileUpload />

Properties
Property	Type	Required	default
buttonSize	ButtonSizeTypes	No	ButtonSizeTypes.Medium	Allows for the sizing of the buttons to be changed
chooseColor	ButtonColorTypes	No	secondary	Allows for the default colour to be overridden
chooseDisabled	boolean	No	false	Disabled the button
chooseFileTypes	string	No		Allows for the component to be limited to specified file types
chooseLabel	string	No	Choose file	Label for the Choose file button
chooseToolTip	string	No	Select to choose a file for upload	Tooltip for the Choose file button
chooseVariant	ButtonVariantTypes	No	contained	Allows for the default variant to be overridden
direction	String	No	row	Allows the buttons to be displayed vertically if ‘column’ is set
file	File	No	null	If provided will be set as the default when entering the component
hideFileName	boolean	No	false	Allows for the suppression of the selected filename
maxFileWidth	number	No	20	Allows the display of the selected filename to be truncated
setFile	Function	No	null	Function called when a file is selected
setStatus	Function	No	null	Function for setting the status of the upload for local usage
testId	string	Yes		Identifier for testing purposes
uploadColor	ButtonColorTypes	No	secondary	Allows for the default colour to be overridden
uploadDisabled	boolean	No	false	Disabled the button
uploadFunction	Function	No	null	Optional function ( see below )
uploadLabel	string	No	Upload file	Label for the Upload file button
uploadToolTip	string	No	Upload the selected file	Tooltip for the Upload file button
uploadURL	string	No	https://httpbin.org/post	URL to which the selected file will be uploaded
uploadVariant	ButtonVariantTypes	No	contained	Allows for the default variant to be overridden

Constants

FileUploadStatus. Enumerator to indicate the status of the file upload.

uploadFunction usage

Ths component provides a simple upload function that makes use of the uploadURL property to upload the selected file. The uploadFunction has been provided so that can be completely replaced.

Testing Identifier

Provided by the property testId

Footer

Overview

Standard Footer wrapper component that spaces evenly it’s child components Clicking on the copyright will display a link to a standard copyright page

The version can be provided via a property.

There is also a tooltip which is displayed when hovering over the version This is so that additional information like API version can be also provided if desired.

Example : Default usage

import { Footer } from '@ska-telescope/ska-gui-components';

...

<Footer testId="testId" version="1.2.3">
   <Grid />
   <Grid item>More content</Grid>
</Footer>

Properties
Property	Type	Required	default
testId	string	Yes		Identifier for testing purposes
version	string	No	Version of the GUI Components
versionTooltip	string	No	Optional tooltip when hovering over the version

Constants

none

Testing Identifier

Provided by the property testId

Header

Overview

Standard Header wrapper component that spaces evenly it’s child components This includes the telescopeSelector component which can be suppressed if not required.

Example : Default usage

import { Header } from '@ska-telescope/ska-gui-components';

...

<Header testId="testId" title="SOME TITLE">
   <Grid item>THIS</Grid>
   <Grid item>IS</Grid>
   <Grid item>THE</Grid>
   <Grid item>FOOTER</Grid>
</Header>

Properties
Property	Type	Required	default
ariaDescription	string	No		Used by Screen Readers
ariaTitle	string	No	AlertCard	Used by Screen Readers
docs	{ tooltip: string; url: string; }	No		Displays docs icon if a url is provided
selectTelescope	boolean	No	true	Allows the selection of telescope to be suppressed
showHelp	boolean	No	false	Allows the help to be displayed if there is content to be displayed
testId	string	Yes		Identifier for testing purposes
title	string	No		Title of the application, which is forced to upper case
toolTip	Object	No	all values ‘’	Contains toolTip text for display (See below)

*ToolTip values* ( Translated values should be passed in as an override )
Property	Type	Required	default
skao	string	No	‘SKAO WebSite’	ToolTip for the SKAO Logo
mode	string	No	‘Light / Dark Mode’	ToolRip for the Theme mode

Constants

none

Testing Identifier

Provided by the property testId

IconButton

Overview

IconButton for use with all applications. This is used if user actions are required, but there is not an associated label due to design or space restrictions.

Example : Default usage

import { IconButton } from '@ska-telescope/ska-gui-components';

...

<IconButton icon={<MyLocationIcon />} testId="testId" toolTip={TOOLTIP} />

Properties
Property	Type	Required	default
ariaDescription	string	No		Used by Screen Readers
ariaTitle	string	No	AlertCard	Used by Screen Readers
onClick	Function	No	null	Determines actions to be taken when the button is clicked
icon	JSX.Element	Yes		Required as the main part of the IconButton
testId	string	Yes		Identifier for testing purposes
toolTip	string	No		Text displayed when the cursor is hovered over the button

Constants

none

Testing Identifier

Provided by the property testId

InfoCard

Overview

Component providing standard delivery of information/errors/warnings

Example : Default usage

import { InfoCard } from '@ska-telescope/ska-gui-components';

...

<InfoCard color={InfoCardColorTypes.Info} message="infoCard.message" testId="testId" />

Properties
Property	Type	Required	default
ariaDescription	string	No		Used by Screen Readers
ariaTitle	string	No	AlertCard	Used by Screen Readers
clickFunction	Function	No	null	Executed if the component is clicked
color	AlertColorTypes	No	Info	Identifies the coloring for the alert
fontSize	number	No	35	Determines the size of the displayed text/symbol
message	string	Yes		Title that is used for the element
showStatus	boolean	No	false	When true also shows appropriate status component
showStatusIcon	boolean	No	true	Displays symbol within the status when shown
testId	string	Yes		Identifier for testing purposes
variant	AlertVariantTypes	No	Outlined	Styling option

Constants

none

Testing Identifier

Provided by the property testId

NumberEntry

Overview

Field for entering numbers into the application. Provides a spinner

Example : Default usage

import { NumberEntry } from '@ska-telescope/ska-gui-components';

...

<NumberEntry label={ENTRY_FIELD_LABEL} testId="testId" value={ENTRY_FIELD_VALUE} />

Properties
Property	Type	Required	default
ariaDescription	string	No	‘’	Description that is used by screen readers
ariaTitle	string	No	‘’	Title that is used by screen readers
disabled	boolean	No	false	Disables the component if true
errorText	string	No	‘’	Displayed if there is a value and component is coloured
helperText	string	No	‘’	Displayed is there is a value
label	string	Yes		Label displayed for the Component
labelBold	boolean	No	false	Label is displayed in bold unless disabled
labelPosition	LABEL_POSITION	No	LABEL_POSITION.CONTAINED	Allows for the positioning of the label
labelWidth	number	No	4	Sets the width of the label for LABEL_POSITION.START & LABEL_POSITION.END labelPositions
onFocus	Function	No		Function executed when the component is active
prefix	string \| JSX.Element	No	‘’	Allows for the addition of characters/icon before the number
required	boolean \| string	No	false	Asterisk is added to the label if true, if string also populates the error
setValue	function	No	null	Used to update the value onChange
suffix	string \| JSX.Element	No	‘’	Allows for the addition of characters/icon after the number
testId	string	Yes	Identifier for testing purposes
value	string	Yes		Value that is displayed within the component

Constants

header:: “Constant”, “Values”, “Usage”

“LABEL_POSITION”, “Contained, Top, Bottom, Start, End”, “Allows for the positioning of the label”

Testing Identifier

Provided by the property testId

Progress

Overview

Indicator that there is an activity ongoing Often used in conjunction with the Backdrop component

Image not applicable for this component

Example : Default usage

import { Progress } from '@ska-telescope/ska-gui-components';

...

<Progress testId="testId" />

Properties
Property	Type	Required	default
ariaDescription	string	No		Used by Screen Readers
ariaTitle	string	No	AlertCard	Used by Screen Readers
determinate	boolean	No	false	if true the value used to for the display determination
indicator	string	No	circle	ProgressIndicator ( see below )
label	boolean	No	false	if true, then the value is also displayed
size	number	No	40	Allows for the changing of the Progress size
testId	string	Yes		Used for testing purposes
value	number	No	0	Can be used to determine display characteristics

Constants

ProgressIndicator : ‘Circle’, ‘Line’, ‘None’

Testing Identifier

Provided by the property testId

TelescopeSelector

Overview

Specialized selection of a specific telescope from all that are available. Note that this interacts directly with the local storage provided to this library

Example : Default usage

import { TelescopeSelector } from '@ska-telescope/ska-gui-components';

...

<TelescopeSelector telescope={telescope} testId="testId" updateTelescope={updateTelescope} />

Properties
Property	Type	Required	default
ariaDescription	string	No	‘’	Description that is used by screen readers
ariaTitle	string	No	‘’	Title that is used by screen readers
disabled	boolean	No	false	disable/enable the component
toolTip	string	No	‘’	Optional toolTip for the toggle

Constants

none

Testing Identifier

Provided by the property testId

TextEntry

Overview

Field for entering text into the application

import { TextEntry } from '@ska-telescope/ska-gui-components';

...

<TextEntry label="TextEntry Label" testId="testId" value={ENTRY_FIELD_VALUE} />

Properties
Property	Type	Required	default
ariaDescription	string	No		Used by Screen Readers
ariaTitle	string	No	AlertCard	Used by Screen Readers
disabled	boolean	No	false	Disables the component if true
errorText	string	No	‘’	Displayed if there is a value and component is coloured
helperText	string	No	‘’	Displayed is there is a value
label	string	Yes		Label displayed for the Component
labelBold	boolean	No	false	Label is displayed in bold unless disabled
labelPosition	LABEL_POSITION	No	LABEL_POSITION.CONTAINED	Allows for the positioning of the label
labelWidth	number	No	4	Sets the width of the label for LABEL_POSITION.START & LABEL_POSITION.END labelPositions
mask	string	No		Used to allow the field to be masked ( See below )
onFocus	Function	No		Function executed when the component is active
password	boolean	No	false	Value entered is obscured
prefix	string \| JSX.Element	No	‘’	Allows for the addition of characters/icon before the entry
required	boolean \| string	No	false	Asterisk is added to the label if true, if string also populates the error
rows	number	No	1	TEXT ONLY. text area when value is above 1
setValue	function	No	null	Used to update the value onChange
suffix	string \| JSX.Element	No	‘’	Allows for the addition of characters/icon after the entry
testId	string	Yes		Identifier for testing purposes
value	string	Yes		Value that is displayed within the component

Constants

header:: “Constant”, “Values”, “Usage”

“LABEL_POSITION”, “Contained, Top, Bottom, Start, End”, “Allows for the positioning of the label”

Masking

header:: “Character(s)”, “Details”

“0”, “Any digit” “a”, “Any letter” “*”, “Any character” “[]”, “Make input optional” “()”, “Include fixed part in unmasked value”

Testing Identifier

Provided by the property testId

TickBox

Overview

Field for entering text into the application

import { TickBox } from '@ska-telescope/ska-gui-components';

...

<TickBox label="TickBox testId="testId" />

Properties
Property	Type	Required	default
ariaDescription	string	No		Used by Screen Readers
checked	boolean	No	false	Sets the status of the checkbox
disabled	boolean	No	false	Disables the component if true
fontSize	number	No	28	font size of the text used
label	string	Yes		Label displayed for the Component
labelBold	boolean	No	false	Label is displayed in bold unless disabled
labelPosition	LABEL_POSITION	No	LABEL_POSITION.START	Allows for the positioning of the label
onChange	Function	No		Function executed when the component is clicked
onFocus	Function	No		Function executed when the component is active
testId	string	Yes		Identifier for testing purposes

Constants

header:

“Constant”, “Values”, “Usage”

“LABEL_POSITION”, “Top, Bottom, Start, End”, “Allows for the positioning of the label”

Testing Identifier

Provided by the property testId

SearchEntry

Overview

Field for entering search text into the application

import { SearchEntry } from '@ska-telescope/ska-gui-components';

...

<SearchEntry label="SearchEntry Label testId="testId" value={ENTRY_FIELD_VALUE} />

Properties
Property	Type	Required	default
ariaDescription	string	No		Used by Screen Readers
ariaTitle	string	No	AlertCard	Used by Screen Readers
disabled	boolean	No	false	Disables the component if true
errorText	string	No	‘’	Displayed if there is a value and component is coloured
helperText	string	No	‘’	Displayed is there is a value
label	string	Yes		Label displayed for the Component
setValue	function	No	null	Used to update the value onChange
testId	string	Yes		Identifier for testing purposes
value	string	Yes		Value that is displayed within the component

Constants

none

Testing Identifier

Provided by the property testId

StatusIcon

Overview

Provides one of a number of coloured shapes that can be used to help distinguish the various status levels. These have been taken from the engineering standards, and additional logos were added. This also will provide fixed symbol display for the icons

Example

import { StatusIcon } from ‘@ska-telescope/ska-gui-components’;

Properties
Property	Type	Required	default
ariaDescription	string	No		Used by Screen Readers
ariaTitle	string	No	AlertCard	Used by Screen Readers
children	React.ReactElement \| string	No		Allows for content to be placed upon the Icon
icon	boolean	No	false	Option to display the fixed symbol upon the Object
level	number	No	9	Valid range is 0 - 5. Anything outside that range is empty. Success = 0.
size	number	No	12	This provides both height & width
testId	string	Yes		Unique identifier used for testing
text	string	No		String that will be displayed upon the shape. Single character only recommended

Constants

None

Testing Identifier

Provided by the property testId

Version

Overview

This is a simple constant that provides the latest version of the library

Image is not applicable for this component

Code snippet ./services/theme.tsx

import { GUI_COMPONENTS_VERSION } from ‘@ska-telescope/ska-gui-components’;

Testing Identifier

n/a