Molecules

List of Molecules

• Action Bottom Menu

• Action Button

• Action Sheet Confirm

• Base Action Card

• Basic Toast Notification

• Custom Top Tabs

• DatePicker

• Dropdown

• ErrorWebView

• Global Loader

• Header List

• List Action Card

• Main Layout Header

• Menu Item

• Modal

• Radio Buttons Group

• Search Input

• SVG Background

Action Bottom Menu

Description

Displays a menu of action buttons using a modal.

Props

Prop Name	Type	Description
actions	Array<ActionsSection>	Collection of ActionSection objects that represents each button
disabled	boolean (optional)	Does not display the Action Bottom Menu if it's true
backgroundColor	string (optional)	Color for the background of the sheet
title	string (optional)	Main title text of the sheet
onItemPressed	(actionId: string) => void	This method is called on every press of each button. The actionId is provided in the function so the action can be handled from the caller component
onClosePressed	() => void	This method is called when the ActionBottomMenu is closed
selectedItemColor	string (optional)	Color for the background of the selected button
selectedItemIconColor	string (optional)	Color for the icon inside of the selected button
selectedItems	any (optional)	An object of keys (actionIds) with boolean value to indicate if that action is selected or not.
menuHeight	number (optional)	Set a different height for the ActionBottomMenu
ref	ForwardedRef<Modalize>	ActionBottomSheet ref

Usage

<ActionBottomMenu
   title={'More'}
   actions={EXAMPLE_BOTTOM_MENU_ACTIONS}
   ref={actionBottomMenuRef.current[0]}
   disabled={isDisabled}
   selectedItemColor={theme.color.action.primary[400]}
   selectedItemIconColor={theme.color.surface[200]}
   selectedItems={{actionA: actionASelected, actionB: actionBSelected}}
   onItemPressed={item => demoAction(item)}
   onClosePressed={() => actionBottomMenuRef.current[0].current?.close()}
   backgroundColor={theme.color.surface[100]}
   menuHeight={500}
/>

Component

Action Bottom Menu

Action Button

Description

A basic button component that should render nicely on any platform. Supports a minimal level of customization.

Props

Prop Name	Type	Description
text	string	Text to display inside the button
iconName	string	Name of the icon in the button
iconStyle	TextStyle (optional)	Style applied to the icon
textStyle	TextStyle (optional)	Style applied to the text
buttonStyle	ViewStyle (optional)	Style applied to the button
customIcon	JSX.Element (optional)	Custom icon for the button
event	() => void (optional)	Event called when the button is pressed

Usage

<ActionButton
   text={'Example'}
   iconName="upload"
   event={() => null}
/>

Component

Action Button

Action Sheet Confirm

Description

Modal that displays information

Props

Prop Name	Type	Description
sheetRef	React.RefObject	ActionSheetConfirm ref
titlePrimary	string (optional)	Primary title for the modal
titleCancel	string (optional)	Cancel title for the modal
title	string (optional)	Text to display inside the modal as the title
description	string (optional)	Description message in the component
modalHeight	number (optional)	Height of the modal
event	() => void	Event called when the modal is pressed

Usage

<ActionSheetConfirm
   sheetRef={actionSheetConfirmRef}
   title={cardActionSelected?.title}
   description={strings.reissueCard.description.replace(
      '$CARD_LAST_FOUR',
       cardLastFourDigits,
   )}
   event={() => {
     if (cardActionSelected?.id) {
       sendReissueCard(
          cardActionSelected.id,
          cardActionSelected.analyticsEventName,
       );
     }
    }}
/>

Base Action Card

Description

Displays a common card that can contain a left component, center component, and right component. It also handles a press event.

It could be displayed without a card, and only display the child elements.

Props

All props are optional.

Prop Name	Type	Description
onPress	() => void	Handler to be called when the user presses the card
withCard	boolean	If true, renders a card for the component
cardProps	Omit<CardProps, 'onPress' | 'children'>	Props for the card when withCard is true.
rowStyles	ViewStyle	Style applied to the rows in the component
contentStyles	ViewStyle	Style applied to the content in the component
text	string	Text to be displayed in the base action card
contentComponent	JSX.Element	Content to be displayed on a View inside the card
leftIconName	string	Name for the icon shown to the left of the component
leftComponent	JSX.Element	Component displayed to the left of the base action card
hideLeftIcon	boolean	If true, hides the left icon
rightIconName	string	Name for the icon shown to the right of the component
rightComponent	JSX.Element	Component displayed to the right of the base action card
hideRightIcon	boolean	If true, hides the right icon
actionCardAnalyticsParams	ParamsTrackAnalytics

Usage

<BaseActionCard
   withCard={false}
   leftIconName={iconLeft ?? (leftIconComponent ? iconLeft : 'bookmark')}
   leftComponent={leftIconComponent}
   onPress={event}
   contentComponent={renderAccountItem()}
   rowStyles={{...rowStyles}}
/>

Basic Toast Notification

Description

A customizable animated notification pop-up with timing.

Props

