@redneckz/wildless-cms-uni-blocks 0.4.0 → 0.4.2

package/mobile/src/components/PromoTile/PromoTile.tsx

@@ -1,14 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
-import type { PromoTileContent } from './PromoTileContent';
 import { Headline } from '../Headline/Headline';
+import type { PromoTileContent } from './PromoTileContent';
 
 export interface PromoTileProps extends PromoTileContent, UniBlockProps {}
 
@@ -48,13 +48,14 @@ export const PromoTile = JSX<PromoTileProps>(
                   headlineVersion={getTileHeadingType(className)}
                   bgColorHeadline={version}
                   align="left"
+                  as="h2"
                 />
               </div>
             ) : null
           }
           buttons={
             buttons?.length ? (
-              <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+              <ButtonSection context={context} buttons={buttons} className="flex gap-3" />
             ) : null
           }
         >

package/mobile/src/components/Recommendation/RecommendationCard.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';

package/mobile/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -1,4 +1,4 @@
-import { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 export type StyleType = {
   background: string;

package/mobile/src/components/Tile/Tile.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
-import type { TileContent } from './TileContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Description } from '../../ui-kit/Description/Description';
@@ -11,6 +10,7 @@ import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
+import type { TileContent } from './TileContent';
 
 export interface TileProps extends TileContent, UniBlockProps {
   role?: string;
@@ -51,7 +51,7 @@ export const Tile = JSX<TileProps>((props) => {
           title ? (
             <Heading
               headingType={headingType}
-              as="h3"
+              as="h2"
               title={title}
               className={`whitespace-pre-wrap max-w-[600px] text-h4
               ${version === 'primary' ? 'text-primary-text' : ''}`}

package/mobile/src/components/__snapshots__/Blocks.spec.tsx.snap

@@ -109,7 +109,7 @@ exports[`Blocks ExchangeRateTile should render block "ExchangeRateTile" without
       class="flex grow w-full justify-between"
     >
       <div
-        class="flex flex-col justify-between w-full"
+        class="flex flex-col w-full"
       >
         <div>
           <div
@@ -522,25 +522,6 @@ exports[`Blocks Headline should render block "Headline" without content 1`] = `
 />
 `;
 
-exports[`Blocks Insurance should render block "Insurance" without content 1`] = `
-<section
-  class="px-[100px] py-[50px] bg-white text-primary-text font-sans "
->
-  <section
-    class="font-sans flex flex-col p-[50px] gap-3 bg-transparent !p-0"
-  />
-  <div>
-    <div
-      class="mx-auto flex justify-center gap-[122px] mt-[30px]"
-    >
-      <div
-        class="w-[558px] m-auto"
-      />
-    </div>
-  </div>
-</section>
-`;
-
 exports[`Blocks InsuranceAmountBlock should render block "InsuranceAmountBlock" without content 1`] = `
 <section
   class="box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white "
@@ -610,7 +591,7 @@ exports[`Blocks MobileAppTile should render block "MobileAppTile" without conten
       class="flex grow w-full justify-between"
     >
       <div
-        class="flex flex-col justify-between w-full"
+        class="flex flex-col w-full"
       >
         <div>
           <div
@@ -655,12 +636,16 @@ exports[`Blocks PictureText should render block "PictureText" without content 1`
 <section
   class="relative font-sans p-14 bg-white text-primary-text "
 >
-  <h3
-    class="font-sans m-0 text-h2 text-center"
+  <section
+    class="font-sans flex flex-col p-[50px] gap-3 bg-white !p-0"
   />
   <div
-    class="flex justify-center mt-9"
-  />
+    class="flex justify-center gap-[122px] mt-[30px]"
+  >
+    <div
+      class="w-[558px] m-auto"
+    />
+  </div>
 </section>
 `;
 
@@ -721,7 +706,7 @@ exports[`Blocks ProductBlock should render block "ProductBlock" without content
           class="flex grow w-full justify-between"
         >
           <div
-            class="flex flex-col justify-between w-full"
+            class="flex flex-col w-full"
           >
             <div />
           </div>
@@ -743,7 +728,7 @@ exports[`Blocks ProductGallery should render block "ProductGallery" without cont
     style="transform: translateX(-000%);"
   />
   <div
-    class="flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border"
+    class="flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28"
   />
 </section>
 `;
@@ -759,7 +744,7 @@ exports[`Blocks ProductTile should render block "ProductTile" without content 1`
       class="font-sans flex flex-col p-[50px] gap-2 bg-white !p-0"
     />
     <div
-      class="flex mt-4"
+      class="flex mt-3.5"
     />
   </div>
 </section>
@@ -787,7 +772,7 @@ exports[`Blocks PromoTile should render block "PromoTile" without content 1`] =
       class="flex grow w-full justify-between"
     >
       <div
-        class="flex flex-col justify-between w-full"
+        class="flex flex-col w-full"
       >
         <div>
           <div
@@ -1203,7 +1188,7 @@ exports[`Blocks Tile should render block "Tile" without content 1`] = `
       class="flex grow w-full justify-between"
     >
       <div
-        class="flex flex-col justify-between w-full"
+        class="flex flex-col w-full"
       >
         <div />
       </div>

package/mobile/src/hooks/useLikeService.ts

@@ -1,10 +1,7 @@
 import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { LikeAPI } from '../api/LikeAPI';
 
-const ASSIST_BASE_URL = process.env.NEXT_PUBLIC_ASSIST_BASE_URL || '';
-const PROJECT_ID = process.env.NEXT_PUBLIC_PROJECT_ID || '';
-
-const api = LikeAPI(PROJECT_ID, ASSIST_BASE_URL);
+const api = LikeAPI();
 
 export function useLikeService(pagePath: string) {
   const [likeCount, setLikeCount] = useState(0);

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

@@ -0,0 +1,58 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BenefitItemProps, BenefitItemCommonProps } from './BenefitItemProps';
+import { Img } from '../Img/Img';
+import type { BlockVersion } from '../../model/BlockVersion';
+
+export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
+
+const titleStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-primary-text',
+  secondary: 'text-white',
+};
+const descStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white',
+};
+
+export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
+  const {
+    className = '',
+    icon,
+    label,
+    description,
+    version = 'primary',
+    benefitsVersion = 'normal',
+  } = props;
+
+  const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
+
+  return (
+    <div className={`flex items-center gap-5 ${className}`}>
+      {icon ? (
+        <Img
+          className={renderBenefitIconBgStyle(version, benefitsVersion)}
+          image={{ ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
+          asSVG
+        />
+      ) : null}
+      <div className="gap-0.5">
+        {label ? <div className={`text-h6 ${titleStyleMap[version]}`}>{label}</div> : null}
+        {description ? (
+          <div className={`text-m-light ${descStyleMap[version]}`}>{description}</div>
+        ) : null}
+      </div>
+    </div>
+  );
+});
+
+function renderBenefitIconBgStyle(version, benefitsVersion) {
+  let bgColorStyle = 'bg-primary-main text-black';
+
+  if (version === 'secondary') {
+    bgColorStyle = 'bg-white/30 text-black';
+  } else if (benefitsVersion === 'normal') {
+    bgColorStyle = 'bg-secondary-light text-primary-main';
+  }
+
+  return `w-[50px] h-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
+}

package/mobile/src/ui-kit/BenefitItem/BenefitItemProps.ts

@@ -0,0 +1,27 @@
+import type { Picture } from '../../model/Picture';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { IconVersion } from '../../model/IconVersion';
+
+export interface BenefitItemCommonProps {
+  benefitsVersion?: IconVersion;
+  /** @hidden */
+  version?: BlockVersion;
+  /** @hidden */
+  className?: string;
+}
+
+export type BenefitItemProps = {
+  icon?: Picture;
+  /** @title Название */
+  label?: string;
+  /** @title Описание */
+  description?: string;
+};
+
+/**
+ * @title Преимущество
+ */
+export type BenefitsProps = BenefitItemCommonProps & {
+  /** @title Список преимуществ */
+  benefits?: BenefitItemProps[];
+};

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

@@ -46,7 +46,7 @@ export const Foldable = JSX<FoldableProps>(
 
     const buttonClassName =
       foldButtonClasses ||
-      'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-l flex justify-center cursor-pointer';
+      'border-none bg-primary-main hover:bg-primary-hover px-0 py-[26px] mb-[1px] w-full font-sans text-white text-h4 flex justify-center cursor-pointer';
     const getFoldButtonLabel = isActive ? 'Скрыть' : foldButtonLabel;
 
     return blocks ? (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/ProjectSettings.ts

@@ -3,10 +3,9 @@ export interface ProjectSettings {
   RC_BRANCH?: string;
   PROD_BRANCH: string;
   FORCED_DRAFT_FLOW: boolean;
-  ENABLE_ASSIST?: boolean;
+  ASSIST_PROJECT_ID?: string;
   SITEMAP?: string;
   CDN?: string; // Should ends with "/"
-  CREDIT_CALCULATOR?: string;
 }
 
 export const projectSettings = new (class implements ProjectSettings {
@@ -31,8 +30,8 @@ export const projectSettings = new (class implements ProjectSettings {
   get FORCED_DRAFT_FLOW() {
     return this._.FORCED_DRAFT_FLOW;
   }
-  get ENABLE_ASSIST() {
-    return this._.ENABLE_ASSIST;
+  get ASSIST_PROJECT_ID() {
+    return this._.ASSIST_PROJECT_ID;
   }
   get SITEMAP() {
     return this._.SITEMAP;

package/src/api/LikeAPI.ts

@@ -1,3 +1,5 @@
+import { projectSettings } from '../ProjectSettings';
+
 interface UserData {
   token: string;
   name: string;
@@ -11,7 +13,7 @@ const AUTH_PREFIX = 'guest';
 const STORAGE_KEY = 'likesToken';
 
 // eslint-disable-next-line max-lines-per-function
-export function LikeAPI(projectId: string, baseURL = '') {
+export function LikeAPI() {
   async function getLikeCount(...nodeIds: string[]): Promise<LikeData[]> {
     if (!nodeIds.length) {
       return [];
@@ -21,7 +23,7 @@ export function LikeAPI(projectId: string, baseURL = '') {
 
     try {
       const response = await fetch(
-        `${baseURL}/assist/v1/public/projects/${projectId}/nodes/likes`,
+        `/assist/v1/public/projects/${projectSettings.ASSIST_PROJECT_ID}/nodes/likes`,
         {
           method: 'POST',
           mode: 'cors',
@@ -50,19 +52,22 @@ export function LikeAPI(projectId: string, baseURL = '') {
     const { token: Authorization, name } = await auth();
 
     try {
-      const response = await fetch(`${baseURL}/assist/v1/public/projects/${projectId}/nodes/like`, {
-        method: 'POST',
-        mode: 'cors',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization,
-          UserID: name,
+      const response = await fetch(
+        `/assist/v1/public/projects/${projectSettings.ASSIST_PROJECT_ID}/nodes/like`,
+        {
+          method: 'POST',
+          mode: 'cors',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization,
+            UserID: name,
+          },
+          body: JSON.stringify({
+            node_id: nodeId,
+            user_name: name,
+          }),
         },
-        body: JSON.stringify({
-          node_id: nodeId,
-          user_name: name,
-        }),
-      });
+      );
       const { likes } = await response.json();
 
       return likes || 0;
@@ -82,7 +87,7 @@ export function LikeAPI(projectId: string, baseURL = '') {
 
     try {
       const response = await fetch(
-        `${baseURL}/assist/v1/public/projects/${projectId}/nodes/unlike`,
+        `/assist/v1/public/projects/${projectSettings.ASSIST_PROJECT_ID}/nodes/unlike`,
         {
           method: 'POST',
           mode: 'cors',
@@ -118,7 +123,7 @@ export function LikeAPI(projectId: string, baseURL = '') {
     }
 
     try {
-      const response = await fetch(`${baseURL}/assist/v1/public/auth`, {
+      const response = await fetch(`/assist/v1/public/auth`, {
         method: 'POST',
         mode: 'cors',
         headers: {

package/src/components/Accordion/Accordion.tsx

@@ -33,6 +33,7 @@ export const Accordion = JSX<AccordionProps>(
         {title ? (
           <Heading
             headingType="h3"
+            as="h2"
             className={`mb-2.5 ${ALIGN_TITLE[accordionAlignTitle]}`}
             title={title}
           />

package/src/components/BaseTile/BaseTile.tsx

@@ -10,9 +10,9 @@ export const BaseTile = JSX<BaseTileProps>(
       <div className={`font-sans flex flex-col grow h-full items-start ${className}`}>
         {title}
         <div className="flex grow w-full justify-between">
-          <div className="flex flex-col justify-between w-full">
+          <div className="flex flex-col w-full">
             <div>{children}</div>
-            {buttons ? <div>{buttons}</div> : null}
+            {buttons ? <div className="mt-9">{buttons}</div> : null}
           </div>
           {image}
         </div>

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -4,7 +4,7 @@ import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { BenefitItemProps, BenefitsBlockContent } from './BenefitsBlockContent';
-import { DescriptionType, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
+import { DescriptionDef, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
@@ -53,7 +53,7 @@ const renderStep = (benefit: BenefitItemProps, i: number) => {
   );
 };
 
-const renderDescription = (description?: DescriptionType) => {
+const renderDescription = (description?: DescriptionDef) => {
   const benefitType = description ? description?.benefitType : null;
   if (!benefitType) {
     return null;

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -32,7 +32,7 @@ export type ListBenefitDef = {
 /**
  * @title Вид контента
  */
-export type DescriptionType = EmptyOption | TextBenefitDef | ListBenefitDef;
+export type DescriptionDef = EmptyOption | TextBenefitDef | ListBenefitDef;
 
 /**
  * @title Преимущество
@@ -41,7 +41,7 @@ export interface BenefitItemProps {
   /** @title Название */
   label?: string;
   /** @title Описание */
-  description?: DescriptionType;
+  description?: DescriptionDef;
   icon?: Picture;
 }
 

package/src/components/BlockContent.ts

@@ -8,7 +8,6 @@ import type { GalleryContent } from './Gallery/GalleryContent';
 import type { GracePeriodContent } from './GracePeriod/GracePeriodContent';
 import type { GroupBlockContent } from './GroupBlock/GroupBlockContent';
 import type { HeaderContent } from './Header/HeaderContent';
-import type { InsuranceContent } from './Insurance/InsuranceContent';
 import type { InsuranceAmountBlockContent } from './InsuranceAmountBlock/InsuranceAmountBlockContent';
 import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { LinkListContent } from './LinkList/LinkListContent';
@@ -57,5 +56,4 @@ export type BlockContent =
   | LinkListContent
   | GroupBlockContent
   | BonusBenefitsBlockContent
-  | InsuranceContent
   | SafeDepositRentalContent;

package/src/components/Blocks.ts

@@ -12,7 +12,6 @@ import { GracePeriod } from './GracePeriod/GracePeriod';
 import { GroupBlock } from './GroupBlock/GroupBlock';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
-import { Insurance } from './Insurance/Insurance';
 import { InsuranceAmountBlock } from './InsuranceAmountBlock/InsuranceAmountBlock';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
@@ -47,7 +46,6 @@ export const Blocks = {
   GracePeriod,
   Header,
   Headline,
-  Insurance,
   InsuranceAmountBlock,
   LinkDocs,
   MiniGallery,

package/src/components/ContentPage/ContentPage.page.json

@@ -1947,12 +1947,51 @@
           "alt": "Варианты потребительского кредита",
           "format": "webp",
           "size": {
-            "width": 200,
-            "height": 200
+            "width": 400,
+            "height": 300
           }
         }
       }
     },
+    {
+      "type": "PictureText",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Страховые риски и продукты",
+        "description": "Описание",
+        "sum": 500000,
+        "image": {
+          "src": "insurance.png",
+          "title": "страхование",
+          "format": "webp",
+          "alt": "Страховые риски и продукты",
+          "size": {
+            "width": 400,
+            "height": 300
+          },
+          "sources": [
+            {
+              "src": "insurance.png 1x, insurance-2x.png 2x",
+              "format": "png"
+            }
+          ]
+        },
+        "benefits": [
+          {
+            "label": "Ликвидация организации",
+            "icon": {
+              "icon": "ShieldTickIcon"
+            }
+          },
+          {
+            "label": "Сокращение численности работников организации",
+            "icon": {
+              "icon": "ShieldTickIcon"
+            }
+          }
+        ]
+      }
+    },
     {
       "type": "Recommendation",
       "style": ["col-span-12"],
@@ -2144,45 +2183,6 @@
         ]
       }
     },
-    {
-      "type": "Insurance",
-      "style": ["col-span-12"],
-      "content": {
-        "title": "Страховые риски и продукты",
-        "description": "Описание",
-        "sum": 500000,
-        "image": {
-          "src": "insurance.png",
-          "title": "страхование",
-          "format": "webp",
-          "alt": "Страховые риски и продукты",
-          "size": {
-            "width": 400,
-            "height": 300
-          },
-          "sources": [
-            {
-              "src": "insurance.png 1x, insurance-2x.png 2x",
-              "format": "png"
-            }
-          ]
-        },
-        "benefits": [
-          {
-            "label": "Ликвидация организации",
-            "icon": {
-              "icon": "ShieldTickIcon"
-            }
-          },
-          {
-            "label": "Сокращение численности работников организации",
-            "icon": {
-              "icon": "ShieldTickIcon"
-            }
-          }
-        ]
-      }
-    },
     {
       "type": "InsuranceAmountBlock",
       "style": ["col-span-12"],

package/src/components/Footer/MediaButton.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import { Img } from '../../ui-kit/Img/Img';
 

package/src/components/Footer/SocialMedia.mobile.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
 import { MediaButton } from './MediaButton';

package/src/components/Footer/SocialMedia.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
 import { MediaButton } from './MediaButton';

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { ListOrientation } from '../../model/ListOrientation';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';

package/src/components/Gallery/GalleryContainer.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { GalleryVersion } from '../../model/GalleryVersion';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { cardStyleMap, cardVersionMap, cardWidthMap, galleryLengthForScrollMap } from './constants';
 import { GalleryCardInner } from './GalleryCardInner';

package/src/components/LinkDocs/LinkDocs.tsx

@@ -37,6 +37,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
           context={context}
           align={align}
           headlineVersion="M"
+          as="h2"
         />
         <LinkDocsList
           className={`mt-8 ${linkColumnsModeStyleMap[columnsMode]}`}