Align JavaScript component names with USWDS (#414)

* Align JavaScript component names with USWDS

* Avoid ambiguous phrasing

* Use destructuring on map array

Co-authored-by: Zach Margolis <zachmargolis@users.noreply.github.com>

---------

Co-authored-by: Zach Margolis <zachmargolis@users.noreply.github.com>

CHANGELOG.md

@@ -44,6 +44,9 @@
     - `close-primary.svg` (use `close` icon instead)
     - `close.svg` (use `close` icon instead)
     - `hero.png`
+- Align JavaScript component names with U.S. Web Design System. ([#414](https://github.com/18F/identity-design-system/pull/414))
+  - `header` is now named `navigation`
+  - `validation` is now named `validator`
 
 ### Improvements
 

index.d.ts

@@ -11,14 +11,14 @@ import {
   inputMask as baseInputMask,
   languageSelector as baseLanguageSelector,
   modal as baseModal,
-  navigation as baseHeader,
+  navigation as baseNavigation,
   password as basePassword,
   search as baseSearch,
   skipnav as baseSkipnav,
   timePicker as baseTimePicker,
   table as baseTable,
   tooltip as baseTooltip,
-  validator as baseValidation,
+  validator as baseValidator,
 } from '@uswds/uswds';
 
 type ComponentLifecycle = (target?: HTMLElement) => any;
@@ -56,12 +56,12 @@ export const inPageNavigation: typeof baseInPageNavigation & BaseComponent;
 export const inputMask: typeof baseInputMask & BaseComponent;
 export const languageSelector: typeof baseLanguageSelector & BaseComponent;
 export const modal: typeof baseModal & BaseComponent;
-export const header: typeof baseHeader & BaseComponent;
+export const navigation: typeof baseNavigation & BaseComponent;
 export const password: typeof basePassword & BaseComponent;
 export const range: Range;
 export const search: typeof baseSearch & BaseComponent;
 export const skipnav: typeof baseSkipnav & BaseComponent;
 export const timePicker: typeof baseTimePicker & BaseComponent;
 export const table: typeof baseTable & BaseComponent;
 export const tooltip: Tooltip;
-export const validation: typeof baseValidation & BaseComponent;
+export const validator: typeof baseValidator & BaseComponent;

src/js/components/index.js

@@ -11,15 +11,15 @@ import inPageNavigation from '@uswds/uswds/js/usa-in-page-navigation';
 import inputMask from '@uswds/uswds/js/usa-input-mask';
 import languageSelector from '@uswds/uswds/js/usa-language-selector';
 import modal from '@uswds/uswds/js/usa-modal';
-import header from '@uswds/uswds/js/usa-header';
+import navigation from '@uswds/uswds/js/usa-header';
 import password from '@uswds/uswds/js/_usa-password';
 import range from '@uswds/uswds/js/usa-range';
 import search from '@uswds/uswds/js/usa-search';
 import skipnav from '@uswds/uswds/js/usa-skipnav';
 import timePicker from '@uswds/uswds/js/usa-time-picker';
 import table from '@uswds/uswds/js/usa-table';
 import tooltip from '@uswds/uswds/js/usa-tooltip';
-import validation from '@uswds/uswds/js/usa-validation';
+import validator from '@uswds/uswds/js/usa-validation';
 
 export {
   accordion,
@@ -35,13 +35,13 @@ export {
   inputMask,
   languageSelector,
   modal,
-  header,
+  navigation,
   password,
   range,
   search,
   skipnav,
   timePicker,
   table,
   tooltip,
-  validation,
+  validator,
 };

test/components/index.test.js

@@ -1,27 +1,22 @@
 import { describe, it } from 'node:test';
 import assert from 'node:assert';
 import { readFile } from 'node:fs/promises';
-import { basename, dirname } from 'node:path';
-import glob from 'fast-glob';
-
-/**
- * Converts a string to camel case.
- *
- * @param {string} str
- *
- * @return {string}
- */
-const camelCase = (str) => str.replace(/-([a-z])/g, (_match, character) => character.toUpperCase());
 
 describe('components', () => {
   it('re-exports all uswds components', async () => {
     const localComponentsFileContent = await readFile('./build/esm/components/index.js', 'utf-8');
     const localComponentKeys = Array.from(localComponentsFileContent.matchAll(/import ([a-z]+)/gi))
       .map((match) => match[1])
       .sort();
-    const uswdsComponentKeys = glob
-      .sync('./node_modules/@uswds/uswds/packages/*/src/index.js')
-      .map((path) => camelCase(basename(dirname(dirname(path))).replace(/^_?usa-/, '')))
+    const uswdsComponentsIndex = await readFile(
+      'node_modules/@uswds/uswds/packages/uswds-core/src/js/index.js',
+      'utf-8',
+    );
+    const [, exports] = /** @type {RegExpMatchArray} */ (
+      uswdsComponentsIndex.match(/module\.exports = \{([\s\S]+)\};/)
+    );
+    const uswdsComponentKeys = Array.from(exports.matchAll(/(?:\s+([a-zA-Z]+)),/g))
+      .map(([, capturedKey]) => capturedKey)
       .sort();
 
     assert(uswdsComponentKeys.length);