feat: add content-list

package.json

@@ -80,7 +80,7 @@
     "test:watch": "jest --watchAll"
   },
   "dependencies": {
-    "@gravity-ui/dynamic-forms": "^1.9.2",
+    "@gravity-ui/dynamic-forms": "^1.11.0",
     "@gravity-ui/i18n": "^1.0.0",
     "ajv": "^8.12.0",
     "bem-cn-lite": "^4.0.0",

src/blocks/ContentLayout/ContentLayout.scss

@@ -63,10 +63,6 @@ $block: '.#{$ns}content-layout-block';
     @media (max-width: map-get($gridBreakpoints, 'sm')) {
         &_background {
             padding: $indentM;
-
-            picture {
-                display: none;
-            }
         }
     }
 }

src/blocks/ContentLayout/__stories__/ContentLayout.mdx

@@ -15,7 +15,7 @@ import * as ContentLayoutStories from './ContentLayout.stories.tsx';
 - `theme?: 'default' | 'dark' | 'light'` — Cube theme: default, dark, or monochrome light ('default' by default).
 - `textWidth?: 's' | 'm' | 'l'` — Number of columns occupied by content within a cube: 6, 8, and 10 out of 12 columns, respectively.
 
-`textContent:` — See the [Content](?path=/story/components-content--default&viewMode=docs) component.
+`textContent:` — See the [Content](?path=/docs/components-content--docs) component.
 
 `fileContent?: FileLink[]` — Array of objects that describe file links
 

src/blocks/ContentLayout/__stories__/ContentLayout.stories.tsx

@@ -47,6 +47,19 @@ const DefaultTemplate: StoryFn<ContentLayoutBlockModel> = (args) => (
                         buttons: data.common.buttons as ButtonProps[],
                     },
                 },
+                {
+                    ...args,
+                    textContent: {
+                        ...args.textContent,
+                        list: data.common.list.map((item) => {
+                            return {
+                                ...item,
+                                text: item?.text && yfmTransform(item.text),
+                            };
+                        }),
+                        links: data.common.links as LinkProps[],
+                    },
+                },
             ],
         }}
     />

src/blocks/ContentLayout/__stories__/data.json

@@ -48,6 +48,30 @@
         "href": "https://example.ppt",
         "text": "PPT file"
       }
+    ],
+    "list": [
+      {
+        "icon": {
+          "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg",
+          "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_dark.svg"
+        },
+        "title": "Lorem ipsum",
+        "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": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_light.svg",
+          "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_dark.svg"
+        },
+        "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": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg",
+          "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_dark.svg"
+        },
+        "title": "Lorem ipsum ipsum"
+      }
     ]
   },
   "withImageAndBackgroundColor": {

src/blocks/Media/__stories__/Media.stories.tsx

@@ -41,6 +41,16 @@ const DefaultTemplate: StoryFn<MediaBlockModel> = (args) => (
                     ...args,
                     buttons: data.common.buttons as ButtonProps[],
                 },
+                {
+                    ...args,
+                    list: data.common.list.map((item) => {
+                        return {
+                            ...item,
+                            text: item?.text && yfmTransform(item.text),
+                        };
+                    }),
+                    links: data.common.links as LinkProps[],
+                },
             ],
         }}
     />

src/blocks/Media/__stories__/data.json

@@ -22,6 +22,30 @@
         "theme": "outlined",
         "url": "#"
       }
