@redneckz/wildless-cms-uni-blocks 0.3.69 → 0.3.71

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -0,0 +1,84 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
+import { InsuranceAmountBlockInner } from './InsuranceAmountBlockInner';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Button } from '../../ui-kit/Button/Button';
+
+export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent, UniBlockProps {}
+
+export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
+  ({ className = '', context, title, insuranceTabs = [], button, anchor = null }) => {
+    const insuranceGalleries = insuranceTabs.map((_) => _.cards);
+    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+
+    return (
+      <section
+        id={anchor}
+        className={`box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white ${className}`}
+      >
+        {title ? <Heading className="text-center" title={title} headingType="h3" /> : null}
+        <div className="p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]">
+          {insuranceTabs.map((item, i) =>
+            renderNavButton({
+              title: item?.title,
+              i,
+              activeSlideIndex,
+              onClick: () => setActiveSlideIndex(i),
+            }),
+          )}
+        </div>
+        <div
+          className="flex"
+          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          role="list"
+        >
+          {renderInsuranceGalleries({
+            context,
+            className,
+            insuranceGalleries,
+          })}
+        </div>
+        {button?.text ? (
+          <div className="flex justify-center">
+            <Button
+              className="box-border p-4 h-14 w-full max-w-[240px]"
+              version={button?.version || 'primary'}
+              href={button.href}
+            >
+              {button.text}
+            </Button>
+          </div>
+        ) : null}
+      </section>
+    );
+  },
+);
+
+const renderInsuranceGalleries = ({ insuranceGalleries, context, className }: any) => {
+  return insuranceGalleries?.length
+    ? insuranceGalleries.map((cards) => (
+        <InsuranceAmountBlockInner context={context} className={className} cards={cards} />
+      ))
+    : null;
+};
+
+function renderNavButton({ title, i, activeSlideIndex, onClick }) {
+  const isActiveBtn = i === activeSlideIndex;
+
+  const btnClassName = isActiveBtn
+    ? 'bg-primary-main text-white rounded-md'
+    : `text-secondary-text`;
+
+  return (
+    <button
+      type="button"
+      key={String(i)}
+      onClick={onClick}
+      aria-label={title}
+      className={`box-border px-4 py-3 text-m-md ${btnClassName}`}
+    >
+      {title}
+    </button>
+  );
+}

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockContent.ts

