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>
  );
}

() => {
  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 Name	Default value	Details
`optionalLabel`	(Optional)
`requiredSelectionErrorMessage`	This field is required. Please, choose an option.
`requiredValueErrorMessage`	This field is required. Please, enter a value.
`formatRequestedErrorMessage`	Please match the format requested.
`lengthErrorMessage`	Min length `minLength`, max length `maxLength`.	It is a function that receives two parameters (minlength and maxlength) and returns the text with those parameters.
`logoAlternativeText`	Logo

applicationLayout

Label Name	Default value
`visibilityToggleTitle`	Toggle visibility sidenav

alert

Label Name	Default value
`infoTitleText`	information
`successTitleText`	success
`warningTitleText`	warning
`errorTitleText`	error

calendar

Label Name	Default value
`daysShort`	[Mo, Tu, We, Th, Fr, Sa, Su]
`months`	[January, February, March, April, May, June, July, August, September, October, November, December]
`previousMonthTitle`	Previous month
`nextMonthTitle`	Next month

dateInput

Label Name	Default value
`invalidDateErrorMessage`	Invalid date.

dialog

Label Name	Default value
`closeIconAriaLabel`	Close dialog

fileInput

Label Name	Default value
`fileSizeGreaterThanErrorMessage`	File size must be greater than min size.
`fileSizeLessThanErrorMessage`	File size must be less than max size.
`multipleButtonLabelDefault`	Select files
`singleButtonLabelDefault`	Select file
`dropAreaButtonLabelDefault`	Select
`multipleDropAreaLabelDefault`	or drop files
`singleDropAreaLabelDefault`	or drop file
`deleteFileActionTitle`	Remove file

Label Name	Default value	Details
`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 Name	Default value
`closeIcon`	Close menu
`hamburguerTitle`	Menu

numberInput

Label Name	Default value	Details
`valueGreaterThanOrEqualToErrorMessage`	Value must be greater than or equal to `value`.	It is a function that receives one parameter (value) and returns the text with that parameter.
`valueLessThanOrEqualToErrorMessage`	Value must be less than or equal to `value`.	It is a function that receives one parameter (value) and returns the text with that parameter.
`decrementValueTitle`	Decrement value
`incrementValueTitle`	Increment value

paginator

Label Name	Default value	Details
`itemsPerPageText`	Items per page:
`minToMaxOfText`	`minNumberOfItems` to `maxNumberOfItems` of `totalItems`	It is a function that receives three parameters (minNumberOfItems, maxNumberOfItems and totalItems) and returns the text with those parameters.
`goToPageText`	Go to page:
`pageOfText`	Page: `pageNumber` of `totalPagesNumber`	It is a function that receives two parameters (pageNumber and totalPagesNumber) and returns the text with those parameters.

passwordInput

Label Name	Default value
`inputShowPasswordTitle`	Show password
`inputHidePasswordTitle`	Hide password

quickNav

Label Name	Default value
`contentTitle`	Contents

radioGroup

Label Name	Default value
`optionalItemLabelDefault`	N/A

select

Label Name	Default value
`noMatchesErrorMessage`	No matches found
`actionClearSelectionTitle`	Clear selection
`actionClearSearchTitle`	Clear search

tabs

Label Name	Default value
`scrollLeft`	Scroll left
`scrollRight`	Scroll right

textInput

Label Name	Default value
`clearFieldActionTitle`	Clear field
`searchingMessage`	Searching...
`fetchingDataErrorMessage`	Error fetching data

Translation
Translation example
Default labels

Edit this page on GitHub

Report an issue on GitHub

Layout

NextSpacing