From b0db8ec2440eef223eb95c850b34d0d80b5a9a8a Mon Sep 17 00:00:00 2001
From: Ismail Tlemcani <34961373+Ismailtlem@users.noreply.github.com>
Date: Thu, 3 Feb 2022 11:48:14 +0100
Subject: [PATCH] feat: add image component (#44590)

Co-authored-by: IsmailTlemcani <ismail.tlemcani@gmail.com>
---
 .../ui-components/src/image/image.stories.tsx | 31 +++++++++++++++++++
 tools/ui-components/src/image/image.test.tsx  | 20 ++++++++++++
 tools/ui-components/src/image/image.tsx       | 11 +++++++
 tools/ui-components/src/image/image.types.ts  |  7 +++++
 tools/ui-components/src/image/index.tsx       |  1 +
 tools/ui-components/src/index.ts              |  1 +
 6 files changed, 71 insertions(+)
 create mode 100644 tools/ui-components/src/image/image.stories.tsx
 create mode 100644 tools/ui-components/src/image/image.test.tsx
 create mode 100644 tools/ui-components/src/image/image.tsx
 create mode 100644 tools/ui-components/src/image/image.types.ts
 create mode 100644 tools/ui-components/src/image/index.tsx

diff --git a/tools/ui-components/src/image/image.stories.tsx b/tools/ui-components/src/image/image.stories.tsx
new file mode 100644
index 0000000000..fe069e5bb2
--- /dev/null
+++ b/tools/ui-components/src/image/image.stories.tsx
@@ -0,0 +1,31 @@
+import { Story } from '@storybook/react';
+import React from 'react';
+import { Image } from './image';
+import { ImageProps } from './image.types';
+const story = {
+  title: 'Example/Image',
+  component: Image
+};
+
+const ref = React.createRef<HTMLImageElement>();
+
+const Template: Story<ImageProps> = args => {
+  return <Image {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  alt: "Quincy Larson's signature",
+  ref: ref,
+  src: 'https://cdn.freecodecamp.org/platform/english/images/quincy-larson-signature.svg'
+};
+
+export const Avatar = Template.bind({});
+Avatar.args = {
+  ref: ref,
+  alt: "camper's avatar",
+  src: 'https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png',
+  className: 'object-cover img-fluid max-w-full h-auto'
+};
+
+export default story;
diff --git a/tools/ui-components/src/image/image.test.tsx b/tools/ui-components/src/image/image.test.tsx
new file mode 100644
index 0000000000..1db4ea7351
--- /dev/null
+++ b/tools/ui-components/src/image/image.test.tsx
@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Image } from './image';
+
+describe('Render the image', () => {
+  it('sould render the image with the alt and src attributes', () => {
+    render(
+      <Image
+        alt="Quincy Larson's Signature"
+        src='https://cdn.freecodecamp.org/platform/english/images/quincy-larson-signature.svg'
+      />
+    );
+    const image = screen.getByRole('img');
+    expect(image).toHaveAttribute(
+      'src',
+      'https://cdn.freecodecamp.org/platform/english/images/quincy-larson-signature.svg'
+    );
+    expect(image).toHaveAttribute('alt', "Quincy Larson's Signature");
+  });
+});
diff --git a/tools/ui-components/src/image/image.tsx b/tools/ui-components/src/image/image.tsx
new file mode 100644
index 0000000000..81d2c3b7a8
--- /dev/null
+++ b/tools/ui-components/src/image/image.tsx
@@ -0,0 +1,11 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/display-name */
+
+import React from 'react';
+import { ImageProps } from './image.types';
+
+export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
+  ({ alt, className, src }, ref): JSX.Element => {
+    return <img ref={ref} alt={alt} src={src} className={className} />;
+  }
+);
diff --git a/tools/ui-components/src/image/image.types.ts b/tools/ui-components/src/image/image.types.ts
new file mode 100644
index 0000000000..5fd70ea08e
--- /dev/null
+++ b/tools/ui-components/src/image/image.types.ts
@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ImageProps {
+  alt: string;
+  className?: string;
+  src: string;
+  ref: React.RefObject<HTMLImageElement>;
+}
diff --git a/tools/ui-components/src/image/index.tsx b/tools/ui-components/src/image/index.tsx
new file mode 100644
index 0000000000..c6fc1f1a5e
--- /dev/null
+++ b/tools/ui-components/src/image/index.tsx
@@ -0,0 +1 @@
+export { Image } from './image';
diff --git a/tools/ui-components/src/index.ts b/tools/ui-components/src/index.ts
index e7111f1f4d..49e4cc0471 100644
--- a/tools/ui-components/src/index.ts
+++ b/tools/ui-components/src/index.ts
@@ -2,3 +2,4 @@
 import './global.css';
 export { Button } from './button';
 export { Alert } from './alert';
+export { Image } from './image';