@redneckz/wildless-cms-uni-blocks 0.8.24 → 0.8.25

package/mobile/src/components/Accordion/Accordion.example.json

@@ -5,7 +5,7 @@
   },
   "blocks": [
     {
-      "type": "AccordionItem",
+      "type": "RollupItem",
       "content": {
         "label": "Аккордеон 1",
         "isExpanded": true,
@@ -31,7 +31,7 @@
       ]
     },
     {
-      "type": "AccordionItem",
+      "type": "RollupItem",
       "content": {
         "label": "Аккордеон 2",
         "isExpanded": false,
@@ -41,7 +41,7 @@
       }
     },
     {
-      "type": "AccordionItem",
+      "type": "RollupItem",
       "content": {
         "label": "Аккордеон 3",
         "isExpanded": false,

package/mobile/src/components/Accordion/Accordion.tsx

@@ -5,7 +5,6 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import type { AccordionContent } from './AccordionContent';
-import { AccordionItemsList } from './AccordionItemsList';
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
@@ -20,9 +19,9 @@ export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
           </Paragraph>
         </div>
       ) : null}
-      <AccordionItemsList>{renderChildren(rest)}</AccordionItemsList>
+      <div className="list-none m-0 p-0">{renderChildren(rest)}</div>
     </BlockWrapper>
   ),
 );
 
-Accordion.childrenTypes = ['AccordionItem'];
+Accordion.childrenTypes = ['Accordion'];

package/mobile/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -41,7 +41,7 @@ const renderStep = (benefit: BenefitBlockItemProps, i: number) => {
         />
       ) : null}
       {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
-      <div className="ml-5">
+      <div className="ml-5 h-full">
         {benefit?.label ? <Heading headingType="h6">{benefit.label}</Heading> : null}
         {renderDescription(description)}
       </div>

package/mobile/src/components/Blocks.ts

@@ -1,6 +1,5 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
 import { Accordion } from './Accordion/Accordion';
-import { AccordionItem } from './AccordionItem/AccordionItem';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { Footer } from './Footer/Footer';
 import { Header } from './Header/Header';
@@ -10,13 +9,14 @@ import { LinkList } from './LinkList/LinkList';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
+import { RollupItem } from './RollupItem/RollupItem';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
+import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 
 export const Blocks: BlocksRegistry = {
   Accordion,
-  AccordionItem,
   ComparisonTable,
   Footer,
   Header,
@@ -25,8 +25,10 @@ export const Blocks: BlocksRegistry = {
   LinkList,
   MobileAppTile,
   ProductBlock,
+  RollupItem,
   StepsBlock,
   TariffsTable,
   TextBlock,
   Placeholder,
+  VerticalLayout,
 };

package/mobile/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -9,6 +9,7 @@ import type {
   BonusBenefitsBlockContent,
   ColumnsCount,
 } from './BonusBenefitsBlockContent';
+import { style } from '../../utils/style';
 
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
@@ -40,10 +41,16 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
 
 const renderBonusBenefit = ({ icon, title, description }: BonusBenefit, i: number) => {
   return (
-    <div key={String(i)} className="flex flex-col items-center text-h6">
+    <div
+      key={String(i)}
+      className={style(
+        'flex flex-col items-center text-h6',
+        !description && !title ? 'justify-center' : '',
+      )}
+    >
       {title ? <span>{title}</span> : null}
-      {icon ? <Img image={icon} height="180" width="auto" className="h-[180px] w-auto" /> : null}
-      <div>{description ? <span>{description}</span> : null}</div>
+      {icon ? <Img image={icon} height="180" width="auto" className="w-auto" /> : null}
+      {description ? <span>{description}</span> : null}
     </div>
   );
 };

package/mobile/src/components/CarouselLinks/CarouselLinks.tsx

@@ -21,7 +21,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
       >
         <div className="flex flex-col max-w-96 pr-9 text-white text-xl-light">
           <Headline
-            className="p-0"
+            isPadding={false}
             title={title}
             description={description}
             as="h1"

package/mobile/src/components/Footer/Footer.tsx

@@ -1,16 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { projectSettings } from '../../ProjectSettings';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { projectSettings } from '../../ProjectSettings';
 import type { SitemapDataProps } from '../../services/sitemap/SitemapProps';
 import { useSWRResource } from '../../services/sitemap/useSWRResource';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import { AccordionItemsList } from '../Accordion/AccordionItemsList';
-import { AccordionItem } from '../AccordionItem/AccordionItem';
 import { LinkList } from '../LinkList/LinkList';
 import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
+import { RollupItem } from '../RollupItem/RollupItem';
 import { Contacts } from './Contacts';
 import type { FooterContent, SubMenuItem } from './FooterContent';
 import type { FooterDataProps } from './FooterDataProps';
@@ -28,15 +28,15 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
     useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
 
   return (
-    <footer className={`font-sans px-4 py-[26px] bg-white ${className}`}>
+    <BlockWrapper tag="footer" className={`px-4 py-[26px] ${className}`} {...rest}>
       <Contacts className="overflow-hidden" items={contacts} hasButton />
-      <AccordionItemsList>
+      <div className="m-0 p-0">
         {sitemap.topItems?.map((item, i) => (
-          <AccordionItem key={String(i)} label={item.text}>
+          <RollupItem key={String(i)} label={item?.text}>
             <LinkList documents={item.items} />
-          </AccordionItem>
+          </RollupItem>
         ))}
-      </AccordionItemsList>
+      </div>
       <div>{sitemap?.dispositions?.map(renderSubMenuItem)}</div>
       <MobileAppTile
         title="Мобильное приложение"
@@ -47,7 +47,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
       <SocialMedia className="pb-4" media={socialMedia} />
       <HorizontalNavigation title={horizontalNavigationTitle} links={relatedEnterprises} />
       <TextInformation links={documents} />
-    </footer>
+    </BlockWrapper>
   );
 });
 

