Document components JavaScript package and exclude feature-specific components

app/javascript/packages/components/README.md

@@ -0,0 +1,17 @@
+# `@18f/identity-components`
+
+React components for common UI interactions. These components are intended to be general-purpose and
+reusable, whereas domain-specific React components should be found in the package corresponding to
+the specific page or feature.
+
+Many of these components are React implementations for components of the [Login.gov Design System](https://design.login.gov/).
+
+## Example
+
+```tsx
+import { Button } from '@18f/identity-components';
+
+function MyComponent() {
+  return <Button isUnstyled>Continue</Button>;
+}
+```

app/javascript/packages/components/index.ts

@@ -12,8 +12,6 @@ export { default as IconListItem } from './icon-list/icon-list-item';
 export { default as IconListTitle } from './icon-list/icon-list-title';
 export { default as Link } from './link';
 export { default as PageFooter } from './page-footer';
-export { default as LocationCollection } from './location-collection';
-export { default as LocationCollectionItem } from './location-collection-item';
 export { default as PageHeading } from './page-heading';
 export { default as ProcessList } from './process-list/process-list';
 export { default as ProcessListHeading } from './process-list/process-list-heading';

app/javascript/packages/document-capture/components/in-person-location-step.tsx

@@ -1,12 +1,9 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { useI18n } from '@18f/identity-react-i18n';
-import {
-  PageHeading,
-  LocationCollectionItem,
-  LocationCollection,
-  SpinnerDots,
-} from '@18f/identity-components';
+import { PageHeading, SpinnerDots } from '@18f/identity-components';
 import BackButton from './back-button';
+import LocationCollection from './location-collection';
+import LocationCollectionItem from './location-collection-item';
 
 interface PostOffice {
   address: string;
@@ -160,33 +157,36 @@ function InPersonLocationStep({ onChange, toPreviousStep }) {
     };
   }, []);
 
-  let locationItems: React.ReactNode;
+  let locationsContent: React.ReactNode;
   if (!isLoadingComplete) {
-    locationItems = <SpinnerDots />;
+    locationsContent = <SpinnerDots />;
   } else if (locationData.length < 1) {
-    locationItems = <h4>{t('in_person_proofing.body.location.none_found')}</h4>;
+    locationsContent = <h4>{t('in_person_proofing.body.location.none_found')}</h4>;
   } else {
-    locationItems = locationData.map((item, index) => (
-      <LocationCollectionItem
-        key={`${index}-${item.name}`}
-        handleSelect={handleLocationSelect}
-        name={`${item.name} — ${t('in_person_proofing.body.location.post_office')}`}
-        streetAddress={item.streetAddress}
-        selectId={item.id}
-        formattedCityStateZip={item.formattedCityStateZip}
-        weekdayHours={item.weekdayHours}
-        saturdayHours={item.saturdayHours}
-        sundayHours={item.sundayHours}
-      />
-    ));
+    locationsContent = (
+      <LocationCollection>
+        {locationData.map((item, index) => (
+          <LocationCollectionItem
+            key={`${index}-${item.name}`}
+            handleSelect={handleLocationSelect}
+            name={`${item.name} — ${t('in_person_proofing.body.location.post_office')}`}
+            streetAddress={item.streetAddress}
+            selectId={item.id}
+            formattedCityStateZip={item.formattedCityStateZip}
+            weekdayHours={item.weekdayHours}
+            saturdayHours={item.saturdayHours}
+            sundayHours={item.sundayHours}
+          />
+        ))}
+      </LocationCollection>
+    );
   }
 
   return (
     <>
       <PageHeading>{t('in_person_proofing.headings.location')}</PageHeading>
-
       <p>{t('in_person_proofing.body.location.location_step_about')}</p>
-      <LocationCollection>{locationItems}</LocationCollection>
+      {locationsContent}
       <BackButton onClick={toPreviousStep} />
     </>
   );