feat(button): added mobile and responsive versions component

.changeset/chilly-turtles-design.md

@@ -0,0 +1,10 @@
+---
+"@alfalab/core-components-calendar": minor
+"@alfalab/core-components-input-autocomplete": minor
+"@alfalab/core-components-pass-code": minor
+"@alfalab/core-components-pattern-lock": minor
+"@alfalab/core-components-select": minor
+"@alfalab/core-components-tooltip": minor
+---
+
+Компонент Button заменен на mobile/desktop версии для мобильных и десктопных версий компонентов

.changeset/tame-apes-refuse.md

@@ -0,0 +1,5 @@
+---
+"@alfalab/core-components-button": major
+---
+
+Для компонента Button добавлены мобильная и адаптивная версии компонента. Responsive компонент теперь экспортируется из индексного файла

packages/alert/tsconfig.json

@@ -6,7 +6,8 @@
         "rootDirs": ["src"],
         "baseUrl": ".",
         "paths": {
-            "@alfalab/core-components-*": ["../*/src"]
+            "@alfalab/core-components-*": ["../*/src"],
+            "@alfalab/core-components-button/*": ["../button/src/*"]
         }
     },
     "references": [{ "path": "../plate" }]

packages/amount-input/tsconfig.json

@@ -6,7 +6,8 @@
         "rootDirs": ["src"],
         "baseUrl": ".",
         "paths": {
-            "@alfalab/core-components-*": ["../*/src"]
+            "@alfalab/core-components-*": ["../*/src"],
+            "@alfalab/core-components-button/*": ["../button/src/*"]
         }
     },
     "references": [{ "path": "../input" }, { "path": "../with-suffix" }]

packages/attach/src/Component.test.tsx

@@ -5,6 +5,20 @@ import userEvent from '@testing-library/user-event';
 import { Attach } from './index';
 
 describe('Attach', () => {
+    Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: jest.fn().mockImplementation((query) => ({
+            matches: true,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(), // Deprecated
+            removeListener: jest.fn(), // Deprecated
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        })),
+    });
+
     describe('Snapshots tests', () => {
         it('should match snapshot', () => {
             const { container } = render(<Attach />);

packages/attach/src/__snapshots__/Component.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Attach Snapshots tests should match snapshot 1`] = `
     class="component s"
   >
     <button
-      class="component secondary s component secondary withLeftAddons"
+      class="component secondary s s component secondary component secondary withLeftAddons"
       type="button"
     >
       <span

packages/attach/src/component.screenshots.test.tsx

@@ -25,7 +25,10 @@ describe('Attach', () =>
                 noFileText: ' ',
             },
         },
-        'paddingLeft:3px;transform: scale(2.1)',
+        'width:800px;paddingLeft:3px;transform: scale(2.1)',
+        {
+            viewport: { width: 1024, height: 600 },
+        },
     ));
 
 describe(

packages/attach/tsconfig.json

@@ -6,6 +6,7 @@
         "rootDirs": ["src"],
         "baseUrl": ".",
         "paths": {
+            "@alfalab/core-components-button/*": ["../button/src/*"],
             "@alfalab/core-components-*": ["../*/src"]
         }
     },

packages/bank-card/tsconfig.json

@@ -6,8 +6,13 @@
         "rootDirs": ["src"],
         "baseUrl": ".",
         "paths": {
-            "@alfalab/core-components-*": ["../*/src"]
+            "@alfalab/core-components-*": ["../*/src"],
+            "@alfalab/core-components-button/*": ["../button/src/*"]
         }
     },
-    "references": [{ "path": "../form-control" }, { "path": "../input" }, { "path": "../masked-input" }]
+    "references": [
+        { "path": "../form-control" },
+        { "path": "../input" },
+        { "path": "../masked-input" }
+    ]
 }

packages/bottom-sheet/src/docs/description.mdx

