@redneckz/wildless-cms-uni-blocks 0.5.11 → 0.5.13

package/src/components/TariffsTable/TariffsTable.tsx

@@ -2,9 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useTableArrowScrollControl } from '../../hooks/useTableArrowScrollControl';
 import type { UniBlockProps } from '../../model/ContentPageDef';
-import type { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderDefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { TableArrowScrollControl } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControl';
 import type { TableArrowScrollControlProps } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControlProps';
@@ -42,7 +43,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
       setActiveCardIndex,
     });
 
-    const foldableBlocks = rowData?.map((row, i, { length }) => (
+    const rows = (rowData || []).map((row, i, { length }) => (
       <TariffsTableRow
         context={context}
         key={String(i)}
@@ -52,6 +53,8 @@ export const TariffsTable = JSX<TariffsTableProps>(
         rowIdx={i}
       />
     ));
+    const [visibleRows, hiddenRows] =
+      hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
 
     return (
       <BlockWrapper
@@ -61,39 +64,43 @@ export const TariffsTable = JSX<TariffsTableProps>(
         context={context}
         {...rest}
       >
-        {title ? (
-          <Heading
-            headingType="h2"
-            className={`text-center ${description ? 'mb-2.5' : 'mb-9'}`}
-            title={title}
-          />
-        ) : null}
-        {description ? <div className="mb-9 text-center text-l">{description}</div> : null}
-        {rowData?.length ? (
+        {renderTitle({ title, description })}
+        {renderDescription(description)}
+        {hiddenRowsNum > 0 ? (
           <Foldable
-            blocks={foldableBlocks}
-            hiddenBlocksNum={hiddenRowsNum}
-            context={context}
-            render={(children) => (
+            renderFoldableSection={({ isUnfolded }) => (
               <Wrapper tableArrowScrollControlProps={tableArrowScrollControlProps}>
-                {children}
+                {visibleRows}
+                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
               </Wrapper>
             )}
-            foldButtonLabel="Развернуть"
+            renderFoldButton={renderDefaultFoldButton}
           />
-        ) : null}
+        ) : (
+          <Wrapper tableArrowScrollControlProps={tableArrowScrollControlProps}>{rows}</Wrapper>
+        )}
       </BlockWrapper>
     );
   },
 );
 
-const Wrapper = JSX<
-  {
-    tableArrowScrollControlProps: TableArrowScrollControlProps;
-  },
-  any,
-  VNode
->(({ children, tableArrowScrollControlProps }) => {
+function renderTitle({ title, description }: { title?: string; description?: string }) {
+  return title ? (
+    <Heading
+      headingType="h3"
+      className={`text-center ${description ? 'mb-2.5' : 'mb-8'}`}
+      title={title}
+    />
+  ) : null;
+}
+
+function renderDescription(description?: string) {
+  return description ? <div className="mb-9 text-center text-l">{description}</div> : null;
+}
+
+const Wrapper = JSX<{
+  tableArrowScrollControlProps: TableArrowScrollControlProps;
+}>(({ children, tableArrowScrollControlProps }) => {
   const { isScrollAvailable } = tableArrowScrollControlProps;
 
   return (

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -30,7 +30,7 @@ const renderCellInner =
     return (
       <div
         key={String(i)}
-        className={cell?.tableCellType === 'Table' ? 'mx-0.5' : `first:pt-5 last:pb-5 pl-10`}
+        className={cell?.tableCellType === 'Table' ? 'ml-10' : `first:pt-5 last:pb-5 pl-10`}
       >
         {i > 0 ? <div className="h-5" /> : null}
         {renderCell(cell, context, { rowIdx, cellIdx, fieldIdx: i })}

package/src/components/TariffsTable/TariffsTableRow.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { UniBlockProps } from '../../model/ContentPageDef';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
 import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
@@ -34,9 +33,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
                 asSVG
               />
             ) : null}
-            {header?.title ? (
-              <Heading headingType={header?.headingType || 'h6'} as="h6" title={header?.title} />
-            ) : null}
+            {header?.title ? <div className="text-m-light">{header?.title}</div> : null}
           </div>
         </div>
         {data?.length ? (

package/src/components/TariffsTable/{dataFixture.ts → dataFixture.tsx}

@@ -1,4 +1,5 @@
 import type { Picture } from '../../model/Picture';
+import { Img } from '../../ui-kit/Img/Img';
 import type {
   InnerTableBlockDef,
   LabelDescriptionCellDef,
@@ -93,14 +94,14 @@ export const columns: TariffsTableColumn[] = [
           tableCellType: 'Buttons',
           buttons: [
             {
-              icon: { icon: 'AppleIcon' },
+              appendLeft: <Img image={{ icon: 'AppleIcon' }} width="24" height="24" asSVG />,
               rounded: true,
               version: 'secondary',
               href: '/',
               target: '_blank',
             },
             {
-              icon: { icon: 'PlayMarketIcon' },
+              appendLeft: <Img image={{ icon: 'PlayMarketIcon' }} width="24" height="24" asSVG />,
               rounded: true,
               version: 'secondary',
               href: '/',

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

@@ -1,5 +1,3 @@
 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 : ''];
+export const getButtonAriaLabel = (icon: Picture | undefined) => icon?.alt || icon?.title || '';

package/src/components/Tile/Tile.tsx

@@ -67,7 +67,7 @@ export const Tile = JSX<TileProps>((props) => {
         image={image?.src ? <Img className="mt-auto ml-7" image={image} /> : null}
       >
         {description ? (
-          <Description className="max-w-[600px] text-xl-light mt-2" description={description} />
+          <Description className="max-w-[600px] text-xl-light mt-2.5" description={description} />
         ) : null}
         {children}
         {renderList(items, { version, isDotted, listItemSize })}
@@ -77,16 +77,14 @@ export const Tile = JSX<TileProps>((props) => {
 });
 
 function renderList(items, { version, isDotted, listItemSize }: ListProps) {
-  const listVersion = version === 'primary' ? 'tile' : 'tile-white';
-
   return items?.length ? (
     <List
       items={items}
       isDotted={isDotted}
-      className="mt-3"
+      className="mt-2.5"
       listItemSize={listItemSize}
       itemClassName="mb-1.5"
-      version={listVersion}
+      version={version}
     />
   ) : null;
 }

package/src/hooks/useOutsideClick.ts

@@ -0,0 +1,25 @@
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+
+interface Ref {
+  current: HTMLInputElement | null;
+}
+
+export function useOutsideClick(wrapperRef: Ref, setIsOpen: (_: boolean) => void) {
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        wrapperRef &&
+        wrapperRef.current &&
+        event.target instanceof HTMLElement &&
+        !wrapperRef.current.contains(event.target)
+      ) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('click', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+}

package/src/hooks/{useFetchSafeBoxes.ts → useSafeBoxes.ts}

@@ -25,20 +25,19 @@ export interface Branch {
 }
 
 const SAFEBOXES_URL = '/api/v1/safeboxes';
+const EMPTY_VALUE = [];
 
-export function useFetchSafeBoxes(regionCode?: string) {
-  const { data } = useAsyncData<{ data?: Branch[] }, any, string | null>(
+export function useSafeBoxes(regionCode?: string): Branch[] {
+  const { data } = useAsyncData<Branch[], any, string | null>(
     regionCode ? `${SAFEBOXES_URL}?regionCode=${regionCode}` : null,
     fetchSafeBoxes,
   );
 
-  return data || [];
+  return data || EMPTY_VALUE;
 }
 
-const fetchSafeBoxes = (url?: string) => {
-  if (!url) {
-    return {};
-  }
+const fetchSafeBoxes = async (url: string): Promise<Branch[]> => {
+  const result = await fetchJSON<Branch[]>(url, { method: 'GET' });
 
-  return fetchJSON(url, { method: 'GET' });
+  return result || EMPTY_VALUE;
 };

package/src/icons/IconName.ts

@@ -1,98 +1,40 @@
 // Generated. Do not touch
 /* eslint-disable max-len, max-lines */
 
-export const IconInverseMap = {
-  ActualBalanceIcon: false,
-  AirPlaneIcon: false,
-  AppleIcon: true,
-  ArrowDownIcon: true,
-  ArrowLeftIcon: true,
-  ArrowUpIcon: true,
-  AtmIcon: true,
-  BankIcon: true,
-  BuildingIcon: true,
-  BurgerIcon: true,
-  Calendar2Icon: true,
-  CalendarCircleIcon: true,
-  CalendarIcon: true,
-  CalendarTickIcon: true,
-  Car2Icon: true,
-  CardIcon: true,
-  CardPosIcon: true,
-  CardTickIcon: true,
-  CardWithGemIcon: false,
-  CarIcon: false,
-  ChartSquareIcon: true,
-  CinemaIcon: false,
-  ClockIcon: false,
-  CloseIcon: true,
-  ComfortableCompIcon: false,
-  CreditCardsIcon: false,
-  DiscountShapeIcon: true,
-  DocDownloadIcon: true,
-  DocIcon: true,
-  DocIconMonoColor: true,
-  DocsIcon: false,
-  DocumentTextIcon: true,
-  DollarIcon: false,
-  DoneIcon: false,
-  DoneSimpleIcon: true,
-  EarthIcon: false,
-  EmptyWalletChangeIcon: true,
-  EmptyWalletIcon: true,
-  EuroIcon: false,
-  GeolocationIcon: true,
-  GlassIcon: false,
-  GlobalIcon: true,
-  GpsIcon: true,
-  GridIcon: true,
-  InterestGrowthIcon: false,
-  InterestIcon: true,
-  JCBIcon: false,
-  LogoIcon: true,
-  LoupeIcon: true,
-  MapMarkerClusterIcon: false,
-  MapMarkerSingleIcon: false,
-  MasterCardIcon: false,
-  MinusIcon: true,
-  MirIcon: false,
-  MoneyIcon: true,
-  MoneyInsuranceIcon: false,
-  MoneysIcon: true,
-  MonitorMobileIcon: true,
-  NewDocIcon: false,
-  OfficeIcon: false,
-  OkIcon: true,
-  PackA4Icon: false,
-  PassSendIcon: false,
-  PercentageRoundIcon: true,
-  PercentageSquareIcon: true,
-  PersonalCardIcon: true,
-  PlayMarketIcon: true,
-  PlusIcon: true,
-  PowerIcon: false,
-  Profile2UserIcon: true,
-  ProfileIcon: true,
-  PumpkinIcon: false,
-  RoundRubleIcon: true,
-  SafeIcon: true,
-  ShieldTickIcon: true,
-  SignDocsIcon: false,
-  SmallClockIcon: true,
-  SoundIcon: false,
-  StrongBoxIcon: true,
-  TelegramIcon: true,
-  UnionPayIcon: false,
-  UserSquareIcon: true,
-  UserTickIcon: true,
-  VisaIcon: false,
-  VKIcon: true,
-  WalletAdd2Icon: true,
-  WalletAddIcon: true,
-  WalletIcon: true,
-  WalletWithMoneyIcon: true,
-  WateringCanIcon: false,
-};
+export const IconsWithoutInversion = new Set([
+  'ActualBalanceIcon',
+  'AirPlaneIcon',
+  'CardWithGemIcon',
+  'CarIcon',
+  'CinemaIcon',
+  'ClockIcon',
+  'ComfortableCompIcon',
+  'CreditCardsIcon',
+  'DocsIcon',
+  'DollarIcon',
+  'DoneIcon',
+  'EarthIcon',
+  'EuroIcon',
+  'GlassIcon',
+  'InterestGrowthIcon',
+  'JCBIcon',
+  'MapMarkerClusterIcon',
+  'MapMarkerSingleIcon',
+  'MasterCardIcon',
+  'MirIcon',
+  'MoneyInsuranceIcon',
+  'NewDocIcon',
+  'OfficeIcon',
+  'PackA4Icon',
+  'PassSendIcon',
+  'PowerIcon',
+  'PumpkinIcon',
+  'SignDocsIcon',
+  'SoundIcon',
+  'UnionPayIcon',
+  'VisaIcon',
+  'WateringCanIcon',
+]);
 
 export enum IconMap {
   ActualBalanceIcon = 'ActualBalanceIcon',

package/src/model/BlockDecorator.ts

@@ -4,6 +4,8 @@ export const DEFAULT_SLOT_NAME = null;
 
 export type BlockAncestors = [keyof SlotsMap | typeof DEFAULT_SLOT_NAME, ...Slot[]];
 
+export const DEFAULT_ANCESTORS: BlockAncestors = [DEFAULT_SLOT_NAME];
+
 interface BlockDecoratorProps<VNode> {
   blockClassName: string;
   block: BlockDef;

package/src/model/BlocksRegistry.ts

@@ -6,6 +6,9 @@ export type JSXBlock<BlockProps = Record<string, any>> = UNIComponent<
   BlockProps & UniBlockProps,
   any,
   VNode | VNode[]
->;
+> & {
+  childrenTypes?: string[];
+  renderChild?: (child: VNode, i: number) => VNode;
+};
 
 export type BlocksRegistry<BlockProps = Record<string, any>> = Record<string, JSXBlock<BlockProps>>;

package/src/model/HeadlineType.ts

@@ -4,6 +4,12 @@
  */
 export type HeadlineVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S';
 
+/**
+ * @title Размер заголовка
+ * @enumNames ["Самый большой тонкий", "Самый большой", "Очень большой тонкий", "Очень большой", "Большой", "Средний", "Маленький"]
+ */
+export type HeadlineSmallVersion = 'XL_L' | 'XL_R' | 'L_L' | 'L_R' | 'M' | 'S' | 'XS';
+
 export type TitleProps = {
   /** @title Заголовок */
   title?: string;
@@ -24,3 +30,7 @@ export type HeadlineCommonProps = TitleProps & DescriptionProps;
 export type HeadlineProps = HeadlineCommonProps & {
   headlineVersion?: HeadlineVersion;
 };
+
+export type HeadlineSmallProps = HeadlineCommonProps & {
+  headlineSmallVersion?: HeadlineSmallVersion;
+};

package/src/model/Picture.ts

@@ -49,6 +49,7 @@ export interface ImgSource {
   alignment?: ImgAlignment;
   /** @title Иконка */
   icon?: IconName;
+  /** @title Версия иконки */
   iconVersion?: IconVersion;
   /** @title Картинка */
   src?: string;

package/src/react/setup-fixture.ts

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import type { ContentPageContext } from '../components/ContentPage/ContentPageContext';
 import { projectSettings } from '../ProjectSettings';
 import wlc from '../wlc.json';
-import { IntersectionObserverTag } from './IntersectionObserverTag';
 
 const TEST_ORIGIN = 'http://localhost:5001';
 
@@ -35,7 +34,6 @@ export const context: ContentPageContext = {
       ev.preventDefault();
       console.log(ev.target, ev, targetContent);
     },
-  IntersectionObserverTag,
 };
 
 export const mobileContext: ContentPageContext = {

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

@@ -26,16 +26,13 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
 
   const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
   const listItemAlign = description ? 'items-start' : 'items-center';
+  const iconVersion = getIconVersion(icon, isIconWhite);
 
   return (
     <div className={`flex gap-5 ${listItemAlign} ${className}`}>
       {icon ? (
         <div className={renderBenefitIconBgStyle(version, benefitsVersion)}>
-          <Img
-            className="w-6 h-6"
-            image={{ ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
-            asSVG
-          />
+          <Img className="w-6 h-6" image={{ ...icon, iconVersion }} asSVG />
         </div>
       ) : null}
       <div className="gap-0.5">
@@ -59,3 +56,6 @@ function renderBenefitIconBgStyle(version, benefitsVersion) {
 
   return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
 }
+
+const getIconVersion = (icon, isIconWhite) =>
+  icon?.iconVersion || isIconWhite ? 'white' : 'normal';

package/src/ui-kit/BlockWrapper.tsx

@@ -1,14 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { ContentPageContext } from '../components/ContentPage/ContentPageContext';
-import { AnchorClickScrollingEvent } from '../components/Tabs/Tabs';
+import type { AnchorClickScrollingEvent } from '../components/Tabs/Tabs';
 import { EventBus } from '../EventBus/EventBus';
 import type { UniBlockProps } from '../model/ContentPageDef';
 import { changeHashOnObserve } from '../utils/changeHashOnObserve';
+import { IntersectionObserverTag } from './IntersectionObserverTag';
 
 interface BlockWrapperProps extends UniBlockProps, Record<string, any> {
-  context: ContentPageContext;
-  className?: string;
   anchor?: string;
   tag?: keyof HTMLElementTagNameMap;
 }
@@ -19,17 +17,15 @@ const THRESHOLD_ARRAY_START_VALUE =
   (THRESHOLD_ACCURACY - THRESHOLD_ARRAY_LENGTH) / THRESHOLD_ACCURACY;
 
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({ anchor, className, context, children, tag = 'section', labels }) => {
+  ({ anchor, className, children, tag = 'section', labels }) => {
     const Tag: any = tag;
 
-    const { IntersectionObserverTag } = context;
-
     const [shouldRenderBlock, setShouldRenderBlock] = useState(true);
     const anchorClickRef = useRef<AnchorClickScrollingEvent>({});
 
     const observerCallback = useMemo(
       () => changeHashOnObserve({ anchor, anchorClickRef }),
-      [anchor, anchorClickRef],
+      [anchor],
     );
 
     useEffect(() => {
@@ -49,7 +45,7 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
         anchorClickCleanup();
         tabCleanup();
       };
-    }, [anchorClickRef]);
+    }, []);
 
     if (!shouldRenderBlock) {
       return null;

package/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -12,7 +12,7 @@ export type EmbeddableBlocksProps = {
 };
 
 export const renderBlocksList = ({ blocks, context, className = '' }: EmbeddableBlocksProps) =>
-  blocks?.length ? blocks.map(renderBlock({ context, className })) : null;
+  blocks?.length ? blocks.map(renderBlock({ context, className })) : [];
 
 const renderBlock =
   ({ context, className }: UniBlockProps) =>

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

@@ -41,7 +41,7 @@ export const Button = JSX<ButtonWithIconProps>(
   }) => {
     // It isn't a valid HTML attribute. Must be excluded from "rest"
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { asSVG, iconRight, appendRight, icon, ...buttonInnerRest } = rest;
+    const { appendRight, ...buttonInnerRest } = rest;
     const buttonInner = children ?? (
       <ButtonInner
         text={text}

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

@@ -1,37 +1,65 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ButtonInner } from './ButtonInner';
 import type { ButtonWithIconProps } from './ButtonProps';
-import { getRegularButtonClasses } from './getRegularButtonClasses';
 import { getDisabledButtonClasses } from './getDisabledButtonClasses';
+import { getRegularButtonClasses } from './getRegularButtonClasses';
 
-export const Button = JSX<ButtonWithIconProps>((props) => {
-  const { text, aboveText, appendLeft, appendRight, children, disabled, rounded, ...rest } = props;
-  // its non valid HTML attribute. Must be excluded from "rest"
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { asSVG, iconRight, icon, ...usedProps } = rest;
-  const buttonInner = children ?? (
-    <ButtonInner
-      text={text}
-      aboveText={aboveText}
-      appendLeft={appendLeft}
-      appendRight={appendRight}
-      rounded={rounded}
-    />
-  );
+export const Button = JSX<ButtonWithIconProps>(
+  ({
+    aboveText,
+    appendLeft,
+    appendRight,
+    ariaLabel,
+    children,
+    className,
+    disabled,
+    href,
+    onClick,
+    rel,
+    rounded,
+    target,
+    text,
+    version,
+  }) => {
+    const buttonInner = children ?? (
+      <ButtonInner
+        aboveText={aboveText}
+        appendLeft={appendLeft}
+        appendRight={appendRight}
+        rounded={rounded}
+        text={text}
+        version={version}
+      />
+    );
 
-  return disabled ? (
-    <DisabledButton rounded={rounded} {...usedProps}>
-      {buttonInner}
-    </DisabledButton>
-  ) : (
-    <RegularButton rounded={rounded} {...usedProps}>
-      {buttonInner}
-    </RegularButton>
-  );
-});
+    return disabled ? (
+      <DisabledButton
+        ariaLabel={ariaLabel}
+        className={className}
+        rounded={rounded}
+        version={version}
+      >
+        {buttonInner}
+      </DisabledButton>
+    ) : (
+      <RegularButton
+        ariaLabel={ariaLabel}
+        className={className}
+        href={href}
+        onClick={onClick}
+        rel={rel}
+        rounded={rounded}
+        target={target}
+        version={version}
+      >
+        {buttonInner}
+      </RegularButton>
+    );
+  },
+);
 
 const RegularButton = JSX<ButtonWithIconProps>(
-  ({ className = '', ariaLabel, version, rounded, href, target, children, onClick, ...rest }) => {
+  ({ className = '', ariaLabel, version, rounded, href, target, children, onClick, rel }) => {
     return (
       <a
         className={getRegularButtonClasses({ className, version, rounded })}
@@ -40,7 +68,7 @@ const RegularButton = JSX<ButtonWithIconProps>(
         onClick={onClick}
         aria-label={ariaLabel}
         role={href ? 'link' : 'button'}
-        {...rest}
+        rel={rel}
       >
         {children}
       </a>

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

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
+import { iconStyleMap } from './buttonClassNameConstants';
 import type { ButtonWithIconProps } from './ButtonProps';
 
 interface ButtonInnerProps extends ButtonWithIconProps {
@@ -7,18 +8,18 @@ interface ButtonInnerProps extends ButtonWithIconProps {
 }
 
 export const ButtonInner = JSX<ButtonInnerProps>((props) => {
-  const { text, aboveText, appendLeft, appendRight } = props;
+  const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
 
   return (
     <div className={getButtonStyle(props)}>
-      {appendLeft ? appendLeft : null}
+      {appendLeft ? <div className={iconStyleMap[version]}>{appendLeft}</div> : null}
       {isWithText(props) ? (
         <div>
           <div className="text-xs-light text-left">{aboveText}</div>
           <div className={`text-left ${aboveText ? 'text-s -mt-0.5' : 'text-l'}`}>{text}</div>
         </div>
       ) : null}
-      {appendRight ? appendRight : null}
+      {appendRight ? <div className={iconStyleMap[version]}>{appendRight}</div> : null}
     </div>
   );
 });