Web:Components:Selector: add empty screen for search

packages/components/selector/index.js

@@ -37,6 +37,9 @@ const Selector = ({
   emptyScreenImage,
   emptyScreenHeader,
   emptyScreenDescription,
+  searchEmptyScreenImage,
+  searchEmptyScreenHeader,
+  searchEmptyScreenDescription,
   hasNextPage,
   isNextPageLoading,
   loadNextPage,
@@ -260,6 +263,9 @@ const Selector = ({
         emptyScreenImage={emptyScreenImage}
         emptyScreenHeader={emptyScreenHeader}
         emptyScreenDescription={emptyScreenDescription}
+        searchEmptyScreenImage={searchEmptyScreenImage}
+        searchEmptyScreenHeader={searchEmptyScreenHeader}
+        searchEmptyScreenDescription={searchEmptyScreenDescription}
         hasNextPage={hasNextPage}
         loadMoreItems={loadMoreItems}
         totalItems={totalItems}
@@ -323,6 +329,10 @@ Selector.propTypes = {
   emptyScreenHeader: PropTypes.string,
   emptyScreenDescription: PropTypes.string,
 
+  searchEmptyScreenImage: PropTypes.string,
+  searchEmptyScreenHeader: PropTypes.string,
+  searchEmptyScreenDescription: PropTypes.string,
+
   totalItems: PropTypes.number,
   hasNextPage: PropTypes.bool,
   isNextPageLoading: PropTypes.bool,

packages/components/selector/sub-components/body.js

@@ -35,7 +35,9 @@ const Body = ({
   emptyScreenImage,
   emptyScreenHeader,
   emptyScreenDescription,
-
+  searchEmptyScreenImage,
+  searchEmptyScreenHeader,
+  searchEmptyScreenDescription,
   loadMoreItems,
   hasNextPage,
   totalItems,
@@ -112,6 +114,9 @@ const Body = ({
           image={emptyScreenImage}
           header={emptyScreenHeader}
           description={emptyScreenDescription}
+          searchImage={searchEmptyScreenImage}
+          searchHeader={searchEmptyScreenHeader}
+          searchDescription={searchEmptyScreenDescription}
         />
       ) : (
         <>

packages/components/selector/sub-components/empty-screen.js

@@ -43,15 +43,31 @@ const StyledContainer = styled.div`
   }
 `;
 
-const EmptyScreen = ({ image, header, description, withSearch }) => {
+const EmptyScreen = ({
+  image,
+  header,
+  description,
+  searchImage,
+  searchHeader,
+  searchDescription,
+  withSearch,
+}) => {
+  const currentImage = withSearch ? searchImage : image;
+  const currentHeader = withSearch ? searchHeader : header;
+  const currentDescription = withSearch ? searchDescription : description;
+
   return (
     <StyledContainer withSearch={withSearch}>
-      <img className="empty-image" src={image} alt="empty-screen-image" />
+      <img
+        className="empty-image"
+        src={currentImage}
+        alt="empty-screen-image"
+      />
       <Heading level={3} className="empty-header">
-        {header}
+        {currentHeader}
       </Heading>
       <Text className="empty-description" noSelect>
-        {description}
+        {currentDescription}
       </Text>
     </StyledContainer>
   );