feat: add ErrorText component

src/shared/components/async-renderer/index.component.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { TextLoader } from 'shared/components';
+import { TextLoader } from 'shared/components/loader/index.component';
+import { ErrorText } from 'shared/components/error-text/index.component';
 
 type PrimitiveDivPropTypes = React.ComponentPropsWithoutRef<'div'>;
 type AsyncRendererElement = React.ElementRef<'div'>;
@@ -26,7 +27,7 @@ export const AsyncRenderer = React.forwardRef<AsyncRendererElement, AsyncRendere
     if (error) {
       return (
         <div {...rest} ref={forwardedRef}>
-          {error.message}
+          <ErrorText>{error.message}</ErrorText>
         </div>
       );
     }

src/shared/components/error-text/index.component.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { ErrorNode } from './index.styles';
+type PrimitivePPropTypes = React.ComponentPropsWithoutRef<'p'>;
+type ErrorTextElement = React.ElementRef<'p'>;
+
+export const ErrorText = React.forwardRef<ErrorTextElement, PrimitivePPropTypes>(
+  function ErrorText(props, forwardedRef) {
+    return <ErrorNode {...props} ref={forwardedRef} />;
+  }
+);

src/shared/components/error-text/index.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { StoryFn, Meta } from '@storybook/react';
+
+import { ErrorText } from './index.component';
+
+export default {
+  title: 'Components/ErrorText',
+  component: ErrorText,
+} as Meta<typeof ErrorText>;
+
+export const Primary: StoryFn<typeof ErrorText> = () => (
+  <ErrorText>Error connecting to the server</ErrorText>
+);

src/shared/components/error-text/index.styles.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const ErrorNode = styled.p`
+  color: ${(props) => props.theme.colors.error400};
+  font-weight: ${(props) => props.theme.typography.smallText.fontWeight};
+  font-size: ${(props) => props.theme.typography.smallText.fontSize};
+`;

src/shared/components/error-text/index.test.tsx

@@ -0,0 +1,11 @@
+import { renderWithOptions, screen } from 'test';
+
+import { ErrorText } from './index.component';
+
+describe('<ErrorText/>', () => {
+  it('should render the error text', () => {
+    renderWithOptions(<ErrorText>error text</ErrorText>);
+
+    expect(screen.getByText('error text')).toBeInTheDocument();
+  });
+});

src/shared/components/headings/index.component.tsx

@@ -8,10 +8,10 @@ const Heading1 = styled.h1`
 `;
 
 const Heading2 = styled.h2`
-  color: ${(props) => props.theme.colors?.secondary400};
-  font-weight: ${(props) => props.theme.typography?.title2.fontWeight};
-  font-size: ${(props) => props.theme.typography?.title2.fontSize};
-  line-height: ${(props) => props.theme.typography?.lineHeight.xxs};
+  color: ${(props) => props.theme.colors.secondary400};
+  font-weight: ${(props) => props.theme.typography.title2.fontWeight};
+  font-size: ${(props) => props.theme.typography.title2.fontSize};
+  line-height: ${(props) => props.theme.typography.lineHeight.xxs};
 `;
 
 const Heading3 = styled.h3`

src/shared/components/index.ts

@@ -1,5 +1,6 @@
 export * from './loader/index.component';
 export * from './headings/index.component';
+export * from './error-text/index.component';
 export * from './error-boundary/index.component';
 export * from './async-renderer/index.component';
 export * from './internet-notifier/index.component';