diff --git a/app/javascript/packages/components/README.md b/app/javascript/packages/components/README.md new file mode 100644 index 00000000000..4ffc99f457e --- /dev/null +++ b/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 ; +} +``` diff --git a/app/javascript/packages/components/index.ts b/app/javascript/packages/components/index.ts index 426b984c260..5c6b215a486 100644 --- a/app/javascript/packages/components/index.ts +++ b/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'; diff --git a/app/javascript/packages/document-capture/components/in-person-location-step.tsx b/app/javascript/packages/document-capture/components/in-person-location-step.tsx index e53644094b3..98d8e9824fd 100644 --- a/app/javascript/packages/document-capture/components/in-person-location-step.tsx +++ b/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 = ; + locationsContent = ; } else if (locationData.length < 1) { - locationItems =

{t('in_person_proofing.body.location.none_found')}

; + locationsContent =

{t('in_person_proofing.body.location.none_found')}

; } else { - locationItems = locationData.map((item, index) => ( - - )); + locationsContent = ( + + {locationData.map((item, index) => ( + + ))} + + ); } return ( <> {t('in_person_proofing.headings.location')} -

{t('in_person_proofing.body.location.location_step_about')}

- {locationItems} + {locationsContent} ); diff --git a/app/javascript/packages/components/location-collection-item.spec.tsx b/app/javascript/packages/document-capture/components/location-collection-item.spec.tsx similarity index 100% rename from app/javascript/packages/components/location-collection-item.spec.tsx rename to app/javascript/packages/document-capture/components/location-collection-item.spec.tsx diff --git a/app/javascript/packages/components/location-collection-item.tsx b/app/javascript/packages/document-capture/components/location-collection-item.tsx similarity index 100% rename from app/javascript/packages/components/location-collection-item.tsx rename to app/javascript/packages/document-capture/components/location-collection-item.tsx diff --git a/app/javascript/packages/components/location-collection.spec.tsx b/app/javascript/packages/document-capture/components/location-collection.spec.tsx similarity index 100% rename from app/javascript/packages/components/location-collection.spec.tsx rename to app/javascript/packages/document-capture/components/location-collection.spec.tsx diff --git a/app/javascript/packages/components/location-collection.tsx b/app/javascript/packages/document-capture/components/location-collection.tsx similarity index 100% rename from app/javascript/packages/components/location-collection.tsx rename to app/javascript/packages/document-capture/components/location-collection.tsx