@redneckz/wildless-cms-uni-blocks 0.12.6 → 0.12.8

package/package.json

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

package/src/components/ApplicationForm/Footnote.tsx

@@ -9,7 +9,7 @@ interface FootnoteProps {
 }
 
 export const Footnote = JSX<FootnoteProps>(({ link }) => (
-  <Paragraph size="text-s-light" color="text-secondary-text">
+  <Paragraph size="text-s" font="font-light" color="text-secondary-text">
     <Text>Нажимая кнопку, вы подтверждаете согласие с </Text>
     {link ? (
       <Button

package/src/components/ApplicationForm/InputControl.tsx

@@ -25,7 +25,7 @@ export const InputControl = JSX<InputControlProps>(
       />
       <div className="h-2">
         {error ? (
-          <Text size="text-xs-light" color="text-error">
+          <Text size="text-xs" font="font-light" color="text-error">
             {error}
           </Text>
         ) : null}

package/src/components/ApplicationForm/PhoneInputControl.tsx

@@ -16,7 +16,7 @@ export const PhoneInputControl = JSX<InputControlProps>(
       />
       <div className="h-2">
         {error ? (
-          <Text size="text-xs-light" color="text-error">
+          <Text size="text-xs" font="font-light" color="text-error">
             {error}
           </Text>
         ) : null}

package/src/components/ApplicationForm/ResponseNotification.tsx

@@ -24,7 +24,7 @@ export const ResponseNotification = JSX<ResponseNotificationProps>(({ responseTy
           title={responseOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку'}
           className="mb-1"
         />
-        <Text size="text-l-light" color="text-secondary-text">
+        <Text size="text-l" font="font-light" color="text-secondary-text">
           {responseOK ? 'Совсем скоро мы с вами свяжемся' : 'Пожалуйста, повторите позднее'}
         </Text>
       </div>

package/src/components/ApplicationForm/SelectControl.tsx

@@ -11,7 +11,7 @@ export const SelectControl = JSX<SelectControlProps>((props) => (
     <Select {...props} valid={!props.error} />
     <div className="h-2">
       {props.error ? (
-        <Text size="text-xs-light" color="text-error">
+        <Text size="text-xs" font="font-light" color="text-error">
           {props.error}
         </Text>
       ) : null}

package/src/components/ApplicationForm/renderCreditParameters.tsx

@@ -15,7 +15,9 @@ export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormStat
   <div className="flex justify-between gap-5 mb-7">
     <div className="w-1/2">
       <label>
-        <Text size="text-m-light">Сумма кредита, ₽</Text>
+        <Text size="text-m" font="font-light">
+          Сумма кредита, ₽
+        </Text>
       </label>
       <InputRange
         items={ITEMS_CREDIT_AMOUNT}
@@ -26,7 +28,9 @@ export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormStat
     </div>
     <div className="w-1/2">
       <label>
-        <Text size="text-m-light">Срок кредита, месяцев</Text>
+        <Text size="text-m" font="font-light">
+          Срок кредита, месяцев
+        </Text>
       </label>
       <InputRange
         items={ITEMS_CREDIT_TERM}

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -60,7 +60,7 @@ const renderDescription = (description: DescriptionDef | undefined) => {
   const benefitType = description?.benefitType || null;
 
   return description && benefitType ? (
-    <div className="mt-2 text-l-light text-secondary-text group-data-secondary:text-white/80">
+    <div className="mt-2 text-l font-light text-secondary-text group-data-secondary:text-white/80">
       {benefitType === 'list'
         ? renderListBenefit(description as ListBenefitDef)
         : renderTextBenefit(description as TextBenefitDef)}

package/src/components/Blocks.mobile.ts

@@ -3,9 +3,13 @@ import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { ButtonsBlock } from './ButtonsBlock/ButtonsBlock';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
+import { CarouselBankHistoryCard } from './CarouselBankHistoryCard/CarouselBankHistoryCard';
 import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
+import { CarouselCard } from './CarouselCard/CarouselCard';
+import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
+import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { Footer } from './Footer/Footer';
 import { Header } from './Header/Header';
@@ -31,6 +35,10 @@ export const Blocks: BlocksRegistry = {
   BonusBenefitsBlock,
   CardTransfer,
   Carousel,
+  CarouselCard,
+  CarouselCatalogCard,
+  CarouselProductCard,
+  CarouselBankHistoryCard,
   CarouselTariffsCard,
   ComparisonTable,
   Footer,

package/src/components/BusinessBlock/BusinessCard.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
 import type { BusinessCardItemProps, BusinessCardProps } from './BusinessBlockContent';
 
 export const BusinessCard = JSX<BusinessCardProps>((props) => {
@@ -31,7 +32,9 @@ const renderItem = (item: BusinessCardItemProps, key: string) => {
         <Img image={icon} className="w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider" />
       ) : null}
       {icon?.src ? <Img image={icon} /> : null}
-      <span className="text-xl-light">{text}</span>
+      <Text size="text-xl" font="font-light">
+        {text}
+      </Text>
     </li>
   );
 };

package/src/components/Calculator/Calculator.tsx

@@ -74,8 +74,8 @@ function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
     : `h-[77px] w-[328px] min-w-[328px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
   const btnTitleClassName = isActive ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
   const btnDescClassName = isActive
-    ? 'text-l-light text-white'
-    : `text-m-light text-secondary-text`;
+    ? 'text-l font-light text-white'
+    : `text-m font-light text-secondary-text`;
   const iconClassName = isActive ? '' : `text-primary-main`;
   const iconVersion = tab?.icon?.iconVersion;
   const activeIconStyle = isActive ? 'white' : 'normal';

package/src/components/Calculator/CalculatorValueBlock.tsx

@@ -15,7 +15,7 @@ export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
   ({ title, value, postfix = '', prefix, className = '' }) => (
     <div className={style('mb-7', className)}>
       {title ? (
-        <Text size="text-l-light" color="text-secondary-text">
+        <Text size="text-l" font="font-light" color="text-secondary-text">
           {title}
         </Text>
       ) : null}

package/src/components/Calculator/Rate.tsx

@@ -23,7 +23,7 @@ export const Rate = JSX<RateProps>(
     fractionDigits = 2,
   }) => (
     <div>
-      <Text size="text-l-light" color="text-secondary-text">
+      <Text size="text-l" font="font-light" color="text-secondary-text">
         {title}
       </Text>
       <div className="relative">

package/src/components/Calculator/UnknownRate.tsx

@@ -9,14 +9,14 @@ export interface UnknownRateProps {
 
 export const UnknownRate = JSX<UnknownRateProps>(({ title = 'Ставка' }) => (
   <div>
-    <Text size="text-l-light" color="text-secondary-text">
+    <Text size="text-l" font="font-light" color="text-secondary-text">
       {title}
     </Text>
     <div className="mt-1 pt-1 pl-5 pb-1.5">
       <Icon name="PercentIcon" width="90" height="85" />
     </div>
     <div className="w-[250px] mt-3.5">
-      <Paragraph size="text-xl-light" color="text-primary-text">
+      <Paragraph size="text-xl" font="font-light" color="text-primary-text">
         Процентная ставка для срока <strong>1-30 дней</strong> устанавливается при обращении в Банк
       </Paragraph>
     </div>

package/src/components/Calculator/renderFootnote.tsx

@@ -2,7 +2,7 @@ import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 
 export const renderFootnote = (text?: string) =>
   text ? (
-    <Paragraph size="text-s-light" color="text-secondary-text">
+    <Paragraph size="text-s" font="font-light" color="text-secondary-text">
       {text}
     </Paragraph>
   ) : null;

package/src/components/Calculator/renderProposal.tsx

@@ -1,10 +1,15 @@
 import { Button } from '../../ui-kit/Button/Button';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { Text } from '../../ui-kit/Text/Text';
 
 export function renderProposal(monthlyPayment: number) {
   return (
     <div className="box-border ">
-      <div className="text-l-light">Ежемесячный платёж</div>
+      <div>
+        <Text size="text-l" font="font-light">
+          Ежемесячный платёж
+        </Text>
+      </div>
       <div className="text-h3 mb-3">{toLocalNumberFormat(2)(Math.round(monthlyPayment))} ₽</div>
       <Button className="mt-12 w-full" text="Отправить заявку" version="primary" href="#" />
     </div>

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

@@ -4,89 +4,227 @@ import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOpti
 import { Blocks } from '../Blocks';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { Carousel } from './Carousel';
+import { CARD } from '../CarouselCard/CarouselCard.fixture.mobile';
+import { CAROUSEL_RECOMMENDATION_CARD } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture.mobile';
+import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
+import { BANK_HISTORY_CARD } from '../CarouselBankHistoryCard/CarouselBankHistoryCard.fixture';
+import { CATALOG_CARD } from '../CarouselCatalogCard/CatalogCard';
+import {
+  PRODUCT_CARD,
+  PRODUCT_CARD_SMALL,
+} from '../CarouselProductCard/CarouselProductCard.fixture';
+import { Picture } from '../../model/Picture';
+
+const catalogImage: Picture = {
+  src: 'pay-ring.png',
+  format: 'webp',
+  size: {
+    width: 117,
+    height: 117,
+  },
+  title: 'pay-ring',
+};
 
 const options = {
   blocksRegistry: Blocks,
 } as BlockRendererOptions;
 
-const carouselBlock = {
-  type: 'Carousel',
-  blocks: new Array(6)
-    .fill({
-      type: 'CarouselTariffsCard',
-      content: TARIFFS_CARD,
-    })
-    .map((_, i) => (i === 1 ? { ..._, content: TARIFFS_CARD_HIT } : _)),
-};
-
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Carousel className="col-span-12" block={carouselBlock} options={options} />
+      <Carousel
+        className="col-span-12"
+        isBlur={false}
+        isPadding={false}
+        isCyclic={true}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: [
+            { type: 'CarouselCard', content: CARD, style: ['col-span-4'] },
+            { type: 'CarouselCard', content: CARD, style: ['col-span-4'] },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
-  'arrowsPadded with cyclic': (
+  catalog: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        block={carouselBlock}
+        isBlur={false}
+        isCyclic={true}
+        isPadding={true}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselCatalogCard',
+            content: { ...CATALOG_CARD, image: catalogImage },
+            style: ['col-span-12'],
+          }),
+        }}
         options={options}
-        arrowsPadded={false}
+      />
+    </div>
+  ),
+  tariffs: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={0}
+        isBlur={true}
         isCyclic={true}
+        isAlignCenter={true}
+        showArrows={false}
+        block={{
+          type: 'Carousel',
+          blocks: [
+            {
+              type: 'CarouselTariffsCard',
+              content: TARIFFS_CARD_HIT,
+              style: ['col-span-4'],
+            },
+            {
+              type: 'CarouselTariffsCard',
+              content: TARIFFS_CARD,
+              style: ['col-span-4'],
+            },
+            {
+              type: 'CarouselTariffsCard',
+              content: TARIFFS_CARD,
+              style: ['col-span-4'],
+            },
+          ],
+        }}
+        options={options}
       />
     </div>
   ),
-
-  'no-blur with cyclic': (
+  product: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
         isBlur={false}
         isCyclic={true}
-        block={carouselBlock}
+        isPadding={false}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselProductCard',
+            content: PRODUCT_CARD,
+            style: ['col-span-4'],
+          }),
+        }}
         options={options}
       />
     </div>
   ),
-  'one visible cards with dots': (
+  'mini-product': (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        visibleItemCount={1}
+        isBlur={true}
+        isPadding={false}
+        showArrows={false}
         showDots={true}
-        block={carouselBlock}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselProductCard',
+            content: PRODUCT_CARD_SMALL,
+            style: ['col-span-4'],
+          }),
+        }}
         options={options}
       />
     </div>
   ),
-  'only one cards align center': (
+  program: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
+        isBlur={false}
+        isCyclic={true}
+        isPadding={true}
+        showArrows={false}
+        showDots={true}
         block={{
           type: 'Carousel',
-          blocks: new Array(1)
-            .fill({
-              type: 'CarouselTariffsCard',
-              content: TARIFFS_CARD,
-            })
-            .map((_, i) => (i === 1 ? { ..._, content: TARIFFS_CARD_HIT } : _)),
+          blocks: new Array(3).fill({
+            type: 'CarouselProgramsCard',
+            content: BUSINESS_CARD,
+            style: ['col-span-4'],
+          }),
         }}
         options={options}
-        isAlignCenter={true}
       />
     </div>
   ),
-
-  tariffs: (
+  recommendations: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        visibleItemCount={0}
-        isBlur={true}
-        isCyclic={false}
-        isAlignCenter={true}
-        block={carouselBlock}
+        isBlur={false}
+        isPadding={false}
+        isCyclic={true}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselRecommendationCard',
+            content: CAROUSEL_RECOMMENDATION_CARD,
+            style: ['col-span-4'],
+          }),
+        }}
+        options={options}
+      />
+    </div>
+  ),
+  recommendationsSecondary: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        isBlur={false}
+        isPadding={false}
+        isCyclic={true}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselRecommendationCard',
+            content: { version: 'secondary', ...CAROUSEL_RECOMMENDATION_CARD },
+            style: ['col-span-4'],
+          }),
+        }}
+        options={options}
+      />
+    </div>
+  ),
+  'bank history': (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        isBlur={false}
+        isCyclic={true}
+        isPadding={false}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselBankHistoryCard',
+            content: BANK_HISTORY_CARD,
+            style: ['col-span-4'],
+          }),
+        }}
         options={options}
       />
     </div>

package/src/components/Carousel/Carousel.fixture.tsx

@@ -97,6 +97,7 @@ export default {
         isBlur={true}
         isCyclic={false}
         isAlignCenter={true}
+        isGap={false}
         block={{
           type: 'Carousel',
           blocks: new Array(6)
@@ -131,7 +132,7 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        visibleItemCount={4}
+        visibleItemCount={3}
         isBlur={true}
         block={{
           type: 'Carousel',
@@ -148,6 +149,10 @@ export default {
               type: 'CarouselProductCard',
               content: PRODUCT_CARD_SMALL,
             },
+            {
+              type: 'CarouselProductCard',
+              content: PRODUCT_CARD_SMALL,
+            },
           ],
         }}
         options={options}

package/src/components/Carousel/Carousel.tsx

@@ -5,12 +5,11 @@ import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
-import { SwipeListControlDots } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
 import type { CarouselContent } from './CarouselContent';
-import { CarouselScrollButtons } from './CarouselScrollButtons';
 import { ITEMS_GAP } from './itemsGap';
+import { renderControlButtons } from './renderControlButtons';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
@@ -21,19 +20,21 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({
     className = '',
     itemCount,
-    visibleItemCount,
+    visibleItemCount = 0,
     isBlur = true,
     isCyclic = false,
     arrowsPadded = true,
     isPadding = true,
     showDots = false,
     isAlignCenter = false,
+    showArrows = true,
+    isGap = true,
     ...rest
   }) => {
     const { blocks: childBlocks = [] } = rest.block || {};
     const count = itemCount || childBlocks?.length;
 
-    const [activeIndex, setActiveIndex] = useState<number>(Math.floor((visibleItemCount || 0) / 2));
+    const [activeIndex, setActiveIndex] = useState(Math.floor(visibleItemCount / 2));
     const increaseActiveIndex = useCallback(() => setActiveIndex((_) => _ + 1), []);
     const decreaseActiveIndex = useCallback(() => setActiveIndex((_) => _ - 1), []);
 
@@ -51,7 +52,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             containerRef={containerRef}
             visibleItemCount={visibleItemCount}
             snapAlign="snap-start"
-            gap={ITEMS_GAP}
+            gap={isGap ? ITEMS_GAP : undefined}
             onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
           >
             {renderChildren({
@@ -65,17 +66,21 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
                 : renderBlock,
             })}
           </SwipeListContainer>
-          <CarouselScrollButtons
-            scroll={scroll}
-            isBlur={isBlur}
-            arrowsPadded={arrowsPadded}
-            onScrollLeft={decreaseActiveIndex}
-            onScrollRight={increaseActiveIndex}
-            hasEdgeBlocks={isBankHistoryCarousel}
-            activeIndex={activeIndex}
-            itemCount={count}
-          />
-          {showDots ? renderDots(containerRef, dotsActiveIndex, count) : null}
+          {renderControlButtons({
+            showArrows,
+            showDots,
+            scrollButtonsProps: {
+              scroll,
+              arrowsPadded,
+              isBlur,
+              onScrollLeft: decreaseActiveIndex,
+              onScrollRight: increaseActiveIndex,
+              hasEdgeBlocks: isBankHistoryCarousel,
+              activeIndex,
+              itemCount: count,
+            },
+            dotsProps: { containerRef, activeIndex: dotsActiveIndex, dotCount: count },
+          })}
         </div>
       </BlockWrapper>
     );
@@ -100,16 +105,3 @@ const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-default'
 
 const getAlignStyle = (isAlignCenter: boolean): string =>
   isAlignCenter ? 'flex justify-center' : '';
-
-const renderDots = (
-  containerRef: { current: HTMLDivElement | null },
-  dotsActiveIndex: number,
-  itemCount: number | undefined,
-) => (
-  <SwipeListControlDots
-    containerRef={containerRef}
-    activeIndex={dotsActiveIndex}
-    dotCount={itemCount}
-    listType={'horizontal-list'}
-  />
-);

package/src/components/Carousel/CarouselContent.ts

@@ -19,4 +19,8 @@ export type CarouselContent = UniBlockContent & {
   isPadding?: boolean;
   /** @title Выравнивать по центру  */
   isAlignCenter?: boolean;
+  /** @title отображение кнопок-стрелок*/
+  showArrows?: boolean;
+  /** @title отсупы между карточками*/
+  isGap?: boolean;
 };

package/src/components/Carousel/CarouselScrollButtons.tsx

@@ -4,7 +4,7 @@ import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowBu
 import { SwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
 
-interface CarouselScrollButtonsProps {
+export interface CarouselScrollButtonsProps {
   scroll: SwipeListScroll;
   arrowsPadded: boolean;
   isBlur: boolean;

package/src/components/Carousel/itemsGap.ts

@@ -1 +1 @@
-export const ITEMS_GAP = 4;
+export const ITEMS_GAP = 16;

package/src/components/Carousel/renderControlButtons.tsx

@@ -0,0 +1,24 @@
+import { CarouselScrollButtons, CarouselScrollButtonsProps } from './CarouselScrollButtons';
+import {
+  SwipeListControlDots,
+  SwipeListControlDotsProps,
+} from '../../ui-kit/SwipeListControl/SwipeListControlDots';
+
+interface renderControlButtonsProps {
+  showArrows: boolean;
+  showDots: boolean;
+  scrollButtonsProps: CarouselScrollButtonsProps;
+  dotsProps: SwipeListControlDotsProps;
+}
+
+export const renderControlButtons = ({
+  showArrows,
+  showDots,
+  scrollButtonsProps,
+  dotsProps,
+}: renderControlButtonsProps) => {
+  return [
+    showArrows ? <CarouselScrollButtons key="0" {...scrollButtonsProps} /> : null,
+    showDots ? <SwipeListControlDots key="1" {...dotsProps} listType="horizontal-list" /> : null,
+  ];
+};