@redneckz/wildless-cms-uni-blocks 0.6.28 → 0.6.29

package/src/components/CarouselCard/CarouselCard.fixture.tsx

@@ -0,0 +1,47 @@
+import '../../react/setup-fixture';
+import { CarouselCard } from './CarouselCard';
+import type { CarouselCardContent } from './CarouselCardContent';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+const button: ButtonProps = {
+  text: 'Подробнее',
+  href: '/credit-cards',
+  version: 'secondary',
+};
+
+export const CARD: CarouselCardContent = {
+  title: 'Хочешь попасть на практику в РСХБ?',
+  description:
+    'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты под руководством опытных наставников, внести свой вклад в развитие перспективных цифровых продуктов.',
+  button,
+  version: 'normal',
+};
+
+export const CARD_NEW: CarouselCardContent = {
+  title: 'РСХБ?',
+  description:
+    'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты под руководством опытных наставников, внести свой вклад в развитие перспективных цифровых продуктов.',
+  button,
+  version: 'normal',
+};
+
+export const CARD_MINI: CarouselCardContent = {
+  title: 'Хочешь попасть на практику в РСХБ?',
+  description:
+    'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты под руководством опытных наставников, внести свой вклад в развитие перспективных цифровых продуктов.',
+  button,
+  version: 'mini',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CarouselCard className="col-span-12" {...CARD} />
+    </div>
+  ),
+  mini: (
+    <div className="container grid grid-cols-12">
+      <CarouselCard className="col-span-12" {...CARD_MINI} />
+    </div>
+  ),
+};

package/src/components/CarouselCard/CarouselCard.tsx

@@ -0,0 +1,49 @@
+import { Headline } from '../Headline/Headline';
+import { JSX } from '@redneckz/uni-jsx';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import type { CarouselCardContent } from './CarouselCardContent';
+import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
+import type { UniBlockProps } from '../../model/JSXBlock';
+
+export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {
+  version?: CarouselCardVersion;
+}
+
+const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-[100%] h-[100%]';
+
+const CARD_STYLE_MAP: Record<CarouselCardVersion, string> = {
+  normal: 'min-w-[100%] justify-center items-center my-7 col-span-12',
+  mini: 'w-1/3 justify-center items-center mx-4 my-9 col-span-4',
+};
+
+const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {
+  normal: 'w-[1007px]',
+  mini: 'w-[350px]',
+};
+
+export const CarouselCard = JSX<CarouselCardProps>(
+  ({ button, className = '', description, title, version = 'normal' }) => {
+    return (
+      <section className={`flex ${CARD_STYLE_MAP[version]}`}>
+        <div className={`relative ${CARD_WIDTH_MAP[version]}`}>
+          <div
+            className={`relative bg-white py-6 px-10 z-10
+              border border-solid border-green-light ${className}`}
+          >
+            <Headline
+              className="!p-0"
+              title={title}
+              description={description}
+              headlineVersion="M"
+              align="center"
+            />
+            {button ? renderButton({ button, buttonClassName: 'mt-6 w-[158px]' }) : null}
+          </div>
+          <div className={`top-9 right-12 bg-green-dark ${BLOCK_CLASSES}`} />
+          <div className={`top-6 right-8 bg-green ${BLOCK_CLASSES}`} />
+          <div className={`top-3 right-4 bg-green-light ${BLOCK_CLASSES}`} />
+        </div>
+      </section>
+    );
+  },
+);

package/src/components/CarouselCard/CarouselCard.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/CarouselCard/CarouselCardContent.ts

@@ -0,0 +1,15 @@
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
+
+export interface CarouselCardContent extends HeadlineCommonProps {
+  /**
+   * @title Кнопка
+   * @default {
+   *  "icon": { "format": "webp", "size": { "width": 24, "height": 24 } },
+   *  "iconRight" : { "format": "webp", "size": { "width": 24, "height": 24 } }
+   * }
+   */
+  button?: ButtonWithIconProps;
+  version?: CarouselCardVersion;
+}

