DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Halstack Provider

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

Props

NameTypeDescriptionDefault
labelsTranslatedLabelsObject with a given structure, specified below, for defining translations.-
New
opinionatedTheme
OpinionatedThemeObject with a given structure, specified below, for defining the opinionated theme.-

Localization

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

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="var(--spacing-padding-xl)">
        <DxcFlex gap="var(--spacing-gap-xl)">
          <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).

Theming

You can apply the opinionated theming strategy to customize the components.

Below is an example of customizing the colours of a DxcButton:

() => {
  // Light palette example
  const lightPalette = {
    "--color-primary-50": "#d3f0b4",
    "--color-primary-100": "#a2df5e",
    "--color-primary-200": "#77c81f",
    "--color-primary-300": "#68ad1b",
    "--color-primary-400": "#579317",
    "--color-primary-500": "#487813",
    "--color-primary-600": "#39600f",
    "--color-primary-700": "#2b470b",
    "--color-primary-800": "#1c2f07",
    "--color-primary-900": "#0d1503",

    "--color-secondary-50": "#fff9d6",
    "--color-secondary-100": "#ffed99",
    "--color-secondary-200": "#ffe066",
    "--color-secondary-300": "#e6c84d",
    "--color-secondary-400": "#ccad33",
    "--color-secondary-500": "#b39426",
    "--color-secondary-600": "#8f741f",
    "--color-secondary-700": "#6b5517",
    "--color-secondary-800": "#47370f",
    "--color-secondary-900": "#241b08",
  };

  // Dark palette example
  const darkPalette = {
    "--color-primary-50": "#ffd6e7",
    "--color-primary-100": "#ff99c2",
    "--color-primary-200": "#ff66a3",
    "--color-primary-300": "#e05584",
    "--color-primary-400": "#c5446d",
    "--color-primary-500": "#a83659",
    "--color-primary-600": "#872b47",
    "--color-primary-700": "#661f35",
    "--color-primary-800": "#441423",
    "--color-primary-900": "#220a12",

    "--color-secondary-50": "#f3e6db",
    "--color-secondary-100": "#e2c7a9",
    "--color-secondary-200": "#d1a577",
    "--color-secondary-300": "#b88252",
    "--color-secondary-400": "#99673f",
    "--color-secondary-500": "#7a5232",
    "--color-secondary-600": "#5c3f26",
    "--color-secondary-700": "#3e2b19",
    "--color-secondary-800": "#21170d",
    "--color-secondary-900": "#100b06",
  };

  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme((prev) => {
      const newTheme = prev === "light" ? "dark" : "light";
      console.log("Toggling theme", newTheme);
      return newTheme;
    });
  };

  return (
    <HalstackProvider opinionatedTheme={theme === "light" ? lightPalette : darkPalette}>
      <DxcButton label="Toggle theme" onClick={toggleTheme} />
    </HalstackProvider>
  );
}

We create a lightPalette and darkPalette objects with as many CSS variables as we want and their respective values. Then we pass one of the objects based on the state of the theme to the Halstack Provider, which wraps our components, through its opinionatedTheme property.

Themes can be created with the Theme Generator tool, which allows you to define your brand colors and export a ready-to-use token structure to pass through the opinionatedTheme property.

On this page