@redneckz/wildless-cms-uni-blocks 0.5.1 → 0.5.2

package/mobile/src/components/PictureText/PictureText.tsx

@@ -28,7 +28,7 @@ export const PictureText = JSX<PictureTextProps>(
   }) => {
     return (
       <BlockWrapper
-        className={`relative font-sans p-14 ${VersionStyleMap[version]} ${className}`}
+        className={`relative font-sans py-12 px-28 ${VersionStyleMap[version]} ${className}`}
         context={context}
         {...rest}
       >

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -36,7 +36,7 @@ export const ProductTile = JSX<ProductTileProps>(
       >
         <Headline
           context={context}
-          className={`!p-0 z-10 ${title || description ? 'mb-3.5' : ''}`}
+          className={`!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`}
           as="h2"
           title={title}
           description={description}
@@ -99,6 +99,8 @@ function renderAdditionalDescription(additionalDescription: string, version = 'p
   };
 
   return (
-    <div className={`text-m-light mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>
+    <div className={`text-m-light mt-2.5 z-10 ${descStyleMap[version]}`}>
+      {additionalDescription}
+    </div>
   );
 }

package/mobile/src/components/SafeDepositRental/RenderRadioButtons.tsx

@@ -3,7 +3,7 @@ import { useState } from '@redneckz/uni-jsx/lib/hooks/core';
 import { Radio } from '../../ui-kit/Radio/Radio';
 
 export const RenderRadioButtons = JSX(() => {
-  const [selectedOption, setSelectedOption] = useState('option1');
+  const [selectedOption, setSelectedOption] = useState('option2');
 
   const onChange = (_: React.ChangeEvent<HTMLInputElement>) => setSelectedOption(_.target.value);
 

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

@@ -695,7 +695,7 @@ exports[`Blocks OtherProducts should render block "OtherProducts" without conten
 
 exports[`Blocks PictureText should render block "PictureText" without content 1`] = `
 <section
-  class="relative font-sans p-14 bg-white text-primary-text "
+  class="relative font-sans py-12 px-28 bg-white text-primary-text "
 >
   <section
     class="font-sans flex flex-col p-[50px] gap-3 bg-white !p-0"
@@ -801,7 +801,7 @@ exports[`Blocks ProductTile should render block "ProductTile" without content 1`
   class="overflow-hidden font-sans p-9 box-border relative justify-between grid  bg-white text-primary-text pr-[9.4rem] min-h-[360px]"
 >
   <section
-    class="font-sans flex flex-col p-[50px] gap-2 bg-white !p-0 z-10 "
+    class="font-sans flex flex-col p-[50px] gap-2 bg-white !p-0 !bg-transparent z-10 "
   />
   <div
     class="z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline max-w-[calc(100%-186px)]"
@@ -1044,7 +1044,6 @@ 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 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"
@@ -1062,6 +1061,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 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"

package/mobile/src/model/ButtonVersion.ts

@@ -1,6 +1,6 @@
 /**
  * @title Цвет кнопки
  * @default primary
- * @enumNames ["Основная", "Второстепенная", "Ссылка"]
+ * @enumNames ["Основная", "Второстепенная", "Белая", "Ссылка"]
  */
-export type ButtonVersion = 'primary' | 'secondary' | 'link';
+export type ButtonVersion = 'primary' | 'secondary' | 'white' | 'link';

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

@@ -10,12 +10,14 @@ 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',
+  white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white',
   link: 'text-primary-main',
 };
 
 const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   primary: 'bg-secondary-dark text-secondary-text',
   secondary: 'bg-secondary-light text-secondary-text',
+  white: 'bg-white text-primary-text',
   link: '',
 };
 

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

@@ -4,12 +4,14 @@ 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',
+  white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white',
   link: '',
 };
 
 export const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   primary: 'bg-secondary-dark text-secondary-text',
   secondary: 'bg-secondary-light text-secondary-text',
+  white: 'bg-white text-primary-text',
   link: '',
 };
 

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

@@ -1,37 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { clamp } from '../../utils/clamp';
-
-// ISO 4217 codes
-/**
- * @title Валюта
- * @enumNames ["Рубль", "Доллар", "Евро"]
- * @default "RUB"
- */
-type Currency = 'RUB' | 'USD' | 'EUR';
-
-const CurrencyMap: Record<Currency, string> = {
-  RUB: '₽',
-  USD: '$',
-  EUR: '€',
-};
-
-type CurrencyInputProps = {
-  className?: string;
-  label?: string;
-  currency?: Currency;
-  onChange?: (value: string) => void;
-  name?: string;
-  value?: string;
-  placeholder?: string;
-  minValue?: number;
-  maxValue?: number;
-};
+import type { CurrencyInputProps } from './CurrencyInputProps';
 
 export const CurrencyInput = JSX<CurrencyInputProps>(
   ({
     className = '',
     label,
-    currency = 'RUB',
     onChange,
     value = '',
     minValue = 0,
@@ -55,14 +29,16 @@ export const CurrencyInput = JSX<CurrencyInputProps>(
         <div className="h-[56px] relative flex items-center">
           <input
             type="number"
-            className="text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text"
+            className={
+              'text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text'
+            }
             onChange={handleChange}
             value={value}
             min={minValue}
             max={maxValue}
             {...inputProps}
           />
-          <span className="text-xl-light absolute right-4">{CurrencyMap[currency]}</span>
+          <span className="text-xl-light absolute right-4">₽</span>
         </div>
       </div>
     );

package/mobile/src/ui-kit/CurrencyInput/CurrencyInputProps.ts

@@ -0,0 +1,10 @@
+export type CurrencyInputProps = {
+  className?: string;
+  label?: string;
+  onChange?: (value: string) => void;
+  name?: string;
+  value?: string;
+  placeholder?: string;
+  minValue?: number;
+  maxValue?: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/CardTransfer/CardTransfer.example.json

@@ -0,0 +1,6 @@
+{
+  "title": "Укажите сумму перевода",
+  "label": "Сумма перевода",
+  "buttonText": "Далее",
+  "placeholder": "1500"
+}

package/src/components/CardTransfer/CardTransfer.tsx

@@ -10,13 +10,13 @@ import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonCla
 import { getDisabledButtonClasses } from '../../ui-kit/Button/getDisabledButtonClasses';
 
 const AMOUNT_KEY = 'amount';
-const INPUT_LABEL = 'Сумма перевода';
-const BUTTON_TEXT = 'Далее';
-const PLACEHOLDER = '1500';
-const TITLE = 'Укажите сумму перевода';
-
 const FORM_URL = 'https://www.rshb.ru/p2p/';
 
+const DEFAULT_TITLE = 'Укажите сумму перевода';
+const DEFAULT_LABEL = 'Сумма перевода';
+const DEFAULT_PLACEHOLDER = '1500';
+const DEFAULT_BUTTON_TEXT = 'Далее';
+
 const BUTTON_CLASS_PARAMS: GetButtonClassParams = {
   version: 'primary',
   className: 'w-full h-[56px] px-9 mt-6',
@@ -24,36 +24,45 @@ const BUTTON_CLASS_PARAMS: GetButtonClassParams = {
 
 export interface CardTransferProps extends CardTransferContent, UniBlockProps {}
 
-export const CardTransfer = JSX<CardTransferProps>(({ className = '', title = TITLE, ...rest }) => {
-  const [value, setValue] = useState<string>('');
-  const isDisabled = !Number(value);
+export const CardTransfer = JSX<CardTransferProps>(
+  ({
+    className = '',
+    title = DEFAULT_TITLE,
+    label = DEFAULT_LABEL,
+    placeholder = DEFAULT_PLACEHOLDER,
+    buttonText = DEFAULT_BUTTON_TEXT,
+    ...rest
+  }) => {
+    const [value, setValue] = useState<string>('');
+    const isDisabled = !Number(value);
 
-  return (
-    <BlockWrapper
-      className={`p-[50px] flex flex-col items-center font-sans bg-white ${className}`}
-      {...rest}
-    >
-      {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}
-      <form className="w-[468px]" method="POST" action={FORM_URL}>
-        <CurrencyInput
-          name={AMOUNT_KEY}
-          value={value}
-          onChange={setValue}
-          placeholder={PLACEHOLDER}
-          label={INPUT_LABEL}
-        />
-        <button
-          type="submit"
-          className={
-            isDisabled
-              ? getDisabledButtonClasses(BUTTON_CLASS_PARAMS)
-              : getRegularButtonClasses(BUTTON_CLASS_PARAMS)
-          }
-          disabled={isDisabled}
-        >
-          {BUTTON_TEXT}
-        </button>
-      </form>
-    </BlockWrapper>
-  );
-});
+    return (
+      <BlockWrapper
+        className={`p-[50px] flex flex-col items-center font-sans bg-white ${className}`}
+        {...rest}
+      >
+        {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}
+        <form className="w-[468px]" method="POST" action={FORM_URL}>
+          <CurrencyInput
+            name={AMOUNT_KEY}
+            value={value}
+            onChange={setValue}
+            placeholder={placeholder}
+            label={label}
+          />
+          <button
+            type="submit"
+            className={
+              isDisabled
+                ? getDisabledButtonClasses(BUTTON_CLASS_PARAMS)
+                : getRegularButtonClasses(BUTTON_CLASS_PARAMS)
+            }
+            disabled={isDisabled}
+          >
+            {buttonText}
+          </button>
+        </form>
+      </BlockWrapper>
+    );
+  },
+);

package/src/components/CardTransfer/CardTransferContent.ts

@@ -2,9 +2,12 @@
  * @title Перевод с карты на карту
  */
 export type CardTransferContent = {
-  /**
-   * @title Заголовок
-   * @hidden
-   */
+  /** @title Заголовок */
   title?: string;
+  /** @title Название поля */
+  label?: string;
+  /** @title Плейсхолдер поля */
+  placeholder?: string;
+  /** @title Текст кнопки */
+  buttonText?: string;
 };

package/src/components/ContentPage/ContentPage.page.json

@@ -2199,7 +2199,13 @@
     },
     {
       "type": "CardTransfer",
-      "style": ["col-span-12"]
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Укажите сумму перевода",
+        "label": "Сумма перевода",
+        "buttonText": "Далее",
+        "placeholder": "1500"
+      }
     },
     {
       "type": "SafeDepositRental",

package/src/components/PictureText/PictureText.tsx

@@ -28,7 +28,7 @@ export const PictureText = JSX<PictureTextProps>(
   }) => {
     return (
       <BlockWrapper
-        className={`relative font-sans p-14 ${VersionStyleMap[version]} ${className}`}
+        className={`relative font-sans py-12 px-28 ${VersionStyleMap[version]} ${className}`}
         context={context}
         {...rest}
       >

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -50,7 +50,7 @@ const buttonsSecondary: ButtonWithIconProps[] = [
     href: 'https://rshb.ru',
     text: 'Подробнее',
     target: '_blank',
-    version: 'secondary',
+    version: 'white',
   },
 ];
 

package/src/components/ProductTile/ProductTile.tsx

@@ -36,7 +36,7 @@ export const ProductTile = JSX<ProductTileProps>(
       >
         <Headline
           context={context}
-          className={`!p-0 z-10 ${title || description ? 'mb-3.5' : ''}`}
+          className={`!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`}
           as="h2"
           title={title}
           description={description}
@@ -99,6 +99,8 @@ function renderAdditionalDescription(additionalDescription: string, version = 'p
   };
 
   return (
-    <div className={`text-m-light mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>
+    <div className={`text-m-light mt-2.5 z-10 ${descStyleMap[version]}`}>
+      {additionalDescription}
+    </div>
   );
 }

package/src/components/SafeDepositRental/RenderRadioButtons.tsx

@@ -3,7 +3,7 @@ import { useState } from '@redneckz/uni-jsx/lib/hooks/core';
 import { Radio } from '../../ui-kit/Radio/Radio';
 
 export const RenderRadioButtons = JSX(() => {
-  const [selectedOption, setSelectedOption] = useState('option1');
+  const [selectedOption, setSelectedOption] = useState('option2');
 
   const onChange = (_: React.ChangeEvent<HTMLInputElement>) => setSelectedOption(_.target.value);
 

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -90,6 +90,8 @@ export default {
           text: 'Отправить заявку',
           href: 'https://www.rshb.ru/',
           target: '_blank',
+          icon: { icon: 'ComfortableCompIcon' },
+          iconRight: { icon: 'ComfortableCompIcon' },
         }}
       />
     </div>

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

@@ -695,7 +695,7 @@ exports[`Blocks OtherProducts should render block "OtherProducts" without conten
 
 exports[`Blocks PictureText should render block "PictureText" without content 1`] = `
 <section
-  class="relative font-sans p-14 bg-white text-primary-text "
+  class="relative font-sans py-12 px-28 bg-white text-primary-text "
 >
   <section
     class="font-sans flex flex-col p-[50px] gap-3 bg-white !p-0"
@@ -801,7 +801,7 @@ exports[`Blocks ProductTile should render block "ProductTile" without content 1`
   class="overflow-hidden font-sans p-9 box-border relative justify-between grid  bg-white text-primary-text pr-[9.4rem] min-h-[360px]"
 >
   <section
-    class="font-sans flex flex-col p-[50px] gap-2 bg-white !p-0 z-10 "
+    class="font-sans flex flex-col p-[50px] gap-2 bg-white !p-0 !bg-transparent z-10 "
   />
   <div
     class="z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline max-w-[calc(100%-186px)]"
@@ -1044,7 +1044,6 @@ 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 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"
@@ -1062,6 +1061,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 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"

package/src/model/ButtonVersion.ts

@@ -1,6 +1,6 @@
 /**
  * @title Цвет кнопки
  * @default primary
- * @enumNames ["Основная", "Второстепенная", "Ссылка"]
+ * @enumNames ["Основная", "Второстепенная", "Белая", "Ссылка"]
  */
-export type ButtonVersion = 'primary' | 'secondary' | 'link';
+export type ButtonVersion = 'primary' | 'secondary' | 'white' | 'link';

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

@@ -10,12 +10,14 @@ 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',
+  white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white',
   link: 'text-primary-main',
 };
 
 const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   primary: 'bg-secondary-dark text-secondary-text',
   secondary: 'bg-secondary-light text-secondary-text',
+  white: 'bg-white text-primary-text',
   link: '',
 };
 

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

@@ -6,7 +6,9 @@ import { getDisabledButtonClasses } from './getDisabledButtonClasses';
 
 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}
@@ -18,11 +20,11 @@ export const Button = JSX<ButtonWithIconProps>((props) => {
   );
 
   return disabled ? (
-    <DisabledButton rounded={rounded} {...rest}>
+    <DisabledButton rounded={rounded} {...usedProps}>
       {buttonInner}
     </DisabledButton>
   ) : (
-    <RegularButton rounded={rounded} {...rest}>
+    <RegularButton rounded={rounded} {...usedProps}>
       {buttonInner}
     </RegularButton>
   );

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

@@ -4,12 +4,14 @@ 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',
+  white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white',
   link: '',
 };
 
 export const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   primary: 'bg-secondary-dark text-secondary-text',
   secondary: 'bg-secondary-light text-secondary-text',
+  white: 'bg-white text-primary-text',
   link: '',
 };
 

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

@@ -1,37 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { clamp } from '../../utils/clamp';
-
-// ISO 4217 codes
-/**
- * @title Валюта
- * @enumNames ["Рубль", "Доллар", "Евро"]
- * @default "RUB"
- */
-type Currency = 'RUB' | 'USD' | 'EUR';
-
-const CurrencyMap: Record<Currency, string> = {
-  RUB: '₽',
-  USD: '$',
-  EUR: '€',
-};
-
-type CurrencyInputProps = {
-  className?: string;
-  label?: string;
-  currency?: Currency;
-  onChange?: (value: string) => void;
-  name?: string;
-  value?: string;
-  placeholder?: string;
-  minValue?: number;
-  maxValue?: number;
-};
+import type { CurrencyInputProps } from './CurrencyInputProps';
 
 export const CurrencyInput = JSX<CurrencyInputProps>(
   ({
     className = '',
     label,
-    currency = 'RUB',
     onChange,
     value = '',
     minValue = 0,
@@ -55,14 +29,16 @@ export const CurrencyInput = JSX<CurrencyInputProps>(
         <div className="h-[56px] relative flex items-center">
           <input
             type="number"
-            className="text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text"
+            className={
+              'text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text'
+            }
             onChange={handleChange}
             value={value}
             min={minValue}
             max={maxValue}
             {...inputProps}
           />
-          <span className="text-xl-light absolute right-4">{CurrencyMap[currency]}</span>
+          <span className="text-xl-light absolute right-4">₽</span>
         </div>
       </div>
     );

package/src/ui-kit/CurrencyInput/CurrencyInputProps.ts

@@ -0,0 +1,10 @@
+export type CurrencyInputProps = {
+  className?: string;
+  label?: string;
+  onChange?: (value: string) => void;
+  name?: string;
+  value?: string;
+  placeholder?: string;
+  minValue?: number;
+  maxValue?: number;
+};