feat(fuselage): Empty State Component (#572)

Co-authored-by: Guilherme Gazzo <[email protected]>
Co-authored-by: Douglas Fabris <[email protected]>

packages/fuselage/src/components/States/States.spec.tsx

@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { States } from '.';
+
+it('renders without crashing', () => {
+  render(<States />);
+});

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

@@ -0,0 +1,91 @@
+import React from 'react';
+
+import {
+  StatesSuggestionList,
+  StatesSuggestionListItem,
+  StatesSuggestion,
+  StatesSuggestionText,
+  StatesActions,
+  StatesAction,
+} from '.';
+import { Box } from '..';
+import { States, StatesSubtitle, StatesIcon, StatesTitle } from './States';
+
+export default {
+  title: 'States/States',
+};
+
+export const Default = ({ searchTerm = 'search term here' }) => (
+  <Box>
+    <States>
+      <StatesIcon name='magnifier' />
+      <StatesTitle>No app matches</StatesTitle>
+      <StatesSubtitle>
+        No Marketplace matches for:
+        <strong>"{searchTerm}"</strong>
+      </StatesSubtitle>
+      <StatesSuggestion>
+        <StatesSuggestionText>You can try to:</StatesSuggestionText>
+        <StatesSuggestionList>
+          <StatesSuggestionListItem>
+            Search by category
+          </StatesSuggestionListItem>
+          <StatesSuggestionListItem>
+            Search for a more general term
+          </StatesSuggestionListItem>
+          <StatesSuggestionListItem>
+            Search for a more specific term
+          </StatesSuggestionListItem>
+          <StatesSuggestionListItem>
+            Check if the spelling is correct
+          </StatesSuggestionListItem>
+        </StatesSuggestionList>
+      </StatesSuggestion>
+    </States>
+  </Box>
+);
+
+export const ActionButton = () => (
+  <Box>
+    <States>
+      <StatesIcon name='magnifier' />
+      <StatesTitle>No app matches</StatesTitle>
+      <StatesSubtitle>No Marketplace matches for:</StatesSubtitle>
+      <StatesSuggestion>
+        <StatesSuggestionText>You can try to:</StatesSuggestionText>
+        <StatesSuggestionList>
+          <StatesSuggestionListItem>
+            Search by category
+          </StatesSuggestionListItem>
+          <StatesSuggestionListItem>
+            Search for a more general term
+          </StatesSuggestionListItem>
+          <StatesSuggestionListItem>
+            Search for a more specific term
+          </StatesSuggestionListItem>
+          <StatesSuggestionListItem>
+            Check if the spelling is correct
+          </StatesSuggestionListItem>
+        </StatesSuggestionList>
+      </StatesSuggestion>
+      <StatesActions>
+        <StatesAction>Reload</StatesAction>
+      </StatesActions>
+    </States>
+  </Box>
+);
+export const ActionButtonWithNoSuggestions = () => (
+  <Box>
+    <States>
+      <StatesIcon name='magnifier' />
+      <StatesTitle>No app matches</StatesTitle>
+      <StatesSubtitle>
+        No app matches for ”search term here” Try searching in the Marketplace
+        instead.
+      </StatesSubtitle>
+      <StatesActions>
+        <StatesAction>Reload</StatesAction>
+      </StatesActions>
+    </States>
+  </Box>
+);

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

@@ -0,0 +1,71 @@
+@use '../../styles/lengths.scss';
+@use '../../styles/functions.scss';
+@use '../../styles/colors.scss';
+@use '../../styles/typography.scss';
+
+.rcx-states {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  padding: lengths.padding(16);
+
+  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: 410px;
+
+    margin: 0;
+    padding: 0;
+
+    list-style-position: inside;
+
+    text-align: center;
+  }
+
+  &__suggestion-text-nomargin {
+    margin: 0;
+  }
+
+  &__suggestion,
+  &__subtitle {
+    margin-block-end: lengths.margin(24);
+  }
+
+  &__list {
+    list-style: initial;
+
+    &-item {
+      &-wrapper {
+        margin-inline-start: lengths.margin(-4);
+      }
+    }
+  }
+}

packages/fuselage/src/components/States/States.tsx

@@ -0,0 +1,52 @@
+import React, { FC, ComponentProps } from 'react';
+
+import { Button } from '..';
+import { ButtonGroup } from '../ButtonGroup';
+import { Icon } from '../Icon';
+import './States.styles.scss';
+
+export const States: FC = ({ children }) => (
+  <div className='rcx-states'>{children}</div>
+);
+
+export const StatesIcon: FC<{
+  name: ComponentProps<typeof Icon>['name'];
+  // variation?: 'danger';
+}> = ({ name }) => (
+  <div className='rcx-states__icon'>
+    <Icon name={name} size='x32' />
+  </div>
+);
+
+export const StatesTitle: FC = ({ children }) => (
+  <div className='rcx-states__title'>{children}</div>
+);
+export const StatesSubtitle: FC = ({ children }) => (
+  <div className='rcx-states__subtitle'>{children}</div>
+);
+
+export const StatesSuggestion: FC = ({ children }) => (
+  <div className='rcx-states__suggestion'>{children}</div>
+);
+export const StatesSuggestionText: FC = ({ children }) => (
+  <div className='rcx-states__suggestion-text'>{children}</div>
+);
+
+export const StatesSuggestionList: FC = ({ children }) => (
+  <ul className='rcx-states__list'>{children}</ul>
+);
+
+export const StatesSuggestionListItem: FC = ({ children }) => (
+  <li className='rcx-states__list-item'>
+    <span className='rcx-states__list-item-wrapper'>{children}</span>
+  </li>
+);
+
+export const StatesActions: FC<ComponentProps<typeof ButtonGroup>> = ({
+  children,
+  ...props
+}) => <ButtonGroup {...props}> {children} </ButtonGroup>;
+
+export const StatesAction: FC<ComponentProps<typeof Button>> = ({
+  ...props
+}) => <Button primary {...props} />;

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

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

packages/fuselage/src/components/index.scss

@@ -10,6 +10,7 @@
 @import './Chevron/styles.scss';
 @import './Chip/styles.scss';
 @import './Divider/styles.scss';
+@import './States/States.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 './States';
 export * from './Field';
 export * from './FieldGroup';
 export * from './Grid';