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

.changeset/tall-mugs-clap.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-custom-button': minor
+---
+
+Добавлена возможность импортировать desktop / mobile по отдельности

packages/custom-button/package.json

@@ -10,6 +10,7 @@
         "access": "public",
         "directory": "dist"
     },
+    "sideEffects": false,
     "peerDependencies": {
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },

packages/custom-button/src/Component.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { CustomButton } from './index';
+import { CustomButton, CustomButtonDesktop, CustomButtonMobile } from './index';
 
 const dataTestId = 'test-id';
 
@@ -23,21 +23,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 +101,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');
             });

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';