feat(fuselage): Avatar Emoji

packages/fuselage/.storybook/preview-head.html

@@ -0,0 +1,15 @@
+<style>
+  .emoji {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: inline-block;
+    vertical-align: middle;
+    width: 100%;
+    height: 100%;
+  }
+
+  .emoji-smile {
+    background-image: url('https://twemoji.maxcdn.com/2/72x72/1f603.png');
+  }
+</style>

packages/fuselage/src/components/Avatar/Avatar.spec.tsx

@@ -1,5 +1,5 @@
 import { composeStories } from '@storybook/testing-react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 import * as stories from './Avatar.stories';
@@ -10,4 +10,10 @@ describe('[Avatar Component]', () => {
   it('renders without crashing', () => {
     render(<Default />);
   });
+
+  it('should render emoji avatar', () => {
+    render(<Default emoji={{ children: '😄', name: '' }} />);
+
+    expect(screen.getAllByText('😄').length).toBeGreaterThanOrEqual(1);
+  });
 });

packages/fuselage/src/components/Avatar/Avatar.stories.tsx

@@ -27,7 +27,12 @@ const Template: ComponentStory<typeof Avatar> = (args) => (
   <Margins all='x16'>
     {sizes.map((size, i) => (
       <Box display='inline-flex' verticalAlign='middle' key={i}>
-        <Avatar url={args.url} size={size} rounded={args.rounded} />
+        <Avatar
+          url={args.url}
+          size={size}
+          rounded={args.rounded}
+          emoji={args.emoji}
+        />
       </Box>
     ))}
   </Margins>
@@ -71,3 +76,13 @@ StackRounded.args = {
   url: imgUrl,
   rounded: true,
 };
+
+export const EmojiAvatar = Template.bind({});
+EmojiAvatar.args = {
+  url: imgUrl,
+  emoji: {
+    className: '',
+    children: <i className='emoji emoji-smile' />,
+    name: '',
+  },
+};

packages/fuselage/src/components/Avatar/Avatar.tsx

@@ -1,8 +1,16 @@
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+import type { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
 import React from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
 
 import { prependClassName } from '../../helpers/prependClassName';
+import { AvatarEmoji } from './AvatarEmoji';
+
+export type AvatarEmojiProps = {
+  name: string;
+  className?: string;
+  children?: ReactNode;
+  image?: string;
+};
 
 export type AvatarProps = {
   size?:
@@ -21,6 +29,7 @@ export type AvatarProps = {
   rounded?: boolean;
   objectFit?: boolean;
   url: string;
+  emoji?: AvatarEmojiProps;
 } & HTMLAttributes<HTMLElement>;
 
 export const Avatar = ({
@@ -29,6 +38,7 @@ export const Avatar = ({
   rounded = false,
   objectFit = false,
   url,
+  emoji,
   ...props
 }: AvatarProps) => {
   props.className = prependClassName(
@@ -46,9 +56,15 @@ export const Avatar = ({
     .filter(Boolean)
     .join(' ');
 
+  const emojiClassName = prependClassName(emoji?.className, innerClass);
+
   return (
     <figure aria-label={title} {...props}>
-      <img src={`${url}`} className={`${innerClass}`} />
+      {emoji ? (
+        <AvatarEmoji {...emoji} className={`${emojiClassName}`} />
+      ) : (
+        <img src={`${url}`} className={`${innerClass}`} />
+      )}
     </figure>
   );
 };

packages/fuselage/src/components/Avatar/AvatarEmoji.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import type { AvatarEmojiProps } from './Avatar';
+
+export const AvatarEmoji = ({
+  name,
+  className,
+  image,
+  children,
+}: AvatarEmojiProps) => (
+  <span
+    className={`${className || ''} ${name}`}
+    style={image && image.length ? { backgroundImage: image } : undefined}
+    children={children}
+  />
+);