feat(input): added mobile and responsive versions component (#716)

core-ds · Aug 7, 2023 · 1e38517 · 1e38517
1 parent 06b4a0b
commit 1e38517
Show file tree

Hide file tree

Showing 170 changed files with 1,966 additions and 682 deletions.
diff --git a/.changeset/hungry-items-wave.md b/.changeset/hungry-items-wave.md
@@ -0,0 +1,6 @@
+---
+"@alfalab/core-components-select": minor
+"@alfalab/core-components-input-autocomplete": minor
+---
+
+Компонент FormControl заменен на mobile/desktop версии для мобильных и десктопных версий компонентов
diff --git a/.changeset/rotten-geese-dream.md b/.changeset/rotten-geese-dream.md
@@ -0,0 +1,6 @@
+---
+"@alfalab/core-components-date-time-input": minor
+"@alfalab/core-components-date-range-input": minor
+---
+
+Компонент Input заменен на mobile/desktop версии для мобильных и десктопных версий компонентов
diff --git a/.changeset/tricky-balloons-cry.md b/.changeset/tricky-balloons-cry.md
@@ -0,0 +1,5 @@
+---
+"@alfalab/core-components-form-control": major
+---
+
+Для компонента FormControl добавлены мобильная и адаптивная версии компонента. Responsive компонент теперь экспортируется из индексного файла
diff --git a/.changeset/unlucky-queens-battle.md b/.changeset/unlucky-queens-battle.md
@@ -0,0 +1,5 @@
+---
+"@alfalab/core-components-input": major
+---
+
+- Для компонента Input добавлены мобильная и адаптивная версии компонента. Responsive компонент теперь экспортируется из индексного файла
diff --git a/packages/amount-input/src/Component.test.tsx b/packages/amount-input/src/Component.test.tsx
@@ -11,6 +11,20 @@ import { AmountInput } from './index';
 import { AmountInputProps } from './Component';
 
 describe('AmountInput', () => {
+    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(),
+        })),
+    });
+
     function renderAmountInput(
         value: AmountInputProps['value'],
         currency: CurrencyCodes | null = 'RUR',

diff --git a/packages/amount-input/src/Component.tsx b/packages/amount-input/src/Component.tsx
@@ -108,6 +108,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
             clear = false,
             onChange,
             onClear,
+            breakpoint = 1024,
             ...restProps
         },
         ref,
@@ -255,6 +256,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
                     pattern={`[${positiveOnly ? '' : '-'}0-9\\s\\.,]*`}
                     dataTestId={dataTestId}
                     ref={ref}
+                    breakpoint={breakpoint}
                 />
             </div>
         );

