From 0a6737a0e1c67be5d8e5867440407a6409ff5ec9 Mon Sep 17 00:00:00 2001
From: amathews <amathews@fearsol.com>
Date: Mon, 22 Nov 2021 17:29:28 -0500
Subject: [PATCH 1/6] There was a styling bug in the TroubleShooting react
 component. So after a quick discussion added the missing style class and the
 ability to customize the header tag in the component.

---
 .../packages/components/troubleshooting-options.jsx      | 9 ++++++---
 .../packages/components/troubleshooting-options.spec.jsx | 4 ++--
 .../packages/document-capture/components/warning.jsx     | 2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/javascript/packages/components/troubleshooting-options.jsx b/app/javascript/packages/components/troubleshooting-options.jsx
index f6ff90c53b1..0d2e1c8fb12 100644
--- a/app/javascript/packages/components/troubleshooting-options.jsx
+++ b/app/javascript/packages/components/troubleshooting-options.jsx
@@ -11,17 +11,20 @@ import { BlockLink } from '@18f/identity-components';
 /**
  * @typedef TroubleshootingOptionsProps
  *
- * @prop {string} heading
+ * @prop {string} headingTag
+ * @prop {string} headingText
  * @prop {TroubleshootingOption[]} options
  */
 
 /**
  * @param {TroubleshootingOptionsProps} props
  */
