feat(custom-button): split custom button by desktop / mobile (#1472)

* feat(custom-button): slit custom button by desktop / mobile
core-ds · Dec 26, 2024 · cefed5b · cefed5b
1 parent 98cd512
commit cefed5b
Show file tree

Hide file tree

Showing 16 changed files with 1,377 additions and 159 deletions.
diff --git a/.changeset/tall-mugs-clap.md b/.changeset/tall-mugs-clap.md
@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-custom-button': minor
+---
+
+Добавлена возможность импортировать desktop / mobile по отдельности
diff --git a/packages/custom-button/src/Component.test.tsx b/packages/custom-button/src/Component.test.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { CustomButton } from './index';
+import { CustomButton } from '.';
+import { CustomButtonDesktop } from './desktop';
+import { CustomButtonMobile } from './mobile';
 
 const dataTestId = 'test-id';
 
@@ -23,21 +25,31 @@ describe('CustomButton', () => {
     describe('Snapshots tests', () => {
         it('should match snapshot', () => {
             expect(render(<CustomButton />)).toMatchSnapshot();
+            expect(render(<CustomButtonDesktop />)).toMatchSnapshot();
+            expect(render(<CustomButtonMobile />)).toMatchSnapshot();
         });
 
         it('should render custom background color', () => {
             expect(render(<CustomButton backgroundColor='#00ff00' />)).toMatchSnapshot();
+            expect(render(<CustomButtonDesktop backgroundColor='#00ff00' />)).toMatchSnapshot();
+            expect(render(<CustomButtonMobile backgroundColor='#00ff00' />)).toMatchSnapshot();
         });
 
         it('should render black color content', () => {
             expect(render(<CustomButton contentColor='black' />)).toMatchSnapshot();
+            expect(render(<CustomButtonDesktop contentColor='black' />)).toMatchSnapshot();
+            expect(render(<CustomButtonMobile contentColor='black' />)).toMatchSnapshot();
         });
 
         it('should render CustomButton view=primary by default', () => {
             expect(render(<CustomButton />)).toMatchSnapshot();
+            expect(render(<CustomButtonDesktop />)).toMatchSnapshot();
+            expect(render(<CustomButtonMobile />)).toMatchSnapshot();
         });
         it('should render loader if loading pass', () => {
             expect(render(<CustomButton loading={true} />)).toMatchSnapshot();
+            expect(render(<CustomButtonDesktop loading={true} />)).toMatchSnapshot();
+            expect(render(<CustomButtonMobile loading={true} />)).toMatchSnapshot();
         });
     });
 
@@ -91,22 +103,22 @@ describe('CustomButton', () => {
         });
 
         describe('disableType test', () => {
-            it('should have `disableType_default` class', () => {
+            it('should have `disableType-default` class', () => {
                 const { container } = render(<CustomButton disableType='default' />);
                 expect(container.firstElementChild).toHaveClass('disableType-default');
             });
 
-            it('should have `disableType_static` class', () => {
+            it('should have `disableType-static` class', () => {
                 const { container } = render(<CustomButton disableType='static' />);
                 expect(container.firstElementChild).toHaveClass('disableType-static');
             });
 
-            it('should have `disableType_inverted` class', () => {
+            it('should have `disableType-inverted` class', () => {
                 const { container } = render(<CustomButton disableType='inverted' />);
                 expect(container.firstElementChild).toHaveClass('disableType-inverted');
             });
 
-            it('should have `disableType_static-inverted` class', () => {
+            it('should have `disableType-static-inverted` class', () => {
                 const { container } = render(<CustomButton disableType='static-inverted' />);
                 expect(container.firstElementChild).toHaveClass('disableType-static-inverted');
             });

diff --git a/packages/custom-button/src/Component.tsx b/packages/custom-button/src/Component.tsx
@@ -1,91 +1,16 @@
-import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
-import cn from 'classnames';
+import React, { forwardRef } from 'react';
 
-import { Button, ButtonProps } from '@alfalab/core-components-button';
+import { Button } from '@alfalab/core-components-button';
 
-import styles from './index.module.css';
+import { BaseCustomButton } from './components/base-custom-button';
+import { CustomButtonProps } from './types/props';
 
-const DEFAULT_BUTTON_COLOR = '#FF45C3';
-const DEFAULT_CONTENT_COLOR = 'white';
-
-export type ComponentProps = Omit<ButtonProps, 'view' | 'colors'> & {
-    /**
-     * Цвет кнопки
-     */
-    backgroundColor?: string;
-
-    /**
-     * Цвет контента
-     */
-    contentColor?: 'black' | 'white' | 'static-black' | 'static-white';
-
-    /**
-     * Затемнение или осветление кнопки при hover и active
-     */
-    stateType?: 'darkening' | 'lightening' | 'static-darkening' | 'static-lightening';
-
-    /**
-     * Блокировка кнопки
-     */
-    disabled?: boolean;
-
-    /**
-     * Тип цвета для заблокированного состояния
-     * @default default
-     */
-    disableType?: 'default' | 'static' | 'inverted' | 'static-inverted';
-};
-
-type AnchorButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
-type NativeButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
-
-export type CustomButtonProps = Partial<AnchorButtonProps | NativeButtonProps>;
-
-export const CustomButton = React.forwardRef<
-    HTMLAnchorElement | HTMLButtonElement,
-    CustomButtonProps
->(
-    (
-        {
-            children,
-            className,
-            loading,
-            backgroundColor = DEFAULT_BUTTON_COLOR,
-            contentColor = DEFAULT_CONTENT_COLOR,
-            stateType = 'darkening',
-            disableType = 'default',
-            ...restProps
-        },
-        ref,
-    ) => {
-        const buttonProps = {
-            style: {
-                ...(!restProps.disabled && { background: backgroundColor }),
-            },
-            ...restProps,
-        };
-
-        const buttonClassName = cn(
-            styles.customButton,
-            styles.border,
-            className,
-            styles[contentColor],
-            styles[stateType],
-            styles[`disableType-${disableType}`],
-        );
-
-        return (
-            <Button
-                {...buttonProps}
-                view='primary'
-                ref={ref}
-                className={buttonClassName}
-                loading={loading}
-            >
-                {children}
-            </Button>
-        );
-    },
+export const CustomButton = forwardRef<HTMLAnchorElement | HTMLButtonElement, CustomButtonProps>(
+    ({ children, ...restProps }, ref) => (
+        <BaseCustomButton ref={ref} {...restProps} componentButton={Button}>
+            {children}
+        </BaseCustomButton>
+    ),
 );
 
 CustomButton.displayName = 'CustomButton';