package/mobile/src/components/Header/Header.tsx

@@ -12,9 +12,8 @@ import type { SitemapDataProps } from '../../services/sitemap/SitemapProps';
 import { useSWRResource } from '../../services/sitemap/useSWRResource';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
-import { AccordionItemsList } from '../Accordion/AccordionItemsList';
-import { AccordionItem } from '../AccordionItem/AccordionItem';
 import { LinkList } from '../LinkList/LinkList';
+import { RollupItem } from '../RollupItem/RollupItem';
 import { HeaderBurger } from './HeaderBurger';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderTop } from './HeaderTop';
@@ -65,13 +64,13 @@ export const Header = JSX<HeaderProps>(
             burgerSubMenu={dispositions}
             defaultLocation={defaultLocation}
           >
-            <AccordionItemsList>
+            <div className="list-none m-0 p-0">
               {topItems?.map((item, i) => (
-                <AccordionItem key={String(i)} label={item.text}>
+                <RollupItem key={String(i)} label={item.text}>
                   <LinkList documents={item.items} />
-                </AccordionItem>
+                </RollupItem>
               ))}
-            </AccordionItemsList>
+            </div>
           </HeaderBurger>
         ) : null}
       </BlockWrapper>

package/mobile/src/components/Headline/Headline.tsx

