@redneckz/wildless-cms-uni-blocks 0.2.93 → 0.2.97

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

@@ -1,8 +1,8 @@
+import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
-
+import type { ButtonCommonProps } from '../../ui-kit/Button/Button';
 import { Gallery, GalleryProps } from './Gallery';
 import { Gallery as MobileGallery } from './Gallery.mobile';
-import type { Picture } from '../../model/Picture';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -11,6 +11,14 @@ const image: Picture = {
     width: 140,
     height: 140,
   },
+  title: 'money',
+};
+
+const buttonPrimary: ButtonCommonProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'secondary',
 };
 
 const defaultItems = [
@@ -29,21 +37,21 @@ const defaultProps: GalleryProps = {
       description:
         'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
       image,
-      href: '/credit-cards',
+      button: buttonPrimary,
       items: defaultItems,
     },
     {
       title: 'Более 1000 развлечений',
       description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
       image,
-      href: '/credit-cards',
+      button: buttonPrimary,
       items: defaultItems,
     },
     {
       title: 'Фермерские продукты',
       description: 'Высокий процент даже при небольшой сумме денежных средств',
       image,
-      href: '/credit-cards',
+      button: buttonPrimary,
       items: defaultItems,
     },
     {
@@ -51,14 +59,7 @@ const defaultProps: GalleryProps = {
       description:
         'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
       image,
-      href: '/credit-cards',
-      items: defaultItems,
-    },
-    {
-      title: 'Фермерские продукты',
-      description: 'Высокий процент даже при небольшой сумме денежных средств',
-      image,
-      href: '/credit-cards',
+      button: buttonPrimary,
       items: defaultItems,
     },
   ],
@@ -74,32 +75,26 @@ const textAndButtonProps: GalleryProps = {
       description:
         'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
       image,
-      href: '/credit-cards',
+      button: buttonPrimary,
     },
     {
       title: 'Более 1000 развлечений',
       description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
       image,
-      href: '/credit-cards',
+      button: buttonPrimary,
     },
     {
       title: 'Фермерские продукты',
       description: 'Высокий процент даже при небольшой сумме денежных средств',
       image,
-      href: '/credit-cards',
+      button: buttonPrimary,
     },
     {
       title: '«Моя выгода»',
       description:
         'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
       image,
-      href: '/credit-cards',
-    },
-    {
-      title: 'Фермерские продукты',
-      description: 'Высокий процент даже при небольшой сумме денежных средств',
-      image,
-      href: '/credit-cards',
+      button: buttonPrimary,
     },
   ],
 };
@@ -112,31 +107,25 @@ const listAndButtonProps: GalleryProps = {
     {
       title: 'Более 5000 товаров',
       image,
-      href: '/credit-cards',
+      button: buttonPrimary,
       items: defaultItems,
     },
     {
       title: 'Более 1000 развлечений',
       image,
-      href: '/credit-cards',
+      button: buttonPrimary,
       items: defaultItems,
     },
     {
       title: 'Фермерские продукты',
       image,
-      href: '/credit-cards',
+      button: buttonPrimary,
       items: defaultItems,
     },
     {
       title: '«Моя выгода»',
       image,
-      href: '/credit-cards',
-      items: defaultItems,
-    },
-    {
-      title: 'Фермерские продукты',
-      image,
-      href: '/credit-cards',
+      button: buttonPrimary,
       items: defaultItems,
     },
   ],
@@ -169,11 +158,6 @@ const textAndNoButtonProps: GalleryProps = {
         'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
       image,
     },
-    {
-      title: 'Фермерские продукты',
-      description: 'Высокий процент даже при небольшой сумме денежных средств',
-      image,
-    },
   ],
 };
 
@@ -198,18 +182,38 @@ const onlyTitleProps: GalleryProps = {
       title: '«Моя выгода»',
       image,
     },
