Merge pull request #509 from GSA/ss_fix-api-selector

Fixed api selector

Author: Sean

src/components/federal-agencies/inventory-code/inventory-code-section.component.js

@@ -65,7 +65,7 @@ class InventoryCodeSectionComponent extends Component {
                 'border-left-0': indent === 0,
                 'border-base-lighter': indent === 1 || 2 || 3,
                 'border-left-2px': indent === 1 || 2 || 3
-              })} usa-accordion__button bg-white padding-left-1 mobile:padding-left-205 border-right-0 border-bottom-0 border-top-0 border-dashed font-body-md tablet-lg:padding-left-3 tablet-lg:padding-right-5 tablet-lg:padding-y-2`}
+              })}  api-drop-list bg-white padding-left-1 mobile:padding-left-205 border-right-0 border-bottom-0 border-top-0 border-dashed font-body-md tablet-lg:padding-left-3 tablet-lg:padding-right-5 tablet-lg:padding-y-2`}
               aria-expanded={dropDown}
               aria-controls={`${key}-section`}
               onClick={this.toggleDropDown}
@@ -75,7 +75,7 @@ class InventoryCodeSectionComponent extends Component {
                 <dd
                   className={`${classNames({
                     'text-accent-cool-dark': optionalField
-                  })} display-inline margin-left-0`}
+                  })} text-bold display-inline margin-left-0`}
                 >
                   {key}
                 </dd>

src/components/federal-agencies/inventory-code/inventory-code-section.component.test.js

@@ -45,7 +45,7 @@ describe('components - InventoryCodeSectionComponent', () => {
         }
       ]
     })
-    expect(wrapper.find('button').prop('className')).toContain('usa-accordion__button')
+    expect(wrapper.find('button').prop('className')).toContain('api-drop-list')
   })
 
   it('should show subfields on click', () => {
@@ -65,7 +65,7 @@ describe('components - InventoryCodeSectionComponent', () => {
 
     console.log(wrapper.debug())
 
-    wrapper.find('.usa-accordion__button').simulate('click')
+    wrapper.find('.api-drop-list').simulate('click')
     expect(wrapper.state('dropDown')).toBeTruthy()
   })
 })

styles/theme/_uswds-theme-custom-styles.scss

@@ -137,6 +137,37 @@ html {
     }
   }
 }
+
+button.api-drop-list {
+  padding-right: 1.25rem;
+  width: 100%;
+
+  .description {
+    padding-right: 1.25rem;
+  }
+
+  & > dl {
+    background-repeat: no-repeat;
+    background-size: 1rem;
+    background-position: right center;
+    text-align: left;
+    display: inline-block;
+    width: 100%;
+    line-height: 1.15;
+  }
+
+  &[aria-expanded='false'] > dl {
+    background-image: url(/fonts/plus.svg),
+      -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent));
+    background-image: url(/fonts/plus.svg), linear-gradient(transparent, transparent);
+  }
+  &[aria-expanded='true'] > dl {
+    background-image: url(/fonts/minus.svg),
+      -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent));
+    background-image: url(/fonts/minus.svg), linear-gradient(transparent, transparent);
+  }
+}
+
 code {
   background-color: rgba(0, 0, 0, 0.05);
 }