From 523f32778c8f0a6802c345f6f4e771471d66f634 Mon Sep 17 00:00:00 2001
From: Emma Indal <emma.indahl@gmail.com>
Date: Fri, 30 Sep 2022 14:53:35 +0200
Subject: [PATCH] Storybook examples for custom no result component

Co-authored-by: Camila Loiola <camilaibs@gmail.com>
Signed-off-by: Emma Indal <emma.indahl@gmail.com>
---
 .../SearchResultGroup.stories.tsx             | 36 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx b/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx
index 3a20dec36d..588033a4a3 100644
--- a/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx
+++ b/plugins/search-react/src/components/SearchResultGroup/SearchResultGroup.stories.tsx
@@ -269,7 +269,7 @@ export const WithFilters = () => {
   );
 };
 
-export const WithNoResults = () => {
+export const WithDefaultNoResultsComponent = () => {
   const [query] = useState<Partial<SearchQuery>>({
     types: ['techdocs'],
   });
@@ -285,6 +285,40 @@ export const WithNoResults = () => {
   );
 };
 
+export const WithCustomNoResultsComponent = () => {
+  const [query] = useState<Partial<SearchQuery>>({
+    types: ['techdocs'],
+  });
+
+  return (
+    <TestApiProvider apis={[[searchApiRef, new MockSearchApi()]]}>
+      <SearchResultGroup
+        query={query}
+        icon={<DocsIcon />}
+        title="Documentation"
+        noResultsComponent="No results were found"
+      />
+    </TestApiProvider>
+  );
+};
+
+export const DisableRenderingWithNoResults = () => {
+  const [query] = useState<Partial<SearchQuery>>({
+    types: ['techdocs'],
+  });
+
+  return (
+    <TestApiProvider apis={[[searchApiRef, new MockSearchApi()]]}>
+      <SearchResultGroup
+        query={query}
+        icon={<DocsIcon />}
+        title="Documentation"
+        disableRenderingWithNoResults
+      />
+    </TestApiProvider>
+  );
+};
+
 const CustomResultListItem = (props: any) => {
   const { icon, result } = props;