From bf00f3e302da0221b6507b7588fd01da58be9bae Mon Sep 17 00:00:00 2001
From: Mo Gusbi <mo.gusbi@motechdevelopment.co.uk>
Date: Fri, 17 Feb 2023 00:58:45 +0000
Subject: [PATCH] feat: avatar component

---
 .../project-tailwind/src/components/Alert.tsx | 14 +++++++++-
 .../src/components/Avatar.tsx                 | 23 ++++++++++++++++
 .../project-tailwind/src/components/Logo.tsx  |  4 +--
 .../src/components/__tests__/Avatar.test.tsx  | 27 +++++++++++++++++++
 .../__snapshots__/Avatar.test.tsx.snap        | 21 +++++++++++++++
 .../__snapshots__/Logo.test.tsx.snap          |  2 +-
 packages/project-tailwind/src/index.ts        |  2 ++
 .../src/stories/Avatar.stories.tsx            | 17 ++++++++++++
 8 files changed, 106 insertions(+), 4 deletions(-)
 create mode 100644 packages/project-tailwind/src/components/Avatar.tsx
 create mode 100644 packages/project-tailwind/src/components/__tests__/Avatar.test.tsx
 create mode 100644 packages/project-tailwind/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap
 create mode 100644 packages/project-tailwind/src/stories/Avatar.stories.tsx

diff --git a/packages/project-tailwind/src/components/Alert.tsx b/packages/project-tailwind/src/components/Alert.tsx
index ecd3c871e..c0dd0221e 100644
--- a/packages/project-tailwind/src/components/Alert.tsx
+++ b/packages/project-tailwind/src/components/Alert.tsx
@@ -1,6 +1,13 @@
 import { Transition } from '@headlessui/react';
 import { XMarkIcon } from '@heroicons/react/24/solid';
