@redneckz/wildless-cms-uni-blocks 0.7.8 → 0.7.9

package/mobile/lib/ui-kit/SwipeListControl/SwipeListControlDots.js

@@ -8,7 +8,7 @@ const activeDotStyles = {
     'horizontal-list': 'w-6',
     'vertical-list': 'h-6',
 };
-const dotStyle = 'cursor-pointer bg-primary-main rounded-full transition-width duration-300 group-data-secondary:bg-white';
+const dotStyle = 'cursor-pointer bg-primary-main rounded-full transition-width duration-300 group-data-secondary:bg-white group-data-transparent:bg-white';
 const inactiveDotStyle = 'w-2 h-2 opacity-30';
 export const SwipeListControlDots = JSX(({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list' }) => {
     const handleClick = (idx) => {

package/mobile/lib/ui-kit/SwipeListControl/SwipeListControlDots.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeListControlDots.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListControlDots.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,MAAM,eAAe,GAAyC;IAC5D,iBAAiB,EAAE,oBAAoB;IACvC,eAAe,EAAE,sDAAsD;CACxE,CAAC;AAEF,MAAM,eAAe,GAAyC;IAC5D,iBAAiB,EAAE,KAAK;IACxB,eAAe,EAAE,KAAK;CACvB,CAAC;AAEF,MAAM,QAAQ,GACZ,yGAAyG,CAAC;AAE5G,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAS9C,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CACrC,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,iBAAiB,EAAE,EAAE,EAAE;IAC5E,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE;QAClC,IAAI,GAAG,KAAK,WAAW,IAAI,YAAY,EAAE,OAAO,EAAE;YAChD,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,cAAc,CAAC;gBACjD,QAAQ,EAAE,QAAQ;gBAClB,KAAK,EAAE,SAAS;aACjB,CAAC,CAAC;SACJ;IACH,CAAC,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,cAAK,SAAS,EAAE,cAAc,eAAe,CAAC,QAAQ,CAAC,EAAE,YACtD,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAW,EAAE,EAAE,CAAC,CACtD,cAEE,SAAS,EAAE,GAAG,QAAQ,IACpB,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,gBACpD,EAAE,EACF,IAAI,EAAC,QAAQ,uBAEb,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,IAN1B,MAAM,CAAC,GAAG,CAAC,CAOhB,CACH,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC"}
+{"version":3,"file":"SwipeListControlDots.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListControlDots.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,MAAM,eAAe,GAAyC;IAC5D,iBAAiB,EAAE,oBAAoB;IACvC,eAAe,EAAE,sDAAsD;CACxE,CAAC;AAEF,MAAM,eAAe,GAAyC;IAC5D,iBAAiB,EAAE,KAAK;IACxB,eAAe,EAAE,KAAK;CACvB,CAAC;AAEF,MAAM,QAAQ,GACZ,yIAAyI,CAAC;AAE5I,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAS9C,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CACrC,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,iBAAiB,EAAE,EAAE,EAAE;IAC5E,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE;QAClC,IAAI,GAAG,KAAK,WAAW,IAAI,YAAY,EAAE,OAAO,EAAE;YAChD,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,cAAc,CAAC;gBACjD,QAAQ,EAAE,QAAQ;gBAClB,KAAK,EAAE,SAAS;aACjB,CAAC,CAAC;SACJ;IACH,CAAC,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,cAAK,SAAS,EAAE,cAAc,eAAe,CAAC,QAAQ,CAAC,EAAE,YACtD,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAW,EAAE,EAAE,CAAC,CACtD,cAEE,SAAS,EAAE,GAAG,QAAQ,IACpB,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,gBACpD,EAAE,EACF,IAAI,EAAC,QAAQ,uBAEb,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,IAN1B,MAAM,CAAC,GAAG,CAAC,CAOhB,CACH,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC"}

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -45,7 +45,11 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
       >
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
           <div className="h-full flex flex-col justify-between">
-            {description ? <span className="mb-2">{description}</span> : null}
+            {description ? (
+              <span className="mb-2 group-data-gray:text-secondary-text group-data-gray:max-w-[265px]">
+                {description}
+              </span>
+            ) : null}
             {items.length ? (
               <List
                 className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"

package/mobile/src/components/ErrorBlock/ErrorBlock.tsx

@@ -4,6 +4,7 @@ import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ErrorBlockContent } from './ErrorBlockContent';
+import { style } from '../../utils/style';
 
 export interface ErrorBlockProps extends ErrorBlockContent, UniBlockProps {}
 
@@ -19,9 +20,17 @@ const renderErrorContent = (error: ErrorBlockContent['error']) => {
   return null;
 };
 
+const getErrorBlockStyle = (text: string) => (text ? 'py-20 pt-3 pb-1' : 'mb-16 pb-2 mt-24 pt-3');
+
 export const ErrorBlock = JSX<ErrorBlockProps>(
   ({ className = '', title, subtitle, error, button }) => (
-    <section className={`flex flex-col justify-center items-center mt-12 ${className}`}>
+    <section
+      className={style(
+        'flex flex-col justify-center items-center',
+        getErrorBlockStyle(button?.text as string),
+        className,
+      )}
+    >
       <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
       {title ? <Heading headingType="h1" className="text-left mb-4" title={title} /> : null}
       {subtitle ? (

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

@@ -43,18 +43,22 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
         className={style('flex flex-col rounded-md bg-white p-6 pb-2', visible ? '' : 'hidden')}
         aria-hidden={!visible}
       >
-        {items?.map((item, i) => (
-          <a
-            key={item.href || String(i)}
-            className={style(
-              'text-l-light pb-4 hover:text-primary-main',
-              item === activeItem ? 'text-primary-main' : '',
-            )}
-            {...link(item)}
-          >
-            {item.text}
-          </a>
-        ))}
+        {items?.map((item, i) => {
+          const { text, ...linkProps } = item;
+
+          return (
+            <a
+              key={item.href || String(i)}
+              className={style(
+                'text-l-light pb-4 hover:text-primary-main',
+                item === activeItem ? 'text-primary-main' : '',
+              )}
+              {...link(linkProps)}
+            >
+              {text}
+            </a>
+          );
+        })}
       </div>
     </div>
   );

package/mobile/src/components/OtherProductsItem/OtherProductsItem.tsx

@@ -45,4 +45,6 @@ export const OtherProductsItem: JSXBlock<OtherProductsItemProps> = JSX<OtherProd
   },
 );
 
-OtherProductsItem.childrenTypes = []; // All types of blocks are suitable
+OtherProductsItem.childrenTypes = {
+  exclude: ['OtherProductsItem'],
+};

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

@@ -2,7 +2,7 @@
   "content": {
     "listType": "vertical-list"
   },
-  "style": ["col-span-12", "h-96"],
+  "style": ["col-span-12"],
   "type": "SwipeListControlBlock",
   "blocks": [
     {

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

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
+
+interface SlideCheckboxProps {
+  checked?: boolean;
+  text?: string;
+  onClick?: () => void;
+}
+export const SlideCheckbox = JSX<SlideCheckboxProps>(({ checked, text, onClick }) => (
+  <div
+    role="checkbox"
+    aria-checked={checked}
+    className="flex justify-start items-center w-full cursor-pointer mb-4"
+    onClick={() => onClick && onClick()}
+  >
+    <div
+      className={`relative duration-300 w-9 h-5 mr-3 rounded rounded-2xl ${
+        checked ? 'bg-primary-main' : 'bg-main-divider'
+      }`}
+    >
+      <div
+        className={`absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded rounded-full ${
+          checked ? 'left-[50%]' : 'left-[5%]'
+        }`}
+      />
+    </div>
+    <div>
+      <Text size="text-m" font="font-light" color="text-primary-text">
+        {text}
+      </Text>
+    </div>
+  </div>
+));

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

@@ -12,7 +12,7 @@ const activeDotStyles: Record<SwipeListControlType, string> = {
 };
 
 const dotStyle =
-  'cursor-pointer bg-primary-main rounded-full transition-width duration-300 group-data-secondary:bg-white';
+  'cursor-pointer bg-primary-main rounded-full transition-width duration-300 group-data-secondary:bg-white group-data-transparent:bg-white';
 
 const inactiveDotStyle = 'w-2 h-2 opacity-30';
 

package/package.json

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

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx

@@ -65,6 +65,7 @@ export default {
         className="col-span-4"
         version="gray"
         {...CAROUSEL_RECOMMENDATION_CARD}
+        description="На портале представлено множество ипотечных программ, в том числе и сельская ипотека"
       />
     </div>
   ),

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -45,7 +45,11 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
       >
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
           <div className="h-full flex flex-col justify-between">
-            {description ? <span className="mb-2">{description}</span> : null}
+            {description ? (
+              <span className="mb-2 group-data-gray:text-secondary-text group-data-gray:max-w-[265px]">
+                {description}
+              </span>
+            ) : null}
             {items.length ? (
               <List
                 className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"

package/src/components/ErrorBlock/ErrorBlock.tsx

@@ -4,6 +4,7 @@ import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ErrorBlockContent } from './ErrorBlockContent';
+import { style } from '../../utils/style';
 
 export interface ErrorBlockProps extends ErrorBlockContent, UniBlockProps {}
 
@@ -19,9 +20,17 @@ const renderErrorContent = (error: ErrorBlockContent['error']) => {
   return null;
 };
 
+const getErrorBlockStyle = (text: string) => (text ? 'py-20 pt-3 pb-1' : 'mb-16 pb-2 mt-24 pt-3');
+
 export const ErrorBlock = JSX<ErrorBlockProps>(
   ({ className = '', title, subtitle, error, button }) => (
-    <section className={`flex flex-col justify-center items-center mt-12 ${className}`}>
+    <section
+      className={style(
+        'flex flex-col justify-center items-center',
+        getErrorBlockStyle(button?.text as string),
+        className,
+      )}
+    >
       <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
       {title ? <Heading headingType="h1" className="text-left mb-4" title={title} /> : null}
       {subtitle ? (

package/src/components/Header/DropdownMenu.tsx

@@ -43,18 +43,22 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
         className={style('flex flex-col rounded-md bg-white p-6 pb-2', visible ? '' : 'hidden')}
         aria-hidden={!visible}
       >
-        {items?.map((item, i) => (
-          <a
-            key={item.href || String(i)}
-            className={style(
-              'text-l-light pb-4 hover:text-primary-main',
-              item === activeItem ? 'text-primary-main' : '',
-            )}
-            {...link(item)}
-          >
-            {item.text}
-          </a>
-        ))}
+        {items?.map((item, i) => {
+          const { text, ...linkProps } = item;
+
+          return (
+            <a
+              key={item.href || String(i)}
+              className={style(
+                'text-l-light pb-4 hover:text-primary-main',
+                item === activeItem ? 'text-primary-main' : '',
+              )}
+              {...link(linkProps)}
+            >
+              {text}
+            </a>
+          );
+        })}
       </div>
     </div>
   );

package/src/components/OtherProductsItem/OtherProductsItem.tsx

@@ -45,4 +45,6 @@ export const OtherProductsItem: JSXBlock<OtherProductsItemProps> = JSX<OtherProd
   },
 );
 
-OtherProductsItem.childrenTypes = []; // All types of blocks are suitable
+OtherProductsItem.childrenTypes = {
+  exclude: ['OtherProductsItem'],
+};

package/src/components/SwipeListControlBlock/SwipeListControlBlock.example.json

@@ -2,7 +2,7 @@
   "content": {
     "listType": "vertical-list"
   },
-  "style": ["col-span-12", "h-96"],
+  "style": ["col-span-12"],
   "type": "SwipeListControlBlock",
   "blocks": [
     {

package/src/components/SwipeListControlBlock/SwipeListControlBlock.fixture.tsx

@@ -41,4 +41,21 @@ export default {
       />
     </div>
   ),
+  transparent: (
+    <div className="container grid grid-cols-12 p-4">
+      <SwipeListControlBlock
+        className="col-span-12"
+        block={{
+          type: 'SwipeListControlBlock',
+          blocks: [
+            { type: 'ProductTile', content: { ...PRODUCT_TILE, version: '' } },
+            { type: 'ProductTile', content: { ...PRODUCT_TILE, version: '' } },
+          ],
+        }}
+        listType="vertical-list"
+        options={options}
+        version="transparent"
+      />
+    </div>
+  ),
 };

package/src/ui-kit/SlideCheckbox/SlideCheckbox.fixture.tsx

@@ -0,0 +1,9 @@
+import { SlideCheckbox } from './SlideCheckbox';
+
+export default {
+  primary: (
+    <div className="bg-white">
+      <SlideCheckbox checked={true} text={'Checkbox'} />
+    </div>
+  ),
+};

package/src/ui-kit/SlideCheckbox/SlideCheckbox.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
+
+interface SlideCheckboxProps {
+  checked?: boolean;
+  text?: string;
+  onClick?: () => void;
+}
+export const SlideCheckbox = JSX<SlideCheckboxProps>(({ checked, text, onClick }) => (
+  <div
+    role="checkbox"
+    aria-checked={checked}
+    className="flex justify-start items-center w-full cursor-pointer mb-4"
+    onClick={() => onClick && onClick()}
+  >
+    <div
+      className={`relative duration-300 w-9 h-5 mr-3 rounded rounded-2xl ${
+        checked ? 'bg-primary-main' : 'bg-main-divider'
+      }`}
+    >
+      <div
+        className={`absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded rounded-full ${
+          checked ? 'left-[50%]' : 'left-[5%]'
+        }`}
+      />
+    </div>
+    <div>
+      <Text size="text-m" font="font-light" color="text-primary-text">
+        {text}
+      </Text>
+    </div>
+  </div>
+));

package/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -12,7 +12,7 @@ const activeDotStyles: Record<SwipeListControlType, string> = {
 };
 
 const dotStyle =
-  'cursor-pointer bg-primary-main rounded-full transition-width duration-300 group-data-secondary:bg-white';
+  'cursor-pointer bg-primary-main rounded-full transition-width duration-300 group-data-secondary:bg-white group-data-transparent:bg-white';
 
 const inactiveDotStyle = 'w-2 h-2 opacity-30';