wait for workflow

.github/workflows/deploy_preview.yml

@@ -2,6 +2,10 @@ name: Deploy Preview
 
 on:
   pull_request:
+  workflow_run:
+    workflows: [Get Figma Images]
+    types:
+      - completed
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/getFigmaImages.yml → .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
@@ -264,7 +264,6 @@ For banners with two actions, one of them must be primary and the other must be
 
 The icon relates to the selected [variant](#variant) and can't be disabled. It can only be changed for banners of variant `info` or `upsell`.
 
-{' '}
 <img
   width="456"
   alt="Three banners with leading icons. Success banner has its standard circle and check icon, upsell banner has a custom computer icon, and the info banner has a custom shield icon with a keyhole inside of the lock."
@@ -343,5 +342,4 @@ If you're unsure about which technique is appropriate for your usecase, please r
 
 ### Known accessibility issues (GitHub staff only)
 
-{' '}
 <AccessibilityLink label="Banner" />

figmaImageNodeUrls.json

@@ -1,4 +1,5 @@
 [
   "https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=26998-2424&t=eruKCwLaYv3FX2Vu-4",
-  "https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=37174-89080&t=FOTWl3TFLux5dTgL-4"
+  "https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=37174-89080&t=FOTWl3TFLux5dTgL-4",
+  "https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=37174-89086&t=93vQIXFfs0sZZR3r-4"
 ]

src/components/figma-image.tsx

@@ -1,12 +1,21 @@
 import React from 'react';
 import {parseFigmaNodeUrl} from '@primer/figma-images/src/utils';
-import { Link } from '@primer/react';
+import { Link, StyledOcticon } from '@primer/react';
+import {PencilIcon} from '@primer/octicons-react'
 
 type FigmaImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
   src: string
   caption?: string
 }
 
+const cssStyles = {
+  width: "100%",
+  margin: "0",
+  "& img": {
+    width: '100%'
+  }
+}
+
 const FigmaImageDir = '/images/figma';
 
 export const FigmaImage: React.FC<FigmaImageProps> = ({src, caption, ...props}) => {
@@ -16,8 +25,11 @@ 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}><StyledOcticon icon={PencilIcon} sx={{mr: 2}} size="small"/>Edit in Figma</Link>
+    </figcaption>
   </figure>)
 }