@redneckz/wildless-cms-uni-blocks 0.9.0 → 0.9.2

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -36,6 +36,8 @@ export type ProductBlockInnerContent = HeadlineProps &
      * @hidden
      */
     textBlockClassName?: string;
+    /** @title Картинка справа/текст слева */
+    directionRight?: boolean;
   };
 
 /**

package/mobile/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -16,19 +16,13 @@ interface DefaultFoldButtonProps {
 
 export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
   ({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => {
-    const STATE_STYLE =
-      'hover:bg-primary-hover focus:border-primary-text active:bg-primary-active outline-none';
-    const DIMENSIONS_STYLE = 'flex justify-center w-full px-0 py-5';
-
     return (
       <button
         className={style(
-          'border border-transparent bg-primary-main font-sans text-white cursor-pointer',
-          STATE_STYLE,
-          DIMENSIONS_STYLE,
+          'flex justify-center w-full px-0 py-5 border border-transparent outline-none focus:border-primary-text',
           disabled
-            ? 'bg-main-divider text-main-disabled cursor-not-allowed hover:bg-main-divider active:bg-main-divider'
-            : '',
+            ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
+            : 'bg-primary-main text-white hover:bg-primary-hove',
           className,
         )}
         onClick={onClick}

package/package.json

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

package/src/components/CarouselCatalogCard/CarouselCatalogCard.example.json

@@ -9,7 +9,6 @@
     }
   },
   "button": {
-    "href": "",
     "text": "Подробнее",
     "target": "_self",
     "version": "primary",

package/src/components/CarouselEventCard/CarouselEventCard.example.json

@@ -8,7 +8,5 @@
     }
   },
   "title": "Заголовок",
-  "description": "Описание",
-  "target": null,
-  "href": null
+  "description": "Описание"
 }

package/src/components/CarouselEventCard/CarouselEventCard.tsx

@@ -1,19 +1,29 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { Heading } from '../../ui-kit/Heading/Heading';
 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 type { UniBlockProps } from '../../model/JSXBlock';
+import { Text } from '../../ui-kit/Text/Text';
+import { useLink } from '../../hooks/useLink';
 import type { CarouselEventCardContent } from './CarouselEventCardContent';
+import type { UniBlockProps } from '../../model/JSXBlock';
 
 export interface CarouselEventCardProps extends CarouselEventCardContent, UniBlockProps {}
 
 export const CarouselEventCard = JSX<CarouselEventCardProps>(
-  ({ className = '', icon, title, description, href, target, ...rest }) => (
-    <BlockWrapper className={style('flex flex-col w-[365px]', className)} {...rest}>
-      <a href={href} target={target} role="link">
+  ({ className = '', icon, title, description, href, target, ...rest }) => {
+    const link = useLink();
+    const adjustedProps = link({ href, target });
+    const tagName = href ? 'a' : 'section';
+
+    return (
+      <BlockWrapper
+        className={style('flex flex-col w-[365px]', className)}
+        extraProps={adjustedProps}
+        tag={tagName}
+        {...rest}
+      >
         {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
         {icon?.src ? <Img image={icon} /> : null}
         {title ? (
@@ -26,7 +36,7 @@ export const CarouselEventCard = JSX<CarouselEventCardProps>(
             </Text>
           </div>
         ) : null}
-      </a>
-    </BlockWrapper>
-  ),
+      </BlockWrapper>
+    );
+  },
 );

package/src/components/CarouselProductCard/CarouselProductCard.example.json

@@ -17,7 +17,6 @@
     },
     "title": "Заголовок 1",
     "description": "Описание 1",
-    "href": "/credit-cards",
     "version": "primary",
     "isDotted": true,
     "items": [

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -1,34 +1,41 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { Text } from '../../ui-kit/Text/Text';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
-import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
+import { Text } from '../../ui-kit/Text/Text';
+import { useLink } from '../../hooks/useLink';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
+import type { Picture } from '../../model/Picture';
+import type { UniBlockProps } from '../../model/JSXBlock';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
 
 export const CarouselProductCard = JSX<CarouselProductCardProps>(
   ({
+    additionalDescription,
+    align = 'text-center',
+    button = {},
     className = '',
-    title,
-    headlineSmallVersion = 'H6',
     description,
-    additionalDescription,
+    headlineSmallVersion = 'H6',
+    href,
     icon,
+    isDotted = true,
     items = [],
-    button = {},
+    target,
+    title,
     version = 'primary',
-    isDotted = true,
-    align = 'text-center',
     ...rest
   }) => {
+    const link = useLink();
+    const adjustedProps = link({ href, target });
+    const tagName = href ? 'a' : 'section';
+
     return (
       <BlockWrapper
         className={style(
@@ -37,6 +44,8 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
           align,
           className,
         )}
+        extraProps={adjustedProps}
+        tag={tagName}
         version={version}
         {...rest}
       >

package/src/components/CarouselProductCard/CarouselProductCardContent.ts

@@ -3,6 +3,7 @@ import type { ButtonCommonIconProps } from '../../model/Button';
 import type { AdditionalDescriptionProps, HeadlineSmallProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
+import type { LinkCommonProps } from '../../model/LinkProps';
 import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
@@ -21,7 +22,8 @@ export type CarouselProductCardContent = UniBlockContent &
   AdditionalDescriptionProps &
   IconProps &
   ButtonCommonIconProps &
-  BulletsProps & {
+  BulletsProps &
+  LinkCommonProps & {
     /** @title Список */
     items?: ListProps[];
     align?: TextAlign;

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json

