Replace remote GitHub avatars with local assets (#822)

* add avatar-mona.png as a static asset to Storybook * add avatar-mona.png as a static asset to docs * update references to external mona avatar in stories * update references to external mona avatar in docs * remove unused `avatar` property from IDE assistant chat message type * remove unused references to non-existent image at https://github.com/copilot.png * github-actions[bot] Regenerated snapshots * replace missing whitespace * refactored IDEChatMessage types * add changeset --------- Co-authored-by: joshfarrant <[email protected]>
primer · Nov 19, 2024 · 75da350 · 75da350
1 parent 281beb0
commit 75da350
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 75 deletions.
diff --git a/.changeset/quick-suns-poke.md b/.changeset/quick-suns-poke.md
@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Updated `IDEChatMessage` type declaration to differentiate between assistant and user messages.
diff --git a/apps/docs/content/components/Avatar/react.mdx b/apps/docs/content/components/Avatar/react.mdx
@@ -22,10 +22,7 @@ import {Avatar, Stack} from '@primer/react-brand'
 ### Default
 
 ```jsx live
-<Avatar
-  src="https://avatars.githubusercontent.com/u/92997159?v=4"
-  alt="Mona profile"
-/>
+<Avatar src="/brand/assets/avatar-mona.png" alt="Mona profile" />
 ```
 
 ### Sizes
@@ -42,27 +39,27 @@ The size of the avatar can be controlled by the `size` prop.
 >
   <Avatar
     size={32}
-    src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    src="/brand/assets/avatar-mona.png"
     alt="Mona avatar at 32px"
   />
   <Avatar
     size={40}
-    src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    src="/brand/assets/avatar-mona.png"
     alt="Mona avatar at 40px"
   />
   <Avatar
     size={48}
-    src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    src="/brand/assets/avatar-mona.png"
     alt="Mona avatar at 48px"
   />
   <Avatar
     size={64}
-    src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    src="/brand/assets/avatar-mona.png"
     alt="Mona avatar at 64px"
   />
   <Avatar
     size={80}
-    src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    src="/brand/assets/avatar-mona.png"
     alt="Mona avatar at 80px"
   />
 </Stack>
@@ -81,7 +78,7 @@ E.g. Providing only `narrow` will apply that value to all larger breakpoints, bu
 ```jsx live
 <Avatar
   size={{narrow: 32, regular: 40, wide: 80}}
-  src="https://avatars.githubusercontent.com/u/92997159?v=4"
+  src="/brand/assets/avatar-mona.png"
   alt="Mona avatar at 32px"
 />
 ```
@@ -101,13 +98,13 @@ The shape of the avatar can be controlled by the `shape` prop.
   <Avatar
     size={64}
     shape="circle"
-    src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    src="/brand/assets/avatar-mona.png"
     alt="A circular avatar picture"
   />
   <Avatar
     size={64}
     shape="square"
-    src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    src="/brand/assets/avatar-mona.png"
     alt="A square avatar picture"
   />
 </Stack>

diff --git a/apps/docs/content/components/IDE.mdx b/apps/docs/content/components/IDE.mdx
@@ -181,21 +181,20 @@ See Storybook for a comprehensive example of the Chat feature, inclusive of synt
       {
         role: 'user',
         handle: 'monalisa',
-        avatar: 'https://github.com/mona.png',
+        avatar: '/brand/assets/avatar-mona.png',
         message: 'How do I concatenate two arrays in JavaScript?',
       },
       {
         role: 'assistant',
         handle: 'GitHub Copilot',
-        avatar: 'https://github.com/copilot.png',
         message:
           "To concatenate two arrays in JavaScript, you can use the `concat` method. Here's an example:",
         codeSnippet: `const array1 = [1, 2, 3];\nconst array2 = [4, 5, 6];\nconst resultArray = array1.concat(array2);\nconsole.log(resultArray); // Output: [1, 2, 3, 4, 5, 6]`,
       },
       {
         role: 'user',
         handle: 'monalisa',
-        avatar: 'https://github.com/mona.png',
+        avatar: '/brand/assets/avatar-mona.png',
         message: 'It worked!',
       },
     ]}