-    {
-      title: 'Фермерские продукты',
-      image,
-    },
   ],
 };
 
 export default {
-  default: <Gallery {...defaultProps} />,
-  'text and button': <Gallery {...textAndButtonProps} />,
-  'list and button': <Gallery {...listAndButtonProps} />,
-  'text and no button': <Gallery {...textAndNoButtonProps} />,
-  'only title': <Gallery {...onlyTitleProps} />,
-  mobile: <MobileGallery {...defaultProps} />,
+  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>
+  ),
+  mobile: (
+    <div className="container grid grid-cols-12">
+      <MobileGallery className="col-span-12" {...defaultProps} />
+    </div>
+  ),
 };

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

@@ -51,9 +51,7 @@ function renderCard(card: GalleryCard, key: number) {
         ) : null}
         {card.items?.length ? renderItems(card.items) : null}
       </div>
-      {card.href ? (
-        <Button className="mt-6" text="Подробнее" version="secondary" href={card.href} />
-      ) : null}
+      {card?.button?.href ? <Button className="mt-6" {...card.button} /> : null}
     </div>
   );
 }

package/src/components/Gallery/GalleryCardInner.tsx

@@ -0,0 +1,53 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+import { Button } from '../../ui-kit/Button/Button';
+import { Img } from '../../ui-kit/Img';
+import { cardVersionMap } from './constants';
+import type { GalleryCard } from './GalleryContent';
+
+export const GalleryCardInner = JSX<GalleryCard>(
+  ({ title, description, image, items, button, version }) => {
+    const cardVersionClasses = cardVersionMap[version ?? 'primary'];
+
+    return (
+      <div>
+        <div>
+          {image?.src ? (
+            <div className="flex justify-center">
+              <Img className="mb-6" image={image} />
+            </div>
+          ) : null}
+          {title && renderCardTitle(title, description, items)}
+          {description && (
+            <div className={`font-normal text-sm mt-2 ${cardVersionClasses}`}>{description}</div>
+          )}
+          {items?.length ? (
+            <section className={`max-w-[308px] mt-2 ${cardVersionClasses}`} role="list">
+              {items.map((item, i) => renderItem(item, i, version))}
+            </section>
+          ) : null}
+        </div>
+        {button?.href && <Button className="mt-6" {...button} />}
+      </div>
+    );
+  },
+);
+
+function renderCardTitle(title: string, description?: string, items?: string[]) {
+  return (
+    <div
+      className={`font-medium text-xl m-0 ${!description && !items?.length ? 'text-center' : ''}`}
+    >
+      {title}
+    </div>
+  );
+}
+
+function renderItem(item: string, i: number, version?: BlockVersion) {
+  return (
+    <BlockItem key={String(i)} version={version ?? 'primary'}>
+      <span className="text-sm">{item}</span>
+    </BlockItem>
+  );
+}

package/src/components/Gallery/GalleryContainer.tsx

@@ -0,0 +1,58 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { GalleryVersion } from '../../model/GalleryVersion';
+import { Title } from '../../ui-kit/Title/Title';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { Tile } from '../Tile/Tile';
+import { cardStyleMap, cardWidthMap, galleryLengthForScrollMap } from './constants';
+import { GalleryCardInner } from './GalleryCardInner';
+import type { GalleryCard } from './GalleryContent';
+import type { GalleryInnerProps } from './GalleryInner';
+
+export interface GalleryContainerProps extends Omit<GalleryInnerProps, 'className'> {
+  activeCardIndex: number;
+}
+
+export interface GalleryCardData {
+  card: GalleryCard;
+  version: GalleryVersion;
+  context: ContentPageContext;
+}
+
+export const GalleryContainer = JSX<GalleryContainerProps>(
+  ({ context, title, description, cards = [], version = 'normal', activeCardIndex }) => {
+    return (
+      <div>
+        <div className="absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" />
+        <div className="flex flex-col items-center mb-8">
+          {title ? <Title className="font-medium m-0 text-center">{title}</Title> : null}
+          {description ? (
+            <div className="font-normal text-base max-w-[600px] mt-2.5">{description}</div>
+          ) : null}
+        </div>
+        <div
+          className={`flex ${
+            cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''
+          } duration-1000`}
+          style={{ transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }}
+          role="list"
+        >
+          {cards?.map((card, i) => renderCard({ card, version, context }, i))}
+        </div>
+      </div>
+    );
+  },
+);
+
+function renderCard({ card, version, context }: GalleryCardData, i: number) {
+  return (
+    <Tile
+      context={context}
+      className={`box-border border-solid border rounded-md border-main-divider p-7 mx-2 flex flex-col justify-between
+        items-stretch ${cardStyleMap[version]} w-full col-span-4`}
+      version={card.version}
+      key={String(i)}
+    >
+      <GalleryCardInner {...card} />
+    </Tile>
+  );
+}

