@redneckz/wildless-cms-uni-blocks 0.2.116 → 0.3.0

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -1,8 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import { Tile } from '../Tile/Tile';
+import { BaseTile } from '../BaseTile/BaseTile';
+import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
+import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
+import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { ExchangeRateTileContent } from './ExchangeRateTileContent';
 
 export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
@@ -23,42 +28,46 @@ const buttons: ButtonProps[] = [
   },
 ];
 
-export const ExchangeRateTile = JSX<ExchangeRateTileProps>(({ className, context, title }) => {
-  const { data } = context.useAsyncData(CBR_EXCHANGE_RATE_URL, fetchExchangeRate);
-  return (
-    <Tile
-      className={className}
-      context={context}
-      title={title || 'Курсы обмена валют'}
-      buttons={buttons}
-    >
-      <table>
-        <thead>
-          <tr>
-            <CurrencyTH>Валюта</CurrencyTH>
-            <CurrencyTH className="pl-11">Курс</CurrencyTH>
-          </tr>
-        </thead>
-        <tbody>
-          {CURRENCY_CODES.map((code) => {
-            const value = (data?.Valute || {})[code]?.Value;
-            return (
-              <tr key={code}>
-                <CurrencyTD className="pt-4">
-                  <div className="flex items-center">
-                    <Icon name={CURRENCY_ICONS_MAP[code]} width="24" height="24" />
-                    <span className="ml-2">{code}</span>
-                  </div>
-                </CurrencyTD>
-                <CurrencyTD className="pt-4 pl-11">{formatCurrency(value)}</CurrencyTD>
+export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
+  ({ className = '', context, title = 'Курсы обмена валют' }) => {
+    const { data } = context.useAsyncData(CBR_EXCHANGE_RATE_URL, fetchExchangeRate);
+    return (
+      <section
+        className={`bg-white text-primary-text font-sans p-9 box-border ${className}  ${getTileRightPadding(
+          className,
+        )} ${getTileMinHeight(className)} `}
+      >
+        <BaseTile
+          context={context}
+          title={
+            title && (
+              <Heading
+                headingType={getTileHeadingType(className)}
+                title={title}
+                className={`whitespace-pre-wrap max-w-[600px]`}
+              />
+            )
+          }
+          buttons={
+            buttons?.length ? (
+              <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+            ) : null
+          }
+        >
+          <table>
+            <thead>
+              <tr>
+                <CurrencyTH>Валюта</CurrencyTH>
+                <CurrencyTH className="pl-11">Курс</CurrencyTH>
               </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </Tile>
-  );
-});
+            </thead>
+            <tbody>{CURRENCY_CODES.map(renderCurrencyRow(data))}</tbody>
+          </table>
+        </BaseTile>
+      </section>
+    );
+  },
+);
 
 const CurrencyTH = JSX<{ className?: string }>(({ className = '', children }) => (
   <th className={`text-left font-normal text-sm text-secondary-text ${className}`}>{children}</th>
@@ -78,3 +87,18 @@ async function fetchExchangeRate(): Promise<{
 const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
 
 const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(value) : '');
+
+const renderCurrencyRow = (data) => (code: string) => {
+  const value = (data?.Valute || {})[code]?.Value;
+  return (
+    <tr key={code}>
+      <CurrencyTD className="pt-4">
+        <div className="flex items-center">
+          <Icon name={CURRENCY_ICONS_MAP[code]} width="24" height="24" />
+          <span className="ml-2">{code}</span>
+        </div>
+      </CurrencyTD>
+      <CurrencyTD className="pt-4 pl-11">{formatCurrency(value)}</CurrencyTD>
+    </tr>
+  );
+};

package/src/components/ExchangeRateTile/ExchangeRateTileContent.ts

@@ -1,7 +1,6 @@
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+
 /**
  * @title Курсы валют
  */
-export interface ExchangeRateTileContent {
-  /** @title Заголовок */
-  title?: string;
-}
+export type ExchangeRateTileContent = HeadingContent;

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

@@ -0,0 +1,103 @@
+import { BlockVersion } from '../../model/BlockVersion';
+import type { Picture } from '../../model/Picture';
+import { context } from '../../setup-fixture';
+import type { ButtonCommonProps } from '../../ui-kit/Button/Button';
+import { Gallery } from './Gallery';
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  size: {
+    width: 150,
+    height: 150,
+  },
+  title: 'money',
+};
+
+const buttonPrimary: ButtonCommonProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'secondary',
+};
+const link: ButtonCommonProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'link',
+};
+
+const defaultItems = [
+  { title: 'До 1 млн ₽', text: 'Кредитный лимит' },
+  { title: 'От 16,9%', text: 'Ставка по кредиту' },
+  { title: 'До 15% ', text: 'Кэшбэк от покупок' },
+];
+
+const cards = [
+  {
+    image,
+    title: 'Вклады в любой валюте',
+    description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
+    button: link,
+  },
+  {
+    image,
+    title: 'Вклады в любой валюте',
+    description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
+  },
+  {
+    image,
+    title: 'Вклады в любой валюте',
+    itemsMobile: defaultItems,
+  },
+  {
+    title: 'Вклады в любой валюте',
+    description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
+  },
+  {
+    image,
+    title: 'Вклады в любой валюте',
+  },
+  {
+    image,
+    title: 'Вклады в любой валюте',
+    description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
+    button: buttonPrimary,
+  },
+  {
+    image,
+    title: 'Вклады в любой валюте',
+    description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
+    button: buttonPrimary,
+    version: 'secondary' as BlockVersion,
+  },
+];
+
+const defaultProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  isScroll: false,
+  context,
+  cards: cards,
+};
+
+const scrollProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  isScroll: true,
+  context,
+  cards: cards,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Gallery className="col-span-12" {...defaultProps} />
+    </div>
+  ),
+  scroll: (
+    <div className="container grid grid-cols-12">
+      <Gallery className="col-span-12" {...scrollProps} />
+    </div>
+  ),
+};

