chore: address comments from review

Sage · Nov 1, 2023 · 71ae631 · 71ae631
1 parent d0e219b
commit 71ae631
Show file tree

Hide file tree

Showing 11 changed files with 253 additions and 258 deletions.
diff --git a/src/components/portrait/portrait.component.tsx b/src/components/portrait/portrait.component.tsx
@@ -108,18 +108,12 @@ const Portrait = ({
   };
 
   const renderComponent = () => {
-    let portrait = (
-      <StyledIcon type={iconType} size={size} darkBackground={darkBackground} />
-    );
+    let portrait = <StyledIcon type={iconType} size={size} />;
 
     if (initials) {
       portrait = (
-        <StyledPortraitInitials
-          size={size}
-          darkBackground={darkBackground}
-          data-element="initials"
-        >
-          {initials.toUpperCase()}
+        <StyledPortraitInitials size={size} data-element="initials">
+          {initials}
         </StyledPortraitInitials>
       );
     }

diff --git a/src/components/portrait/portrait.pw.tsx b/src/components/portrait/portrait.pw.tsx
@@ -227,8 +227,6 @@ test.describe("Prop checks for Portrait component", () => {
           "background-color"
         );
 
-        console.log(backgroundColorTokens);
-
         expect(backgroundColorTokens.toString()).toBe(tokenVal);
         await expect(portraitPreview(page)).toHaveCSS(
           "background-color",
@@ -255,8 +253,6 @@ test.describe("Prop checks for Portrait component", () => {
           "color"
         );
 
-        console.log(colorTokens);
-
         expect(colorTokens.toString()).toBe(tokenVal);
         await expect(portraitPreview(page)).toHaveCSS("color", color);
       });

diff --git a/src/components/portrait/portrait.spec.tsx b/src/components/portrait/portrait.spec.tsx
@@ -54,7 +54,6 @@ describe("PortraitComponent", () => {
           overflow: "hidden",
           border: "1px solid var(--colorsUtilityReadOnly600)",
           display: "inline-block",
-          flexShrink: "0",
         },
         wrapper.find(StyledPortraitContainer)
       );
@@ -411,7 +410,6 @@ describe("PortraitComponent", () => {
     const expectedProps = {
       children: "AB",
       size: "M",
-      darkBackground: false,
     };
 
     const testSuccess = (element: JSX.Element) =>

diff --git a/src/components/portrait/portrait.style.tsx b/src/components/portrait/portrait.style.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { margin, MarginProps } from "styled-system";
 
 import BaseTheme from "../../style/themes/base";
-import Icon, { IconType } from "../icon";
+import Icon from "../icon";
 import { PortraitSizes, PortraitShapes } from "./portrait.component";
 import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
 import profileConfigSizes from "../profile/profile.config";
@@ -12,12 +12,11 @@ type StyledPortraitProps = {
   darkBackground?: boolean;
   size: PortraitSizes;
   shape?: PortraitShapes;
-  type: IconType;
   onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
 };
 
 export const StyledPortraitInitials = styled.div<
-  Pick<StyledPortraitProps, "darkBackground" | "size">
+  Pick<StyledPortraitProps, "size">
 >`
   font-weight: bold;
   font-size: ${({ size }) => profileConfigSizes[size].initialSize};
@@ -41,9 +40,7 @@ export const StyledCustomImg = styled.img`
 
 // && is used here to increase the specificity
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const StyledIcon = styled(Icon)<
-  Pick<StyledPortraitProps, "darkBackground" | "size">
->`
+export const StyledIcon = styled(Icon)<Pick<StyledPortraitProps, "size">>`
   && {
     color: inherit;
     height: inherit;
@@ -52,10 +49,11 @@ export const StyledIcon = styled(Icon)<
     ::before {
       font-size: ${({ size }) => PORTRAIT_SIZE_PARAMS[size].iconDimensions}px;
     }
+  }
 `;
 
 export const StyledPortraitContainer = styled.div<
-  Pick<StyledPortraitProps, "darkBackground" | "size" | "shape"> & MarginProps
+  StyledPortraitProps & MarginProps
 >`
   color: ${({ darkBackground }) =>
     darkBackground
@@ -72,7 +70,6 @@ export const StyledPortraitContainer = styled.div<
     shape === "square" ? "0px" : "var(--borderRadiusCircle)"};
   border: 1px solid var(--colorsUtilityReadOnly600);
   display: inline-block;
-  flex-shrink: 0;
   ${({ onClick }) => onClick && "cursor: pointer"}
   ${margin}
 `;

diff --git a/src/components/profile/component.test-pw.tsx b/src/components/profile/component.test-pw.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import Profile, { ProfileProps } from ".";
 
-const EmptyProfileComponent = (props: Partial<ProfileProps>) => {
+export const EmptyProfileComponent = (props: Partial<ProfileProps>) => {
   return <Profile {...props} />;
 };
 
-const ProfileComponent = (props: Partial<ProfileProps>) => {
+export const ProfileComponent = (props: Partial<ProfileProps>) => {
   return (
     <Profile
       email="email@email.com"
@@ -16,5 +16,3 @@ const ProfileComponent = (props: Partial<ProfileProps>) => {
     />
   );
 };
-
-export { EmptyProfileComponent, ProfileComponent };
diff --git a/src/components/profile/profile-test.stories.tsx b/src/components/profile/profile-test.stories.tsx
@@ -32,6 +32,7 @@ DefaultStory.story = {
     initials: "JS",
     size: PROFILE_SIZES[0],
     name: "John Smith",
+    text: "Some other text about John here",
     src: "",
   },
 };

diff --git a/src/components/profile/profile.component.tsx b/src/components/profile/profile.component.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import invariant from "invariant";
 
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import {
@@ -13,7 +12,7 @@ import {
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { ProfileSize } from "./profile.config";
 
-export function acronymize(str?: string) {
+function acronymize(str?: string) {
   if (!str) return "";
   const matches = str.match(/\b\w/g);
   if (!matches) return "";
@@ -55,40 +54,39 @@ export const Profile = ({
 }: ProfileProps) => {
   const getInitials = () => {
     if (initials) return initials;
-    return acronymize(name);
+    return acronymize(name).slice(0, 3).toUpperCase();
+  };
+
+  const commonAvatarProps = {
+    darkBackground,
+    alt,
+    name,
+    initials: getInitials(),
+    size,
   };
 
   const avatar = () => {
     if (src) {
       return (
         <ProfileAvatarStyle
           src={src}
-          darkBackground={darkBackground}
-          alt={alt}
-          name={name}
-          initials={getInitials()}
-          size={size}
           data-element="user-image"
+          {...commonAvatarProps}
         />
       );
     }
-    return (
-      <ProfileAvatarStyle
-        initials={getInitials()}
-        darkBackground={darkBackground}
-        gravatar={email}
-        alt={alt}
-        name={name}
-        size={size}
-      />
-    );
+    return <ProfileAvatarStyle gravatar={email} {...commonAvatarProps} />;
   };
 
-  invariant(
-    !(!name && (email || text)),
-    "The `email` or `text` prop cannot be used without the `name` prop." +
-      " Please use the `name` prop as well as `email` or `text`."
-  );
+  let useOfNoNameWarnTriggered = false;
+
+  if (!useOfNoNameWarnTriggered && !name && (email || text)) {
+    useOfNoNameWarnTriggered = true;
+    console.warn(
+      "[WARNING] The `email` or `text` prop should not be used without the `name` prop in `Profile`." +
+        " Please use the `name` prop as well as `email` or `text`."
+    );
+  }
 
   const children = () => {
     if (name)