package/src/components/ComparisonTable/ComparisonTableBody.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useTableArrowScrollControl } from '../../hooks/useTableArrowScrollControl';
+import { useCarouselControl } from '../../hooks/useCarousel';
 import { ComparisonTableColumnHeaders } from './ComparisonTableColumnHeaders';
 import type { Column, RowHeader } from './ComparisonTableContent';
 import { ComparisonTableRows } from './ComparisonTableRows';
@@ -24,26 +24,26 @@ export const ComparisonTableBody = JSX<ComparisonTableBodyProps>(
       }))
       .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
 
-    const tableArrowScrollProps = useTableArrowScrollControl({
-      columnsLength: colData.length,
-      colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
+    const isScrollAvailable = colData.length > COLS_LENGTH_FOR_SCROLL;
+
+    const [activeIndex, controls] = useCarouselControl({
+      itemsCount: colData.length,
+      visibleItemCount: COLS_LENGTH_FOR_SCROLL,
     });
-    const { activeCardIndex, isScrollAvailable } = tableArrowScrollProps;
 
     return (
       <div>
         <div role="table">
           {colHeaders?.length ? (
-            <ComparisonTableColumnHeaders
-              colHeaders={colHeaders}
-              activeCardIndex={activeCardIndex}
-            />
+            <ComparisonTableColumnHeaders colHeaders={colHeaders} activeCardIndex={activeIndex} />
           ) : null}
           {rowData?.length ? (
             <ComparisonTableRows
               rowData={rowData}
               isColoredFirstColumn={isColoredFirstColumn}
-              {...tableArrowScrollProps}
+              activeCardIndex={activeIndex}
+              controls={controls}
+              isScrollAvailable={isScrollAvailable}
             />
           ) : null}
         </div>

package/src/components/ComparisonTable/ComparisonTableRows.tsx

@@ -1,18 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { TitleProps } from '../../model/HeadlineType';
-import { TableArrowScrollControl } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControl';
-import type { TableArrowScrollControlProps } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControlProps';
 import type { CellData } from './ComparisonTableContent';
 import { TableRow } from './TableRow';
+import type { Controls } from '../../hooks/useCarousel';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 
-type ComparisonTableRowsProps = TableArrowScrollControlProps & {
+type ComparisonTableRowsProps = {
   rowData: { header: TitleProps; data: CellData[][] }[];
   activeCardIndex: number;
   isColoredFirstColumn: boolean;
+  controls: Controls;
+  isScrollAvailable: boolean;
 };
 
 export const ComparisonTableRows = JSX<ComparisonTableRowsProps>(
-  ({ rowData, isColoredFirstColumn, ...tableArrowScrollProps }) => {
+  ({ rowData, isColoredFirstColumn, activeCardIndex, controls, isScrollAvailable }) => {
+    const { inc, dec, canDec, canInc } = controls;
+
     return (
       <div className="relative">
         {rowData.map((row, i, { length }) => (
@@ -21,11 +25,21 @@ export const ComparisonTableRows = JSX<ComparisonTableRowsProps>(
             row={row}
             isFirstRow={i === 0}
             isLastRow={i + 1 === length}
-            activeCardIndex={tableArrowScrollProps.activeCardIndex}
+            activeCardIndex={activeCardIndex}
             isColoredFirstColumn={isColoredFirstColumn}
           />
         ))}
-        <TableArrowScrollControl {...tableArrowScrollProps} />
+        {isScrollAvailable ? (
+          <div>
+            {renderArrows({
+              handler: [inc, dec],
+              isShown: [canDec, canInc],
+              btnClass: ['top-[108px]', 'top-11'],
+              className: 'right-7',
+              isDisabled: true,
+            })}
+          </div>
+        ) : null}
       </div>
     );
   },

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

@@ -2,6 +2,6 @@ import '../../react/setup-fixture';
 import { Header } from './Header.mobile';
 
 export default {
-  default: <Header defaultLocation="Москва" />,
-  transparent: <Header defaultLocation="Москва" bgColor="transparent" />,
+  default: <Header />,
+  transparent: <Header bgColor="transparent" />,
 };

package/src/components/Header/Header.fixture.tsx

@@ -2,7 +2,7 @@ import '../../react/setup-fixture';
 import { Header } from './Header';
 
 export default {
-  default: <Header defaultLocation="Москва" />,
-  transparent: <Header defaultLocation="Москва" bgColor="transparent" />,
-  'no submenu': <Header defaultLocation="Москва" showSubMenu={false} />,
+  default: <Header />,
+  transparent: <Header bgColor="transparent" />,
+  'no submenu': <Header showSubMenu={false} />,
 };

package/src/components/Header/Header.mobile.tsx

@@ -18,59 +18,57 @@ import { HeaderTop } from './HeaderTop';
 
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
-export const Header = JSX<HeaderProps>(
-  ({ className = '', defaultLocation, bgColor = 'bg-white', ...rest }) => {
-    const router = useRouter();
+export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white', ...rest }) => {
+  const router = useRouter();
 
-    const { page } = rest;
-    const fallback: Fallback | undefined = page?.fallback;
-    const { topItems, dispositions } = useSWRResource<SitemapDataProps>(
-      projectSettings.SITEMAP || 'sitemap',
-      fallback,
-    );
+  const { page } = rest;
+  const fallback: Fallback | undefined = page?.fallback;
+  const { topItems, dispositions, defaultLocation } = useSWRResource<SitemapDataProps>(
+    projectSettings.SITEMAP || 'sitemap',
+    fallback,
+  );
 
-    const activeTopItem = topItems?.find(isTopItemActive(router));
-    const subItems = activeTopItem?.items;
-    const activeSubItem = findActiveSubItem(router)(subItems);
+  const activeTopItem = topItems?.find(isTopItemActive(router));
+  const subItems = activeTopItem?.items;
+  const activeSubItem = findActiveSubItem(router)(subItems);
 
-    const [burgerMenuShow, setBurgerMenuShow] = useState(false);
+  const [burgerMenuShow, setBurgerMenuShow] = useState(false);
 
-    const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
+  const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
 
-    return (
-      <header className={`${bgColor} ${className}`}>
-        <div className="container px-4 py-0 box-border">
-          <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
-          <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
-            <div className="flex no-scrollbar horizontal-list h-full items-center">
-              {subItems?.map((_, i) => (
-                <HeaderItem
-                  key={String(i)}
-                  className="mr-8 whitespace-nowrap text-s"
-                  active={_ === activeSubItem}
-                  bgColor={bgColor}
-                  {..._}
-                />
-              ))}
-            </div>
-          </nav>
-        </div>
-        {burgerMenuShow ? (
-          <HeaderBurger
-            onClick={toggleBurgerMenu}
-            burgerSubMenu={dispositions}
-            defaultLocation={defaultLocation}
-          >
-            <AccordionItemsList>
-              {topItems?.map((item, i) => (
-                <AccordionItem key={String(i)} label={item.text} {...rest}>
-                  <LinkList documents={item.items} {...rest} />
-                </AccordionItem>
-              ))}
-            </AccordionItemsList>
-          </HeaderBurger>
-        ) : null}
-      </header>
-    );
-  },
-);
+  return (
+    <header className={`${bgColor} ${className}`}>
+      <div className="container px-4 py-0 box-border">
+        <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
+        <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
+          <div className="flex no-scrollbar horizontal-list h-full items-center">
+            {subItems?.map((_, i) => (
+              <HeaderItem
+                key={String(i)}
+                className="mr-8 whitespace-nowrap text-s"
+                active={_ === activeSubItem}
+                bgColor={bgColor}
+                {..._}
+              />
+            ))}
+          </div>
+        </nav>
+      </div>
+      {burgerMenuShow ? (
+        <HeaderBurger
+          onClick={toggleBurgerMenu}
+          burgerSubMenu={dispositions}
+          defaultLocation={defaultLocation}
+        >
+          <AccordionItemsList>
+            {topItems?.map((item, i) => (
+              <AccordionItem key={String(i)} label={item.text} {...rest}>
+                <LinkList documents={item.items} {...rest} />
+              </AccordionItem>
+            ))}
+          </AccordionItemsList>
+        </HeaderBurger>
+      ) : null}
+    </header>
+  );
+});

package/src/components/Header/Header.tsx

@@ -22,17 +22,10 @@ const BORDER_COLORS: Record<BgColorVersion, string> = {
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
-  ({
-    bgColor = 'bg-white',
-    className = '',
-    defaultLocation = 'Москва',
-    logo,
-    showSubMenu = true,
-    ...rest
-  }) => {
+  ({ bgColor = 'bg-white', className = '', showSubMenu = true, ...rest }) => {
     const router = useRouter();
 
-    const { topItems } = useSWRResource<SitemapDataProps>(
+    const { topItems, logo, defaultLocation } = useSWRResource<SitemapDataProps>(
       projectSettings.SITEMAP || 'sitemap',
       rest.page?.fallback,
     );

package/src/components/Header/HeaderContent.ts

@@ -31,12 +31,6 @@ export interface Logo {
  * @required ["defaultLocation", "topItems"]
  */
 export interface HeaderContent {
-  logo?: Logo;
-  /**
-   * @title Город по-умолчанию
-   * @default Москва
-   */
-  defaultLocation?: string;
   /** @hidden */
   showSubMenu?: boolean;
   /** @hidden */

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -29,7 +29,7 @@ const LINKS_ICON_VERSION_MAP: Record<BgColorVersion, IconVersion> = {
 };
 
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({ className, defaultLocation = '', bgColor = 'bg-white' }) => {
+  ({ className, defaultLocation = 'Москва', bgColor = 'bg-white' }) => {
     const [city, getCity] = useGeolocation(defaultLocation);
 
     return (

package/src/components/MobileAppTile/MobileAppTile.example.json

@@ -8,10 +8,7 @@
         "height": 345
       }
     },
-    "qr": {
-      "src": "data:image/png;base64,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",
-      "alt": "QR код"
-    },
+    "qr": null,
     "buttons": [
       {
         "aboveText": "Загрузите в",
@@ -32,6 +29,7 @@
     ],
     "title": "Мобильное приложение",
     "description": "Загрузить для IOS и Android",
-    "version": "primary"
+    "version": "primary",
+    "headingType": "h4"
   }
 }

package/src/components/Recommendation/RecommendationCard.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
@@ -14,7 +15,7 @@ export interface RecommendationCardProps extends RecommendationCardTypes {
 }
 
 export const RecommendationCard = JSX<RecommendationCardProps>(
-  ({ className = '', title, description, items, image, version, socialMedia }) => {
+  ({ className = '', title, description, items, image, version, socialMedia, button }) => {
     const tileTitle = title ? (
       <Heading headingType="h5" as="h3" className="mb-3.5 z-10" title={title} />
     ) : null;
@@ -40,6 +41,9 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
             {socialMedia ? (
               <SocialMedia className="pt-10 pb-0" media={socialMedia} version={version} />
             ) : null}
+            {button?.text ? (
+              <div className="pt-2">{renderButton({ button, buttonClassName: 'mt-16' })}</div>
+            ) : null}
           </div>
         </BaseTile>
       </section>

package/src/components/Recommendation/RecommendationContent.ts

@@ -2,6 +2,7 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 
 /**
@@ -33,6 +34,13 @@ export interface RecommendationCardTypes extends HeadlineCommonProps, ListConten
    * }
    */
   image?: Picture;
+  /**
+   * @default {
+   * "text": "",
+   * "version": "secondary"
+   * }
+   */
+  button?: ButtonProps;
 }
 
 /**

package/src/components/RollupItem/RollupItem.example.json

@@ -0,0 +1,23 @@
+{
+  "content": {
+    "label": "Сворачивающаяся секция 1",
+    "isExpanded": true,
+    "isFoldButtonOnTop": true
+  },
+  "blocks": [
+    {
+      "type": "Bonus",
+      "content": {
+        "title": "Заголовок",
+        "description": "Описание",
+        "bonusItems": [
+          {
+            "title": "Плитка 1",
+            "description": "Описание плитки 1"
+          }
+        ]
+      },
+      "style": ["col-span-12"]
+    }
+  ]
+}

package/src/components/RollupItem/RollupItem.fixture.tsx

@@ -0,0 +1,23 @@
+import { RollupItem } from '../RollupItem/RollupItem';
+import { TextBlock } from '../TextBlock/TextBlock';
+import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
+
+const TEXT_BLOCK_ACCORDION_BLOCK = <TextBlock className="col-span-12" {...TEXT_BLOCK} />;
+
+export default {
+  default: (
+    <RollupItem label="Rollup button 1">
+      {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
+    </RollupItem>
+  ),
+  secondary: (
+    <RollupItem label="Rollup button 2" version="secondary" isFoldButtonOnTop={false}>
+      {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
+    </RollupItem>
+  ),
+  'secondary default-open': (
+    <RollupItem isExpanded={true} version="secondary" label="Rollup button 2">
+      {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
+    </RollupItem>
+  ),
+};

package/src/components/RollupItem/RollupItem.tsx

@@ -0,0 +1,86 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { JSXBlock } from '../../model/JSXBlock';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import { Img } from '../../ui-kit/Img/Img';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import type { RollupItemProps } from './RollupItemProps';
+
+interface RollupFoldablePartProps extends FoldablePartProps {
+  label?: string;
+  version?: BlockVersion;
+}
+
+interface FoldButtonProps {
+  label?: string;
+  icon: IconName;
+  onClick?: () => void;
+  onToggle?: () => void;
+  isUnfolded?: boolean;
+}
+
+export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
+  ({
+    className = '',
+    label = 'Развернуть',
+    isExpanded,
+    isFoldButtonOnTop = true,
+    version = 'primary',
+    children,
+  }) => (
+    <div className={`border-b border-solid border-main-divider w-full ${className}`}>
+      <Foldable
+        isFoldButtonOnTop={isFoldButtonOnTop}
+        unfoldedByDefault={isExpanded}
+        renderFoldableSection={({ isUnfolded }) => (
+          <div className="box-border">
+            <FoldableSection
+              className={`grid grid-cols-12 gap-1 border-box`}
+              isUnfolded={isUnfolded}
+            >
+              {children}
+            </FoldableSection>
+          </div>
+        )}
+        renderFoldButton={({ isUnfolded, onToggle }) =>
+          renderFoldButton({ isUnfolded, onToggle, label, version })
+        }
+      />
+    </div>
+  ),
+);
+
+RollupItem.childrenTypes = [];
+
+const renderFoldButton = ({ isUnfolded, onToggle, label, version }: RollupFoldablePartProps) => {
+  const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
+  const labels = label ? [label, label] : ['Развернуть', 'Скрыть'];
+
+  return version === 'primary' ? (
+    <FoldButton
+      icon={icons[Number(isUnfolded)]}
+      label={labels[Number(isUnfolded)]}
+      onClick={onToggle}
+    />
+  ) : (
+    <DefaultFoldButton
+      icon={icons[Number(isUnfolded)]}
+      label={labels[Number(isUnfolded)]}
+      onClick={onToggle}
+    />
+  );
+};
+
+const FoldButton = JSX<FoldButtonProps>(({ label, icon, onClick }) => (
+  <button
+    className="border-none bg-transparent px-9 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer"
+    onClick={onClick}
+  >
+    <span className="text-xl font-medium pr-2.5">{label}</span>
+    {icon ? <Img image={getIconWithVersion({ icon })} width="24" height="24" asSVG /> : null}
+  </button>
+));

package/src/components/RollupItem/RollupItem.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/RollupItem/RollupItemContent.ts

@@ -0,0 +1,13 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { LabelProps } from '../../model/HeadlineType';
+
+/**
+ * @title Сворачивающаяся секция
+ */
+export type RollupItemContent = LabelProps & {
+  /** @title Отображать в раскрытом виде */
+  isExpanded?: boolean;
+  /** @title Кнопка сверху */
+  isFoldButtonOnTop?: boolean;
+  version?: BlockVersion;
+};

package/src/components/RollupItem/RollupItemProps.ts

@@ -0,0 +1,4 @@
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { RollupItemContent } from './RollupItemContent';
+
+export interface RollupItemProps extends RollupItemContent, UniBlockProps {}