-import { Fragment, ReactNode, useCallback, useEffect, useState } from 'react';
+import {
+  Fragment,
+  ReactNode,
+  Ref,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 import {
   Sizing,
   Themes,
@@ -11,6 +18,9 @@ import {
 
 /** Alert component properties */
 export interface IAlertProps {
+  /** Dismiss button reference */
+  buttonRef?: Ref<HTMLButtonElement>;
+
   /** Sets whether alert can be dismissed or a timer, in milliseconds, to automatically dismiss */
   dismissable?: boolean | number;
 
@@ -45,6 +55,7 @@ const DISMISS_TEXT = 'Dismiss';
  */
 export function Alert(props: IAlertProps) {
   const {
+    buttonRef,
     dismissable = false,
     dismissText = DISMISS_TEXT,
     icon,
@@ -167,6 +178,7 @@ export function Alert(props: IAlertProps) {
               {dismissable && (
                 <button
                   className={buttonStyles}
+                  ref={buttonRef}
                   type="button"
                   onClick={dismiss}
                 >
diff --git a/packages/project-tailwind/src/components/Avatar.tsx b/packages/project-tailwind/src/components/Avatar.tsx
new file mode 100644
index 000000000..fb1146aa9
--- /dev/null
+++ b/packages/project-tailwind/src/components/Avatar.tsx
@@ -0,0 +1,23 @@
+import { ComponentPropsWithRef } from 'react';
+
+/** Avatar component properties */
+export interface IAvatarProps extends ComponentPropsWithRef<'img'> {
+  /** Alternative information text */
+  alt: string;
+
+  /** Image path */
+  src: string;
+}
+
+/**
+ * Display user avatar photo
+ *
+ * @param props - Component props
+ *
+ * @returns Avatar component
+ */
+export function Avatar(props: IAvatarProps) {
+  const { alt, className = 'h-8 w-8', src, ...rest } = props;
+
+  return <img {...{ alt, className, src }} {...rest} />;
+}
diff --git a/packages/project-tailwind/src/components/Logo.tsx b/packages/project-tailwind/src/components/Logo.tsx
index 4af1109b2..d44e3dce2 100644
--- a/packages/project-tailwind/src/components/Logo.tsx
+++ b/packages/project-tailwind/src/components/Logo.tsx
@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 
 /** Logo component properties */
-export interface ILogoProps extends ComponentPropsWithoutRef<'svg'> {
+export interface ILogoProps extends ComponentPropsWithRef<'svg'> {
   /** Alternative information text */
   alt: string;
 }
diff --git a/packages/project-tailwind/src/components/__tests__/Avatar.test.tsx b/packages/project-tailwind/src/components/__tests__/Avatar.test.tsx
new file mode 100644
index 000000000..a9ccd304a
--- /dev/null
+++ b/packages/project-tailwind/src/components/__tests__/Avatar.test.tsx
@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import { Avatar } from '../Avatar';
+
+describe('Avatar', () => {
+  it('should correctly render component when no styles are set', () => {
+    const { asFragment } = render(
+      <Avatar
+        alt="Alt text"
+        src="https://www.gravatar.com/avatar/8801091e665fdac669daa63d32167b7b"
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should correctly render component when custom styles are set', () => {
+    const { asFragment } = render(
+      <Avatar
+        className="h-auto w-auto"
+        alt="Alt text"
+        src="https://www.gravatar.com/avatar/8801091e665fdac669daa63d32167b7b"
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/packages/project-tailwind/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap b/packages/project-tailwind/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap
new file mode 100644
index 000000000..79cec72e7
--- /dev/null
+++ b/packages/project-tailwind/src/components/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar should correctly render component when custom styles are set 1`] = `
+<DocumentFragment>
+  <img
+    alt="Alt text"
+    class="h-auto w-auto"
+    src="https://www.gravatar.com/avatar/8801091e665fdac669daa63d32167b7b"
+  />
+</DocumentFragment>
+`;
+
+exports[`Avatar should correctly render component when no styles are set 1`] = `
+<DocumentFragment>
+  <img
+    alt="Alt text"
+    class="h-8 w-8"
+    src="https://www.gravatar.com/avatar/8801091e665fdac669daa63d32167b7b"
+  />
+</DocumentFragment>
+`;
diff --git a/packages/project-tailwind/src/components/__tests__/__snapshots__/Logo.test.tsx.snap b/packages/project-tailwind/src/components/__tests__/__snapshots__/Logo.test.tsx.snap
index 838edad78..8a28ecde7 100644
--- a/packages/project-tailwind/src/components/__tests__/__snapshots__/Logo.test.tsx.snap
+++ b/packages/project-tailwind/src/components/__tests__/__snapshots__/Logo.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Logo should apply native svg attributes 1`] = `
 <DocumentFragment>
   <svg
     aria-labelledby="logo-alt-text"
-    class="w-40 h-40 text-blue-600"
+    class="h-40 w-40 text-blue-600"
     viewBox="0 0 345.21 398.61"
     xmlns="http://www.w3.org/2000/svg"
   >
diff --git a/packages/project-tailwind/src/index.ts b/packages/project-tailwind/src/index.ts
index 01d406e01..4e5fdabfb 100644
--- a/packages/project-tailwind/src/index.ts
+++ b/packages/project-tailwind/src/index.ts
@@ -1,4 +1,6 @@
 import './styles/tailwind.css';
 
+/** Components */
 export * from './components/Alert';
+export * from './components/Avatar';
 export * from './components/Logo';
diff --git a/packages/project-tailwind/src/stories/Avatar.stories.tsx b/packages/project-tailwind/src/stories/Avatar.stories.tsx
new file mode 100644
index 000000000..6ab2cfd98
--- /dev/null
+++ b/packages/project-tailwind/src/stories/Avatar.stories.tsx
@@ -0,0 +1,17 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Avatar } from '../components/Avatar';
+
+export default {
+  args: {
+    alt: 'My avatar',
+    className: 'h-40 w-40',
+    src: 'https://www.gravatar.com/avatar/8801091e665fdac669daa63d32167b7b',
+  },
+  component: Avatar,
+} as ComponentMeta<typeof Avatar>;
+
+const Template: ComponentStory<typeof Avatar> = (props) => (
+  <Avatar {...props} />
+);
+
+export const AvatarComponent = Template.bind({});