While each of the code components can be configured on an individual basis, applications may want to configure some global settings for their components so they don't have to repeat the configuration for, say, every instance of a button. As of version 9 of the @cmsgov/design-system package, the controls for the various global configuration options have been rolled up into a single function that can be called to set or get global design-system settings.
Calling the config function
Because these are global settings, you'll want to put this code somewhere universal to your application. It should NOT be a place that is called multiple times like a React render function. Typically this would go in some sort of index or main module if you bundle your JavaScript, but it's highly dependent on the structure of your app or website. Here's an example of calling this function.
// Import from the package that corresponds to your theme (one of these):
import { config } from '@cmsgov/design-system';
import { config } from '@cmsgov/ds-cms-gov';
import { config } from '@cmsgov/ds-healthcare-gov';
import { config } from '@cmsgov/ds-medicare-gov';
// Then call the config function with your configuration settings
config({ alertSendsAnalytics: true });
Note that the return value of the function is the design system's current global configuration (see the example below).
import { config } from '@cmsgov/design-system';
if (config().alertSendsAnalytics) {
alert('Verify that no PII is logged by alerts!');
}
Configuration options
A full list of config options can be found in the config module source, but the following sections explain some of them in more detail.
Error placement
Some brands choose to put their inline errors above each form field, and some choose to place them directly below. This can be changed by setting the errorPlacementDefault boolean. Note that individual component instances can override this global setting through the errorPlacement prop (for React/Preact components) or error-placement attribute (for web components).