UI: Replace the icon prop in the Manager API

code/lib/manager-api/package.json

@@ -49,6 +49,7 @@
     "@storybook/core-events": "workspace:*",
     "@storybook/csf": "^0.1.2",
     "@storybook/global": "^5.0.0",
+    "@storybook/icons": "^1.2.5",
     "@storybook/router": "workspace:*",
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",

code/lib/manager-api/src/modules/whatsnew.ts → code/lib/manager-api/src/modules/whatsnew.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { global } from '@storybook/global';
 import type { WhatsNewCache, WhatsNewData } from '@storybook/core-events';
 import {
@@ -7,6 +8,7 @@ import {
   TOGGLE_WHATS_NEW_NOTIFICATIONS,
 } from '@storybook/core-events';
 import type { ModuleFn } from '../lib/types';
+import { StorybookIcon } from '@storybook/icons';
 
 export type SubState = {
   whatsNewData?: WhatsNewData;
@@ -95,7 +97,7 @@ export const init: ModuleFn = ({ fullAPI, store, provider }) => {
           headline: whatsNewData.title,
           subHeadline: "Learn what's new in Storybook",
         },
-        icon: { name: 'storybook' },
+        icon: <StorybookIcon />,
         onClear({ dismissed }: any) {
           if (dismissed) {
             setWhatsNewCache({ lastDismissedPost: whatsNewData.url });

code/lib/types/src/modules/api.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import type { RenderData } from '../../../router/src/types';
 import type { Channel } from '../../../channels/src';
 import type { ThemeVars } from '../../../theming/src/types';
@@ -127,10 +127,7 @@ export interface API_Notification {
     headline: string;
     subHeadline?: string | any;
   };
-  icon?: {
-    name: string;
-    color?: string;
-  };
+  icon?: ReactNode;
   onClear?: (options: OnClearOptions) => void;
 }
 

code/ui/manager/src/components/notifications/NotificationItem.stories.tsx

@@ -2,6 +2,11 @@ import React from 'react';
 import { LocationProvider } from '@storybook/router';
 import type { Meta, StoryObj } from '@storybook/react';
 import NotificationItem from './NotificationItem';
+import {
+  AccessibilityIcon as AccessibilityIconIcon,
+  BookIcon as BookIconIcon,
+  FaceHappyIcon,
+} from '@storybook/icons';
 
 const meta = {
   component: NotificationItem,
@@ -78,10 +83,7 @@ export const LinkIconWithColor: Story = {
       content: {
         headline: 'Storybook with a smile!',
       },
-      icon: {
-        name: 'facehappy',
-        color: 'hotpink',
-      },
+      icon: <FaceHappyIcon color="hotpink" />,
       link: '/some/path',
     },
   },
@@ -97,10 +99,7 @@ export const LinkIconWithColorSubHeadline: Story = {
         headline: 'Storybook X.X is available with a smile! Download now »',
         subHeadline: 'This link also has a sub headline',
       },
-      icon: {
-        name: 'facehappy',
-        color: 'tomato',
-      },
+      icon: <FaceHappyIcon color="tomato" />,
       link: '/some/path',
     },
   },
@@ -115,9 +114,7 @@ export const BookIcon: Story = {
       content: {
         headline: 'Storybook has a book icon!',
       },
-      icon: {
-        name: 'book',
-      },
+      icon: <BookIconIcon />,
       link: '/some/path',
     },
   },
@@ -133,9 +130,7 @@ export const StrongSubHeadline: Story = {
         headline: 'Storybook has a book icon!',
         subHeadline: <strong>Strong subHeadline</strong>,
       },
-      icon: {
-        name: 'book',
-      },
+      icon: <BookIconIcon />,
       link: '/some/path',
     },
   },
@@ -155,9 +150,7 @@ export const StrongEmphasizedSubHeadline: Story = {
           </span>
         ),
       },
-      icon: {
-        name: 'book',
-      },
+      icon: <BookIconIcon />,
       link: '/some/path',
     },
   },
@@ -173,9 +166,7 @@ export const BookIconSubHeadline: Story = {
         headline: 'Storybook has a book icon!',
         subHeadline: 'Find out more!',
       },
