LG-6087 Add prep page to in-person flow

app/assets/stylesheets/components/_block-submit-button.scss

@@ -0,0 +1,17 @@
+.block-submit-button {
+  cursor: pointer;
+
+  &.usa-button--unstyled {
+    display: block;
+    line-height: 1.5;
+
+    &:hover,
+    &:active {
+      text-decoration: none;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}

app/assets/stylesheets/components/all.scss

@@ -1,6 +1,7 @@
 @import 'account-header';
 @import 'banner';
 @import 'block-link';
+@import 'block-submit-button';
 @import 'btn';
 @import 'card';
 @import 'container';

app/javascript/packages/components/block-link-arrow.tsx

@@ -0,0 +1,18 @@
+function BlockLinkArrow() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 5.2 8.91"
+      focusable="false"
+      aria-hidden="true"
+      className="block-link__arrow"
+    >
+      <path
+        d="M5.11 4.66L1 8.82a.36.36 0 01-.21.09.31.31 0 01-.2-.09l-.5-.45a.29.29 0 01-.09-.2A.36.36 0 01.09 8L3.6 4.45.09 1A.36.36 0 010 .74a.31.31 0 01.09-.2L.54.09A.31.31 0 01.74 0 .36.36 0 011 .09l4.11 4.16a.31.31 0 01.09.2.31.31 0 01-.09.21z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default BlockLinkArrow;

app/javascript/packages/components/block-link.tsx

@@ -1,4 +1,5 @@
 import Link, { LinkProps } from './link';
+import BlockLinkArrow from './block-link-arrow';
 
 export interface BlockLinkProps extends LinkProps {
   /**
@@ -13,18 +14,7 @@ function BlockLink({ href, children, className, ...linkProps }: BlockLinkProps)
   return (
     <Link href={href} {...linkProps} className={classes}>
       {children}
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 5.2 8.91"
-        focusable="false"
-        aria-hidden="true"
-        className="block-link__arrow"
-      >
-        <path
-          d="M5.11 4.66L1 8.82a.36.36 0 01-.21.09.31.31 0 01-.2-.09l-.5-.45a.29.29 0 01-.09-.2A.36.36 0 01.09 8L3.6 4.45.09 1A.36.36 0 010 .74a.31.31 0 01.09-.2L.54.09A.31.31 0 01.74 0 .36.36 0 011 .09l4.11 4.16a.31.31 0 01.09.2.31.31 0 01-.09.21z"
-          fill="currentColor"
-        />
-      </svg>
+      <BlockLinkArrow />
     </Link>
   );
 }

app/javascript/packages/components/block-submit-button.spec.tsx

@@ -0,0 +1,30 @@
+import { render } from '@testing-library/react';
+import BlockSubmitButton from './block-submit-button';
+
+describe('BlockSubmitButton', () => {
+  const buttonLabel = 'Click here to submit';
+
+  it('renders a button with an expected class name, type, and arrow content', () => {
+    const { getByRole } = render(<BlockSubmitButton>{buttonLabel}</BlockSubmitButton>);
+
+    const button = getByRole('button') as HTMLInputElement;
+
+    expect(button.classList.contains('block-submit-button')).to.be.true();
+    expect(button.querySelector('.block-link__arrow')).to.exist();
+    expect(button.textContent).to.equal(buttonLabel);
+    expect(button.type).to.equal('submit');
+  });
+
+  context('with custom css class', () => {
+    it('renders a link with passed class name', () => {
+      const { getByRole } = render(
+        <BlockSubmitButton className="my-custom-class">{buttonLabel}</BlockSubmitButton>,
+      );
+
+      const button = getByRole('button');
+
+      expect(button.classList.contains('block-submit-button')).to.be.true();
+      expect(button.classList.contains('my-custom-class')).to.be.true();
+    });
+  });
+});

app/javascript/packages/components/block-submit-button.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import BlockLinkArrow from './block-link-arrow';
+
+interface BlockSubmitButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+  /**
+   * Link text.
+   */
+  children?: ReactNode;
+
+  /**
+   * Additional class names to apply.
+   */
+  className?: string;
+}
+
+function BlockSubmitButton({ children, className, ...linkProps }: BlockSubmitButtonProps) {
+  const classes = [
+    'block-submit-button',
+    'usa-button--unstyled',
+    'usa-link',
+    'block-link',
+    'width-full',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <button type="submit" {...linkProps} className={classes}>
+      {children}
+      <BlockLinkArrow />
+    </button>
+  );
+}
+
+export default BlockSubmitButton;

app/javascript/packages/components/icon-list/icon-list-content.spec.tsx

@@ -0,0 +1,18 @@
+import { render } from '@testing-library/react';
+import IconListContent from './icon-list-content';
+
+describe('IconListContent', () => {
+  it('renders the component with expected class and children', () => {
+    const { getByText } = render(
+      <IconListContent>
+        <div>Example</div>
+      </IconListContent>,
+    );
+
+    const child = getByText('Example');
+    const item = child.parentElement!;
+
+    expect(item.classList.contains('usa-icon-list__content')).to.be.true();
+    expect(item.textContent).to.equal('Example');
+  });
+});

app/javascript/packages/components/icon-list/icon-list-content.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+interface IconListContentProps {
+  children?: ReactNode;
+}
+
+function IconListContent({ children }: IconListContentProps) {
+  const classes = 'usa-icon-list__content';
+
+  return <div className={classes}>{children}</div>;
+}
+
+export default IconListContent;

app/javascript/packages/components/icon-list/icon-list-icon.spec.tsx

@@ -0,0 +1,19 @@
+import { render } from '@testing-library/react';
+import IconListIcon from './icon-list-icon';
+
+describe('IconListIcon', () => {
+  it('renders the component with expected class and children', () => {
+    const { getByText } = render(
+      <IconListIcon className="example-class">
+        <div>Example</div>
+      </IconListIcon>,
+    );
+
+    const child = getByText('Example');
+    const item = child.parentElement!;
+
+    expect(item.classList.contains('usa-icon-list__icon')).to.be.true();
+    expect(item.classList.contains('example-class')).to.be.true();
+    expect(item.textContent).to.equal('Example');
+  });
+});

app/javascript/packages/components/icon-list/icon-list-icon.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+interface IconListIconProps {
+  children?: ReactNode;
+
+  className?: string;
+}
+
+function IconListIcon({ children, className }: IconListIconProps) {
+  const classes = ['usa-icon-list__icon', 'text-primary-dark', className].filter(Boolean).join(' ');
+
+  return <div className={classes}>{children}</div>;
+}
+
+export default IconListIcon;

app/javascript/packages/components/icon-list/icon-list-item.spec.tsx

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import IconListItem from './icon-list-item';
+
+describe('IconListItem', () => {
+  it('renders the component with expected class and children', () => {
+    const { container } = render(
+      <IconListItem icon="check_circle" title="Example title">
+        <div>Example</div>
+      </IconListItem>,
+    );
+
+    const wrapper = container.firstElementChild!;
+    expect(wrapper.classList.contains('usa-icon-list__item')).to.be.true();
+
+    const iconListIcon = wrapper.firstElementChild!;
+    expect(iconListIcon.classList.contains('usa-icon-list__icon')).to.be.true();
+    const icon = iconListIcon.firstElementChild!;
+    expect(icon.classList.contains('usa-icon')).to.be.true();
+    const iconListContent = iconListIcon.nextElementSibling!;
+    expect(iconListContent.classList.contains('usa-icon-list__content')).to.be.true();
+    const iconListTitle = iconListContent.firstElementChild!;
+    expect(iconListTitle.classList.contains('usa-icon-list__title')).to.be.true();
+    expect(iconListTitle.textContent).to.equal('Example title');
+    const child = iconListTitle.nextElementSibling!;
+    expect(child.textContent).to.equal('Example');
+  });
+});

app/javascript/packages/components/icon-list/icon-list-item.tsx

@@ -0,0 +1,29 @@
+import { Icon, IconListContent, IconListIcon, IconListTitle } from '@18f/identity-components';
+import type { ReactNode } from 'react';
+import type { DesignSystemIcon } from '../icon';
+
+interface IconListItemProps {
+  children?: ReactNode;
+
+  icon: DesignSystemIcon;
+
+  title: string;
+}
+
+function IconListItem({ children, icon, title }: IconListItemProps) {
+  const classes = 'usa-icon-list__item';
+
+  return (
+    <li className={classes}>
+      <IconListIcon>
+        <Icon icon={icon} />
+      </IconListIcon>
+      <IconListContent>
+        <IconListTitle>{title}</IconListTitle>
+        {children}
+      </IconListContent>
+    </li>
+  );
+}
+
+export default IconListItem;

app/javascript/packages/components/icon-list/icon-list-title.spec.tsx

@@ -0,0 +1,18 @@
+import { render } from '@testing-library/react';
+import IconListTitle from './icon-list-title';
+
+describe('IconListTitle', () => {
+  it('renders the component with expected class and children', () => {
+    const { getByText } = render(
+      <IconListTitle>
+        <div>Example</div>
+      </IconListTitle>,
+    );
+
+    const child = getByText('Example');
+    const item = child.parentElement!;
+
+    expect(item.classList.contains('usa-icon-list__title')).to.be.true();
+    expect(item.textContent).to.equal('Example');
+  });
+});

app/javascript/packages/components/icon-list/icon-list-title.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+
+interface IconListTitleProps {
+  children?: ReactNode;
+
+  className?: string;
+}
+
+function IconListTitle({ children, className }: IconListTitleProps) {
+  const classes = ['usa-icon-list__title', 'font-sans-md', 'padding-top-0', className]
+    .filter(Boolean)
+    .join(' ');
+
+  return <h3 className={classes}>{children}</h3>;
+}
+
+export default IconListTitle;

app/javascript/packages/components/icon-list/icon-list.spec.tsx

@@ -0,0 +1,18 @@
+import { render } from '@testing-library/react';
+import IconList from './icon-list';
+
+describe('IconList', () => {
+  it('renders the component with expected class and children', () => {
+    const { getByText } = render(
+      <IconList>
+        <div>Example</div>
+      </IconList>,
+    );
+
+    const child = getByText('Example');
+    const item = child.parentElement!;
+
+    expect(item.classList.contains('usa-icon-list')).to.be.true();
+    expect(item.textContent).to.equal('Example');
+  });
+});

app/javascript/packages/components/icon-list/icon-list.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+interface IconListProps {
+  children?: ReactNode;
+}
+
+function IconList({ children }: IconListProps) {
+  const classes = 'usa-icon-list';
+
+  return <ul className={classes}>{children}</ul>;
+}
+
+export default IconList;

app/javascript/packages/components/index.ts

@@ -1,12 +1,21 @@
 export { default as Accordion } from './accordion';
 export { default as Alert } from './alert';
-export { default as Button } from './button';
 export { default as BlockLink } from './block-link';
-export { default as Icon } from './icon';
+export { default as BlockSubmitButton } from './block-submit-button';
+export { default as Button } from './button';
 export { default as FullScreen } from './full-screen';
+export { default as Icon } from './icon';
+export { default as IconList } from './icon-list/icon-list';
+export { default as IconListContent } from './icon-list/icon-list-content';
+export { default as IconListIcon } from './icon-list/icon-list-icon';
+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 PageHeading } from './page-heading';
+export { default as ProcessList } from './process-list/process-list';
+export { default as ProcessListHeading } from './process-list/process-list-heading';
+export { default as ProcessListItem } from './process-list/process-list-item';
 export { default as ScrollIntoView } from './scroll-into-view';
 export { default as SpinnerDots } from './spinner-dots';
 export { default as StatusPage } from './status-page';

app/javascript/packages/components/process-list/process-list-heading.spec.tsx

@@ -0,0 +1,30 @@
+import { render } from '@testing-library/react';
+import ProcessListHeading from './process-list-heading';
+
+describe('ProcessListHeading', () => {
+  it('renders the component with expected class and children', () => {
+    const { getByText } = render(
+      <ProcessListHeading>
+        <li>Example</li>
+      </ProcessListHeading>,
+    );
+
+    const child = getByText('Example');
+    const item = child.parentElement!;
+
+    expect(item.classList.contains('usa-process-list__heading')).to.be.true();
+    expect(item.textContent).to.equal('Example');
+  });
+
+  it('renders the component with no class if unstyled is passed', () => {
+    const { container } = render(
+      <ProcessListHeading unstyled>
+        <li>Example</li>
+      </ProcessListHeading>,
+    );
+
+    const item = container.firstElementChild!;
+
+    expect(item.classList).to.be.empty();
+  });
+});