LG-6159: Add icons for personal key buttons

app/helpers/script_helper.rb

@@ -31,14 +31,18 @@ def render_javascript_pack_once_tags(*names)
 
   private
 
+  SAME_ORIGIN_ASSETS = %w[
+    identity-style-guide/dist/assets/img/sprite.svg
+  ].to_set.freeze
+
   def local_crossorigin_sources?
     Rails.env.development? && ENV['WEBPACK_PORT'].present?
   end
 
   def javascript_assets_tag(*names)
     assets = AssetSources.get_assets(*names)
     if assets.present?
-      asset_map = assets.index_with { |path| asset_path(path) }
+      asset_map = assets.index_with { |path| asset_path(path, host: asset_host(path)) }
       content_tag(
         :script,
         asset_map.to_json,
@@ -63,5 +67,17 @@ def without_preload_links_header
     ActionView::Helpers::AssetTagHelper.preload_links_header = original_preload_links_header
     result
   end
+
+  def asset_host(path)
+    if IdentityConfig.store.asset_host.present?
+      if SAME_ORIGIN_ASSETS.include?(path)
+        IdentityConfig.store.domain_name
+      else
+        IdentityConfig.store.asset_host
+      end
+    elsif request
+      request.base_url
+    end
+  end
 end
 # rubocop:enable Rails/HelperInstanceVariable

app/javascript/packages/clipboard-button/clipboard-button.spec.tsx

@@ -22,4 +22,13 @@ describe('ClipboardButton', () => {
     expect(button.closest('lg-clipboard-button')).to.exist();
     expect(button.classList.contains('usa-button--outline')).to.be.true();
   });
+
+  it('renders with print icon', () => {
+    const { getByRole } = render(<ClipboardButton clipboardText="" />);
+
+    const icon = getByRole('img', { hidden: true });
+
+    expect(icon.classList.contains('usa-icon')).to.be.true();
+    expect(icon.querySelector('use[href$="#content_copy"]'));
+  });
 });

app/javascript/packages/clipboard-button/clipboard-button.tsx

@@ -23,7 +23,9 @@ interface ClipboardButtonProps {
 function ClipboardButton({ clipboardText, ...buttonProps }: ClipboardButtonProps & ButtonProps) {
   return (
     <lg-clipboard-button data-clipboard-text={clipboardText}>
-      <Button {...buttonProps}>{t('components.clipboard_button.label')}</Button>
+      <Button icon="content_copy" {...buttonProps}>
+        {t('components.clipboard_button.label')}
+      </Button>
     </lg-clipboard-button>
   );
 }

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

@@ -3,7 +3,7 @@ import sinon from 'sinon';
 import userEvent from '@testing-library/user-event';
 import Button from './button';
 
-describe('document-capture/components/button', () => {
+describe('Button', () => {
   it('renders with default props', () => {
     const { getByText } = render(<Button>Click me</Button>);
 
@@ -119,4 +119,13 @@ describe('document-capture/components/button', () => {
 
     expect(button.classList.contains('my-button')).to.be.true();
   });
+
+  it('renders icon', () => {
+    const { getByRole } = render(<Button icon="add">Click me</Button>);
+
+    const icon = getByRole('img', { hidden: true });
+
+    expect(icon.classList.contains('usa-icon')).to.be.true();
+    expect(icon.querySelector('use')!.getAttribute('href')).to.match(/#add$/);
+  });
 });

app/javascript/packages/components/button.tsx

@@ -1,5 +1,7 @@
-import { createElement, MouseEvent, ReactNode } from 'react';
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { createElement } from 'react';
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, MouseEvent, ReactNode } from 'react';
+import Icon from './icon';
+import type { DesignSystemIcon } from './icon';
 
 type ButtonType = 'button' | 'reset' | 'submit';
 
@@ -54,6 +56,11 @@ export interface ButtonProps {
    */
   isUnstyled?: boolean;
 
+  /**
+   * Icon to show next to button text.
+   */
+  icon?: DesignSystemIcon;
+
   /**
    * Optional additional class names.
    */
@@ -70,6 +77,7 @@ function Button({
   isOutline,
   isDisabled,
   isUnstyled,
+  icon,
   className,
   ...htmlAttributes
 }: ButtonProps &
@@ -92,6 +100,7 @@ function Button({
   return createElement(
     tagName,
     { type, href, disabled: isDisabled, className: classes, ...htmlAttributes },
+    icon && <Icon icon={icon} />,
     children,
   );
 }

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

@@ -0,0 +1,26 @@
+import { render } from '@testing-library/react';
+import Icon from './icon';
+
+describe('Icon', () => {
+  it('renders given icon', () => {
+    const { getByRole } = render(<Icon icon="add" />);
+
+    const icon = getByRole('img', { hidden: true });
+
+    expect(icon.classList.contains('usa-icon')).to.be.true();
+    expect(icon.querySelector('use')!.getAttribute('href')).to.match(/#add$/);
+  });
+
+  context('with className prop', () => {
+    it('renders with additional CSS class', () => {
+      const { getByRole } = render(<Icon icon="add" className="my-custom-class" />);
+
+      const icon = getByRole('img', { hidden: true });
+
+      expect(Array.from(icon.classList.values())).to.include.members([
+        'usa-icon',
+        'my-custom-class',
+      ]);
+    });
+  });
+});