Added atoms image component

Author: wintondeshong

src/atoms/images/image.stories.tsx

@@ -0,0 +1,12 @@
+import { Image } from "./image";
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+
+export default {
+    component: Image,
+    title: "Atoms | Images / Image",
+};
+
+export const image = () => (
+    <Image src={text("Src", "https://via.placeholder.com/350x150")} />
+);

src/atoms/images/image.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { Image } from "./image";
+
+describe("Image", () => {
+    test("when default props, renders image", () => {
+        // Arrange
+        const expected = "https://via.placeholder.com/350x150";
+
+        // Act
+        const { container } = render(<Image src={expected} />);
+
+        // Assert
+        expect(container.firstChild.nodeName).toBe("IMG");
+    });
+});

src/atoms/images/image.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+
+// -----------------------------------------------------------------------------------------
+// #region Interfaces
+// -----------------------------------------------------------------------------------------
+
+export interface ImageProps {
+    /**
+     * Alt text to display for screenreaders or if the image does not load.
+     *
+     * @type {string}
+     * @memberof ImageProps
+     */
+    altText?: string;
+
+    /**
+     * Optional class name to be applied to the img element.
+     *
+     * @type {string}
+     * @memberof ImageProps
+     */
+    cssClassName?: string;
+
+    /**
+     * Path to the image to be rendered.
+     *
+     * @type {string}
+     * @memberof ImageProps
+     */
+    src: string;
+}
+
+// #endregion Interfaces
+
+// -----------------------------------------------------------------------------------------
+// #region Component
+// -----------------------------------------------------------------------------------------
+
+const Image: React.FunctionComponent<ImageProps> = (props: ImageProps) => (
+    <img alt={props.altText} className={props.cssClassName} src={props.src} />
+);
+
+// #endregion Component
+
+// -----------------------------------------------------------------------------------------
+// #region Exports
+// -----------------------------------------------------------------------------------------
+
+export { Image };
+
+// #endregion Exports

src/index.ts

@@ -1,4 +1,3 @@
-import { ParagraphSizes } from "atoms/constants/paragraph-sizes";
 // -----------------------------------------------------------------------------------------
 // #region Atoms
 // -----------------------------------------------------------------------------------------
@@ -7,6 +6,7 @@ export { Anchor } from "./atoms/anchors/anchor";
 export { AnchorWithIcon } from "./atoms/anchors/anchor-with-icon";
 export { Button } from "./atoms/buttons/button";
 export { Icon } from "./atoms/icons/icon";
+export { Image } from "./atoms/images/image";
 export { ProgressBar } from "./atoms/progress-bar/progress-bar";
 
 // Forms