@redneckz/wildless-cms-uni-blocks 0.4.5 → 0.4.7

package/src/components/__snapshots__/Blocks.spec.tsx.snap

@@ -56,6 +56,58 @@ exports[`Blocks Calculator should render block "Calculator" without content 1`]
 </section>
 `;
 
+exports[`Blocks CardTransfer should render block "CardTransfer" without content 1`] = `
+<section
+  class="p-[50px] flex flex-col items-center font-sans bg-white "
+>
+  <h3
+    class="font-sans m-0 text-h2 max-w-[684px] pb-9"
+  >
+    Укажите сумму перевода
+  </h3>
+  <form
+    action="https://www.rshb.ru/p2p/"
+    class="w-[468px]"
+    method="POST"
+  >
+    <div
+      class=""
+    >
+      <label
+        class="block text-m-light mb-2"
+      >
+        Сумма перевода
+      </label>
+      <div
+        class="h-[56px] relative flex items-center"
+      >
+        <input
+          class="text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke"
+          max="300000"
+          min="0"
+          name="amount"
+          placeholder="1500"
+          type="number"
+          value=""
+        />
+        <span
+          class="text-xl-light absolute right-4"
+        >
+          ₽
+        </span>
+      </div>
+    </div>
+    <button
+      class="inline-block text-center font-sans select-none bg-secondary-dark text-secondary-text rounded-md w-full h-[56px] px-9 mt-6"
+      disabled=""
+      type="submit"
+    >
+      Далее
+    </button>
+  </form>
+</section>
+`;
+
 exports[`Blocks Catalog should render block "Catalog" without content 1`] = `
 <section
   class="bg-white relative font-sans p-12 overflow-hidden text-center "