@@ -18,8 +18,6 @@
     },
     "title": "Заголовок 1",
     "description": "Описание 1",
-    "target": null,
-    "href": null,
     "socialMedia": [
       {
         "href": "https://t.me",

package/src/components/CarouselTariffsCard/CarouselTariffsCard.example.json

@@ -1,7 +1,6 @@
 {
   "title": "Заголовок карточки",
   "button": {
-    "href": "",
     "text": "Кнопка",
     "target": "_self",
     "version": "secondary"

package/src/components/Filtration/FiltrationInner.tsx

@@ -51,8 +51,8 @@ export const FiltrationInner = JSX<FiltrationInnerProps>(
             }}
             renderFoldButton={({ isUnfolded, onToggle }) => (
               <DefaultFoldButton
-                className="mt-11"
-                disabled={topItemsCount > hiddenBlocks.length}
+                className={style('mt-11', topItemsCount < 1 ? 'hidden' : '')}
+                disabled={!hiddenBlocks?.length}
                 label={label}
                 icon={ICONS[Number(isUnfolded)]}
                 dataTheme={rest.options?.page?.colorPalette}

package/src/components/Footer/Footer.ui.json

@@ -1,11 +1 @@
-{
-  "content": {
-    "subMenu": {
-      "items": {
-        "icon": {
-          "ui:field": "icon"
-        }
-      }
-    }
-  }
-}
+{}

package/src/components/Footer/FooterContent.ts

@@ -1,6 +1,7 @@
 import type { DescriptionProps } from '../../model/HeadlineType';
 import type { LinkProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
+import type { UniBlockContent } from '../../model/JSXBlock';
 
 /**
  * @title Тип контакта
@@ -27,7 +28,5 @@ export type SubMenuItem = LinkProps & IconProps;
 
 /**
  * @title Подвал
- * @hidden
  */
-// eslint-disable-next-line @typescript-eslint/ban-types
-export type FooterContent = {};
+export type FooterContent = UniBlockContent & {};

package/src/components/ProductBlock/ProductBlock.example.json

@@ -46,6 +46,7 @@
           "icon": "SignDocsIcon"
         }
       }
-    ]
+    ],
+    "directionRight": true
   }
 }

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -93,6 +93,23 @@ export default {
       />
     </div>
   ),
+  'primary with back button direction left': (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        backwardButton={backwardButton}
+        headlineVersion="L"
+        title="Потребительский кредит наличными"
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        benefitsCountOfRow={2}
+        benefits={benefits}
+        benefitsVersion="normal"
+        buttons={buttons}
+        image={image}
+        directionRight={false}
+      />
+    </div>
+  ),
   'primary with color benefits': (
     <div className="container grid grid-cols-12">
       <ProductBlock

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -36,6 +36,8 @@ export type ProductBlockInnerContent = HeadlineProps &
      * @hidden
      */
     textBlockClassName?: string;
+    /** @title Картинка справа/текст слева */
+    directionRight?: boolean;
   };
 
 /**

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -29,12 +29,16 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     version = 'primary',
     isDotted = true,
     textBlockClassName = '',
+    directionRight = true,
   }) => {
     const benefitsCount = benefits?.filter((_) => _.label)?.length;
     const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCountOfRow);
 
     return (
       <div className={style('flex grow justify-between items-stretch h-full', className)}>
+        {image?.src ? (
+          <Img className={`mt-[-50px] ${directionRight ? 'order-2' : ''}`} image={image} />
+        ) : null}
         <div className={style('flex flex-col', textBlockClassName)}>
           <Headline
             className="!p-0 max-w-[600px]"
@@ -67,7 +71,6 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             {footnote ? <p className="text-m-light pt-12">{footnote}</p> : null}
           </div>
         </div>
-        {image?.src && <Img className="mt-[-50px]" image={image} />}
       </div>
     );
   },

package/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -16,19 +16,13 @@ interface DefaultFoldButtonProps {
 
 export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
   ({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => {
-    const STATE_STYLE =
-      'hover:bg-primary-hover focus:border-primary-text active:bg-primary-active outline-none';
-    const DIMENSIONS_STYLE = 'flex justify-center w-full px-0 py-5';
-
     return (
       <button
         className={style(
-          'border border-transparent bg-primary-main font-sans text-white cursor-pointer',
-          STATE_STYLE,
-          DIMENSIONS_STYLE,
+          'flex justify-center w-full px-0 py-5 border border-transparent outline-none focus:border-primary-text',
           disabled
-            ? 'bg-main-divider text-main-disabled cursor-not-allowed hover:bg-main-divider active:bg-main-divider'
-            : '',
+            ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
+            : 'bg-primary-main text-white hover:bg-primary-hove',
           className,
         )}
         onClick={onClick}