feat(fuselage): StatesLink Component (#1122)

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>

Author: dougfabris

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

@@ -11,6 +11,7 @@ import {
   StatesSuggestionText,
   StatesActions,
   StatesAction,
+  StatesLink,
 } from '.';
 import { Box, Icon } from '..';
 
@@ -94,6 +95,25 @@ export const ActionButtonWithNoSuggestions = () => (
   </Box>
 );
 
+export const Link = () => (
+  <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>
+      <StatesLink target='_blank' href='https://go.rocket.chat'>
+        Link to another page
+      </StatesLink>
+    </States>
+  </Box>
+);
+
 export const Variations = () => (
   <Box>
     <States>

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

@@ -93,4 +93,14 @@ $variants: (
       }
     }
   }
+
+  &__link {
+    @include typography.use-font-scale(p2);
+    margin-block: lengths.margin(16);
+
+    text-decoration: none;
+
+    color: colors.font(info);
+    @extend %--with-inline-elements;
+  }
 }

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

@@ -0,0 +1,13 @@
+import type { AllHTMLAttributes, ComponentProps } from 'react';
+import React from 'react';
+
+import Box from '../Box/Box';
+
+type StatesLinkProps = ComponentProps<typeof Box> &
+  AllHTMLAttributes<HTMLAnchorElement>;
+
+const StatesLink = (props: StatesLinkProps) => (
+  <Box is='a' rcx-states__link {...props} />
+);
+
+export default StatesLink;

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

@@ -2,6 +2,7 @@ import States from './States';
 import StatesAction from './StatesAction';
 import StatesActions from './StatesActions';
 import StatesIcon from './StatesIcon';
+import StatesLink from './StatesLink';
 import StatesSubtitle from './StatesSubtitle';
 import StatesSuggestion from './StatesSuggestion';
 import StatesSuggestionList from './StatesSuggestionList';
@@ -14,6 +15,7 @@ export {
   StatesAction,
   StatesActions,
   StatesIcon,
+  StatesLink,
   StatesSubtitle,
   StatesSuggestion,
   StatesSuggestionList,