package/src/components/Gallery/Gallery.fixture.tsx

@@ -22,12 +22,12 @@ const buttonPrimary: ButtonCommonProps = {
 };
 
 const defaultItems = [
-  'Качественные фермерские продукты напрямую от производителей',
-  'Самая большая база сельских туров по России',
-  'Площадки для создания комфортной жизни за городом',
+  { text: 'Качественные фермерские продукты напрямую от производителей' },
+  { text: 'Самая большая база сельских туров по России' },
+  { text: 'Площадки для создания комфортной жизни за городом' },
 ];
 
-const defaultProps: GalleryProps = {
+export const defaultProps: GalleryProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
   context,
@@ -39,6 +39,7 @@ const defaultProps: GalleryProps = {
       image,
       button: buttonPrimary,
       items: defaultItems,
+      version: 'secondary',
     },
     {
       title: 'Более 1000 развлечений',

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

@@ -1,33 +1,49 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+import { BlockVersion } from '../../model/BlockVersion';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img';
+import { Img } from '../../ui-kit/Img/Img';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import type { GalleryCard } from './GalleryContent';
+import { GalleryItem } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
 
-export const Gallery = JSX<GalleryProps>(({ title, description, cards = [], className }) => {
-  return (
-    <section
-      className={`relative font-sans text-primary-text bg-white p-4 overflow-hidden ${className}`}
-    >
-      <div className="flex flex-col items-center mb-8">
-        <Heading type="h2" className="text-center" text={title} />
-        {description ? (
-          <div className="font-normal text-base max-w-[600px] mt-3">{description}</div>
-        ) : null}
-      </div>
-      <div className="horizontal-list no-scrollbar" role="list">
-        {cards?.map(renderCard)}
-      </div>
-    </section>
+const blockStyle: Record<BlockVersion, string> = {
+  primary: 'bg-white',
+  secondary: 'bg-primary-main text-white',
+};
+
+export const Gallery = JSX<GalleryProps>(
+  ({ context, title, description, cards = [], className, isScroll = true }) => {
+    return (
+      <section
+        className={`relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`}
+      >
+        <div className="flex flex-col items-center mb-5">
+          <Heading headingType="h2" className="text-center" title={title} />
+          {description ? (
+            <div className="font-normal text-m-md max-w-[600px] mt-2">{description}</div>
+          ) : null}
+        </div>
+        {renderCardsLayout(isScroll, cards, context)}
+      </section>
+    );
+  },
+);
+
+function renderCardsLayout(isScroll: boolean, cards: GalleryCard[], context) {
+  return isScroll ? (
+    <SwipeListControl context={context}>{cards?.map(renderCard)}</SwipeListControl>
+  ) : (
+    <div className="grid gap-[14px]">{cards?.map(renderCard)}</div>
   );
-});
+}
 
 function renderCard(card: GalleryCard, key: number) {
   return (
     <div
-      className="box-border horizontal-list-item border-solid border rounded-md border-main-divider p-4 mx-1 flex flex-col justify-between items-stretch"
+      className={`box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
+      ${blockStyle[card.version ?? 'primary']}`}
       role="listitem"
       key={key}
     >
@@ -37,32 +53,35 @@ function renderCard(card: GalleryCard, key: number) {
             <Img className="mb-6" image={card.image} />
           </div>
         ) : null}
-        {card.title ? (
-          <h4
-            className={`font-medium text-xl m-0 ${
-              !card.description && !card.items?.length ? 'text-center' : ''
-            }`}
-          >
-            {card.title}
-          </h4>
-        ) : null}
-        {card.description ? (
-          <div className="font-normal text-sm text-secondary-text mt-2">{card.description}</div>
-        ) : null}
+        {card.title ? <h4 className={`font-medium text-m-title-xs m-0`}>{card.title}</h4> : null}
+        {card.description ? renderDescription(card) : null}
         {card.items?.length ? renderItems(card.items) : null}
       </div>
-      {card?.button?.href ? <Button className="mt-6" {...card.button} /> : null}
+      {card?.button?.href ? <Button className="mt-3" {...card.button} /> : null}
+    </div>
+  );
+}
+
+function renderDescription(card: GalleryCard) {
+  return (
+    <div
+      className={`text-secondary-text mt-2 ${
+        card.version === 'secondary' ? 'text-white opacity-80' : ''
+      }`}
+    >
+      {card.description}
     </div>
   );
 }
 
-function renderItems(items: string[] = []) {
+function renderItems(items: GalleryItem[]) {
   return (
-    <section className="max-w-[308px] mt-2" role="list">
-      {items.map((item, i) => (
-        <BlockItem key={String(i)}>
-          <span className="text-sm text-secondary-text">{item}</span>
-        </BlockItem>
+    <section className="mt-3">
+      {items.map((item) => (
+        <div>
+          <span className="text-m-md font-medium">{item.title}</span>
+          <span className="text-m-sm text-secondary-text pl-2">{item.text}</span>
+        </div>
       ))}
     </section>
   );

package/src/components/Gallery/GalleryCardInner.tsx

@@ -2,14 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Button } from '../../ui-kit/Button/Button';
-import { Img } from '../../ui-kit/Img';
-import { cardVersionMap } from './constants';
-import type { GalleryCard } from './GalleryContent';
+import { Img } from '../../ui-kit/Img/Img';
+import type { GalleryCard, GalleryItem } from './GalleryContent';
 
 export const GalleryCardInner = JSX<GalleryCard>(
   ({ title, description, image, items, button, version }) => {
-    const cardVersionClasses = cardVersionMap[version ?? 'primary'];
-
     return (
       <div>
         <div>
@@ -19,12 +16,10 @@ export const GalleryCardInner = JSX<GalleryCard>(
             </div>
           ) : null}
           {title && renderCardTitle(title, description, items)}
-          {description && (
-            <div className={`font-normal text-sm mt-2 ${cardVersionClasses}`}>{description}</div>
-          )}
+          {description ? <div className={`font-normal text-sm mt-2`}>{description}</div> : null}
           {items?.length ? (
-            <section className={`max-w-[308px] mt-2 ${cardVersionClasses}`} role="list">
-              {items.map((item, i) => renderItem(item, i, version))}
+            <section className={`max-w-[308px] mt-2`} role="list">
+              {items.map((item, i) => renderItem(item.text, i, version))}
             </section>
           ) : null}
         </div>
@@ -34,7 +29,7 @@ export const GalleryCardInner = JSX<GalleryCard>(
   },
 );
 
-function renderCardTitle(title: string, description?: string, items?: string[]) {
+function renderCardTitle(title: string, description?: string, items?: GalleryItem[]) {
   return (
     <div
       className={`font-medium text-xl m-0 ${!description && !items?.length ? 'text-center' : ''}`}

package/src/components/Gallery/GalleryContainer.tsx

@@ -2,8 +2,7 @@ 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 { Tile } from '../Tile/Tile';
-import { cardStyleMap, cardWidthMap, galleryLengthForScrollMap } from './constants';
+import { cardStyleMap, cardVersionMap, cardWidthMap, galleryLengthForScrollMap } from './constants';
 import { GalleryCardInner } from './GalleryCardInner';
 import type { GalleryCard } from './GalleryContent';
 import type { GalleryInnerProps } from './GalleryInner';
@@ -24,7 +23,7 @@ export const GalleryContainer = JSX<GalleryContainerProps>(
       <div>
         <div className="absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" />
         <div className="flex flex-col items-center mb-8">
-          {title ? <Heading type="h2" className="text-center" text={title} /> : null}
+          {title ? <Heading headingType="h2" className="text-center" title={title} /> : null}
           {description ? (
             <div className="font-normal text-base max-w-[600px] mt-2.5">{description}</div>
           ) : null}
@@ -43,17 +42,17 @@ export const GalleryContainer = JSX<GalleryContainerProps>(
   },
 );
 
-function renderCard({ card, version, context }: GalleryCardData, i: number) {
+function renderCard({ card, version }: GalleryCardData, i: number) {
   return (
-    <Tile
-      context={context}
+    <section
       className={`box-border border-solid border rounded-md border-main-divider p-7 mx-2 flex flex-col justify-between
-        items-stretch ${cardStyleMap[version]} w-full col-span-4`}
-      version={card.version}
+        items-stretch ${cardStyleMap[version]} ${
+        cardVersionMap[card.version ?? 'primary']
+      } w-full col-span-4`}
       key={String(i)}
       role="listitem"
     >
       <GalleryCardInner {...card} />
-    </Tile>
+    </section>
   );
 }

package/src/components/Gallery/GalleryContent.ts

@@ -1,6 +1,11 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
-import type { BaseTileIconButton } from '../BaseTile/BaseTileProps';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+export interface GalleryItem {
+  title?: string; //TODO: for mobile
+  text: string;
+}
 
 /**
  * @title Карточка
@@ -12,9 +17,9 @@ export interface GalleryCard {
   description?: string;
   image?: Picture;
   /** @title Кнопка */
-  button?: BaseTileIconButton;
+  button?: ButtonWithIconProps;
   /** @title Список */
-  items?: string[];
+  items?: GalleryItem[];
   version?: BlockVersion;
 }
 
@@ -31,4 +36,5 @@ export interface GalleryContent {
    * @minItems 4
    */
   cards?: GalleryCard[];
+  isScroll?: boolean; //TODO: for mobile
 }

package/src/components/Gallery/GalleryInner.tsx

@@ -11,7 +11,7 @@ export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
 }
 
 export const GalleryInner = JSX<GalleryInnerProps>(
-  ({ context, cards = [], className, version = 'normal', ...rest }) => {
+  ({ context, cards = [], className = '', version = 'normal', ...rest }) => {
     const [activeCardIndex, setActiveCardIndex] = context.useState(0);
 
     const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);

package/src/components/Gallery/constants.ts

@@ -2,8 +2,8 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { GalleryVersion } from '../../model/GalleryVersion';
 
 export const cardVersionMap: Record<BlockVersion, string> = {
-  primary: 'text-secondary-text',
-  secondary: '',
+  primary: 'bg-white text-secondary-text',
+  secondary: 'bg-primary-main text-white',
 };
 
 export const galleryLengthForScrollMap: Record<GalleryVersion, number> = {

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { IconName } from '../../icons/IconName';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
@@ -52,16 +52,16 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           className={`mr-5 ${COLORS_MAP[bgColor]}`}
           ariaLabel="Поиск по сайту"
         >
-          <Icon name="LoupeIcon" className="h-full" asSVG />
+          <Icon name="LoupeIcon" className="h-full" asSVG color="none" />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton className={`mr-5 ${COLORS_MAP[bgColor]}`} ariaLabel="Профиль">
-          <Icon name="ProfileIcon" className="h-full" asSVG />
+          <Icon name="ProfileIcon" className="h-full" asSVG color="none" />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
           className={`${DOP_LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
           ariaLabel="Дополнительные ссылки"
         >
-          <Icon name={DOP_LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG />
+          <Icon name={DOP_LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG color="none" />
         </HeaderSecondaryMenuButton>
       </div>
     );

package/src/components/Headline/Headline.mobile.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img';
+import { Img } from '../../ui-kit/Img/Img';
 import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
@@ -11,7 +11,7 @@ export const Headline = JSX<HeadlineProps>(
   ({ bgColor = 'transparent', className = '', title, description, image }) => {
     return (
       <section className={`px-4 py-6 ${bgColor} ${className}`}>
-        {title && <Heading type="h2" className="text-primary-text" text={title} />}
+        {title && <Heading headingType="h2" className="text-primary-text" title={title} />}
         {description && (
           <p className={`font-normal text-m-md ${title ? 'mt-2.5' : ''}`}>{description}</p>
         )}

package/src/components/Headline/Headline.tsx

@@ -18,7 +18,9 @@ export const Headline = JSX<HeadlineProps>(
     const textClasses = alignText[align];
     return (
       <section className={`p-[50px] ${bgColor} ${className}`}>
-        {title && <Heading type="h2" className={`text-primary-text ${textClasses}`} text={title} />}
+        {title && (
+          <Heading headingType="h2" className={`text-primary-text ${textClasses}`} title={title} />
+        )}
         {description && (
           <p className={`font-normal text-base mt-4 ${textClasses}`}>{description}</p>
         )}

package/src/components/Headline/HeadlineContent.ts

@@ -1,14 +1,16 @@
 import type { BgColorVersion } from '../../model/BgColorVersion';
-import type { Picture } from '../../model/Picture';
-import type { AlignType, BaseTileTitleProps } from '../BaseTile/BaseTileProps';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionProps';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { AlignType } from '../BaseTile/BaseTileProps';
 
 /**
  * @title Заголовок
  */
-export interface HeadlineContent extends BaseTileTitleProps {
-  description?: string;
-  image?: Picture;
-  align?: AlignType;
-  // TODO: image for mobile
-  bgColor?: BgColorVersion;
-}
+export type HeadlineContent = HeadingContent &
+  DescriptionContent &
+  ImageContent & {
+    align?: AlignType;
+    // TODO: image for mobile
+    bgColor?: BgColorVersion;
+  };

package/src/components/LinkDocs/LinkDocs.mobile.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { LinkDocsContent } from './LinkDocsContent';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { LinkDocsVerticalList } from './LinkDocsVerticalList';
+import type { LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsHorizontalList } from './LinkDocsHorizontalList';
+import { LinkDocsVerticalList } from './LinkDocsVerticalList';
 
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
@@ -13,7 +13,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     context,
     title,
     subtitle,
-    icon = 'DocIcon',
+    icon = 'DocIconMonoColor',
     documents,
     listMode = 'vertical',
     hasBorder = true,
@@ -21,7 +21,11 @@ export const LinkDocs = JSX<LinkDocsProps>(
     return (
       <section className={`py-6 px-4 bg-white ${className}`}>
         {title ? (
-          <Heading type="h2" className={`text-center ${subtitle ? 'mb-2' : 'mb-5'}`} text={title} />
+          <Heading
+            headingType="h2"
+            className={`text-center ${subtitle ? 'mb-2' : 'mb-5'}`}
+            title={title}
+          />
         ) : null}
         {subtitle ? <h3 className="mb-5 text-center text-m-base">{subtitle}</h3> : null}
         {listMode === 'vertical' ? (