feat: Empty state variations Logic (#598)

RocketChat · Dec 22, 2021 · 06ee58c · 06ee58c
1 parent 032d597
commit 06ee58c
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 7 deletions.
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_States_States_Variations.png b/packages/fuselage/.loki/reference/chrome_iphone7_States_States_Variations.png
diff --git a/...oki/reference/chrome_laptop_States_States_Action_Button_With_No_Suggestions.png b/...oki/reference/chrome_laptop_States_States_Action_Button_With_No_Suggestions.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_States_States_Variations.png b/packages/fuselage/.loki/reference/chrome_laptop_States_States_Variations.png
diff --git a/packages/fuselage/src/components/States/States.stories.tsx b/packages/fuselage/src/components/States/States.stories.tsx
@@ -12,7 +12,7 @@ import {
   StatesActions,
   StatesAction,
 } from '.';
-import { Box } from '..';
+import { Box, Icon } from '..';
 
 export default {
   title: 'States/States',
@@ -77,6 +77,7 @@ export const ActionButton = () => (
     </States>
   </Box>
 );
+
 export const ActionButtonWithNoSuggestions = () => (
   <Box>
     <States>
@@ -92,3 +93,76 @@ export const ActionButtonWithNoSuggestions = () => (
     </States>
   </Box>
 );
+
+export const Variations = () => (
+  <Box>
+    <States>
+      <StatesIcon name='circle-exclamation' />
+      <StatesTitle>Connection error</StatesTitle>
+      <StatesSubtitle>
+        Cannot connect to internet or your workspace may be an offline install.{' '}
+        <br /> Contact your workspace admin for more information.
+      </StatesSubtitle>
+      <StatesActions>
+        <StatesAction>
+          <Icon name='reload' /> Reload
+        </StatesAction>
+      </StatesActions>
+    </States>
+
+    <States>
+      <StatesIcon name='circle-exclamation' variation='danger' />
+      <StatesTitle>Connection error</StatesTitle>
+      <StatesSubtitle>
+        Cannot connect to internet or your workspace may be an offline install.{' '}
+        <br /> Contact your workspace admin for more information.
+      </StatesSubtitle>
+      <StatesActions>
+        <StatesAction>
+          <Icon name='reload' /> Reload
+        </StatesAction>
+      </StatesActions>
+    </States>
+    <States>
+      <StatesIcon name='circle-exclamation' variation='primary' />
+      <StatesTitle>Connection error</StatesTitle>
+      <StatesSubtitle>
+        Cannot connect to internet or your workspace may be an offline install.{' '}
+        <br /> Contact your workspace admin for more information.
+      </StatesSubtitle>
+      <StatesActions>
+        <StatesAction>
+          <Icon name='reload' /> Reload
+        </StatesAction>
+      </StatesActions>
+    </States>
+
+    <States>
+      <StatesIcon name='magnifier' variation='success' />
+      <StatesTitle>Connection error</StatesTitle>
+      <StatesSubtitle>
+        Cannot connect to internet or your workspace may be an offline install.{' '}
+        <br /> Contact your workspace admin for more information.
+      </StatesSubtitle>
+      <StatesActions>
+        <StatesAction>
+          <Icon name='reload' /> Reload
+        </StatesAction>
+      </StatesActions>
+    </States>
+
+    <States>
+      <StatesIcon name='magnifier' variation='warning' />
+      <StatesTitle>Connection error</StatesTitle>
+      <StatesSubtitle>
+        Cannot connect to internet or your workspace may be an offline install.{' '}
+        <br /> Contact your workspace admin for more information.
+      </StatesSubtitle>
+      <StatesActions>
+        <StatesAction>
+          <Icon name='reload' /> Reload
+        </StatesAction>
+      </StatesActions>
+    </States>
+  </Box>
+);
diff --git a/packages/fuselage/src/components/States/States.styles.scss b/packages/fuselage/src/components/States/States.styles.scss
@@ -3,6 +3,13 @@
 @use '../../styles/colors.scss';
 @use '../../styles/typography.scss';
 
+$variants: (
+  'success': colors.success(600),
+  'danger': colors.danger(600),
+  'warning': colors.warning(600),
+  'primary': colors.primary(600),
+);
+
 .rcx-states {
   display: flex;
   flex-direction: column;
@@ -17,9 +24,17 @@
     margin-block-end: lengths.margin(16);
     padding: lengths.margin(16);
 
+    color: colors.foreground(info);
+
     border-radius: 100%;
 
     background-color: colors.neutral(200);
+
+    @each $name, $color in $variants {
+      &--#{$name} {
+        color: theme('states-icons-color-#{$name}', $color);
+      }
+    }
   }
 
   &__title {
@@ -40,7 +55,7 @@
     align-items: center;
 
     width: 100%;
-    max-width: 410px;
+    max-width: 462px;
 
     margin: 0;
     padding: 0;

diff --git a/packages/fuselage/src/components/States/StatesIcon.tsx b/packages/fuselage/src/components/States/StatesIcon.tsx
@@ -4,11 +4,14 @@ import { Icon } from '../Icon';
 
 const StatesIcon: FC<{
   name: ComponentProps<typeof Icon>['name'];
-  // variation?: 'danger';
-}> = ({ name }) => (
-  <div className='rcx-states__icon'>
-    <Icon name={name} size='x32' />
-  </div>
+  variation?: 'danger' | 'success' | 'warning' | 'primary';
+}> = ({ name, variation }) => (
+  <Icon
+    rcx-states__icon
+    className={variation && `rcx-states__icon--${variation}`}
+    name={name}
+    size='x32'
+  />
 );
 
 export default StatesIcon;