From b84ed6400a08f686006f7bccf180b93d4c2dc231 Mon Sep 17 00:00:00 2001
From: Juli Ovechkina <yuberdisheva@gmail.com>
Date: Tue, 1 Aug 2023 19:24:02 +0100
Subject: [PATCH] fix: readme and conditions

---
 .../__stories__/ContentLayout.mdx             |  2 +-
 src/sub-blocks/Content/Content.tsx            |  2 +-
 .../Content/ContentList/ContentList.tsx       |  6 ++-
 .../Content/__stories__/Content.mdx           | 38 +++++++++++++++++++
 4 files changed, 44 insertions(+), 4 deletions(-)
 create mode 100644 src/sub-blocks/Content/__stories__/Content.mdx

diff --git a/src/blocks/ContentLayout/__stories__/ContentLayout.mdx b/src/blocks/ContentLayout/__stories__/ContentLayout.mdx
index 66f8075eb..c8d9e6f0a 100644
--- a/src/blocks/ContentLayout/__stories__/ContentLayout.mdx
+++ b/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
 
diff --git a/src/sub-blocks/Content/Content.tsx b/src/sub-blocks/Content/Content.tsx
index 297b7cb21..e8811254d 100644
--- a/src/sub-blocks/Content/Content.tsx
+++ b/src/sub-blocks/Content/Content.tsx
@@ -75,7 +75,7 @@ const Content = (props: ContentBlockProps & ClassNameProps) => {
                     />
                 </div>
             )}
-            {list?.length && <ContentList list={list} size={size} />}
+            {list?.length && Boolean(list.length) && <ContentList list={list} size={size} />}
             {additionalInfo && (
                 <div className={b('notice')}>
                     <YFMWrapper
diff --git a/src/sub-blocks/Content/ContentList/ContentList.tsx b/src/sub-blocks/Content/ContentList/ContentList.tsx
index d48ecccff..dff01b3fa 100644
--- a/src/sub-blocks/Content/ContentList/ContentList.tsx
+++ b/src/sub-blocks/Content/ContentList/ContentList.tsx
@@ -1,5 +1,7 @@
 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';
@@ -21,13 +23,13 @@ const ContentList = ({list, size}: ContentListProps) => {
 
     return (
         <div className={b({size})}>
-            {list?.map((item, index) => {
+            {list?.map((item) => {
                 const {icon, title, text} = item;
                 const iconThemed = getThemedValue(icon, theme);
                 const iconData = getMediaImage(iconThemed);
 
                 return (
-                    <div className={b('item')} key={index}>
+                    <div className={b('item')} key={uuidv4()}>
                         <Image {...iconData} className={b('icon')} />
                         <div>
                             {title && <h4 className={b('title')}>{title}</h4>}
diff --git a/src/sub-blocks/Content/__stories__/Content.mdx b/src/sub-blocks/Content/__stories__/Content.mdx
new file mode 100644
index 000000000..a3fae0deb
--- /dev/null
+++ b/src/sub-blocks/Content/__stories__/Content.mdx
@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/blocks';
+
+import {StoryTemplate} from '../../../demo/StoryTemplate.mdx';
+import * as ContentStories from './Content.stories.tsx';
+
+<Meta of={ContentStories} />
+<StoryTemplate>
+## Parameters
+
+[`title?: Title | string` - title](?path=/docs/documentation-types--docs#title-block-title)
+
+`text?: string` — Text (with YFM support)
+
+`additionalInfo?: string` — Gray text (with YFM support)
+
+[`links?: Link[]` — An array with link objects](?path=/docs/documentation-types--docs#link--link)
+
+[`buttons?: Button[]` — An array with button objects](?path=/docs/documentation-types--docs#button--button)
+
+`centered?: false | true` - Aligns all content to the center ('false' by default)
+
+`theme?: 'default' | 'dark' | 'light'` — Component's theme: default, dark, or monochrome light ('default' by default).
+
+- `size?: 's' | 'l'` — Component's size that defines font sizes ('l' by default)
+
+`сolSizes?: Object` — Width of buttons tabs, the value ranges from 1 to 12 columns. If 12 columns, buttons takes up the entire width of the row.
+
+- `all: number` — On all screens.
+- `sm: number` — On a screen wider than 577px.
+- `md: number` — On a screen wider than 769px.
+- `lg: number` — On a screen wider than 1081px.
+- `xl: number` — On a screen wider than 1185px.
+
+`list: Array` - An Array of items with icon
+- [`icon: string | ImageObjectProps` — Icon](?path=/docs/documentation-types--docs#imageobjectprops--image-property).
+- `title?: string` — Title.
+- `text?: string` — Text (with YFM support)
+</StoryTemplate>