Merge branch 'main' into release/9.0

.eslintrc.js

@@ -61,6 +61,12 @@ module.exports = {
         'testing-library/render-result-naming-convention': 'warn',
       },
     },
+    {
+      files: ['./packages/**/*.{js,jsx,ts,tsx}'],
+      rules: {
+        'no-console': ['error', { allow: ['warn', 'error'] }],
+      },
+    },
     {
       files: ['*.jsx'],
       rules: {
@@ -90,8 +96,9 @@ module.exports = {
       },
     },
     {
-      files: ['*.stories.jsx'],
+      files: ['*.stories.{jsx,tsx}'],
       rules: {
+        'no-console': 'off',
         'react/prop-types': 'off',
         'react/no-array-index-key': 'off',
       },

.storybook/preview.tsx

@@ -1,14 +1,7 @@
 import './storybookStyles.scss';
 import React from 'react';
 import DocumentationTemplate from './docs/DocumentationTemplate.mdx';
-import {
-  setAlertSendsAnalytics,
-  setButtonSendsAnalytics,
-  setDialogSendsAnalytics,
-  setHelpDrawerSendsAnalytics,
-  setErrorPlacementDefault,
-} from '../packages/design-system/src/components/flags';
-import { setHeaderSendsAnalytics } from '../packages/ds-healthcare-gov/src/components/flags';
+import { config } from '../packages/design-system/src/components/config';
 import { setLanguage } from '../packages/design-system/src/components/i18n';
 import { setLanguage as setLanguageFromPackage } from '@cmsgov/design-system';
 import themes from '../themes.json';
@@ -85,8 +78,11 @@ const themeSettingDecorator = (Story, context) => {
   const themeCss = document.querySelector('link[title=themeCss]') as HTMLLinkElement;
   themeCss.href = `${theme}-theme.css`;
 
-  // Child design system flag settings could be handled better in the future
-  setErrorPlacementDefault(theme === 'healthcare' ? 'bottom' : 'top');
+  if (theme === 'healthcare') {
+    config(config.HEALTHCARE_DEFAULTS);
+  } else {
+    config(config.DEFAULTS);
+  }
 
   return <Story {...context} />;
 };
@@ -110,11 +106,13 @@ const analyticsSettingsDecorator = (Story, context) => {
 
   const on = analytics === 'on';
 
-  setAlertSendsAnalytics(on);
-  setButtonSendsAnalytics(on);
-  setDialogSendsAnalytics(on);
-  setHelpDrawerSendsAnalytics(on);
-  setHeaderSendsAnalytics(on);
+  config({
+    alertSendsAnalytics: on,
+    buttonSendsAnalytics: on,
+    dialogSendsAnalytics: on,
+    helpDrawerSendsAnalytics: on,
+    headerSendsAnalytics: on,
+  });
 
   return <Story {...context} />;
 };

.stylelintrc.js

@@ -33,6 +33,10 @@ module.exports = {
         'include',
         // TODO: At some point we will be switching from 'import' to 'use'
         'import',
+        // SCSS at-rules
+        'forward',
+        'container',
+        'each',
       ],
       { severity: 'warning' },
     ],

packages/design-system-tokens/src/index.ts

@@ -39,12 +39,12 @@ const tokenExporter = (inputType: string, exportType: string): number => {
   }
 
   const help = (error: string) => {
-    console.log(`\n error: ${error}`);
-    console.log('-------------------------------------------------------------');
-    console.log(' usage : yarn build input_type output_type');
-    console.log(`         where input_type can be ${INPUT_TYPES}`);
-    console.log(`         and output_type can be ${EXPORT_TYPES}`);
-    console.log('-------------------------------------------------------------\n');
+    console.error(`\n error: ${error}`);
+    console.error('-------------------------------------------------------------');
+    console.error(' usage : yarn build input_type output_type');
+    console.error(`         where input_type can be ${INPUT_TYPES}`);
+    console.error(`         and output_type can be ${EXPORT_TYPES}`);
+    console.error('-------------------------------------------------------------\n');
     process.exit(1);
   };
 

packages/design-system-tokens/src/lib/file.ts

@@ -72,6 +72,7 @@ export const getFileDescriptors = (rootPath: string): FileDescriptor[] => {
 export const writeFile = (filename: string, fileData: string): number => {
   try {
     fs.writeFileSync(filename, fileData);
+    // eslint-disable-next-line no-console
     console.log(`:: wrote ${filename}`);
     return 0;
   } catch (err) {

packages/design-system/src/components/Alert/Alert.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Alert, { AlertProps } from './Alert';
 import { UtagContainer } from '../analytics';
-import { setAlertSendsAnalytics } from '../flags';
+import { config } from '../config';
 import { render, screen } from '@testing-library/react';
 
 const defaultText = 'Ruhroh';
@@ -118,15 +118,15 @@ describe('Alert', function () {
     let tealiumMock;
 
     beforeEach(() => {
-      setAlertSendsAnalytics(true);
+      config({ alertSendsAnalytics: true });
       tealiumMock = jest.fn();
       (window as any as UtagContainer).utag = {
         link: tealiumMock,
       };
     });
 
     afterEach(() => {
-      setAlertSendsAnalytics(false);
+      config({ alertSendsAnalytics: false });
       jest.resetAllMocks();
     });
 
@@ -154,7 +154,7 @@ describe('Alert', function () {
     });
 
     it('setting analytics to true overrides flag value', () => {
-      setAlertSendsAnalytics(false);
+      config({ alertSendsAnalytics: false });
       renderAlert({ heading: 'dialog heading', variation: 'error', analytics: true });
       expect(tealiumMock).toHaveBeenCalled();
     });

packages/design-system/src/components/Alert/Alert.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useRef } from 'react';
 import classNames from 'classnames';
 import mergeRefs from '../utilities/mergeRefs';
 import useAutofocus from '../utilities/useAutoFocus';

packages/design-system/src/components/Alert/useAlertAnalytics.ts

@@ -1,24 +1,17 @@
-import {
-  defaultAnalyticsFunction,
-  EventCategory,
-  EventType,
-  useAnalyticsContent,
-  eventExtensionText,
-} from '../analytics';
+import { EventCategory, EventType, useAnalyticsContent, eventExtensionText } from '../analytics';
 import { AlertProps } from './Alert';
-import { alertSendsAnalytics } from '../flags';
+import { config } from '../config';
 
 export default function useAlertAnalytics({
   analytics,
   analyticsLabelOverride,
-  onAnalyticsEvent = defaultAnalyticsFunction,
+  onAnalyticsEvent = config().defaultAnalyticsFunction,
   variation,
 }: AlertProps) {
   // Order matters! Content comes from the heading first and falls back to body if heading doesn't exist
   const [headingRef, bodyRef] = useAnalyticsContent({
-    componentName: 'Alert',
     onMount: (content: string | undefined) => {
-      if (analytics !== true && (!alertSendsAnalytics() || analytics === false)) {
+      if (analytics !== true && (!config().alertSendsAnalytics || analytics === false)) {
         return;
       }
 

packages/design-system/src/components/Autocomplete/Autocomplete.tsx

@@ -4,7 +4,7 @@ import DropdownMenu from '../Dropdown/DropdownMenu';
 import classNames from 'classnames';
 import mergeRefs from '../utilities/mergeRefs';
 import useId from '../utilities/useId';
-import { errorPlacementDefault } from '../flags';
+import { config } from '../config';
 import {
   renderReactStatelyItems,
   renderStatusMessage,
@@ -15,7 +15,6 @@ import {
 import { t } from '../i18n';
 import { useComboBox } from '../react-aria'; // from react-aria
 import { useComboBoxState } from '../react-aria'; // from react-stately
-import { ErrorPlacement } from '../InlineError/useInlineError';
 
 export interface AutocompleteItem extends Omit<React.HTMLAttributes<'option'>, 'name'> {
   /**
@@ -242,8 +241,7 @@ export const Autocomplete = (props: AutocompleteProps) => {
   // The display of bottom placed errorMessages in TextField breaks the Autocomplete's UI design.
   // Add errorMessageClassName to fix the styles for bottom placed errors
   const bottomError =
-    (textField.props.errorPlacement === ErrorPlacement.Bottom ||
-      errorPlacementDefault() === ErrorPlacement.Bottom) &&
+    (textField.props.errorPlacement === 'bottom' || config().errorPlacementDefault === 'bottom') &&
     textField.props.errorMessage != null;
 
   const errorMessageClassName = classNames(

packages/design-system/src/components/Button/Button.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Button from './Button';
 import { UtagContainer } from '../analytics';
-import { setButtonSendsAnalytics } from '../flags';
+import { config } from '../config';
 import { fireEvent, render, screen } from '@testing-library/react';
 
 const defaultProps = {
@@ -87,15 +87,15 @@ describe('Button', () => {
     let tealiumMock;
 
     beforeEach(() => {
-      setButtonSendsAnalytics(true);
+      config({ buttonSendsAnalytics: true });
       tealiumMock = jest.fn();
       (window as any as UtagContainer).utag = {
         link: tealiumMock,
       };
     });
 
     afterEach(() => {
-      setButtonSendsAnalytics(false);
+      config({ buttonSendsAnalytics: false });
       jest.resetAllMocks();
     });
 
@@ -118,7 +118,7 @@ describe('Button', () => {
     });
 
     it('setting analytics to true overrides flag value', () => {
-      setButtonSendsAnalytics(false);
+      config({ buttonSendsAnalytics: false });
       renderButton({ analytics: true });
       fireEvent.click(screen.getByRole('button'));
       expect(tealiumMock).toHaveBeenCalled();

packages/design-system/src/components/Button/useButtonAnalytics.ts

@@ -1,7 +1,6 @@
 import { ButtonProps } from './Button';
-import { buttonSendsAnalytics } from '../flags';
+import { config } from '../config';
 import {
-  defaultAnalyticsFunction,
   EventCategory,
   EventType,
   getAnalyticsContentFromRefs,
@@ -15,14 +14,14 @@ export default function useButtonAnalytics({
   analyticsParentHeading,
   analyticsParentType,
   href,
-  onAnalyticsEvent = defaultAnalyticsFunction,
+  onAnalyticsEvent = config().defaultAnalyticsFunction,
   type,
   variation,
 }: ButtonProps) {
   const contentRef = useRef();
 
   function sendButtonEvent() {
-    if (analytics !== true && (!buttonSendsAnalytics() || analytics === false)) {
+    if (analytics !== true && (!config().buttonSendsAnalytics || analytics === false)) {
       return;
     }
 

packages/design-system/src/components/ChoiceList/ChoiceList.test.tsx

@@ -26,7 +26,7 @@ function renderChoiceList(customProps = {}, choicesCount = 2) {
     errorMessage: 'Hey, you have to pick an answer',
     name: 'spec-field',
     type: 'radio' as ChoiceListType,
-    onChange: () => {},
+    onChange: () => null,
     ...customProps,
   };
   return render(<ChoiceList {...props} />);