Add avatar component

.storybook/preview.js

@@ -24,6 +24,8 @@ export const parameters = {
  ],
  'Form',
  [
+ 'Avatar',
+ ['Documentation', 'Live', 'Without style', 'Class based'],
  'Autocomplete',
  ['Documentation', 'Live', 'Without style', 'Class based'],
  'Button',

src/avatar/Avatar.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+
+type SharedProps = React.HTMLAttributes<HTMLElement> & {
+ /**
+ * The class to pass to the parent div
+ */
+ className?: string;
+ /**
+ * The shape variant we want to display (circle, rounded or square)
+ */
+ shape?: 'circle' | 'rounded' | 'square';
+ /**
+ * The predefined background colours that can be set. These can be overwritten with the 'style' prop.
+ */
+ backgroundColourOption?: 'default' | 'light' | 'dark';
+ /**
+ * The custom background colour
+ */
+ backgroundColour?: string;
+ /**
+ * A href property to use on an anchor tag that wraps the avatars child components
+ */
+ wrappingAnchorHref?: string;
+ /**
+ * A target property to use on an anchor tag that wraps the avatars child components
+ */
+ wrappingAnchorTarget?: '_blank' | '_self' | '_parent' | '_top';
+ /**
+ * The desired width of the avatar component
+ */
+ width?: string;
+ /**
+ * The desired height of the avatar component
+ */
+ height?: string;
+};
+
+type AvatarProps = SharedProps & {
+ /**
+ * Src not used on non image avatars
+ */
+ src?: never;
+ /**
+ * Alt not used on non image avatars
+ */
+ alt?: never;
+};
+
+type ImageAvatarProps = SharedProps & {
+ /**
+ * The src of an image we would like to display.
+ */
+ src: string;
+ /**
+ * The alt text for the image element.
+ */
+ alt?: string;
+};
+
+const shapeStyles = {
+ circle: {
+ borderRadius: '50%',
+ },
+ rounded: {
+ borderRadius: '4px',
+ },
+ square: {
+ borderRadius: '0',
+ },
+};
+
+const backgroundColourOptions = {
+ default: '#bdbdbd',
+ dark: '#000',
+ light: '#fff',
+};
+
+export const Avatar = ({
+ className,
+ shape = 'circle',
+ backgroundColourOption = 'default',
+ children,
+ src,
+ alt,
+ wrappingAnchorHref,
+ wrappingAnchorTarget,
+ width = '40px',
+ height = '40px',
+ backgroundColour,
+ ...props
+}: AvatarProps | ImageAvatarProps) => {
+ const backgroundColor =
+ backgroundColour || backgroundColourOptions[backgroundColourOption];
+
+ let contents = src ? <img src={src} alt={alt} /> : children;
+
+ if (wrappingAnchorHref) {
+ contents = (
+ <a href={wrappingAnchorHref} target={wrappingAnchorTarget}>
+ {contents}
+ </a>
+ );
+ }
+
+ return (
+ <div
+ className={className}
+ {...props}
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ overflow: 'hidden',
+ width,
+ height,
+ backgroundColor,
+ ...shapeStyles[shape],
+ ...props.style,
+ }}
+ >
+ {contents}
+ </div>
+ );
+};

