feat(Stories): Add content property (#225)

gravity-ui · Oct 12, 2024 · 3b59e08 · 3b59e08
1 parent 12b54c7
commit 3b59e08
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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,15 +26,15 @@ 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',
         },
     },
     {
         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
@@ -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
@@ -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;