chore: add deprecation notice to userprofileimage

cspell.json

@@ -99,12 +99,10 @@
     "disttags",
     "dragbar",
     "draggable",
-    "interstitialscreenviewmodule",
     "draghandle",
     "dragmode",
     "editinplace",
     "editsidepanel",
-    "explainability",
     "emptystate",
     "erroremptystate",
     "explainability",
@@ -133,8 +131,8 @@
     "Menlo",
     "mordech",
     "namor",
-    "nocheck",
     "Neue",
+    "nocheck",
     "nodataemptystate",
     "noninteractive",
     "nonlinearreading",

e2e/components/UserProfileImage/UserProfileImage-test.avt.e2e.js

@@ -14,7 +14,7 @@ test.describe('UserProfileImage @avt', () => {
   test('@avt-default-state', async ({ page }) => {
     await visitStory(page, {
       component: 'UserProfileImage',
-      id: 'ibm-products-patterns-user-profile-images-userprofileimage--default',
+      id: 'deprecated-user-profile-images-userprofileimage--default',
       globals: {
         carbonTheme: 'white',
       },

packages/ibm-products/src/components/UserAvatar/UserAvatar.mdx

@@ -11,7 +11,24 @@ import * as UserAvatarStories from './UserAvatar.stories';
 - [Example usage](#example-usage)
 - [Component API](#component-api)
 
-## Overview
+## Migration from `UserProfileImage`
+
+If you are currently using `UserProfileImage` you can use the following guide to
+migrate to the newer `UserAvatar` component.
+
+The following props have been updated in `UserAvatar`:
+
+`icon` has been replaced with `renderIcon`
+
+`backgroundColor` remains the same but the values have changed. To see the new
+values please refer to the component API table below.
+
+`initials` has been replaced with `name`. Please refer to the component API
+table below to see the new specifications.
+
+`sm` has been removed from the options for `size`
+
+`theme` and `kind` have been removed
 
 {/* TODO: Overview. */}
 

packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js

@@ -11,6 +11,8 @@ import * as stories from './UserProfileImage.stories';
 
 const DocsPage = () => (
   <StoryDocsPage
+    // cspell:disable-next-line
+    deprecationNotice="This component is deprecated and will be removed in the next major version. Please migrate to [UserAvatar](?path=/docs/ibm-products-components-user-avatar-useravatar--docs#migration-from-userprofileimage)."
     blocks={[
       {
         story: stories.Default,

packages/ibm-products/src/components/UserProfileImage/UserProfileImage.stories.jsx

@@ -9,6 +9,7 @@ import React from 'react';
 import { UserProfileImage } from '.';
 import image from './headshot.jpg'; // cspell:disable-line
 import DocsPage from './UserProfileImage.docs-page';
+import { Annotation } from '../../../../core/.storybook/Annotation';
 
 // import styles from './_storybook.scss'; // import storybook which includes component and additional storybook styles
 
@@ -19,7 +20,7 @@ const defaultArgs = {
 };
 
 export default {
-  title: 'IBM Products/Patterns/User profile images/UserProfileImage',
+  title: 'Deprecated/User profile images/UserProfileImage',
   component: UserProfileImage,
   tags: ['autodocs'],
   argTypes: {
@@ -69,6 +70,27 @@ export default {
       page: DocsPage,
     },
   },
+  decorators: [
+    (story) => (
+      <div>
+        <Annotation
+          type="deprecation-notice"
+          text={
+            <div>
+              This component is deprecated and will be removed in the next major
+              version. Please migrate to {/* cspell:disable-next-line */}
+              <a href="/?path=/docs/ibm-products-components-user-avatar-useravatar--docs">
+                UserAvatar
+              </a>
+              .
+            </div>
+          }
+        >
+          {story()}
+        </Annotation>
+      </div>
+    ),
+  ],
 };
 
 const Template = (args) => {

packages/ibm-products/src/components/UserProfileImage/UserProfileImage.test.js

@@ -27,6 +27,10 @@ const renderComponent = ({ ...rest } = {}) =>
   render(<UserProfileImage {...{ kind, size, theme, ...rest }} />);
 
 describe(componentName, () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
   it('should return a circle with background color', async () => {
     const { container } = renderComponent({
       backgroundColor: 'light-cyan',

packages/ibm-products/src/components/UserProfileImage/UserProfileImage.tsx

@@ -98,6 +98,7 @@ export type UserProfileImageProps = UserProfileImageBaseProps & imageProps;
 
 /**
  * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
+ * @deprecated
  */
 export let UserProfileImage = React.forwardRef<
   HTMLDivElement,
@@ -227,6 +228,12 @@ export let UserProfileImage = React.forwardRef<
   }
 );
 
+/**@ts-ignore*/
+UserProfileImage.deprecated = {
+  level: 'warn',
+  details: `Please replace ${componentName} with UserAvatar`,
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 UserProfileImage = pkg.checkComponentEnabled(UserProfileImage, componentName);