@redneckz/wildless-cms-uni-blocks 0.3.35 → 0.3.38

package/src/components/NavigatorTabs/NavigatorTabs.tsx

@@ -1,36 +1,44 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { getHash } from '../../utils/url';
+import { getHash, isURL } from '../../utils/url';
 import type { Router } from '../ContentPage/ContentPageContext';
 import { NavigatorTabItem } from './NavigatorTabItem';
 import type { NavigatorTab, NavigatorTabsContent } from './NavigatorTabsContent';
 
-export interface TabsBlockProps extends NavigatorTabsContent, UniBlockProps {}
+export interface TabsBlockProps extends UniBlockProps, NavigatorTabsContent {}
 
 export const NavigatorTabs = JSX<TabsBlockProps>(
   ({ className = '', navigatorTabs, context, anchor = null }) => {
     const router = context.useRouter();
-    const hash = getHash(router.href);
+    const href = globalThis.location.href;
+
     return (
       <section
         className={`sticky top-0 z-20 box-border flex gap-x-1 h-12 ${className}`}
         id={anchor}
       >
-        {navigatorTabs ? navigatorTabs.map(renderTab(hash, router)) : null}
+        {navigatorTabs ? navigatorTabs.map(renderTab(href, router)) : null}
       </section>
     );
   },
 );
 
-const renderTab = (hash?: string, router?: Router) => (tab: NavigatorTab, i: number) => {
-  const anchorHash = `#${tab.anchor}`;
-  const active = hash ? anchorHash === hash : i === 0;
+const renderTab = (href?: string, router?: Router) => (tab: NavigatorTab, i: number) => {
+  const hash = getHash(href);
+  const active = hash ? tab.href === hash : i === 0;
+
   return (
     <NavigatorTabItem
-      key={tab.anchor}
+      key={tab.href}
       active={active}
-      onClick={() => router?.replace(anchorHash)}
+      onClick={() => handleRoute(router, tab.href)}
       {...tab}
     />
   );
 };
+
+const handleRoute = (router?: Router, href?: string) => {
+  if (isURL(href)) return; // if href if full URL - move to HTML href action, do not touch router
+
+  router?.replace(href || '');
+};

package/src/components/NavigatorTabs/NavigatorTabsContent.ts

@@ -5,7 +5,9 @@ export interface NavigatorTab {
   /** @title Название */
   label?: string;
   /** @title Якорь */
-  anchor?: string;
+  href?: string;
+  /** @title Таргет (target) */
+  target?: string;
 }
 
 /**

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -18,6 +18,7 @@ export function renderBackwardButton(text: string, version: BlockVersion, classN
       <Button
         rounded
         className={`w-12 h-12 min-h-12 max-h-12 flex items-center justify-center mr-3 ${backwardBgStyleMap[version]}`}
+        ariaLabel={text}
       >
         <Img
           className={`w-4 h-4 min-w-4 min-h-4 rounded-full box-border ${backwardIconStyleMap[version]}`}

package/src/components/Recommendation/RecommendationCard.tsx

@@ -6,6 +6,7 @@ import { BaseTile } from '../BaseTile/BaseTile';
 import { SocialMedia } from '../Footer/SocialMedia';
 import type { UniBlockProps } from '../../types';
 import type { RecommendationCardTypes } from './RecommendationContent';
+import { Heading } from '../../ui-kit/Heading/Heading';
 
 export interface RecommendationCardProps extends RecommendationCardTypes, UniBlockProps {}
 
@@ -21,7 +22,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
           className="flex justify-between"
           title={
             title ? (
-              <h4 className={`font-sans text-title-xs font-normal m-0 mb-3.5`}>{title}</h4>
+              <Heading headingType="h4" as="h3" className="font-normal mb-3.5" title={title} />
             ) : null
           }
           image={image?.src && <Img className="mt-auto ml-7" image={image} />}

package/src/components/Recommendation/RecommendationContent.ts

@@ -17,5 +17,9 @@ export interface RecommendationContent extends HeadingContent {
   /** @title Карточки */
   recommendations?: RecommendationCardTypes[];
   version?: BlockVersion;
+  /**
+   * @title Ссылка
+   * @minItems 3
+   */
   socialMedia?: LinkProps[];
 }

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -31,6 +31,65 @@ export default {
       />
     </div>
   ),
