feat: use gravity icons

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "6.9.0",
+  "version": "7.4.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "type": "commonjs",

src/components/ContentList/ContentList.tsx

@@ -11,6 +11,7 @@ import YFMWrapper from '../YFMWrapper/YFMWrapper';
 import ItemIcon from './ContentListItemIcon';
 
 import './ContentList.scss';
+import Icon from '../Icon/Icon';
 
 const b = block('content-list');
 
@@ -30,10 +31,13 @@ const ContentList = ({list, size = 'l', qa, theme}: ContentListProps & QAProps)
     return (
         <div className={b({size, theme})} data-qa={qa}>
             {list?.map((item) => {
-                const {icon, title, text} = item;
+                const {icon, title, text, gravityIcon} = item;
                 return (
                     <div className={b('item', {'without-title': !title})} key={uuidv4()}>
-                        <ItemIcon icon={icon} className={b('icon')} qa={qaAttributes.image} />
+                        {icon && (
+                            <ItemIcon icon={icon} className={b('icon')} qa={qaAttributes.image} />
+                        )}
+                        {gravityIcon && <Icon className={b('icon')} icon={gravityIcon} />}
                         <div>
                             {title &&
                                 React.createElement(

src/components/Icon/Icon.scss

@@ -0,0 +1,22 @@
+@import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';
+
+$block: '.#{$ns}icon';
+
+#{$block} {
+    &_color {
+        &_brand {
+            /* stylelint-disable-next-line declaration-no-important */
+            color: var(--g-color-base-brand) !important;
+
+            & * {
+                /* stylelint-disable-next-line declaration-no-important */
+                color: var(--g-color-base-brand) !important;
+            }
+        }
+
+        &_text-color {
+            // as in nearest text
+        }
+    }
+}

src/components/Icon/Icon.tsx

@@ -0,0 +1,35 @@
+import {ThemeSupporting, block, getThemedValue} from '../../utils';
+import * as icons from '@gravity-ui/icons';
+import {Icon as UiKitIcon} from '@gravity-ui/uikit';
+import {useTheme} from '../../context/theme';
+import './Icon.scss';
+import {GravityIconProps} from '../../models';
+
+const b = block('icon');
+
+type Props = {
+    icon: ThemeSupporting<GravityIconProps>;
+    className?: string;
+};
+
+const Icon = ({icon, className}: Props) => {
+    const theme = useTheme();
+
+    if (!icon) {
+        return null;
+    }
+
+    const themedIcon = getThemedValue(icon, theme);
+    const data = (
+        typeof themedIcon === 'string' ? themedIcon : themedIcon.name
+    ) as keyof typeof icons;
+    const color = typeof themedIcon === 'string' ? 'brand' : themedIcon.color;
+
+    return (
+        <div className={b({color}, className)}>
+            <UiKitIcon data={icons[data]} />
+        </div>
+    );
+};
+
+export default Icon;

src/components/IconWrapper/IconWrapper.tsx

@@ -2,21 +2,22 @@ import * as React from 'react';
 
 import type {ClassNameProps, IconWrapperProps} from '../../models';
 import {block} from '../../utils';
-import Image from '../Image/Image';
-import {getMediaImage} from '../Media/Image/utils';
 
+import Icon from '../Icon/Icon';
 import './IconWrapper.scss';
+import {getMediaImage} from '../Media/Image/utils';
+import Image from '../Image/Image';
 
 const b = block('icon-wrapper');
 
 const IconWrapper = (props: React.PropsWithChildren<IconWrapperProps> & ClassNameProps) => {
-    const {icon, children, className} = props;
-    if (!icon) {
+    const {icon, children, className, gravityIcon} = props;
+    if (!icon && !gravityIcon) {
         return <React.Fragment>{children}</React.Fragment>;
     }
 
-    const iconProps = getMediaImage(icon.value);
     const iconPosition = icon?.position;
+    const iconProps = icon ? getMediaImage(icon.value) : undefined;
 
     return (
         <div className={b({['icon-position']: iconPosition}, className)}>
@@ -27,6 +28,12 @@ const IconWrapper = (props: React.PropsWithChildren<IconWrapperProps> & ClassNam
                     className={b('icon', {['icon-position']: iconPosition})}
                 />
             )}
+            {gravityIcon?.value && (
+                <Icon
+                    icon={gravityIcon?.value}
+                    className={b('icon', {['icon-position']: iconPosition})}
+                />
+            )}
             <div className={b('content', {['icon-position']: iconPosition})}>{children}</div>
         </div>
     );

src/models/constructor-items/blocks.ts

@@ -16,6 +16,7 @@ import {
     ContentTextSize,
     ContentTheme,
     FileLinkProps,
+    GravityIconProps,
     HeaderBreadCrumbsProps,
     HeaderImageSize,
     HeaderOffset,
@@ -405,7 +406,8 @@ export type SVGIcon = React.FC<React.SVGProps<SVGSVGElement>>;
 export interface ContentItemProps {
     title?: string;
     text?: string;
-    icon: ThemeSupporting<ImageProps | SVGIcon>;
+    icon?: ThemeSupporting<ImageProps | SVGIcon>;
+    gravityIcon?: ThemeSupporting<GravityIconProps>;
 }
 
 export interface ContentListProps {

src/models/constructor-items/common.ts

@@ -4,6 +4,7 @@ import {ButtonView, ButtonProps as UikitButtonProps} from '@gravity-ui/uikit';
 
 import {ThemeSupporting} from '../../utils';
 import {AnalyticsEventsBase, AnalyticsEventsProp, ClassNameProps, QAProps} from '../common';
+import * as icons from '@gravity-ui/icons';
 
 // enums
 export enum AuthorType {
@@ -151,6 +152,7 @@ export interface ImageDeviceProps extends ImageInfoProps {
 }
 
 export type ImageProps = string | ImageObjectProps | ImageDeviceProps;
+export type GravityIconProps = string | {name: keyof typeof icons; color: 'brand' | 'text-color'};
 export type ThemedImage = ThemeSupporting<ImageProps>;
 
 export interface BackgroundImageProps

src/models/constructor-items/sub-blocks.ts

@@ -1,4 +1,4 @@
-import {ClassNameProps, QuoteType} from '../../models';
+import {ClassNameProps, GravityIconProps, QuoteType} from '../../models';
 import {ThemeSupporting} from '../../utils';
 import {
     HubspotEventData,
@@ -60,8 +60,14 @@ export interface PositionedIcon {
     position?: IconPosition;
 }
 
+export interface PositionedGravityIcon {
+    value: GravityIconProps;
+    position?: IconPosition;
+}
+
 export interface IconWrapperProps {
     icon?: PositionedIcon;
+    gravityIcon?: PositionedGravityIcon;
 }
 
 export enum ImageCardDirection {
@@ -156,6 +162,7 @@ export interface BasicCardProps
     url: string;
     urlTitle?: string;
     icon?: ThemeSupporting<ImageProps>;
+    gravityIcon?: ThemeSupporting<GravityIconProps>;
     target?: string;
     iconPosition?: IconPosition;
 }

src/sub-blocks/BasicCard/BasicCard.tsx

@@ -16,6 +16,7 @@ const BasicCard = (props: BasicCardProps) => {
         title,
         text,
         icon,
+        gravityIcon,
         additionalInfo,
         links,
         list,
@@ -29,6 +30,7 @@ const BasicCard = (props: BasicCardProps) => {
     const areControlsInFooter = controlPosition === 'footer';
     const theme = useTheme();
     const themedIcon = getThemedValue(icon, theme);
+    const themedGravityIcon = getThemedValue(gravityIcon, theme);
 
     return (
         <CardBase
@@ -40,6 +42,11 @@ const BasicCard = (props: BasicCardProps) => {
             <CardBase.Content>
                 <IconWrapper
                     icon={themedIcon ? {value: themedIcon, position: iconPosition} : undefined}
+                    gravityIcon={
+                        themedGravityIcon
+                            ? {value: themedGravityIcon, position: iconPosition}
+                            : undefined
+                    }
                     className={b('wrapper')}
                 >
                     <Content

src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx

@@ -142,12 +142,23 @@ const ControlPositionTemplate: StoryFn<BasicCardProps> = (args) => (
     </Grid>
 );
 
+const IconSourcesTemplate: StoryFn<Record<number, BasicCardProps>> = (args) => (
+    <div style={{display: 'flex', padding: '40px 0'}}>
+        {Object.values(args).map((arg, i) => (
+            <div key={i} style={{maxWidth: '400px', padding: '0 8px'}}>
+                <BasicCard {...arg} />
+            </div>
+        ))}
+    </div>
+);
+
 export const Default = DefaultTemplate.bind({});
 export const WithIcon = WithIconTemplate.bind({});
 export const WithBorder = WithBorderTemplate.bind({});
 export const WithUrl = WithUrlTemplate.bind({});
 export const WithContentList = WithContentListTemplate.bind({});
 export const ControlPosition = ControlPositionTemplate.bind({});
+export const IconSources = IconSourcesTemplate.bind([]);
 
 const DefaultArgs = {
     ...data.default.content,
@@ -184,3 +195,5 @@ ControlPosition.argTypes = {
     buttons: {table: {disable: true}},
     target: {table: {disable: true}},
 };
+
+IconSources.args = data.iconSources as BasicCardProps[];

src/sub-blocks/BasicCard/__stories__/data.json

@@ -3,7 +3,7 @@
     "title": "Card with icon on {{position}}",
     "icons": [
       {
-        "light": "/story-assets/icon_1_light.svg",
+        "light": "Rocket",
         "dark": "/story-assets/icon_1_dark.svg"
       },
       {
@@ -136,5 +136,47 @@
         ]
       }
     ]
-  }
+  },
+  "iconSources": [
+    {
+      "title": "Gravity brand",
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem.",
+      "gravityIcon": "Rocket",
+      "list": [
+        {
+          "gravityIcon": "AbbrZip",
+          "title": "Gravity icon",
+          "text": "Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        },
+        {
+          "icon": "/story-assets/icon_3_light.svg",
+          "title": "Icon from s3",
+          "text": "Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        }
+      ]
+    },
+    {
+      "title": "Gravity text-color",
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem.",
+      "gravityIcon": {
+        "name": "Rocket",
+        "color": "text-color"
+      },
+      "list": [
+        {
+          "gravityIcon": {
+            "name": "AbbrZip",
+            "color": "text-color"
+          },
+          "title": "Gravity icon",
+          "text": "Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        },
+        {
+          "icon": "/story-assets/icon_3_light.svg",
+          "title": "Icon from s3",
+          "text": "Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        }
+      ]
+    }
+  ]
 }

src/sub-blocks/Content/__stories__/data.json

@@ -31,27 +31,24 @@
       ],
       "list": [
         {
-          "icon": {
-            "light": "/story-assets/icon_1_light.svg",
-            "dark": "/story-assets/icon_1_dark.svg"
-          },
-          "title": "Lorem ipsum",
+          "gravityIcon": "Rocket",
+          "title": "Brand gravity icon",
           "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
         },
         {
-          "icon": {
-            "light": "/story-assets/icon_3_light.svg",
-            "dark": "/story-assets/icon_3_dark.svg"
+          "gravityIcon": {
+            "name": "Rocket",
+            "color": "text-color"
           },
-          "title": "Lorem ipsum ipsum",
+          "title": "Text-color gravity icon",
           "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
         },
         {
-          "icon": {
-            "light": "/story-assets/icon_2_light.svg",
-            "dark": "/story-assets/icon_2_dark.svg"
+          "gravityIcon": {
+            "light": "Rocket",
+            "dark": "PinFill"
           },
-          "title": "Lorem ipsum",
+          "title": "Different icon in themes",
           "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
         }
       ]