Merge pull request #711 from glints-dev/feature/next-avatar

feat: add avatar component

Author: finalight

src/@next/Avatar/Avatar.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { Avatar, AvatarProps } from './Avatar';
+
+export default {
+  title: '@next/Avatar',
+  component: Avatar,
+  decorators: [Story => <BaseContainer>{Story()}</BaseContainer>],
+  argTypes: {},
+} as Meta;
+
+const Template: Story<AvatarProps> = args => <Avatar {...args} />;
+
+export const Interactive = Template.bind({});
+Interactive.args = {
+  initials: 'HE',
+};

src/@next/Avatar/Avatar.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Typography } from '../Typography';
+import { Neutral } from '../utilities/colors';
+import { AvatarStyle } from './AvatarStyle';
+
+const avatarBackgroundColorVariant = [
+  'supplementary',
+  'warning',
+  'danger',
+  'success',
+  'outstanding',
+] as const;
+
+const avatarSizeVariant = ['large', 'medium'] as const;
+
+export type AvatarBackgroundColorVariant =
+  typeof avatarBackgroundColorVariant[number];
+
+export type AvatarSizeVariant = typeof avatarSizeVariant[number];
+
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: AvatarBackgroundColorVariant;
+  size?: AvatarSizeVariant;
+  initials?: string;
+}
+
+export const Avatar = ({
+  variant = 'supplementary',
+  size = 'medium',
+  initials,
+  ...props
+}: AvatarProps) => {
+  return (
+    <AvatarStyle variant={variant} size={size} {...props}>
+      <Typography
+        variant={size === 'medium' ? 'body1' : 'headline6'}
+        color={Neutral.B18}
+        as={'span'}
+      >
+        {initials.slice(0, 2)}
+      </Typography>
+    </AvatarStyle>
+  );
+};

src/@next/Avatar/AvatarStyle.tsx

@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+import * as Breakpoints from '../utilities/breakpoints';
+import { Blue, Green, Neutral, Orange, Red } from '../utilities/colors';
+import {
+  AvatarBackgroundColorVariant,
+  AvatarProps,
+  AvatarSizeVariant,
+} from './Avatar';
+
+const mediumAvatarSizeStyle = `
+  width: 40px;
+  height: 40px;
+  
+  @media (max-width: ${Breakpoints.large}) {
+    width: 32px;
+    height: 32px;
+  }
+`;
+
+const largeAvatarSizeStyle = `
+  width: 60px;
+  height: 60px;
+
+  @media (max-width: ${Breakpoints.large}) {
+    width: 40px;
+    height: 40px;
+  }
+`;
+
+const avatarBackgroundColor: {
+  [variant in AvatarBackgroundColorVariant]: string;
+} = {
+  ['supplementary']: Neutral.B99,
+  ['warning']: Orange.S42,
+  ['danger']: Red.B100,
+  ['success']: Green.B89,
+  ['outstanding']: Blue.S08,
+};
+
+const avatarSizeVariant: {
+  [sizeVariant in AvatarSizeVariant]: string;
+} = {
+  ['large']: largeAvatarSizeStyle,
+  ['medium']: mediumAvatarSizeStyle,
+};
+
+const getAvatarBackgroundColor = (variant: AvatarBackgroundColorVariant) => {
+  if (!(variant in avatarBackgroundColor)) {
+    console.warn(
+      `${variant} is not a valid variant for the background color, default will be used`
+    );
+    return avatarBackgroundColor['supplementary'];
+  }
+
+  return avatarBackgroundColor[variant];
+};
+
+const getAvatarSizeStyle = (sizeVariant: AvatarSizeVariant) => {
+  if (!(sizeVariant in avatarSizeVariant)) {
+    console.warn(
+      `${sizeVariant} is not a valid variant for the size, default will be used`
+    );
+
+    return avatarSizeVariant['medium'];
+  }
+
+  return avatarSizeVariant[sizeVariant];
+};
+
+export const AvatarStyle = styled.div<AvatarProps>`
+  ${({ size }: AvatarProps) => {
+    return getAvatarSizeStyle(size);
+  }}}
+
+  ${({ variant }: AvatarProps) => ({
+    'background-color': getAvatarBackgroundColor(variant),
+  })}}
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+`;