+  'steps-img': (
+    <div className="container grid grid-cols-12">
+      <StepsBlock
+        className="col-span-12"
+        context={context}
+        title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+        showLines={false}
+        steps={[
+          {
+            label: 'В мобильном приложении или интернет-банке',
+            description: 'Для всех клиентов Россельхозбанка',
+            icon: { icon: 'SignDocsIcon' },
+            button: { text: 'Войти в интернет-банк' },
+          },
+          {
+            label: 'Через Госуслуги',
+            description: 'При наличии данных в Единой биометрической системе',
+            icon: { icon: 'ClockIcon' },
+            button: { text: 'Оформить' },
+          },
+          {
+            label: 'В офисах Россельхозбанка',
+            description: 'Откройте вклад',
+            icon: { icon: 'ComfortableCompIcon' },
+            button: { text: 'Офисы на карте' },
+          },
+        ]}
+      />
+    </div>
+  ),
+  'steps-with-btn': (
+    <div className="container grid grid-cols-12">
+      <StepsBlock
+        className="col-span-12"
+        context={context}
+        title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+        showLines={false}
+        steps={[
+          {
+            label: 'В мобильном приложении или интернет-банке',
+            description: 'Для всех клиентов Россельхозбанка',
+            icon: { icon: 'SignDocsIcon' },
+          },
+          {
+            label: 'Через Госуслуги',
+            description: 'При наличии данных в Единой биометрической системе',
+            icon: { icon: 'ClockIcon' },
+          },
+          {
+            label: 'В офисах Россельхозбанка',
+            description: 'Откройте вклад',
+            icon: { icon: 'ComfortableCompIcon' },
+          },
+        ]}
+        button={{ text: 'Отправить заявку' }}
+      />
+    </div>
+  ),
+
   '4 steps': (
     <div className="container grid grid-cols-12">
       <StepsBlock

package/src/components/StepsBlock/StepsBlock.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { joinList } from '../../utils/joinList';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
@@ -8,7 +9,7 @@ import type { Step, StepsBlockContent } from './StepsBlockContent';
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
 export const StepsBlock = JSX<StepsBlockProps>(
-  ({ className = '', title, showLines = true, steps = [], anchor = null }) => {
+  ({ className = '', title, showLines = true, steps = [], button, anchor = null }) => {
     const shortGaps = steps.length > 3;
 
     return (
@@ -32,10 +33,19 @@ export const StepsBlock = JSX<StepsBlockProps>(
               )(steps.map(renderStepIcon))}
             </div>
             <div className={`flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`}>
-              {steps.map(renderStepTitle)}
+              {steps.map((step, i) => renderStepTitle(step, i, Boolean(button?.text)))}
             </div>
           </div>
         ) : null}
+        {button?.text ? (
+          <Button
+            className="box-border mt-[43px] py-3 h-12 w-full max-w-[240px]"
+            version="primary"
+            href="#"
+          >
+            {button.text}
+          </Button>
+        ) : null}
       </section>
     );
   },
@@ -46,25 +56,38 @@ const renderStepIcon = (step: Step, i: number) => {
     <div key={String(i)} className="flex flex-col items-center text-center relative">
       <div className="h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10">
         {(step.icon?.icon && <Img image={step.icon} width="48" height="48" />) || (
-          <span className="font-medium text-title-sm text-secondary-text">{i + 1}</span>
+          <span className="font-normal text-title-sm text-secondary-text">{i + 1}</span>
         )}
       </div>
     </div>
   );
 };
 
