From 0eef88a35388077129584451006a1b5c2e319ab9 Mon Sep 17 00:00:00 2001
From: Bill Whorton <>
Date: Thu, 8 Feb 2024 09:53:31 -0500
Subject: [PATCH] Updates to styling, getIcon in examples

---
 src/components/Search/AdvancedTips/AdvancedTips.js |  4 ++--
 .../Search/AdvancedTips/ComplexExample.js          | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Search/AdvancedTips/AdvancedTips.js b/src/components/Search/AdvancedTips/AdvancedTips.js
index 6a6865d0..8051bcdf 100644
--- a/src/components/Search/AdvancedTips/AdvancedTips.js
+++ b/src/components/Search/AdvancedTips/AdvancedTips.js
@@ -2,7 +2,7 @@ import './AdvancedTips.less';
 import React from 'react';
 import { TooltipWrapper } from '../../Common/TooltipWrapper/TooltipWrapper';
 import { ComplexExample } from './ComplexExample';
-import iconMap from '../../iconMap';
+import getIcon from '../../iconMap';
 
 export const AdvancedTips = () => {
   return (
@@ -266,7 +266,7 @@ export const AdvancedTips = () => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              Find out more {iconMap.getIcon('external-link')}
+              Find out more {getIcon('external-link')}
             </a>{' '}
             about Elastic Search
           </li>
diff --git a/src/components/Search/AdvancedTips/ComplexExample.js b/src/components/Search/AdvancedTips/ComplexExample.js
index 6950c4f9..4bef1dea 100644
--- a/src/components/Search/AdvancedTips/ComplexExample.js
+++ b/src/components/Search/AdvancedTips/ComplexExample.js
@@ -1,4 +1,4 @@
-import iconMap from '../../iconMap';
+import getIcon from '../../iconMap';
 import { TooltipWrapper } from '../../Common/TooltipWrapper/TooltipWrapper';
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
@@ -24,13 +24,13 @@ export const ComplexExample = ({ id, notes, placeholderText, tooltipText }) => {
           {isOpen ? (
             <span className="o-expandable_cue o-expandable_cue-close">
               <span className="u-visually-hidden-on-mobile">
-                {iconMap.getIcon('up')}
+                {getIcon('up')}
               </span>
             </span>
           ) : (
             <span className="o-expandable_cue o-expandable_cue-open">
               <span className="u-visually-hidden-on-mobile">
-                {iconMap.getIcon('down')}
+                {getIcon('down')}
               </span>
             </span>
           )}
@@ -40,10 +40,10 @@ export const ComplexExample = ({ id, notes, placeholderText, tooltipText }) => {
         <div className="o-expandable_content">
           {tooltipText && placeholderText ? (
             <>
-              <label className="descriptor">Complex example:</label>
-              <label className="u-visually-hidden" htmlFor={`example-${id}`}>
-                {tooltipText}
+              <label className="descriptor" htmlFor={`example-${id}`}>
+                Complex example:
               </label>
+              <span className="u-visually-hidden">{tooltipText}</span>
               <TooltipWrapper text={tooltipText}>
                 {placeholderText.length > 30 ? (
                   <textarea
@@ -65,7 +65,7 @@ export const ComplexExample = ({ id, notes, placeholderText, tooltipText }) => {
               </TooltipWrapper>
             </>
           ) : null}
-          <label className="descriptor">Notes:</label>
+          <h4 className="descriptor">Notes:</h4>
           <ul className="m-list">
             {notes.map((note, index) => (
               <li className="m-list_item" key={index}>