f

.github/workflows/get_figma_images.yml

@@ -42,3 +42,7 @@ jobs:
       - uses: stefanzweifel/git-auto-commit-action@v4
         with:
           commit_message: github-actions[bot] Update figma images
+      - uses: actions-ecosystem/action-remove-labels@v1
+        if: always()
+        with:
+          labels: 'update figma images'

content/components/banner.mdx

@@ -38,10 +38,10 @@ Don't show more than one banner at a time. For more information, see this articl
 
 ## Anatomy
 
-<img
+<FigmaImage
   width="960"
   alt="Anatomy of a banner, including the message, title, icon, dismiss button, primary, and secondary action"
-  src="https://github.com/primer/design/assets/813754/40ff27e0-8d69-490a-a619-a4956828e77e"
+  src="https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=37174-89086&t=93vQIXFfs0sZZR3r-4"
 />
 
 ## Options

src/components/figma-image.tsx

@@ -1,12 +1,20 @@
 import React from 'react';
 import {parseFigmaNodeUrl} from '@primer/figma-images/src/utils';
 import { Link } from '@primer/react';
+import { fontSizes } from '@primer/react/lib-esm/theme-preval';
 
 type FigmaImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
   src: string
   caption?: string
 }
 
+const cssStyles = {
+  width: "100%",
+  "& img": {
+    width: '100%'
+  }
+}
+
 const FigmaImageDir = '/images/figma';
 
 export const FigmaImage: React.FC<FigmaImageProps> = ({src, caption, ...props}) => {
@@ -16,8 +24,8 @@ export const FigmaImage: React.FC<FigmaImageProps> = ({src, caption, ...props})
   const {nodeId, fileId} = parseFigmaNodeUrl(src);
   const imagePath = `${FigmaImageDir}/${fileId}-${nodeId}.png`
   // return image component
-  return (<figure>
+  return (<figure className="FigmaImage" style={cssStyles}>
     <img src={imagePath} {...props}/>
-    <figcaption>{caption}<Link href={src}>Edit Image</Link></figcaption>
+    <figcaption>{caption}<Link sx={{fontSize: '12px'}} className="link" href={src}>Edit in Figma</Link></figcaption>
   </figure>)
 }