From a04e811cb5ea6ce8a16da820e87e4c3b24d4175e Mon Sep 17 00:00:00 2001
From: Erik Goens <egoens@thumbtack.com>
Date: Fri, 6 Jan 2023 10:35:34 -0600
Subject: [PATCH] Fix for placecage image service which no longer active (#869)

* fix for placecage image service which no longer active

* updates avatar tests
---
 .../Avatar/__snapshots__/test.tsx.snap        | 24 ++++-----
 .../components/Avatar/test.tsx                |  8 +--
 .../pages/components/avatar/react/index.mdx   | 54 +++++++++----------
 .../pages/components/avatar/scss/index.mdx    | 14 ++---
 .../pages/components/avatar/usage/index.mdx   | 14 ++---
 5 files changed, 57 insertions(+), 57 deletions(-)

diff --git a/packages/thumbprint-react/components/Avatar/__snapshots__/test.tsx.snap b/packages/thumbprint-react/components/Avatar/__snapshots__/test.tsx.snap
index 2bdf2d4a3..a6be0ef4e 100644
--- a/packages/thumbprint-react/components/Avatar/__snapshots__/test.tsx.snap
+++ b/packages/thumbprint-react/components/Avatar/__snapshots__/test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EntityAvatar renders an image when the user has one 1`] = `
 <EntityAvatar
-  imageUrl="//www.placecage.com/130/130"
+  imageUrl="//https://i.pravatar.cc/140"
   initial="N"
 >
   <div
@@ -17,7 +17,7 @@ exports[`EntityAvatar renders an image when the user has one 1`] = `
     <Image
       className="squareAvatar"
       height="48px"
-      src="//www.placecage.com/130/130"
+      src="//https://i.pravatar.cc/140"
     >
       <picture
         className="picture squareAvatar"
@@ -41,7 +41,7 @@ exports[`EntityAvatar renders an image when the user has one 1`] = `
       <noscript>
         <img
           alt=""
-          src="//www.placecage.com/130/130"
+          src="//https://i.pravatar.cc/140"
         />
       </noscript>
     </Image>
@@ -80,7 +80,7 @@ exports[`EntityAvatar renders the initials when the user has no image 1`] = `
 exports[`adds the \`fullName\` as \`alt\` text when image is provided 1`] = `
 <UserAvatar
   fullName="Duck Goose"
-  imageUrl="//www.placecage.com/130/130"
+  imageUrl="//https://i.pravatar.cc/140"
 >
   <div
     className="root rootSmall"
@@ -95,7 +95,7 @@ exports[`adds the \`fullName\` as \`alt\` text when image is provided 1`] = `
       alt="Avatar for Duck Goose"
       className="circleAvatar"
       height="48px"
-      src="//www.placecage.com/130/130"
+      src="//https://i.pravatar.cc/140"
     >
       <picture
         className="picture circleAvatar"
@@ -119,7 +119,7 @@ exports[`adds the \`fullName\` as \`alt\` text when image is provided 1`] = `
       <noscript>
         <img
           alt="Avatar for Duck Goose"
-          src="//www.placecage.com/130/130"
+          src="//https://i.pravatar.cc/140"
         />
       </noscript>
     </Image>
@@ -157,7 +157,7 @@ exports[`adds the \`fullName\` as \`title\` text 1`] = `
 exports[`adds the \`fullName\` as \`title\` text 2`] = `
 <UserAvatar
   fullName="Duck Goose"
-  imageUrl="//www.placecage.com/130/130"
+  imageUrl="//https://i.pravatar.cc/140"
 >
   <div
     className="root rootSmall"
@@ -172,7 +172,7 @@ exports[`adds the \`fullName\` as \`title\` text 2`] = `
       alt="Avatar for Duck Goose"
       className="circleAvatar"
       height="48px"
-      src="//www.placecage.com/130/130"
+      src="//https://i.pravatar.cc/140"
     >
       <picture
         className="picture circleAvatar"
@@ -196,7 +196,7 @@ exports[`adds the \`fullName\` as \`title\` text 2`] = `
       <noscript>
         <img
           alt="Avatar for Duck Goose"
-          src="//www.placecage.com/130/130"
+          src="//https://i.pravatar.cc/140"
         />
       </noscript>
     </Image>
@@ -639,7 +639,7 @@ exports[`renders an SVG when \`isChecked\` is true 2`] = `
 
 exports[`renders an image when the user has one 1`] = `
 <UserAvatar
