React Components
Alerts Alert, Message
Basic alerts with optional icons.
Example
Props
| Name | Required | Type | Description | Default Value |
|---|---|---|---|---|
| type | One of 'success', 'info', 'danger', 'warning', 'message' | Selection will change icon and color of the alert. | ||
| showIcon | bool | If showIcon exists (and is not set to false) the icon will show. Color will persist regardless of if this is true or not. |
If you don't want the background, use Message.
Example
Props
| Name | Required | Type | Description | Default Value |
|---|---|---|---|---|
| type | One of 'success', 'info', 'danger', 'warning', 'message' | Selection will change icon of the message. |
Calendars Almanac, AlmanacPicker
Almanac Picker
Customizable, accessible date picker.
Example
Props
| Name | Required | Type | Description | Default Value |
|---|---|---|---|---|
| defaultValue | object | A date object representing the data for the current date in the component. | Current Date | |
| hideCloseButton | bool | A boolean for hiding the close button. | ||
| hideSaveButton | bool | A boolean for hiding the save button. | ||
| onOpen | func | A function to be run when the almanac is opened. | ||
| onChange | func | A function to be run when there is a change to the date. | ||
| onOK | func | Custom function to be run when the save button is pressed. Takes in default value as an input and should return true if you want the calendar to close when the save button is pressed. | ||
| onCancel | func | A function to be run when the window is closed. | ||
| dateFormat | string | A string that determines the format of the date. | ||
| closeOnSelect | bool | A boolean that will let you click to select rather than use the save button. | ||
| onDateSelect | func | A function to be run when a date is selected. | ||
| disable | bool | A boolean to disable the almanac picker. | ||
| header | element | A header element to add to the almanac. | ||
| footer | element | A footer element to add to the almanac. | ||
| prefixlabel | string | Label to add above the prefix label. | ||
| i18nStrings | object | Internationalization strings for using the almanac picker in other languages. | ||
| headerMonthFormat | string | Formatting for the month in the header of the almanac. | ||
| holidays | array | Holidays to block out for selection. | ||
| disableWeekends | bool | A boolean to make weekends unselectable. | ||
| selectRange | object | An object representing the selectable date range for the almanac picker and accompanying almanac. | ||
| onMonthChange | func | A function to be run when the user changes the month. | ||
| maxStartDate | object | A date object that represents the first day your almanac will go to. | ||
| maxEndDate | object | A date object that represents the last day your almanac will go to. | ||
| useOverlay | bool | If true will make the dropdown sit on top of anything it covers, if false, opening dropdown shifts content down to make space for the dropdown. | ||
| loading | bool | A prop to show loading image when almanac isn't fully loaded. | ||
| loadingText | string | Loading Text for the almanac. |
Almanac
If you just want to show a calendar, use Almanac.
Example
Props
| Name | Required | Type | Description | Default Value |
|---|---|---|---|---|
| defaultValue | object | Initial focused value on the almanac. | ||
| i18nStrings | object | Internaitionalization strings for using the almanac in different languages. | ||
| headerMonthFormat | string | A string that represents the format for date and year at the top of the almanac component. | ||
| holidays | array of dates | An array of holidays to make unselectable. | ||
| disableWeekends | bool | A boolean to make weekends unselectable. | ||
| selectRange | object | An object representing the selectable date range that the calendar will show. | ||
| onSelect | func | A function to be called when a date is selected. | ||
| onMonthChange | func | A function to be called when the user changes the month. | ||
| footer | element | A footer element for the almanac. | ||
| maxStartDate | object | A date object that represents the first day your almanac will go to. | ||
| maxEndDate | object | A date object that represents the last day your almanac will go to. | ||
| dateFilter | func | A custom function for filtering the dates. | ||
| onResetFocus | func | A function to be executed with the focus is reset. | ||
| initialValue | object | A date object that represents the first element you were on when you entered the almanac. |
Calculator
Calculator
This component provides a general calculator functionality that provides a way to do basic mathematical operations.
Things to keep in mind
- Width of parent container of this component will decide width of component.
- Maximum 18 digits are allowed as input in the calculator.
- Keypad C operation will reset the calculator to initial state. That means pre calculated values will be reset to 0.
- There is a 10 digit precision applied on the result displayed for the calculator.
- Branding is supported for the input section of the calculator.
- Keypad % operation will divide by 100 on first time provided user input or calculated value.
- Keypad % operation will calculate percentage of second input from first input, if user provides first input and do percentage after second input.
Example
Props
| Name | Required | Type | Description | Default Value |
|---|---|---|---|---|
| labels | array | Carries dynamic labels that need to used in the component, if not provided will use static labels. | ||
| locale | string | Carries locale that need to be used, to find the right static labels. | 'en_US' |
Check Boxes CheckBox
Basic check boxes.
Example
Props
| Name | Required | Type | Description | Default Value |
|---|---|---|---|---|
| isSmall | bool | if true creates a small checkbox. | ||
| disabled | bool | if true disables the checkbox. | ||
| checked | bool | if true the checkmark starts as checked. | ||
| id | string | Add an id to the label surrounding the input. | ||
| onChange | func | A function to be executed whenever there is a change to the checkbox. | ||
| dangerouslySetLabelInnerHtml | object | If you have a string of html that is absolutely necessary in the label, this prop can be used. The value of this prop is an object containing the key '__html' who's value is the string of html meant to be placed in the label. |
Radio Buttons RadioButton
A radio button for selection on forms.
Example
Props
| Name | Required | Type | Description | Default Value |
|---|---|---|---|---|
| isSmall | bool | If true, the radio button is small. | ||
| disabled | bool | If true, the radio button is disabled. | ||
| isChecked | bool | If true, the radio button is selected. | ||
| checked | bool | If true, the radio button defaults to selected when the page loads. | ||
| name | string | Add a name attribute to the radio button. | ||
| id | string | Add an id to the label surrounding the input. | ||
| onChange | func | Function to be executed when there is a change to the input. | ||
| dangerouslySetLabelInnerHtml | object | If you have a string of html that is absolutely necessary in the label, this prop can be used. The value of this prop is an object containing the key '__html' whose value is the string of html meant to be placed in the label. |
International Phone Number Input Field InternationalPhoneNumberInputField
Form input for international phone numbers.
Example
Props
| Name | Required | Type | Description | Default Value |
|---|---|---|---|---|
| className | string | Classname to add to the top level div. | ||
| phoneMinLength | number | Minimum number of digits for the phone number to be valid. | 9 | |
| phoneMaxLength | number | Maximum number of digits for the phone number to be valid. | 16 | |
| selectedPhoneCode | string | The international phone code for the selected country. | '1' | |
| selectedCountryName | string | The name of the selected country. | 'United States' | |
| phoneNumber | string | The phone number to show. | '' | |
| isInternationalPhoneEnabled | bool | Boolean to enable international phone dropdown, if false assumes you are in the United States | ||
| inputFieldId | string | Add an id to the input field if provided. | ||
| intlCompId | string | The id to add to the outermost div of the component. | ||
| defaultFocus | bool | If true sets initial focus to the dropdown button. | ||
| i18nStrings | object | Internationalization strings to use the component in other languages. | ||
| countryCodeData | array | The data for the country code dropdown menu. | ||
| onIntlPhNoChange | func | Function to be executed on changing the number in the input field. | ||
| onCountryCodeChange | func | Function to be executed on changing the country code via the drop down. | ||
| onPhoneValidityCheck | func | Function to be executed when checking the phone validity. | ||
| onBlur | func | Function to be executed when an element loses focus. | ||
| onDelete | func | Function to be executed when a field value is cleared using the delete button. | ||
| phoneRequired | bool | If true will show error if a phone is needed and none has been entered. | ||
| enableDelete | bool | Boolean to enable the delete buttons on fields. | ||
| showDeleteIfEmpty | bool | Boolean to show delete buttons even if no fields exist. | ||
| focusInputOnInit | bool | If true sets the initial focus to the input field. | ||
| validateOnInit | bool | If true will run validation when page loads. | ||
| customValidators | shape | An array of validators that contains the validator and error message. | ||
| customValidators.validator | func | Custom function for validating country code and phone number. | ||
| customValidators.errorMessage | string | Error message to display should validation fail. | ||
| ariaLabelForInput | string | Custom accessibility label for the input. |
IFrame IFrame
iFrame for rendering content.
Example
Props
| Name | Required | Type | Description | Default Value |
|---|---|---|---|---|
| cssIncludes | array of strings | Array of css files to include. | ||
| jsIncludes | array of strings | Array of js files to include. | ||
| resizer | string | The URL for an iFrame resizer. | ||
| resizerOptions | object | Options to modify the iFrame resizer. | ||
| labJS | string | String for LAB.js URL. | ||
| data | object | Data to add to the iFrame window. | ||
| className | string | String to add classname to the div containing the iFrame for styling purposes. | ||
| scrolling | bool | Defaults to true, if false will prevent scrolling in iFrames. | ||
| allowDomains | array of strings | String array of allowable domains for the iFrame to use. | ||
| onLoad | func | Custom function to be executed when the iFrame loads. | ||
| title | string | String to add title attribute to the iFrame. |
Toggle Switches ToggleSwitch
A switch that can be toggled on or off
Example
Props
| Name | Required | Type | Description | Default Value |
|---|---|---|---|---|
| defaultActive | bool | If true defaults switch to active. | ||
| i18nStrings | object | Internationalization strings for displaying component in other languages. | ||
| isSmall | bool | if true, the toggle switch is small. | ||
| disabled | bool | If true, the toggle switch is disabled. | ||
| onChange | func | Function to be executed when toggle switch changes. |
SVGs SVG
Scalable Vector Graphic component
Example
Props
| Name | Required | Type | Description | Default Value |
|---|---|---|---|---|
| name | string | Name of the icon (examples: PageLoader, Delete, Info). | ||
| size | string | Add string size of to the SVG container. | ||
| width | union | Width of SVG container. | ||
| height | union | Height of SVG container. | ||
| className | string | Custom class name to add to the SVG container. | ||
| title | string | String for SVG title attribute to improve accessibility. | ||
| desc | string | String for SVG description attribute to improve accessibility. | ||
| style | object | Object of CSS styles for SVG container. |
Custom Components CustomComponent
This component is responsible for loading custom content. Different configurations are required as props depending on the integration type.
Example
Props
| Name | Required | Type | Description | Default Value |
|---|---|---|---|---|
| config | shape | The configuration object for the custom component. | ||
| config.type | One of: component, controlled-iframe, uncontrolled-iframe, | Which of the 3 configurations for the custom component you will be using. | ||
| config.js | array of strings | Array of filepath strings to js files that the developer wants to include. | ||
| config.css | array of strings | Array of filepath strings to css files that the developer wants to include. | ||
| config.url | string | Url to content the developer wants to use for the uncontrolled-iframe configuration. | ||
| config.componentName | string | The name of the component as defined by JSON dot notation. | ||
| pageConfigs | shape | The page configuration object that loads scripting and styling scripts for the component. | ||
| pageConfigs.iframeSizerUrl | string | Url string to the iFrame Resizer. | ||
| pageConfigs.LABjsUrl | string | Url string to the iFrame Resizer. | ||
| allowDomains | array of strings | The allowable domains for the file to access. | ||
| language | string | The current language. | ||
| isPageLevel | bool | If true, makes the component use the whole page. | ||
| resourceLoadTimeout | number | Add a check interval timer to display error if request gets an unusable response. | ||
| enableIFrameScrolling | bool | Boolean to make the iFrame scrollable. | ||
| resourceVersion | string | Resource version to append to the static resource request. | ||
| iframeHeight | number | Height parameter for the iFrame. | ||
| id | string | Add an id to the iFrame. | ||
| iframeId | string | Used for determining if the id should be null or show the 'id'. | ||
| resizerOptions | object | Options to add to the iFrame resizer. | ||
| onIframeLoad | func | Function to be executed when iFrame loads. | ||
| title | string | String to set title attribute of the iFrame. |
Non React Components NonReactComponent
This component serves as a container to allow content created by other frameworks (such as jQuery) to exist within the React component tree. This component should always be a leaf child node in the tree. It should never have React children since those React components would never update.
Example
Props
| Name | Required | Type | Description | Default Value |
|---|---|---|---|---|
| id | string | id attribute for the component for mounting and unmounting the component. | ||
| elementType | string | Lists the type of element you are creating.Defaults Value: div | ||
| children | node | children of the component - this is what will be displayed inside the component. |
Loader Modals LoaderModal
Modal loading screen
Example
Props
| Name | Required | Type | Description | Default Value |
|---|---|---|---|---|
| text | string | Text that will appear beneath the spinner. | ||
| contained | bool | When true, the modal will be rendered inside the node that contains it, otherwise the modal will be rendered directly into the body of the document. |
Modals Modal
Modal component that will attach itself to the document body.
Example
Props
| Name | Required | Type | Description | Default Value |
|---|---|---|---|---|
| fullScreen | bool | If true the modal will cover the full screen. | ||
| show | bool | If false will prevent the modal from showing. | ||
| title | string | Title to add in the modal layover - it will appear in the top left corner and as a h2 element. | ||
| closeButton | bool | If true will add a close button to the top right corner of the modal. | ||
| onClose | func | Custom function to be executed when the modal is closed. |
Page Loaders PageLoader
Component to be shown whenever something is loading on a page
Example
SplitButtons SplitButton
A split button component. The right side opens a dropdown, and the left side is a customizable button.
Example
Props
| Name | Required | Type | Description | Default Value |
|---|---|---|---|---|
| buttonLabel | string | String of text to add to left button. | ||
| variationType | One of 'primary', 'secondary', 'tertiary' | Sets color of left button to dark grey(primary), light grey(secondary), or white(tertiary). | primary | |
| id | string | String to set the id attribute for the div containing the split button. | ||
| listHeight | number | Adds a max height to the dropdown list in pixels. | ||
| itemWrapper | func | Custom function for wrapping each item in this.props.items. | ||
| items | array | Array of objects to be rendered in dropdown. | ||
| onButtonSelect | func | Custom function to be executed when the user click the left button. | ||
| onItemSelect | func | Custom function to be executed when an item is selected from the dropdown list. | ||
| menuExtendsOnRight | bool | If true dropdown menu extends to the right. | ||
| menuExtendsOnLeft | bool | If true dropdown menu extends to the left. |