feat(portrait, profile): align with design system and reduce code com…

…plexity

playwright/components/profile/index.ts

@@ -1,5 +1,5 @@
 import type { Page } from "@playwright/test";
-import { EMAIL, NAME, INITIALS, PROFILE } from "./locators";
+import { EMAIL, NAME, TEXT, DETAILS, INITIALS, PROFILE } from "./locators";
 
 // component preview locators
 
@@ -11,11 +11,26 @@ const namePreview = (page: Page) => {
   return page.locator(NAME);
 };
 
+const textPreview = (page: Page) => {
+  return page.locator(TEXT);
+};
+
+const detailsPreview = (page: Page) => {
+  return page.locator(DETAILS);
+};
+
 const profilePreview = (page: Page) => {
   return page.locator(PROFILE);
 };
 
 const initialPreview = (page: Page) => {
   return page.locator(INITIALS);
 };
-export { emailPreview, namePreview, profilePreview, initialPreview };
+export {
+  emailPreview,
+  namePreview,
+  textPreview,
+  detailsPreview,
+  profilePreview,
+  initialPreview,
+};

playwright/components/profile/locators.ts

@@ -1,5 +1,7 @@
 // component preview locators
 export const EMAIL = '[data-element="email"]';
 export const NAME = '[data-element="name"]';
+export const TEXT = '[data-element="text"]';
+export const DETAILS = '[data-element="details"]';
 export const INITIALS = '[data-element="initials"]';
 export const PROFILE = '[data-component="profile"]';

src/components/portrait/portrait.component.tsx

@@ -1,16 +1,18 @@
 import React, { useEffect, useState, useContext } from "react";
 import { MarginProps } from "styled-system";
+import MD5 from "crypto-js/md5";
 import invariant from "invariant";
 
 import { IconType } from "../icon";
 import Tooltip from "../tooltip";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import PortraitGravatar from "./portrait-gravatar.component";
-import PortraitInitials from "./portrait-initials.component";
+import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
 import {
   StyledCustomImg,
   StyledIcon,
   StyledPortraitContainer,
+  StyledPortraitInitials,
+  StyledPortraitGravatar,
 } from "./portrait.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { NewValidationContext as RoundedCornersOptOutContext } from "../carbon-provider/carbon-provider.component";
@@ -26,6 +28,8 @@ export interface PortraitProps extends MarginProps {
   src?: string;
   /** The size of the Portrait. */
   size?: PortraitSizes;
+  /** @private @ignore */
+  name?: string;
   /** The `alt` HTML string. */
   alt?: string;
   /** The shape of the Portrait. */
@@ -56,10 +60,11 @@ export interface PortraitProps extends MarginProps {
   tooltipFontColor?: string;
 }
 
-export const Portrait = ({
-  alt = "",
+const Portrait = ({
+  alt,
+  name,
   darkBackground = false,
-  gravatar,
+  gravatar = "",
   iconType = "individual",
   initials,
   shape,
@@ -92,35 +97,38 @@ export const Portrait = ({
 
   const tagProps = tagComponent("portrait", rest);
 
+  const gravatarSrc = () => {
+    const { dimensions } = PORTRAIT_SIZE_PARAMS[size];
+    const base = "https://www.gravatar.com/avatar/";
+    const hash = MD5(gravatar.toLowerCase());
+    const fallbackOption = "404"; // "Return an HTTP 404 File Not Found response"
+
+    /** @see https://en.gravatar.com/site/implement/images/#default-image */
+    return `${base}${hash}?s=${dimensions}&d=${fallbackOption}`;
+  };
+
   const renderComponent = () => {
     let portrait = (
-      <StyledIcon
-        type={iconType}
-        size={size}
-        shape={shape || defaultShape}
-        darkBackground={darkBackground}
-      />
+      <StyledIcon type={iconType} size={size} darkBackground={darkBackground} />
     );
 
     if (initials) {
       portrait = (
-        <PortraitInitials
+        <StyledPortraitInitials
           size={size}
-          shape={shape || defaultShape}
-          initials={initials}
           darkBackground={darkBackground}
-          alt={alt}
-        />
+          data-element="initials"
+        >
+          {initials.toUpperCase()}
+        </StyledPortraitInitials>
       );
     }
 
     if (src && !externalError) {
       portrait = (
         <StyledCustomImg
           src={src}
-          alt={alt}
-          size={size}
-          shape={shape || defaultShape}
+          alt={alt || name || ""}
           data-element="user-image"
           onError={() => setExternalError(true)}
         />
@@ -129,12 +137,10 @@ export const Portrait = ({
 
     if (gravatar && !externalError) {
       portrait = (
-        <PortraitGravatar
-          gravatarEmail={gravatar}
-          shape={shape || defaultShape}
-          size={size}
-          alt={alt}
-          errorCallback={() => setExternalError(true)}
+        <StyledPortraitGravatar
+          src={gravatarSrc()}
+          alt={alt || name || ""}
+          onError={() => setExternalError(true)}
         />
       );
     }
@@ -155,6 +161,9 @@ export const Portrait = ({
             {...filterStyledSystemMarginProps(rest)}
             onClick={onClick}
             {...tagProps}
+            darkBackground={darkBackground}
+            size={size}
+            shape={shape || defaultShape}
           >
             {portrait}
           </StyledPortraitContainer>
@@ -167,6 +176,9 @@ export const Portrait = ({
         {...filterStyledSystemMarginProps(rest)}
         onClick={onClick}
         {...tagProps}
+        darkBackground={darkBackground}
+        size={size}
+        shape={shape || defaultShape}
       >
         {portrait}
       </StyledPortraitContainer>

src/components/portrait/portrait.config.ts

@@ -1,6 +1,7 @@
-export const PORTRAIT_SHAPES = ["circle", "square"];
-type PortraitSize = "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
-export const PORTRAIT_SIZES: PortraitSize[] = [
+import { PortraitShapes, PortraitSizes } from "./portrait.component";
+
+export const PORTRAIT_SHAPES: PortraitShapes[] = ["circle", "square"];
+export const PORTRAIT_SIZES: PortraitSizes[] = [
   "XS",
   "S",
   "M",
@@ -10,7 +11,7 @@ export const PORTRAIT_SIZES: PortraitSize[] = [
   "XXL",
 ];
 type PortraitSizeParams = Record<
-  PortraitSize,
+  PortraitSizes,
   { dimensions: number; iconDimensions: number }
 >;
 export const PORTRAIT_SIZE_PARAMS: PortraitSizeParams = {