@redneckz/wildless-cms-uni-blocks 0.3.43 → 0.3.44

package/mobile/src/components/OtherProducts/OtherProductsContent.ts

@@ -1,3 +1,4 @@
+import type { ColorPalette } from '../../types';
 import type { BlockDef, ColumnsCount } from '../../ui-kit/BlocksList/BlocksListProps';
 
 /**
@@ -29,4 +30,5 @@ export interface OtherProductsContent {
    * @maxItems 10
    */
   blockItems?: blockItemCommonProps[];
+  colorPalette?: ColorPalette;
 }

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -33,7 +33,7 @@ export const ProductTile = JSX<ProductTileProps>(
   }) => {
     return (
       <section
-        className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${
+        className={`bg-white overflow-hidden text-primary-text font-sans p-9 box-border ${className} ${
           productTileStyleMap[version]
         } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
         id={anchor}

package/mobile/src/content-page-repository/transformPicture.ts

@@ -36,7 +36,11 @@ async function transformImg(
 
   const imgPath = `${path.dirname(pagePath)}/${src}`;
   let chain = sharp(imgPath);
-  if (size) chain = chain.resize(size);
+  if (size)
+    chain = chain.resize(size?.width, size?.height, {
+      fit: sharp.fit.contain,
+      background: [0, 0, 0, 0],
+    });
   if (format) chain = chain.toFormat(format, options);
 
   const transformedSrc = transformSrc(src, transformationOptions);

package/package.json

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

package/src/components/Footer/Footer.tsx

@@ -26,7 +26,7 @@ export const Footer = JSX<FooterProps>(
     anchor = null,
   }) => {
     return (
-      <footer className={`px-9 pt-9 pb-8 bg-white ${className || ''}`} id={anchor}>
+      <footer className={`px-9 pt-9 pb-10 bg-white ${className || ''}`} id={anchor}>
         <div className="flex items-stretch gap-[54px] pb-[30px] xl:gap-8">
           <Logo className={LEFT_COL_WIDTH_FULL_HD} />
           <SearchBar context={context} className="grow" />
@@ -43,7 +43,7 @@ export const Footer = JSX<FooterProps>(
           </div>
           <Sitemap className="pt-[3px]" context={context} items={topItems} />
         </div>
-        <HorizontalNavigation className="mt-24" links={relatedEnterprises} context={context} />
+        <HorizontalNavigation className="mt-[98px]" links={relatedEnterprises} context={context} />
         <TextInformation links={documents} context={context} />
       </footer>
     );

package/src/components/LinkDocs/LinkDocs.tsx

@@ -35,7 +35,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     anchor = null,
   }) => {
     return (
-      <section className={`font-sans text-primary-text p-12 bg-white ${className}`} id={anchor}>
+      <section className={`font-sans text-primary-text p-[50px] bg-white ${className}`} id={anchor}>
         {title ? (
           <Heading
             headingType="h2"

package/src/components/LinkDocs/LinkDocsListItem.tsx

@@ -5,7 +5,7 @@ import { LinkDocsListItemBase } from './LinkDocsListItemBase';
 export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
   <LinkDocsListItemBase
     className={`flex h-full box-border ${className}`}
-    iconClassName="mr-3.5 min-w-6 min-h-6 text-primary-text"
+    iconClassName="mr-2.5 min-w-6 min-h-6 text-primary-text"
     textClassName="self-center font-light"
     suffixClassName="text-secondary-text group-hover:text-primary-main"
     doc={doc}

package/src/components/OtherProducts/OtherProducts.fixture.tsx

@@ -1,26 +1,26 @@
 import { context } from '../../setup-fixture';
-import { PRODUCT_BLOCK } from '../ProductBlock/ProductBlock.fixture';
-import { PRODUCT_TILE, PRODUCT_PENSION_TILE } from '../ProductTile/ProductTile.fixture';
-import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
-import { TILE, TILE_PREMIUM } from '../Tile/Tile.fixture';
+import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
 import { HEADLINE } from '../Headline/Headline.fixture';
-import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
-import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
 import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
-import { OtherProducts } from './OtherProducts';
+import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
+import { PRODUCT_BLOCK } from '../ProductBlock/ProductBlock.fixture';
+import { PRODUCT_PENSION_TILE, PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
+import { TILE, TILE_PREMIUM } from '../Tile/Tile.fixture';
 import type { OtherProductsProps } from './OtherProducts';
+import { OtherProducts } from './OtherProducts';
 
 import type {
-  ProductBlockBlockListDef,
-  ProductTileBlockListDef,
-  TextBlockBlockListDef,
-  TileBlockListDef,
   GalleryBlockListDef,
   HeadlineBlockListDef,
   LinkDocsBlockListDef,
   MiniGalleryBlockListDef,
   PictureTextBlockListDef,
+  ProductBlockBlockListDef,
+  ProductTileBlockListDef,
+  TextBlockBlockListDef,
+  TileBlockListDef,
 } from '../../ui-kit/BlocksList/BlocksListProps';
 
 const TEXT_BLOCK_OTHER_BLOCK: TextBlockBlockListDef = {
@@ -80,6 +80,7 @@ const MINI_GALLERY_OTHER_BLOCK: MiniGalleryBlockListDef = {
 
 const propsBlock: OtherProductsProps = {
   context,
+  colorPalette: 'pc',
   blockItems: [
     {
       label: 'OtherProducts №1 Tiles',

package/src/components/OtherProducts/OtherProducts.tsx

@@ -5,16 +5,21 @@ import { OtherProductsItem } from './OtherProductsItem';
 
 export interface OtherProductsProps extends OtherProductsContent, UniBlockProps {}
 
-export const OtherProducts = JSX<OtherProductsProps>(({ blockItems, context, className }) => {
-  return (
-    <section className={`font-sans bg-white text-primary-text ${className || ''}`}>
-      {blockItems?.length ? (
-        <div className="list-none m-0 p-0">
-          {blockItems.map((item, i) => (
-            <OtherProductsItem key={`BlockItem${i}`} {...item} context={context} />
-          ))}
-        </div>
-      ) : null}
-    </section>
-  );
-});
+export const OtherProducts = JSX<OtherProductsProps>(
+  ({ blockItems, colorPalette, context, className = "" }) => {
+    return (
+      <section
+        data-theme={colorPalette || null}
+        className={`font-sans bg-white text-primary-text ${className}`}
+      >
+        {blockItems?.length ? (
+          <div className="list-none m-0 p-0">
+            {blockItems.map((item, i) => (
+              <OtherProductsItem key={`BlockItem${i}`} {...item} context={context} />
+            ))}
+          </div>
+        ) : null}
+      </section>
+    );
+  },
+);

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -1,3 +1,4 @@
+import type { ColorPalette } from '../../types';
 import type { BlockDef, ColumnsCount } from '../../ui-kit/BlocksList/BlocksListProps';
 
 /**
@@ -29,4 +30,5 @@ export interface OtherProductsContent {
    * @maxItems 10
    */
   blockItems?: blockItemCommonProps[];
+  colorPalette?: ColorPalette;
 }

package/src/components/ProductBlock/ProductBlock.tsx

@@ -34,7 +34,7 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
 
   return (
     <section
-      className={`font-sans pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap[version]} ${className}`}
+      className={`font-sans overflow-hidden pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap[version]} ${className}`}
       id={anchor}
     >
       {renderBackwardButton('Все дебетовые карты', version, 'mb-10')}

package/src/components/ProductTile/ProductTile.tsx

@@ -33,7 +33,7 @@ export const ProductTile = JSX<ProductTileProps>(
   }) => {
     return (
       <section
-        className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${
+        className={`bg-white overflow-hidden text-primary-text font-sans p-9 box-border ${className} ${
           productTileStyleMap[version]
         } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
         id={anchor}

package/src/content-page-repository/transformPicture.ts

@@ -36,7 +36,11 @@ async function transformImg(
 
   const imgPath = `${path.dirname(pagePath)}/${src}`;
   let chain = sharp(imgPath);
-  if (size) chain = chain.resize(size);
+  if (size)
+    chain = chain.resize(size?.width, size?.height, {
+      fit: sharp.fit.contain,
+      background: [0, 0, 0, 0],
+    });
   if (format) chain = chain.toFormat(format, options);
 
   const transformedSrc = transformSrc(src, transformationOptions);