From 202ffdb6ce935f3b1c40a8594d77e84ca66b6933 Mon Sep 17 00:00:00 2001
From: u_m1by6 <kvdementyev@alfabank.ru>
Date: Mon, 28 Mar 2022 13:03:05 +0500
Subject: [PATCH 1/2] feat(calendar): added hide header

---
 packages/calendar/src/Component.test.tsx      |  15 +-
 packages/calendar/src/Component.tsx           |  46 +-
 .../src/__snapshots__/Component.test.tsx.snap | 593 ++++++++++++++++++
 .../src/component.screenshots.test.tsx        |   2 +-
 .../src/components/header/Component.tsx       |   2 +-
 packages/calendar/src/typings.ts              |   2 +-
 6 files changed, 629 insertions(+), 31 deletions(-)

diff --git a/packages/calendar/src/Component.test.tsx b/packages/calendar/src/Component.test.tsx
index 65e6bddfca..d89e3f205e 100644
--- a/packages/calendar/src/Component.test.tsx
+++ b/packages/calendar/src/Component.test.tsx
@@ -41,12 +41,15 @@ describe('Calendar', () => {
             ).toMatchSnapshot();
         });
 
-        it.each(['month-only', 'full'])('should match selectorView="%s" snapshot', view => {
-            expect(
-                render(<Calendar value={defaultValue} selectorView={view as SelectorView} />)
-                    .container,
-            ).toMatchSnapshot();
-        });
+        it.each(['month-only', 'full', 'empty'])(
+            'should match selectorView="%s" snapshot',
+            view => {
+                expect(
+                    render(<Calendar value={defaultValue} selectorView={view as SelectorView} />)
+                        .container,
+                ).toMatchSnapshot();
+            },
+        );
     });
 
     it('should set `data-test-id` attribute', () => {
diff --git a/packages/calendar/src/Component.tsx b/packages/calendar/src/Component.tsx
index b171f99a56..4499904428 100644
--- a/packages/calendar/src/Component.tsx
+++ b/packages/calendar/src/Component.tsx
@@ -28,7 +28,7 @@ export type CalendarProps = {
     defaultView?: View;
 
     /**
-     * Вид шапки — месяц и год или только месяц
+     * Вид шапки — месяц и год, только месяц или пустой
      */
     selectorView?: SelectorView;
 
@@ -253,27 +253,29 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
                 })}
                 data-test-id={dataTestId}
             >
