From 542ec5e1bc38a20c61668c21ccc8fa302ef7cd79 Mon Sep 17 00:00:00 2001
From: julia-rabello <77292838+julia-rabello@users.noreply.github.com>
Date: Thu, 9 Jul 2026 11:50:42 -0300
Subject: [PATCH] fix(markdown-renderer): render callout icons as inline SVG
 instead of external asset

The vtex-dev-portal-navigation DigitalOcean Space that callout icons (info,
warning, danger, success) were loaded from via CSS background-image no
longer exists (404 NoSuchBucket), so icons silently disappeared while the
colored background/border still rendered. Icons are now inline SVGs bundled
with the component, removing the external dependency entirely.
---
 src/lib/markdown-renderer/Callout.stories.tsx | 51 +++++++++++++++++++
 src/lib/markdown-renderer/components.tsx      | 42 ++++++++++++++-
 src/lib/markdown-renderer/styles.module.css   | 46 +++--------------
 3 files changed, 98 insertions(+), 41 deletions(-)
 create mode 100644 src/lib/markdown-renderer/Callout.stories.tsx

diff --git a/src/lib/markdown-renderer/Callout.stories.tsx b/src/lib/markdown-renderer/Callout.stories.tsx
new file mode 100644
index 0000000..b86c1c3
--- /dev/null
+++ b/src/lib/markdown-renderer/Callout.stories.tsx
@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ThemeProvider } from '@vtex/brand-ui'
+import { Callout } from './components'
+
+const meta = {
+  title: 'Example/MarkdownRenderer/Callout',
+  component: Callout,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta<typeof Callout>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Info: Story = {
+  args: {
+    node: {},
+    icon: 'info',
+    children: 'This is an info callout.',
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    node: {},
+    icon: 'warning',
+    children: 'This is a warning callout.',
+  },
+}
+
+export const Danger: Story = {
+  args: {
+    node: {},
+    icon: 'danger',
+    children: 'This is a danger callout.',
+  },
+}
+
+export const Success: Story = {
+  args: {
+    node: {},
+    icon: 'success',
+    children: 'This is a success callout.',
+  },
+}
diff --git a/src/lib/markdown-renderer/components.tsx b/src/lib/markdown-renderer/components.tsx
index 97b801d..b96c3e0 100644
--- a/src/lib/markdown-renderer/components.tsx
+++ b/src/lib/markdown-renderer/components.tsx
@@ -56,7 +56,46 @@ const ObservableHeading = ({
   )
 }
 
-const Callout = ({ node, icon, ...props }: Component) => {
+const calloutColors: Record<string, string> = {
+  info: '#8C929D',
+  danger: '#DC5A41',
+  warning: '#FFB100',
+  success: '#80BE80',
+}
+
+const CalloutIcon = ({ type }: { type: string }) => (
+  <svg
+    className={styles.blockquoteIcon}
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="10" cy="10" r="10" fill={calloutColors[type] ?? calloutColors.info} />
+    {type === 'success' ? (
+      <path
+        d="M5.5 10.3L8.3 13L14.5 6.8"
+        stroke="white"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    ) : type === 'info' ? (
+      <>
+        <rect x="9.1" y="5" width="1.8" height="1.8" rx="0.9" fill="white" />
+        <rect x="9.1" y="8.2" width="1.8" height="6.8" rx="0.9" fill="white" />
+      </>
+    ) : (
+      <>
+        <rect x="9.1" y="5" width="1.8" height="7" rx="0.9" fill="white" />
+        <rect x="9.1" y="13.5" width="1.8" height="1.8" rx="0.9" fill="white" />
+      </>
+    )}
+  </svg>
+)
+
+export const Callout = ({ node, icon, ...props }: Component) => {
   const blockquoteType: string = icon ? icon : 'info'
   return (
     <blockquote
@@ -72,6 +111,7 @@ const Callout = ({ node, icon, ...props }: Component) => {
           : ''
       }`}
     >
+      <CalloutIcon type={blockquoteType} />
       <div {...props} />
     </blockquote>
   )
diff --git a/src/lib/markdown-renderer/styles.module.css b/src/lib/markdown-renderer/styles.module.css
index bb5f5f3..5ff79fc 100644
--- a/src/lib/markdown-renderer/styles.module.css
+++ b/src/lib/markdown-renderer/styles.module.css
@@ -75,36 +75,22 @@ table .code {
   color: #c81e51;
 }
 
+.blockquoteIcon {
+  display: inline-block;
+  flex-shrink: 0;
+  grid-row: 1;
+}
+
 .blockquoteInfo {
   background: #f8f7fc;
   border: 1px solid #ccced8;
 }
 
-.blockquoteInfo:before {
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-  content: '';
-  background: url('https://vtex-dev-portal-navigation.fra1.digitaloceanspaces.com/info.svg')
-    no-repeat 0 0;
-  background-size: 20px 20px;
-}
-
 .blockquoteDanger {
   background: #fdefef;
   border: 1px solid #dc5a41;
 }
 
-.blockquoteDanger:before {
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-  content: '';
-  background: url('https://vtex-dev-portal-navigation.fra1.digitaloceanspaces.com/danger.svg')
-    no-repeat 0 0;
-  background-size: 20px 20px;
-}
-
 .blockquoteWarning {
   background: #fff2d4;
   border: 1px solid #ffb100;
@@ -118,31 +104,11 @@ table .code {
   background-color: unset;
 }
 
-.blockquoteWarning:before {
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-  content: '';
-  background: url('https://vtex-dev-portal-navigation.fra1.digitaloceanspaces.com/warning.svg')
-    no-repeat 0 0;
-  background-size: 20px 20px;
-}
-
 .blockquoteSuccess {
   background: #f3f8f3;
   border: 1px solid #80be80;
 }
 
-.blockquoteSuccess:before {
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-  content: '';
-  background: url('https://vtex-dev-portal-navigation.fra1.digitaloceanspaces.com/success.svg')
-    no-repeat 0 0;
-  background-size: 20px 20px;
-}
-
 .flexWrap {
   flex-wrap: wrap;
   justify-content: space-between;