LG-6220: Add password confirm text content (IdV app)

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

@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react';
+import BlockLink from './block-link';
+
+describe('BlockLink', () => {
+  it('renders a link with expected class name and arrow content', () => {
+    const { getByRole } = render(<BlockLink href="/" />);
+
+    const link = getByRole('link');
+
+    expect(link.classList.contains('block-link')).to.be.true();
+    expect(link.querySelector('.block-link__arrow')).to.exist();
+  });
+
+  context('with custom css class', () => {
+    it('renders a link with expected class names', () => {
+      const { getByRole } = render(<BlockLink href="/" className="my-custom-class" />);
+
+      const link = getByRole('link');
+
+      expect(link.classList.contains('block-link')).to.be.true();
+      expect(link.classList.contains('my-custom-class')).to.be.true();
+    });
+  });
+});

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

@@ -0,0 +1,32 @@
+import Link, { LinkProps } from './link';
+
+interface BlockLinkProps extends LinkProps {
+  /**
+   * Link destination.
+   */
+  href: string;
+}
+
+function BlockLink({ href, children, className, ...linkProps }: BlockLinkProps) {
+  const classes = ['block-link', className].filter(Boolean).join(' ');
+
+  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>
+    </Link>
+  );
+}
+
+export default BlockLink;

app/javascript/packages/components/index.ts

@@ -5,6 +5,7 @@ export { default as ButtonTo } from './button-to';
 export { default as BlockLink } from './block-link';
 export { default as Icon } from './icon';
 export { default as FullScreen } from './full-screen';
+export { default as Link } from './link';
 export { default as PageHeading } from './page-heading';
 export { default as SpinnerDots } from './spinner-dots';
 export { default as TextInput } from './text-input';

app/javascript/packages/components/link.spec.tsx

@@ -0,0 +1,102 @@
+import { render } from '@testing-library/react';
+import Link, { isExternalURL } from './link';
+
+describe('isExternalURL', () => {
+  it('returns true if host name is different', () => {
+    const result = isExternalURL('http://example.com', 'http://example.test');
+
+    expect(result).to.be.true();
+  });
+
+  it('returns false if host name is same', () => {
+    const result = isExternalURL('http://example.com', 'http://example.com');
+
+    expect(result).to.be.false();
+  });
+
+  it('returns false if candidate url cannot be parsed', () => {
+    const result = isExternalURL('/', 'http://example.com');
+
+    expect(result).to.be.false();
+  });
+
+  it('returns false if current url cannot be parsed', () => {
+    const result = isExternalURL('http://example.com', '');
+
+    expect(result).to.be.false();
+  });
+});
+
+describe('Link', () => {
+  it('renders link', () => {
+    const { getByRole } = render(<Link href="/">Example</Link>);
+
+    const link = getByRole('link', { name: 'Example' }) as HTMLAnchorElement;
+
+    expect(link.getAttribute('href')).to.equal('/');
+    expect(link.target).to.equal('');
+    expect([...link.classList.values()]).to.have.all.members(['usa-link']);
+  });
+
+  context('with custom css class', () => {
+    it('renders link with class', () => {
+      const { getByRole } = render(<Link href="/" className="my-custom-class" />);
+
+      const link = getByRole('link') as HTMLAnchorElement;
+
+      expect(link.classList.contains('my-custom-class')).to.be.true();
+    });
+  });
+
+  context('with isExternal prop', () => {
+    it('renders link which includes external link styles', () => {
+      const { getByRole } = render(<Link href="/" isExternal />);
+
+      const link = getByRole('link') as HTMLAnchorElement;
+
+      expect([...link.classList.values()]).to.have.all.members(['usa-link', 'usa-link--external']);
+    });
+
+    it('renders link which opens in new tab', () => {
+      const { getByRole } = render(<Link href="/" isExternal />);
+
+      const link = getByRole('link') as HTMLAnchorElement;
+
+      expect(link.target).to.equal('_blank');
+      expect(link.rel).to.equal('noreferrer');
+    });
+
+    context('with explicitly-false isNewTab prop', () => {
+      it('renders link which does not open in new tab', () => {
+        const { getByRole } = render(<Link href="/" isExternal isNewTab={false} />);
+
+        const link = getByRole('link') as HTMLAnchorElement;
+
+        expect(link.target).to.equal('');
+      });
+    });
+  });
+
+  context('with isNewTab prop', () => {
+    it('renders link which opens in new tab', () => {
+      const { getByRole } = render(<Link href="/" isNewTab />);
+
+      const link = getByRole('link') as HTMLAnchorElement;
+
+      expect(link.target).to.equal('_blank');
+      expect(link.rel).to.equal('noreferrer');
+    });
+
+    it('includes additional text hint for assistive technology', () => {
+      const { getByRole } = render(
+        <Link href="/" isNewTab>
+          Example
+        </Link>,
+      );
+
+      const link = getByRole('link', { name: 'Example links.new_window' }) as HTMLAnchorElement;
+
+      expect(link).to.exist();
+    });
+  });
+});

app/javascript/packages/components/link.tsx

