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

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/ProductBlock/renderBackwardButton.tsx

@@ -1,6 +1,6 @@
-import { Img } from '../../ui-kit/Img/Img';
-import { Button } from '../../ui-kit/Button/Button';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { Button } from '../../ui-kit/Button/Button';
+import { Img } from '../../ui-kit/Img/Img';
 
 const backwardBgStyleMap: Record<BlockVersion, string> = {
   primary: 'bg-primary-main',
@@ -23,7 +23,6 @@ export function renderBackwardButton(text: string, version: BlockVersion, classN
         <Img
           className={`w-4 h-4 min-w-4 min-h-4 rounded-full box-border ${backwardIconStyleMap[version]}`}
           image={{ icon: 'ArrowLeftIcon' }}
-          color="none"
           width="24"
           height="24"
           asSVG

package/src/components/ProductBlock/renderBenefit.mobile.tsx

@@ -21,7 +21,6 @@ export function renderBenefit(benefit: Benefit, i: number, version: BlockVersion
           width="24"
           height="24"
           asSVG
-          color={version}
         />
       ) : null}
       <div className={`font-medium text-m-title-xs m-0 ${benefitTitleStyleMap[version]}`}>

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/components/Recommendation/RecommendationCard.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
 import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 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 {}
 
@@ -35,7 +35,12 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
               version={version}
             />
           ) : null}
-          <SocialMedia className="pt-[42px] pb-0" media={socialMedia} context={context} />
+          <SocialMedia
+            className="pt-[42px] pb-0"
+            media={socialMedia}
+            version={version}
+            context={context}
+          />
         </BaseTile>
       </section>
     );

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);

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

@@ -1,13 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { projectSettings } from '../../ProjectSettings';
-import type { IconColor, IconProps } from './IconProps';
 import { IconTitleMap } from '../../icons/IconName';
-
-const svgColorsMap: Record<IconColor, string> = {
-  none: '',
-  primary: 'text-white',
-  secondary: 'text-white',
-};
+import { projectSettings } from '../../ProjectSettings';
+import type { IconProps } from './IconProps';
 
 export const Icon = JSX<IconProps>(
   ({
@@ -16,19 +10,13 @@ export const Icon = JSX<IconProps>(
     alt = `Иконка ${IconTitleMap[name] || name}`,
     title = alt,
     asSVG,
-    color = 'primary',
     ...imgProps
   }) => {
     const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
 
     if (asSVG) {
       return (
-        <svg
-          className={`${svgColorsMap[color]} ${className}`}
-          {...imgProps}
-          aria-hidden="true"
-          style={color === 'secondary' ? { filter: 'invert(1)' } : null}
-        >
+        <svg className={className} {...imgProps} aria-hidden="true">
           {title ? <title>{title}</title> : null}
           {alt ? <desc>{alt}</desc> : null}
           <use href={`${href}#icon`} xlinkHref={`${href}#icon`} />

package/src/ui-kit/Icon/IconProps.ts

@@ -2,12 +2,6 @@ import type { IconName } from '../../icons/IconName';
 
 export type { IconName };
 
-/**
- * @title Цвет иконки (svg)
- * @enumNames ["Нет", "Основной", "Второстепенный"]
- */
-export type IconColor = 'none' | 'primary' | 'secondary';
-
 export interface IconCompatibilityFields {
   /** @title Альтернативный текст (alt) */
   alt?: string;
@@ -19,8 +13,6 @@ export interface IconCompatibilityFields {
   height?: string;
   /** @hidden */
   asSVG?: boolean;
-  /** @hidden */
-  color?: IconColor;
 }
 
 export type IconProps = IconCompatibilityFields & {

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ListItem } from './ListItem';
-import type { ListProps, ListItemVersion } from './ListProps';
+import type { ListItemVersion, ListProps } from './ListProps';
 
 const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
   primary: 'text-primary-text',

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

@@ -41,7 +41,7 @@ export const Logo = JSX<Partial<LogoProps>>(
           paths={LOGO_PATHS.map((d) => ({ d }))}
         />
         {!hideTitle && (
-          <span className={`${TEXT_COLOR[bgColor]} text-m-title-xs font-medium ml-2.5`}>
+          <span className={`${TEXT_COLOR[bgColor]} font-medium ml-2.5`}>
             {children || 'Россельхозбанк'}
           </span>
         )}

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

@@ -40,7 +40,11 @@ const renderTab =
   };
 
 const renderIcon = (tab: Tab, isActive: boolean) => (
-  <div className="h-full mt-1" style={isActive ? { filter: 'invert(1)' } : null}>
-    <Img className="w-5 h-5 mr-3" image={tab?.icon || 'CardIcon'} asSVG={!isActive} />
+  <div className="h-full mt-1">
+    <Img
+      className={`w-5 h-5 mr-3 ${isActive ? 'invert-full' : ''}`}
+      image={tab?.icon || 'CardIcon'}
+      asSVG={!isActive}
+    />
   </div>
 );