@redneckz/wildless-cms-uni-blocks 0.2.58 → 0.2.61

package/src/Icons/AppleIcon.tsx

@@ -0,0 +1,15 @@
+export const AppleIcon = (props?: Record<string, any>) => (
+  <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clipPath="url(#a)">
+      <path
+        d="M19.406 12.761c-.023-3.028 2.793-4.511 2.93-4.572-1.603-2.073-4.075-2.357-4.968-2.377-2.083-.204-4.098 1.117-5.174 1.117-1.076 0-2.725-1.097-4.488-1.056-2.266.04-4.395 1.198-5.563 3.007-2.404 3.698-.618 9.124 1.694 12.09 1.145 1.464 2.496 3.09 4.259 3.028 1.717-.06 2.358-.975 4.441-.975 2.06 0 2.656.975 4.465.935 1.854-.02 3.022-1.463 4.12-2.947 1.329-1.666 1.855-3.332 1.878-3.413 0 0-3.549-1.2-3.594-4.837Zm-3.389-8.92c.916-1.037 1.557-2.419 1.374-3.841-1.35.061-3.022.833-3.984 1.829-.847.894-1.625 2.337-1.42 3.698 1.512.102 3.069-.67 4.03-1.686Z"
+        fill="#42AB44"
+      />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <rect width="24" height="24" rx="6" fill="#fff" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/Icons/PlayMarket.tsx

@@ -0,0 +1,8 @@
+export const PlayMarket = (props?: Record<string, any>) => (
+  <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M1 22.427V2.576C1 1.883 1.447 1.284 2.094 1L14.85 12.498 2.089 24a1.89 1.89 0 0 1-.795-.646A1.625 1.625 0 0 1 1 22.427Zm17.899-6.282-13.95 7.259 11.002-9.915 2.948 2.656Zm4.335-5.035c.237.162.428.37.561.61.133.239.203.502.205.77.002.267-.064.53-.193.771s-.317.452-.551.617l-2.964 1.542-3.241-2.922 3.24-2.92 2.944 1.532ZM4.959 1.598l13.938 7.253-2.945 2.654L4.958 1.598Z"
+      fill="#42AB44"
+    />
+  </svg>
+);

package/src/Icons/index.ts

@@ -15,3 +15,5 @@ export { ProfileIcon } from './ProfileIcon';
 export { SignDocsIcon } from './SignDocsIcon';
 export { TelegramIcon } from './TelegramIcon';
 export { VKIcon } from './VKIcon';
+export { AppleIcon } from './AppleIcon';
+export { PlayMarket } from './PlayMarket';

package/src/MobileAppTile.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Tile } from './Tile';
+import type { BaseTileContent } from './BaseTile';
 import type { UniBlockProps } from './types';
 
 export interface QRCode {
@@ -7,7 +8,7 @@ export interface QRCode {
   href?: string;
 }
 
-export interface MobileAppTileContent {
+export interface MobileAppTileContent extends BaseTileContent {
   title?: string;
   qr?: QRCode;
 }
@@ -15,9 +16,9 @@ export interface MobileAppTileContent {
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
 export const MobileAppTile = JSX<MobileAppTileProps>(
-  ({ className, context, title = 'Мобильное приложение', qr }) => {
+  ({ className, context, title = 'Мобильное приложение', qr, buttons = [] }) => {
     return (
-      <Tile className={className} context={context} title={title}>
+      <Tile className={className} context={context} title={title} buttons={buttons}>
         <div className="flex items-center">
           {qr?.src && qr?.href && (
             <a href={qr.href} target="_blank">

package/src/MobileBlocks.ts

@@ -8,6 +8,7 @@ import { ProductBlock } from './ProductBlock';
 import { ProductGallery } from './ProductGallery';
 import { ProductTile } from './ProductTile';
 import { StepsBlock } from './StepsBlock';
+import { TextBlock } from './TextBlock';
 import { Tile } from './Tile';
 
 export const MobileBlocks = {
@@ -18,6 +19,7 @@ export const MobileBlocks = {
   ProductTile,
   ProductBlock,
   StepsBlock,
+  TextBlock,
   BenefitsBlock,
   ProductGallery,
   ExchangeRateTile,

package/src/ProductBlock.tsx

@@ -15,7 +15,9 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
   return (
-    <section className={`font-sans bg-white pl-12 pr-[7.5rem] py-10 ${className || ''}`}>
+    <section
+      className={`font-sans bg-white pt-10 pl-[50px] pb-[50px] pr-[7.5rem] ${className || ''}`}
+    >
       {breadcrumbs?.length ? (
         <div className="text-xs mb-6">
           {joinList(<span className="text-secondary-text mx-2">/</span>)(

package/src/ProductBlockInner.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { EmptyWalletIcon, PercentageSquareIcon, CalendarIcon } from './Icons/index';
 import type { UniBlockProps, Benefit } from './types';
 import { BaseTile } from './BaseTile';
+import { Title } from './ui-kit/Title';
 import type { BaseTileContent } from './BaseTile';
 import { Img } from './Img';
 
@@ -16,16 +17,16 @@ export interface ProductBlockInnerProps extends ProductBlockInnerContent, UniBlo
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   ({ className, context, title, description, benefits, buttons, image, items }) => {
     return (
-      <div className={`flex justify-between items-stretch ${className || ''}`}>
+      <div className={`flex grow justify-between items-stretch ${className || ''}`}>
         <div className={'flex flex-col'}>
           {title && (
-            <h1 className="font-medium text-title-lg m-0 whitespace-pre-wrap max-w-[600px]">
+            <Title size="XL" className="font-medium m-0 mb-4 whitespace-pre-wrap max-w-[600px]">
               {title}
-            </h1>
+            </Title>
           )}
           <BaseTile context={context} description={description} items={items} buttons={buttons}>
             {benefits?.length ? (
-              <div className="flex gap-6 mt-6 mb-12">{benefits.map(renderBenefit)}</div>
+              <div className="flex gap-6 mt-6 mb-3.5">{benefits.map(renderBenefit)}</div>
             ) : null}
           </BaseTile>
         </div>

package/src/ProductGallery.tsx

@@ -54,9 +54,13 @@ export const ProductGallery = JSX<ProductGalleryProps>(
 
 function renderProductBlock(block: ProductBlockInnerContent, i: number, context) {
   return (
-    <section key={String(i)} className="grow-0 shrink-0 basis-full" role="listitem">
-      <div className="p-11 pr-[7.5rem] ">
-        <ProductBlockInner context={context} {...block} />
+    <section key={String(i)} className="flex grow-0 shrink-0 basis-full" role="listitem">
+      <div className="p-10 flex grow">
+        <ProductBlockInner
+          className="pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem]"
+          context={context}
+          {...block}
+        />
       </div>
     </section>
   );

package/src/ProductTile.tsx

@@ -14,7 +14,7 @@ export const ProductTile = JSX<ProductTileProps>((props) => {
   const { benefits, version } = props;
   return (
     <Tile {...props}>
-      <div className="flex mt-5 mb-10">
+      <div className="flex mt-5 mb-1">
         {benefits?.length ? (
           <div className="mr-8">{benefits.map(renderBenefitDescription)}</div>
         ) : null}
@@ -32,14 +32,14 @@ function renderBenefitLabel(benefit: Benefit, i: number, version = 'primary') {
     secondary: 'text-white',
   };
   return (
-    <div key={String(i)} className={`text-sm mb-4 ${labelStyleMap[version]}`}>
+    <div key={String(i)} className={`text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.label}
     </div>
   );
 }
 function renderBenefitDescription(benefit: Benefit, i: number) {
   return (
-    <div key={String(i)} className="text-xl font-medium mb-2.5">
+    <div key={String(i)} className={`text-xl font-medium ${i ? 'mt-2.5' : ''}`}>
       {benefit.description}
     </div>
   );

package/src/PromoTile.tsx

@@ -0,0 +1,47 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BaseTileContent } from './BaseTile';
+import { Tile } from './Tile';
+import type { UniBlockProps } from './types';
+
+export interface PromoTileContent extends BaseTileContent {
+  date?: string;
+}
+
+export interface PromoTileProps extends PromoTileContent, UniBlockProps {}
+
+export const PromoTile = JSX<PromoTileProps>(
+  ({
+    className,
+    context,
+    title = 'Акции и спецпредложения',
+    date,
+    description,
+    buttons = [],
+    version,
+  }) => {
+    return (
+      <Tile
+        className={className}
+        context={context}
+        title={title}
+        buttons={buttons}
+        version={version}
+      >
+        <div>
+          {date && <div className="text-sm mb-2">{formatDate(date)}</div>}
+          <div className="text-base">{description}</div>
+        </div>
+      </Tile>
+    );
+  },
+);
+
+function formatDate(date: string) {
+  const dateObj = new Date(date);
+  const dateFormat: Intl.DateTimeFormatOptions = {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  };
+  return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
+}

package/src/StepsBlock.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { NewDocIcon, PassSendIcon, ActualBalanceIcon } from './Icons/index';
 import type { UniBlockProps } from './types';
+import { Title } from './ui-kit/Title';
 import { joinList } from './utils/joinList';
 
 const ICONS = { NewDocIcon, PassSendIcon, ActualBalanceIcon };
@@ -24,7 +25,7 @@ export const StepsBlock = JSX<StepsBlockProps>(({ className, title, steps }) =>
         className || ''
       }`}
     >
-      <h2 className="font-medium text-title m-0 max-w-[47rem] text-center">{title}</h2>
+      <Title className="font-medium m-0 max-w-[47rem] text-center">{title}</Title>
       {steps?.length ? (
         <div>
           <div className="flex mt-9 items-center px-[88px]">

package/src/TextBlock.fixture.tsx

@@ -0,0 +1,116 @@
+import { context } from './setup-fixture';
+import { TextBlock } from './TextBlock';
+import { Picture } from './types';
+
+const image: Picture = {
+  src: 'bank-card.png',
+  format: 'webp',
+  size: {
+    width: 48,
+    height: 48,
+  },
+};
+
+export default (
+  <div className="font-sans overflow-hidden">
+    <div>
+      <p>Private clients</p>
+      <div className="flex flex-col gap-6" data-theme="pc">
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="big"
+          image={image}
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="none"
+        />
+        <TextBlock
+          context={context}
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary-light"
+          iconVersion="small"
+        />
+      </div>
+    </div>
+    <div>
+      <p>Business clients</p>
+      <div className="flex flex-col gap-6" data-theme="bc">
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary-light"
+          iconVersion="small"
+        />
+      </div>
+    </div>
+    <div>
+      <p>Ecosystem own</p>
+      <div className="flex flex-col gap-6" data-theme="eo">
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary-light"
+          iconVersion="small"
+        />
+      </div>
+    </div>
+  </div>
+);

package/src/TextBlock.tsx

@@ -0,0 +1,72 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps, Picture } from './types';
+import { Img } from './Img';
+
+type TextBlockVersion = 'primary' | 'secondary' | 'secondary-light';
+type TextBlockIconVersion = 'none' | 'small' | 'big';
+
+export interface TextBlockContent {
+  title?: string;
+  description?: string;
+  blockVersion?: TextBlockVersion;
+  iconVersion?: TextBlockIconVersion;
+  image?: Picture;
+}
+
+export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
+
+const textBlockStyleMaps: Record<
+  TextBlockVersion,
+  { background: string; icon: string; title: string; description: string }
+> = {
+  primary: {
+    background: 'bg-white',
+    icon: 'bg-primary-main text-white',
+    title: 'text-base',
+    description: 'text-secondary-text',
+  },
+  secondary: {
+    background: 'bg-primary-main',
+    icon: 'bg-white text-primary-main',
+    title: 'text-white',
+    description: 'text-white',
+  },
+  'secondary-light': {
+    background: 'bg-primary-main/10',
+    icon: 'bg-primary-main text-white',
+    title: 'text-base',
+    description: 'text-secondary-text',
+  },
+};
+
+export const TextBlock = JSX<TextBlockProps>(
+  ({ title, description, blockVersion = 'primary', iconVersion, image, className }) => {
+    const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+    return (
+      <section
+        className={`font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`}
+      >
+        {iconVersion && iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
+        {iconVersion && iconVersion === 'big' ? renderImage(image) : null}
+        <div className="py-0.5">
+          {title && <div className={`font-medium mb-1 ${textBlockStyleMap.title}`}>{title}</div>}
+          {description && (
+            <div className={`text-sm ${textBlockStyleMap.description}`}>{description}</div>
+          )}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderIcon(className: string) {
+  return (
+    <div className={`pt-1.5 pr-4`}>
+      <div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
+    </div>
+  );
+}
+
+function renderImage(image?: Picture) {
+  return image?.src ? <Img className="pt-0.5 pr-3" image={image} /> : null;
+}

package/src/Tile.tsx

@@ -1,7 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion, Picture, UniBlockProps } from './types';
+import type { BlockVersion, UniBlockProps } from './types';
 import { BaseTile } from './BaseTile';
 import type { BaseTileContent } from './BaseTile';
+import { getColSpan } from './utils/getColSpan';
 
 export interface TileProps extends BaseTileContent, UniBlockProps {}
 
@@ -12,9 +13,25 @@ const tileStyleMap: Record<BlockVersion, string> = {
 
 export const Tile = JSX<TileProps>((props) => {
   const { children, className, version = 'primary' } = props;
+
   return (
-    <section className={`font-sans p-9 ${className || ''} ${tileStyleMap[version]}`}>
+    <section
+      className={`font-sans p-9 min-h-[320px] box-border ${className || ''} ${
+        tileStyleMap[version]
+      } ${getContainerPaddingRight(className)} `}
+    >
       <BaseTile {...props}>{children}</BaseTile>
     </section>
   );
 });
+
+function getContainerPaddingRight(className: string = '') {
+  const colSpan = getColSpan(className);
+  if (colSpan <= 6) {
+    return 'pr-9';
+  } else if (colSpan <= 8) {
+    return 'pr-[4.75rem]';
+  } else {
+    return 'pr-[9.4rem]';
+  }
+}

package/src/api/DaDataAPI.ts

@@ -1,4 +1,4 @@
-import { getCurrentPosition } from '../utils/getCurrentPosition';
+import { getGeolocation } from '../utils/getGeolocation';
 
 import type { DaDataResult } from '../types';
 
@@ -9,7 +9,7 @@ export function DaDataAPI(baseURL = '') {
     }
 
     try {
-      const coords = await getCurrentPosition();
+      const coords = await getGeolocation();
       const response = await fetch(`${baseURL}/geolocate`, {
         method: 'POST',
         mode: 'cors',

package/src/common.css

@@ -2,27 +2,27 @@
 
 /* Private clients | Green */
 [data-theme='pc'] {
-  --color-primary-main: #42ab44;
-  --color-primary-hover: #248341;
-  --color-primary-active: #245f34;
-  --color-secondary-hover: #c5e2c6;
-  --color-secondary-active: #d8f2d9;
+  --color-primary-main: 66, 171, 68;
+  --color-primary-hover: 36, 131, 65;
+  --color-primary-active: 36, 95, 52;
+  --color-secondary-hover: 216, 242, 217;
+  --color-secondary-active: 197, 226, 198;
 }
 /* Business clients | Light-Green */
 [data-theme='bc'] {
-  --color-primary-main: #83b83e;
-  --color-primary-hover: #5c921d;
-  --color-primary-active: #3c5e10;
-  --color-secondary-hover: #e8f4d9;
-  --color-secondary-active: #d8e3ca;
+  --color-primary-main: 131, 184, 62;
+  --color-primary-hover: 92, 146, 29;
+  --color-primary-active: 60, 94, 16;
+  --color-secondary-hover: 232, 244, 217;
+  --color-secondary-active: 216, 227, 202;
 }
 /* Ecosystem own | Yellow */
 [data-theme='eo'] {
-  --color-primary-main: #ddb63d;
-  --color-primary-hover: #bb9727;
-  --color-primary-active: #7e630c;
-  --color-secondary-hover: #f1ecdd;
-  --color-secondary-active: #e5dec7;
+  --color-primary-main: 221, 182, 61;
+  --color-primary-hover: 187, 151, 39;
+  --color-primary-active: 126, 99, 12;
+  --color-secondary-hover: 241, 236, 221;
+  --color-secondary-active: 229, 222, 199;
 }
 
 @tailwind components;

package/src/setup-fixture.ts

@@ -32,11 +32,15 @@ export const context: ContentPageContext = {
     return { data };
   },
   useGeolocation: (defaultLocation) => {
-    const [city, setCity] = useState(defaultLocation);
+    const [city, setCity] = useState(
+      globalThis.localStorage.getItem('location') || defaultLocation,
+    );
 
     const getCity = () => {
       DaData.getFetcherAddress().then((_) => {
-        setCity(_ || defaultLocation);
+        const location = _ || defaultLocation;
+        globalThis.localStorage.setItem('location', location);
+        setCity(location);
       });
     };
 

package/src/types.ts

@@ -15,7 +15,7 @@ import type { ContentPageContext } from './ContentPageContext';
 export type ColorPalette = 'pc' | 'bc' | 'eo';
 
 export type BlockVersion = 'primary' | 'secondary';
-
+export type ButtonVersion = 'primary' | 'secondary';
 export interface BlockDef {
   type: string;
   style?: string[];

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

@@ -1,6 +1,7 @@
 import '../setup-fixture';
 
 import { Button } from './Button';
+import { IconButton } from './IconButton';
 
 export default {
   all: (
@@ -60,6 +61,27 @@ export default {
           />
         </div>
       </div>
+      <div>
+        <p>With Icon</p>
+        <div className="flex gap-6" data-theme="pc">
+          <IconButton
+            href="https://www.rshb.ru/"
+            target="_blank"
+            aboveText="Доступно в"
+            text="Google Play"
+            version="secondary"
+            icon="PlayMarket"
+          />
+          <IconButton
+            href="https://www.rshb.ru/"
+            target="_blank"
+            aboveText="Загрузите в"
+            text="App Store"
+            version="secondary"
+            icon="AppleIcon"
+          />
+        </div>
+      </div>
     </div>
   ),
   'primary (Private clients)': (

package/src/ui-kit/Button.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { LinkContent } from '../types';
+import type { ButtonVersion, LinkContent } from '../types';
 
-type ButtonVersion = 'primary' | 'secondary';
 export interface ButtonProps extends LinkContent {
   className?: string;
   onClick?: (ev: MouseEvent) => any;
@@ -21,7 +20,7 @@ const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   secondary: 'bg-secondary-light text-secondary-text',
 };
 
-const styleButton = 'inline-block rounded-md px-9 py-3.5 text-center font-sans';
+const styleButton = 'inline-block rounded-md px-8 py-2 text-center font-sans';
 
 export const Button = JSX<ButtonProps>(
   ({
@@ -41,12 +40,16 @@ export const Button = JSX<ButtonProps>(
           role="button"
           aria-disabled="true"
           aria-label={ariaLabel}
-          tabindex="-1"
+          tabIndex="-1"
           className={`${styleButton} select-none ${buttonDisabledStyleMap[version]} ${
             className || ''
           }`}
         >
-          <span className="text-sm font-medium">{text || children}</span>
+          {children ? (
+            <div>{children}</div>
+          ) : (
+            <div className="text-sm font-medium py-1.5">{text}</div>
+          )}
         </div>
       );
     }
@@ -59,7 +62,11 @@ export const Button = JSX<ButtonProps>(
         onClick={onClick}
         aria-label={ariaLabel}
       >
-        <span className="text-sm font-medium">{text || children}</span>
+        {children ? (
+          <div>{children}</div>
+        ) : (
+          <div className="text-sm font-medium py-1.5">{text}</div>
+        )}
       </a>
     );
   },

package/src/ui-kit/IconButton.tsx

@@ -0,0 +1,27 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { AppleIcon, PlayMarket } from '../Icons/index';
+import type { ButtonProps } from './Button';
+import { Button } from './Button';
+
+const ICONS = { AppleIcon, PlayMarket };
+
+export interface IconButtonProps extends ButtonProps {
+  icon?: string;
+  aboveText?: string;
+}
+
+export const IconButton = JSX<IconButtonProps>((props) => {
+  return (
+    <Button {...props}>
+      {props.icon ? (
+        <div className="flex items-center">
+          <div className="mr-2">{ICONS[props.icon as keyof typeof ICONS]?.()}</div>
+          <div>
+            <div className="text-xxs text-left">{props.aboveText}</div>
+            <div className="text-sm font-medium text-left">{props.text}</div>
+          </div>
+        </div>
+      ) : null}
+    </Button>
+  );
+});