@gitlab/ui/dist/config.js

GitLab UI Components

import translationKeys from '../translations';

const i18n = translationKeys;
const defaultConfig = {
  firstDayOfWeek: 0 // Defaults to 0 (Sunday)
};
const glButtonConfig = {};
let configured = false;

/**
 * Set GitLab UI configuration.
 *
 * @typedef {object} GitLabUIConfiguration
 * @template TValue=string
 * @property {undefined | Object} translations Generic translations for component labels to fall back to.
 * @property {undefined | Number} firstDayOfWeek Configured first day of the week, from 0 (Sunday) to 6 (Saturday).
 * @property {boolean} [accessibleDisabledButton] Temporary flag to enable the accessible disabled button.
 *
 */
const setConfigs = function () {
  let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
    translations = _ref.translations,
    firstDayOfWeek = _ref.firstDayOfWeek,
    _ref$accessibleDisabl = _ref.accessibleDisabledButton,
    accessibleDisabledButton = _ref$accessibleDisabl === void 0 ? false : _ref$accessibleDisabl;
  if (configured) {
    if (process.env.NODE_ENV === 'development') {
      throw new Error('GitLab UI can only be configured once!');
    }
    return;
  }
  configured = true;
  if (typeof firstDayOfWeek === 'number' && firstDayOfWeek >= 0 && firstDayOfWeek <= 6) {
    defaultConfig.firstDayOfWeek = firstDayOfWeek;
  }
  if (typeof translations === 'object') {
    if (process.env.NODE_ENV === 'development') {
      const undefinedTranslationKeys = Object.keys(i18n).reduce((acc, current) => {
        if (!(current in translations)) {
          acc.push(current);
        }
        return acc;
      }, []);
      if (undefinedTranslationKeys.length) {
        /* eslint-disable no-console */
        console.warn('[@gitlab/ui] The following translations have not been given, so will fall back to their default US English strings:');
        console.table(undefinedTranslationKeys);
        /* eslint-enable no-console */
      }
    }
    Object.assign(i18n, translations);
  }

  // Temporary flag to enable the accessible disabled button feature.
  // This flag allows the feature to be opt-in during the rollout phase,
  // giving us the flexibility to test and validate its impact on user experience.

  // The global variable `accessibleDisabledButton` is set to a boolean value
  // to indicate whether the button should use aria-disabled while disabled.

  // Future Plan:
  // Once the accessible disabled button feature is validated and stable,
  // we will remove this temporary flag and make the feature the default behavior.
  // At that point, there will be no need for opt-in or opt-out mechanisms for this feature.
  if (typeof accessibleDisabledButton === 'boolean') {
    Object.assign(glButtonConfig, {
      accessibleDisabledButton
    });
  }
};

export { setConfigs as default, defaultConfig, glButtonConfig, i18n };