feat(tag): added mobile and responsive versions component

.changeset/moody-phones-heal.md

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

.changeset/sharp-camels-flash.md

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

packages/checkbox-group/src/Component.test.tsx

@@ -28,6 +28,20 @@ const TagGroup = ({ ...restProps }: Partial<CheckboxGroupProps>) => (
 );
 
 describe('Checkbox', () => {
+    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('Display tests', () => {
         it('should display with children like boolean or string or others react children type correctly', () => {
             expect(

packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap

@@ -565,7 +565,7 @@ Object {
             class="checkbox tagLabel"
           >
             <button
-              class="component component s outlined rounded my-tag"
+              class="component component component s s outlined rounded outlined my-tag"
               type="button"
             >
               <span>
@@ -583,7 +583,7 @@ Object {
             class="checkbox tagLabel"
           >
             <button
-              class="component component s outlined rounded"
+              class="component component component s s outlined rounded outlined"
               type="button"
             >
               <span>
@@ -601,7 +601,7 @@ Object {
             class="checkbox tagLabel"
           >
             <button
-              class="component component s outlined rounded"
+              class="component component component s s outlined rounded outlined"
               type="button"
             >
               <span>
@@ -635,7 +635,7 @@ Object {
           class="checkbox tagLabel"
         >
           <button
-            class="component component s outlined rounded my-tag"
+            class="component component component s s outlined rounded outlined my-tag"
             type="button"
           >
             <span>
@@ -653,7 +653,7 @@ Object {
           class="checkbox tagLabel"
         >
           <button
-            class="component component s outlined rounded"
+            class="component component component s s outlined rounded outlined"
             type="button"
           >
             <span>
@@ -671,7 +671,7 @@ Object {
           class="checkbox tagLabel"
         >
           <button
-            class="component component s outlined rounded"
+            class="component component component s s outlined rounded outlined"
             type="button"
           >
             <span>

packages/filter-tag/package.json

@@ -6,6 +6,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/*"
+    },
     "scripts": {
         "postinstall": "node -e \"if (require('fs').existsSync('./send-stats.js')){require('./send-stats.js')} \""
     },
@@ -18,6 +38,7 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
+        "@alfalab/core-components-mq": "^4.1.4",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.108.0",
         "classnames": "^2.3.1",

packages/filter-tag/src/Component.desktop.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+
+import { BaseFilterTag, BaseFilterTagProps } from './components/base-filter-tag';
+
+import styles from './desktop.module.css';
+
+export type FilterTagDesktopProps = Omit<BaseFilterTagProps, 'styles'>;
+
+export const FilterTagDesktop = forwardRef<HTMLDivElement, FilterTagDesktopProps>((restProps, ref) => (
+    <BaseFilterTag {...restProps} ref={ref} styles={styles} />
+));

packages/filter-tag/src/Component.mobile.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+
+import { BaseFilterTag, BaseFilterTagProps } from './components/base-filter-tag';
+
+import styles from './mobile.module.css';
+
+export type FilterTagMobileProps = Omit<BaseFilterTagProps, 'styles'>;
+
+export const FilterTagMobile = forwardRef<HTMLDivElement, FilterTagMobileProps>((restProps, ref) => (
+    <BaseFilterTag {...restProps} ref={ref} styles={styles} />
+));

packages/filter-tag/src/Component.responsive.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react';
+
+import { useMatchMedia } from '@alfalab/core-components-mq';
+
+import { BaseFilterTagProps } from './components/base-filter-tag';
+import { FilterTagDesktop } from './Component.desktop';
+import { FilterTagMobile } from './Component.mobile';
+
+export type FilterTagProps = Omit<BaseFilterTagProps, 'styles'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+
+export const FilterTag = forwardRef<HTMLDivElement, FilterTagProps>(
+    ({ children, breakpoint = 1024, ...restProps }, ref) => {
+        const query = `(min-width: ${breakpoint}px)`;
+
+        const [isDesktop] = useMatchMedia(query);
+
+        const Component = isDesktop ? FilterTagDesktop : FilterTagMobile;
+
+        return (
+            <Component ref={ref} {...restProps}>
+                {children}
+            </Component>
+        );
+    },
+);

packages/filter-tag/src/Component.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 
-import { FilterTag } from './index';
+import { FilterTagDesktop as FilterTag} from './desktop';
 
 describe('Snapshots tests', () => {
     it('should match snapshot', () => {

packages/filter-tag/src/__snapshots__/Component.test.tsx.snap

@@ -6,10 +6,10 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="component rounded s"
+        class="component rounded s component rounded s"
       >
         <button
-          class="valueButton s rounded outlined"
+          class="valueButton valueButton s s rounded rounded outlined outlined"
           type="button"
         >
           <span>
@@ -37,10 +37,10 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="component rounded s"
+      class="component rounded s component rounded s"
     >
       <button
-        class="valueButton s rounded outlined"
+        class="valueButton valueButton s s rounded rounded outlined outlined"
         type="button"
       >
         <span>
@@ -125,10 +125,10 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="component rectangular s"
+        class="component rectangular s component rectangular s"
       >
         <button
-          class="valueButton s rectangular outlined"
+          class="valueButton valueButton s s rectangular rectangular outlined outlined"
           type="button"
         >
           <span>
@@ -156,10 +156,10 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="component rectangular s"
+      class="component rectangular s component rectangular s"
     >
       <button
-        class="valueButton s rectangular outlined"
+        class="valueButton valueButton s s rectangular rectangular outlined outlined"
         type="button"
       >
         <span>
@@ -244,10 +244,10 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="component rectangular s"
+        class="component rectangular s component rectangular s"
       >
         <button
-          class="valueButton s rectangular outlined"
+          class="valueButton valueButton s s rectangular rectangular outlined outlined"
           type="button"
         >
           <span>
@@ -275,10 +275,10 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="component rectangular s"
+      class="component rectangular s component rectangular s"
     >
       <button
-        class="valueButton s rectangular outlined"
+        class="valueButton valueButton s s rectangular rectangular outlined outlined"
         type="button"
       >
         <span>
@@ -363,10 +363,10 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="component rounded s"
+        class="component rounded s component rounded s"
       >
         <button
-          class="valueButton s rounded outlined"
+          class="valueButton valueButton s s rounded rounded outlined outlined"
           type="button"
         >
           <span />
@@ -392,10 +392,10 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="component rounded s"
+      class="component rounded s component rounded s"
     >
       <button
-        class="valueButton s rounded outlined"
+        class="valueButton valueButton s s rounded rounded outlined outlined"
         type="button"
       >
         <span />

packages/filter-tag/src/component.screenshots.test.tsx

@@ -28,7 +28,10 @@ describe('FilterTag', () => {
                 checked: true,
             },
         },
-        'transform:scale(2.2)',
+        'width:800px;transform:scale(2.2)',
+        {
+            viewport: { width: 1024, height: 600 },
+        },
     );
 });
 
@@ -82,7 +85,7 @@ describe('FilterTag | main props', () => {
             screenshotOpts: {
                 fullPage: true,
             },
-            viewport: { width: 740, height: 100 },
+            viewport: { width: 1024, height: 100 },
             theme,
         })();