-function TroubleshootingOptions({ heading, options }) {
+function TroubleshootingOptions({ headingTag = 'h2', headingText, options }) {
+  const HeadingTag = headingTag;
+
   return (
     <section className="troubleshooting-options">
-      <h2>{heading}</h2>
+      <HeadingTag className="troubleshooting-options__heading">{headingText}</HeadingTag>
       <ul className="troubleshooting-options__options">
         {options.map(({ url, text, isExternal }) => (
           <li key={url}>
diff --git a/app/javascript/packages/components/troubleshooting-options.spec.jsx b/app/javascript/packages/components/troubleshooting-options.spec.jsx
index adfefbc76b7..988c332f6d2 100644
--- a/app/javascript/packages/components/troubleshooting-options.spec.jsx
+++ b/app/javascript/packages/components/troubleshooting-options.spec.jsx
@@ -3,7 +3,7 @@ import TroubleshootingOptions from './troubleshooting-options';
 
 describe('TroubleshootingOptions', () => {
   it('renders a given heading', () => {
-    const { getByRole } = render(<TroubleshootingOptions heading="Need help?" options={[]} />);
+    const { getByRole } = render(<TroubleshootingOptions headingText="Need help?" options={[]} />);
 
     const heading = getByRole('heading');
 
@@ -13,7 +13,7 @@ describe('TroubleshootingOptions', () => {
   it('renders given options', () => {
     const { getAllByRole } = render(
       <TroubleshootingOptions
-        heading=""
+        headingText=""
         options={[
           { text: <>Option 1</>, url: 'https://example.com/1', isExternal: true },
           { text: 'Option 2', url: 'https://example.com/2' },
diff --git a/app/javascript/packages/document-capture/components/warning.jsx b/app/javascript/packages/document-capture/components/warning.jsx
index 57b0fb20dcd..ab7e665c495 100644
--- a/app/javascript/packages/document-capture/components/warning.jsx
+++ b/app/javascript/packages/document-capture/components/warning.jsx
@@ -54,7 +54,7 @@ function Warning({
       )}
       {troubleshootingOptions && (
         <TroubleshootingOptions
-          heading={troubleshootingHeading || t('idv.troubleshooting.headings.having_trouble')}
+          headingText={troubleshootingHeading || t('idv.troubleshooting.headings.having_trouble')}
           options={troubleshootingOptions}
         />
       )}

From 770f32bdd843be6edb2695bbbb06bf148cfdebbd Mon Sep 17 00:00:00 2001
From: amathews <amathews@fearsol.com>
Date: Mon, 22 Nov 2021 18:16:06 -0500
Subject: [PATCH 2/6] Possible lint fix?

---
 app/javascript/packages/components/troubleshooting-options.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/packages/components/troubleshooting-options.jsx b/app/javascript/packages/components/troubleshooting-options.jsx
index 0d2e1c8fb12..d183075a68e 100644
--- a/app/javascript/packages/components/troubleshooting-options.jsx
+++ b/app/javascript/packages/components/troubleshooting-options.jsx
@@ -11,7 +11,7 @@ import { BlockLink } from '@18f/identity-components';
 /**
  * @typedef TroubleshootingOptionsProps
  *
- * @prop {string} headingTag
+ * @prop {string=} headingTag
  * @prop {string} headingText
  * @prop {TroubleshootingOption[]} options
  */

From 607781940ad95d30f121c4ef542af4f10bf11ac8 Mon Sep 17 00:00:00 2001
From: amathews <amathews@fearsol.com>
Date: Tue, 23 Nov 2021 11:33:44 -0500
Subject: [PATCH 3/6] Lint fix and bringing naming conventions in line with
 both implementations of the troubleshooting component.

---
 .../packages/components/troubleshooting-options.jsx  |  2 +-
 app/views/idv/doc_auth/welcome.html.erb              |  2 +-
 app/views/shared/_troubleshooting_options.html.erb   |  6 +++---
 .../shared/_troubleshooting_options.html.erb_spec.rb | 12 ++++++------
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/javascript/packages/components/troubleshooting-options.jsx b/app/javascript/packages/components/troubleshooting-options.jsx
index d183075a68e..c2c6ee82856 100644
--- a/app/javascript/packages/components/troubleshooting-options.jsx
+++ b/app/javascript/packages/components/troubleshooting-options.jsx
@@ -11,7 +11,7 @@ import { BlockLink } from '@18f/identity-components';
 /**
  * @typedef TroubleshootingOptionsProps
  *
- * @prop {string=} headingTag
+ * @prop {'h1'|'h2'|'h3'|'h4'|'h5'|'h6'=} headingTag
  * @prop {string} headingText
  * @prop {TroubleshootingOption[]} options
  */
diff --git a/app/views/idv/doc_auth/welcome.html.erb b/app/views/idv/doc_auth/welcome.html.erb
index a463d42f04d..e2ab543b438 100644
--- a/app/views/idv/doc_auth/welcome.html.erb
+++ b/app/views/idv/doc_auth/welcome.html.erb
@@ -89,7 +89,7 @@
 
   <%= render(
         'shared/troubleshooting_options',
-        heading_level: :h3,
+        heading_tag: :h3,
         heading: t('idv.troubleshooting.headings.missing_required_items'),
         options: [
           {
diff --git a/app/views/shared/_troubleshooting_options.html.erb b/app/views/shared/_troubleshooting_options.html.erb
index f753842ca62..c52fe69741b 100644
--- a/app/views/shared/_troubleshooting_options.html.erb
+++ b/app/views/shared/_troubleshooting_options.html.erb
@@ -1,15 +1,15 @@
 <%#
 locals:
-* heading_level: Tag name for heading. Does not affect visual appearance. Defaults to :h2.
+* heading_tag: Tag name for heading. Does not affect visual appearance. Defaults to :h2.
 * heading: Heading text.
 * options: List of link options to display, as an array of hashes with `url`, `text`, `external` values.
 * class: Additional class names to add to wrapper element.
 %>
 <% if local_assigns[:options].presence %>
-  <% heading_level = local_assigns[:heading_level] || :h2 %>
+  <% heading_tag = local_assigns[:heading_tag] || :h2 %>
   <% classes = ['troubleshooting-options', *local_assigns[:class]] %>
   <%= tag.section class: classes do %>
-    <%= content_tag(heading_level, heading, class: 'troubleshooting-options__heading') %>
+    <%= content_tag(heading_tag, heading, class: 'troubleshooting-options__heading') %>
     <ul class="troubleshooting-options__options">
       <% options.each do |option| %>
         <li>
diff --git a/spec/views/shared/_troubleshooting_options.html.erb_spec.rb b/spec/views/shared/_troubleshooting_options.html.erb_spec.rb
index 9f0ccfe68d1..44f25d22669 100644
--- a/spec/views/shared/_troubleshooting_options.html.erb_spec.rb
+++ b/spec/views/shared/_troubleshooting_options.html.erb_spec.rb
@@ -2,7 +2,7 @@
 
 describe 'shared/_troubleshooting_options.html.erb' do
   let(:heading) { '' }
-  let(:heading_level) { nil }
+  let(:heading_tag) { nil }
   let(:options) { [{ text: 'One', url: '#one' }, { text: 'Two', url: '#two' }] }
   let(:classes) { nil }
 
@@ -10,7 +10,7 @@
     render(
       'shared/troubleshooting_options',
       heading: heading,
-      heading_level: heading_level,
+      heading_tag: heading_tag,
       options: options,
       class: classes,
     )
@@ -24,17 +24,17 @@
     end
   end
 
-  describe 'heading_level' do
+  describe 'heading_tag' do
     context 'omitted' do
-      it 'renders with default heading_level h2' do
+      it 'renders with default heading_tag h2' do
         expect(rendered).to have_css('h2')
       end
     end
 
     context 'given' do
-      let(:heading_level) { :h3 }
+      let(:heading_tag) { :h3 }
 
-      it 'renders with custom heading_level' do
+      it 'renders with custom heading_tag' do
         expect(rendered).to have_css('h3')
       end
     end

From 9e15ca0a9ac4b0124bcbb10985f1c903cbd17d65 Mon Sep 17 00:00:00 2001
From: amathews <amathews@fearsol.com>
Date: Tue, 23 Nov 2021 12:02:27 -0500
Subject: [PATCH 4/6] Update JS tests for troubleshoot-options.

---
 .../components/troubleshooting-options.spec.jsx     | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/javascript/packages/components/troubleshooting-options.spec.jsx b/app/javascript/packages/components/troubleshooting-options.spec.jsx
index 988c332f6d2..528ae4acc95 100644
--- a/app/javascript/packages/components/troubleshooting-options.spec.jsx
+++ b/app/javascript/packages/components/troubleshooting-options.spec.jsx
@@ -3,13 +3,24 @@ import TroubleshootingOptions from './troubleshooting-options';
 
 describe('TroubleshootingOptions', () => {
   it('renders a given heading', () => {
-    const { getByRole } = render(<TroubleshootingOptions headingText="Need help?" options={[]} />);
+    const { getByRole, getByText } = render(
+      <TroubleshootingOptions headingText="Need help?" options={[]} />,
+    );
 
     const heading = getByRole('heading');
 
+    expect(getByText('Need help?').tagName).to.be.equal('H2');
     expect(heading.textContent).to.equal('Need help?');
   });
 
+  it('renders a given headingTag', () => {
+    const { getByText } = render(
+      <TroubleshootingOptions headingTag="h3" headingText="Test Header" options={[]} />,
+    );
+
+    expect(getByText('Test Header').tagName).to.be.equal('H3');
+  });
+
   it('renders given options', () => {
     const { getAllByRole } = render(
       <TroubleshootingOptions

From 65160409bd27a0a64367a6ac84ec49ee9dda5b9d Mon Sep 17 00:00:00 2001
From: amathews <amathews@fearsol.com>
Date: Tue, 23 Nov 2021 12:07:25 -0500
Subject: [PATCH 5/6] Changing JS variable name to keep it aligned with ruby.

---
 .../packages/components/troubleshooting-options.jsx         | 6 +++---
 .../packages/components/troubleshooting-options.spec.jsx    | 6 +++---
 .../packages/document-capture/components/warning.jsx        | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/javascript/packages/components/troubleshooting-options.jsx b/app/javascript/packages/components/troubleshooting-options.jsx
index c2c6ee82856..7378d63f54e 100644
--- a/app/javascript/packages/components/troubleshooting-options.jsx
+++ b/app/javascript/packages/components/troubleshooting-options.jsx
@@ -12,19 +12,19 @@ import { BlockLink } from '@18f/identity-components';
  * @typedef TroubleshootingOptionsProps
  *
  * @prop {'h1'|'h2'|'h3'|'h4'|'h5'|'h6'=} headingTag
- * @prop {string} headingText
+ * @prop {string} heading
  * @prop {TroubleshootingOption[]} options
  */
 
 /**
  * @param {TroubleshootingOptionsProps} props
  */
-function TroubleshootingOptions({ headingTag = 'h2', headingText, options }) {
+function TroubleshootingOptions({ headingTag = 'h2', heading, options }) {
   const HeadingTag = headingTag;
 
   return (
     <section className="troubleshooting-options">
-      <HeadingTag className="troubleshooting-options__heading">{headingText}</HeadingTag>
+      <HeadingTag className="troubleshooting-options__heading">{heading}</HeadingTag>
       <ul className="troubleshooting-options__options">
         {options.map(({ url, text, isExternal }) => (
           <li key={url}>
diff --git a/app/javascript/packages/components/troubleshooting-options.spec.jsx b/app/javascript/packages/components/troubleshooting-options.spec.jsx
index 528ae4acc95..a6433a87173 100644
--- a/app/javascript/packages/components/troubleshooting-options.spec.jsx
+++ b/app/javascript/packages/components/troubleshooting-options.spec.jsx
@@ -4,7 +4,7 @@ import TroubleshootingOptions from './troubleshooting-options';
 describe('TroubleshootingOptions', () => {
   it('renders a given heading', () => {
     const { getByRole, getByText } = render(
-      <TroubleshootingOptions headingText="Need help?" options={[]} />,
+      <TroubleshootingOptions heading="Need help?" options={[]} />,
     );
 
     const heading = getByRole('heading');
@@ -15,7 +15,7 @@ describe('TroubleshootingOptions', () => {
 
   it('renders a given headingTag', () => {
     const { getByText } = render(
-      <TroubleshootingOptions headingTag="h3" headingText="Test Header" options={[]} />,
+      <TroubleshootingOptions headingTag="h3" heading="Test Header" options={[]} />,
     );
 
     expect(getByText('Test Header').tagName).to.be.equal('H3');
@@ -24,7 +24,7 @@ describe('TroubleshootingOptions', () => {
   it('renders given options', () => {
     const { getAllByRole } = render(
       <TroubleshootingOptions
-        headingText=""
+        heading=""
         options={[
           { text: <>Option 1</>, url: 'https://example.com/1', isExternal: true },
           { text: 'Option 2', url: 'https://example.com/2' },
diff --git a/app/javascript/packages/document-capture/components/warning.jsx b/app/javascript/packages/document-capture/components/warning.jsx
index ab7e665c495..57b0fb20dcd 100644
--- a/app/javascript/packages/document-capture/components/warning.jsx
+++ b/app/javascript/packages/document-capture/components/warning.jsx
@@ -54,7 +54,7 @@ function Warning({
       )}
       {troubleshootingOptions && (
         <TroubleshootingOptions
-          headingText={troubleshootingHeading || t('idv.troubleshooting.headings.having_trouble')}
+          heading={troubleshootingHeading || t('idv.troubleshooting.headings.having_trouble')}
           options={troubleshootingOptions}
         />
       )}

From 188b642a0e0a85c29956e446674cad1aa811bcb4 Mon Sep 17 00:00:00 2001
From: amathews <amathews@fearsol.com>
Date: Tue, 23 Nov 2021 15:11:21 -0500
Subject: [PATCH 6/6] Minor test cleanup.

---
 .../packages/components/troubleshooting-options.spec.jsx    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/javascript/packages/components/troubleshooting-options.spec.jsx b/app/javascript/packages/components/troubleshooting-options.spec.jsx
index a6433a87173..1f85d1dba2d 100644
--- a/app/javascript/packages/components/troubleshooting-options.spec.jsx
+++ b/app/javascript/packages/components/troubleshooting-options.spec.jsx
@@ -3,13 +3,11 @@ import TroubleshootingOptions from './troubleshooting-options';
 
 describe('TroubleshootingOptions', () => {
   it('renders a given heading', () => {
-    const { getByRole, getByText } = render(
-      <TroubleshootingOptions heading="Need help?" options={[]} />,
-    );
+    const { getByRole } = render(<TroubleshootingOptions heading="Need help?" options={[]} />);
 
     const heading = getByRole('heading');
 
-    expect(getByText('Need help?').tagName).to.be.equal('H2');
+    expect(heading.tagName).to.be.equal('H2');
     expect(heading.textContent).to.equal('Need help?');
   });