qpp-style 9.14.2 → 9.15.2-beta.0

package/components/Search/index.js

@@ -14,43 +14,52 @@ const Search = ({
   inputAriaLabel,
   buttonAriaLabel,
   inputWidth,
+  label,
+  parentElement,
 }) => {
+  const ContainerElement = parentElement || 'span';
   const inputStyle = {
     width: inputWidth,
   };
   return (
-    <form role="search" className="qpp-c-search qpp-c-search--compact">
-      <label className="qpp-u-visually-hidden" htmlFor={id}>
-        Search
-      </label>
-      <div className="qpp-c-search__wrap">
-        <input
-          style={inputStyle}
-          className="qpp-c-text-input"
-          type="search"
-          id={id}
-          name={name}
-          placeholder={placeholder}
-          value={inputValue}
-          disabled={disabled}
-          onChange={onChange}
-          aria-label={inputAriaLabel}
-        />
-
-        <button
-          data-testid="search-btn"
-          aria-label={buttonAriaLabel}
-          onClick={onClick}
-          disabled={disableSearchBtn}
-          id={`${id}-submit`}
-          type="submit"
-          className="qpp-c-search__submit qpp-c-button qpp-c-button--text"
+    <ContainerElement className="qppds">
+      <form role="search" className="qpp-c-search qpp-c-search--compact">
+        <label
+          className={label ? 'qpp-u-margin-bottom--8' : 'qpp-u-visually-hidden'}
+          htmlFor={id}
         >
-          <span className="qpp-u-visually-hidden">Search</span>
-          <SearchIcon classes={{ root: 'qpp-icon-mat' }} />
-        </button>
-      </div>
-    </form>
+          {label ? label : 'Search'}
+        </label>
+
+        <div className="qpp-c-search__wrap">
+          <input
+            style={inputStyle}
+            className="qpp-c-text-input"
+            type="search"
+            id={id}
+            name={name}
+            placeholder={placeholder}
+            value={inputValue}
+            disabled={disabled}
+            onChange={onChange}
+            aria-label={inputAriaLabel}
+          />
+
+          <button
+            data-testid="search-btn"
+            aria-label={buttonAriaLabel}
+            onClick={onClick}
+            disabled={disableSearchBtn}
+            id={`${id}-submit`}
+            type="submit"
+            className="qpp-c-search__submit qpp-c-button qpp-c-button--text"
+          >
+            <span className="qpp-u-visually-hidden">Search</span>
+            <SearchIcon classes={{ root: 'qpp-icon-mat' }} />
+          </button>
+        </div>
+      </form>
+    </ContainerElement>
   );
 };
 
@@ -66,9 +75,12 @@ Search.propTypes = {
   inputAriaLabel: PropTypes.string,
   buttonAriaLabel: PropTypes.string,
   inputWidth: PropTypes.string,
+  label: PropTypes.string,
+  parentElement: PropTypes.string,
 };
 
 Search.defaultProps = {
+  label: null,
   id: 'search-input',
   name: '',
   placeholder: '',
@@ -80,6 +92,7 @@ Search.defaultProps = {
   inputAriaLabel: '',
   buttonAriaLabel: '',
   inputWidth: 'auto',
+  parentElement: 'span',
 };
 
 export default Search;