@redneckz/wildless-cms-uni-blocks 0.6.21 → 0.6.23

package/src/components/PromoTile/PromoTile.example.json

@@ -1,14 +1,16 @@
 {
-  "title": "Акции и спецпредложения",
-  "date": "2022-04-16",
-  "description": "Пенсионный кредит по специальной процентной ставке",
-  "headlineVersion": "M",
-  "buttons": [
-    {
-      "text": "Все акции",
-      "href": "/credits",
-      "version": "secondary"
-    }
-  ],
-  "version": "secondary"
+  "content": {
+    "title": "Акции и спецпредложения",
+    "date": "2022-04-16",
+    "description": "Пенсионный кредит по специальной процентной ставке",
+    "headlineVersion": "M",
+    "buttons": [
+      {
+        "text": "Все акции",
+        "href": "/credits",
+        "version": "secondary"
+      }
+    ],
+    "version": "secondary"
+  }
 }

package/src/components/Recommendation/Recommendation.example.json

@@ -1,54 +1,56 @@
 {
-  "title": "Блок рекомендаций",
-  "recommendations": [
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 180,
-          "height": 180
-        }
+  "content": {
+    "title": "Блок рекомендаций",
+    "recommendations": [
+      {
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 180,
+            "height": 180
+          }
+        },
+        "title": "Заголовок 1",
+        "description": "Описание 1",
+        "socialMedia": [
+          { "href": "https://t.me" },
+          { "href": "https://vk.com" },
+          { "href": "https://ok.ru" }
+        ]
       },
-      "title": "Заголовок 1",
-      "description": "Описание 1",
-      "socialMedia": [
-        { "href": "https://t.me" },
-        { "href": "https://vk.com" },
-        { "href": "https://ok.ru" }
-      ]
-    },
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 180,
-          "height": 180
-        }
+      {
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 180,
+            "height": 180
+          }
+        },
+        "title": "Заголовок 2",
+        "description": "Описание 2",
+        "socialMedia": [
+          { "href": "https://t.me" },
+          { "href": "https://vk.com" },
+          { "href": "https://ok.ru" }
+        ]
       },
-      "title": "Заголовок 2",
-      "description": "Описание 2",
-      "socialMedia": [
-        { "href": "https://t.me" },
-        { "href": "https://vk.com" },
-        { "href": "https://ok.ru" }
-      ]
-    },
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 180,
-          "height": 180
-        }
-      },
-      "title": "Заголовок 3",
-      "description": "Описание 3",
-      "socialMedia": [
-        { "href": "https://t.me" },
-        { "href": "https://vk.com" },
-        { "href": "https://ok.ru" }
-      ]
-    }
-  ],
-  "version": "primary"
+      {
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 180,
+            "height": 180
+          }
+        },
+        "title": "Заголовок 3",
+        "description": "Описание 3",
+        "socialMedia": [
+          { "href": "https://t.me" },
+          { "href": "https://vk.com" },
+          { "href": "https://ok.ru" }
+        ]
+      }
+    ],
+    "version": "primary"
+  }
 }

package/src/components/StepsBlock/StepsBlock.example.json