Prop Name	Type	Description
interactable	boolean	If true, the toast notification can be pressed
onMainAction	() => {} (optional)	Function to be called when the toast notification is pressed
title	string (optional)	Text to be displayed
body	string (optional)	Content of the component
containerStyle	ViewStyle (optional)	Style applied to the container of the component
childrenLeft	any (optional)	Children to the left of the basic toast notification
childrenRight	any (optional)	Children to the right of the basic toast notification

Usage

<BasicToastNotication
   title={heading ? heading : errorHeading}
   body={body}
   interactable={false}
   childrenLeft={<LeftContent id={id} />}
   childrenRight={<RightContent hideNotification={hideNotication} />}
   containerStyle={ToastNotificationStyle(theme).container}
/>

Custom Top Tabs

Description

Tab bar on the top of the screen that lets the user switch between different routes by tapping the tabs or swiping horizontally.

Props

CustomTabsProps

Prop Name	Type	Description
event	(value?: string) => void	Even called when
data	CustomTabItem[]	Data for the top tabs

CustomTabItem

Prop Name	Type	Description
value	string	Value of the tab item
active	boolean (optional)	If true, the item can be pressed
id	string	ID of each tab item

Usage

<CustomTopTabs event={() => {}} data={EXAMPLE_DATA_CUSTOM_TOP_TABS} />

Component

Custom Top Tabs

Date Picker

Description

Component that renders date and time.

Props

Prop Name	Type	Description
onPress	() => void	Handler to be called when the date picker is pressed
isOpen	boolean	If true, date picker will be opened
selectedDate	Date	The date selected in the date picker
label	string (optional)	Label text for the date picker
shownDate	string (optional)	The date displayed in the date picker
withShadow	boolean (optional)	If true, the input of the date picker will have a shadow
labelStyle	ViewStyle (optional)	Style applied to the label
datePickerStyle	ViewStyle (optional)	Style applied to the date picker
containerStyle	ViewStyle (optional)	Style applied to the container
disabled	boolean (optional)	If true, disables the interaction for the date picker
error	string (optional)	Error message when there is one
primary	boolean (optional)	If true, sets the date picker input to primary
onError	(error: string | null) => void (optional)	Handler to be called when an error occurs

Usage

<DatePicker
   isOpen={isDatePickerOpen}
   onPress={() => setIsDatePickerOpen(true)}
   label={strings.enterBirthDate.birthDateInputLabel}
   containerStyle={editOnboardingInfoScreenStyles.marginBottom}
   selectedDate={currentSelectedDate.current}
   shownDate={valueDate}
   error={birthDateInputError}
   onError={setBirthDateInputError}
   onConfirm={date => {
     const formattedDate = dateFormatter(date);
     validateDate(formattedDate);
     setValueDate(formattedDate);
     currentSelectedDate.current = date;
     setIsDatePickerOpen(false);
   }}
   onCancel={() => {
     setIsDatePickerOpen(false);
   }}
/>

Component

Unselected

Selected

Disabled

Empty

Dropdown

Description

Displays a list of options to select one.

Props

All props are optional.

Prop Name	Type	Description
label	string	Label text displayed on the dropdown
labelRight	string	Label text displayed to the right of the component
containerStyle	ViewStyle	Style applied to the container
labelStyle	TextStyle	Style applied to the label
rowTextStyle	TextStyle	Style applied to the row
withSuccess	boolean	If true, the success style input will be applied
withError	boolean	If true, the error style input will be applied
disabled	boolean	If true, disables all interaction wit the dropdown
primary	boolean	If true, applies the primary settings for the dropdown
iconStyles	TextStyle	Style applied to the icon

Usage

<Dropdown
   label={strings.componentsDemo.dropdownDefaultDefaultValue}
   data={['Java', 'C#']}
   defaultValueByIndex={0}
   onSelect={() => {}}
   buttonTextAfterSelection={(selectedItem, _index) => {
      return selectedItem;
   }}
   rowTextForSelection={(selectedItem, _index) => {
      return selectedItem;
   }}
   containerStyle={componentsDemoStyles.marginBottom}
/>

Component

Closed

Opened

Error Web View

Description

Renders web error content in a native view.

Props

All props are optional.

Prop Name	Type	Description
title	string	Text displayed as the title of the error web view
subtitle	string	Subtitle of the error web view
icon	string	Icon in the component

Usage

<ErrorWebView title='Error example' />

Global Loader

Description

Displays a global loading indicator.

Props

All props are optional.

Prop Name	Type	Description
backgroundColor	string	Background color for the global loader
containerStyle	ViewStyle	Style applied to the container of the component

Usage

<GlobalLoader 
   backgroundColor={'blue'}
   containerStyle={webViewLayoutStyles().globalLoader} 
/>

Untitled

Linker's Global Loader

Header List

Description

Header component, that consists of an icon to the left, a title, a subtitle and a JSX element to the right.

Props

All props are optional.

