@redneckz/wildless-cms-uni-blocks 0.10.6 → 0.10.7

package/src/components/Calculator/renderRegistrationType.tsx

@@ -1,51 +1,13 @@
-import { ListOrientation } from '../../model/ListOrientation';
-import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
-import { Text } from '../../ui-kit/Text/Text';
-
-const REMOTE_REGISTRATION = 'remote';
-const OFFICE_REGISTRATION = 'office';
-
-const registrationTypeItems = [
-  {
-    id: OFFICE_REGISTRATION,
-    text: 'Офис Банка',
-  },
-  {
-    id: REMOTE_REGISTRATION,
-    text: 'Дистанционно',
-  },
-];
-
-interface RegistrationTypeProps {
-  isRemoteRegistration: boolean;
-  callback?: (value: boolean) => void;
-  title?: string;
-  orientation?: ListOrientation;
-}
-
-export function renderRegistrationType({
-  isRemoteRegistration,
-  callback,
-  title,
-  orientation = 'horizontal',
-}: RegistrationTypeProps) {
-  return (
-    <div>
-      {title ? (
-        <div className="mb-3">
-          <Text color="text-secondary-text" font="font-light">
-            {title}
-          </Text>
-        </div>
-      ) : null}
-      <div>
-        <RadioButtonGroup
-          orientation={orientation}
-          items={registrationTypeItems}
-          checkedItem={isRemoteRegistration ? REMOTE_REGISTRATION : OFFICE_REGISTRATION}
-          onChange={(text: string) => callback && callback(text === REMOTE_REGISTRATION)}
-        />
-      </div>
-    </div>
-  );
-}
+import {
+  BinaryRadioButtonGroupProps,
+  renderBinaryRadioButtonGroup,
+} from './renderBinaryRadioButtonGroup';
+
+export const renderRegistrationType = (props: Partial<BinaryRadioButtonGroupProps>) =>
+  renderBinaryRadioButtonGroup({
+    ...props,
+    items: [
+      { id: 'remote', text: 'Дистанционно' },
+      { id: 'office', text: 'Офис Банка' },
+    ],
+  });

package/src/components/Calculator/renderWantedSumInput.tsx

@@ -1,39 +1,22 @@
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import { clamp } from '../../utils/clamp';
 
 const DEFAULT_MONEY_STEP = 1000;
 
-interface RenderWantedSumParams {
-  minSum: number;
-  maxSum: number;
-  moneyValue: number;
-  className?: string;
-  step?: number;
+interface RenderWantedSumParams extends InputRangeProps {
   isShowItems?: boolean;
 }
 
-export function renderWantedSumInput(
-  title: string,
-  params: RenderWantedSumParams,
-  callback?: (value: number) => void,
-) {
-  const { moneyValue, minSum, maxSum, step = DEFAULT_MONEY_STEP, isShowItems = true } = params;
-
+export function renderWantedSumInput({
+  isShowItems = true,
+  step = DEFAULT_MONEY_STEP,
+  ...rest
+}: RenderWantedSumParams) {
   const items = [
-    `От ${addSpacesBetweenNumbers(minSum)} ₽`,
-    `До ${addSpacesBetweenNumbers(maxSum)} ₽`,
+    `От ${addSpacesBetweenNumbers(rest.min || 0)} ₽`,
+    `До ${addSpacesBetweenNumbers(rest.max || 0)} ₽`,
   ];
 
-  return (
-    <InputRange
-      title={title}
-      items={isShowItems ? items : []}
-      min={minSum}
-      max={maxSum}
-      step={step}
-      value={clamp(moneyValue, minSum, maxSum)}
-      onChange={callback}
-    />
-  );
+  return <InputRange items={isShowItems ? items : []} step={step} {...rest} />;
 }

package/src/components/Calculator/useDepositCalculatorParams.ts

@@ -45,7 +45,7 @@ export const useDepositCalculatorParams = (
   const data = useCalculatorParams<DepositCalculatorData>(
     sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR,
   );
-  const defaultMonth = data?.rateRows[0]
+  const defaultMonth = data?.rateRows?.[0]
     ? getMiddleMonth(data.rateRows[0].minMonths, data.rateRows[0].maxMonths)
     : 1;
   const isExcludeMonthlyInterestPayment = !paramsViewSettings?.isShowMonthlyInterestPayment;

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

@@ -0,0 +1,93 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import '../../setup-fixture';
+import { Blocks } from '../Blocks';
+import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
+import { Carousel } from './Carousel';
+
+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} />
+    </div>
+  ),
+  'arrowsPadded with cyclic': (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        block={carouselBlock}
+        options={options}
+        arrowsPadded={false}
+        isCyclic={true}
+      />
+    </div>
+  ),
+
+  'no-blur with cyclic': (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        isBlur={false}
+        isCyclic={true}
+        block={carouselBlock}
+        options={options}
+      />
+    </div>
+  ),
+  'one visible cards with dots': (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={1}
+        showDots={true}
+        block={carouselBlock}
+        options={options}
+      />
+    </div>
+  ),
+  'only one cards align center': (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        block={{
+          type: 'Carousel',
+          blocks: new Array(1)
+            .fill({
+              type: 'CarouselTariffsCard',
+              content: TARIFFS_CARD,
+            })
+            .map((_, i) => (i === 1 ? { ..._, content: TARIFFS_CARD_HIT } : _)),
+        }}
+        options={options}
+        isAlignCenter={true}
+      />
+    </div>
+  ),
+
+  tariffs: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={0}
+        isBlur={true}
+        isCyclic={false}
+        isAlignCenter={true}
+        block={carouselBlock}
+        options={options}
+      />
+    </div>
+  ),
+};

