@redneckz/wildless-cms-uni-blocks 0.8.15 → 0.8.17

package/src/components/Gallery/Gallery.example.json

@@ -1,66 +0,0 @@
-{
-  "content": {
-    "title": "Галерея",
-    "description": "Описание",
-    "orientation": "horizontal",
-    "cards": [
-      {
-        "icon": {
-          "format": "webp",
-          "size": {
-            "width": 150,
-            "height": 150
-          }
-        },
-        "title": "Заголовок 1",
-        "description": "Описание 1",
-        "href": "/credit-cards",
-        "version": "primary",
-        "isDotted": true,
-        "items": [
-          { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
-          { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
-          { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
-        ]
-      },
-      {
-        "icon": {
-          "format": "webp",
-          "size": {
-            "width": 140,
-            "height": 140
-          }
-        },
-        "title": "Заголовок 2",
-        "description": "Описание 2",
-        "href": "/credit-cards",
-        "version": "primary",
-        "isDotted": true,
-        "items": [
-          { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
-          { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
-          { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
-        ]
-      },
-      {
-        "image": {
-          "format": "webp",
-          "size": {
-            "width": 140,
-            "height": 140
-          }
-        },
-        "title": "Заголовок 3",
-        "description": "Описание 3",
-        "href": "/credit-cards",
-        "version": "primary",
-        "isDotted": true,
-        "items": [
-          { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
-          { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
-          { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
-        ]
-      }
-    ]
-  }
-}

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

@@ -1,83 +0,0 @@
-import type { ListOrientation } from '../../model/ListOrientation';
-import type { Picture } from '../../model/Picture';
-import '../../setup-fixture';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import { Gallery } from './Gallery';
-import type { GalleryCardProps } from './GalleryContent';
-
-const isDotted = true;
-
-const image: Picture = {
-  src: 'money-1.png',
-  format: 'webp',
-  size: {
-    width: 150,
-    height: 150,
-  },
-  title: 'money',
-};
-
-const link: ButtonWithIconProps = {
-  href: '/credit-cards',
-  text: 'Подробнее',
-  target: '_blank',
-  version: 'link',
-};
-
-const defaultItems = [
-  { title: 'До 1 млн ₽', text: 'Кредитный лимит' },
-  { title: 'От 16,9%', text: 'Ставка по кредиту' },
-  { title: 'До 15% ', text: 'Кэшбэк от покупок' },
-];
-
-const cards: GalleryCardProps[] = [
-  {
-    icon: image,
-    title: 'Вклады в любой валюте',
-    description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
-    button: link,
-  },
-  {
-    icon: image,
-    title: 'Вклады в любой валюте',
-    description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
-    version: 'secondary',
-  },
-  {
-    icon: image,
-    title: 'Вклады в любой валюте',
-    isDotted,
-    items: defaultItems,
-  },
-  {
-    title: 'Вклады в любой валюте',
-    description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
-  },
-];
-
-const defaultProps = {
-  title: 'Вы можете оплатить бонусными баллами',
-  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  orientation: 'vertical' as ListOrientation,
-  cards: cards,
-};
-
-const scrollProps = {
-  title: 'Вы можете оплатить бонусными баллами',
-  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  orientation: 'horizontal' as ListOrientation,
-  cards: cards,
-};
-
-export default {
-  default: (
-    <div className="container grid grid-cols-12">
-      <Gallery className="col-span-12" {...defaultProps} />
-    </div>
-  ),
-  scroll: (
-    <div className="container grid grid-cols-12">
-      <Gallery className="col-span-12" {...scrollProps} />
-    </div>
-  ),
-};

package/src/components/Gallery/Gallery.fixture.tsx

@@ -1,225 +0,0 @@
-import type { Picture } from '../../model/Picture';
-import '../../setup-fixture';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import { Gallery } from './Gallery';
-import type { GalleryProps } from './GalleryProps';
-const isDotted = true;
-
-const image: Picture = {
-  src: 'money-1.png',
-  format: 'webp',
-  size: {
-    width: 140,
-    height: 140,
-  },
-  title: 'money',
-};
-
-const buttonPrimary: ButtonWithIconProps = {
-  href: '/credit-cards',
-  text: 'Подробнее',
-  target: '_blank',
-  version: 'secondary',
-};
-
-const buttonPrimaryIcon: ButtonWithIconProps = {
-  href: '/credit-cards',
-  text: 'Подробнее',
-  target: '_blank',
-  version: 'secondary',
-  icon: { icon: 'BankIcon' },
-};
-
-const defaultItems = [
-  { text: 'Качественные фермерские продукты напрямую от производителей' },
-  { text: 'Самая большая база сельских туров по России' },
-  { text: 'Площадки для создания комфортной жизни за городом' },
-];
-
-export const defaultProps: GalleryProps = {
-  title: 'Вы можете оплатить бонусными баллами',
-  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-
-  cards: [
-    {
-      title: 'Более 5000 товаров',
-      description:
-        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      icon: image,
-      button: buttonPrimary,
-      isDotted,
-      items: defaultItems,
-      version: 'secondary',
-    },
-    {
-      title: 'Более 1000 развлечений',
-      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
-      icon: image,
-      button: buttonPrimaryIcon,
-      isDotted,
-      items: defaultItems,
-    },
-    {
-      title: 'Фермерские продукты',
-      description: 'Высокий процент даже при небольшой сумме денежных средств',
-      icon: image,
-      button: buttonPrimary,
-      isDotted,
-      items: defaultItems,
-    },
-    {
-      title: '«Моя выгода»',
-      description:
-        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      icon: image,
-      button: buttonPrimary,
-      isDotted,
-      items: defaultItems,
-    },
-  ],
-};
-
-const textAndButtonProps: GalleryProps = {
-  title: 'Вы можете оплатить бонусными баллами',
-  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  cards: [
-    {
-      title: 'Более 5000 товаров',
-      description:
-        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      icon: image,
-      button: buttonPrimary,
-    },
-    {
-      title: 'Более 1000 развлечений',
-      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
-      icon: image,
-      button: buttonPrimary,
-    },
-    {
-      title: 'Фермерские продукты',
-      description: 'Высокий процент даже при небольшой сумме денежных средств',
-      icon: image,
-      button: buttonPrimary,
-    },
-    {
-      title: '«Моя выгода»',
-      description:
-        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      icon: image,
-      button: buttonPrimary,
-    },
-  ],
-};
-
-const listAndButtonProps: GalleryProps = {
-  title: 'Вы можете оплатить бонусными баллами',
-  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  cards: [
-    {
-      title: 'Более 5000 товаров',
-      icon: image,
-      button: buttonPrimary,
-      isDotted,
-      items: defaultItems,
-    },
-    {
-      title: 'Более 1000 развлечений',
-      icon: image,
-      button: buttonPrimary,
-      isDotted,
-      items: defaultItems,
-    },
-    {
-      title: 'Фермерские продукты',
-      icon: image,
-      button: buttonPrimary,
-      isDotted,
-      items: defaultItems,
-    },
-    {
-      title: '«Моя выгода»',
-      icon: image,
-      button: buttonPrimary,
-      isDotted,
-      items: defaultItems,
-    },
-  ],
-};
-
-const textAndNoButtonProps: GalleryProps = {
-  title: 'Вы можете оплатить бонусными баллами',
-  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  cards: [
-    {
-      title: 'Более 5000 товаров',
-      description:
-        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      icon: image,
-    },
-    {
-      title: 'Более 1000 развлечений',
-      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
-      icon: image,
-    },
-    {
-      title: 'Фермерские продукты',
-      description: 'Высокий процент даже при небольшой сумме денежных средств',
-      icon: image,
-    },
-    {
-      title: '«Моя выгода»',
-      description:
-        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      icon: image,
-    },
-  ],
-};
-
-const onlyTitleProps: GalleryProps = {
-  title: 'Вы можете оплатить бонусными баллами',
-  cards: [
-    {
-      title: 'Более 5000 товаров',
-      icon: { icon: 'PercentageRoundIcon' },
-    },
-    {
-      title: 'Более 1000 развлечений',
-      icon: { icon: 'InterestIcon' },
-    },
-    {
-      title: 'Фермерские продукты',
-      icon: { icon: 'WalletIcon', iconVersion: 'white' },
-      version: 'secondary',
-    },
-  ],
-  button: buttonPrimary,
-};
-
-export default {
-  default: (
-    <div className="container grid grid-cols-12">
-      <Gallery className="col-span-12" {...defaultProps} />
-    </div>
-  ),
-  'text and button': (
-    <div className="container grid grid-cols-12">
-      <Gallery className="col-span-12" {...textAndButtonProps} />
-    </div>
-  ),
-  'list and button': (
-    <div className="container grid grid-cols-12">
-      <Gallery className="col-span-12" {...listAndButtonProps} />
-    </div>
-  ),
-  'text and no button': (
-    <div className="container grid grid-cols-12">
-      <Gallery className="col-span-12" {...textAndNoButtonProps} />
-    </div>
-  ),
-  'only title': (
-    <div className="container grid grid-cols-12">
-      <Gallery className="col-span-12" {...onlyTitleProps} />
-    </div>
-  ),
-};

package/src/components/Gallery/Gallery.mobile.tsx

@@ -1,113 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import type { ListOrientation } from '../../model/ListOrientation';
-import type { Picture } from '../../model/Picture';
-import { blockStyles, BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Button } from '../../ui-kit/Button/Button';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
-import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
-import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
-import type { GalleryProps } from './GalleryProps';
-
-export const Gallery = JSX<GalleryProps>(
-  ({ className = '', title, description, cards = [], orientation = 'horizontal', ...rest }) => (
-    <BlockWrapper className={`relative px-4 py-6 overflow-hidden ${className}`} {...rest}>
-      <div className="flex flex-col items-center mb-5">
-        {title ? (
-          <Heading
-            headingType="h3"
-            className={`text-center ${description ? 'mb-2' : 'mb-5'}`}
-            title={title}
-          />
-        ) : null}
-        {description ? (
-          <div className="text-m max-w-[600px] text-center mb-5">{description}</div>
-        ) : null}
-      </div>
-      {renderCardsLayout(orientation, cards)}
-    </BlockWrapper>
-  ),
-);
-
-function renderCardsLayout(orientation: ListOrientation, cards: GalleryCardProps[]) {
-  return orientation === 'horizontal' ? (
-    <SwipeListControl>{cards?.map(renderCard)}</SwipeListControl>
-  ) : (
-    <div className="grid gap-3.5">{cards?.map(renderCard)}</div>
-  );
-}
-
-function renderCard(card: GalleryCardProps, key: number) {
-  return (
-    <div
-      className={`w-full h-full flex flex-col justify-between shrink-0 box-border snap-start snap-always border-solid border rounded-md border-gray p-4
-      ${blockStyles[card.version ?? 'primary']}`}
-      key={key}
-    >
-      <div>
-        {renderImage(card.icon)}
-        {card.title ? <h3 className={`text-m-title-xs font-medium m-0`}>{card.title}</h3> : null}
-        {card.description ? renderDescription(card) : null}
-        {card.items?.length ? renderItems(card.items, card.isDotted, card.version) : null}
-      </div>
-      {card?.button?.text ? renderButton(card.button) : null}
-    </div>
-  );
-}
-
-const renderImage = (image?: Picture) =>
-  image?.src || image?.icon ? (
-    <div className="flex justify-center">
-      <Img className="mb-3.5" image={image} />
-    </div>
-  ) : null;
-
-function renderButton(button?: ButtonWithIconProps) {
-  return <Button className="mt-3" {...button} />;
-}
-
-function renderDescription(card: GalleryCardProps) {
-  return (
-    <div
-      className={`text-secondary-text mt-1 text-s ${
-        card.version === 'secondary' ? 'text-white opacity-80' : ''
-      }`}
-    >
-      {card.description}
-    </div>
-  );
-}
-
-const LIST_DOT_STYLE_MAP: Record<BlockVersion, string> = {
-  primary: 'bg-primary-text',
-  secondary: 'bg-white',
-  gray: 'bg-primary-text',
-  transparent: '',
-  '': '',
-};
-
-function renderItems(
-  items: GalleryItemProps[],
-  isDotted?: boolean,
-  version: BlockVersion = 'primary',
-) {
-  return (
-    <section className="mt-3">
-      {items.map((item, i) => (
-        <div key={String(i)}>
-          {isDotted ? (
-            <div
-              className={`rounded-full inline-block mr-3 mt-2 w-2 h-2 min-w-2 min-h-2 ${LIST_DOT_STYLE_MAP[version]}`}
-            />
-          ) : null}
-          <span className="text-m font-medium">{item.title}</span>
-          <span className={`text-s pl-2 ${version === 'primary' ? 'text-secondary-text' : ''}`}>
-            {item.text}
-          </span>
-        </div>
-      ))}
-    </section>
-  );
-}

package/src/components/Gallery/Gallery.tsx

@@ -1,7 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { GalleryInner } from './GalleryInner';
-import type { GalleryProps } from './GalleryProps';
-
-export const Gallery = JSX<GalleryProps>((props) => (
-  <GalleryInner {...props} galleryVersion="normal" />
-));

package/src/components/Gallery/Gallery.ui.json

@@ -1,22 +0,0 @@
-{
-  "content": {
-    "cards": {
-      "items": {
-        "additionalDescription": {
-          "ui:field": "hidden"
-        },
-        "icon": {
-          "ui:field": "picture"
-        },
-        "button": {
-          "icon": {
-            "ui:field": "icon"
-          },
-          "iconRight": {
-            "ui:field": "icon"
-          }
-        }
-      }
-    }
-  }
-}

package/src/components/Gallery/GalleryCardInner.tsx

@@ -1,78 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
-import type { Picture } from '../../model/Picture';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { Img } from '../../ui-kit/Img/Img';
-import { List } from '../../ui-kit/List/List';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
-import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
-
-export const GalleryCardInner = JSX<GalleryCardProps>(
-  ({
-    title,
-    headlineSmallVersion = 'H6',
-    description,
-    additionalDescription,
-    icon,
-    items,
-    button,
-    isFullWidth = true,
-    isDotted = true,
-    align = 'center',
-    ...rest
-  }) => (
-    <BlockWrapper
-      className={`h-full flex flex-col justify-between ${AlignText[align]}`}
-      tag="div"
-      {...rest}
-    >
-      <div className="flex flex-col h-full">
-        {renderImage(icon)}
-        {renderCardTitle(headlineSmallVersion, title)}
-        {renderDescription(description, title)}
-        {items?.length ? renderItems(items, isDotted) : null}
-        {renderAdditionalDescription(additionalDescription)}
-      </div>
-      {renderButtonsSection([button], {
-        buttonClassName: `mt-6 ${isFullWidth ? 'w-full' : 'self-center'}`,
-      })}
-    </BlockWrapper>
-  ),
-);
-
-const renderImage = (image?: Picture) => (
-  <div className="flex justify-center">
-    {image?.src ? <Img className="mb-5" image={image} /> : null}
-    {image?.icon ? (
-      <Img
-        className={`w-8 h-8 min-w-8 mb-5 rounded-full`}
-        image={getIconWithVersion(image)}
-        asSVG
-      />
-    ) : null}
-  </div>
-);
-
-const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
-  title ? <div className={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</div> : null;
-
-const renderDescription = (description?: string, title?: string) =>
-  description ? <div className={`text-l ${title ? 'mt-2' : ''}`}>{description}</div> : null;
-
-const renderAdditionalDescription = (additionalDescription?: string) =>
-  additionalDescription ? (
-    <div className={`text-m-light mt-auto group-data-primary:text-secondary-text`}>
-      {additionalDescription}
-    </div>
-  ) : null;
-
-const renderItems = (items: GalleryItemProps[], isDotted: boolean) => (
-  <List
-    className="max-w-[308px] mt-2 text-s group-data-primary:text-secondary-text"
-    itemClassName="text-left"
-    items={items.filter((item) => item?.text).map((item) => item.text as string)}
-    isDotted={isDotted}
-  />
-);

package/src/components/Gallery/GalleryContainer.tsx

@@ -1,61 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { GalleryVersion } from '../../model/GalleryVersion';
-import { blockStyles } from '../../ui-kit/BlockWrapper';
-import { Headline } from '../Headline/Headline';
-import { cardStyleMap, cardWidthMap, galleryLengthForScrollMap } from './constants';
-import { GalleryCardInner } from './GalleryCardInner';
-import type { GalleryCardProps } from './GalleryContent';
-import type { GalleryInnerProps } from './GalleryInner';
-
-export interface GalleryContainerProps extends GalleryInnerProps {
-  activeIndex: number;
-}
-
-export interface GalleryCardData {
-  card: GalleryCardProps;
-  galleryVersion: GalleryVersion;
-}
-
-export const GalleryContainer = JSX<GalleryContainerProps>(
-  ({
-    headlineVersion = 'M',
-    cards = [],
-    galleryVersion = 'normal',
-    activeIndex,
-    title,
-    description,
-  }) => (
-    <div>
-      <Headline
-        className="!p-0"
-        title={title}
-        description={description}
-        headlineVersion={headlineVersion}
-      />
-      <div
-        className={`flex mt-8 ${
-          cards?.length <= galleryLengthForScrollMap[galleryVersion] ? 'justify-center' : ''
-        } duration-1000`}
-        style={{ transform: `translateX(-${activeIndex * cardWidthMap[galleryVersion]}px)` }}
-        role="list"
-      >
-        {cards?.map((card, i) => renderCard({ card, galleryVersion }, i))}
-      </div>
-    </div>
-  ),
-);
-
-function renderCard({ card, galleryVersion }: GalleryCardData, i: number) {
-  return (
-    <section
-      className={`box-border border-solid border border-gray p-6 mx-2 flex flex-col justify-between
-        items-stretch ${cardStyleMap[galleryVersion]} ${
-        blockStyles[card.version ?? 'primary'] // TODO Replace with direct BlockWrapper usage
-      } w-full col-span-4`}
-      key={String(i)}
-      role="listitem"
-    >
-      <GalleryCardInner {...card} />
-    </section>
-  );
-}