-const renderStepTitle = (step: Step, i: number) => {
+const renderStepTitle = (step: Step, i: number, isMainButton: boolean) => {
   return (
     <div
       key={String(i)}
-      className="flex flex-col items-center text-center relative w-[276px] whitespace-pre-line overflow-hidden"
+      className="flex flex-col items-center justify-between text-center relative w-[276px] whitespace-pre-line overflow-hidden"
     >
-      {step.label && <div className="font-medium text-xl m-0 mt-4">{step.label}</div>}
-      {step.description && (
-        <div className={`font-normal text-sm text-secondary-text ${step.label ? 'mt-2' : 'mt-4'}`}>
-          {step.description}
-        </div>
-      )}
+      <div>
+        {step.label && <div className="font-normal text-xl m-0 mt-4">{step.label}</div>}
+        {step.description && (
+          <div
+            className={`font-light text-base text-secondary-text ${step.label ? 'mt-2' : 'mt-4'}`}
+          >
+            {step.description}
+          </div>
+        )}
+      </div>
+      {step?.button?.text && !isMainButton ? (
+        <Button
+          className="box-border mt-[38px] py-3 h-12 w-full max-w-[240px]"
+          version="primary"
+          href="#"
+        >
+          {step.button.text}
+        </Button>
+      ) : null}
     </div>
   );
 };

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,6 +1,7 @@
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
  * @title Шаг
@@ -11,6 +12,7 @@ export interface Step {
   /** @title Описание */
   description?: string;
   icon?: Picture;
+  button?: ButtonProps;
 }
 
 /**
@@ -29,6 +31,7 @@ export interface StepsBlockContent {
    * @maxItems 4
    */
   steps?: Step[];
+  button?: ButtonProps;
   /** @title Размер шагов (моб.) */
   size?: SizeVersion; // TODO: mobile content
   version?: BlockVersion; // TODO: mobile content

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -4,6 +4,7 @@ import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import type { TariffsTableCellData, TariffsTableList } from './TariffsTableContent';
+import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
 
 export interface TariffsTableCellProps {
   cell: TariffsTableCellData[];
@@ -53,6 +54,7 @@ const renderButtons = (buttons: ButtonWithIconProps[]) => (
       <Button
         className={`${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`}
         key={String(idx)}
+        ariaLabel={getButtonAriaLabel(icon)}
         rounded={rounded}
         appendLeft={icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null}
         {...buttonProps}

package/src/components/TariffsTable/TariffsTableTileCell.tsx

@@ -9,6 +9,7 @@ import type {
   TariffsTableList,
   TariffsTableTileCellProps,
 } from './TariffsTableContent';
+import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
 
 export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ header, data }) => {
   return (
@@ -52,6 +53,7 @@ const renderButtons = (buttons: ButtonWithIconProps[]) => (
       <Button
         className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`}
         key={String(idx)}
+        ariaLabel={getButtonAriaLabel(icon)}
         rounded={rounded}
         appendLeft={icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null}
         {...buttonProps}

package/src/components/TariffsTable/utils/getButtonAriaLabel.ts

@@ -0,0 +1,5 @@
+import type { Picture } from '../../../model/Picture';
+import { IconTitleMap } from '../../../icons/IconName';
+
+export const getButtonAriaLabel = (icon: Picture | undefined) =>
+  icon?.alt || icon?.title || IconTitleMap[icon?.icon ? icon.icon : ''];

package/src/components/Tile/Tile.tsx

@@ -50,6 +50,7 @@ export const Tile = JSX<TileProps>((props) => {
           title && (
             <Heading
               headingType={getTileHeadingType(className)}
+              as="h3"
               title={title}
               className={`whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
               ${version === 'primary' ? 'text-primary-text' : ''}`}

package/src/hooks/useLink.ts

@@ -16,7 +16,7 @@ export function useLink(
   return {
     ...link,
     href,
-    ariaLabel: link.text,
+    'aria-label': link.text,
     onClick: handlerDecorator((ev: MouseEvent) => {
       const isLocalHref = href && !isURL(href);
       const isLocalTarget = !link.target || link.target === '_self';

package/src/ui-kit/Button/Button.tsx

@@ -45,21 +45,26 @@ export const RegularButton = JSX<ButtonCommonProps>(
     children,
     onClick,
     ...rest
-  }) => (
-    <a
-      className={`${buttonStyle} inline-block cursor-pointer no-underline ${
-        buttonStyleMap[version] || ''
-      } ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`}
-      href={href}
-      target={target}
-      onClick={onClick}
-      aria-label={ariaLabel}
-      role={href ? 'link' : 'button'}
-      {...rest}
-    >
-      {children}
-    </a>
-  ),
+  }) => {
+    // Pick Button props to prevent forwarding into HTML <a> tag leading to errors being printed in console.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { aboveText, appendLeft, ...linkProps } = rest;
+    return (
+      <a
+        className={`${buttonStyle} inline-block cursor-pointer no-underline ${
+          buttonStyleMap[version] || ''
+        } ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`}
+        href={href}
+        target={target}
+        onClick={onClick}
+        aria-label={ariaLabel}
+        role={href ? 'link' : 'button'}
+        {...linkProps}
+      >
+        {children}
+      </a>
+    );
+  },
 );
 
 const DisabledButton = JSX<ButtonCommonProps>(

package/src/ui-kit/Button/ButtonInner.tsx

@@ -14,7 +14,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {isWithText(props) ? (
         <div>
           <div className="text-m-2xs font-light text-left">{aboveText}</div>
-          <div className="text-button-sm text-left">{text}</div>
+          <div className="text-button text-left">{text}</div>
         </div>
       ) : null}
     </div>

package/src/ui-kit/Heading/Heading.mobile.tsx

@@ -3,6 +3,7 @@ import { HeadingContent, HeadingType, HeadingTypeContent } from './HeadingConten
 
 export interface HeadingProps extends HeadingContent, HeadingTypeContent {
   className?: string;
+  as?: HeadingType;
 }
 
 const HeadingClass: Record<HeadingType, string> = {
@@ -15,11 +16,13 @@ const HeadingClass: Record<HeadingType, string> = {
 };
 
 export const Heading = JSX<HeadingProps>((props) => {
-  const { className, headingType, title } = props;
+  const { className, headingType, title, as } = props;
+
   if (!headingType) {
     return;
   }
-  const Tag = headingType;
+
+  const Tag = as || headingType;
 
   return (
     <Tag className={`font-sans font-medium m-0 ${HeadingClass[headingType]} ${className || ''}`}>

package/src/ui-kit/Heading/Heading.tsx

@@ -3,11 +3,12 @@ import { HeadingContent, HeadingType, HeadingTypeContent } from './HeadingConten
 
 export interface HeadingProps extends HeadingContent, HeadingTypeContent {
   className?: string;
+  as?: HeadingType;
 }
 
 const HEADING_STYLE_MAP: Record<HeadingType, string> = {
   h1: 'text-title-xl tracking-[-0.3px]',
-  h2: 'text-title-lg',
+  h2: 'text-title',
   h3: 'text-title-sm',
   h4: 'text-title-xs',
   h5: 'text-title-2xs tracking-[0.2px]',
@@ -15,11 +16,13 @@ const HEADING_STYLE_MAP: Record<HeadingType, string> = {
 };
 
 export const Heading = JSX<HeadingProps>((props) => {
-  const { className = '', headingType, title } = props;
+  const { className = '', headingType, title, as } = props;
+
   if (!headingType) {
     return;
   }
-  const Tag = headingType;
+
+  const Tag = as || headingType;
 
   return (
     <Tag className={`font-sans m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`}>{title}</Tag>

package/src/utils/changeHashOnScroll.ts

@@ -0,0 +1,15 @@
+import { Router } from '../components/ContentPage/ContentPageContext';
+
+export const changeHashOnScroll = (router: Router, blocks: NodeListOf<Element> | null) => {
+  blocks?.forEach((block) => {
+    const currentHash = globalThis.location.hash;
+    const anchorHash = `#${block?.id}`;
+
+    if (currentHash === anchorHash) return;
+
+    const position = block?.getBoundingClientRect();
+    if (position && position.top > 0 && position.top < 150) {
+      router.replace(`#${block?.id}`);
+    }
+  });
+};

package/src/utils/tableFunc.ts

@@ -0,0 +1,8 @@
+export type Predicate<Input> = (input: Input) => boolean;
+
+export const tableFunc =
+  <Input, Output>(table: Array<[Predicate<Input>, Output]>) =>
+  (input: Input): Output | undefined => {
+    const [, output] = table.find(([predicate]) => predicate(input)) || [];
+    return output;
+  };