Halstack Provider

Halstack Provider is the context provider used for a whole application or an isolated group of components, which defines the custom theme and/or translation labels.

Props

Name	Type	Description	Default
theme	`OpinionatedTheme`	Object with a given structure, specified below, for defining the opinionated theme.	-
advancedTheme	`AdvancedTheme`	Object with a given structure, specified below, for defining the advanced theme.	-
labels	`TranslatedLabels`	Object with a given structure, specified below, for defining translations.	-

Opinionated Theme

As explained on the Themes page, you can apply the opinionated theming strategy to customize the components.

information

Remember that you can use the opinionated theme generator to help you create themes.

Below is an example of customizing the colours of a DxcAccordion and a DxcTextInput:

() => {
  const customTheme = {
    accordion: {
      accentColor: "#1b75bb",
      fontColor: "#666666",
    },
    textInput: {
      fontColor: "#f80808",
    },
  };

  return (
    <HalstackProvider theme={customTheme}>
      <DxcInset space="2rem">
        <DxcAccordion isExpanded label="Accordion">
          <DxcInset space="2rem">
            <DxcTextInput label="Enter your surname" defaultValue="Harris" />
          </DxcInset>
        </DxcAccordion>
      </DxcInset>
    </HalstackProvider>
  );
}

() => {
  const customTheme = {
    accordion: {
      accentColor: "#1b75bb",
      fontColor: "#666666",
    },
    textInput: {
      fontColor: "#f80808",
    },
  };

  return (
    <HalstackProvider theme={customTheme}>
      <DxcInset space="2rem">
        <DxcAccordion isExpanded label="Accordion">
          <DxcInset space="2rem">
            <DxcTextInput label="Enter your surname" defaultValue="Harris" />
          </DxcInset>
        </DxcAccordion>
      </DxcInset>
    </HalstackProvider>
  );
}

We create a customTheme object with as many components as we want and their respective values. Then we pass this object to the Halstack Provider, which wraps our components, through its theme property.

Advanced theme

Advanced theming is the option to choose when further customization is required. To find out which use cases are valid for this strategy, you can refer to the Themes page.

information

Remember that you can use the advanced theme generator to help you create themes.

() => {
  const advancedTheme = {
    accordion: {
      backgroundColor: "#4a90e2",
      hoverBackgroundColor: "#b8e986",
      arrowColor: "#ffffff",
      disabledArrowColor: "#999999",
      assistiveTextFontSize: "1.5rem",
      assistiveTextFontWeight: "400",
      assistiveTextLetterSpacing: "-0.0125em",
      assistiveTextFontColor: "#f6fa06",
    },
  };
  
  return (
    <HalstackProvider advancedTheme={advancedTheme}>
      <DxcInset space="2rem">
        <DxcAccordion isExpanded label="Accordion" assistiveText="Assistive text">
          <DxcInset space="2rem">
            <DxcTextInput label="Enter your surname" defaultValue="Harris" />
          </DxcInset>
        </DxcAccordion>
      </DxcInset>
    </HalstackProvider>
  );
}

() => {
  const advancedTheme = {
    accordion: {
      backgroundColor: "#4a90e2",
      hoverBackgroundColor: "#b8e986",
      arrowColor: "#ffffff",
      disabledArrowColor: "#999999",
      assistiveTextFontSize: "1.5rem",
      assistiveTextFontWeight: "400",
      assistiveTextLetterSpacing: "-0.0125em",
      assistiveTextFontColor: "#f6fa06",
    },
  };
  
  return (
    <HalstackProvider advancedTheme={advancedTheme}>
      <DxcInset space="2rem">
        <DxcAccordion isExpanded label="Accordion" assistiveText="Assistive text">
          <DxcInset space="2rem">
            <DxcTextInput label="Enter your surname" defaultValue="Harris" />
          </DxcInset>
        </DxcAccordion>
      </DxcInset>
    </HalstackProvider>
  );
}

In the example above we have customized some of the DxcAccordion tokens. As you can see, it is not necessary to pass all the tokens of the component, only those that you want to change their value with respect to the default theme.

Localization

Halstack Provider can be used to translate all the labels that cannot be changed by the component properties.

information

To find out the list of labels that are translatable we should refer to the documentation in the Localization section.

Let's imagine that we want to translate the '(Optional)' label of a DxcTextInput, as well as the error messages of our DxcFileInput component. To do so, we need to create an object with the translations. In this object, you will have as many objects as components you want to translate with the respective translation for their labels.

() => {
  const [items, changeItems] = useState(10);
  const [files, setFiles] = useState([]);

  const itemsPerPageClick = (value) => {
    changeItems(value);
  };
  const callbackFile = (files) => {
    const updatedFiles = files.map((file) => {
      return { ...file };
    });
    setFiles(updatedFiles);
  };

  const labels = {
    formFields: {
      optionalLabel: "(Optionnel)",
    },
    fileInput: {
      fileSizeLessThanErrorMessage:
        "La taille du fichier doit être inférieure à la taille maximale.",
    },
  };

  return (
    <HalstackProvider labels={labels}>
      <DxcInset space="2rem">
        <DxcFlex gap="2rem">
          <DxcTextInput
            label="Input text"
            defaultValue="Example text"
            clearable
            optional
          />
          <DxcFileInput
            label="Select your files"
            value={files}
            callbackFile={callbackFile}
            minSize={0}
            maxSize={0}
          />
          </DxcFlex>
        </DxcInset>
    </HalstackProvider>
  );
}

() => {
  const [items, changeItems] = useState(10);
  const [files, setFiles] = useState([]);

  const itemsPerPageClick = (value) => {
    changeItems(value);
  };
  const callbackFile = (files) => {
    const updatedFiles = files.map((file) => {
      return { ...file };
    });
    setFiles(updatedFiles);
  };

  const labels = {
    formFields: {
      optionalLabel: "(Optionnel)",
    },
    fileInput: {
      fileSizeLessThanErrorMessage:
        "La taille du fichier doit être inférieure à la taille maximale.",
    },
  };

  return (
    <HalstackProvider labels={labels}>
      <DxcInset space="2rem">
        <DxcFlex gap="2rem">
          <DxcTextInput
            label="Input text"
            defaultValue="Example text"
            clearable
            optional
          />
          <DxcFileInput
            label="Select your files"
            value={files}
            callbackFile={callbackFile}
            minSize={0}
            maxSize={0}
          />
          </DxcFlex>
        </DxcInset>
    </HalstackProvider>
  );
}

*(to see the translated error message you should try to add any file on the DxcFileInput).

Props
Opinionated Theme
Advanced theme
Localization

Edit this page on GitHub

Report an issue on GitHub

Typography

NextAccordion

Halstack Provider

Props

Opinionated Theme

Advanced theme

Localization

Contents