feat(fuselage): Empty State Component

packages/fuselage/src/components/Fallback/Fallback.stories.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+
+import {
+  FallbackSuggestionList,
+  FallbackSuggestionListItem,
+  FallbackSuggestion,
+  FallbackSuggestionText,
+  FallbackActions,
+  FallbackAction,
+} from '.';
+import { Box } from '..';
+import {
+  Fallback,
+  FallbackSubtitle,
+  FallbackIcon,
+  FallbackTitle,
+} from './Fallback';
+
+export default {
+  title: 'Fallback/Fallback',
+  //   component: Message,
+  //   parameters: {
+  //     jest: ['Message.spec.tsx'],
+  //   },
+};
+
+export const Default = ({ searchTerm = 'search term here' }) => (
+  <Box>
+    <Fallback>
+      <FallbackIcon name='magnifier' />
+      <FallbackTitle>No app matches</FallbackTitle>
+      <FallbackSubtitle>
+        No Marketplace matches for:
+        <strong>"{searchTerm}"</strong>
+      </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>
+      </FallbackSuggestion>
+    </Fallback>
+  </Box>
+);
+
+export const ActionButton = () => (
+  <Box>
+    <Fallback>
+      <FallbackIcon name='magnifier' />
+      <FallbackTitle>No app matches</FallbackTitle>
+      <FallbackSubtitle>No Marketplace matches for:</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>
+      </FallbackSuggestion>
+      <FallbackActions>
+        <FallbackAction>Reload</FallbackAction>
+      </FallbackActions>
+    </Fallback>
+  </Box>
+);
+export const ActionButtonWithNoSuggestions = () => (
+  <Box>
+    <Fallback>
+      <FallbackIcon name='magnifier' />
+      <FallbackTitle>No app matches</FallbackTitle>
+      <FallbackSubtitle>
+        No app matches for ”search term here” Try searching in the Marketplace
+        instead.
+      </FallbackSubtitle>
+      <FallbackActions>
+        <FallbackAction>Reload</FallbackAction>
+      </FallbackActions>
+    </Fallback>
+  </Box>
+);

packages/fuselage/src/components/Fallback/Fallback.styles.scss

@@ -0,0 +1,55 @@
+@use '../../styles/lengths.scss';
+@use '../../styles/functions.scss';
+@use '../../styles/colors.scss';
+@use '../../styles/typography.scss';
+
+.rcx-fallback {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  color: colors.foreground(info);
+
+  &__icon {
+    margin-block-end: lengths.margin(16);
+    padding: lengths.margin(16);
+
+    border-radius: 100%;
+
+    background-color: colors.neutral(200);
+  }
+
+  &__title {
+    margin-block-end: lengths.margin(8);
+
+    color: colors.foreground(default);
+    @include typography.use-font-scale(h1);
+  }
+
+  &__subtitle,
+  &__list,
+  &__suggestion {
+    @include typography.use-font-scale(p2);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    max-width: 276px;
+
+    margin: 0;
+    padding: 0;
+
+    list-style-position: inside;
+
+    text-align: center;
+  }
+
+  &__suggestion,
+  &__subtitle {
+    margin-block-end: lengths.margin(24);
+  }
+}

packages/fuselage/src/components/Fallback/Fallback.tsx

@@ -0,0 +1,50 @@
+import React, { FC, ComponentProps } from 'react';
+
+import { Button } from '..';
+import { ButtonGroup } from '../ButtonGroup';
+import { Icon } from '../Icon';
+import './Fallback.styles.scss';
+
+export const Fallback: FC = ({ children }) => (
+  <div className='rcx-fallback'>{children}</div>
+);
+
+export const FallbackIcon: FC<{
+  name: ComponentProps<typeof Icon>['name'];
+  // variation?: 'danger';
+}> = ({ name }) => (
+  <div className='rcx-fallback__icon'>
+    <Icon name={name} size='x32' />
+  </div>
+);
+
+export const FallbackTitle: FC = ({ children }) => (
+  <div className='rcx-fallback__title'>{children}</div>
+);
+export const FallbackSubtitle: FC = ({ children }) => (
+  <div className='rcx-fallback__subtitle'>{children}</div>
+);
+
+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>
+);
+
+export const FallbackSuggestionList: FC = ({ children }) => (
+  <ul className='rcx-fallback__list'>{children}</ul>
+);
+
+export const FallbackSuggestionListItem: FC = ({ children }) => (
+  <li>{children}</li>
+);
+
+export const FallbackActions: FC<ComponentProps<typeof ButtonGroup>> = ({
+  children,
+  ...props
+}) => <ButtonGroup {...props}> {children} </ButtonGroup>;
+
+export const FallbackAction: FC<ComponentProps<typeof Button>> = ({
+  ...props
+}) => <Button primary {...props} />;

packages/fuselage/src/components/Fallback/index.tsx

@@ -0,0 +1 @@
+export * from './Fallback';

packages/fuselage/src/components/index.scss

@@ -10,6 +10,7 @@
 @import './Chevron/styles.scss';
 @import './Chip/styles.scss';
 @import './Divider/styles.scss';
+@import './Fallback/Fallback.styles.scss';
 @import './Field/styles.scss';
 @import './FieldGroup/styles.scss';
 @import './Grid/styles.scss';

packages/fuselage/src/components/index.ts

@@ -12,6 +12,7 @@ export * from './Chevron';
 export { default as Chip } from './Chip';
 export * from './Divider';
 export * from './EmailInput';
+export * from './Fallback';
 export * from './Field';
 export * from './FieldGroup';
 export * from './Grid';