@@ -82,9 +82,9 @@ render(() => {
 
     return (
         <Container>
-            <Button type='button' size='s' onClick={handleOpen} block={true}>
+            <ButtonMobile type='button' size='s' onClick={handleOpen} block={true}>
                 Показать анатомию
-            </Button>
+            </ButtonMobile>
             <BottomSheet
                 trimTitle={false}
                 open={open}
@@ -228,9 +228,9 @@ render(() => {
 
     return (
         <Container>
-            <Button size='s' onClick={handleOpen} block={true}>
+            <ButtonMobile size='s' onClick={handleOpen} block={true}>
                 Показать шторку
-            </Button>
+            </ButtonMobile>
 
             <Gap size='2xl' />
 
@@ -371,14 +371,14 @@ render(() => {
                             }}
                         >
                             {footerSettings.hasSecondaryButton && (
-                                <Button
+                                <ButtonMobile
                                     view='secondary'
-                                    size='s'
+                                    size='m'
                                     onClick={handleClose}
                                     block={true}
                                 >
                                     Secondary
-                                </Button>
+                                </ButtonMobile>
                             )}
 
                             {footerSettings.hasPrimaryButton &&
@@ -387,9 +387,9 @@ render(() => {
                             ) : null}
 
                             {footerSettings.hasPrimaryButton && (
-                                <Button view='primary' size='s' onClick={handleClose} block={true}>
+                                <ButtonMobile view='primary' size='m' onClick={handleClose} block={true}>
                                     Primary
-                                </Button>
+                                </ButtonMobile>
                             )}
                         </div>
                     ) : undefined
@@ -464,9 +464,9 @@ render(() => {
 
     return (
         <Container>
-            <Button size='s' onClick={handleOpen} block={true}>
+            <ButtonMobile size='s' onClick={handleOpen} block={true}>
                 Показать шторку
-            </Button>
+            </ButtonMobile>
 
             <BottomSheet
                 open={open}
@@ -479,15 +479,15 @@ render(() => {
                 title={item.title}
                 onBack={() => setStep(step - 1)}
                 actionButton={
-                    <Button
-                        size='xs'
+                    <ButtonMobile
+                        size='m'
                         view='primary'
                         onClick={
                             item.btnText === DATA[1].btnText ? () => setStep(step + 1) : handleClose
                         }
                     >
                         {item.btnText}
-                    </Button>
+                    </ButtonMobile>
                 }
             >
                 <div style={{ ...commonStyles, height: '100%' }}>
@@ -593,14 +593,14 @@ render(() => {
                     : 'var(--color-light-bg-primary)',
             }}
         >
-            <Button
+            <ButtonMobile
                 view={isNotLastAreaWithExtTrigger ? 'accent' : 'secondary'}
                 size='s'
                 onClick={openWithExternalTrigger ? magnetizeToLastArea : handleOpen}
                 block={true}
             >
                 {isExternalTrigger ? 'Открыть полностью' : 'Показать шторку'}
-            </Button>
+            </ButtonMobile>
 
             <Gap size='2xl' />
 

packages/bottom-sheet/tsconfig.json

@@ -6,7 +6,8 @@
         "rootDirs": ["src"],
         "baseUrl": ".",
         "paths": {
-            "@alfalab/core-components-*": ["../*/src"]
+            "@alfalab/core-components-*": ["../*/src"],
+            "@alfalab/core-components-button/*": ["../button/src/*"]
         }
     },
     "references": [

packages/button/package.json

@@ -7,6 +7,26 @@
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
+    "exports": {
+        ".": {
+            "import": "./esm/index.js",
+            "require": "./index.js"
+        },
+        "./mobile": {
+            "import": "./esm/mobile.js",
+            "require": "./mobile.js"
+        },
+        "./desktop": {
+            "import": "./esm/desktop.js",
+            "require": "./desktop.js"
+        },
+        "./esm": "./esm/index.js",
+        "./cssm": "./cssm/index.js",
+        "./modern": "./modern/index.js",
+        "./esm/*": "./esm/*",
+        "./cssm/*": "./cssm/*",
+        "./modern/*": "./modern/*"
+    },
     "publishConfig": {
         "access": "public",
         "directory": "dist"
@@ -15,6 +35,7 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
+        "@alfalab/core-components-mq": "^4.1.4",
         "@alfalab/core-components-spinner": "^3.0.7",
         "@alfalab/core-components-shared": "^0.0.0",
         "@alfalab/hooks": "^1.13.0",

packages/button/src/Component.desktop.tsx

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react';
+
+import { BaseButton } from './components/base-button';
+import { AnchorButtonProps, NativeButtonProps } from './typings';
+
+import defaultColors from './default.desktop.module.css';
+import styles from './desktop.module.css';
+import invertedColors from './inverted.desktop.module.css';
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
+
+export type ButtonDesktopProps = Partial<AnchorButtonProps | NativeButtonProps>;
+
+export const ButtonDesktop = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonDesktopProps>(
+    (restProps, ref) => (
+        <BaseButton {...restProps} ref={ref} styles={styles} colorStylesMap={colorStyles} />
+    ),
+);

packages/button/src/Component.mobile.tsx

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react';
+
+import { BaseButton } from './components/base-button';
+import { AnchorButtonProps, NativeButtonProps } from './typings';
+
+import defaultColors from './default.mobile.module.css';
+import invertedColors from './inverted.mobile.module.css';
+import styles from './mobile.module.css';
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
+
+export type ButtonMobileProps = Partial<AnchorButtonProps | NativeButtonProps>;
+
+export const ButtonMobile = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonMobileProps>(
+    (restProps, ref) => (
+        <BaseButton {...restProps} ref={ref} colorStylesMap={colorStyles} styles={styles} />
+    ),
+);

packages/button/src/Component.responsive.tsx

@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react';
+
+import { useMatchMedia } from '@alfalab/core-components-mq';
+
+import { ButtonDesktop } from './Component.desktop';
+import { ButtonMobile } from './Component.mobile';
+import { ButtonProps } from './typings';
+
+export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>(
+    ({ children, breakpoint = 1024, ...restProps }, ref) => {
+        const query = `(min-width: ${breakpoint}px)`;
+
+        const [isDesktop] = useMatchMedia(query);
+
+        const Component = isDesktop ? ButtonDesktop : ButtonMobile;
+
+        return (
+            <Component ref={ref} {...restProps}>
+                {children}
+            </Component>
+        );
+    },
+);

packages/button/src/Component.test.tsx

@@ -7,7 +7,8 @@ import {
     waitForElementToBeRemoved,
 } from '@testing-library/react';
 
-import { Button, ButtonProps, LOADER_MIN_DISPLAY_INTERVAL } from './index';
+import { LOADER_MIN_DISPLAY_INTERVAL } from './components/base-button';
+import { ButtonDesktop as Button, ButtonDesktopProps as ButtonProps } from './desktop';
 
 const dataTestId = 'test-id';