temp

cypress/components/profile/profile.cy.tsx

@@ -100,6 +100,36 @@ context("Tests for Profile component", () => {
         });
       }
     );
+
+    describe("colour tests", () => {
+      it.each([
+        [true, "rgb(204, 214, 219)"],
+        [false, "rgba(0, 0, 0, 0.9)"],
+      ])(
+        "color should be correct when darkBackground variant is %s",
+        (boolVals, color) => {
+          CypressMountWithProviders(
+            <ProfileComponent name="John Doe" darkBackground={boolVals} />
+          );
+
+          profilePreview().should("have.css", "color", color);
+        }
+      );
+
+      it.each([
+        [false, "rgba(0, 0, 0, 0.9)"],
+        [true, "rgb(204, 214, 219)"],
+      ])(
+        "background-color should be correct when darkBackground variant is %s",
+        (boolVals, color) => {
+          CypressMountWithProviders(
+            <ProfileComponent name="John Doe" darkBackground={boolVals} />
+          );
+
+          profilePreview().should("have.css", "color", color);
+        }
+      );
+    });
   });
 
   describe("Accessibility tests for Profile component", () => {

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,25 +97,26 @@ 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
-          size={size}
-          shape={shape || defaultShape}
-          initials={initials}
-          darkBackground={darkBackground}
-          alt={alt}
-        />
+        <StyledPortraitInitials size={size} darkBackground={darkBackground}>
+          {initials.toUpperCase()}
+        </StyledPortraitInitials>
       );
     }
 
@@ -119,8 +125,6 @@ export const Portrait = ({
         <StyledCustomImg
           src={src}
           alt={alt}
-          size={size}
-          shape={shape || defaultShape}
           data-element="user-image"
           onError={() => setExternalError(true)}
         />
@@ -129,12 +133,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 +157,9 @@ export const Portrait = ({
             {...filterStyledSystemMarginProps(rest)}
             onClick={onClick}
             {...tagProps}
+            darkBackground={darkBackground}
+            size={size}
+            shape={shape || defaultShape}
           >
             {portrait}
           </StyledPortraitContainer>
@@ -167,6 +172,9 @@ export const Portrait = ({
         {...filterStyledSystemMarginProps(rest)}
         onClick={onClick}
         {...tagProps}
+        darkBackground={darkBackground}
+        size={size}
+        shape={shape || defaultShape}
       >
         {portrait}
       </StyledPortraitContainer>

src/components/portrait/portrait.pw.tsx

@@ -140,7 +140,7 @@ test.describe("Prop checks for Portrait component", () => {
 
   ([
     ["without", false, "rgb(242, 245, 246)"],
-    ["with", true, "rgb(153, 173, 183)"],
+    ["with", true, "rgba(0, 0, 0, 0.9)"],
   ] as [string, boolean, string][]).forEach(([renderState, boolVal, color]) => {
     test(`should render ${renderState} dark background variant, when darkBackground prop is ${boolVal}`, async ({
       mount,
@@ -155,6 +155,18 @@ test.describe("Prop checks for Portrait component", () => {
     });
   });
 
+  ["SPM", "JM", "AR", "MJ"].forEach((passInitials) => {
+    test(`should render with correct width and height, when initials prop is passed as ${passInitials}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<PortraitDefaultComponent initials={passInitials} />);
+
+      await expect(portraitInitials(page)).toHaveCSS("height", "38px");
+      await expect(portraitInitials(page)).toHaveCSS("width", "38px");
+    });
+  });
+
   testData.forEach((tooltipMessage) => {
     test(`should render with tooltipMessage as ${tooltipMessage}`, async ({
       mount,