package/src/components/Carousel/Carousel.tsx

@@ -10,14 +10,13 @@ import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListSc
 import { style } from '../../utils/style';
 import type { CarouselContent } from './CarouselContent';
 import { CarouselScrollButtons } from './CarouselScrollButtons';
+import { ITEMS_GAP } from './itemsGap';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
   showDots?: boolean;
 }
 
-const ITEMS_GAP = 4;
-
 export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({
     className = '',
@@ -83,7 +82,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             activeIndex={activeIndex}
             itemCount={count}
           />
-          {showDots ? renderDots(containerRef, dotsActiveIndex, itemCount) : null}
+          {showDots ? renderDots(containerRef, dotsActiveIndex, count) : null}
         </div>
       </BlockWrapper>
     );

package/src/components/Carousel/itemsGap.mobile.ts

@@ -0,0 +1 @@
+export const ITEMS_GAP = 16;

package/src/components/Carousel/itemsGap.ts

@@ -0,0 +1 @@
+export const ITEMS_GAP = 4;

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

@@ -0,0 +1,74 @@
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { CarouselTariffsCard } from './CarouselTariffsCard';
+import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+
+const imageMonth: Picture = {
+  src: 'monthly-payment.png',
+  format: 'webp',
+  size: {
+    width: 190,
+    height: 54,
+  },
+  title: 'money',
+};
+
+const button: ButtonProps = {
+  href: '/',
+  text: 'Открыть расчетный счет',
+  target: '_blank',
+  version: 'primary',
+};
+
+const buttonSecondary: ButtonProps = {
+  href: '/',
+  text: 'Открыть расчетный счет',
+  target: '_blank',
+  version: 'secondary',
+};
+
+const buttonIcon: ButtonWithIconProps = {
+  text: 'App Store',
+  icon: { icon: 'DocIconMonoColor', iconVersion: 'color' },
+  href: 'rshb.ru',
+  version: 'link',
+};
+
+const cardCells = [
+  { title: 'Открытие расчетного счета', description: 'Бесплатно' },
+  { title: 'Внутрибанковские платежи', description: '0 ₽' },
+  { title: 'Внешние платежи, до 10 шт.', description: '0 ₽' },
+  { title: 'От 11 платежей', description: '50 ₽/шт.' },
+  {
+    title: 'Внесение наличных',
+    description: '0% - до 100 000 ₽/мес., далее согласно п.2.4. Тарифов Банка',
+  },
+  { title: 'Зарплатный проект', description: 'Бесплатно' },
+  { buttons: [buttonIcon] },
+];
+
+export const TARIFFS_CARD: CarouselTariffsCardContent = {
+  title: 'Расчётный эконом',
+  icon: imageMonth,
+  button: buttonSecondary,
+  cardCells,
+};
+
+export const TARIFFS_CARD_HIT: CarouselTariffsCardContent = {
+  icon: imageMonth,
+  title: 'Расчётный эконом',
+  button,
+  cardCells,
+  isHighlighting: true,
+};
+
+const CAROUSEL_TARIFFS_CARD = <CarouselTariffsCard className="col-span-12" {...TARIFFS_CARD} />;
+
+const CAROUSEL_TARIFFS_CARD_HIT = (
+  <CarouselTariffsCard className="col-span-12" {...TARIFFS_CARD_HIT} />
+);
+
+export default {
+  default: <div className="container grid grid-cols-12">{CAROUSEL_TARIFFS_CARD}</div>,
+  hit: <div className="container grid grid-cols-12">{CAROUSEL_TARIFFS_CARD_HIT}</div>,
+};

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -4,7 +4,6 @@ import type { Picture } from '../../model/Picture';
 import type { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
@@ -13,17 +12,16 @@ import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { style } from '../../utils/style';
-import type {
-  CarouselTariffsCardContent,
-  TariffsCardCellProps,
-} from './CarouselTariffsCardContent';
+import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import { getPaddingStyle } from './getPaddingStyle';
+import { renderCardInfo } from './renderCardInfo';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
 const VISIBLE_CELLS_COUNT = 1;
 
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
-  ({ className = '', title, icon, isHighlighting, button, cardCells = [], ...rest }) => {
+  ({ className = '', title, icon, isHighlighting = false, button, cardCells = [], ...rest }) => {
     const cellsNode = cardCells.map(renderCardInfo);
     const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
     const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
@@ -31,8 +29,8 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     return (
       <BlockWrapper
         className={style(
-          'relative border border-gray p-8 flex flex-col',
-          getHitStyle(isHighlighting),
+          'relative border border-gray flex flex-col',
+          getPaddingStyle(isHighlighting),
           className,
         )}
         {...rest}
@@ -59,14 +57,10 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
 const renderIconBlock = (icon?: Picture) => (
   <div className="w-[267px] min-w-[267px] self-center">
-    {icon?.src ? <Img image={icon} /> : null}
-    {icon?.icon ? <Img image={icon} /> : null}
+    {icon?.src || icon?.icon ? <Img image={icon} /> : null}
   </div>
 );
 
-const getHitStyle = (isHighlighting?: boolean): string =>
-  isHighlighting ? 'mt-8 pt-20' : 'mt-20 pt-8';
-
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button
     className="w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center"
@@ -82,24 +76,6 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
   </button>
 );
 
-const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode => {
-  const { title, description, buttons } = cell;
-
-  return (
-    <div key={String(i)} className="py-5 border-b border-main-divider">
-      {title ? (
-        <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
-      ) : null}
-      {description ? (
-        <div className="text-primary-text text-h6 mt-1">{cell.description}</div>
-      ) : null}
-      {buttons?.length ? (
-        <div className="text-primary-main">{renderButtonsSection(buttons)}</div>
-      ) : null}
-    </div>
-  );
-};
-
 const renderHitIcon = (): VNode => (
   <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
     <Icon iconVersion="black" name="HeartIcon" width="23" height="22" />

package/src/components/CarouselTariffsCard/descriptionSize.mobile.tsx

@@ -0,0 +1 @@
+export const descriptionSize = 'text-l';

package/src/components/CarouselTariffsCard/descriptionSize.tsx

@@ -0,0 +1 @@
+export const descriptionSize = 'text-h6';

package/src/components/CarouselTariffsCard/getPaddingStyle.mobile.tsx

@@ -0,0 +1,2 @@
+export const getPaddingStyle = (isHighlighting?: boolean): string =>
+  isHighlighting ? 'p-default mt-6' : 'p-default mt-6';

package/src/components/CarouselTariffsCard/getPaddingStyle.tsx

@@ -0,0 +1,2 @@
+export const getPaddingStyle = (isHighlighting?: boolean) =>
+  isHighlighting ? 'p-8 mt-8 pt-20' : 'p-8 mt-20';

package/src/components/CarouselTariffsCard/renderCardInfo.tsx

@@ -0,0 +1,31 @@
+import { VNode } from '../../model/VNode';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { Text } from '../../ui-kit/Text/Text';
+import { TariffsCardCellProps } from './CarouselTariffsCardContent';
+import { descriptionSize } from './descriptionSize';
+
+export const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode => {
+  const { title, description, buttons } = cell;
+
+  return (
+    <div key={String(i)} className="py-5 border-b border-main-divider">
+      {title ? (
+        <div className="opacity-80">
+          <Text size="text-m" color="text-secondary-text">
+            {title}
+          </Text>
+        </div>
+      ) : null}
+      {description ? (
+        <div className="mt-1">
+          <Text size={descriptionSize} color="text-primary-text">
+            {description}
+          </Text>
+        </div>
+      ) : null}
+      {buttons?.length ? (
+        <div className="text-primary-main">{renderButtonsSection(buttons)}</div>
+      ) : null}
+    </div>
+  );
+};

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

@@ -0,0 +1,95 @@
+import type { FC } from 'react';
+import '../../setup-fixture';
+
+import { Headline } from './Headline';
+import type { HeadlineContent } from './HeadlineContent';
+
+export const HEADLINE: HeadlineContent = {
+  title: 'Своя кредитная карта мобильная версия',
+  description: 'Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.',
+  align: 'text-left',
+};
+
+const Wrapper: FC = ({ children }) => (
+  <div className="container grid grid-cols-12 group" data-ver="primary">
+    {children}
+  </div>
+);
+
+export default {
+  default: (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" />
+    </Wrapper>
+  ),
+  'default left alignment': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" align="text-left" />
+    </Wrapper>
+  ),
+  'default right alignment': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" align="text-right" />
+    </Wrapper>
+  ),
+  'default difficult XXL': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" headlineVersion="XXL" />
+    </Wrapper>
+  ),
+  'default difficult XL': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" headlineVersion="XL" />
+    </Wrapper>
+  ),
+  'default difficult L': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" headlineVersion="L" />
+    </Wrapper>
+  ),
+  'default difficult M': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" headlineVersion="M" />
+    </Wrapper>
+  ),
+  'default difficult S': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" headlineVersion="S" />
+    </Wrapper>
+  ),
+  'default difficult XS': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" headlineVersion="XS" />
+    </Wrapper>
+  ),
+  'primary left alignment': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" align="text-left" />
+    </Wrapper>
+  ),
+  'primary center alignment': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" />
+    </Wrapper>
+  ),
+  'primary right alignment': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" align="text-right" />
+    </Wrapper>
+  ),
+  'secondary left alignment': (
+    <Wrapper>
+      <Headline className="col-span-12" version="secondary" {...HEADLINE} align="text-left" />
+    </Wrapper>
+  ),
+  'secondary center alignment': (
+    <Wrapper>
+      <Headline className="col-span-12" version="secondary" {...HEADLINE} />
+    </Wrapper>
+  ),
+  'secondary right alignment': (
+    <Wrapper>
+      <Headline className="col-span-12" version="secondary" {...HEADLINE} align="text-right" />
+    </Wrapper>
+  ),
+};