package/src/components/Gallery/GalleryContent.ts

@@ -1,4 +1,6 @@
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
+import type { BaseTileIconButton } from '../BaseTile/BaseTileProps';
 
 /**
  * @title Карточка
@@ -10,9 +12,13 @@ export interface GalleryCard {
   description?: string;
   image?: Picture;
   /** @title Ссылка */
-  href?: string;
-  /** @title Список */
+  button?: BaseTileIconButton;
+  /**
+   * @title Список
+   * @minItems 4
+   */
   items?: string[];
+  version?: BlockVersion;
 }
 
 /**

package/src/components/Gallery/GalleryInner.tsx

@@ -1,43 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { GalleryCard, GalleryContent } from './GalleryContent';
 import type { GalleryVersion } from '../../model/GalleryVersion';
 import type { UniBlockProps } from '../../types';
 import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
-import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
-import { Button } from '../../ui-kit/Button/Button';
-import { Img } from '../../ui-kit/Img';
-import { Title } from '../../ui-kit/Title/Title';
+import { galleryLengthForScrollMap } from './constants';
+import { GalleryContainer } from './GalleryContainer';
+import type { GalleryContent } from './GalleryContent';
 
 export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
   version?: GalleryVersion;
 }
 
-const cardStyleMap: Record<GalleryVersion, string> = {
-  normal: 'min-w-[364px] w-[364px]',
-  mini: 'min-w-[260px] w-[260px]',
-};
-
-const cardWidthMap: Record<GalleryVersion, number> = {
-  normal: 380,
-  mini: 276,
-};
-
-const galleryLengthForScrollMap: Record<GalleryVersion, number> = {
-  normal: 3,
-  mini: 4,
-};
-
 export const GalleryInner = JSX<GalleryInnerProps>(
-  ({ title, description, context, cards = [], className, version = 'normal' }) => {
+  ({ context, cards = [], className, version = 'normal', ...rest }) => {
     const [activeCardIndex, setActiveCardIndex] = context.useState(0);
 
-    function handleNextClick() {
-      setActiveCardIndex(activeCardIndex + 1);
-    }
-
-    function handlePrevClick() {
-      setActiveCardIndex(activeCardIndex - 1);
-    }
+    const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+    const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
 
     const isGalleryScrollAvailable = cards?.length > galleryLengthForScrollMap[version];
 
@@ -49,26 +27,15 @@ export const GalleryInner = JSX<GalleryInnerProps>(
 
     return (
       <section
-        className={`relative font-sans text-primary-text bg-white p-12 py-[50px] overflow-hidden ${className}`}
+        className={`relative font-sans text-primary-text bg-white p-[50px] overflow-hidden ${className}`}
       >
-        <div className="flex flex-col items-center mb-8">
-          {title ? <Title className="font-medium m-0 text-center">{title}</Title> : null}
-          {description ? (
-            <div className="font-normal text-base max-w-[600px] mt-3">{description}</div>
-          ) : null}
-        </div>
-        <div
-          // Need to place all cards at the center if count of cards less than 4
-          className={`flex ${
-            cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''
-          } duration-1000`}
-          // All cards has same width
-          style={{ transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }}
-          role="list"
-        >
-          {cards?.map((card, i) => renderCard(card, i, version))}
-        </div>
-        <div className="absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent"></div>
+        <GalleryContainer
+          context={context}
+          cards={cards}
+          version={version}
+          activeCardIndex={activeCardIndex}
+          {...rest}
+        />
         {showPrevButton && (
           <ArrowButton
             className="absolute top-1/2 left-8 rotate-180"
@@ -83,54 +50,8 @@ export const GalleryInner = JSX<GalleryInnerProps>(
             ariaLabel="Пролистать вправо"
           />
         )}
-        <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white"></div>
+        <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
       </section>
     );
   },
 );
-
-function renderCard(card: GalleryCard, i: number, version: GalleryVersion) {
-  return (
-    <div
-      className={`box-border border-solid border rounded-md border-main-divider p-7 mx-2 flex flex-col justify-between items-stretch ${cardStyleMap[version]} w-full`}
-      role="listitem"
-      key={String(i)}
-    >
-      <div>
-        {card.image?.src ? (
-          <div className="flex justify-center">
-            <Img className="mb-6" image={card.image} />
-          </div>
-        ) : null}
-        {card.title ? (
-          <h4
-            className={`font-medium text-xl m-0 ${
-              !card.description && !card.items?.length ? 'text-center' : ''
-            }`}
-          >
-            {card.title}
-          </h4>
-        ) : null}
-        {card.description ? (
-          <div className="font-normal text-sm text-secondary-text mt-2">{card.description}</div>
-        ) : null}
-        {card.items?.length ? (
-          <section className="max-w-[308px] mt-2" role="list">
-            {card.items.map(renderItem)}
-          </section>
-        ) : null}
-      </div>
-      {card.href ? (
-        <Button className="mt-6" text="Подробнее" version="secondary" href={card.href} />
-      ) : null}
-    </div>
-  );
-}
-
-function renderItem(item: string, i: number) {
-  return (
-    <BlockItem key={String(i)}>
-      <span className="text-sm text-secondary-text">{item}</span>
-    </BlockItem>
-  );
-}

package/src/components/Gallery/constants.ts

@@ -0,0 +1,22 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { GalleryVersion } from '../../model/GalleryVersion';
+
+export const cardVersionMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: '',
+};
+
+export const galleryLengthForScrollMap: Record<GalleryVersion, number> = {
+  normal: 3,
+  mini: 4,
+};
+
+export const cardStyleMap: Record<GalleryVersion, string> = {
+  normal: 'min-w-[364px] w-[364px]',
+  mini: 'min-w-[260px] w-[260px]',
+};
+
+export const cardWidthMap: Record<GalleryVersion, number> = {
+  normal: 380,
+  mini: 276,
+};

package/src/components/Header/Header.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import { useSitemap } from '../../hooks/useSitemap';
 import { mergeTopItems } from '../../mergeTopItems';
 import type { UniBlockProps } from '../../types';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
-import { useLink } from '../../hooks/useLink';
-import { useSitemap } from '../../hooks/useSitemap';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
 import { isSubItemActive } from './isSubItemActive';
@@ -43,17 +43,19 @@ export const Header = JSX<HeaderProps>(({ className, defaultLocation, context, t
 
   return (
     <header className={`pt-5 pb-8 px-20 bg-white ${className || ''}`}>
-      <div className="flex items-center">
-        <Logo className="mr-8" />
-        {topMenu}
-        <HeaderSecondaryMenu
-          context={context}
-          className="ml-auto"
-          defaultLocation={defaultLocation}
-        />
+      <div className="container">
+        <div className="flex items-center">
+          <Logo className="mr-8" />
+          {topMenu}
+          <HeaderSecondaryMenu
+            context={context}
+            className="ml-auto"
+            defaultLocation={defaultLocation}
+          />
+        </div>
+        <div className="mt-5 h-[1px] bg-main-divider" />
+        <nav className="mt-5">{subMenu}</nav>
       </div>
-      <div className="mt-5 h-[1px] bg-main-divider" />
-      <nav className="mt-5">{subMenu}</nav>
     </header>
   );
 });

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

@@ -11,9 +11,31 @@ export const HEADLINE: HeadlineContent = {
 };
 
 export default {
-  default: <Headline context={context} {...HEADLINE} />,
-  'left white': <Headline context={context} {...HEADLINE} align="left" bgColor="bg-white" />,
+  default: (
+    <div className="container grid grid-cols-12">
+      <Headline className="col-span-12" context={context} {...HEADLINE} />
+    </div>
+  ),
+  'left white': (
+    <div className="container grid grid-cols-12">
+      <Headline
+        className="col-span-12"
+        context={context}
+        {...HEADLINE}
+        align="left"
+        bgColor="bg-white"
+      />
+    </div>
+  ),
   'right transparent': (
-    <Headline context={context} {...HEADLINE} align="right" bgColor="transparent" />
+    <div className="container grid grid-cols-12">
+      <Headline
+        className="col-span-12"
+        context={context}
+        {...HEADLINE}
+        align="right"
+        bgColor="transparent"
+      />
+    </div>
   ),
 };

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

@@ -2,4 +2,8 @@ import { context } from '../../setup-fixture';
 
 import { LikeControl } from './LikeControl';
 
-export default <LikeControl context={context} />;
+export default (
+  <div className="container grid grid-cols-12">
+    <LikeControl className="col-span-12" context={context} />
+  </div>
+);

package/src/components/LinkDocs/LinkDocs.example.json

@@ -0,0 +1,26 @@
+{
+  "title": "Дополнительные документы",
+  "icon": "DocIcon",
+  "documents": [
+    {
+      "text": "Документ №1",
+      "href": "/documents/document1.doc",
+      "fileSize": "123КБ"
+    },
+    {
+      "text": "Документ №2",
+      "href": "/documents/document2.rtf",
+      "target": "_blank"
+    },
+    {
+      "text": "Документ №3",
+      "href": "/abc3/map.jpeg",
+      "fileSize": "2МБ"
+    },
+    {
+      "text": "Документ №4",
+      "href": "/abc/map.rar"
+    }
+  ],
+  "columnsMode": "double"
+}

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

@@ -1,6 +1,7 @@
 import { context } from '../../setup-fixture';
 import { LinkDocs } from './LinkDocs';
 import type { LinkDocsContent } from './LinkDocsContent';
+import { Accordion } from '../Accordion/Accordion';
 
 export const LINK_DOCS: LinkDocsContent = {
   title: 'Дополнительные документы',
@@ -27,9 +28,9 @@ export const LINK_DOCS: LinkDocsContent = {
   ],
 };
 
-export const LINK_DOCS_TWO_COLUMNS: LinkDocsContent = {
+export const LINK_DOCS_ONE_COLUMN: LinkDocsContent = {
   ...LINK_DOCS,
-  columnsMode: 'double',
+  columnsMode: 'single',
 };
 
 export const LINK_DOCS_ANOTHER_ICON: LinkDocsContent = {
@@ -44,8 +45,24 @@ export const LINK_DOCS_NO_ICON: LinkDocsContent = {
 };
 
 export default {
-  'one column': <LinkDocs context={context} {...LINK_DOCS} />,
-  'two column': <LinkDocs context={context} {...LINK_DOCS_TWO_COLUMNS} />,
-  'another icon': <LinkDocs context={context} {...LINK_DOCS_ANOTHER_ICON} />,
-  'no icon': <LinkDocs context={context} {...LINK_DOCS_NO_ICON} />,
+  'two columns (default)': (
+    <div className="container grid grid-cols-12">
+      <LinkDocs className="col-span-12" context={context} {...LINK_DOCS} />
+    </div>
+  ),
+  'one column': (
+    <div className="container grid grid-cols-12">
+      <LinkDocs className="col-span-12" context={context} {...LINK_DOCS_ONE_COLUMN} />
+    </div>
+  ),
+  'another icon': (
+    <div className="container grid grid-cols-12">
+      <LinkDocs className="col-span-12" context={context} {...LINK_DOCS_ANOTHER_ICON} />
+    </div>
+  ),
+  'no icon and title': (
+    <div className="container grid grid-cols-12">
+      <LinkDocs className="col-span-12" context={context} {...LINK_DOCS_NO_ICON} />
+    </div>
+  ),
 };