feat: ✨ Add fallback componente to fuselage

Created a fallback component for empty search pages.
RocketChat · Nov 29, 2021 · d90b027 · d90b027
1 parent a99cd43
commit d90b027
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 24 deletions.
diff --git a/...ges/fuselage/.loki/reference/chrome_iphone7_Fallback_Fallback_Action_Button.png b/...ges/fuselage/.loki/reference/chrome_iphone7_Fallback_Fallback_Action_Button.png
diff --git a/...eference/chrome_iphone7_Fallback_Fallback_Action_Button_With_No_Suggestions.png b/...eference/chrome_iphone7_Fallback_Fallback_Action_Button_With_No_Suggestions.png
diff --git a/...ages/fuselage/.loki/reference/chrome_laptop_Fallback_Fallback_Action_Button.png b/...ages/fuselage/.loki/reference/chrome_laptop_Fallback_Fallback_Action_Button.png
diff --git a/...reference/chrome_laptop_Fallback_Fallback_Action_Button_With_No_Suggestions.png b/...reference/chrome_laptop_Fallback_Fallback_Action_Button_With_No_Suggestions.png
diff --git a/packages/fuselage/src/components/Fallback/Fallback.stories.tsx b/packages/fuselage/src/components/Fallback/Fallback.stories.tsx
@@ -54,46 +54,38 @@ export const Default = ({ searchTerm = 'search term here' }) => (
   </Box>
 );
 
-export const ActionButton = () => (
+export const ActionButton = ({ searchTerm = 'search term here' }) => (
   <Box>
     <Fallback>
       <FallbackIcon name='magnifier' />
-      <FallbackTitle>No app matches</FallbackTitle>
-      <FallbackSubtitle>No Marketplace matches for:</FallbackSubtitle>
+      <FallbackTitle>No installed app matches</FallbackTitle>
+      <FallbackSubtitle>
+        <span>
+          No app matches for <strong>"{searchTerm}"</strong>
+        </span>
+      </FallbackSubtitle>
       <FallbackSuggestion>
-        <FallbackSuggestionText>You can try to:</FallbackSuggestionText>
-        <FallbackSuggestionList>
-          <FallbackSuggestionListItem>
-            Search by category
-          </FallbackSuggestionListItem>
-          <FallbackSuggestionListItem>
-            Search for a more general term
-          </FallbackSuggestionListItem>
-          <FallbackSuggestionListItem>
-            Search for a more specific term
-          </FallbackSuggestionListItem>
-          <FallbackSuggestionListItem>
-            Check if the spelling is correct
-          </FallbackSuggestionListItem>
-        </FallbackSuggestionList>
+        <FallbackSuggestionText>
+          Try searching in the Marketplace instead
+        </FallbackSuggestionText>
       </FallbackSuggestion>
       <FallbackActions>
-        <FallbackAction>Reload</FallbackAction>
+        <FallbackAction>Search on Marketplace</FallbackAction>
       </FallbackActions>
     </Fallback>
   </Box>
 );
+
 export const ActionButtonWithNoSuggestions = () => (
   <Box>
     <Fallback>
       <FallbackIcon name='magnifier' />
-      <FallbackTitle>No app matches</FallbackTitle>
+      <FallbackTitle>No Apps Installed</FallbackTitle>
       <FallbackSubtitle>
-        No app matches for ”search term here” Try searching in the Marketplace
-        instead.
+        Explore the Marketplace to find awesome apps for Rocket.Chat
       </FallbackSubtitle>
       <FallbackActions>
-        <FallbackAction>Reload</FallbackAction>
+        <FallbackAction>Explore Marketplace</FallbackAction>
       </FallbackActions>
     </Fallback>
   </Box>

diff --git a/packages/fuselage/src/components/Fallback/Fallback.styles.scss b/packages/fuselage/src/components/Fallback/Fallback.styles.scss
@@ -38,7 +38,7 @@
     align-items: center;
 
     width: 100%;
-    max-width: 276px;
+    max-width: 410px;
 
     margin: 0;
     padding: 0;
@@ -48,6 +48,10 @@
     text-align: center;
   }
 
+  &__suggestion-text-nomargin {
+    margin: 0;
+  }
+
   &__suggestion,
   &__subtitle {
     margin-block-end: lengths.margin(24);

diff --git a/packages/fuselage/src/components/Fallback/Fallback.tsx b/packages/fuselage/src/components/Fallback/Fallback.tsx
@@ -28,6 +28,7 @@ export const FallbackSubtitle: FC = ({ children }) => (
 export const FallbackSuggestion: FC = ({ children }) => (
   <div className='rcx-fallback__suggestion'>{children}</div>
 );
+
 export const FallbackSuggestionText: FC = ({ children }) => (
   <div className='rcx-fallback__suggestion-text'>{children}</div>
 );