From a60e4f83ac8def35128a8276e0f5e3481fa88b34 Mon Sep 17 00:00:00 2001
From: francisco-guilherme <francisco.guilherme@hitachivantara.com>
Date: Thu, 16 Jan 2025 18:30:16 +0000
Subject: [PATCH] docs: add phosphor icons callout

---
 docs/foundation/Icons/Library.tsx | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/docs/foundation/Icons/Library.tsx b/docs/foundation/Icons/Library.tsx
index f4887aebab..6e71109426 100644
--- a/docs/foundation/Icons/Library.tsx
+++ b/docs/foundation/Icons/Library.tsx
@@ -2,10 +2,12 @@ import { ComponentType, useMemo, useState } from "react";
 import { css } from "@emotion/css";
 import {
   HvInput,
+  HvLink,
   HvOption,
   HvSelect,
   HvSimpleGrid,
   HvTypography,
+  theme,
 } from "@hitachivantara/uikit-react-core";
 import {
   IconBaseProps,
@@ -39,6 +41,15 @@ const classes = {
     maxWidth: 400,
     paddingBottom: "20px",
   }),
+  callout: css({
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: theme.colors.primary_20,
+    borderRadius: theme.radii.base,
+    padding: theme.space.sm,
+    marginBottom: theme.space.md,
+  }),
 };
 
 const Icon = ({
@@ -80,6 +91,23 @@ const Group = ({
   );
 };
 
+const Callout = () => {
+  return (
+    <div className={classes.callout}>
+      <HvTypography>
+        Pentaho projects are transitioning to{" "}
+        <HvLink route="https://phosphoricons.com/" target="_blank">
+          Phosphoricons
+        </HvLink>
+        .
+        <br />
+        Please ensure you use the correct icon set according to your project
+        guidelines.
+      </HvTypography>
+    </div>
+  );
+};
+
 const Library = () => {
   const [search, setSearch] = useState("");
   const [iconSize, setIconSize] = useState<IconSize>("S");
@@ -97,6 +125,7 @@ const Library = () => {
 
   return (
     <>
+      <Callout />
       <HvSimpleGrid spacing="sm" cols={2} className={classes.grid}>
         <HvSelect
           label="Select icon size"