@@ -1,62 +1,64 @@
 {
-  "version": "primary",
-  "title": "Шаги",
-  "description": "Описание",
-  "showLines": true,
-  "steps": [
-    {
-      "label": "Шаг №1",
-      "description": "Описание шага №1",
-      "icon": {
-        "icon": "NewDocIcon",
-        "size": {
-          "width": 48,
-          "height": 48
+  "content": {
+    "version": "primary",
+    "title": "Шаги",
+    "description": "Описание",
+    "showLines": true,
+    "steps": [
+      {
+        "label": "Шаг №1",
+        "description": "Описание шага №1",
+        "icon": {
+          "icon": "NewDocIcon",
+          "size": {
+            "width": 48,
+            "height": 48
+          },
+          "format": "webp"
         },
-        "format": "webp"
+        "button": {
+          "text": "Кнопка",
+          "target": "_blank",
+          "version": "primary"
+        }
       },
-      "button": {
-        "text": "Кнопка",
-        "target": "_blank",
-        "version": "primary"
-      }
-    },
-    {
-      "label": "Шаг №2",
-      "icon": {
-        "icon": "PassSendIcon",
-        "size": {
-          "width": 48,
-          "height": 48
+      {
+        "label": "Шаг №2",
+        "icon": {
+          "icon": "PassSendIcon",
+          "size": {
+            "width": 48,
+            "height": 48
+          },
+          "format": "webp"
         },
-        "format": "webp"
+        "button": {
+          "text": "Кнопка",
+          "target": "_blank",
+          "version": "primary"
+        }
       },
-      "button": {
-        "text": "Кнопка",
-        "target": "_blank",
-        "version": "primary"
-      }
-    },
-    {
-      "description": "Шаг №3 без заголовка",
-      "icon": {
-        "icon": "ActualBalanceIcon",
-        "size": {
-          "width": 48,
-          "height": 48
+      {
+        "description": "Шаг №3 без заголовка",
+        "icon": {
+          "icon": "ActualBalanceIcon",
+          "size": {
+            "width": 48,
+            "height": 48
+          },
+          "format": "webp"
         },
-        "format": "webp"
-      },
-      "button": {
-        "text": "Кнопка",
-        "target": "_blank",
-        "version": "primary"
+        "button": {
+          "text": "Кнопка",
+          "target": "_blank",
+          "version": "primary"
+        }
       }
+    ],
+    "button": {
+      "text": "Кнопка",
+      "target": "_blank",
+      "version": "primary"
     }
-  ],
-  "button": {
-    "text": "Кнопка",
-    "target": "_blank",
-    "version": "primary"
   }
 }

package/src/components/Tabs/Tabs.example.json

@@ -1,20 +1,22 @@
 {
-  "showCounter": true,
-  "tabs": [
-    {
-      "type": "group",
-      "ref": "tab1",
-      "title": "Вкладка 1"
-    },
-    {
-      "type": "group",
-      "ref": "tab2",
-      "title": "Вкладка 2"
-    },
-    {
-      "type": "group",
-      "ref": "tab3",
-      "title": "Вкладка 3"
-    }
-  ]
+  "content": {
+    "showCounter": true,
+    "tabs": [
+      {
+        "type": "group",
+        "ref": "tab1",
+        "title": "Вкладка 1"
+      },
+      {
+        "type": "group",
+        "ref": "tab2",
+        "title": "Вкладка 2"
+      },
+      {
+        "type": "group",
+        "ref": "tab3",
+        "title": "Вкладка 3"
+      }
+    ]
+  }
 }

package/src/components/Tabs/renderLinkTab.tsx

@@ -27,6 +27,7 @@ export const renderLinkTab = ({
 
   return (
     <a
+      role="tab"
       key={String(i)}
       className={`${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`}
       target={target}

package/src/components/TariffsTable/TariffsTable.example.json

@@ -1,94 +1,96 @@
 {
-  "title": "Заголовок",
-  "description": "Описание",
-  "orientation": "vertical",
-  "rowHeaders": [
-    {
-      "title": "Параметр 1",
-      "icon": {
-        "icon": "MoneyIcon"
+  "content": {
+    "title": "Заголовок",
+    "description": "Описание",
+    "orientation": "vertical",
+    "rowHeaders": [
+      {
+        "title": "Параметр 1",
+        "icon": {
+          "icon": "MoneyIcon"
+        }
+      },
+      {
+        "title": "Параметр 2",
+        "icon": {
+          "icon": "DollarIcon"
+        }
+      },
+      {
+        "title": "Параметр 3"
+      },
+      {
+        "title": "Параметр 4"
       }
-    },
-    {
-      "title": "Параметр 2",
-      "icon": {
-        "icon": "DollarIcon"
-      }
-    },
-    {
-      "title": "Параметр 3"
-    },
-    {
-      "title": "Параметр 4"
-    }
-  ],
-  "tariffsColumns": [
-    {
-      "data": [
-        [
-          {
-            "tableCellType": "LabelDescription",
-            "label": "Ячейка 1-1",
-            "description": "Описание для ячейки 2-1"
-          },
-          {
-            "tableCellType": "List",
-            "isDotted": true,
-            "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
-          },
-          {
-            "label": "Ячейка 1-2",
-            "tableCellType": "LabelDescription",
-            "description": "Описание"
-          },
-          {
-            "tableCellType": "List",
-            "isDotted": false,
-            "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
-          }
-        ],
-        [
-          {
-            "tableCellType": "LabelDescription",
-            "label": "Ячейка 2-1"
-          },
-          {
-            "tableCellType": "List",
-            "isDotted": true,
-            "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
-          }
-        ],
-        [
-          {
-            "label": "Ячейка 3-1",
-            "tableCellType": "LabelDescription"
-          },
-          {
-            "tableCellType": "Button",
-            "buttons": [
-              {
-                "icon": {
-                  "icon": "AppleIcon"
-                },
-                "rounded": true,
-                "version": "secondary",
-                "href": "/",
-                "target": "_blank"
-              },
-              {
-                "icon": {
-                  "icon": "PlayMarketIcon"
+    ],
+    "tariffsColumns": [
+      {
+        "data": [
+          [
+            {
+              "tableCellType": "LabelDescription",
+              "label": "Ячейка 1-1",
+              "description": "Описание для ячейки 2-1"
+            },
+            {
+              "tableCellType": "List",
+              "isDotted": true,
+              "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+            },
+            {
+              "label": "Ячейка 1-2",
+              "tableCellType": "LabelDescription",
+              "description": "Описание"
+            },
+            {
+              "tableCellType": "List",
+              "isDotted": false,
+              "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+            }
+          ],
+          [
+            {
+              "tableCellType": "LabelDescription",
+              "label": "Ячейка 2-1"
+            },
+            {
+              "tableCellType": "List",
+              "isDotted": true,
+              "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+            }
+          ],
+          [
+            {
+              "label": "Ячейка 3-1",
+              "tableCellType": "LabelDescription"
+            },
+            {
+              "tableCellType": "Button",
+              "buttons": [
+                {
+                  "icon": {
+                    "icon": "AppleIcon"
+                  },
+                  "rounded": true,
+                  "version": "secondary",
+                  "href": "/",
+                  "target": "_blank"
                 },
-                "rounded": true,
-                "version": "secondary",
-                "href": "/",
-                "target": "_blank"
-              }
-            ]
-          }
+                {
+                  "icon": {
+                    "icon": "PlayMarketIcon"
+                  },
+                  "rounded": true,
+                  "version": "secondary",
+                  "href": "/",
+                  "target": "_blank"
+                }
+              ]
+            }
+          ]
         ]
-      ]
-    }
-  ],
-  "hiddenRowsNum": 2
+      }
+    ],
+    "hiddenRowsNum": 2
+  }
 }

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -81,7 +81,7 @@ export type LabelDescriptionCellDef = LabelDescriptionCell & {
 /**
  * @title Список
  */
-export type ListBlockDef = Omit<ListProps, 'listItemSize' | 'version'> & {
+export type ListBlockDef = ListProps & {
   /** @default List */
   tableCellType: 'List';
 };

package/src/components/TextBlock/TextBlock.example.json

@@ -1,14 +1,16 @@
 {
-  "title": "Текстовый блок",
-  "description": "Описание",
-  "blockVersion": "primary",
-  "iconVersion": "small",
-  "image": {
-    "format": "webp",
-    "size": {
-      "width": 43,
-      "height": 43
-    }
-  },
-  "isDotted": true
+  "content": {
+    "title": "Текстовый блок",
+    "description": "Описание",
+    "blockVersion": "primary",
+    "iconVersion": "small",
+    "image": {
+      "format": "webp",
+      "size": {
+        "width": 43,
+        "height": 43
+      }
+    },
+    "isDotted": true
+  }
 }

package/src/components/Tile/Tile.example.json

@@ -1,21 +1,23 @@
 {
-  "title": "Плитка",
-  "headingType": "h3",
-  "description": "Описание",
-  "image": {
-    "format": "webp",
-    "size": {
-      "width": 445
-    }
-  },
-  "isDotted": true,
-  "listItemSize": "M",
-  "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
-  "buttons": [
-    {
-      "text": "Кнопка",
-      "version": "primary"
-    }
-  ],
-  "version": "primary"
+  "content": {
+    "title": "Плитка",
+    "headingType": "h3",
+    "description": "Описание",
+    "image": {
+      "format": "webp",
+      "size": {
+        "width": 445
+      }
+    },
+    "isDotted": true,
+    "listItemSize": "M",
+    "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
+    "buttons": [
+      {
+        "text": "Кнопка",
+        "version": "primary"
+      }
+    ],
+    "version": "primary"
+  }
 }

package/src/components/Tile/Tile.fixture.tsx

@@ -59,6 +59,8 @@ export const TILE_PREMIUM: TileContent = {
   image: image3,
 };
 
+const tags = ['Tag #1', 'Tag #2', 'Tag #3'];
+
 export default {
   credit: (
     <div className="container grid grid-cols-12">
@@ -140,4 +142,9 @@ export default {
       />
     </div>
   ),
+  tags: (
+    <div className="container grid grid-cols-12">
+      <Tile context={context} className="col-span-8" {...TILE} tags={tags} />
+    </div>
+  ),
 };

package/src/components/Tile/Tile.tsx

@@ -8,6 +8,7 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import type { ListProps } from '../../ui-kit/List/ListProps';
+import { Tags } from '../../ui-kit/Tags/Tags';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
@@ -31,6 +32,7 @@ export const Tile = JSX<TileProps>((props) => {
     listItemSize = 'M',
     className = '',
     version = 'primary',
+    tags,
     ...rest
   } = props;
   const headingClassName = version === 'primary' ? 'text-primary-text' : '';
@@ -71,6 +73,7 @@ export const Tile = JSX<TileProps>((props) => {
         ) : null}
         {children}
         {renderList({ version, isDotted, listItemSize }, items)}
+        {tags?.length ? <Tags tags={tags} className="mt-5" /> : null}
       </BaseTile>
     </BlockWrapper>
   );

package/src/components/Tile/TileContent.ts

@@ -5,6 +5,7 @@ import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { ListItemSize } from '../../ui-kit/List/ListProps';
+import type { TagsContent } from '../../ui-kit/Tags/TagsContent';
 
 /**
  * @title Плитка
@@ -12,7 +13,8 @@ import type { ListItemSize } from '../../ui-kit/List/ListProps';
 export type TileContent = HeadingCommonProps &
   DescriptionProps &
   ListContent &
-  ButtonContent & {
+  ButtonContent &
+  TagsContent & {
     /**
      * @default {
      *   "format": "webp",

package/src/icons/DocumentText2Icon.svg

@@ -0,0 +1,8 @@
+<svg title="Документы-2" isInverse="true" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 13H13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 13H9.45" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 17H11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 9C2 4 4 2 9 2H14" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22 10V15C22 20 20 22 15 22H9C4 22 2 20 2 15V12.98" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 10C15 10 14 9 14 6V2L22 10" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>