feat(button): added mobile and responsive versions component

packages/button/package.json

@@ -18,6 +18,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.5",
         "@alfalab/hooks": "^1.4.1",
         "classnames": "^2.3.1",

packages/button/src/Component.desktop.tsx

@@ -0,0 +1,22 @@
+// TODO Вид кнопок зависит от порядка импорта стилей. Исправить!!!.
+/* eslint-disable simple-import-sort/imports */
+import React, { forwardRef } from 'react';
+
+import { BaseButton } from './components/base-button';
+import { ButtonDesktopProps } from './typings';
+
+import styles from './desktop.module.css';
+
+import defaultColors from './default.desktop.module.css';
+import invertedColors from './inverted.desktop.module.css';
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
+
+export const ButtonDesktop = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonDesktopProps>(
+    (restProps, ref) => (
+        <BaseButton {...restProps} ref={ref} colorStyles={colorStyles} styles={styles} />
+    ),
+);

packages/button/src/Component.mobile.tsx

@@ -0,0 +1,22 @@
+// TODO Вид кнопок зависит от порядка импорта стилей. Исправить!!!.
+/* eslint-disable simple-import-sort/imports */
+import React, { forwardRef } from 'react';
+
+import { BaseButton } from './components/base-button';
+import { ButtonMobileProps } from './typings';
+
+import styles from './mobile.module.css';
+
+import defaultColors from './default.mobile.module.css';
+import invertedColors from './inverted.mobile.module.css';
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
+
+export const ButtonMobile = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonMobileProps>(
+    (restProps, ref) => (
+        <BaseButton {...restProps} ref={ref} colorStyles={colorStyles} styles={styles} />
+    ),
+);

