From 3b2796be90a4e4b29a3b09dfbe0e1d0ec3bcb6cc Mon Sep 17 00:00:00 2001
From: Emmanuel Onah <37575223+emmanuelonah@users.noreply.github.com>
Date: Sun, 14 Apr 2024 09:46:07 +0200
Subject: [PATCH] feat: add ErrorText component

---
 .../components/async-renderer/index.component.tsx  |  5 +++--
 src/shared/components/error-text/.gitkeep          |  0
 .../components/error-text/index.component.tsx      | 11 +++++++++++
 src/shared/components/error-text/index.stories.tsx | 14 ++++++++++++++
 src/shared/components/error-text/index.styles.tsx  |  7 +++++++
 src/shared/components/error-text/index.test.tsx    | 11 +++++++++++
 src/shared/components/headings/index.component.tsx |  8 ++++----
 src/shared/components/index.ts                     |  1 +
 8 files changed, 51 insertions(+), 6 deletions(-)
 delete mode 100644 src/shared/components/error-text/.gitkeep
 create mode 100644 src/shared/components/error-text/index.component.tsx
 create mode 100644 src/shared/components/error-text/index.stories.tsx
 create mode 100644 src/shared/components/error-text/index.styles.tsx
 create mode 100644 src/shared/components/error-text/index.test.tsx

diff --git a/src/shared/components/async-renderer/index.component.tsx b/src/shared/components/async-renderer/index.component.tsx
index 59967fc..bcda95b 100644
--- a/src/shared/components/async-renderer/index.component.tsx
+++ b/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>
       );
     }
diff --git a/src/shared/components/error-text/.gitkeep b/src/shared/components/error-text/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/shared/components/error-text/index.component.tsx b/src/shared/components/error-text/index.component.tsx
new file mode 100644
index 0000000..e561fd6
--- /dev/null
+++ b/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} />;
+  }
+);
diff --git a/src/shared/components/error-text/index.stories.tsx b/src/shared/components/error-text/index.stories.tsx
new file mode 100644
index 0000000..6ed5edd
--- /dev/null
+++ b/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>
+);
diff --git a/src/shared/components/error-text/index.styles.tsx b/src/shared/components/error-text/index.styles.tsx
new file mode 100644
index 0000000..4c4299a
--- /dev/null
+++ b/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};
+`;
diff --git a/src/shared/components/error-text/index.test.tsx b/src/shared/components/error-text/index.test.tsx
new file mode 100644
index 0000000..a6bdb9e
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/shared/components/headings/index.component.tsx b/src/shared/components/headings/index.component.tsx
index 072bad6..45ff61c 100644
--- a/src/shared/components/headings/index.component.tsx
+++ b/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`
diff --git a/src/shared/components/index.ts b/src/shared/components/index.ts
index 99a23c9..694fbed 100644
--- a/src/shared/components/index.ts
+++ b/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';