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

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/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/index.ts

@@ -7,4 +7,4 @@ export { ContentPage } from './components/ContentPage/ContentPage';
 export { projectSettings } from './ProjectSettings';
 export { joinList } from './utils/joinList';
 export * as url from './utils/url';
-export const packageVersion = process.env.UNI_BLOCKS_VERSION;
+export const packageVersion = process?.env?.UNI_BLOCKS_VERSION;

package/src/ui-kit/BlockWrapper.tsx

@@ -21,7 +21,7 @@ const OBSERVER_OPTIONS = {
 };
 
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({ anchor, className, children, tag = 'section', labels }) => {
+  ({ anchor, className, children, tag = 'section', labels, role }) => {
     const Tag: any = tag;
 
     const [shouldRenderBlock, setShouldRenderBlock] = useState(true);
@@ -66,11 +66,14 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
         observerCallback={observerCallback}
         observerOptions={OBSERVER_OPTIONS}
         anchor={anchor}
+        role={role}
       >
         {children}
       </IntersectionObserverTag>
     ) : (
-      <Tag className={className}>{children}</Tag>
+      <Tag className={className} role={role}>
+        {children}
+      </Tag>
     );
   },
 );

package/src/ui-kit/IntersectionObserverTag.tsx

@@ -9,6 +9,7 @@ interface IntersectionObserverTagProps {
   children?: VNode;
   observerCallback: IntersectionObserverCallback;
   observerOptions?: IntersectionObserverInit;
+  role?: string;
 }
 
 export const IntersectionObserverTag = JSX<IntersectionObserverTagProps>((props) => {
@@ -19,6 +20,7 @@ export const IntersectionObserverTag = JSX<IntersectionObserverTagProps>((props)
     className = '',
     anchor = null,
     children,
+    role,
   } = props;
   const tagRef = useRef<HTMLElement | null>(null);
 
@@ -38,7 +40,7 @@ export const IntersectionObserverTag = JSX<IntersectionObserverTagProps>((props)
   const Tag = tag as any;
 
   return (
-    <Tag ref={tagRef} className={className} id={anchor}>
+    <Tag ref={tagRef} className={className} id={anchor} role={role}>
       {children}
     </Tag>
   );