-  imageUrl="//www.placecage.com/130/130"
+  imageUrl="//https://i.pravatar.cc/140"
   initials="NC"
 >
   <div
@@ -654,7 +654,7 @@ exports[`renders an image when the user has one 1`] = `
     <Image
       className="circleAvatar"
       height="48px"
-      src="//www.placecage.com/130/130"
+      src="//https://i.pravatar.cc/140"
     >
       <picture
         className="picture circleAvatar"
@@ -678,7 +678,7 @@ exports[`renders an image when the user has one 1`] = `
       <noscript>
         <img
           alt=""
-          src="//www.placecage.com/130/130"
+          src="//https://i.pravatar.cc/140"
         />
       </noscript>
     </Image>
diff --git a/packages/thumbprint-react/components/Avatar/test.tsx b/packages/thumbprint-react/components/Avatar/test.tsx
index 2c7bdcf4e..c151e6626 100644
--- a/packages/thumbprint-react/components/Avatar/test.tsx
+++ b/packages/thumbprint-react/components/Avatar/test.tsx
@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
 import { UserAvatar, EntityAvatar } from './index';
 
 test('renders an image when the user has one', (): void => {
-    const wrapper = mount(<UserAvatar imageUrl="//www.placecage.com/130/130" initials="NC" />);
+    const wrapper = mount(<UserAvatar imageUrl="//https://i.pravatar.cc/140" initials="NC" />);
     expect(wrapper).toMatchSnapshot();
 });
 
