feat(Masthead): add search custom events

packages/react/src/components/Masthead/MastheadSearch.js

@@ -211,6 +211,14 @@ const MastheadSearch = ({
    * @param {string} newValue The new val of the input
    */
   function onChange(event, { newValue }) {
+    // emit custom event for search input onchange
+    const onSearchValueChanged = new CustomEvent('onSearchValueChanged', {
+      bubbles: true,
+      detail: { value: newValue },
+    });
+
+    event.currentTarget.dispatchEvent(onSearchValueChanged);
+
     dispatch({ type: 'setVal', payload: { val: newValue } });
   }
 
@@ -232,7 +240,25 @@ const MastheadSearch = ({
    * search field if closed.
    *
    */
-  function searchIconClick() {
+  function searchIconClick(event) {
+    // emit custom event for search icon click when search is closed
+    if (!state.isSearchOpen) {
+      const onOpenSearch = new CustomEvent('onOpenSearch', {
+        bubbles: true,
+      });
+
+      event.currentTarget.dispatchEvent(onOpenSearch);
+    }
+
+    // emit custom event for search icon click when search is open
+    if (state.isSearchOpen) {
+      const onSearchButtonClicked = new CustomEvent('onSearchButtonClicked', {
+        bubbles: true,
+      });
+
+      event.currentTarget.dispatchEvent(onSearchButtonClicked);
+    }
+
     if (state.isSearchOpen && state.val.length) {
       root.parent.location.href = getRedirect(state.val);
     } else {
@@ -254,7 +280,14 @@ const MastheadSearch = ({
   /**
    * closeBtnAction resets and sets focus after search is closed
    */
-  function closeBtnAction() {
+  function closeBtnAction(event) {
+    // emit custom event for search close button click
+    const onSearchCloseClicked = new CustomEvent('onSearchCloseClicked', {
+      bubbles: true,
+    });
+
+    event.currentTarget.dispatchEvent(onSearchCloseClicked);
+
     resetSearch();
     const searchIconRef = root.document.querySelectorAll(
       `[data-autoid="${stablePrefix}--masthead-${navType}__l0-search"]`

packages/react/src/components/Masthead/README.stories.mdx

@@ -58,11 +58,12 @@ Add the following line in your `.env` file at the root of your project.
 
 ##### OPTIONAL 💡
 
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
+In addition, direct ES module imports can be used to speed up build compilation
+and have less reliance on tree-shaking determinations from build scripts:
 
-````js
+```js
 import Masthead from '@carbon/ibmdotcom-react/es/components/Masthead/Masthead';
-````
+```
 
 ## Using L1 nav
 
@@ -89,13 +90,34 @@ const mastheadL1Data = {
 
 ## Custom Events
 
-The masthead and side nav currently emit the event `onMegaMenuToggle`.
+The masthead emits several custom events.
 
 ```javascript
+// masthead and left nav menu toggle
 document.addEventListener('onMegaMenuToggle', e => {
   console.log(e.detail); // { isExpanded: true|false }
   // do something here
 });
+
+// search icon clicked to open search input
+document.addEventListener('onOpenSearch', () => {
+  // do something here
+};
+
+// close icon clicked to close search input
+document.addEventListener('onSearchCloseClicked', () => {
+  // do something here
+);
+
+// search icon clicked to perform search
+document.addEventListener('onSearchButtonClicked', () => {
+  // do something here
+);
+
+// search input onchange
+document.addEventListener('onSearchValueChanged', e =>
+  console.log(e.detail); // { value: inputValue }
+);
 ```
 
 ## Props