diff --git a/packages/fuselage/src/components/States/States.stories.tsx b/packages/fuselage/src/components/States/States.stories.tsx index 87fe9e3950..92e7c739af 100644 --- a/packages/fuselage/src/components/States/States.stories.tsx +++ b/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 = () => ( ); +export const Link = () => ( + + + + No app matches + + No app matches for ”search term here” Try searching in the Marketplace + instead. + + + Reload + + + Link to another page + + + +); + export const Variations = () => ( diff --git a/packages/fuselage/src/components/States/States.styles.scss b/packages/fuselage/src/components/States/States.styles.scss index 7fc654ed19..67b27494bd 100644 --- a/packages/fuselage/src/components/States/States.styles.scss +++ b/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; + } } diff --git a/packages/fuselage/src/components/States/StatesLink.tsx b/packages/fuselage/src/components/States/StatesLink.tsx new file mode 100644 index 0000000000..fa69a7a0e1 --- /dev/null +++ b/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 & + AllHTMLAttributes; + +const StatesLink = (props: StatesLinkProps) => ( + +); + +export default StatesLink; diff --git a/packages/fuselage/src/components/States/index.tsx b/packages/fuselage/src/components/States/index.tsx index ca8d58eddb..47d03ec212 100644 --- a/packages/fuselage/src/components/States/index.tsx +++ b/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,