@@ -16,7 +16,7 @@ test('renders the initials when the user has no image', (): void => {
 test('adds the `fullName` as `title` text', (): void => {
     const wrapper = mount(<UserAvatar fullName="Duck Goose" />);
     const wrapperWithImage = mount(
-        <UserAvatar fullName="Duck Goose" imageUrl="//www.placecage.com/130/130" />,
+        <UserAvatar fullName="Duck Goose" imageUrl="//https://i.pravatar.cc/140" />,
     );
     const wrapperWithInitials = mount(<UserAvatar fullName="Duck Goose" initials="DG" />);
 
@@ -30,7 +30,7 @@ test('adds the `fullName` as `title` text', (): void => {
 
 test('adds the `fullName` as `alt` text when image is provided', (): void => {
     const wrapper = mount(
-        <UserAvatar fullName="Duck Goose" imageUrl="//www.placecage.com/130/130" />,
+        <UserAvatar fullName="Duck Goose" imageUrl="//https://i.pravatar.cc/140" />,
     );
     expect(wrapper.find('Image').prop('alt')).toContain('Duck Goose');
     expect(wrapper).toMatchSnapshot();
@@ -91,7 +91,7 @@ test('renders checkmark SVG when `isChecked` and `isOnline` are true', (): void
 });
 
 test('EntityAvatar renders an image when the user has one', (): void => {
-    const wrapper = mount(<EntityAvatar imageUrl="//www.placecage.com/130/130" initial="N" />);
+    const wrapper = mount(<EntityAvatar imageUrl="//https://i.pravatar.cc/140" initial="N" />);
     expect(wrapper).toMatchSnapshot();
 });
 
diff --git a/www/src/pages/components/avatar/react/index.mdx b/www/src/pages/components/avatar/react/index.mdx
index 014558af3..ac997537b 100644
--- a/www/src/pages/components/avatar/react/index.mdx
+++ b/www/src/pages/components/avatar/react/index.mdx
@@ -19,10 +19,10 @@ Avatars are available as two components: `UserAvatar` and `EntityAvatar`.
 ```jsx
 <div className="flex">
     <div className="mr3">
-        <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
+        <EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
     </div>
     <div>
-        <UserAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
+        <UserAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
     </div>
 </div>
 ```
@@ -37,36 +37,36 @@ Both `UserAvatar` and `EntityAvatar` are available in five sizes ranging from `x
 <>
     <div className="flex items-center mb4">
         <div className="mr3">
-            <UserAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
+            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
         </div>
         <div className="mr3">
-            <UserAvatar imageUrl="https://www.placecage.com/640/480" size="large" />
+            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="large" />
         </div>
         <div className="mr3">
-            <UserAvatar imageUrl="https://www.placecage.com/640/480" size="medium" />
+            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="medium" />
         </div>
         <div className="mr3">
-            <UserAvatar imageUrl="https://www.placecage.com/640/480" size="small" />
+            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="small" />
         </div>
         <div className="mr3">
-            <UserAvatar imageUrl="https://www.placecage.com/640/480" size="xsmall" />
+            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="xsmall" />
         </div>
     </div>
     <div className="flex items-center">
         <div className="mr3">
-            <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
+            <EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
         </div>
         <div className="mr3">
-            <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="large" />
+            <EntityAvatar imageUrl="https://i.pravatar.cc/140" size="large" />
         </div>
         <div className="mr3">
-            <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="medium" />
+            <EntityAvatar imageUrl="https://i.pravatar.cc/140" size="medium" />
         </div>
         <div className="mr3">
-            <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="small" />
+            <EntityAvatar imageUrl="https://i.pravatar.cc/140" size="small" />
         </div>
         <div className="mr3">
-            <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="xsmall" />
+            <EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xsmall" />
         </div>
     </div>
 </>
@@ -133,37 +133,37 @@ This badge indicates that a user or entity is online.
 <div>
     <div className="flex items-center mb4">
         <div className="mr2">
-            <UserAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="xlarge" />
+            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xlarge" />
         </div>
         <div className="mr2">
-            <UserAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="large" />
+            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="large" />
         </div>
         <div className="mr2">
-            <UserAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="medium" />
+            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="medium" />
         </div>
         <div className="mr2">
-            <UserAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="small" />
+            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="small" />
         </div>
         <div className="mr2">
-            <UserAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="xsmall" />
+            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xsmall" />
         </div>
     </div>
 
     <div className="flex items-center">
         <div className="mr2">
-            <EntityAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="xlarge" />
+            <EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xlarge" />
         </div>
         <div className="mr2">
-            <EntityAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="large" />
+            <EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="large" />
         </div>
         <div className="mr2">
-            <EntityAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="medium" />
+            <EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="medium" />
         </div>
         <div className="mr2">
-            <EntityAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="small" />
+            <EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="small" />
         </div>
         <div className="mr2">
-            <EntityAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="xsmall" />
+            <EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xsmall" />
         </div>
     </div>
 </div>
@@ -180,19 +180,19 @@ This badge indicates that a user or entity is online.
 ```jsx
 <div className="flex items-center mb4">
     <div className="mr2">
-        <UserAvatar imageUrl="https://www.placecage.com/640/480" isChecked size="xlarge" />
+        <UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="xlarge" />
     </div>
     <div className="mr2">
-        <UserAvatar imageUrl="https://www.placecage.com/640/480" isChecked size="large" />
+        <UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="large" />
     </div>
     <div className="mr2">
-        <UserAvatar imageUrl="https://www.placecage.com/640/480" isChecked size="medium" />
+        <UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="medium" />
     </div>
     <div className="mr2">
-        <UserAvatar imageUrl="https://www.placecage.com/640/480" isChecked size="small" />
+        <UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="small" />
     </div>
     <div className="mr2">
-        <UserAvatar imageUrl="https://www.placecage.com/640/480" isChecked size="xsmall" />
+        <UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="xsmall" />
     </div>
 </div>
 ```
diff --git a/www/src/pages/components/avatar/scss/index.mdx b/www/src/pages/components/avatar/scss/index.mdx
index 96c4d8f4e..31e76cc57 100644
--- a/www/src/pages/components/avatar/scss/index.mdx
+++ b/www/src/pages/components/avatar/scss/index.mdx
@@ -34,7 +34,7 @@ import Alert from 'components/alert';
 
 ```html
 <div class="tp-avatar tp-avatar--xlarge">
-    <img src="https://www.placecage.com/130/130" class="tp-avatar__img" />
+    <img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
 </div>
 ```
 
@@ -42,7 +42,7 @@ import Alert from 'components/alert';
 
 ```html
 <div class="tp-avatar tp-avatar--large">
-    <img src="https://www.placecage.com/130/130" class="tp-avatar__img" />
+    <img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
 </div>
 ```
 
@@ -50,7 +50,7 @@ import Alert from 'components/alert';
 
 ```html
 <div class="tp-avatar tp-avatar--medium">
-    <img src="https://www.placecage.com/130/130" class="tp-avatar__img" />
+    <img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
 </div>
 ```
 
@@ -58,7 +58,7 @@ import Alert from 'components/alert';
 
 ```html
 <div class="tp-avatar tp-avatar--small">
-    <img src="https://www.placecage.com/130/130" class="tp-avatar__img" />
+    <img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
 </div>
 ```
 
@@ -66,7 +66,7 @@ import Alert from 'components/alert';
 
 ```html
 <div class="tp-avatar tp-avatar--xsmall">
-    <img src="https://www.placecage.com/130/130" class="tp-avatar__img" />
+    <img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
 </div>
 ```
 
@@ -81,7 +81,7 @@ import Alert from 'components/alert';
 
 ```html
 <div class="tp-avatar tp-avatar--xlarge">
-    <img src="//www.placecage.com/130/130" class="tp-avatar__img" />
+    <img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
     <div class="tp-avatar__badge tp-avatar__badge--hired" />
 </div>
 ```
@@ -90,7 +90,7 @@ import Alert from 'components/alert';
 
 ```html
 <div class="tp-avatar tp-avatar--xlarge">
-    <img src="//www.placecage.com/130/130" class="tp-avatar__img" />
+    <img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
     <div class="tp-avatar__badge tp-avatar__badge--notification">99</div>
 </div>
 ```
diff --git a/www/src/pages/components/avatar/usage/index.mdx b/www/src/pages/components/avatar/usage/index.mdx
index c72918458..421360008 100644
--- a/www/src/pages/components/avatar/usage/index.mdx
+++ b/www/src/pages/components/avatar/usage/index.mdx
@@ -26,13 +26,13 @@ One of the defining guidelines for avatars and their shape is what the avatar is
 
 <div className="grid mw8 mt3">
     <div className="col-4">
-        <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
+        <EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
         <div className="tp-body-3 mt2 black-300">
             <div>Entity Avatar</div>
         </div>
     </div>
     <div className="col-4">
-        <UserAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
+        <UserAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
         <div className="tp-body-3 mt2 black-300">
             <div>User Avatar</div>
         </div>
@@ -55,23 +55,23 @@ One of the defining guidelines for avatars and their shape is what the avatar is
 
 <div className="flex items-baseline">
     <div className="mr4">
-        <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
+        <EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
         <div className="tp-body-3">Extra Large</div>
     </div>
     <div className="mr4">
-        <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="large" />
+        <EntityAvatar imageUrl="https://i.pravatar.cc/140" size="large" />
         <div className="tp-body-3">Large</div>
     </div>
     <div className="mr4">
-        <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="medium" />
+        <EntityAvatar imageUrl="https://i.pravatar.cc/140" size="medium" />
         <div className="tp-body-3">Medium</div>
     </div>
     <div className="mr4">
-        <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="small" />
+        <EntityAvatar imageUrl="https://i.pravatar.cc/140" size="small" />
         <div className="tp-body-3">Small</div>
     </div>
     <div className="mr4">
-        <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="xsmall" />
+        <EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xsmall" />
         <div className="tp-body-3">Extra Small</div>
     </div>
 </div>