gravity-ui · 0viliniw0 · Jan 21, 2025
@@ -56,3 +56,5 @@ _[Common field types](?id=documentation-types&viewMode=docs)_
 ## [Tabs](?path=/story/blocks-tabs--docs&viewMode=docs)
 
 ## [Form](?path=/story/blocks-form--docs&viewMode=docs)
+
+## [MarqueeLinks](?path=/story/blocks-marqueelinks--docs&viewMode=docs)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -102,6 +102,7 @@
     "js-yaml-source-map": "^0.2.2",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.38.0",
+    "react-fast-marquee": "^1.6.5",
     "react-final-form": "^6.5.9",
     "react-monaco-editor": "^0.53.0",
     "react-player": "^2.9.0",

@@ -0,0 +1,35 @@
+@import '../../../styles/mixins';
+
+$block: '.#{$ns}marquee-links-block';
+
+#{$block} {
+    &_left {
+        text-align: left;
+    }
+
+    &_right {
+        text-align: right;
+    }
+
+    &_center {
+        text-align: center;
+    }
+
+    &__items {
+        .rfm-child img {
+            margin: 0 57px;
+        }
+        .rfm-overlay::after,
+        .rfm-overlay::before {
+            --gradient-color: var(--g-color-base-background);
+        }
+    }
+
+    &__header {
+        margin-bottom: $indentXS;
+    }
+
+    &__description {
+        margin-bottom: $indentSM;
+    }
+}
@@ -0,0 +1,56 @@
+import React, {useCallback} from 'react';
+
+import {Link, Text} from '@gravity-ui/uikit';
+import Marquee from 'react-fast-marquee';
+
+import {HTML, Image} from '../../components';
+import {MarqueeLinksBlockProps, MarqueeLinksItem} from '../../models';
+import {block} from '../../utils';
+
+import './MarqueeLinks.scss';
+
+const b = block('marquee-links-block');
+
+export const MarqueeLinksBlock = ({
+    title,
+    description,
+    textAlign = 'left',
+    speed = 10,
+    items,
+}: MarqueeLinksBlockProps) => {
+    const renderItem = useCallback((item: MarqueeLinksItem) => {
+        const imageComponent = <Image src={item.src} alt="" />;
+        if (item.url) {
+            return (
+                <Link key={item.src} href={item.url} extraProps={{tabIndex: -1}}>
+                    {imageComponent}
+                </Link>
+            );
+        }
+        return imageComponent;
+    }, []);
+
+    if (!items.length) return null;
+
+    return (
+        <div className={b({[textAlign]: true})}>
+            {title && (
+                <div className={b('header')}>
+                    <Text variant="display-2">{title}</Text>
+                </div>
+            )}
+            {description && (
+                <div className={b('description')}>
+                    <Text variant="body-2">
+                        <HTML>{description}</HTML>
+                    </Text>
+                </div>
+            )}
+            <Marquee gradient={true} autoFill={true} speed={speed} className={b('items')}>
+                {items.map(renderItem)}
+            </Marquee>
+        </div>
+    );
+};
+
+export default MarqueeLinksBlock;
@@ -0,0 +1,26 @@
+import {Meta} from '@storybook/blocks';
+
+import {StoryTemplate} from '../../../demo/StoryTemplate.mdx';
+import * as MarqueeLinksStories from './MarqueeLinks.stories.tsx';
+
+<Meta of={MarqueeLinksStories} />
+<StoryTemplate>
+## Parameters
+
+`type: 'marquee-links-block'`
+
+`title?: string`
+
+`description?: string`
+
+`textAlign?: 'left' | 'right' | 'center'`
+
+`speed?: number` — default value 10.
+
+`items:` — Items, the block displays.
+
+- `src: string` - Link image.
+
+- `url: string` - Link
+
+</StoryTemplate>
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {Meta, StoryFn} from '@storybook/react';
+
+import {PageConstructor} from '../../../containers/PageConstructor';
+import {MarqueeLinksBlockModel, MarqueeLinksBlockProps} from '../../../models';
+import MarqueeLinksBlock from '../MarqueeLinks';
+
+import data from './data.json';
+
+export default {
+    title: 'Blocks/MarqueeLinks',
+    component: MarqueeLinksBlock,
+} as Meta;
+
+const DefaultTemplate: StoryFn<MarqueeLinksBlockModel> = (args) => (
+    <PageConstructor content={{blocks: [args]}} />
+);
+
+export const Default = DefaultTemplate.bind({});
+
+Default.args = data.default.content as MarqueeLinksBlockProps;
@@ -0,0 +1,25 @@
+{
+  "default": {
+    "content": {
+      "type": "marquee-links-block",
+      "title": "Title",
+      "textAlign": "left",
+      "description": "description with a <a href='https://example.com'>link</a>",
+      "speed": 10,
+      "items": [
+        {
+          "src": "/story-assets/icons-link_1_64.svg",
+          "url": "https://example.com"
+        },
+        {
+          "src": "/story-assets/icons-link_1_64.svg",
+          "url": "https://example.com"
+        },
+        {
+          "src": "/story-assets/icons-link_1_64.svg",
+          "url": "https://example.com"
+        }
+      ]
+    }
+  }
+}
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import {test} from '../../../../playwright/core/index';
+
+import {Default} from './helpers';
+
+test.describe('MarqueeLinks', () => {
+    test('render stories <Default>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<Default />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+});
@@ -0,0 +1,5 @@
+import {composeStories} from '@storybook/react';
+
+import * as MarqueeLinksStories from '../__stories__/MarqueeLinks.stories';
+
+export const {Default} = composeStories(MarqueeLinksStories);
@@ -0,0 +1,42 @@
+import {BaseProps} from '../../schema/validators/common';
+
+export const MarqueeLink = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['src'],
+    properties: {
+        src: {
+            type: 'string',
+        },
+        url: {
+            type: 'string',
+        },
+    },
+};
+
+export const MarqueeLinks = {
+    'marquee-links-block': {
+        additionalProperties: false,
+        required: ['items'],
+        properties: {
+            ...BaseProps,
+            title: {
+                type: 'string',
+            },
+            description: {
+                type: 'string',
+            },
+            textAlign: {
+                type: 'string',
+                enum: ['left', 'right', 'center'],
+            },
+            speed: {
+                type: 'number',
+            },
+            items: {
+                type: 'array',
+                items: MarqueeLink,
+            },
+        },
+    },
+};
@@ -17,3 +17,4 @@ export {default as ContentLayoutBlock} from './ContentLayout/ContentLayout';
 export {default as ShareBlock} from './Share/Share';
 export {default as FilterBlock} from './FilterBlock/FilterBlock';
 export {default as FormBlock} from './Form/Form';
+export {default as MarqueeLinks} from './MarqueeLinks/MarqueeLinks';
@@ -13,3 +13,4 @@ export * from './Questions/schema';
 export * from './Slider/schema';
 export * from './Table/schema';
 export * from './Share/schema';
+export * from './MarqueeLinks/schema';
@@ -11,6 +11,7 @@ import {
     IconsBlock,
     InfoBlock,
     MapBlock,
+    MarqueeLinks,
     MediaBlock,
     PromoFeaturesBlock,
     QuestionsBlock,
@@ -62,6 +63,7 @@ export const blockMap = {
     [BlockType.MapBlock]: MapBlock,
     [BlockType.FilterBlock]: FilterBlock,
     [BlockType.FormBlock]: FormBlock,
+    [BlockType.MarqueeLinks]: MarqueeLinks,
     // unstable
     [BlockType.SliderNewBlock]: SliderNewBlock,
 };

@@ -61,6 +61,7 @@ export enum BlockType {
     MapBlock = 'map-block',
     FilterBlock = 'filter-block',
     FormBlock = 'form-block',
+    MarqueeLinks = 'marquee-links-block',
     // unstable
     SliderNewBlock = 'slider-new-block',
 }
@@ -280,6 +281,19 @@ export interface InfoBlockProps {
     rightContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;
 }
 
+export type MarqueeLinksItem = {
+    src: string;
+    url?: string;
+};
+
+export interface MarqueeLinksBlockProps {
+    title?: string;
+    description?: string;
+    textAlign?: 'left' | 'right' | 'center';
+    speed?: number;
+    items: MarqueeLinksItem[];
+}
+
 export interface TableProps {
     content: string[][];
     legend?: string[];
@@ -529,6 +543,10 @@ export type FormBlockModel = {
     type: BlockType.FormBlock;
 } & FormBlockProps;
 
+export type MarqueeLinksBlockModel = {
+    type: BlockType.MarqueeLinks;
+} & MarqueeLinksBlockProps;
+
 // unstable block models
 export type SliderNewBlockModel = {
     type: BlockType.SliderNewBlock;
@@ -553,7 +571,8 @@ type BlockModels =
     | ContentLayoutBlockModel
     | ShareBLockModel
     | FilterBlockModel
-    | FormBlockModel;
+    | FormBlockModel
+    | MarqueeLinksBlockModel;
 
 type UnstableBlockModels = SliderNewBlockModel;
 

@@ -14,6 +14,7 @@ import {
     IconsBlock,
     InfoBlock,
     MapBlock,
+    MarqueeLinks,
     MediaBlock,
     PromoFeaturesBlock,
     QuestionsBlock,
@@ -56,6 +57,7 @@ export const blockSchemas: Record<BlockType, object> = {
     ...FilterBlock,
     ...FormBlock,
     ...SliderNewBlock,
+    ...MarqueeLinks,
 };
 
 export const cardSchemas = {
@@ -86,6 +88,7 @@ export const constructorBlockSchemaNames = [
     'info-block',
     'table-block',
     'tabs-block',
+    'marquee-links-block',
     /** @deprecated */
     'price-detailed',
     'header-slider-block',

@@ -18,3 +18,4 @@ export * from '../../blocks/Share/schema';
 export * from '../../blocks/FilterBlock/schema';
 export * from '../../blocks/Form/schema';
 export * from '../../blocks/SliderNew/schema';
+export * from '../../blocks/MarqueeLinks/schema';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -56,3 +56,5 @@ _[Common field types](?id=documentation-types&viewMode=docs)_
		## [Tabs](?path=/story/blocks-tabs--docs&viewMode=docs)

		## [Form](?path=/story/blocks-form--docs&viewMode=docs)

		## [MarqueeLinks](?path=/story/blocks-marqueelinks--docs&viewMode=docs)