diff --git a/apps/docs/content/components/Testimonial/react.mdx b/apps/docs/content/components/Testimonial/react.mdx
@@ -31,7 +31,7 @@ import {Testimonial} from '@primer/react-brand'
     David Ross
   </Testimonial.Name>
   <Testimonial.Avatar
-    src="https://avatars.githubusercontent.com/u/92997159?v=4"
+    src="/brand/assets/avatar-mona.png"
     alt="Circular avatar from David Ross's GitHub profile"
   />
 </Testimonial>

diff --git a/apps/docs/static/assets/avatar-mona.png b/apps/docs/static/assets/avatar-mona.png
diff --git a/apps/storybook/static/avatar-mona.png b/apps/storybook/static/avatar-mona.png
diff --git a/packages/react/src/IDE/IDE.test.tsx b/packages/react/src/IDE/IDE.test.tsx
@@ -20,7 +20,6 @@ describe('IDE', () => {
     {
       role: 'assistant',
       handle: 'GitHub Copilot',
-      avatar: 'https://github.com/copilot.png',
       message: "To concatenate two arrays in JavaScript, you can use the `concat` method. Here's an example:",
       codeSnippet:
         'const array1 = [1, 2, 3];\nconst array2 = [4, 5, 6];\nconst resultArray = array1.concat(array2);\nconsole.log(resultArray); // Output: [1, 2, 3, 4, 5, 6]',

diff --git a/packages/react/src/IDE/IDE.tsx b/packages/react/src/IDE/IDE.tsx
@@ -129,17 +129,20 @@ type IDEChatProps = {
   'data-testid'?: string
 } & BaseProps<HTMLElement>
 
-type MessageRole = 'user' | 'assistant'
-
-export type IDEChatMessage = {
-  role: MessageRole
-  handle: string
+type IDEChatMessageUser = {
+  role: 'user'
   avatar: string
-  message: string
-  codeSnippet?: string
-  highlighter?: 'hljs' // add additional highlighters as needed
 }
 
+type IDEChatMessageAssistant = {
+  role: 'assistant'
+}
+
+export type IDEChatMessage = {handle: string; message: string; codeSnippet?: string; highlighter?: 'hljs'} & (
+  | IDEChatMessageUser
+  | IDEChatMessageAssistant
+)
+
 const _Chat = memo(({'data-testid': testId, script, animationDelay = 3000, ...rest}: IDEChatProps) => {
   const delay = animationDelay
   const messagesRef = useRef<HTMLDivElement>(null)

diff --git a/packages/react/src/IDE/fixtures/content.ts b/packages/react/src/IDE/fixtures/content.ts
@@ -2,6 +2,7 @@ import {IDEChatMessage, IDEEditorFile} from '../IDE'
 import hljs from 'highlight.js/lib/core'
 import javascript from 'highlight.js/lib/languages/javascript'
 import python from 'highlight.js/lib/languages/python'
+import monaAvatar from '../../fixtures/images/avatar-mona.png'
 
 hljs.registerLanguage('javascript', javascript)
 hljs.registerLanguage('python', python)
@@ -10,13 +11,12 @@ export const chatScript: IDEChatMessage[] = [
   {
     role: 'user',
     handle: 'monalisa',
-    avatar: 'https://github.com/mona.png',
+    avatar: monaAvatar,
     message: 'How do I concatenate two arrays in JavaScript?',
   },
   {
     role: 'assistant',
     handle: 'GitHub Copilot',
-    avatar: 'https://github.com/copilot.png',
     message: "To concatenate two arrays in JavaScript, you can use the `concat` method. Here's an example:",
     codeSnippet: hljs.highlight(
       'const array1 = [1, 2, 3];\nconst array2 = [4, 5, 6];\nconst resultArray = array1.concat(array2);\nconsole.log(resultArray); // Output: [1, 2, 3, 4, 5, 6]',
@@ -27,13 +27,12 @@ export const chatScript: IDEChatMessage[] = [
   {
     role: 'user',
     handle: 'monalisa',
-    avatar: 'https://github.com/mona.png',
+    avatar: monaAvatar,
     message: 'Thanks! How do I check if a variable is an array?',
   },
   {
     role: 'assistant',
     handle: 'GitHub Copilot',
-    avatar: 'https://github.com/copilot.png',
     message: "You can use the `Array.isArray()` method to check if a variable is an array. Here's an example:",
     codeSnippet: hljs.highlight(
       "const myVariable = [1, 2, 3];\nif (Array.isArray(myVariable)) {\n  console.log('It is an array!');\n} else {\n  console.log('It is not an array.');\n}",
@@ -44,13 +43,12 @@ export const chatScript: IDEChatMessage[] = [
   {
     role: 'user',
     handle: 'monalisa',
-    avatar: 'https://github.com/mona.png',
+    avatar: monaAvatar,
     message: 'How do I remove a specific element from an array?',
   },
   {
     role: 'assistant',
     handle: 'GitHub Copilot',
-    avatar: 'https://github.com/copilot.png',
     message: "You can use the `filter` method to remove a specific element from an array. Here's an example:",
     codeSnippet: hljs.highlight(
       'const array = [1, 2, 3, 4, 5];\nconst elementToRemove = 3;\nconst filteredArray = array.filter(item => item !== elementToRemove);\nconsole.log(filteredArray); // Output: [1, 2, 4, 5]',

diff --git a/packages/react/src/Statistic/Statistic.features.stories.tsx b/packages/react/src/Statistic/Statistic.features.stories.tsx
@@ -3,6 +3,7 @@ import {Meta} from '@storybook/react'
 
 import {Statistic} from '.'
 import {AnimationProvider, Box, Grid, Stack, Testimonial, Text} from '../'
+import monaAvatar from '../fixtures/images/avatar-mona.png'
 
 export default {
   title: 'Components/Statistic/Features',
@@ -123,10 +124,7 @@ export const CustomIntro = () => (
                 first line of code we&apos;re writing.
               </Testimonial.Quote>
               <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
-              <Testimonial.Avatar
-                src="https://avatars.githubusercontent.com/u/92997159?v=4"
-                alt="Circular avatar from David Ross's GitHub profile"
-              />
+              <Testimonial.Avatar src={monaAvatar} alt="Circular avatar from David Ross's GitHub profile" />
             </Testimonial>
           </Box>
         )}

diff --git a/packages/react/src/Testimonial/Testimonial.stories.tsx b/packages/react/src/Testimonial/Testimonial.stories.tsx
@@ -3,6 +3,7 @@ import {Meta} from '@storybook/react'
 import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport'
 import {Testimonial, TestimonialProps, TestimonialQuoteMarkColors, defaultQuoteMarkColor} from '.'
 import {Stack} from '../'
+import monaAvatar from '../fixtures/images/avatar-mona.png'
 
 export default {
   title: 'Components/Testimonial',
@@ -71,10 +72,7 @@ const Template = (args: PlaygroundProps) => {
       <Testimonial {...args}>
         <Testimonial.Quote>{quote}</Testimonial.Quote>
         {type === 'avatar' && (
-          <Testimonial.Avatar
-            src="https://avatars.githubusercontent.com/u/92997159?v=4"
-            alt={`Circular avatar from ${name}'s GitHub profile`}
-          />
+          <Testimonial.Avatar src={monaAvatar} alt={`Circular avatar from ${name}'s GitHub profile`} />
         )}
         {type === 'logo' && (
           <Testimonial.Logo>
@@ -101,10 +99,7 @@ export const Avatar = () => (
         line of code we&apos;re writing.
       </Testimonial.Quote>
       <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
-      <Testimonial.Avatar
-        src="https://avatars.githubusercontent.com/u/92997159?v=4"
-        alt="Circular avatar from David Ross's GitHub profile"
-      />
+      <Testimonial.Avatar src={monaAvatar} alt="Circular avatar from David Ross's GitHub profile" />
     </Testimonial>
   </div>
 )
@@ -150,10 +145,7 @@ export const Duo = args => (
       </Testimonial.Quote>
       <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
 
-      <Testimonial.Avatar
-        src="https://avatars.githubusercontent.com/u/92997159?v=4"
-        alt="Circular avatar from David Ross's GitHub profile"
-      />
+      <Testimonial.Avatar src={monaAvatar} alt="Circular avatar from David Ross's GitHub profile" />
     </Testimonial>
     <Testimonial {...args}>
       <Testimonial.Quote>
@@ -162,10 +154,7 @@ export const Duo = args => (
       </Testimonial.Quote>
       <Testimonial.Name position="Pinterest">Engineering Architect</Testimonial.Name>
 
-      <Testimonial.Avatar
-        src="https://avatars.githubusercontent.com/u/92997159?v=4"
-        alt="Circular avatar from David Ross's GitHub profile"
-      />
+      <Testimonial.Avatar src={monaAvatar} alt="Circular avatar from David Ross's GitHub profile" />
     </Testimonial>
   </Stack>
 )
@@ -196,10 +185,7 @@ export const Trio = args => (
       </Testimonial.Quote>
       <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
 
-      <Testimonial.Avatar
-        src="https://avatars.githubusercontent.com/u/92997159?v=4"
-        alt="Circular avatar from David Ross's GitHub profile"
-      />
+      <Testimonial.Avatar src={monaAvatar} alt="Circular avatar from David Ross's GitHub profile" />
     </Testimonial>
     <Testimonial {...args}>
       <Testimonial.Quote>
@@ -208,21 +194,15 @@ export const Trio = args => (
       </Testimonial.Quote>
       <Testimonial.Name position="Pinterest">Engineering Architect</Testimonial.Name>
 
-      <Testimonial.Avatar
-        src="https://avatars.githubusercontent.com/u/92997159?v=4"
-        alt="Circular avatar from David Ross's GitHub profile"
-      />
+      <Testimonial.Avatar src={monaAvatar} alt="Circular avatar from David Ross's GitHub profile" />
     </Testimonial>
     <Testimonial {...args}>
       <Testimonial.Quote>
         With GitHub, we can scale and build projects on a new level now. It’s not about how good you are alone. It’s
         about the greatness we can achieve through sharing and collaboration.
       </Testimonial.Quote>
       <Testimonial.Name position="Engie">Head of Digital Communities</Testimonial.Name>
-      <Testimonial.Avatar
-        src="https://avatars.githubusercontent.com/u/92997159?v=4"
-        alt="Circular avatar from David Ross's GitHub profile"
-      />
+      <Testimonial.Avatar src={monaAvatar} alt="Circular avatar from David Ross's GitHub profile" />
     </Testimonial>
   </Stack>
 )
@@ -236,10 +216,7 @@ export const ColoredQuoteMark = args => (
       </Testimonial.Quote>
       <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
 
-      <Testimonial.Avatar
-        src="https://avatars.githubusercontent.com/u/92997159?v=4"
-        alt="Circular avatar from David Ross's GitHub profile"
-      />
+      <Testimonial.Avatar src={monaAvatar} alt="Circular avatar from David Ross's GitHub profile" />
     </Testimonial>
   </div>
 )
@@ -256,10 +233,7 @@ export const Large = args => (
         line of code we&apos;re writing.
       </Testimonial.Quote>
       <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
-      <Testimonial.Avatar
-        src="https://avatars.githubusercontent.com/u/92997159?v=4"
-        alt="Circular avatar from David Ross's GitHub profile"
-      />
+      <Testimonial.Avatar src={monaAvatar} alt="Circular avatar from David Ross's GitHub profile" />
     </Testimonial>
   </div>
 )
@@ -276,10 +250,7 @@ export const LargeHighlightedPortion = args => (
         first line of code we&apos;re writing.
       </Testimonial.Quote>
       <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
-      <Testimonial.Avatar
-        src="https://avatars.githubusercontent.com/u/92997159?v=4"
-        alt="Circular avatar from David Ross's GitHub profile"
-      />
+      <Testimonial.Avatar src={monaAvatar} alt="Circular avatar from David Ross's GitHub profile" />
     </Testimonial>
   </div>
 )