package/src/components/Headline/Headline.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import type { TextSize } from '../../ui-kit/Text/TextProps';
 import { style } from '../../utils/style';
-import type { HeadlineContent } from './HeadlineContent';
 import { headlineVersionStyles } from './headlineVersionStyles';
+import type { TextSize } from '../../ui-kit/Text/TextProps';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
@@ -25,10 +25,11 @@ export const Headline = JSX<HeadlineProps>(
   }) => {
     const versionStyle = headlineVersionStyles[headlineVersion];
     const paddingStyle = isPadding ? 'p-default' : '';
+    const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
 
     return (
       <BlockWrapper
-        className={style('flex flex-col', paddingStyle, versionStyle.wrapper, className)}
+        className={style(paddingStyle, className)}
         version={version}
         isTheme={isTheme}
         {...rest}
@@ -42,7 +43,11 @@ export const Headline = JSX<HeadlineProps>(
           />
         ) : null}
         {description ? (
-          <Paragraph size={versionStyle.descriptionSize as TextSize} align={align}>
+          <Paragraph
+            size={versionStyle.descriptionSize as TextSize}
+            align={align}
+            {...descriptionStyle}
+          >
             {description}
           </Paragraph>
         ) : null}

package/src/components/Headline/headlineVersionStyles.ts

@@ -5,40 +5,40 @@ import type { TextSize, TitleSize } from '../../ui-kit/Text/TextProps';
 export const headlineVersionStyles: Record<
   HeadlineVersion,
   {
-    wrapper: string;
     title: HeadingCommonProps;
     descriptionSize: TextSize | TitleSize;
+    descriptionStyle: string;
   }
 > = {
   XXL: {
-    wrapper: 'gap-[18px]',
     title: { headingType: 'h0', as: 'h1' },
     descriptionSize: 'text-h5',
+    descriptionStyle: 'mt-5',
   },
   XL: {
-    wrapper: 'gap-4',
     title: { headingType: 'h1', as: 'h1' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-4',
   },
   L: {
-    wrapper: 'gap-4',
     title: { headingType: 'h2', as: 'h2' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-4',
   },
   M: {
-    wrapper: 'gap-3',
     title: { headingType: 'h3', as: 'h3' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-3',
   },
   S: {
-    wrapper: 'gap-2',
     title: { headingType: 'h4', as: 'h4' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-2',
   },
   XS: {
-    wrapper: 'gap-2',
     title: { headingType: 'h5', as: 'h5' },
     descriptionSize: 'text-l-light',
+    descriptionStyle: 'mt-2',
   },
 };