From cefed5b04b806a1886d7e7263682ad25c34dce13 Mon Sep 17 00:00:00 2001 From: fulcanellee <45999900+fulcanellee@users.noreply.github.com> Date: Thu, 26 Dec 2024 18:16:26 +0700 Subject: [PATCH] feat(custom-button): split custom button by desktop / mobile (#1472) * feat(custom-button): slit custom button by desktop / mobile --- .changeset/tall-mugs-clap.md | 5 + packages/custom-button/src/Component.test.tsx | 22 +- packages/custom-button/src/Component.tsx | 95 +- .../src/__snapshots__/Component.test.tsx.snap | 1224 ++++++++++++++++- .../base-custom-button/base-custom-button.tsx | 56 + .../base-custom-button}/index.module.css | 2 +- .../components/base-custom-button/index.ts | 1 + .../src/constants/default-colors.ts | 2 + .../src/desktop/Component.desktop.tsx | 17 + packages/custom-button/src/desktop/index.ts | 1 + .../src/docs/Component.stories.tsx | 52 +- .../custom-button/src/docs/development.mdx | 2 +- packages/custom-button/src/index.ts | 3 +- .../src/mobile/Component.mobile.tsx | 17 + packages/custom-button/src/mobile/index.ts | 1 + packages/custom-button/src/types/props.ts | 36 + 16 files changed, 1377 insertions(+), 159 deletions(-) create mode 100644 .changeset/tall-mugs-clap.md create mode 100644 packages/custom-button/src/components/base-custom-button/base-custom-button.tsx rename packages/custom-button/src/{ => components/base-custom-button}/index.module.css (98%) create mode 100644 packages/custom-button/src/components/base-custom-button/index.ts create mode 100644 packages/custom-button/src/constants/default-colors.ts create mode 100644 packages/custom-button/src/desktop/Component.desktop.tsx create mode 100644 packages/custom-button/src/desktop/index.ts create mode 100644 packages/custom-button/src/mobile/Component.mobile.tsx create mode 100644 packages/custom-button/src/mobile/index.ts create mode 100644 packages/custom-button/src/types/props.ts diff --git a/.changeset/tall-mugs-clap.md b/.changeset/tall-mugs-clap.md new file mode 100644 index 0000000000..450c5786cc --- /dev/null +++ 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 index dd1f5de89e..710c52e632 100644 --- 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()).toMatchSnapshot(); + expect(render()).toMatchSnapshot(); + expect(render()).toMatchSnapshot(); }); it('should render custom background color', () => { expect(render()).toMatchSnapshot(); + expect(render()).toMatchSnapshot(); + expect(render()).toMatchSnapshot(); }); it('should render black color content', () => { expect(render()).toMatchSnapshot(); + expect(render()).toMatchSnapshot(); + expect(render()).toMatchSnapshot(); }); it('should render CustomButton view=primary by default', () => { expect(render()).toMatchSnapshot(); + expect(render()).toMatchSnapshot(); + expect(render()).toMatchSnapshot(); }); it('should render loader if loading pass', () => { expect(render()).toMatchSnapshot(); + expect(render()).toMatchSnapshot(); + expect(render()).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(); expect(container.firstElementChild).toHaveClass('disableType-default'); }); - it('should have `disableType_static` class', () => { + it('should have `disableType-static` class', () => { const { container } = render(); expect(container.firstElementChild).toHaveClass('disableType-static'); }); - it('should have `disableType_inverted` class', () => { + it('should have `disableType-inverted` class', () => { const { container } = render(); expect(container.firstElementChild).toHaveClass('disableType-inverted'); }); - it('should have `disableType_static-inverted` class', () => { + it('should have `disableType-static-inverted` class', () => { const { container } = render(); expect(container.firstElementChild).toHaveClass('disableType-static-inverted'); }); diff --git a/packages/custom-button/src/Component.tsx b/packages/custom-button/src/Component.tsx index 809d280f97..952f4ef5d8 100644 --- 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 & { - /** - * Цвет кнопки - */ - 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; -type NativeButtonProps = ComponentProps & ButtonHTMLAttributes; - -export type CustomButtonProps = Partial; - -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 ( - - ); - }, +export const CustomButton = forwardRef( + ({ children, ...restProps }, ref) => ( + + {children} + + ), ); CustomButton.displayName = 'CustomButton'; diff --git a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap index 99c2c3b76f..419234fd6a 100644 --- a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap +++ b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap @@ -73,6 +73,173 @@ Object { } `; +exports[`CustomButton Snapshots tests should match snapshot 2`] = ` +Object { + "asFragment": [Function], + "baseElement": +
+
+
+
+ , + "container":
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`CustomButton Snapshots tests should match snapshot 3`] = ` +Object { + "asFragment": [Function], + "baseElement": +
+
+
+
+
+
+ , + "container":
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + exports[`CustomButton Snapshots tests should render CustomButton view=primary by default 1`] = ` Object { "asFragment": [Function], @@ -146,13 +313,20 @@ Object { } `; -exports[`CustomButton Snapshots tests should render black color content 1`] = ` +exports[`CustomButton Snapshots tests should render CustomButton view=primary by default 2`] = ` Object { "asFragment": [Function], "baseElement":
+
+
+
+
+
+
@@ -234,7 +422,7 @@ Object { "container":
, @@ -292,77 +480,748 @@ Object { } `; -exports[`CustomButton Snapshots tests should render loader if loading pass 1`] = ` +exports[`CustomButton Snapshots tests should render black color content 1`] = ` Object { "asFragment": [Function], "baseElement":