-                <Header view={selectorView} withShadow={scrolled}>
-                    {selectorView === 'month-only' ? (
-                        <PeriodSlider
-                            className={styles.period}
-                            value={activeMonth}
-                            periodType='month'
-                            prevArrowDisabled={!canSetPrevMonth}
-                            nextArrowDisabled={!canSetNextMonth}
-                            hideDisabledArrows={true}
-                            onPrevArrowClick={handlePrevArrowClick}
-                            onNextArrowClick={handleNextArrowClick}
-                        />
-                    ) : (
-                        <MonthYearHeader
-                            className={styles.monthYear}
-                            value={activeMonth}
-                            onMonthClick={handleMonthClick}
-                            onYearClick={handleYearClick}
-                        />
-                    )}
-                </Header>
+                {selectorView !== 'empty' && (
+                    <Header view={selectorView} withShadow={scrolled}>
+                        {selectorView === 'month-only' ? (
+                            <PeriodSlider
+                                className={styles.period}
+                                value={activeMonth}
+                                periodType='month'
+                                prevArrowDisabled={!canSetPrevMonth}
+                                nextArrowDisabled={!canSetNextMonth}
+                                hideDisabledArrows={true}
+                                onPrevArrowClick={handlePrevArrowClick}
+                                onNextArrowClick={handleNextArrowClick}
+                            />
+                        ) : (
+                            <MonthYearHeader
+                                className={styles.monthYear}
+                                value={activeMonth}
+                                onMonthClick={handleMonthClick}
+                                onYearClick={handleYearClick}
+                            />
+                        )}
+                    </Header>
+                )}
 
                 <div className={cn(styles.container, styles[view])}>
                     {view === 'days' && (
diff --git a/packages/calendar/src/__snapshots__/Component.test.tsx.snap b/packages/calendar/src/__snapshots__/Component.test.tsx.snap
index ea04050bc7..c6cb8e3090 100644
--- a/packages/calendar/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar/src/__snapshots__/Component.test.tsx.snap
@@ -2280,6 +2280,599 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
 </div>
 `;
 
+exports[`Calendar Display tests should match selectorView="empty" snapshot 1`] = `
+<div>
+  <div
+    class="component sixWeeks"
+    tabindex="-1"
+  >
+    <div
+      class="container days"
+    >
+      <table
+        class="daysTable"
+      >
+        <thead>
+          <tr>
+            <th
+              class="dayName"
+            >
+              Пн
+            </th>
+            <th
+              class="dayName"
+            >
+              Вт
+            </th>
+            <th
+              class="dayName"
+            >
+              Ср
+            </th>
+            <th
+              class="dayName"
+            >
+              Чт
+            </th>
+            <th
+              class="dayName"
+            >
+              Пт
+            </th>
+            <th
+              class="dayName"
+            >
+              Сб
+            </th>
+            <th
+              class="dayName"
+            >
+              Вс
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td />
+            <td />
+            <td />
+            <td />
+            <td />
+            <td />
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1604188800000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  1
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1604275200000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  2
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1604361600000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  3
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1604448000000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  4
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1604534400000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  5
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1604620800000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  6
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1604707200000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  7
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1604793600000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  8
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1604880000000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  9
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1604966400000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  10
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1605052800000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  11
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1605139200000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  12
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1605225600000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  13
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1605312000000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  14
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1605398400000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  15
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1605484800000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  16
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1605571200000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  17
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1605657600000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  18
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1605744000000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  19
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1605830400000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  20
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1605916800000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  21
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1606003200000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  22
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1606089600000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  23
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1606176000000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  24
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1606262400000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  25
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1606348800000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  26
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1606435200000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  27
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1606521600000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  28
+                </span>
+              </button>
+            </td>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="false"
+                class="component ghost xs component ghost day"
+                data-date="1606608000000"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  29
+                </span>
+              </button>
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="dayWrapper"
+            >
+              <button
+                aria-selected="true"
+                class="component ghost xs component ghost day selected"
+                data-date="1606694400000"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="text stretchText"
+                >
+                  30
+                </span>
+              </button>
+            </td>
+            <td />
+            <td />
+            <td />
+            <td />
+            <td />
+            <td />
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Calendar Display tests should match selectorView="full" snapshot 1`] = `
 <div>
   <div
diff --git a/packages/calendar/src/component.screenshots.test.tsx b/packages/calendar/src/component.screenshots.test.tsx
index f10693e4ce..58e9a6e270 100644
--- a/packages/calendar/src/component.screenshots.test.tsx
+++ b/packages/calendar/src/component.screenshots.test.tsx
@@ -44,7 +44,7 @@ describe(
                     knobs: {
                         month: [1613310391747],
                         value: [1613310391747, 1613137591747],
-                        selectorView: ['month-only', 'full'],
+                        selectorView: ['month-only', 'full', 'empty'],
                     },
                     mockDate: 1613310391747,
                 }),
diff --git a/packages/calendar/src/components/header/Component.tsx b/packages/calendar/src/components/header/Component.tsx
index c5a17937f1..6aac70518d 100644
--- a/packages/calendar/src/components/header/Component.tsx
+++ b/packages/calendar/src/components/header/Component.tsx
@@ -6,7 +6,7 @@ import styles from './index.module.css';
 
 export type HeaderProps = {
     /**
-     * Вид шапки — месяц и год или только месяц
+     * Вид шапки — месяц и год, только месяц или пустой
      */
     view?: SelectorView;
 
diff --git a/packages/calendar/src/typings.ts b/packages/calendar/src/typings.ts
index f6e2c24e5c..43aa4d4b6d 100644
--- a/packages/calendar/src/typings.ts
+++ b/packages/calendar/src/typings.ts
@@ -28,4 +28,4 @@ export type DateShift =
 
 export type View = 'years' | 'months' | 'days';
 
-export type SelectorView = 'month-only' | 'full';
+export type SelectorView = 'month-only' | 'full' | 'empty';

From 2421418e0f44a599889dd8eee039e792ed896bd1 Mon Sep 17 00:00:00 2001
From: u_m1by6 <kvdementyev@alfabank.ru>
Date: Mon, 28 Mar 2022 15:04:09 +0500
Subject: [PATCH 2/2] fix(calendar): fix comments

---
 packages/calendar/src/Component.tsx                   | 2 +-
 packages/calendar/src/components/header/Component.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calendar/src/Component.tsx b/packages/calendar/src/Component.tsx
index 4499904428..30356b8398 100644
--- a/packages/calendar/src/Component.tsx
+++ b/packages/calendar/src/Component.tsx
@@ -28,7 +28,7 @@ export type CalendarProps = {
     defaultView?: View;
 
     /**
-     * Вид шапки — месяц и год, только месяц или пустой
+     * Вид шапки — месяц и год или только месяц или без шапки
      */
     selectorView?: SelectorView;
 
diff --git a/packages/calendar/src/components/header/Component.tsx b/packages/calendar/src/components/header/Component.tsx
index 6aac70518d..d2f8eba91b 100644
--- a/packages/calendar/src/components/header/Component.tsx
+++ b/packages/calendar/src/components/header/Component.tsx
@@ -6,7 +6,7 @@ import styles from './index.module.css';
 
 export type HeaderProps = {
     /**
-     * Вид шапки — месяц и год, только месяц или пустой
+     * Вид шапки — месяц и год или только месяц или без шапки
      */
     view?: SelectorView;