From 3b59e088ff420dc7b078962afd9465c0c0e8494e Mon Sep 17 00:00:00 2001
From: mytwink <marat-validov@yandex-team.ru>
Date: Sat, 12 Oct 2024 12:08:36 +0300
Subject: [PATCH] feat(Stories): Add content property (#225)

---
 src/components/Stories/README.md                           | 5 +++--
 src/components/Stories/__stories__/Stories.stories.tsx     | 6 +++---
 .../Stories/components/StoriesLayout/StoriesLayout.tsx     | 7 ++++++-
 src/components/Stories/types.ts                            | 4 ++++
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/Stories/README.md b/src/components/Stories/README.md
index 8c0c1191..045ed091 100644
--- a/src/components/Stories/README.md
+++ b/src/components/Stories/README.md
@@ -21,7 +21,8 @@ Component for displaying stories. It looks like a carousel in a modal with given
 | Field       | Type               | Required | Default | Description                      |
 | ----------- | ------------------ | -------- | ------- | -------------------------------- |
 | title       | `String`           |          |         | Title                            |
-| description | `String`           |          |         | Main text                        |
+| description | `String`           |          |         | Main text, deprecated            |
+| content     | `React.ReactNode`  |          |         | Main content                     |
 | url         | `String`           |          |         | Link to display more information |
 | media       | `StoriesItemMedia` |          |         | Media content                    |
 
@@ -41,7 +42,7 @@ Component for displaying stories. It looks like a carousel in a modal with given
   items={[
     {
       title: 'Story title',
-      description: 'Story text',
+      content: <b>Story text</b>,
       media: {
         url: 'https://storage.yandexcloud.net/uikit-storybook-assets/story-picture-2.png',
       },
diff --git a/src/components/Stories/__stories__/Stories.stories.tsx b/src/components/Stories/__stories__/Stories.stories.tsx
index bb0ca091..83025dc9 100644
--- a/src/components/Stories/__stories__/Stories.stories.tsx
+++ b/src/components/Stories/__stories__/Stories.stories.tsx
@@ -15,7 +15,7 @@ export default {
 const items: StoriesItem[] = [
     {
         title: 'New navigation',
-        description:
+        content:
             'At the top of the panel is the service navigation for each service. ' +
             'Below are common navigation elements: a component for switching between accounts ' +
             'and organizations, settings, help center, search, notifications, favorites.',
@@ -26,7 +26,7 @@ const items: StoriesItem[] = [
     },
     {
         title: 'New navigation (2)',
-        description: 'A little more about the new navigation',
+        content: 'A little more about the new navigation',
         media: {
             url: 'https://storage.yandexcloud.net/uikit-storybook-assets/sample_960x400_ocean_with_audio.mp4',
             type: 'video',
@@ -34,7 +34,7 @@ const items: StoriesItem[] = [
     },
     {
         title: 'New navigation (3)',
-        description: 'Switch to the new navigation right now',
+        content: <b>Switch to the new navigation right now</b>,
         media: {
             url: 'https://storage.yandexcloud.net/uikit-storybook-assets/story-picture-4.png',
         },
diff --git a/src/components/Stories/components/StoriesLayout/StoriesLayout.tsx b/src/components/Stories/components/StoriesLayout/StoriesLayout.tsx
index 16e290c1..f2ccd951 100644
--- a/src/components/Stories/components/StoriesLayout/StoriesLayout.tsx
+++ b/src/components/Stories/components/StoriesLayout/StoriesLayout.tsx
@@ -55,7 +55,12 @@ export const StoriesLayout = (props: StoriesLayoutProps) => {
                                     {currentStory.title && (
                                         <div className={b('text-header')}>{currentStory.title}</div>
                                     )}
-                                    {currentStory.description && (
+                                    {currentStory.content && (
+                                        <div className={b('text-content')}>
+                                            {currentStory.content}
+                                        </div>
+                                    )}
+                                    {!currentStory.content && currentStory.description && (
                                         <div className={b('text-content')}>
                                             {currentStory.description}
                                         </div>
diff --git a/src/components/Stories/types.ts b/src/components/Stories/types.ts
index 281a25d7..cca78d72 100644
--- a/src/components/Stories/types.ts
+++ b/src/components/Stories/types.ts
@@ -1,3 +1,5 @@
+import type React from 'react';
+
 export type StoriesItemMedia = {url: string} & (
     | {
           /** default 'image' */
@@ -12,7 +14,9 @@ export type StoriesItemMedia = {url: string} & (
 
 export interface StoriesItem {
     title?: string;
+    /** @deprecated use `content` property instead */
     description?: string;
+    content?: React.ReactNode;
     /** Url for link "more" */
     url?: string;
     media?: StoriesItemMedia;