feat: avatar component

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}
                 >

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} />;
+}

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;
 }

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();
+  });
+});

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>
+`;

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"
   >

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';

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({});