Localization

Translation

Halstack Design System provides the possibility to translate all the labels that cannot be changed by the component properties through the Halstack Provider and its property labels.

You will need to create an object with your translations. In this object, you will have as many objects as components you want to translate, using the label from the list we show here below, following the structure of the example.

Translation example

() => {
  const [items, changeItems] = useState(10);
  const itemsPerPageClick = (value) => {
    changeItems(value);
  };

  const labels = {
    formFields: {
      optionalLabel: "(Opcional)",
    },
    select: {
      actionClearSelectionTitle: "Eliminar selección",
    },
    textInput: {
      clearFieldActionTitle: "Limpiar",
    },
    paginator: {
      itemsPerPageText: "Número de elementos: ",
      pageOfText: (a, b) => `Página: ${a} de ${b}`,
    },
  };

  return (
    <HalstackProvider labels={labels}>
      <DxcInset space="2rem">
        <DxcSelect
          label="Label"
          helperText="Helper text"
          options={[
            { label: "Option 01", value: "1" },
            { label: "Option 02", value: "2" },
            { label: "Option 03", value: "3" },
            { label: "Option 04", value: "4" },
          ]}
          placeholder="Choose an option"
          multiple
          optional
        />
      </DxcInset>
      <DxcInset space="2rem">
        <DxcTextInput
          label="Input text"
          defaultValue="Example text"
          clearable
          optional
        />
      </DxcInset>
      <DxcInset space="2rem">
        <DxcPaginator
          itemsPerPageOptions={[10, 15]}
          totalItems={27}
          itemsPerPage={items}
          itemsPerPageFunction={itemsPerPageClick}
        ></DxcPaginator>
      </DxcInset>
    </HalstackProvider>
  );
}

Default labels

The following sections define the structure of the JSON object with the different components and their respective labels.

formFields

These labels are common to several components of the design system.

Label NameDefault valueDetails
optionalLabel(Optional)
requiredSelectionErrorMessageThis field is required. Please, choose an option.
requiredValueErrorMessageThis field is required. Please, enter a value.
formatRequestedErrorMessagePlease match the format requested.
lengthErrorMessageMin length minLength, max length maxLength.It is a function that receives two parameters (minlength and maxlength) and returns the text with those parameters.
logoAlternativeTextLogo

applicationLayout

Label NameDefault value
visibilityToggleTitleToggle visibility sidenav

alert

Label NameDefault value
previousMessageActionTitlePrevious message
nextMessageActionTitleNext message
closeAlertActionTitleClose alert
closeMessageActionTitleClose message

calendar

Label NameDefault value
daysShort[Mo, Tu, We, Th, Fr, Sa, Su]
months[January, February, March, April, May, June, July, August, September, October, November, December]
previousMonthTitlePrevious month
nextMonthTitleNext month

dateInput

Label NameDefault value
invalidDateErrorMessageInvalid date.

dialog

Label NameDefault value
closeIconAriaLabelClose dialog

fileInput

Label NameDefault value
fileSizeGreaterThanErrorMessageFile size must be greater than min size.
fileSizeLessThanErrorMessageFile size must be less than max size.
multipleButtonLabelDefaultSelect files
singleButtonLabelDefaultSelect file
dropAreaButtonLabelDefaultSelect
multipleDropAreaLabelDefaultor drop files
singleDropAreaLabelDefaultor drop file
deleteFileActionTitleRemove file
Label NameDefault valueDetails
copyrightText© DXC Technology year. All rights reserved.It is a function that receives one parameter (year) and returns the text with that parameter.

header

Label NameDefault value
closeIconClose menu
hamburguerTitleMenu

numberInput

Label NameDefault valueDetails
valueGreaterThanOrEqualToErrorMessageValue must be greater than or equal to value.It is a function that receives one parameter (value) and returns the text with that parameter.
valueLessThanOrEqualToErrorMessageValue must be less than or equal to value.It is a function that receives one parameter (value) and returns the text with that parameter.
decrementValueTitleDecrement value
incrementValueTitleIncrement value

paginator

Label NameDefault valueDetails
itemsPerPageTextItems per page:
minToMaxOfTextminNumberOfItems to maxNumberOfItems of totalItemsIt is a function that receives three parameters (minNumberOfItems, maxNumberOfItems and totalItems) and returns the text with those parameters.
goToPageTextGo to page:
pageOfTextPage: pageNumber of totalPagesNumberIt is a function that receives two parameters (pageNumber and totalPagesNumber) and returns the text with those parameters.

passwordInput

Label NameDefault value
inputShowPasswordTitleShow password
inputHidePasswordTitleHide password

quickNav

Label NameDefault value
contentTitleContents

radioGroup

Label NameDefault value
optionalItemLabelDefaultN/A

select

Label NameDefault value
noMatchesErrorMessageNo matches found
actionClearSelectionTitleClear selection
actionClearSearchTitleClear search

tabs

Label NameDefault value
scrollLeftScroll left
scrollRightScroll right

textInput

Label NameDefault value
clearFieldActionTitleClear field
searchingMessageSearching...
fetchingDataErrorMessageError fetching data