Prop Name	Type	Description
iconLeft	string	Icon located to the left of the Header List
title	string	Text displayed as the title
subTitle	string	Text displayed as the subtitle
rightIcon	string	Name of the icon that goes to the right
event	() => void	Handler called when the accessory to the right is pressed
iconStyle	TextStyle	Style applied to the icon
titleStyles	TextStyle	Style applied to the title
accessoryRight	JSX.Element	Element located to the right of the Header List

Usage

<HeaderList
   title={strings.componentsDemo.headerListTitle}
   accessoryRight={
     <Switch
       onValueChange={setIsDisabled}
       value={isDisabled}
       style={componentsDemoStyles.marginBottom}
     />
   }
/>

Component

Header List

List Action Card

Description

A card component that contains an icon, a title and some text.

Props

Prop Name	Type	Description
CustomIcon	React.FC<SvgProps>
iconName	string
iconSize	number
title	string
text	string
event	() => void
containerStyles	ViewStyle
backgroundColor	string
iconColor	string
titleStyles	TextStyle
textStyle	TextStyle
analyticsParamListActionCard	ParamsTrackAnalytics

Usage

<ListActionCard
   iconName="info"
   title={strings.componentsDemo.actionCardTitle}
   text={strings.componentsDemo.actionCardText}
   event={() => {}}
/>

Component

List Action Card

Two different List Action Cards

Main Layout Header

Description

Component used for header layout.

Props

All props are optional.

Prop Name	Type	Description
title	string	Text displayed as title for the main layout header
titleProps	HeadingProps	Props for the title displayed
titleContainerStyle	ViewStyle	Style applied to the title container
leftIcon	string	Icon located to the left of the component
leftIconPres	() => void	Handler called when the left icon is pressed
hideLeftIcon	boolean	If true, hides the left icon
rightIcon	string	Icon located to the right of the component
rightIconPress	() => void	Handler called when the right icon is pressed
containerStyle	ViewStyle	Style applied to the container

Usage

<MainLayoutHeader
   leftIcon="user"
   leftIconPres={() => dispatch(DrawerActions.openDrawer())}
   rightIcon={isCloseButton ? 'x' : undefined}
   rightIconPress={
     isCloseButton ? () => dispatch(DrawerActions.closeDrawer()) : undefined
   }
   title={title ?? customerFullName}
   titleContainerStyle={
     title === undefined ? headerWithMenuStyles.titleContainer : {}
   }
/>

Component

Main Layout Header

Menu Item

Description

Component used for the Main Menu.

Props

All props are required.

Prop Name	Type	Description
leftIcon	string	Name for the icon that goes to the left of the card menu item.
description	string	Title or description that tells the user where it will redirect.
event	() => void	Event that will happen when the item is pressed.

Usage

<MenuItem
  leftIcon={iconName}
  description={itemTitle}
  event={onPress}
/>

Component

Menu Item

Modal

Description

A way to present content above an enclosing view.

Props

Prop Name	Type	Description
isOpen	boolean	If true, the modal is opened
onDismiss	() => void	Function called when the modal is dismissed
cardStyle	ViewStyle (optional)	Style applied to the card
backdropStyle	ViewStyle (optional)	Style applied to the backdrop
containerStyle	ViewStyle (optional)	Style applied to the container
children	JSX.Element | JSX.Element[] (optional)	Children of the component

Usage

<Modal
   isOpen={isActionModalOpen}
   onDismiss={() => setIsActionModalOpen(false)}>
   <View>
     <BodyText type="s3">
       {strings.componentsDemo.actionIdLabel} {actionId}
     </BodyText>
    </View>
</Modal>

Radio Buttons Group

Description

Group that contains various of Radio Button component.

Props

Prop Name	Type	Description
radioButtons	OptionRadioButton[]	Array of radio buttons
containerStyle	ViewStyle (optional)	Style applied to the container
radioButtonStyle	ViewStyle (optional)	Style applied to each radio button
textStyle	TextStyle (optional)	Style applied to the text
onPress	({id, text}: OptionRadioButton) => void	Function called when the radio buttons are clicked

Usage

<RadioButtonsGroup
   radioButtons={EXAMPLE_RADIO_BUTTONS}
   onPress={radioButtonSelected}
/>

Component

Radio Buttons Group

Search Input

Description

Input component used for searching a value

Props

These props extend the InputProps.

Prop Name	Type	Description
initialSearchValue	string (optional)	Initial value for the input
onQueryChanged	(text: string) => void	Function called when the query has been changed
currentQuery	string	Current query in the input

Usage

<SearchInput
   containerStyle={styles.separator}
   placeholder={'Search'}
   initialSearchValue={''}
   onQueryChanged={requestAfterSearchQueryChanged}
   currentQuery={queryValue}
/>

Component

Search Input

SVG Background

Description

Component to display an svg image as background.

Props

All props are optional.

Prop Name	Type	Description
children	React.ReactNode	Children of the component
stylesBackground	ViewStyle	Style applied to the svg background

Usage

<SVGBackground
   children={background}
   stylesBackground={stylesBackground}
/>