feat(Icon Proposal): New Icon component for FBR CDN usage

playroom/components/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
     Select,
-    IconSettingsRegular,
+    Icon,
     Overlay,
     useTheme,
     useScreenSize,
@@ -390,7 +390,8 @@ export const PreviewTools = ({
                                             size={40}
                                             border
                                         >
-                                            <IconSettingsRegular
+                                            <Icon
+                                                name="settings-regular"
                                                 className={styles.floatingButtonIcon}
                                                 size={24}
                                                 color={skinVars.colors.neutralHigh}

src/__acceptance_tests__/__ssr_pages__/card.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {MediaCard, DataCard, Inline, Image, ButtonPrimary, ButtonLink, IconAcademicLight} from '../../..';
+import {MediaCard, DataCard, Inline, Image, ButtonPrimary, ButtonLink, IconLightningRegular} from '../../..';
 
 const CardsTest = (): JSX.Element => (
     <Inline space={16}>
@@ -21,7 +21,7 @@ const CardsTest = (): JSX.Element => (
             title="title"
             subtitle="subtitle"
             description="description"
-            asset={<IconAcademicLight />}
+            asset={<IconLightningRegular />}
             button={
                 <ButtonPrimary small href="https://google.com">
                     Action

src/__acceptance_tests__/__ssr_pages__/main-navigation-bar-large.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {
     Avatar,
     Badge,
-    IconShoppingCartRegular,
+    IconUserAccountRegular,
     MainNavigationBar,
     NavigationBarAction,
     NavigationBarActionGroup,
@@ -20,7 +20,7 @@ const NavigationBarTest = (): JSX.Element => (
             <NavigationBarActionGroup>
                 <NavigationBarAction onPress={() => {}} aria-label="shopping cart with 2 items">
                     <Badge value={2}>
-                        <IconShoppingCartRegular color="currentColor" />
+                        <IconUserAccountRegular />
                     </Badge>
                 </NavigationBarAction>
                 <NavigationBarAction onPress={() => {}} aria-label="Open profile">

src/__acceptance_tests__/__ssr_pages__/main-navigation-bar.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {
     Avatar,
     Badge,
-    IconShoppingCartRegular,
+    IconUserAccountRegular,
     MainNavigationBar,
     NavigationBarAction,
     NavigationBarActionGroup,
@@ -19,7 +19,7 @@ const NavigationBarTest = (): JSX.Element => (
             <NavigationBarActionGroup>
                 <NavigationBarAction onPress={() => {}} aria-label="shopping cart with 2 items">
                     <Badge value={2}>
-                        <IconShoppingCartRegular color="currentColor" />
+                        <IconUserAccountRegular />
                     </Badge>
                 </NavigationBarAction>
                 <NavigationBarAction onPress={() => {}} aria-label="Open profile">

src/__private_stories__/card-action-icon-button-story.tsx

@@ -7,18 +7,22 @@ import {
     skinVars,
     Circle,
     Tag,
-    IconShopRegular,
     CardActionIconButton,
     Text2,
     Stack,
     IconStarFilled,
     IconStarRegular,
+    Icon,
 } from '..';
 
+import type {IconPropsWithoutName} from '../icon';
+
 export default {
     title: 'Private/Deprecated Card Stories/Utils/CardActionIconButton',
 };
 
+const IconShopRegular = (props: IconPropsWithoutName) => <Icon {...props} name="shop-regular" />;
+
 const MyCustomCardActionComponent = () => {
     const [pressCount, setPressCount] = React.useState(0);
 

src/__private_stories__/sheet-presets-story.tsx

@@ -3,15 +3,14 @@ import {
     Box,
     ButtonPrimary,
     Circle,
-    IconCheckRegular,
-    IconCocktailRegular,
     IconLightningRegular,
     IconMobileDeviceRegular,
     IconTrashCanRegular,
     SheetRoot,
     skinVars,
     Stack,
     Text3,
+    Icon,
 } from '..';
 import RadioListSheet from '../sheet-radio-list';
 import InfoSheet from '../sheet-info';
@@ -265,8 +264,8 @@ export const Info: StoryComponent<InfoSheetArgs> = ({
                                 : {
                                       type: iconType,
                                       Icon: {
-                                          regular: IconCocktailRegular,
-                                          small: IconCheckRegular,
+                                          regular: () => <Icon name="cocktail-regular" />,
+                                          small: () => <Icon name="check-regular" />,
                                       }[iconType],
                                   },
                     }))}

src/__private_stories__/skin-components-story.tsx

@@ -11,12 +11,10 @@ import {
     Avatar,
     NavigationBreadcrumbs,
     ButtonPrimary,
-    IconPhotoCameraRegular,
     ButtonSecondary,
     ButtonDanger,
     ButtonLink,
     Callout,
-    IconBoxLight,
     DataCard,
     IconLightningRegular,
     ButtonLinkDanger,
@@ -53,14 +51,15 @@ import {
     Meter,
     Timeline,
     TimelineItem,
-    IconShopRegular,
     CoverCard,
-    IconExportRegular,
     FileUpload,
+    Icon,
 } from '..';
 import avatarImg from '../__stories__/images/avatar.jpg';
 import usingVrImg from '../__stories__/images/using-vr.jpg';
 
+import type {IconPropsWithoutName} from '../icon';
+
 export default {
     title: 'Private/Components in different skins',
     argTypes: {
@@ -86,6 +85,12 @@ const ComponentsGroup = ({children}: {children: React.ReactNode}): JSX.Element =
     );
 };
 
+const IconPhotoCameraRegular = (props: IconPropsWithoutName) => (
+    <Icon {...props} name="photo-camera-regular" />
+);
+const IconBoxLight = (props: IconPropsWithoutName) => <Icon {...props} name="box-light" />;
+const IconShopRegular = (props: IconPropsWithoutName) => <Icon {...props} name="shop-regular" />;
+
 export const Default: StoryComponent<Args> = ({variantOutside}) => {
     // Only show inverse header when the rest of the screen is default
     const brandHeader = variantOutside === 'default';
@@ -356,7 +361,7 @@ export const Default: StoryComponent<Args> = ({variantOutside}) => {
                         <FileUpload
                             name="file"
                             withDropZone
-                            asset={<IconExportRegular color="currentColor" />}
+                            asset={<Icon name="export-regular" color="currentColor" />}
                             title="Drag or upload your file"
                             description="File can be up to 50Mb"
                             renderButton={(props) => <ButtonPrimary {...props}>Choose file</ButtonPrimary>}

src/__private_stories__/success-feedback-screen-with-navbar-story.tsx

@@ -4,7 +4,7 @@ import {
     Badge,
     ButtonPrimary,
     FixedToTop,
-    IconShoppingCartRegular,
+    Icon,
     MainNavigationBar,
     NavigationBarAction,
     NavigationBarActionGroup,
@@ -54,7 +54,7 @@ export const Default: StoryComponent<Args> = ({largeContent, input}) => {
                                     aria-label="shopping cart with 2 items"
                                 >
                                     <Badge value={2}>
-                                        <IconShoppingCartRegular color="currentColor" />
+                                        <Icon name="shopping-cart-regular" color="currentColor" />
                                     </Badge>
                                 </NavigationBarAction>
                                 <NavigationBarAction onPress={() => {}} aria-label="Open profile">

src/__private_stories__/tooltip-scenarios-story.tsx

@@ -1,23 +1,16 @@
 import * as React from 'react';
-import {
-    Stack,
-    Text3,
-    Tooltip,
-    Placeholder,
-    IconShopRegular,
-    Title3,
-    Grid,
-    GridItem,
-    SnapCard,
-    Circle,
-    IconAcademicRegular,
-} from '..';
+import {Stack, Text3, Tooltip, Placeholder, Title3, Grid, GridItem, SnapCard, Circle, Icon} from '..';
 import {vars} from '../skins/skin-contract.css';
 
+import type {IconPropsWithoutName} from '../icon';
+
 export default {
     title: 'Private/Tooltip',
 };
 
+const IconShopRegular = (props: IconPropsWithoutName) => <Icon {...props} name="shop-regular" />;
+const IconAcademicRegular = (props: IconPropsWithoutName) => <Icon {...props} name="academic-regular" />;
+
 export const InsideFixedContainer: StoryComponent = () => {
     return (
         <Stack space={16}>

src/__screenshot_tests__/icons-screenshot-test.tsx

@@ -13,14 +13,44 @@ const getCases = () => {
     return cases;
 };
 
-test.each(getCases())('Icons catalog for %s (%s)', async (skin, type) => {
-    const page = await openStoryPage({
-        id: 'icons-catalog--catalog',
-        device: 'DESKTOP',
-        skin: skin as (typeof SKINS)[number],
-        args: {light: type === 'light', regular: type === 'regular', filled: type === 'filled', size: 32},
-    });
+test.each(getCases())(
+    'Icons catalog for %s (%s)',
+    async (skin, type) => {
+        const page = await openStoryPage({
+            id: 'icons-catalog--catalog',
+            device: 'DESKTOP',
+            skin: skin as (typeof SKINS)[number],
+            args: {light: type === 'light', regular: type === 'regular', filled: type === 'filled', size: 32},
+        });
 
-    const icons = await page.screenshot({fullPage: true});
-    expect(icons).toMatchImageSnapshot();
-});
+        // Mock CDN icon requests to return immediately with a simple SVG
+        await page.setRequestInterception(true);
+        page.on('request', (interceptedRequest) => {
+            if (
+                interceptedRequest.url().includes('mistica-icons') &&
+                interceptedRequest.url().endsWith('.svg')
+            ) {
+                interceptedRequest
+                    .respond({
+                        status: 200,
+                        contentType: 'image/svg+xml',
+                        body: '<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor"/></svg>',
+                    })
+                    .catch(() => {
+                        // Ignore errors if request was already handled
+                    });
+            } else {
+                interceptedRequest.continue().catch(() => {
+                    // Ignore errors if request was already handled
+                });
+            }
+        });
+
+        // Reload the page to ensure ALL icon requests go through the interceptor
+        await page.reload({waitUntil: 'networkidle2'});
+
+        const icons = await page.screenshot({fullPage: true});
+        expect(icons).toMatchImageSnapshot();
+    },
+    120000
+);

src/__stories__/accordion-story.tsx

@@ -7,8 +7,8 @@ import {
     BoxedAccordion,
     BoxedAccordionItem,
     Circle,
-    IconThumbUpFilled,
     IconMobileDeviceRegular,
+    Icon,
     Image,
     Placeholder,
     ResponsiveLayout,
@@ -88,7 +88,7 @@ const Template: StoryComponent<BoxedArgs & {type?: 'boxed'}> = ({
                     />
                     <ItemComponent
                         {...getAccordionItemContentProps()}
-                        asset={<IconThumbUpFilled size={24} />}
+                        asset={<Icon name="thumb-up-filled" size={24} />}
                         dataAttributes={{testid: 'accordion-item-2'}}
                     />
                     <ItemComponent

src/__stories__/avatar-story.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Avatar, IconBrainRegular, IconFireRegular, IconStarFilled, ResponsiveLayout, Box} from '..';
+import {Avatar, IconStarFilled, ResponsiveLayout, Box, Icon} from '..';
 import avatarImg from './images/avatar.jpg';
 
 import type {Variant} from '../theme-variant-context';
@@ -43,6 +43,9 @@ type Args = {
     border: boolean;
 };
 
+const IconFireRegular = () => <Icon name="fire-regular" />;
+const IconBrainRegular = () => <Icon name="brain-regular" />;
+
 export const Default: StoryComponent<Args> = ({
     size,
     initials,
@@ -57,7 +60,11 @@ export const Default: StoryComponent<Args> = ({
 }) => {
     // eslint-disable-next-line no-eval
     const badgeValue = badgeOptions.includes(badge) ? eval(badge) : undefined;
-    const Icon = {IconStarFilled, IconFireRegular, IconBrainRegular}[icon];
+    const Icon = {
+        IconStarFilled,
+        IconFireRegular,
+        IconBrainRegular,
+    }[icon];
 
     return (
         <ResponsiveLayout variant={variantOutside} fullWidth>

src/__stories__/badge-story.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Badge, IconBellFilled, ResponsiveLayout, Box, Touchable} from '..';
+import {Badge, ResponsiveLayout, Box, Touchable, Icon} from '..';
 
 import type {Variant} from '../theme-variant-context';
 
@@ -33,7 +33,7 @@ export const Default: StoryComponent<Args> = ({variantOutside, value}) => {
                         onPress={() => {}}
                         aria-label="Read notifications"
                     >
-                        <IconBellFilled />
+                        <Icon name="bell-filled" />
                     </Touchable>
                 </Badge>
             </Box>

src/__stories__/button-story.tsx

@@ -8,7 +8,7 @@ import {
     TextField,
     Stack,
     Text2,
-    IconPhotoCameraRegular,
+    Icon,
     ResponsiveLayout,
     ButtonLinkDanger,
 } from '..';
@@ -91,6 +91,8 @@ const ButtonBackgroundContainer = ({variant, children}: Props) => (
     </div>
 );
 
+const IconPhotoCameraRegular = () => <Icon name="photo-camera-regular" />;
+
 export const primaryButton: StoryComponent<Args> = ({
     variantOutside,
     text,

src/__stories__/callout-story.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Callout, ButtonPrimary, ButtonLink, IconBoxLight, ResponsiveLayout, Box, ButtonSecondary} from '..';
+import {Callout, ButtonPrimary, ButtonLink, ResponsiveLayout, Box, ButtonSecondary, Icon} from '..';
 
 import type {Variant} from '../theme-variant-context';
 
@@ -64,7 +64,7 @@ export const Default: StoryComponent<Args> = ({
             <Box paddingY={24}>
                 <Callout
                     variant={variant}
-                    asset={asset ? <IconBoxLight /> : undefined}
+                    asset={asset ? <Icon name="box-light" /> : undefined}
                     onClose={closable ? () => {} : undefined}
                     title={title}
                     description={description}

src/__stories__/checkbox-story.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Checkbox, Text3, Inline, IconCheckRegular, IconCloseRegular, ResponsiveLayout, Box} from '..';
+import {Checkbox, Text3, Inline, IconCloseRegular, ResponsiveLayout, Box, Icon} from '..';
 
 import type {Variant} from '../theme-variant-context';
 
@@ -72,7 +72,7 @@ export const CustomRender: StoryComponent<Args> = ({disabled, variantOutside}) =
                             <div style={{opacity: disabled ? 0.5 : undefined}}>
                                 <Inline alignItems="center" space={16}>
                                     {checked ? (
-                                        <IconCheckRegular size={18} />
+                                        <Icon name="check-regular" size={18} />
                                     ) : (
                                         <IconCloseRegular size={18} />
                                     )}