diff --git a/packages/amount-input/src/__snapshots__/Component.test.tsx.snap b/packages/amount-input/src/__snapshots__/Component.test.tsx.snap
@@ -9,10 +9,10 @@ Object {
         class="container bold"
       >
         <div
-          class="component component component hasSuffix s"
+          class="component component component hasSuffix s s"
         >
           <div
-            class="inner inner"
+            class="inner inner inner inner"
           >
             <div
               class="inputWrapper"
@@ -21,7 +21,7 @@ Object {
                 class="input"
               >
                 <input
-                  class="input input input"
+                  class="input input input input"
                   inputmode="decimal"
                   pattern="[0-9\\\\s\\\\.,]*"
                   placeholder="0 ₽"
@@ -57,10 +57,10 @@ Object {
       class="container bold"
     >
       <div
-        class="component component component hasSuffix s"
+        class="component component component hasSuffix s s"
       >
         <div
-          class="inner inner"
+          class="inner inner inner inner"
         >
           <div
             class="inputWrapper"
@@ -69,7 +69,7 @@ Object {
               class="input"
             >
               <input
-                class="input input input"
+                class="input input input input"
                 inputmode="decimal"
                 pattern="[0-9\\\\s\\\\.,]*"
                 placeholder="0 ₽"
@@ -162,10 +162,10 @@ Object {
         class="container bold"
       >
         <div
-          class="component component component hasSuffix s"
+          class="component component component hasSuffix s s"
         >
           <div
-            class="inner inner"
+            class="inner inner inner inner"
           >
             <div
               class="inputWrapper"
@@ -174,7 +174,7 @@ Object {
                 class="input"
               >
                 <input
-                  class="input input input"
+                  class="input input input input"
                   inputmode="decimal"
                   pattern="[0-9\\\\s\\\\.,]*"
                   placeholder="0 ₽"
@@ -209,10 +209,10 @@ Object {
         class="container bold filled"
       >
         <div
-          class="component component component suffixVisible hasSuffix s"
+          class="component component component suffixVisible hasSuffix s s"
         >
           <div
-            class="inner inner filled"
+            class="inner inner inner inner filled"
           >
             <div
               class="inputWrapper"
@@ -221,7 +221,7 @@ Object {
                 class="input"
               >
                 <input
-                  class="input input input"
+                  class="input input input input"
                   inputmode="decimal"
                   pattern="[0-9\\\\s\\\\.,]*"
                   placeholder="0 $"
@@ -261,10 +261,10 @@ Object {
       class="container bold filled"
     >
       <div
-        class="component component component suffixVisible hasSuffix s"
+        class="component component component suffixVisible hasSuffix s s"
       >
         <div
-          class="inner inner filled"
+          class="inner inner inner inner filled"
         >
           <div
             class="inputWrapper"
@@ -273,7 +273,7 @@ Object {
               class="input"
             >
               <input
-                class="input input input"
+                class="input input input input"
                 inputmode="decimal"
                 pattern="[0-9\\\\s\\\\.,]*"
                 placeholder="0 $"

diff --git a/packages/amount-input/src/component.screenshots.test.tsx b/packages/amount-input/src/component.screenshots.test.tsx
@@ -23,7 +23,10 @@ describe('AmountInput ', () =>
                 block: true,
             },
         },
-        'padding: 0 270px; transform:scale(2.1)',
+        'width:800px;padding: 0 270px; transform:scale(2.1)',
+        {
+            viewport: { width: 1024, height: 600 },
+        },
     ));
 
 describe(

diff --git a/packages/amount-input/tsconfig.json b/packages/amount-input/tsconfig.json
@@ -7,6 +7,8 @@
         "baseUrl": ".",
         "paths": {
             "@alfalab/core-components-*": ["../*/src"],
+            "@alfalab/core-components-input/*": ["../input/src/*"],
+            "@alfalab/core-components-form-control/*": ["../form-control/src/*"],
             "@alfalab/core-components-button/*": ["../button/src/*"]
         }
     },

diff --git a/packages/bank-card/src/Component.test.tsx b/packages/bank-card/src/Component.test.tsx
@@ -5,6 +5,20 @@ import { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon';
 import { BankCard } from './index';
 
 describe('BankCard', () => {
+    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(),
+        })),
+    });
+
     const VISA_VALID_NUMBER = '4111111111111111';
     const MC_VALID_NUMBER = '5500000000000004';
     const MIR_VALID_NUMBER = '2201382000000013';

diff --git a/packages/bank-card/src/__snapshots__/Component.test.tsx.snap b/packages/bank-card/src/__snapshots__/Component.test.tsx.snap
@@ -31,10 +31,10 @@ exports[`BankCard Snapshots tests should match snapshots 1`] = `
           </svg>
         </div>
         <div
-          class="component component filled m block hasRightAddons"
+          class="component component filled m m block hasRightAddons"
         >
           <div
-            class="inner inner filled hasInnerLabel"
+            class="inner inner inner inner filled hasInnerLabel"
           >
             <div
               class="inputWrapper"
@@ -59,7 +59,7 @@ exports[`BankCard Snapshots tests should match snapshots 1`] = `
               >
                 <input
                   aria-label="Номер карты или счёта"
-                  class="input input m hasInnerLabel input"
+                  class="input input input m hasInnerLabel input"
                   inputmode="numeric"
                   pattern="[0-9]*"
                   type="text"
@@ -148,10 +148,10 @@ exports[`BankCard Snapshots tests should match snapshots 2`] = `
           </svg>
         </div>
         <div
-          class="component component filled m block hasRightAddons"
+          class="component component filled m m block hasRightAddons"
         >
           <div
-            class="inner inner filled hasInnerLabel"
+            class="inner inner inner inner filled hasInnerLabel"
           >
             <div
               class="inputWrapper"
@@ -176,7 +176,7 @@ exports[`BankCard Snapshots tests should match snapshots 2`] = `
               >
                 <input
                   aria-label="Номер карты или счёта"
-                  class="input input m hasInnerLabel input"
+                  class="input input input m hasInnerLabel input"
                   inputmode="numeric"
                   pattern="[0-9]*"
                   type="text"
@@ -263,10 +263,10 @@ exports[`BankCard Snapshots tests should match snapshots 3`] = `
           </svg>
         </div>
         <div
-          class="component component filled m block hasRightAddons"
+          class="component component filled m m block hasRightAddons"
         >
           <div
-            class="inner inner filled hasInnerLabel"
+            class="inner inner inner inner filled hasInnerLabel"
           >
             <div
               class="inputWrapper"
@@ -291,7 +291,7 @@ exports[`BankCard Snapshots tests should match snapshots 3`] = `
               >
                 <input
                   aria-label="Номер карты или счёта"
-                  class="input input m hasInnerLabel input"
+                  class="input input input m hasInnerLabel input"
                   inputmode="numeric"
                   pattern="[0-9]*"
                   type="text"
@@ -378,10 +378,10 @@ exports[`BankCard Snapshots tests should match snapshots 4`] = `
           </svg>
         </div>
         <div
-          class="component component filled m block hasRightAddons"
+          class="component component filled m m block hasRightAddons"
         >
           <div
-            class="inner inner filled hasInnerLabel"
+            class="inner inner inner inner filled hasInnerLabel"
           >
             <div
               class="inputWrapper"
@@ -406,7 +406,7 @@ exports[`BankCard Snapshots tests should match snapshots 4`] = `
               >
                 <input
                   aria-label="Номер карты или счёта"
-                  class="input input m hasInnerLabel input"
+                  class="input input input m hasInnerLabel input"
                   inputmode="numeric"
                   pattern="[0-9]*"
                   type="text"

diff --git a/packages/bank-card/tsconfig.json b/packages/bank-card/tsconfig.json
@@ -7,6 +7,8 @@
         "baseUrl": ".",
         "paths": {
             "@alfalab/core-components-*": ["../*/src"],
+            "@alfalab/core-components-form-control/*": ["../form-control/src/*"],
+            "@alfalab/core-components-input/*": ["../input/src/*"],
             "@alfalab/core-components-button/*": ["../button/src/*"]
         }
     },

diff --git a/packages/calendar-input/src/Component.test.tsx b/packages/calendar-input/src/Component.test.tsx
@@ -2,9 +2,23 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, waitFor, fireEvent } from '@testing-library/react';
 
-import { CalendarInput } from './index';
+import { CalendarInputDesktop as CalendarInput } from './desktop';
 
 describe('CalendarInput', () => {
+    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(),
+        })),
+    });
+
     const getSelectedDay = () =>
         document.querySelector('td[aria-selected="true"]') as HTMLButtonElement;