@@ -93,6 +145,17 @@ exports[`Blocks ComparisonTable should render block "ComparisonTable" without co
 </section>
 `;
 
+exports[`Blocks ErrorBlock should render block "ErrorBlock" without content 1`] = `
+<section
+  class="flex flex-col justify-center items-center "
+  role="listitem"
+>
+  <div
+    class="flex justify-center mb-7"
+  />
+</section>
+`;
+
 exports[`Blocks ExchangeRateTile should render block "ExchangeRateTile" without content 1`] = `
 <section
   class="bg-white text-primary-text font-sans p-9 box-border "
@@ -215,8 +278,8 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
         </desc>
         <use
           class="text-primary-main "
-          href="icons/Logo.svg#icon"
-          xlink:href="icons/Logo.svg#icon"
+          href="icons/LogoIcon.svg#icon"
+          xlink:href="icons/LogoIcon.svg#icon"
         />
       </svg>
       <span
@@ -418,8 +481,8 @@ exports[`Blocks Header should render block "Header" without content 1`] = `
           </desc>
           <use
             class="text-primary-main "
-            href="icons/Logo.svg#icon"
-            xlink:href="icons/Logo.svg#icon"
+            href="icons/LogoIcon.svg#icon"
+            xlink:href="icons/LogoIcon.svg#icon"
           />
         </svg>
         <span
@@ -614,6 +677,12 @@ exports[`Blocks Navigation should render block "Navigation" without content 1`]
 </section>
 `;
 
+exports[`Blocks OfficeServicesBlock should render block "OfficeServicesBlock" without content 1`] = `
+<section
+  class="font-sans bg-white p-12 flex flex-col "
+/>
+`;
+
 exports[`Blocks OtherProducts should render block "OtherProducts" without content 1`] = `
 <section
   class="font-sans text-primary-text "
@@ -817,20 +886,15 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               Город
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder="12321321312"
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="Москва"
+                value=""
               >
-                Москва
-              </option>
-              <option
-                class=""
-                value="Краснодар"
-              >
-                Краснодар
+                Выберите значение
               </option>
             </select>
           </div>
@@ -845,32 +909,15 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               Отделение
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder="12321321312"
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="выберите отделение"
-              >
-                выберите отделение
-              </option>
-              <option
-                class=""
-                value="МоскваОфис1"
-              >
-                МоскваОфис1
-              </option>
-              <option
-                class=""
-                value="МоскваОфис2"
-              >
-                МоскваОфис2
-              </option>
-              <option
-                class=""
-                value="МоскваОфис3"
+                value=""
               >
-                МоскваОфис3
+                Выберите отделение
               </option>
             </select>
           </div>
@@ -933,29 +980,18 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
             <span
               class="block text-m-light mb-2"
             >
-              Размер ячейки
+              Размер
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder="12321321312"
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="маленькая"
-              >
-                маленькая
-              </option>
-              <option
-                class=""
-                value="средняя"
-              >
-                средняя
-              </option>
-              <option
-                class=""
-                value="большая"
+                value=""
               >
-                большая
+                Выберите размер
               </option>
             </select>
           </div>
@@ -970,26 +1006,15 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               Параметры ячейки, мм (ВхШхД)
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder="12321321312"
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="125x225x375"
-              >
-                125x225x375
-              </option>
-              <option
-                class=""
-                value="200x300x400"
-              >
-                200x300x400
-              </option>
-              <option
-                class=""
-                value="300x400x500"
+                value=""
               >
-                300x400x500
+                Выберите параметр ячейки
               </option>
             </select>
           </div>
@@ -1011,7 +1036,8 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               class="flex items-center relative cursor-pointer"
             >
               <input
-                class="appearance-none flex justify-center items-center w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+                checked=""
+                class="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
                 name="contractType"
                 type="radio"
                 value="option1"
@@ -1028,8 +1054,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               class="flex items-center relative cursor-pointer"
             >
               <input
-                checked=""
-                class="appearance-none flex justify-center items-center w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+                class="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
                 name="contractType"
                 type="radio"
                 value="option2"
@@ -1094,7 +1119,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
           <span
             class="text-h3"
           >
-            26 ₽
+            0 ₽
           </span>
         </div>
       </div>
@@ -1108,15 +1133,15 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
           width="290"
         >
           <title>
-            Иконка PackA4
+            Иконка PackA4Icon
           </title>
           <desc>
-            Иконка PackA4
+            Иконка PackA4Icon
           </desc>
           <use
             class="text-primary-main "
-            href="icons/PackA4.svg#icon"
-            xlink:href="icons/PackA4.svg#icon"
+            href="icons/PackA4Icon.svg#icon"
+            xlink:href="icons/PackA4Icon.svg#icon"
           />
         </svg>
         <span

package/src/icons/IconName.ts

@@ -2,7 +2,7 @@
 /* eslint-disable max-len, max-lines */
 export enum IconMap {
   ActualBalanceIcon = 'ActualBalanceIcon',
-  AirPlane = 'AirPlane',
+  AirPlaneIcon = 'AirPlaneIcon',
   AppleIcon = 'AppleIcon',
   ArrowDownIcon = 'ArrowDownIcon',
   ArrowLeftIcon = 'ArrowLeftIcon',
@@ -26,7 +26,7 @@ export enum IconMap {
   ComfortableCompIcon = 'ComfortableCompIcon',
   CreditCardsIcon = 'CreditCardsIcon',
   DiscountShapeIcon = 'DiscountShapeIcon',
-  DocDownload = 'DocDownload',
+  DocDownloadIcon = 'DocDownloadIcon',
   DocIcon = 'DocIcon',
   DocIconMonoColor = 'DocIconMonoColor',
   DocsIcon = 'DocsIcon',
@@ -45,7 +45,7 @@ export enum IconMap {
   InterestGrowthIcon = 'InterestGrowthIcon',
   InterestIcon = 'InterestIcon',
   JCBIcon = 'JCBIcon',
-  Logo = 'Logo',
+  LogoIcon = 'LogoIcon',
   LoupeIcon = 'LoupeIcon',
   MasterCardIcon = 'MasterCardIcon',
   MinusIcon = 'MinusIcon',
@@ -56,7 +56,7 @@ export enum IconMap {
   NewDocIcon = 'NewDocIcon',
   OfficeIcon = 'OfficeIcon',
   OkIcon = 'OkIcon',
-  PackA4 = 'PackA4',
+  PackA4Icon = 'PackA4Icon',
   PassSendIcon = 'PassSendIcon',
   PercentageRoundIcon = 'PercentageRoundIcon',
   PercentageSquareIcon = 'PercentageSquareIcon',
@@ -83,12 +83,12 @@ export enum IconMap {
   WalletAddIcon = 'WalletAddIcon',
   WalletIcon = 'WalletIcon',
   WalletWithMoneyIcon = 'WalletWithMoneyIcon',
-  WateringCan = 'WateringCan',
+  WateringCanIcon = 'WateringCanIcon',
 }
 
 export enum IconTitleMap {
   ActualBalanceIcon = 'Деньги',
-  AirPlane = 'Самолет',
+  AirPlaneIcon = 'Самолет',
   AppleIcon = 'Лого «Apple»',
   ArrowDownIcon = "Стрелка 'Вниз'",
   ArrowLeftIcon = 'Стрелка',
@@ -112,7 +112,7 @@ export enum IconTitleMap {
   ComfortableCompIcon = 'Кресло',
   CreditCardsIcon = 'Кредитные карты',
   DiscountShapeIcon = 'Скидка',
-  DocDownload = 'Скачать документ',
+  DocDownloadIcon = 'Скачать документ',
   DocIcon = 'Документ',
   DocIconMonoColor = 'Документ (одноцветный)',
   DocsIcon = 'Документы',
@@ -131,7 +131,7 @@ export enum IconTitleMap {
   InterestGrowthIcon = 'Диаграмма роста',
   InterestIcon = 'Скидка',
   JCBIcon = 'JCB',
-  Logo = 'Logo',
+  LogoIcon = 'Logo',
   LoupeIcon = 'Лупа',
   MasterCardIcon = 'MasterCard',
   MinusIcon = 'Минус',
@@ -142,7 +142,7 @@ export enum IconTitleMap {
   NewDocIcon = 'Новый документ',
   OfficeIcon = 'Офис',
   OkIcon = 'Лого «Одноклассники»',
-  PackA4 = 'PackA4',
+  PackA4Icon = 'PackA4Icon',
   PassSendIcon = 'Бизнес',
   PercentageRoundIcon = 'Проценты (круг.)',
   PercentageSquareIcon = 'Проценты',
@@ -169,7 +169,7 @@ export enum IconTitleMap {
   WalletAddIcon = 'Кошелёк с плюсом',
   WalletIcon = 'Кошелёк',
   WalletWithMoneyIcon = 'Кошелёк с деньгами',
-  WateringCan = 'Добавить продукт',
+  WateringCanIcon = 'Добавить продукт',
 }
 
 /**
@@ -177,13 +177,13 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолет', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кино', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'MasterCard', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'PackA4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'StateMortgageIcon', 'Лого «Telegram»', 'UnionPay', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
+ *   'Деньги', 'Самолет', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кино', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'MasterCard', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'PackA4Icon', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'StateMortgageIcon', 'Лого «Telegram»', 'UnionPay', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
  * ]
  */
 export type IconName =
   | ''
   | 'ActualBalanceIcon'
-  | 'AirPlane'
+  | 'AirPlaneIcon'
   | 'AppleIcon'
   | 'ArrowDownIcon'
   | 'ArrowLeftIcon'
@@ -207,7 +207,7 @@ export type IconName =
   | 'ComfortableCompIcon'
   | 'CreditCardsIcon'
   | 'DiscountShapeIcon'
-  | 'DocDownload'
+  | 'DocDownloadIcon'
   | 'DocIcon'
   | 'DocIconMonoColor'
   | 'DocsIcon'
@@ -226,7 +226,7 @@ export type IconName =
   | 'InterestGrowthIcon'
   | 'InterestIcon'
   | 'JCBIcon'
-  | 'Logo'
+  | 'LogoIcon'
   | 'LoupeIcon'
   | 'MasterCardIcon'
   | 'MinusIcon'
@@ -237,7 +237,7 @@ export type IconName =
   | 'NewDocIcon'
   | 'OfficeIcon'
   | 'OkIcon'
-  | 'PackA4'
+  | 'PackA4Icon'
   | 'PassSendIcon'
   | 'PercentageRoundIcon'
   | 'PercentageSquareIcon'
@@ -264,4 +264,4 @@ export type IconName =
   | 'WalletAddIcon'
   | 'WalletIcon'
   | 'WalletWithMoneyIcon'
-  | 'WateringCan';
+  | 'WateringCanIcon';

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BenefitItemProps, BenefitItemCommonProps } from './BenefitItemProps';
-import { Img } from '../Img/Img';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { Img } from '../Img/Img';
+import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
 
 export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
 
@@ -25,15 +25,18 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
   } = props;
 
   const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
+  const listItemAlign = description ? 'items-start' : 'items-center';
 
   return (
-    <div className={`flex items-start gap-5 ${className}`}>
+    <div className={`flex gap-5 ${listItemAlign} ${className}`}>
       {icon ? (
-        <Img
-          className={renderBenefitIconBgStyle(version, benefitsVersion)}
-          image={{ ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
-          asSVG
-        />
+        <div className={renderBenefitIconBgStyle(version, benefitsVersion)}>
+          <Img
+            className="w-[24px] h-[24px]"
+            image={{ ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
+            asSVG
+          />
+        </div>
       ) : null}
       <div className="gap-0.5">
         {label ? <div className={`text-h6 ${titleStyleMap[version]}`}>{label}</div> : null}
@@ -54,5 +57,5 @@ function renderBenefitIconBgStyle(version, benefitsVersion) {
     bgColorStyle = 'bg-secondary-light text-primary-main';
   }
 
-  return `w-[50px] h-[50px] min-w-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
+  return `w-[50px] h-[50px] min-w-[50px] rounded-full p-[10px] box-border flex items-center justify-center ${bgColorStyle}`;
 }

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

@@ -1,22 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ButtonVersion } from '../../model/ButtonVersion';
 import { ButtonInner } from './ButtonInner';
 import type { ButtonWithIconProps } from './ButtonProps';
-
-const buttonStyleMap: Record<ButtonVersion, string> = {
-  primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
-  secondary:
-    'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
-  link: '',
-};
-
-const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
-  primary: 'bg-secondary-dark text-secondary-text',
-  secondary: 'bg-secondary-light text-secondary-text',
-  link: '',
-};
-
-const buttonStyle = 'text-center font-sans select-none';
+import { getRegularButtonClasses } from './getRegularButtonClasses';
+import { getDisabledButtonClasses } from './getDisabledButtonClasses';
 
 export const Button = JSX<ButtonWithIconProps>((props) => {
   const { text, aboveText, appendLeft, appendRight, children, disabled, rounded, ...rest } = props;
@@ -43,22 +29,10 @@ export const Button = JSX<ButtonWithIconProps>((props) => {
 });
 
 const RegularButton = JSX<ButtonWithIconProps>(
-  ({
-    className = '',
-    ariaLabel,
-    version = 'none',
-    rounded,
-    href,
-    target,
-    children,
-    onClick,
-    ...rest
-  }) => {
+  ({ className = '', ariaLabel, version, rounded, href, target, children, onClick, ...rest }) => {
     return (
       <a
-        className={`${buttonStyle} border border-transparent inline-block cursor-pointer no-underline focus:border-primary-focus focus:border ${
-          buttonStyleMap[version] || ''
-        } ${rounded ? 'rounded-full' : 'rounded-md'} ${className}`}
+        className={getRegularButtonClasses({ className, version, rounded })}
         href={href}
         target={target}
         onClick={onClick}
@@ -73,16 +47,14 @@ const RegularButton = JSX<ButtonWithIconProps>(
 );
 
 const DisabledButton = JSX<ButtonWithIconProps>(
-  ({ className, children, ariaLabel, version = 'none', rounded }) => {
+  ({ className, children, ariaLabel, version, rounded }) => {
     return (
       <div
         role="button"
         aria-disabled="true"
         aria-label={ariaLabel}
         tabIndex={-1}
-        className={`inline-block ${buttonStyle} ${buttonDisabledStyleMap[version] || ''} ${
-          rounded ? 'rounded-full' : 'rounded-md'
-        } ${className || ''}`}
+        className={getDisabledButtonClasses({ className, rounded, version })}
       >
         {children}
       </div>

package/src/ui-kit/Button/GetButtonClassParams.ts

@@ -0,0 +1,7 @@
+import type { ButtonVersion } from '../../model/ButtonVersion';
+
+export type GetButtonClassParams = {
+  className?: string;
+  rounded?: boolean;
+  version?: ButtonVersion;
+};

package/src/ui-kit/Button/buttonClassNameConstants.ts

@@ -0,0 +1,16 @@
+import type { ButtonVersion } from '../../model/ButtonVersion';
+
+export const buttonStyleMap: Record<ButtonVersion, string> = {
+  primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
+  secondary:
+    'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
+  link: '',
+};
+
+export const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
+  primary: 'bg-secondary-dark text-secondary-text',
+  secondary: 'bg-secondary-light text-secondary-text',
+  link: '',
+};
+
+export const buttonStyle = 'text-center font-sans select-none';

package/src/ui-kit/Button/getDisabledButtonClasses.ts

@@ -0,0 +1,15 @@
+import type { GetButtonClassParams } from './GetButtonClassParams';
+import { buttonDisabledStyleMap, buttonStyle } from './buttonClassNameConstants';
+
+export const getDisabledButtonClasses = ({
+  className,
+  rounded,
+  version,
+}: GetButtonClassParams): string =>
+  [
+    'inline-block',
+    buttonStyle,
+    version ? buttonDisabledStyleMap[version] : '',
+    rounded ? 'rounded-full' : 'rounded-md',
+    className,
+  ].join(' ');

package/src/ui-kit/Button/getRegularButtonClasses.ts

@@ -0,0 +1,15 @@
+import type { GetButtonClassParams } from './GetButtonClassParams';
+import { buttonStyle, buttonStyleMap } from './buttonClassNameConstants';
+
+export const getRegularButtonClasses = ({
+  className,
+  rounded,
+  version,
+}: GetButtonClassParams): string =>
+  [
+    buttonStyle,
+    'border border-transparent inline-block cursor-pointer no-underline focus:border-primary-focus focus:border',
+    version ? buttonStyleMap[version] : '',
+    rounded ? 'rounded-full' : 'rounded-md',
+    className,
+  ].join(' ');