+    ],
+    "list": [
+      {
+        "icon": {
+          "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg",
+          "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_dark.svg"
+        },
+        "title": "Lorem ipsum",
+        "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": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_light.svg",
+          "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_dark.svg"
+        },
+        "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": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg",
+          "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_dark.svg"
+        },
+        "title": "Lorem ipsum ipsum"
+      }
     ]
   },
   "imageSlider": {

src/components/ImageBase/ImageBase.tsx

@@ -12,6 +12,7 @@ export interface ImageBaseProps extends Partial<ImageObjectProps> {
 
 export const ImageBase = (props: ImageBaseProps) => {
     const {Image} = React.useContext(ImageContext);
+
     return Image ? <Image {...props} /> : <img {...props} />;
 };
 

src/components/MediaBase/MediaBaseContent.tsx

@@ -11,7 +11,16 @@ import './MediaBaseContent.scss';
 const b = block('media-base-content');
 
 const MediaContent = (props: MediaContentProps) => {
-    const {title, description, button, links, buttons = [], additionalInfo, size = 'l'} = props;
+    const {
+        title,
+        description,
+        button,
+        links,
+        buttons = [],
+        additionalInfo,
+        size = 'l',
+        list,
+    } = props;
     const allButtons = button ? [{...button, size: 'xl' as ButtonSize}, ...buttons] : buttons;
     return (
         <div className={b()}>
@@ -21,6 +30,7 @@ const MediaContent = (props: MediaContentProps) => {
                 links={links}
                 theme="default"
                 buttons={allButtons}
+                list={list}
                 additionalInfo={additionalInfo}
                 size={size}
                 colSizes={{all: 12, md: 12}}

src/models/constructor-items/blocks.ts

@@ -210,14 +210,12 @@ export interface MediaBaseBlockProps extends Animatable, MediaContentProps {
     disableShadow?: boolean;
 }
 
-export interface MediaContentProps {
+export interface MediaContentProps
+    extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'title' | 'theme' | 'centered'> {
     title: string;
     description?: string;
-    additionalInfo?: string;
+    /** @deprecated  Use array of buttons from ContentBlockProps instead**/
     button?: ButtonProps;
-    links?: LinkProps[];
-    buttons?: ButtonProps[];
-    size?: ContentSize;
 }
 
 export interface MediaBlockProps extends MediaBaseBlockProps {
@@ -331,6 +329,12 @@ export interface ContentLayoutBlockProps extends ContentLayoutBlockParams {
     fileContent?: FileLinkProps[];
 }
 
+export interface ContentItemProps {
+    title?: string;
+    text?: string;
+    icon: ThemedImage;
+}
+
 export interface ContentBlockProps {
     title?: TitleItemBaseProps | string;
     text?: string;
@@ -341,6 +345,7 @@ export interface ContentBlockProps {
     colSizes?: GridColumnSizesType;
     centered?: boolean;
     theme?: ContentTheme;
+    list?: ContentItemProps[];
 }
 
 export enum PCShareSocialNetwork {

src/sub-blocks/Content/Content.tsx

@@ -6,6 +6,8 @@ import {Col} from '../../grid';
 import {ClassNameProps, ContentBlockProps, ContentSize, TitleItemProps} from '../../models';
 import {block} from '../../utils';
 
+import ContentList from './ContentList/ContentList';
+
 import './Content.scss';
 
 const b = block('content');
@@ -52,6 +54,7 @@ const Content = (props: ContentBlockProps & ClassNameProps) => {
         centered,
         theme,
         className,
+        list,
     } = props;
 
     const titleProps =
@@ -72,6 +75,7 @@ const Content = (props: ContentBlockProps & ClassNameProps) => {
                     />
                 </div>
             )}
+            {list?.length ? <ContentList list={list} size={size} /> : null}
             {additionalInfo && (
                 <div className={b('notice')}>
                     <YFMWrapper

src/sub-blocks/Content/ContentList/ContentList.scss

@@ -0,0 +1,70 @@
+@import '../../../../styles/variables.scss';
+@import '../../../../styles/mixins.scss';
+
+$block: '.#{$ns}content-list';
+$iconSizeL: 22px;
+$iconSizeS: 20px;
+$marginIconSizeS: 2px;
+$marginIconSizeL: 1px;
+
+#{$block} {
+    &_size_l {
+        margin-top: $indentSM;
+
+        #{$block}__title {
+            @include text-size(header-1);
+
+            margin: 0 0 $indentXXXS;
+        }
+
+        #{$block}__icon {
+            width: $iconSizeL;
+            height: $iconSizeL;
+            margin-top: $marginIconSizeL;
+            margin-bottom: $marginIconSizeL;
+            margin-right: $indentXXS;
+        }
+
+        #{$block}__item {
+            &:not(:last-child) {
+                margin-bottom: $indentXS;
+            }
+        }
+    }
+
+    &_size_s {
+        margin-top: $indentXS;
+
+        #{$block}__title {
+            @include text-size(subheader-3);
+
+            margin: 0 0 calc(#{$indentXXXS} / 2);
+        }
+
+        #{$block}__icon {
+            width: $iconSizeS;
+            height: $iconSizeS;
+            margin-top: $marginIconSizeS;
+            margin-bottom: $marginIconSizeS;
+            margin-right: $indentXXXS;
+        }
+
+        #{$block}__text {
+            @include text-size(body-1);
+        }
+
+        #{$block}__item {
+            &:not(:last-child) {
+                margin-bottom: $indentXXS;
+            }
+        }
+    }
+
+    &__icon {
+        display: block;
+    }
+
+    &__item {
+        display: flex;
+    }
+}

src/sub-blocks/Content/ContentList/ContentList.tsx

@@ -0,0 +1,51 @@
+import React, {useContext} from 'react';
+
+import {v4 as uuidv4} from 'uuid';
+
+import {YFMWrapper} from '../../../components';
+import Image from '../../../components/Image/Image';
+import {getMediaImage} from '../../../components/Media/Image/utils';
+import {ThemeValueContext} from '../../../context/theme/ThemeValueContext';
+import {ContentItemProps, ContentSize} from '../../../models';
+import {block, getThemedValue} from '../../../utils';
+
+import './ContentList.scss';
+
+const b = block('content-list');
+
+interface ContentListProps {
+    list: ContentItemProps[];
+    size: ContentSize;
+}
+
+const ContentList = ({list, size}: ContentListProps) => {
+    const {themeValue: theme} = useContext(ThemeValueContext);
+
+    return (
+        <div className={b({size})}>
+            {list?.map((item) => {
+                const {icon, title, text} = item;
+                const iconThemed = getThemedValue(icon, theme);
+                const iconData = getMediaImage(iconThemed);
+
+                return (
+                    <div className={b('item')} key={uuidv4()}>
+                        <Image {...iconData} className={b('icon')} />
+                        <div>
+                            {title && <h4 className={b('title')}>{title}</h4>}
+                            {text && (
+                                <YFMWrapper
+                                    className={b('text')}
+                                    content={text}
+                                    modifiers={{constructor: true}}
+                                />
+                            )}
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+export default ContentList;