@redneckz/wildless-cms-uni-blocks 0.14.65 → 0.14.67

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

@@ -1,201 +1,64 @@
-import '../../setup-fixture';
-
 import { Img } from '../Img/Img';
 import { Button } from './Button';
 
-export default {
-  all: (
-    <div className="font-sans overflow-hidden bg-white">
-      <div>
-        <p>Private clients</p>
-        <div className="flex gap-xl" data-theme="pc">
-          <Button href="https://old.rshb.ru/" target="_blank" text="Primary" version="primary" />
-          <Button href="https://old.rshb.ru/" target="_blank" text="Link" version="secondary" />
-          <Button href="https://old.rshb.ru/" target="_blank" text="Secondary" version="link" />
-        </div>
-      </div>
-      <div>
-        <p>Business clients</p>
-        <div className="flex gap-xl" data-theme="bc">
-          <Button href="https://old.rshb.ru/" target="_blank" text="Primary" version="primary" />
-          <Button
-            href="https://old.rshb.ru/"
-            target="_blank"
-            text="Secondary"
-            version="secondary"
-          />
-        </div>
-      </div>
-      <div>
-        <p>Ecosystem own</p>
-        <div className="flex gap-xl" data-theme="eo">
-          <Button href="https://old.rshb.ru/" target="_blank" text="Primary" version="primary" />
-          <Button
-            href="https://old.rshb.ru/"
-            target="_blank"
-            text="Secondary"
-            version="secondary"
-          />
-        </div>
-      </div>
-      <div>
-        <p>Disabled</p>
-        <div className="flex gap-xl">
-          <Button
-            href="https://old.rshb.ru/"
-            target="_blank"
-            text="Primary"
-            version="primary"
-            disabled
-          />
-          <Button
-            href="https://old.rshb.ru/"
-            target="_blank"
-            text="Secondary"
-            version="secondary"
-            disabled
-          />
-        </div>
-      </div>
-      <div>
-        <p>With Icon</p>
-        <div className="flex gap-xl" data-theme="pc">
-          <Button
-            href="https://old.rshb.ru/"
-            target="_blank"
-            aboveText="Доступно в"
-            appendLeft={
-              /** Div need for perfect pixel */
-              <div>
-                <Img image={{ icon: 'PlayMarketIcon' }} width="24" height="24" />
-              </div>
-            }
-            text="Google Play"
-            version="secondary"
-          />
-          <Button
-            href="https://old.rshb.ru/"
-            target="_blank"
-            aboveText="Загрузите в"
-            appendLeft={
-              <div>
-                <Img image={{ icon: 'AppleIcon' }} width="24" height="24" />
-              </div>
-            }
-            text="App Store"
-            version="secondary"
-          />
+const buttonText = 'Оформить';
+const icon = <Img image={{ icon: 'BankIcon', iconVersion: 'normal' }} width="24" height="24" />;
 
-          <Button
-            href="https://old.rshb.ru/"
-            target="_blank"
-            appendRight={
-              <div>
-                <Img image={{ icon: 'TelegramIcon' }} width="20" height="16" />
-              </div>
-            }
-            text="Мы в Telegram"
-            version="primary"
-          />
-        </div>
+export default {
+  'primary palette': (
+    <div className="p-xs flex justify-around">
+      <div className="bg-white p-xl flex flex-col gap-2">
+        <p>Primary</p>
+        <Button>{buttonText}</Button>
+        <Button active>{buttonText}</Button>
+        <Button disabled>{buttonText}</Button>
+        <Button>
+          {icon}
+          {buttonText}
+        </Button>
       </div>
-      <div>
-        <p>Rounded with only Icon</p>
-        <div className="flex gap-xl" data-theme="pc">
-          <Button
-            rounded
-            href="https://old.rshb.ru/"
-            target="_blank"
-            version="secondary"
-            appendLeft={<Img image={{ icon: 'PlayMarketIcon' }} width="20" height="21" />}
-          />
-          <Button
-            rounded
-            href="https://old.rshb.ru/"
-            target="_blank"
-            version="secondary"
-            appendLeft={<Img image={{ icon: 'AppleIcon' }} width="18" height="20" />}
-          />
-        </div>
+      <div className="bg-white p-xl flex flex-col gap-2">
+        <p>Secondary</p>
+        <Button version="secondary">{buttonText}</Button>
+        <Button version="secondary" active>
+          {buttonText}
+        </Button>
+        <Button version="secondary" disabled>
+          {buttonText}
+        </Button>
+        <Button version="secondary">
+          {icon}
+          {buttonText}
+        </Button>
       </div>
     </div>
   ),
-  'primary (Private clients)': (
-    <div data-theme="pc">
-      <Button
-        href="https://old.rshb.ru/"
-        target="_blank"
-        text="Оформить кредит"
-        version="primary"
-      />
-    </div>
-  ),
-  'secondary (Private clients)': (
-    <div data-theme="pc">
-      <Button
-        href="https://old.rshb.ru/"
-        target="_blank"
-        text="Оформить кредит"
-        version="secondary"
-      />
-    </div>
-  ),
-  'primary (Business clients)': (
-    <div data-theme="bc">
-      <Button
-        href="https://old.rshb.ru/"
-        target="_blank"
-        text="Оформить кредит"
-        version="primary"
-      />
-    </div>
-  ),
-  'secondary (Business clients)': (
-    <div data-theme="bc">
-      <Button
-        href="https://old.rshb.ru/"
-        target="_blank"
-        text="Оформить кредит"
-        version="secondary"
-      />
-    </div>
-  ),
-  'primary (Ecosystem own)': (
-    <div data-theme="eo">
-      <Button
-        href="https://old.rshb.ru/"
-        target="_blank"
-        text="Оформить кредит"
-        version="primary"
-      />
-    </div>
-  ),
-  'secondary (Ecosystem own)': (
-    <div data-theme="eo">
-      <Button
-        href="https://old.rshb.ru/"
-        target="_blank"
-        text="Оформить кредит"
-        version="secondary"
-      />
+  'secondary palette': (
+    <div className="group p-xs flex justify-around" data-ver="secondary">
+      <div className="bg-primary-main p-xl flex flex-col gap-2">
+        <p className="text-white">Primary</p>
+        <Button>{buttonText}</Button>
+        <Button active>{buttonText}</Button>
+        <Button disabled>{buttonText}</Button>
+        <Button>
+          {icon}
+          {buttonText}
+        </Button>
+      </div>
+      <div className="bg-primary-main p-xl flex flex-col gap-2">
+        <p className="text-white">Secondary</p>
+        <Button version="secondary">{buttonText}</Button>
+        <Button version="secondary" active>
+          {buttonText}
+        </Button>
+        <Button version="secondary" disabled>
+          {buttonText}
+        </Button>
+        <Button version="secondary">
+          {icon}
+          {buttonText}
+        </Button>
+      </div>
     </div>
   ),
-  'primary (disabled)': (
-    <Button
-      href="https://old.rshb.ru/"
-      target="_blank"
-      text="Оформить кредит"
-      version="primary"
-      disabled
-    />
-  ),
-  'secondary (disabled)': (
-    <Button
-      href="https://old.rshb.ru/"
-      target="_blank"
-      text="Оформить кредит"
-      version="secondary"
-      disabled
-    />
-  ),
 };

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

@@ -1,49 +1,75 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
-import { ButtonInner } from './ButtonInner';
-import { type ButtonProps } from './ButtonProps';
-import { getDisabledButtonClasses } from './getDisabledButtonClasses';
-import { getRegularButtonClasses } from './getRegularButtonClasses';
-import { useFormSubmit } from './useFormSubmit';
-
-export const Button = JSX<ButtonProps>(({ disabled, children, method = 'LINK', href, ...rest }) => {
-  const handleFormSubmit = useFormSubmit({ method, href });
-
-  const link = useLink();
-  const adjustedProps = link({ onClick: handleFormSubmit, href, ...rest });
-  const buttonInner = children ?? <ButtonInner {...adjustedProps} />;
-
-  return disabled ? (
-    <DisabledButton {...adjustedProps}>{buttonInner}</DisabledButton>
-  ) : (
-    <RegularButton {...adjustedProps}>{buttonInner}</RegularButton>
-  );
-});
+import { type ButtonVersion } from '../../model/ButtonVersion';
+import { style } from '../../utils/style';
+import { type ARIAProps } from '../ARIAProps';
+import { type ControlStateProps } from '../ControlStateProps';
+import type { PreventableEvent } from '../PreventableEvent';
+import { useButton } from './useButton';
+
+const activeButtonStyleMap = 'text-white bg-primary-active';
+
+const disabledButtonStyle = 'bg-main-gray text-main-disabled cursor-not-allowed';
+
+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',
+};
+
+const secondaryButtonStyleMap: Record<ButtonVersion, string> = {
+  primary: style(
+    'group-data-secondary:text-primary-main group-data-secondary:bg-white',
+    'group-data-secondary:hover:text-white group-data-secondary:hover:bg-primary-hover',
+    'group-data-secondary:active:bg-primary-active',
+  ),
+  secondary: style(
+    'group-data-secondary:text-white group-data-secondary:bg-white/20',
+    'group-data-secondary:hover:bg-primary-hover',
+    'group-data-secondary:active:bg-primary-active',
+  ),
+};
+
+export interface ButtonProps extends ControlStateProps, ARIAProps {
+  className?: string;
+  version?: ButtonVersion;
+  type?: 'button' | 'submit' | 'reset' | undefined;
+  rounded?: boolean;
+  role?: string;
+  onClick?: (ev?: PreventableEvent) => void;
+}
+
+export const Button = JSX<ButtonProps>(({ children, ...props }) => {
+  const button = useButton();
+
+  const {
+    className,
+    version = 'primary',
+    active,
+    disabled,
+    type = 'button',
+    rounded = true,
+    role,
+    onClick,
+  } = button(props);
 
-const RegularButton = JSX<ButtonProps>(
-  ({ className = '', href, rel, target, ariaLabel, version, rounded, onClick, children }) => (
-    <a
-      className={getRegularButtonClasses({ className, version, rounded })}
-      href={href}
-      rel={rel}
-      target={target}
-      aria-label={ariaLabel}
-      role={href ? 'link' : 'button'}
+  return (
+    <button
+      className={style(
+        'font-sans px-9 py-4',
+        'flex justify-center items-center gap-xs',
+        active ? activeButtonStyleMap : '',
+        disabled ? disabledButtonStyle : '',
+        !active && !disabled
+          ? style(buttonStyleMap[version], secondaryButtonStyleMap[version])
+          : '',
+        rounded ? 'rounded-md' : '',
+        className,
+      )}
+      type={type}
+      role={role}
       onClick={onClick}
     >
       {children}
-    </a>
-  ),
-);
-
-const DisabledButton = JSX<ButtonProps>(({ className, ariaLabel, version, rounded, children }) => (
-  <div
-    role="button"
-    aria-disabled="true"
-    aria-label={ariaLabel}
-    tabIndex={-1}
-    className={getDisabledButtonClasses({ className, rounded, version })}
-  >
-    {children}
-  </div>
-));
+    </button>
+  );
+});

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

@@ -0,0 +1,16 @@
+import { handlerDecorator } from '../../hooks/handlerDecorator';
+import { type PreventableEvent } from '../PreventableEvent';
+import { type ButtonProps } from './Button';
+
+export function useButton() {
+  return (props: ButtonProps): ButtonProps => ({
+    ...props,
+    onClick: handlerDecorator(handleClick(props), props),
+  });
+}
+
+function handleClick({ disabled, onClick }: Partial<ButtonProps>) {
+  return (ev?: PreventableEvent) => {
+    !disabled && onClick && onClick(ev);
+  };
+}

package/src/ui-kit/ControlStateProps.ts

@@ -0,0 +1,4 @@
+export interface ControlStateProps {
+  active?: boolean;
+  disabled?: boolean;
+}

package/src/ui-kit/InnerTable/InnerTableBodyItem.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
-import { renderArrows } from '../Button/renderArrows';
+import { renderArrows } from '../LinkButton/renderArrows';
 import { type RowsData } from './InnerTableProps';
 import { renderInnerTableRow } from './renderInnerTableRow';
 

package/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type TariffsTableCellIndexProps } from '../../components/TariffsTable/TariffsTableContent';
-import { Button } from '../Button/Button';
 import { Img } from '../Img/Img';
+import { LinkButton } from '../LinkButton/LinkButton';
 import { type TariffsTableInnerContent } from './InnerTableProps';
 
 export interface InnerTableButtonProps
@@ -14,7 +14,7 @@ export interface InnerTableButtonProps
 
 export const TableInnerButton = JSX<InnerTableButtonProps>(
   ({ className = '', isOpen, onClick }) => (
-    <Button
+    <LinkButton
       className={className}
       appendRight={
         <Img image={{ icon: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon' }} width="20" height="20" />

package/src/ui-kit/InnerTable/InnerTableHeader.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
+import { LinkButton } from '../LinkButton/LinkButton';
 import { linkButtonVersion } from './linkButtonVersion';
 
 export interface InnerTableHeaderProps {
@@ -29,7 +29,7 @@ export const InnerTableHeader = JSX<InnerTableHeaderProps>(
         </div>
       ) : null}
       {linkToPDF ? (
-        <Button
+        <LinkButton
           className="text-primary-main"
           href={linkToPDF}
           version={linkButtonVersion}

package/src/ui-kit/{Button → LinkButton}/ArrowButton.tsx

@@ -1,11 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
 import { Img } from '../Img/Img';
-import { Button } from './Button';
-import { type ButtonProps } from './ButtonProps';
+import { LinkButton } from './LinkButton';
+import { type LinkButtonProps } from './LinkButtonProps';
 
-export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) => (
-  <Button
+/** @deprecated */
+export const ArrowButton = JSX<LinkButtonProps>(({ className, disabled, ...rest }) => (
+  <LinkButton
     rounded
     className={style(
       'group/btn w-12 h-12 min-h-12 max-h-12 flex items-center justify-center shadow-main-black',
@@ -24,14 +25,16 @@ export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) =
       width="16"
       height="16"
     />
-  </Button>
+  </LinkButton>
 ));
 
-export const ScrollLeftButton = JSX<ButtonProps>((props) => (
+/** @deprecated */
+export const ScrollLeftButton = JSX<LinkButtonProps>((props) => (
   <ArrowButton {...props} ariaLabel="Пролистать влево" data-block-control="scroll-left" />
 ));
 
-export const ScrollRightButton = JSX<ButtonProps>((props) => (
+/** @deprecated */
+export const ScrollRightButton = JSX<LinkButtonProps>((props) => (
   <ArrowButton
     {...props}
     className={`${props.className || ''} rotate-180`}

package/{mobile/src/ui-kit/Button → src/ui-kit/LinkButton}/ButtonInner.tsx

@@ -1,10 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
 import { iconStyleMap } from './buttonClassNameConstants';
-import { type ButtonContent } from './ButtonContent';
-import { type ButtonProps } from './ButtonProps';
+import { type LinkButtonContent } from './LinkButtonContent';
+import { type LinkButtonProps } from './LinkButtonProps';
 
-export const ButtonInner = JSX<ButtonProps>((props) => {
+/** @deprecated */
+export const ButtonInner = JSX<LinkButtonProps>((props) => {
   const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
   const iconHideStyle = isWithText(props) ? 'hidden lg:block' : '';
 
@@ -26,7 +27,7 @@ export const ButtonInner = JSX<ButtonProps>((props) => {
   );
 });
 
-const getButtonStyle = (props: ButtonContent) => {
+const getButtonStyle = (props: LinkButtonContent) => {
   const { version, aboveText, rounded } = props;
 
   if (version === 'link') {
@@ -42,5 +43,5 @@ const getButtonStyle = (props: ButtonContent) => {
   );
 };
 
-const isWithText = ({ text, aboveText, appendLeft }: ButtonProps) =>
+const isWithText = ({ text, aboveText, appendLeft }: LinkButtonProps) =>
   Boolean(text || aboveText || !appendLeft);

package/src/ui-kit/LinkButton/ButtonsSectionContent.ts

@@ -0,0 +1,9 @@
+import { type LinkButtonContent } from './LinkButtonContent';
+
+/** @deprecated */
+export interface ButtonsSectionContent {
+  /**
+   * @title Кнопки
+   */
+  buttons?: LinkButtonContent[];
+}

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

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

package/{mobile/src/ui-kit/Button → src/ui-kit/LinkButton}/LikeButton.tsx

@@ -1,11 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 
+/** @deprecated */
 export interface LikeButtonProps {
   className?: string;
   onClick?: () => void;
   ariaLabel?: string;
 }
 
+/** @deprecated */
 export const LikeButton = JSX<LikeButtonProps>(({ className, onClick, ariaLabel }) => (
   <button
     type="button"