@@ -18,14 +18,17 @@ export const Headline = JSX<HeadlineProps>(
     headlineVersion = 'XL',
     align = 'text-center',
     as,
+    isPadding = true,
     ...rest
   }) => {
     const versionStyle = headlineVersionStyles[headlineVersion];
+    const paddingStyle = isPadding ? 'p-12' : '';
 
     return (
       <BlockWrapper
         className={style(
-          'flex flex-col p-12 group-data-secondary:bg-primary-main group-data-secondary:text-white',
+          'flex flex-col group-data-secondary:bg-primary-main group-data-secondary:text-white',
+          paddingStyle,
           versionStyle.wrapper,
           className,
         )}

package/mobile/src/components/Headline/HeadlineContent.ts

@@ -13,4 +13,6 @@ export type HeadlineContent = UniBlockContent &
     align?: TextAlign;
     /** @hidden */
     as?: HeadingTagType;
+  /** @title Внутренний отступ блока */
+  isPadding?: boolean;
   };

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -1,15 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { getParentBlockContent } from '../../BlockRenderer/getParentBlockContent';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
-import type { BlockVersion } from '../../model/BlockVersion';
+import type { IconName } from '../../icons/IconName';
+import { BlockVersion } from '../../model/BlockVersion';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { style } from '../../utils/style';
+import { AccordionContent } from '../Accordion/AccordionContent';
 import type { RollupItemContent } from './RollupItemContent';
 
 export interface RollupItemProps extends RollupItemContent, UniBlockProps {}
@@ -22,40 +27,49 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
     isFoldButtonOnTop = true,
     version = 'primary',
     ...rest
-  }) => (
-    <BlockWrapper
-      className={`border-b border-solid border-main-divider w-full ${className}`}
-      tag="div"
-      {...rest}
-    >
-      <Foldable
-        isFoldButtonOnTop={isFoldButtonOnTop}
-        unfoldedByDefault={isExpanded}
-        renderFoldableSection={({ isUnfolded }) => (
-          <div className="box-border">
+  }) => {
+    const { bordered } = getParentBlockContent(rest.options, {} as AccordionContent);
+
+    return (
+      <BlockWrapper
+        className={style(
+          'border-b border-solid border-main-divider w-full',
+          bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0',
+          className,
+        )}
+        tag="div"
+        version="transparent"
+        {...rest}
+      >
+        <Foldable
+          isFoldButtonOnTop={isFoldButtonOnTop}
+          unfoldedByDefault={isExpanded}
+          renderFoldableSection={({ isUnfolded }) => (
             <FoldableSection
-              className={`grid grid-cols-12 gap-1 border-box`}
+              className="flex flex-wrap group-last:last:pb-0 gap-5 [&>*]:p-0"
               isUnfolded={isUnfolded}
             >
               {renderChildren(rest)}
             </FoldableSection>
-          </div>
-        )}
-        renderFoldButton={({ isUnfolded, onToggle }) =>
-          renderFoldButton({ version, label, isUnfolded, onToggle })
-        }
-      />
-    </BlockWrapper>
-  ),
+          )}
+          renderFoldButton={({ isUnfolded, onToggle }) =>
+            renderFoldButton({ version, label, isUnfolded, onToggle })
+          }
+        />
+      </BlockWrapper>
+    );
+  },
 );
 
 RollupItem.childrenTypes = {
-  exclude: ['RollupItem', 'Accordion', 'AccordionItem', 'OtherProducts', 'OtherProductsItem'],
+  exclude: ['RollupItem', 'Accordion', 'OtherProducts'],
 };
 
 interface FoldButtonProps extends FoldablePartProps {
   version?: BlockVersion;
   label?: string;
+  className?: string;
+  primaryIcon?: Picture;
 }
 
 const renderFoldButton = ({
@@ -63,11 +77,19 @@ const renderFoldButton = ({
   label: defaultLabel,
   isUnfolded,
   onToggle,
+  className = '',
+  primaryIcon,
 }: FoldButtonProps) => {
   const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
 
   return version === 'primary' ? (
-    renderPrimaryFoldButton({ label, icon: isUnfolded ? 'MinusIcon' : 'PlusIcon', onToggle })
+    renderPrimaryFoldButton({
+      label,
+      icon: isUnfolded ? 'MinusIcon' : 'PlusIcon',
+      onToggle,
+      className,
+      primaryIcon,
+    })
   ) : (
     <DefaultFoldButton
       label={label}
@@ -80,15 +102,42 @@ const renderFoldButton = ({
 interface PrimaryFoldButtonProps {
   label?: string;
   icon?: IconName;
+  primaryIcon?: Picture;
   onToggle?: () => void;
+  onClick?: () => void;
+  className?: string;
 }
 
-const renderPrimaryFoldButton = ({ label, icon, onToggle }: PrimaryFoldButtonProps) => (
+const renderPrimaryFoldButton = ({
+  label,
+  icon,
+  primaryIcon,
+  onToggle,
+}: PrimaryFoldButtonProps) => (
   <button
-    className="border-none bg-transparent px-9 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 cursor-pointer"
+    className={`border-none bg-transparent flex justify-between text-left w-full text-primary-text group cursor-pointer py-3.5 px-0`}
     onClick={onToggle}
   >
-    <span className="text-xl font-medium pr-2.5">{label}</span>
-    {icon ? <Img image={getIconWithVersion({ icon })} width="24" height="24" asSVG /> : null}
+    <div className="flex group-hover:text-primary-main">
+      {primaryIcon ? (
+        <Img
+          image={{ ...getIconWithVersion({ ...primaryIcon } as Picture) }}
+          className="mr-3 flex-shrink-0"
+          width="24"
+          height="24"
+          asSVG
+        />
+      ) : null}
+      <Text size="text-m-title-xs" font="font-medium">
+        {label}
+      </Text>
+    </div>
+    <Img
+      className="flex-shrink-0"
+      image={{ ...getIconWithVersion({ icon: icon }) }}
+      width="24"
+      height="24"
+      asSVG
+    />
   </button>
 );

package/mobile/src/ui-kit/Icon/Icon.tsx

@@ -48,6 +48,9 @@ export const Icon = JSX<IconProps>(
         </Background>
       );
     }
+    if (!className.includes('h-')) {
+      imgProps['style'] = { height: `${imgProps.height}px` };
+    }
 
     return (
       <img
@@ -55,8 +58,8 @@ export const Icon = JSX<IconProps>(
         src={href}
         alt={alt}
         title={title}
-        {...imgProps}
         aria-hidden="true"
+        {...imgProps}
       />
     );
   },

package/mobile/src/ui-kit/List/List.tsx

@@ -26,7 +26,7 @@ export const List = JSX<ListProps>(
         {items.map((item, i) => (
           <ListItem
             key={String(i)}
-            className={`${itemClassName} mb-1.5`}
+            className={itemClassName}
             isDotted={isDotted}
             size={listItemSize}
           >

package/mobile/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -73,7 +73,6 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
       <div
         className={style('box-border overflow-auto no-scrollbar', listType, className)}
         style={containerStyle}
-        role="list"
         ref={containerRef}
       >
         {mapChildren((child, idx) => (

package/mobile/src/ui-kit/SwipeListControl/SwipeListItem.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import {
-  useIntersectionObserver,
   type IntersectionObserverOptions,
+  useIntersectionObserver,
 } from '../../hooks/useIntersectionObserver';
 
 /**
@@ -33,7 +33,6 @@ export const SwipeListItem = JSX<SwipeListControlItemProps>(
       <div
         className={`inline-block snap-always box-border ${className}`}
         style={style}
-        role="listitem"
         aria-current={Boolean(idx === activeIndex)}
         ref={ref}
       >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.8.24",
+  "version": "0.8.25",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Accordion/Accordion.example.json

@@ -5,7 +5,7 @@
   },
   "blocks": [
     {
-      "type": "AccordionItem",
+      "type": "RollupItem",
       "content": {
         "label": "Аккордеон 1",
         "isExpanded": true,
@@ -31,7 +31,7 @@
       ]
     },
     {
-      "type": "AccordionItem",
+      "type": "RollupItem",
       "content": {
         "label": "Аккордеон 2",
         "isExpanded": false,
@@ -41,7 +41,7 @@
       }
     },
     {
-      "type": "AccordionItem",
+      "type": "RollupItem",
       "content": {
         "label": "Аккордеон 3",
         "isExpanded": false,

package/src/components/Accordion/Accordion.fixture.mobile.tsx

@@ -5,10 +5,10 @@ import { Blocks } from '../Blocks';
 import { HEADLINE } from '../Headline/Headline.fixture';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
-import { Accordion } from './Accordion';
+import { VerticalLayout } from '../VerticalLayout/VerticalLayout';
 
-export const ACCORDION_ITEM: BlockDef = {
-  type: 'AccordionItem',
+export const ROLLUP_ITEM: BlockDef = {
+  type: 'RollupItem',
   content: {
     label: 'Accordion label 1',
     labelIcon: { icon: 'CardIcon' },
@@ -27,27 +27,36 @@ const options = {
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Accordion
+      <VerticalLayout
         className="col-span-12"
-        title="Accordion title"
-        description="Accordion description 2"
-        bordered={true}
         block={{
-          type: 'Accordion',
+          type: 'VerticalLayout',
           blocks: [
-            ACCORDION_ITEM,
             {
-              type: 'AccordionItem',
+              type: 'Headline',
+              content: {
+                title: 'Accordion title',
+                description: 'Accordion description 2',
+                headlineVersion: 'M',
+                align: 'text-center',
+              },
+            },
+            ROLLUP_ITEM,
+            {
+              type: 'RollupItem',
               content: { label: 'Accordion label 2', isExpanded: true },
               blocks: [{ type: 'Headline', content: HEADLINE }],
             },
             {
-              type: 'AccordionItem',
+              type: 'RollupItem',
               content: { label: 'Accordion label 3', isExpanded: true },
               blocks: [{ type: 'LinkDocs', content: { ...linkDocsContentExample, title: '' } }],
             },
           ],
         }}
+        version="primary"
+        isInnerPadding={false}
+        isPadding={true}
         options={options}
       />
     </div>