@@ -0,0 +1,33 @@
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { InsuranceProps } from '../../model/Insurance';
+
+/**
+ * @title Кнопка выбора программы
+ */
+export type cardItem = InsuranceProps & {
+  icon?: Picture;
+  /** @title Страховой взнос */
+  fee?: number;
+};
+
+/**
+ * @title Вкладка
+ */
+export interface InsuranceAmountBlockTabs {
+  /** @title Заголовок вкладки */
+  title?: string;
+  /** @title Содержимое вкладки */
+  cards?: cardItem[];
+}
+
+/**
+ * @title Страховые суммы
+ */
+export interface InsuranceAmountBlockContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Список вкладок */
+  insuranceTabs?: InsuranceAmountBlockTabs[];
+  button?: ButtonProps;
+}

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -0,0 +1,147 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps, FuncReturnVoid } from '../../types';
+import type { InsuranceAmountBlockTabs, cardItem } from './InsuranceAmountBlockContent';
+import { Img } from '../../ui-kit/Img/Img';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
+
+export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs, UniBlockProps {}
+
+type InsuranceGalleryProps = {
+  tabsShift: number;
+  cards: cardItem[];
+  activeSlideIndex: number;
+  isLastShift: boolean;
+  setActiveSlideIndex: FuncReturnVoid<number>;
+};
+
+type InsuranceSlideProps = {
+  slide: cardItem;
+  i: number;
+  activeSlideIndex: number;
+  onClick: FuncReturnVoid<MouseEvent>;
+};
+
+export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
+  ({ className = '', context, cards = [], anchor = null }) => {
+    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+    const [tabsShift, setTabsShift] = context.useState(0);
+
+    const handleNextClick = () => setTabsShift(tabsShift + 1);
+    const handlePrevClick = () => setTabsShift(tabsShift - 1);
+
+    const galleryLength = cards?.length;
+
+    const isGalleryScrollAvailable = cards?.length > 2;
+    const showNextButton = isGalleryScrollAvailable && galleryLength > tabsShift + 2;
+    const isLastShift = galleryLength === tabsShift + 2;
+    const showPrevButton = tabsShift > 0;
+
+    return (
+      <section id={anchor} className={`min-w-full ${className}`}>
+        <div className="relative mt-7 overflow-hidden">
+          {galleryLength > 1
+            ? renderGallery({
+                tabsShift,
+                cards,
+                activeSlideIndex,
+                isLastShift,
+                setActiveSlideIndex,
+              })
+            : null}
+          {renderArrows({
+            handler: [handlePrevClick, handleNextClick],
+            isShown: [showPrevButton, showNextButton],
+            btnClass: ['left-[50px]', 'right-[50px]'],
+            className: 'top-[62px]',
+          })}
+          {showPrevButton ? (
+            <div className="absolute top-0 left-0 h-full w-[136px] bg-opacity-from-white" />
+          ) : null}
+          {showNextButton ? (
+            <div className="absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" />
+          ) : null}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderGallery({
+  tabsShift,
+  cards,
+  activeSlideIndex,
+  isLastShift,
+  setActiveSlideIndex,
+}: InsuranceGalleryProps) {
+  const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
+  return (
+    <div
+      style={{ transform: `translateX(-${tabsShiftWidth}px)` }}
+      className="duration-1000 px-[50px]"
+    >
+      <div className="w-full flex flex-nowrap gap-3.5 pb-[38px]">
+        {cards.map((slide, i) =>
+          renderSlide({
+            slide,
+            i,
+            activeSlideIndex,
+            onClick: () => setActiveSlideIndex(i),
+          }),
+        )}
+      </div>
+    </div>
+  );
+}
+
+function renderSlide({ slide, i, activeSlideIndex, onClick }: InsuranceSlideProps) {
+  const isActiveBtn = i === activeSlideIndex;
+
+  const btnClassName = isActiveBtn
+    ? 'shadow-dark-blue/42 border-primary-main'
+    : `ease-in duration-300 border-main-stroke`;
+
+  return (
+    <button
+      type="button"
+      key={String(i)}
+      onClick={onClick}
+      className={`p-[30px] min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`}
+    >
+      {slide?.icon ? (
+        <Img
+          className={`h-[108px] w-[108px] p-3 rounded-full bg-secondary-light mr-[30px]`}
+          image={slide.icon}
+          width="24"
+          height="24"
+        />
+      ) : null}
+
+      <div className="flex gap-3.5">
+        {slide?.sum ? renderValueBlock('страховая сумма', slide.sum) : null}
+        {slide?.fee ? renderValueBlock('страховой взнос', slide.fee) : null}
+      </div>
+      {renderDoneIcon(isActiveBtn)}
+    </button>
+  );
+}
+
+function renderValueBlock(title, sum) {
+  return (
+    <div className="flex flex-col text-left">
+      <span className="whitespace-pre text-title-2xs">{addSpacesBetweenNumbers(sum)} ₽</span>
+      <span className="whitespace-pre text-secondary-text font-light text-base mt-1">{title}</span>
+    </div>
+  );
+}
+
+function renderDoneIcon(isActive) {
+  return isActive ? (
+    <Img
+      className={`h-[24px] w-[24px] min-w-[24px] min-h-[24px] absolute right-4 top-4`}
+      image="DoneIcon"
+      width="24"
+      height="24"
+    />
+  ) : null;
+}

package/src/components/LikeControl/LikeControl.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { LikeControl } from './LikeControl';
 

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

@@ -1,6 +1,6 @@
-import { mobileContext } from '../../setup-fixture';
-import { linkDocsContentExample } from './linkDocsContentExample';
+import { mobileContext } from '../../react/setup-fixture';
 import { LinkDocs } from './LinkDocs';
+import { linkDocsContentExample } from './linkDocsContentExample';
 
 export default {
   'vertical (default)': (

package/src/components/LinkDocs/LinkDocs.fixture.tsx

@@ -1,6 +1,6 @@
-import { context } from '../../setup-fixture';
-import { linkDocsContentExample } from './linkDocsContentExample';
+import { context } from '../../react/setup-fixture';
 import { LinkDocs } from './LinkDocs';
+import { linkDocsContentExample } from './linkDocsContentExample';
 
 export default {
   'two columns (default)': (

package/src/components/LinkDocs/LinkDocsListItemBase.tsx

@@ -44,7 +44,9 @@ const formatSuffix = (ext?: string, fileSize?: string) => {
 };
 
 const getExtFromHref = (href: string) => {
-  if (!href) return '';
+  if (!href) {
+    return '';
+  }
 
   const index = href.lastIndexOf('.');
   return index !== -1 ? href.substring(index + 1) : '';

package/src/components/LinkList/LinkList.fixture.tsx

@@ -1,4 +1,4 @@
-import { mobileContext } from '../../setup-fixture';
+import { mobileContext } from '../../react/setup-fixture';
 import { LinkList } from './LinkList';
 import { linkDocsContentExample } from './linkListContentExample';
 

package/src/components/MiniGallery/MiniGallery.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { MiniGallery, MiniGalleryProps } from './MiniGallery';
 
 const image: Picture = {

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

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { MobileAppTile as MobileAppTileMobile } from './MobileAppTile.mobile';
 

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { MobileAppTile } from './MobileAppTile';
 

package/src/components/Navigation/Navigation.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { Navigation } from './Navigation';
 

package/src/components/NavigatorTabs/NavigatorTabs.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { NavigatorTabs } from './NavigatorTabs';
 import tabsExample from './NavigatorTabs.example.json';
 import type { NavigatorTabsContent } from './NavigatorTabsContent';

package/src/components/OtherProducts/OtherProducts.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
 import { HEADLINE } from '../Headline/Headline.fixture';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';

package/src/components/PictureText/PictureText.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import type { Picture } from '../../model/Picture';
 import { PictureText } from './PictureText';

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

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { Placeholder } from './Placeholder';
 

package/src/components/Placeholder/Placeholder.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { Placeholder } from './Placeholder';
 

package/src/components/Placeholder/Placeholder.tsx

@@ -50,8 +50,12 @@ const renderShimmer = (size = 3) =>
     .map((_) => Math.floor(_))
     .map(renderShimmerItem);
 
-const renderShimmerItem = (width = 100, index: number) => (
-  <div key={String(index)} style={{ width: `${width}%` }} className="h-4 mt-2 bg-secondary-light" />
+const renderShimmerItem = (width: number, index: number) => (
+  <div
+    key={String(index)}
+    style={{ width: `${width || 100}%` }}
+    className="h-4 mt-2 bg-secondary-light"
+  />
 );
 
 const goldenSequence = (first: number, size: number): number[] =>

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

@@ -16,11 +16,7 @@
     "alt": "",
     "title": ""
   },
-  "items": [
-    "Элемент списка 1",
-    "Элемент списка 2",
-    "Элемент списка 3"
-  ],
+  "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
   "isDotted": true,
   "buttons": [
     {

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

@@ -1,8 +1,8 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
-import { ProductBlock } from './ProductBlock';
+import { context } from '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import { ProductBlock } from './ProductBlock';
 
 const title = 'Кредит до 5 000 000 Р\nбез залога и поручителей';
 const description =

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

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 import { ProductBlock } from './ProductBlock';
@@ -77,7 +77,7 @@ export const PRODUCT_BLOCK: ProductBlockContent = {
 };
 
 export default {
-  default: (
+  'primary with back button': (
     <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
@@ -90,7 +90,10 @@ export default {
         buttons={buttons}
         image={image}
       />
-
+    </div>
+  ),
+  'primary with color benefits': (
+    <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
@@ -102,8 +105,20 @@ export default {
         buttons={buttons}
         image={image}
       />
+    </div>
+  ),
+  'primary with list': (
+    <div className="container grid grid-cols-12">
       <ProductBlock className="col-span-12" context={context} {...PRODUCT_BLOCK} image={image} />
+    </div>
+  ),
+  'primary without image': (
+    <div className="container grid grid-cols-12">
       <ProductBlock className="col-span-12" context={context} {...PRODUCT_BLOCK} />
+    </div>
+  ),
+  'primary with default benefits': (
+    <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
@@ -115,7 +130,7 @@ export default {
       />
     </div>
   ),
-  secondary: (
+  'secondary with back button': (
     <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
@@ -129,7 +144,10 @@ export default {
         image={image}
         version="secondary"
       />
-
+    </div>
+  ),
+  'secondary with benefits': (
+    <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
@@ -142,6 +160,10 @@ export default {
         image={image}
         version="secondary"
       />
+    </div>
+  ),
+  'secondary with list': (
+    <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
@@ -149,12 +171,20 @@ export default {
         image={image}
         version="secondary"
       />
+    </div>
+  ),
+  'secondary without image': (
+    <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
         {...PRODUCT_BLOCK}
         version="secondary"
       />
+    </div>
+  ),
+  'secondary without back button': (
+    <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}

package/src/components/ProductBlock/ProductBlockInner.mobile.tsx

@@ -56,7 +56,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             {description ? (
               <Description className="mt-3 text-m-md" description={description} />
             ) : null}
-            {benefits?.filter((items) => items.label)?.length ? (
+            {benefits?.filter((_) => _.label)?.length ? (
               <div className="mt-3">
                 {benefits.map((benefit, i) =>
                   renderBenefit({ benefit, version, benefitsVersion }, i),

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -42,7 +42,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
                 description={description}
               />
             ) : null}
-            {benefits?.filter((items) => items.label)?.length ? (
+            {benefits?.filter((_) => _.label)?.length ? (
               <div className="flex gap-6 mt-6">
                 {benefits.map((benefit, i) =>
                   renderBenefit({ benefit, version, benefitsVersion }, i),

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

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { ProductGallery } from './ProductGallery';
 
 const moneyImage: Picture = {

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -1,7 +1,7 @@
-import { context } from '../../setup-fixture';
-import { ProductGallery } from './ProductGallery';
 import type { Picture } from '../../model/Picture';
+import { context } from '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { ProductGallery } from './ProductGallery';
 
 const percentImage: Picture = {
   src: '3-6-percent.png',

package/src/components/ProductTile/ProductTile.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import type { Picture } from '../../model/Picture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';

package/src/components/ProductTile/ProductTile.tsx

@@ -61,7 +61,7 @@ export const ProductTile = JSX<ProductTileProps>(
           {description ? (
             <Description className="mt-4 max-w-[600px]" description={description} />
           ) : null}
-          {renderBenefits(benefits, version)}
+          {renderBenefits(benefits || [], version)}
 
           {additionalDescription
             ? renderAdditionalDescription(additionalDescription, version)
@@ -72,7 +72,7 @@ export const ProductTile = JSX<ProductTileProps>(
   },
 );
 
-function renderBenefits(benefits: TextBenefit[] = [], version: BlockVersion) {
+function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
   return (
     <div className="flex mt-5 mb-1">
       {benefits.length ? <div className="mr-8">{benefits.map(renderBenefitLabel)}</div> : null}

package/src/components/PromoTile/PromoTile.fixture.tsx

@@ -1,6 +1,6 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
+import { getCurrentDate } from '../../utils/getCurrentDate';
 import { PromoTile } from './PromoTile';
-import { getCurrentDate } from '../../utils/getCurrentDate'
 
 export default {
   default: (

package/src/components/Recommendation/Recommendation.fixture.tsx

@@ -1,6 +1,6 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { Recommendation, RecommendationProps } from './Recommendation';
 
 const creditCard: Picture = {
@@ -66,18 +66,23 @@ export const defaultProps: RecommendationProps = {
 
 export default {
   default: (
-    <div>
-      <div className="container grid grid-cols-12" data-theme="pc">
-        <Recommendation className="col-span-12 mb-1" {...defaultProps} version="secondary" />
-      </div>
-
-      <div className="container grid grid-cols-12" data-theme="bc">
-        <Recommendation className="col-span-12 mb-1" {...defaultProps} version="secondary" />
-      </div>
-
-      <div className="container grid grid-cols-12 mb-1">
-        <Recommendation className="col-span-12" {...defaultProps} />
-      </div>
+    <div className="container grid grid-cols-12 mb-1">
+      <Recommendation className="col-span-12" {...defaultProps} />
+    </div>
+  ),
+  'secondary private clients': (
+    <div className="container grid grid-cols-12" data-theme="pc">
+      <Recommendation className="col-span-12" {...defaultProps} version="secondary" />
+    </div>
+  ),
+  'secondary business clients': (
+    <div className="container grid grid-cols-12" data-theme="bc">
+      <Recommendation className="col-span-12" {...defaultProps} version="secondary" />
+    </div>
+  ),
+  'secondary ecosystem own': (
+    <div className="container grid grid-cols-12" data-theme="eo">
+      <Recommendation className="col-span-12" {...defaultProps} version="secondary" />
     </div>
   ),
 };