@redneckz/wildless-cms-uni-blocks 0.9.8 → 0.9.10

package/src/components/Recommendation/Recommendation.example.json

@@ -1,61 +0,0 @@
-{
-  "content": {
-    "title": "Блок рекомендаций",
-    "recommendations": [
-      {
-        "image": {
-          "format": "webp",
-          "size": {
-            "width": 180,
-            "height": 180
-          }
-        },
-        "title": "Заголовок 1",
-        "description": "Описание 1",
-        "socialMedia": [
-          { "href": "https://t.me" },
-          { "href": "https://vk.com" },
-          { "href": "https://ok.ru" }
-        ],
-        "button": {
-          "text": "",
-          "version": "secondary"
-        }
-      },
-      {
-        "image": {
-          "format": "webp",
-          "size": {
-            "width": 180,
-            "height": 180
-          }
-        },
-        "title": "Заголовок 2",
-        "description": "Описание 2",
-        "button": {
-          "href": "",
-          "text": "Подробнее",
-          "target": "_self",
-          "version": "primary"
-        }
-      },
-      {
-        "image": {
-          "format": "webp",
-          "size": {
-            "width": 180,
-            "height": 180
-          }
-        },
-        "title": "Заголовок 3",
-        "description": "Описание 3",
-        "socialMedia": [
-          { "href": "https://t.me" },
-          { "href": "https://vk.com" },
-          { "href": "https://ok.ru" }
-        ]
-      }
-    ],
-    "version": "primary"
-  }
-}

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

@@ -1,176 +0,0 @@
-import '../../setup-fixture';
-import { Recommendation, RecommendationProps } from './Recommendation';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { LinkProps } from '../../model/LinkProps';
-import type { Picture } from '../../model/Picture';
-
-const cowCard: Picture = {
-  src: 'cow-card.png',
-  format: 'webp',
-  size: {
-    width: 290,
-    height: 290,
-  },
-  title: 'cow-card',
-};
-
-const productBasket: Picture = {
-  src: 'product-basket.png',
-  format: 'webp',
-  size: {
-    width: 290,
-    height: 290,
-  },
-  title: 'product-basket',
-};
-
-const five: Picture = {
-  src: '5.svg',
-  format: 'webp',
-  size: {
-    width: 268,
-    height: 218,
-  },
-  title: 'five',
-};
-
-const card: Picture = {
-  src: '120.png',
-  format: 'webp',
-  size: {
-    width: 268,
-    height: 218,
-  },
-  title: '120',
-};
-
-const socialMedia: LinkProps[] = [
-  { href: 'https://t.me' },
-  { href: 'https://vk.com' },
-  { href: 'https://ok.ru' },
-];
-
-const button: ButtonWithIconProps = {
-  href: 'https://rshb.ru',
-  text: 'Подробнее',
-  target: '_blank',
-  version: 'secondary',
-};
-
-export const defaultProps: RecommendationProps = {
-  title: 'Мы в социальных сетях',
-  recommendations: [
-    {
-      title: 'РоссельхозБанк',
-      items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
-      image: cowCard,
-      socialMedia,
-    },
-    {
-      title: 'Своё Родное',
-      description: 'Льготный период 120 дней',
-      image: productBasket,
-      socialMedia,
-    },
-    {
-      title: 'Своё Фермерство',
-      description: 'Льготный период 120 дней',
-      image: cowCard,
-      socialMedia,
-    },
-    {
-      title: 'Кредитные карты',
-      description: 'Льготный период 120 дней',
-      image: productBasket,
-      button,
-    },
-    {
-      title: 'Кредитные карты',
-      description: 'Льготный период 120 дней',
-      image: cowCard,
-    },
-  ],
-};
-
-export const shortProps: RecommendationProps = {
-  title: 'Также интересуются',
-  recommendations: [
-    {
-      title: 'Кредиты',
-      items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
-      image: five,
-    },
-    {
-      title: 'Кредитная карта с длинным заголовком',
-      description: 'Льготный период 120 дней',
-      image: card,
-    },
-    {
-      title: 'Кредиты',
-      items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
-      image: five,
-    },
-    {
-      title: 'Кредитная карта с длинным заголовком',
-      description: 'Льготный период 120 дней',
-      image: card,
-    },
-  ],
-};
-
-export const buttonProps: RecommendationProps = {
-  title: 'Также интересуются',
-  recommendations: [
-    {
-      title: 'Кредиты',
-      items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
-      image: five,
-      button,
-    },
-    {
-      title: 'Кредитная карта с длинным заголовком',
-      description: 'Льготный период 120 дней',
-      image: card,
-      button,
-    },
-    {
-      title: 'Кредиты',
-      items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
-      image: five,
-      button,
-    },
-  ],
-};
-
-export default {
-  default: (
-    <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>
-  ),
-  'secondary private short': (
-    <div className="container grid grid-cols-12" data-theme="pc">
-      <Recommendation className="col-span-12" {...shortProps} version="secondary" />
-    </div>
-  ),
-  'with button': (
-    <div className="container grid grid-cols-12 mb-1">
-      <Recommendation className="col-span-12" {...buttonProps} />
-    </div>
-  ),
-};