-      icon: {
-        name: 'book',
-      },
+      icon: <BookIconIcon />,
       link: '/some/path',
     },
   },
@@ -192,9 +183,7 @@ export const BookIconLongSubHeadline: Story = {
         subHeadline:
           'Find out more! by clicking on on buttons and downloading some applications. Find out more! by clicking on buttons and downloading some applications',
       },
-      icon: {
-        name: 'book',
-      },
+      icon: <BookIconIcon />,
       link: '/some/path',
     },
   },
@@ -210,9 +199,7 @@ export const AccessibilityIcon: Story = {
         headline: 'Storybook has a accessibility icon!',
         subHeadline: 'It is here!',
       },
-      icon: {
-        name: 'accessibility',
-      },
+      icon: <AccessibilityIconIcon />,
       link: '/some/path',
     },
   },
@@ -228,10 +215,7 @@ export const AccessibilityGoldIcon: Story = {
         headline: 'Accessibility icon!',
         subHeadline: 'It is gold!',
       },
-      icon: {
-        name: 'accessibility',
-        color: 'gold',
-      },
+      icon: <AccessibilityIconIcon color="gold" />,
       link: '/some/path',
     },
   },
@@ -246,10 +230,7 @@ export const AccessibilityGoldIconLongHeadLineNoSubHeadline: Story = {
       content: {
         headline: 'Storybook notifications has a accessibility icon it can be any color!',
       },
-      icon: {
-        name: 'accessibility',
-        color: 'gold',
-      },
+      icon: <AccessibilityIconIcon color="gold" />,
       link: '/some/path',
     },
   },

code/ui/manager/src/components/notifications/NotificationItem.tsx

@@ -2,8 +2,8 @@ import type { FC, SyntheticEvent } from 'react';
 import React from 'react';
 import { type State } from '@storybook/manager-api';
 import { Link } from '@storybook/router';
-import { styled, useTheme } from '@storybook/theming';
-import { Icons, IconButton, type IconsProps } from '@storybook/components';
+import { styled } from '@storybook/theming';
+import { IconButton } from '@storybook/components';
 import { transparentize } from 'polished';
 import { CloseAltIcon } from '@storybook/icons';
 
@@ -47,10 +47,11 @@ const NotificationIconWrapper = styled.div(() => ({
   alignItems: 'center',
 }));
 
-const NotificationTextWrapper = styled.div(() => ({
+const NotificationTextWrapper = styled.div(({ theme }) => ({
   width: '100%',
   display: 'flex',
   flexDirection: 'column',
+  color: theme.base === 'dark' ? theme.color.mediumdark : theme.color.mediumlight,
 }));
 
 const Headline = styled.div<{ hasIcon: boolean }>(({ theme, hasIcon }) => ({
@@ -76,20 +77,9 @@ const ItemContent: FC<Pick<State['notifications'][0], 'icon' | 'content'>> = ({
   icon,
   content: { headline, subHeadline },
 }) => {
-  const theme = useTheme();
-  const defaultColor = theme.base === 'dark' ? theme.color.mediumdark : theme.color.mediumlight;
   return (
     <>
-      {!icon || (
-        <NotificationIconWrapper>
-          <Icons
-            icon={icon.name as IconsProps['icon']}
-            width={16}
-            height={16}
-            color={icon.color || defaultColor}
-          />
-        </NotificationIconWrapper>
-      )}
+      {!icon || <NotificationIconWrapper>{icon}</NotificationIconWrapper>}
       <NotificationTextWrapper>
         <Headline title={headline} hasIcon={!!icon}>
           {headline}

code/yarn.lock

@@ -5897,6 +5897,7 @@ __metadata:
     "@storybook/core-events": "workspace:*"
     "@storybook/csf": "npm:^0.1.2"
     "@storybook/global": "npm:^5.0.0"
+    "@storybook/icons": "npm:^1.2.5"
     "@storybook/router": "workspace:*"
     "@storybook/theming": "workspace:*"
     "@storybook/types": "workspace:*"