feat(calendar-range): add custom container width prop (#1421)

* feat(calendar-range): add custom container width prop
core-ds · Dec 26, 2024 · 138ae13 · 138ae13
1 parent 72d2609
commit 138ae13
Show file tree

Hide file tree

Showing 10 changed files with 1,622 additions and 1,510 deletions.
diff --git a/.changeset/early-forks-smell.md b/.changeset/early-forks-smell.md
@@ -0,0 +1,6 @@
+---
+'@alfalab/core-components-calendar-range': minor
+---
+
+- Добавлен дополнительный класс для контейнера календаря, с помощью него можно изменить ширину контейнера.
+- Добавлен модификатор для data-test-id
diff --git a/packages/calendar-range/package.json b/packages/calendar-range/package.json
@@ -19,6 +19,7 @@
         "@alfalab/core-components-calendar": "^7.17.1",
         "@alfalab/core-components-calendar-input": "^10.4.11",
         "@alfalab/core-components-date-input": "^4.4.10",
+        "@alfalab/core-components-shared": "^0.13.0",
         "@alfalab/hooks": "^1.13.1",
         "classnames": "^2.5.1",
         "date-fns": "^2.16.1",

diff --git a/packages/calendar-range/src/Component.test.tsx b/packages/calendar-range/src/Component.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, waitFor, fireEvent, act } from '@testing-library/react';
+import { render, waitFor, fireEvent, act, screen } from '@testing-library/react';
 import setMonth from 'date-fns/setMonth';
 import startOfMonth from 'date-fns/startOfMonth';
 import addMonths from 'date-fns/addMonths';
@@ -11,6 +11,7 @@ import { MONTHS } from '../../calendar/src/utils';
 import { formatDate } from '../../calendar-input/src/utils';
 
 import { CalendarRange } from './index';
+import { getCalendarRangeTestIds } from './utils';
 
 jest.useFakeTimers();
 
@@ -51,9 +52,13 @@ describe('CalendarRange', () => {
 
     it('should set `data-test-id` attribute', () => {
         const testId = 'test-id';
+        const testIds = getCalendarRangeTestIds(testId);
+
         const { getByTestId } = render(<CalendarRange dataTestId={testId} />);
 
-        expect(getByTestId(testId)).toBeInTheDocument();
+        expect(getByTestId(testIds.component)).toBeInTheDocument();
+        expect(getByTestId(testIds.calendarContainerFrom)).toBeInTheDocument();
+        expect(getByTestId(testIds.calendarContainerTo)).toBeInTheDocument();
     });
 
     it('should set custom class', () => {
@@ -566,6 +571,52 @@ describe('CalendarRange', () => {
         });
     });
 
+    describe('Calendar container tests', () => {
+        it('should set default calendar-container-from class', () => {
+            const testId = 'test-id';
+            const testIds = getCalendarRangeTestIds(testId);
+
+            render(<CalendarRange dataTestId={testId} />);
+            const container = screen.getByTestId(testIds.calendarContainerFrom);
+
+            expect(container).toHaveClass('calendarContainer');
+        });
+
+        it('should set default calendar-container-to class', () => {
+            const testId = 'test-id';
+            const testIds = getCalendarRangeTestIds(testId);
+
+            render(<CalendarRange dataTestId={testId} />);
+            const container = screen.getByTestId(testIds.calendarContainerFrom);
+
+            expect(container).toHaveClass('calendarContainer');
+        });
+
+        it('should set custom calendar-container-from class', () => {
+            const testId = 'test-id';
+            const testIds = getCalendarRangeTestIds(testId);
+
+            render(
+                <CalendarRange dataTestId={testId} calendarContainerClassName={'customClass'} />,
+            );
+            const container = screen.getByTestId(testIds.calendarContainerFrom);
+
+            expect(container).toHaveClass('calendarContainer customClass');
+        });
+
+        it('should set custom calendar-container-to class', () => {
+            const testId = 'test-id';
+            const testIds = getCalendarRangeTestIds(testId);
+
+            render(
+                <CalendarRange dataTestId={testId} calendarContainerClassName={'customClass'} />,
+            );
+            const container = screen.getByTestId(testIds.calendarContainerFrom);
+
+            expect(container).toHaveClass('calendarContainer customClass');
+        });
+    });
+
     describe('Render tests', () => {
         test('should unmount without errors', () => {
             const { unmount } = render(<CalendarRange />);

diff --git a/packages/calendar-range/src/Component.tsx b/packages/calendar-range/src/Component.tsx
@@ -101,6 +101,11 @@ export type CalendarRangeProps = {
      * Возвращать невалидную дату для кастомной валидации
      */
     returnInvalidDates?: boolean;
+
+    /**
+     * Дополнительный класс для контейнера календаря
+     */
+    calendarContainerClassName?: string;
 };
 
 export const CalendarRange: FC<CalendarRangeProps> = ({