packages/button/src/Component.responsive.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react';
+
+import { useMatchMedia } from '@alfalab/core-components-mq';
+
+import { isClient } from '../../utils';
+
+import { ButtonDesktop } from './Component.desktop';
+import { ButtonMobile } from './Component.mobile';
+import { ButtonResponsiveProps } from './typings';
+
+export const ButtonResponsive = forwardRef<
+    HTMLAnchorElement | HTMLButtonElement,
+    ButtonResponsiveProps
+>(({ children, breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
+    const query = `(min-width: ${breakpoint}px)`;
+
+    const getDefaultValue = () => (isClient() ? window.matchMedia(query).matches : false);
+
+    const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue ?? getDefaultValue);
+
+    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 { Button, ButtonProps } from './index';
 
 const dataTestId = 'test-id';
 

packages/button/src/Component.tsx → packages/button/src/components/base-button/Component.tsx

@@ -1,10 +1,6 @@
-// TODO Вид кнопок зависит от порядка импорта стилей. Исправить!!!.
-/* eslint-disable simple-import-sort/imports */
 import React, {
     AnchorHTMLAttributes,
     ButtonHTMLAttributes,
-    ElementType,
-    ReactNode,
     useEffect,
     useRef,
     useState,
@@ -15,95 +11,7 @@ import cn from 'classnames';
 import { Spinner } from '@alfalab/core-components-spinner';
 import { useFocus } from '@alfalab/hooks';
 
-import styles from './index.module.css';
-import defaultColors from './default.module.css';
-import invertedColors from './inverted.module.css';
-
-const colorStyles = {
-    default: defaultColors,
-    inverted: invertedColors,
-};
-
-export type ComponentProps = {
-    /**
-     * Тип кнопки
-     */
-    view?:
-        | 'accent'
-        | 'primary'
-        | 'secondary'
-        | 'tertiary'
-        | 'outlined' // deprecated
-        | 'filled' // deprecated
-        | 'transparent' // deprecated
-        | 'link'
-        | 'ghost';
-
-    /**
-     * Слот слева
-     */
-    leftAddons?: ReactNode;
-
-    /**
-     * Слот справа
-     */
-    rightAddons?: ReactNode;
-
-    /**
-     * Размер компонента
-     */
-    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
-
-    /**
-     * Растягивает компонент на ширину контейнера
-     */
-    block?: boolean;
-
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-
-    /**
-     * Выводит ссылку в виде кнопки
-     */
-    href?: string;
-
-    /**
-     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
-     */
-    Component?: ElementType;
-
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-
-    /**
-     * Показать лоадер
-     */
-    loading?: boolean;
-
-    /**
-     * Не переносить текст кнопки на новую строку
-     */
-    nowrap?: boolean;
-
-    /**
-     * Набор цветов для компонента
-     */
-    colors?: 'default' | 'inverted';
-
-    /**
-     * Дочерние элементы.
-     */
-    children?: ReactNode;
-};
-
-export type AnchorButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
-export type NativeButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
-
-export type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps>;
+import { BaseButtonProps, ComponentProps } from '../../typings';
 
 /**
  * Минимальное время отображения лоадера - 500мс,
@@ -131,7 +39,7 @@ const logWarning = (view: Required<ComponentProps>['view']) => {
     );
 };
 
-export const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>(
+export const BaseButton = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, BaseButtonProps>(
     (
         {
             children,
@@ -148,6 +56,11 @@ export const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, Bu
             colors = 'default',
             Component = href ? 'a' : 'button',
             onClick,
+            styles = {},
+            colorStyles = {
+                default: {},
+                inverted: {},
+            },
             ...restProps
         },
         ref,
@@ -285,14 +198,3 @@ export const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, Bu
         );
     },
 );
-
-/**
- * Для отображения в сторибуке
- */
-Button.defaultProps = {
-    view: 'secondary',
-    size: 'm',
-    block: false,
-    loading: false,
-    nowrap: false,
-};

packages/button/src/components/base-button/index.ts

@@ -0,0 +1 @@
+export * from './Component';

packages/button/src/default.module.css → packages/button/src/default.desktop.module.css

@@ -1,70 +1,4 @@
-@import '../../themes/src/default.css';
-
-:root {
-    /* primary */
-    --button-primary-base-bg-color: var(--color-light-bg-secondary-inverted);
-    --button-primary-hover-bg-color: var(--color-light-bg-secondary-inverted-tint-15);
-    --button-primary-active-bg-color: var(--color-light-bg-secondary-inverted-tint-20);
-    --button-primary-disabled-bg-color: var(--color-light-specialbg-secondary-transparent);
-    --button-primary-color: var(--color-light-text-primary-inverted);
-    --button-primary-disabled-color: var(--color-light-text-tertiary);
-
-    /* accent */
-    --button-accent-base-bg-color: var(--color-light-bg-accent);
-    --button-accent-hover-bg-color: var(--color-light-bg-accent-shade-7);
-    --button-accent-active-bg-color: var(--color-light-bg-accent-shade-15);
-    --button-accent-disabled-bg-color: var(--color-light-specialbg-secondary-transparent);
-    --button-accent-color: var(--color-static-text-primary-light);
-    --button-accent-disabled-color: var(--color-light-text-tertiary);
-
-    /* secondary */
-    --button-secondary-base-bg-color: var(--color-light-specialbg-tertiary-transparent);
-    --button-secondary-hover-bg-color: var(--color-light-specialbg-tertiary-transparent-shade-7);
-    --button-secondary-active-bg-color: var(--color-light-specialbg-tertiary-transparent-shade-15);
-    --button-secondary-disabled-bg-color: var(--color-light-specialbg-secondary-transparent);
-    --button-secondary-base-border-color: transparent;
-    --button-secondary-disabled-border-color: transparent;
-    --button-secondary-color: var(--color-light-text-primary);
-    --button-secondary-disabled-color: var(--color-light-text-tertiary);
-
-    /* tertiary */
-    --button-tertiary-base-bg-color: transparent;
-    --button-tertiary-hover-bg-color: var(--color-light-bg-primary-inverted-alpha-7);
-    --button-tertiary-active-bg-color: var(--color-light-bg-primary-inverted-alpha-15);
-    --button-tertiary-hover-border-color: var(--color-light-border-tertiary-inverted);
-    --button-tertiary-disabled-bg-color: transparent;
-    --button-tertiary-base-border-color: var(--color-light-border-underline-inverted);
-    --button-tertiary-disabled-border-color: var(--color-light-graphic-tertiary);
-    --button-tertiary-color: var(--color-light-text-primary);
-    --button-tertiary-disabled-color: var(--color-light-text-tertiary);
-
-    /* outlined */
-    --button-outlined-base-bg-color: transparent;
-    --button-outlined-hover-bg-color: rgba(0, 0, 0, 0.07);
-    --button-outlined-active-bg-color: rgba(0, 0, 0, 0.15);
-    --button-outlined-disabled-bg-color: transparent;
-    --button-outlined-base-border-color: var(--color-light-border-underline-inverted);
-    --button-outlined-disabled-border-color: var(--color-light-border-underline-inverted-alpha-30);
-    --button-outlined-color: var(--color-light-text-primary);
-    --button-outlined-disabled-color: var(--color-light-text-primary-alpha-30);
-
-    /* ghost */
-    --button-ghost-base-color: var(--color-light-text-primary);
-    --button-ghost-hover-color: var(--color-light-text-primary-tint-24);
-    --button-ghost-active-color: var(--color-light-text-primary-tint-40);
-    --button-ghost-disabled-color: var(--color-light-text-tertiary);
-
-    /* link */
-    --button-link-base-color: var(--color-light-text-primary);
-    --button-link-hover-bg-color: var(--color-light-bg-primary-inverted-alpha-7);
-    --button-link-active-bg-color: var(--color-light-bg-primary-inverted-alpha-15);
-    --button-link-disabled-color: var(--color-light-text-tertiary);
-
-    /* loader */
-    --button-spinner-static-color: var(--color-static-graphic-light);
-    --button-spinner-primary-color: var(--color-light-graphic-primary-inverted);
-    --button-spinner-default-color: var(--color-light-graphic-primary);
-}
+@import './vars.css';
 
 .accent {
     color: var(--button-accent-color);