feat(sidebar-nav): update skills and docgen icons to BP (WEBAPP-42958) (#4399)

* feat(sidebar-nav): update skills and docgen icons to BP (WEBAPP-42958)

* feat(sidebar-nav): update skills and docgen icons to BP (WEBAPP-42958)

---------

Co-authored-by: Duncan Hsu <[email protected]>

Author: kduncanhsu

flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js

@@ -13,12 +13,15 @@ declare module '@box/blueprint-web-assets/icons/Medium' {
   declare export var ChevronUp: React$ComponentType<any>;
   declare export var RightSidebarChevronClose: React$ComponentType<any>;
   declare export var RightSidebarChevronOpen: React$ComponentType<any>;
+  declare export var MagicWand: React$ComponentType<any>;
+  declare export var DocGen: React$ComponentType<any>;
 }
 
 declare module '@box/blueprint-web-assets/icons/MediumFilled' {
   declare export var Comment: React$ComponentType<any>;
   declare export var InformationCircle: React$ComponentType<any>;
   declare export var Metadata: React$ComponentType<any>;
+  declare export var MagicWand: React$ComponentType<any>;
 }
 
 declare module '@box/blueprint-web-assets/icons/Content' {

src/elements/content-sidebar/SidebarNav.js

@@ -14,11 +14,14 @@ import {
     Comment as CommentIcon,
     InformationCircle as InformationCircleIcon,
     Metadata as MetadataIcon,
+    MagicWand as MagicWandIcon,
+    DocGen as BPDocGenIcon,
 } from '@box/blueprint-web-assets/icons/Medium';
 import {
     Comment as CommentIconFilled,
     InformationCircle as InformationCircleIconFilled,
     Metadata as MetadataIconFilled,
+    MagicWand as MagicWandIconFilled,
 } from '@box/blueprint-web-assets/icons/MediumFilled';
 import { Size6, Size5, IconIconBlue } from '@box/blueprint-web-assets/tokens/tokens';
 import { usePromptFocus } from '@box/box-ai-content-answers';
@@ -92,6 +95,28 @@ const MetadataIconWrapper = ({ isActive, isPreviewModernizationEnabled }: IconWr
     );
 };
 
+const SkillsIconWrapper = ({ isActive, isPreviewModernizationEnabled }: IconWrapperProps) => {
+    if (!isPreviewModernizationEnabled) {
+        return <IconMagicWand className="bcs-SidebarNav-icon" />;
+    }
+    return isActive ? (
+        <MagicWandIconFilled {...SIDEBAR_TAB_ICON_PROPS} color={IconIconBlue} />
+    ) : (
+        <MagicWandIcon {...SIDEBAR_TAB_ICON_PROPS} />
+    );
+};
+
+const DocGenIconWrapper = ({ isActive, isPreviewModernizationEnabled }: IconWrapperProps) => {
+    if (!isPreviewModernizationEnabled) {
+        return <DocGenIcon className="bcs-SidebarNav-icon" />;
+    }
+    return isActive ? (
+        <BPDocGenIcon {...SIDEBAR_TAB_ICON_PROPS} color={IconIconBlue} />
+    ) : (
+        <BPDocGenIcon {...SIDEBAR_TAB_ICON_PROPS} />
+    );
+};
+
 type Props = {
     additionalTabs?: Array<AdditionalSidebarTab>,
     elementId: string,
@@ -223,7 +248,7 @@ const SidebarNav = ({
                             sidebarView={SIDEBAR_VIEW_SKILLS}
                             tooltip={intl.formatMessage(messages.sidebarSkillsTitle)}
                         >
-                            <IconMagicWand className="bcs-SidebarNav-icon" />
+                            <SkillsIconWrapper isPreviewModernizationEnabled={isPreviewModernizationEnabled} />
                         </SidebarNavButton>
                     )}
                     {hasMetadata && (
@@ -250,7 +275,7 @@ const SidebarNav = ({
                             sidebarView={SIDEBAR_VIEW_DOCGEN}
                             tooltip={intl.formatMessage(messages.sidebarDocGenTooltip)}
                         >
-                            <DocGenIcon className="bcs-SidebarNav-icon" />
+                            <DocGenIconWrapper isPreviewModernizationEnabled={isPreviewModernizationEnabled} />
                         </SidebarNavButton>
                     )}
                 </SidebarNavTablist>