src/@next/Avatar/index.ts

@@ -0,0 +1 @@
+export * from './Avatar';

src/@next/index.ts

@@ -10,6 +10,7 @@ export { ButtonGroup } from './ButtonGroup';
 export { Icon } from './Icon';
 export { Tab, TabProps, Tabs, TabsProps } from './Tabs';
 export { Typography } from './Typography';
+export { Avatar } from './Avatar';
 
 // Utilities
 import * as BorderRadius from './utilities/borderRadius';

test/e2e/avatar/avatar.spec.ts

@@ -0,0 +1,90 @@
+import { expect, Page, test } from '@playwright/test';
+import { StoryBookPage } from '../storybookPage';
+
+const getPage = (page: Page) =>
+  new StoryBookPage(page, '?path=/story/next-avatar--interactive');
+
+const testData = [
+  {
+    testName: 'Avatar',
+    args: '',
+    screenshotResult: 'avatar',
+  },
+  {
+    testName: 'Avatar - supplementary',
+    args: 'variant:supplementary',
+    screenshotResult: 'avatar-supplementary',
+  },
+  {
+    testName: 'Avatar - warning',
+    args: 'variant:warning',
+    screenshotResult: 'avatar-warning',
+  },
+  {
+    testName: 'Avatar - danger',
+    args: 'variant:danger',
+    screenshotResult: 'avatar-danger',
+  },
+  {
+    testName: 'Avatar - success',
+    args: 'variant:success',
+    screenshotResult: 'avatar-success',
+  },
+  {
+    testName: 'Avatar - outstanding',
+    args: 'variant:outstanding',
+    screenshotResult: 'avatar-outstanding',
+  },
+];
+
+for (const [, testRecord] of testData.entries()) {
+  test(`${testRecord.testName} - large`, async ({ page }) => {
+    const avatarPage = getPage(page);
+    await avatarPage.goto(
+      `args=${testRecord.args};size:large` as `args=${string}`
+    );
+    await expect(avatarPage.container).toHaveScreenshot(
+      `${testRecord.screenshotResult}-large.png`
+    );
+  });
+}
+
+for (const [, testRecord] of testData.entries()) {
+  test(`${testRecord.testName} - medium`, async ({ page }) => {
+    const avatarPage = getPage(page);
+    await avatarPage.goto(
+      `args=${testRecord.args};size:medium` as `args=${string}`
+    );
+    await expect(avatarPage.container).toHaveScreenshot(
+      `${testRecord.screenshotResult}-medium.png`
+    );
+  });
+}
+
+test.describe('small viewport', () => {
+  for (const [, testRecord] of testData.entries()) {
+    test(`${testRecord.testName} - large`, async ({ page }) => {
+      page.setViewportSize({ width: 768, height: 600 });
+      const avatarPage = getPage(page);
+      await avatarPage.goto(
+        `args=${testRecord.args};size:large` as `args=${string}`
+      );
+      await expect(avatarPage.container).toHaveScreenshot(
+        `${testRecord.screenshotResult}-small-viewport-large.png`
+      );
+    });
+  }
+
+  for (const [, testRecord] of testData.entries()) {
+    test(`${testRecord.testName} - medium`, async ({ page }) => {
+      page.setViewportSize({ width: 768, height: 600 });
+      const avatarPage = getPage(page);
+      await avatarPage.goto(
+        `args=${testRecord.args};size:medium` as `args=${string}`
+      );
+      await expect(avatarPage.container).toHaveScreenshot(
+        `${testRecord.screenshotResult}-small-viewport-medium.png`
+      );
+    });
+  }
+});