package/src/components/Recommendation/Recommendation.tsx

@@ -1,66 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { useCarouselControls } from '../../hooks/useCarouselControls';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { RecommendationCard } from './RecommendationCard';
-import type { RecommendationContent } from './RecommendationContent';
-
-const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
-const CARD_VIEW_COUNT = 2;
-const CARD_SHIFT = 525;
-
-export interface RecommendationProps extends RecommendationContent, UniBlockProps {}
-
-export const Recommendation = JSX<RecommendationProps>(
-  ({ recommendations = [], className = '', title, version = 'primary', ...rest }) => {
-    const [activeIndex, controls] = useCarouselControls({
-      itemCount: recommendations.length,
-      visibleItemCount: CARD_VIEW_COUNT,
-    });
-
-    return (
-      <BlockWrapper
-        className={`relative font-sans p-9 overflow-hidden text-center ${className}`}
-        version={version}
-        {...rest}
-      >
-        {title ? <Heading headingType="h3" className="mb-6" title={title} /> : null}
-        <div>
-          <div
-            className="flex duration-1000 gap-3.5"
-            style={{ transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }}
-            role="list"
-          >
-            {recommendations.length
-              ? recommendations.map((card, i) => (
-                  <RecommendationCard
-                    key={String(i)}
-                    version={version}
-                    className="border-gray group-data-secondary:border-white/50"
-                    {...card}
-                  />
-                ))
-              : null}
-          </div>
-          {renderArrows({
-            ...controls,
-            btnClass: ['left-8', 'right-8'],
-            className: 'top-1/2 mt-3',
-          })}
-        </div>
-        <div
-          className={`${BLUR_BLOCK_CLASSES} left-0 ${
-            version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'
-          }`}
-        />
-        <div
-          className={`${BLUR_BLOCK_CLASSES} right-0 ${
-            version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'
-          }`}
-        />
-      </BlockWrapper>
-    );
-  },
-);

package/src/components/Recommendation/Recommendation.ui.json

@@ -1,19 +0,0 @@
-{
-  "content": {
-    "recommendations": {
-      "items": {
-        "image": {
-          "ui:field": "picture"
-        },
-        "button": {
-          "icon": {
-            "ui:field": "icon"
-          }, 
-          "iconRight": {
-            "ui:field": "icon"
-          }
-        }
-      }
-    }
-  }
-}

package/src/components/Recommendation/RecommendationCard.tsx

@@ -1,49 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
-import { List } from '../../ui-kit/List/List';
-import { BaseTile } from '../BaseTile/BaseTile';
-import { SocialMedia } from '../Footer/SocialMedia';
-import type { RecommendationCardTypes } from './RecommendationContent';
-
-export interface RecommendationCardProps extends RecommendationCardTypes, UniBlockProps {}
-
-export const RecommendationCard = JSX<RecommendationCardProps>(
-  ({ className = '', title, description, items, image, socialMedia, button, ...rest }) => {
-    const tileTitle = title ? (
-      <Heading headingType="h5" as="h3" className="mb-3.5 z-10" title={title} />
-    ) : null;
-    const tileImage = image?.src ? (
-      <Img className="absolute bottom-0 right-0 m-0" image={image} />
-    ) : null;
-
-    return (
-      <BlockWrapper
-        className={`relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`}
-        role="listitem"
-        {...rest}
-      >
-        <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}
-            {items?.length ? (
-              <List
-                className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
-                items={items}
-              />
-            ) : null}
-            {socialMedia ? <SocialMedia className="pt-10 pb-0" media={socialMedia} /> : null}
-            {button?.text ? (
-              <div className="pt-2">
-                {renderButtonsSection([button], { buttonClassName: 'mt-16 px-5' })}
-              </div>
-            ) : null}
-          </div>
-        </BaseTile>
-      </BlockWrapper>
-    );
-  },
-);

package/src/components/Recommendation/RecommendationContent.ts

@@ -1,27 +0,0 @@
-import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
-import type { UniBlockContent } from '../../model/JSXBlock';
-import type { LinkCommonProps } from '../../model/LinkProps';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
-import { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { ListContent } from '../../ui-kit/List/ListContent';
-
-/**
- * @title Карточка
- */
-export interface RecommendationCardTypes extends HeadlineCommonProps, ListContent, ImageContent {
-  /**
-   * @title Соц сети
-   * @minItems 3
-   */
-  socialMedia?: LinkCommonProps[];
-  button?: ButtonProps;
-}
-
-/**
- * @title Рекомендации
- */
-export type RecommendationContent = UniBlockContent &
-  TitleProps & {
-    /** @title Карточки */
-    recommendations?: RecommendationCardTypes[];
-  };