Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 28 commits into from
Aug 7, 2023
Merged

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

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
efdadc0
feat(input): added mobile and responsive versions component
Jun 14, 2023
79b35d7
feat(input): fix tests
Jun 14, 2023
0878a2c
feat(input): fix errors lint
Jun 14, 2023
4d0e9b3
Merge branch 'master' into feat/input-mobile-component
Jun 19, 2023
e5a60b2
feat(input): fix props
Jun 19, 2023
4bc518c
feat(input): fix stories
Jun 20, 2023
5016839
feat(input): updated styles mobile input
Jun 22, 2023
be1b368
Merge branch 'master' into feat/input-mobile-component
Jun 22, 2023
60f1c68
feat(input): fix screenshots input-autocomplete
Jun 22, 2023
6832dfc
feat(input): fix test
Jun 22, 2023
9dd9818
feat(input): add mobile style corp
Jun 26, 2023
a0205f3
feat(input): fix bug
Jun 26, 2023
af7e60e
fix(input): fix docs masked-input
Jun 26, 2023
293db12
fix(input): fix imports
Jun 28, 2023
902edcb
Create unlucky-queens-battle.md
Valeri8888 Jul 3, 2023
4221d75
Create tricky-balloons-cry.md
Valeri8888 Jul 3, 2023
b719363
Create rotten-geese-dream.md
Valeri8888 Jul 3, 2023
6603f2a
Create hungry-items-wave.md
Valeri8888 Jul 3, 2023
d315730
fix(input): fix bg/secondary
Jul 14, 2023
b5dc7ff
fix(with-suffix): store input node in state
reme3d2y Jul 17, 2023
908fb38
Create empty-houses-ring.md
reme3d2y Jul 17, 2023
cdbb7cf
feat(input): fix masked-input
Jul 19, 2023
c0df3e4
Merge branch 'master' into feat/input-mobile-component
Jul 19, 2023
12417a9
chore: fix changeset
Jul 19, 2023
fcf1a49
feat(input): merge master
Jul 24, 2023
92d652b
feat(input): fix design review
Jul 24, 2023
928da91
Merge branch 'master' into feat/input-mobile-component
Valeri8888 Aug 3, 2023
2f04b6f
chore: merge master
v-gevak Aug 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions jest.screenshots.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ module.exports = {
},
},
moduleNameMapper: {
'@alfalab/core-components-(.*)/(.*)$': '<rootDir>/packages/$1/src/$2',
Valeri8888 marked this conversation as resolved.
Show resolved Hide resolved
'@alfalab/core-components-(.*)$': '<rootDir>/packages/$1/src',
'\\.css$': 'identity-obj-proxy',
},
Expand Down
14 changes: 14 additions & 0 deletions packages/amount-input/src/Component.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 2 additions & 0 deletions packages/amount-input/src/Component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
clear = false,
onChange,
onClear,
breakpoint=1024,
Valeri8888 marked this conversation as resolved.
Show resolved Hide resolved
...restProps
},
ref,
Expand Down Expand Up @@ -255,6 +256,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
pattern={`[${positiveOnly ? '' : '-'}0-9\\s\\.,]*`}
dataTestId={dataTestId}
ref={ref}
breakpoint={breakpoint}
/>
</div>
);
Expand Down
20 changes: 10 additions & 10 deletions packages/amount-input/src/__snapshots__/Component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -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"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -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"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -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 filled"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -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 filled"
>
<div
class="inputWrapper"
Expand Down
1 change: 1 addition & 0 deletions packages/amount-input/src/component.screenshots.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ describe('AmountInput ', () =>
value: 123400,
size: 'm',
block: true,
breakpoint: 1
},
},
'padding: 0 270px; transform:scale(2.1)',
Expand Down
4 changes: 3 additions & 1 deletion packages/amount-input/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@
"rootDirs": ["src"],
"baseUrl": ".",
"paths": {
"@alfalab/core-components-*": ["../*/src"]
"@alfalab/core-components-*": ["../*/src"],
"@alfalab/core-components-input/*": ["../input/src/*"],
"@alfalab/core-components-form-control/*": ["../form-control/src/*"],
}
},
"references": [{ "path": "../input" }, { "path": "../with-suffix" }]
Expand Down
14 changes: 14 additions & 0 deletions packages/bank-card/src/Component.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
16 changes: 8 additions & 8 deletions packages/bank-card/src/__snapshots__/Component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 filled hasInnerLabel"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -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 filled hasInnerLabel"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -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 filled hasInnerLabel"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -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 filled hasInnerLabel"
>
<div
class="inputWrapper"
Expand Down
3 changes: 2 additions & 1 deletion packages/bank-card/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
"rootDirs": ["src"],
"baseUrl": ".",
"paths": {
"@alfalab/core-components-*": ["../*/src"]
"@alfalab/core-components-*": ["../*/src"],
"@alfalab/core-components-form-control/*": ["../form-control/src/*"],
}
},
"references": [{ "path": "../form-control" }, { "path": "../input" }, { "path": "../masked-input" }]
Expand Down
16 changes: 15 additions & 1 deletion packages/calendar-input/src/Component.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
20 changes: 10 additions & 10 deletions packages/calendar-input/src/__snapshots__/Component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ exports[`CalendarInput Display tests should match snapshot 1`] = `
tabindex="-1"
>
<div
class="component component s block hasRightAddons"
class="component component s s block hasRightAddons"
>
<div
class="inner inner"
class="inner inner inner"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -69,10 +69,10 @@ Object {
tabindex="-1"
>
<div
class="component component s block hasLeftAddons hasRightAddons"
class="component component s s block hasLeftAddons hasRightAddons"
>
<div
class="inner inner"
class="inner inner inner"
>
<div
class="addons leftAddons"
Expand Down Expand Up @@ -130,10 +130,10 @@ Object {
tabindex="-1"
>
<div
class="component component s block hasLeftAddons hasRightAddons"
class="component component s s block hasLeftAddons hasRightAddons"
>
<div
class="inner inner"
class="inner inner inner"
>
<div
class="addons leftAddons"
Expand Down Expand Up @@ -251,10 +251,10 @@ Object {
tabindex="-1"
>
<div
class="component component s block hasRightAddons"
class="component component s s block hasRightAddons"
>
<div
class="inner inner"
class="inner inner inner"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -308,10 +308,10 @@ Object {
tabindex="-1"
>
<div
class="component component s block hasRightAddons"
class="component component s s block hasRightAddons"
>
<div
class="inner inner"
class="inner inner inner"
>
<div
class="inputWrapper"
Expand Down
2 changes: 2 additions & 0 deletions packages/calendar-input/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
"baseUrl": ".",
"paths": {
"@alfalab/core-components-modal/*": ["../modal/src/*"],
"@alfalab/core-components-form-control/*": ["../form-control/src/*"],
"@alfalab/core-components-input/*": ["../input/src/*"],
"@alfalab/core-components-*": ["../*/src"]
}
},
Expand Down
22 changes: 18 additions & 4 deletions packages/calendar-range/src/Component.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,21 @@ import { CalendarRange } from './index';

jest.useFakeTimers();

describe('CalendarRange', () => {
describe('CalendarRange', () => {
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 defaultDate = new Date('October 01, 2020 00:00:00');
const currentDate = new Date();
const currentMonth = startOfMonth(currentDate);
Expand Down Expand Up @@ -226,14 +240,14 @@ describe('CalendarRange', () => {
const [inputFrom, inputTo] = queryAllByRole('textbox') as HTMLInputElement[];

await waitFor(() => {
fireEvent.focus(inputFrom);
fireEvent.click(inputFrom);
expect(
document.querySelector('.from-calendar .button.month .buttonContent'),
).toHaveTextContent(currentMonthName);
});

await waitFor(() => {
fireEvent.focus(inputTo);
fireEvent.click(inputTo);
expect(
document.querySelector('.to-calendar .button.month .buttonContent'),
).toHaveTextContent(currentMonthName);
Expand All @@ -251,7 +265,7 @@ describe('CalendarRange', () => {
const [inputFrom, inputTo] = queryAllByRole('textbox') as HTMLInputElement[];

await waitFor(() => {
fireEvent.focus(inputTo);
fireEvent.click(inputTo);

expect(document.querySelector('.to-calendar')).toBeInTheDocument();
});
Expand Down
8 changes: 4 additions & 4 deletions packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
>
<div>
<div
class="component component s block hasRightAddons"
class="component component s s block hasRightAddons"
>
<div
class="inner inner"
class="inner inner inner"
>
<div
class="inputWrapper"
Expand Down Expand Up @@ -920,10 +920,10 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
/>
<div>
<div
class="component component s block hasRightAddons"
class="component component s s block hasRightAddons"
>
<div
class="inner inner"
class="inner inner inner"
>
<div
class="inputWrapper"
Expand Down
1 change: 1 addition & 0 deletions packages/calendar-range/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"baseUrl": ".",
"paths": {
"@alfalab/core-components-modal/*": ["../modal/src/*"],
"@alfalab/core-components-form-control/*": ["../form-control/src/*"],
"@alfalab/core-components-*": ["../*/src"]
}
},
Expand Down
Loading