From 46db9f5c669a7ae3721de6d3d60998e77c4af71d Mon Sep 17 00:00:00 2001
From: Aleksandra Pleshcheva <46083995+aeksandla@users.noreply.github.com>
Date: Wed, 20 Mar 2024 16:37:16 +0300
Subject: [PATCH] feat: support themed media in LayoutItem (#867)

* feat: support themed media in LayoutItem
---
 .../__stories__/FilterBlock.stories.tsx        |  6 ++++++
 src/blocks/FilterBlock/__stories__/data.json   | 17 +++++++++++++++++
 src/sub-blocks/LayoutItem/LayoutItem.tsx       | 18 +++++++++++++-----
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/blocks/FilterBlock/__stories__/FilterBlock.stories.tsx b/src/blocks/FilterBlock/__stories__/FilterBlock.stories.tsx
index b67c94e82..4005ffa31 100644
--- a/src/blocks/FilterBlock/__stories__/FilterBlock.stories.tsx
+++ b/src/blocks/FilterBlock/__stories__/FilterBlock.stories.tsx
@@ -60,3 +60,9 @@ WithDefaultAllTag.args = createArgs({allTag: true});
 
 export const WithCustomAllTag = DefaultTemplate.bind({});
 WithCustomAllTag.args = createArgs({allTag: 'Custom All Tag Label'});
+
+export const WithThemedMedia = DefaultTemplate.bind({});
+WithThemedMedia.args = createArgs({
+    allTag: false,
+    items: createItemList(6, data.themed.card as LayoutItemProps, data.default.filters),
+});
diff --git a/src/blocks/FilterBlock/__stories__/data.json b/src/blocks/FilterBlock/__stories__/data.json
index e440367f0..fa59ee851 100644
--- a/src/blocks/FilterBlock/__stories__/data.json
+++ b/src/blocks/FilterBlock/__stories__/data.json
@@ -29,5 +29,22 @@
         "label": "Third very long label"
       }
     ]
+  },
+  "themed": {
+    "card": {
+      "type": "layout-item",
+      "media": {
+        "light": {
+          "image": "/story-assets/img-mini_4-12_light.png"
+        },
+        "dark": {
+          "image": "/story-assets/img-mini_4-12_dark.png"
+        }
+      },
+      "content": {
+        "title": "Lorem&nbsp;ipsum",
+        "text": "Dolor sit amet"
+      }
+    }
   }
 }
diff --git a/src/sub-blocks/LayoutItem/LayoutItem.tsx b/src/sub-blocks/LayoutItem/LayoutItem.tsx
index d82d9c37e..4d6e04666 100644
--- a/src/sub-blocks/LayoutItem/LayoutItem.tsx
+++ b/src/sub-blocks/LayoutItem/LayoutItem.tsx
@@ -3,8 +3,9 @@ import React, {useMemo} from 'react';
 import {useUniqId} from '@gravity-ui/uikit';
 
 import {Buttons, FullscreenMedia, IconWrapper, Links, Media, MetaInfo} from '../../components';
+import {useTheme} from '../../context/theme';
 import {ContentBlockProps, LayoutItemProps} from '../../models';
-import {block} from '../../utils';
+import {block, getThemedValue} from '../../utils';
 import Content from '../Content/Content';
 
 import {getLayoutItemLinks, hasFullscreen, showFullscreenIcon} from './utils';
@@ -26,6 +27,7 @@ const LayoutItem = ({
 }: LayoutItemProps) => {
     const normalizedLinks = useMemo(() => getLayoutItemLinks(links), [links]);
     const areControlsInFooter = controlPosition === 'footer';
+    const theme = useTheme();
 
     const contentProps: ContentBlockProps = {
         ...content,
@@ -38,15 +40,17 @@ const LayoutItem = ({
         if (!media) {
             return null;
         }
-        return fullscreen && hasFullscreen(media) ? (
-            <FullscreenMedia showFullscreenIcon={showFullscreenIcon(media)}>
+        const themedMedia = getThemedValue(media, theme);
+
+        return fullscreen && hasFullscreen(themedMedia) ? (
+            <FullscreenMedia showFullscreenIcon={showFullscreenIcon(themedMedia)}>
                 {({
                     className: mediaClassName,
                     fullscreen: _fullscreen,
                     ...fullscreenMediaProps
                 } = {}) => (
                     <Media
-                        {...media}
+                        {...themedMedia}
                         {...fullscreenMediaProps}
                         className={b('media', {border}, mediaClassName)}
                         analyticsEvents={analyticsEvents}
@@ -54,7 +58,11 @@ const LayoutItem = ({
                 )}
             </FullscreenMedia>
         ) : (
-            <Media {...media} className={b('media', {border})} analyticsEvents={analyticsEvents} />
+            <Media
+                {...themedMedia}
+                className={b('media', {border})}
+                analyticsEvents={analyticsEvents}
+            />
         );
     };
     return (