@@ -0,0 +1,63 @@
+import type { ReactNode, AnchorHTMLAttributes } from 'react';
+import { t } from '@18f/identity-i18n';
+
+export interface LinkProps {
+  /**
+   * Link destination.
+   */
+  href: string;
+
+  /**
+   * Whether link destination is an external resource.
+   */
+  isExternal?: boolean;
+
+  /**
+   * Whether link should open in a new tab.
+   */
+  isNewTab?: boolean;
+
+  /**
+   * Additional class names to apply.
+   */
+  className?: string;
+
+  /**
+   * Link text.
+   */
+  children?: ReactNode;
+}
+
+export function isExternalURL(url, currentURL = window.location.href) {
+  try {
+    return new URL(url).hostname !== new URL(currentURL).hostname;
+  } catch {
+    return false;
+  }
+}
+
+function Link({
+  href,
+  isExternal = isExternalURL(href),
+  isNewTab = isExternal,
+  className,
+  children,
+}: LinkProps) {
+  const classes = ['usa-link', className, isExternal && 'usa-link--external']
+    .filter(Boolean)
+    .join(' ');
+
+  let newTabProps: AnchorHTMLAttributes<HTMLAnchorElement> | undefined;
+  if (isNewTab) {
+    newTabProps = { target: '_blank', rel: 'noreferrer' };
+  }
+
+  return (
+    <a href={href} {...newTabProps} className={classes}>
+      {children}
+      {isNewTab && <span className="usa-sr-only"> {t('links.new_window')}</span>}
+    </a>
+  );
+}
+
+export default Link;

app/javascript/packages/components/troubleshooting-options.jsx

@@ -43,7 +43,7 @@ function TroubleshootingOptions({ headingTag = 'h2', heading, options, isNewFeat
       <ul className="troubleshooting-options__options">
         {options.map(({ url, text, isExternal }) => (
           <li key={url}>
-            <BlockLink url={url} isNewTab={isExternal}>
+            <BlockLink href={url} isExternal={isExternal}>
               {text}
             </BlockLink>
           </li>

app/javascript/packages/components/troubleshooting-options.spec.jsx

@@ -33,8 +33,8 @@ describe('TroubleshootingOptions', () => {
       <TroubleshootingOptions
         heading=""
         options={[
-          { text: <>Option 1</>, url: 'https://example.com/1', isExternal: true },
-          { text: 'Option 2', url: 'https://example.com/2' },
+          { text: <>Option 1</>, url: `/1`, isExternal: true },
+          { text: 'Option 2', url: `/2` },
         ]}
       />,
     );
@@ -43,10 +43,10 @@ describe('TroubleshootingOptions', () => {
 
     expect(links).to.have.lengthOf(2);
     expect(links[0].textContent).to.equal('Option 1 links.new_window');
-    expect(links[0].href).to.equal('https://example.com/1');
+    expect(links[0].getAttribute('href')).to.equal(`/1`);
     expect(links[0].target).to.equal('_blank');
     expect(links[1].textContent).to.equal('Option 2');
-    expect(links[1].href).to.equal('https://example.com/2');
+    expect(links[1].getAttribute('href')).to.equal(`/2`);
     expect(links[1].target).to.be.empty();
   });
 

app/javascript/packages/password-toggle/password-toggle.spec.tsx

@@ -34,6 +34,12 @@ describe('PasswordToggle', () => {
     expect(container.querySelector('.password-toggle--toggle-bottom')).to.exist();
   });
 
+  it('applies custom class to wrapper element', () => {
+    const { container } = render(<PasswordToggle label="Input" className="my-custom-class" />);
+
+    expect(container.querySelector('lg-password-toggle.my-custom-class')).to.exist();
+  });
+
   it('passes additional props to underlying text input', () => {
     const type = 'password';
     const { getByLabelText } = render(<PasswordToggle label="Input" type={type} />);

app/javascript/packages/password-toggle/password-toggle.tsx

@@ -32,13 +32,19 @@ type PasswordToggleProps = Partial<TextInputProps> & {
    * Placement of toggle relative to the input.
    */
   togglePosition?: TogglePosition;
+
+  /**
+   * Additional classes to apply to wrapper.
+   */
+  className?: string;
 };
 
 function PasswordToggle(
   {
     label = t('components.password_toggle.label'),
     toggleLabel = t('components.password_toggle.toggle_label'),
     togglePosition = 'top',
+    className,
     ...textInputProps
   }: PasswordToggleProps,
   ref: ForwardedRef<HTMLInputElement>,
@@ -47,8 +53,13 @@ function PasswordToggle(
   const inputId = `password-toggle-input-${instanceId}`;
   const toggleId = `password-toggle-${instanceId}`;
 
-  const classes =
-    togglePosition === 'top' ? 'password-toggle--toggle-top' : 'password-toggle--toggle-bottom';
+  const classes = [
+    className,
+    togglePosition === 'top' && 'password-toggle--toggle-top',
+    togglePosition === 'bottom' && 'password-toggle--toggle-bottom',
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   return (
     <lg-password-toggle class={classes}>