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 much objects as components you want to translate, using the label from the list we will show below, following the structure you can see in 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) => `Pagina: ${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) => `Pagina: ${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 lists define the structure of the JSON object containing the different components and the associated labels.

formFields

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

Label Name	Default value
`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

alert

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

dateInput

Label Name	Default value
`invalidDateErrorMessage`	Invalid date.

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

Label Name	Default value
`copyrightText`	© DXC Technology `year`. All rights reserved.	It is a function that receives one parameter (year) and returns the text with that parameter.

numberInput

Label Name	Default value
`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
`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.