From d87ad117195e837413d5dbfb0f8efe60742324f0 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <jessica.lawshe@overleaf.com>
Date: Mon, 21 Sep 2020 09:14:36 -0500
Subject: [PATCH] Merge pull request #3210 from overleaf/ta-icon-component

Create Icon Component in React

GitOrigin-RevId: 34161b3afa2c00dbca2423b1e5a42b29846fa6e4
---
 .../outline/components/outline-item.js        | 11 ++---
 .../outline/components/outline-pane.js        | 11 ++---
 .../web/frontend/js/shared/components/icon.js | 36 +++++++++++++++
 .../frontend/shared/components/icon.test.js   | 46 +++++++++++++++++++
 4 files changed, 92 insertions(+), 12 deletions(-)
 create mode 100644 services/web/frontend/js/shared/components/icon.js
 create mode 100644 services/web/test/frontend/shared/components/icon.test.js

diff --git a/services/web/frontend/js/features/outline/components/outline-item.js b/services/web/frontend/js/features/outline/components/outline-item.js
index 273c06080f..b1214d28bb 100644
--- a/services/web/frontend/js/features/outline/components/outline-item.js
+++ b/services/web/frontend/js/features/outline/components/outline-item.js
@@ -4,6 +4,7 @@ import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
 import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import OutlineList from './outline-list'
+import Icon from '../../../shared/components/icon'
 
 function getChildrenLines(children) {
   return (children || [])
@@ -24,11 +25,6 @@ function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) {
     'outline-item-no-children': !outlineItem.children
   })
 
-  const expandCollapseIconClasses = classNames('fa', 'outline-caret-icon', {
-    'fa-angle-down': expanded,
-    'fa-angle-right': !expanded
-  })
-
   const hasHighlightedChild =
     !expanded &&
     getChildrenLines(outlineItem.children).includes(highlightedLine)
@@ -85,7 +81,10 @@ function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) {
             onClick={handleExpandCollapseClick}
             aria-label={expanded ? t('collapse') : t('expand')}
           >
-            <i className={expandCollapseIconClasses} />
+            <Icon
+              type={expanded ? 'angle-down' : 'angle-right'}
+              classes={{ icon: 'outline-caret-icon' }}
+            />
           </button>
         ) : null}
         <button
diff --git a/services/web/frontend/js/features/outline/components/outline-pane.js b/services/web/frontend/js/features/outline/components/outline-pane.js
index 223612072a..005ba4ebad 100644
--- a/services/web/frontend/js/features/outline/components/outline-pane.js
+++ b/services/web/frontend/js/features/outline/components/outline-pane.js
@@ -5,6 +5,7 @@ import classNames from 'classnames'
 import { useTranslation, Trans } from 'react-i18next'
 
 import OutlineRoot from './outline-root'
+import Icon from '../../../shared/components/icon'
 import localStorage from '../../../infrastructure/local-storage'
 import withErrorBoundary from '../../../infrastructure/error-boundary'
 
@@ -33,11 +34,6 @@ function OutlinePane({
     [isOpen]
   )
 
-  const expandCollapseIconClasses = classNames('fa', 'outline-caret-icon', {
-    'fa-angle-down': isOpen,
-    'fa-angle-right': !isOpen
-  })
-
   const headerClasses = classNames('outline-pane', {
     'outline-pane-disabled': !isTexFile
   })
@@ -70,7 +66,10 @@ function OutlinePane({
           onClick={handleExpandCollapseClick}
           aria-label={expanded ? t('hide_outline') : t('show_outline')}
         >
-          <i className={expandCollapseIconClasses} />
+          <Icon
+            type={isOpen ? 'angle-down' : 'angle-right'}
+            classes={{ icon: 'outline-caret-icon' }}
+          />
           <h4 className="outline-header-name">{t('file_outline')}</h4>
           {expanded ? (
             <OverlayTrigger placement="top" overlay={tooltip} delayHide={100}>
diff --git a/services/web/frontend/js/shared/components/icon.js b/services/web/frontend/js/shared/components/icon.js
new file mode 100644
index 0000000000..40a5c5646d
--- /dev/null
+++ b/services/web/frontend/js/shared/components/icon.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+function Icon({ type, spin, modifier, classes = {}, accessibilityLabel }) {
+  const iconClassName = classNames(
+    'fa',
+    `fa-${type}`,
+    {
+      'fa-spin': spin,
+      [`fa-${modifier}`]: modifier
+    },
+    classes.icon
+  )
+
+  return (
+    <>
+      <i className={iconClassName} aria-hidden="true" />
+      {accessibilityLabel ? (
+        <span className="sr-only">{accessibilityLabel}</span>
+      ) : null}
+    </>
+  )
+}
+
+Icon.propTypes = {
+  type: PropTypes.string.isRequired,
+  spin: PropTypes.bool,
+  modifier: PropTypes.string,
+  classes: PropTypes.exact({
+    icon: PropTypes.string
+  }),
+  accessibilityLabel: PropTypes.string
+}
+
+export default Icon
diff --git a/services/web/test/frontend/shared/components/icon.test.js b/services/web/test/frontend/shared/components/icon.test.js
new file mode 100644
index 0000000000..47d84ebe5f
--- /dev/null
+++ b/services/web/test/frontend/shared/components/icon.test.js
@@ -0,0 +1,46 @@
+import { expect } from 'chai'
+import React from 'react'
+import { screen, render } from '@testing-library/react'
+
+import Icon from '../../../../frontend/js/shared/components/icon'
+
+describe('<Icon />', function() {
+  it('renders basic fa classes', function() {
+    const { container } = render(<Icon type="angle-down" />)
+    const element = container.querySelector('i.fa.fa-angle-down')
+    expect(element).to.exist
+  })
+
+  it('renders with aria-hidden', function() {
+    const { container } = render(<Icon type="angle-down" />)
+    const element = container.querySelector('i[aria-hidden="true"]')
+    expect(element).to.exist
+  })
+
+  it('renders accessible label', function() {
+    render(<Icon type="angle-down" accessibilityLabel="Accessible Foo" />)
+    screen.getByText('Accessible Foo')
+  })
+
+  it('renders with spin', function() {
+    const { container } = render(<Icon type="angle-down" spin />)
+    const element = container.querySelector('i.fa.fa-angle-down.fa-spin')
+    expect(element).to.exist
+  })
+
+  it('renders with modifier', function() {
+    const { container } = render(<Icon type="angle-down" modifier="2x" />)
+    const element = container.querySelector('i.fa.fa-angle-down.fa-2x')
+    expect(element).to.exist
+  })
+
+  it('renders with custom clases', function() {
+    const { container } = render(
+      <Icon type="angle-down" classes={{ icon: 'custom-icon-class' }} />
+    )
+    const element = container.querySelector(
+      'i.fa.fa-angle-down.custom-icon-class'
+    )
+    expect(element).to.exist
+  })
+})