src/avatar/__tests__/Avatar.test.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Avatar } from '../Avatar';
+
+describe('Avatar', () => {
+ it('should render an image', () => {
+ const { container } = render(<Avatar src="test.jpg" />);
+ const img = screen.getByRole('img');
+ expect(img).toBeInTheDocument();
+ const div = container.querySelector('div');
+ expect(div).toBeInTheDocument();
+ });
+
+ it('should render an avatar with default shape', () => {
+ const { container } = render(<Avatar />);
+ const div = container.querySelector('div');
+ expect(div?.style.borderRadius).toBe('50%');
+ });
+
+ it('should render an avatar with circle shape styling', () => {
+ const { container } = render(<Avatar shape="circle" />);
+ const div = container.querySelector('div');
+ expect(div?.style.borderRadius).toBe('50%');
+ });
+
+ it('should render an avatar with rounded shape styling', () => {
+ const { container } = render(<Avatar shape="rounded" />);
+ const div = container.querySelector('div');
+ expect(div?.style.borderRadius).toBe('4px');
+ });
+
+ it('should render an avatar with custom styling', () => {
+ const { container } = render(
+ <Avatar shape="circle" style={{ fontSize: '28px' }} />
+ );
+ const div = container.querySelector('div');
+ expect(div?.style.borderRadius).toBe('50%');
+ expect(div?.style.fontSize).toBe('28px');
+ });
+
+ it('should render an circle variant avatar with custom styling', () => {
+ const { container } = render(
+ <Avatar shape="circle" style={{ fontSize: '28px' }} />
+ );
+ const div = container.querySelector('div');
+ expect(div?.style.fontSize).toBe('28px');
+ expect(div?.style.borderRadius).toBe('50%');
+ });
+
+ it('should render an avatar circle variant with custom styling merged into styles', () => {
+ const { container } = render(
+ <Avatar shape="circle" style={{ fontSize: '28px' }} />
+ );
+ const div = container.querySelector('div');
+ expect(div?.style.borderRadius).toBe('50%');
+ expect(div?.style.fontSize).toBe('28px');
+ });
+
+ it('should render an avatar with letters', () => {
+ const { container } = render(<Avatar>test</Avatar>);
+ const div = container.querySelector('div');
+ expect(div?.innerHTML).toContain('test');
+ });
+
+ it('should render with a classname', () => {
+ const { container } = render(<Avatar className="test">text</Avatar>);
+ const div = container.querySelector('div');
+ expect(div?.className).toBe('test');
+ });
+
+ it('should render with a default background colour', () => {
+ const { container } = render(<Avatar className="test">text</Avatar>);
+ const div = container.querySelector('div');
+ expect(div?.style.backgroundColor).toBe('rgb(189, 189, 189)');
+ });
+
+ it('should render with the selected preset background colour', () => {
+ let divPointer;
+ let containerPointer;
+
+ //dark theme
+ containerPointer = render(
+ <Avatar backgroundColourOption="dark">text</Avatar>
+ ).container;
+ divPointer = containerPointer.querySelector('div');
+ expect(divPointer?.style.backgroundColor).toBe('rgb(0, 0, 0)');
+
+ // light theme
+ containerPointer = render(
+ <Avatar backgroundColourOption="light">text</Avatar>
+ ).container;
+ divPointer = containerPointer.querySelector('div');
+ expect(divPointer?.style.backgroundColor).toBe('rgb(255, 255, 255)');
+ });
+
+ it('should render with a custom background colour', () => {
+ const { container } = render(
+ <Avatar className="test" backgroundColour="green">
+ text
+ </Avatar>
+ );
+ const div = container.querySelector('div');
+ expect(div?.style.backgroundColor).toBe('green');
+ });
+
+ it('should render an anchor tag if wrappingAnchorHref and wrappingAnchorTarget prop is passed', () => {
+ const testUrl = 'http://test.url/';
+
+ const { container } = render(
+ <Avatar
+ className="test"
+ wrappingAnchorHref={testUrl}
+ wrappingAnchorTarget="_blank"
+ >
+ text
+ </Avatar>
+ );
+ const anchor = container.querySelector('a');
+ expect(anchor?.href).toBe(testUrl);
+ expect(anchor?.target).toBe('_blank');
+ });
+
+ it('should not render wrappingAnchorTarget if wrappingAnchorHref prop is not passed', () => {
+ const { container } = render(
+ <Avatar className="test" wrappingAnchorTarget="_blank">
+ text
+ </Avatar>
+ );
+ const anchor = container.querySelector('a');
+ expect(anchor?.href).toBeUndefined();
+ expect(anchor?.target).toBeUndefined();
+ });
+
+ it('should have a default width and height', () => {
+ const { container } = render(<Avatar className="test">text</Avatar>);
+ const div = container.querySelector('div');
+ expect(div?.style.width).toBe('40px');
+ expect(div?.style.height).toBe('40px');
+ });
+
+ it('should accept a width and height prop', () => {
+ const { container } = render(
+ <Avatar className="test" width="4em" height="4em">
+ text
+ </Avatar>
+ );
+ const div = container.querySelector('div');
+ expect(div?.style.width).toBe('4em');
+ expect(div?.style.height).toBe('4em');
+ });
+});

src/avatar/index.ts

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

src/index.ts

@@ -38,3 +38,4 @@ export * from './highlight';
 export * from './buttonGroup';
 export * from './card';
 export * from './skeleton';
+export * from './avatar';

stories/Avatar/ClassBased.stories.js

@@ -0,0 +1,36 @@
+import { Avatar } from '../../src/avatar/Avatar';
+import { useArgs } from '@storybook/preview-api';
+
+export default {
+ title: 'DCXLibrary/Form/Avatar/Class based',
+ component: Avatar,
+ parameters: {
+ options: {
+ showPanel: true,
+ },
+ },
+ tags: ['autodocs'],
+};
+
+export const Basic = {
+ name: 'Basic',
+ args: {
+ children: 'JB'
+ },
+};
+
+export const WithImage = {
+ name: 'With Image',
+ args: {
+ src: 'https://www.capgemini.com/gb-en/wp-content/themes/capgemini-komposite/assets/images/logo.svg',
+ },
+};
+
+/**
+ * Avatar can be passed in different child properties such as links to external websites or custom components
+ */
+export const CustomContent = {
+ args: {
+ children: <a href="#" target="_blank">EL</a>,
+ },
+};