Merge main into renovate/rollup

packages/components/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 1.70.14
+
+### Patch Changes
+
+- [#5457](https://github.com/cultureamp/kaizen-design-system/pull/5457) [`1785576`](https://github.com/cultureamp/kaizen-design-system/commit/1785576ce4ecc5f5a4bd604a10e30bb4c43d64f6) - FilterDateRangePicker responsive support: now shrinks from two months showing to 1 on small viewports
+
+## 1.70.13
+
+### Patch Changes
+
+- [#5488](https://github.com/cultureamp/kaizen-design-system/pull/5488) [`b7d64b0`](https://github.com/cultureamp/kaizen-design-system/commit/b7d64b05dea76dbc91817d0348520f5f6b5c31a4) - Content: Adjust width on small viewports
+
 ## 1.70.12
 
 ### Patch Changes

packages/components/__tests__/index.ts

@@ -1 +1,2 @@
+export * from './matchMediaMock'
 export * from './reactIntlMock'

packages/components/__tests__/matchMediaMock.ts

@@ -0,0 +1,17 @@
+import { vi } from 'vitest'
+
+export const matchMediaMock = (): any => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(), // deprecated
+      removeListener: vi.fn(), // deprecated
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  })
+}

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.70.12",
+  "version": "1.70.14",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <[email protected]>",
   "homepage": "https://cultureamp.design",

packages/components/src/Calendar/CalendarRange/CalendarRange.module.scss

@@ -47,6 +47,11 @@ $cell-border-radius: 3px;
   .captionEnd & {
     flex-direction: row-reverse;
   }
+
+  .captionStart.captionEnd & {
+    justify-content: space-between;
+    flex-direction: row;
+  }
 }
 
 .dayRangeStart,

packages/components/src/Calendar/CalendarRange/CalendarRange.tsx

@@ -22,6 +22,7 @@ export const CalendarRange = ({
   classNameOverride,
   selected,
   defaultMonth,
+  numberOfMonths = 2,
   locale = enAU,
   ...restProps
 }: CalendarRangeProps): JSX.Element => {
@@ -39,6 +40,7 @@ export const CalendarRange = ({
     ...baseCalendarClassNames,
     month: hasDivider ? styles.monthWithDivider : styles.month,
     caption_end: styles.captionEnd,
+    caption_start: styles.captionStart,
     nav: styles.nav,
     day_range_start: styles.dayRangeStart,
     day_range_end: styles.dayRangeEnd,
@@ -57,7 +59,7 @@ export const CalendarRange = ({
           IconRight: () => <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
           IconLeft: () => <Icon name="arrow_back" isPresentational shouldMirrorInRTL />,
         }}
-        numberOfMonths={2}
+        numberOfMonths={numberOfMonths}
         locale={locale}
         {...restProps}
       />

packages/components/src/Content/Content.module.scss

@@ -8,5 +8,6 @@
 
   @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
     margin: 0 $content-margin-width-on-medium-and-small;
+    width: calc(100% - 2 * #{$content-margin-width-on-medium-and-small});
   }
 }

packages/components/src/Filter/FilterDateRangePicker/FilterDateRangePicker.module.css

@@ -0,0 +1,7 @@
+@media (width <= 320px) {
+  .filterDateRangePickerContents {
+    padding: var(--spacing-16);
+    max-width: 320px;
+    box-sizing: border-box;
+  }
+}

packages/components/src/Filter/FilterDateRangePicker/FilterDateRangePicker.tsx

@@ -1,4 +1,5 @@
 import React, { useId } from 'react'
+import classNames from 'classnames'
 import { getLocale } from '~components/DatePicker/utils/getLocale'
 import { Filter, FilterContents, type FilterProps } from '~components/Filter/Filter'
 import { type FilterButtonProps } from '../FilterButton'
@@ -9,6 +10,7 @@ import {
 } from './subcomponents/FilterDateRangePickerField'
 import { isValidRange } from './subcomponents/FilterDateRangePickerField/utils/isValidRange'
 import { isCompleteDateRange } from './utils/isCompleteDateRange'
+import styles from './FilterDateRangePicker.module.css'
 
 export type FilterDateRangePickerProps = {
   id?: string
@@ -46,7 +48,7 @@ export const FilterDateRangePicker = ({
         })
       }
     >
-      <FilterContents>
+      <FilterContents classNameOverride={classNames(styles.filterDateRangePickerContents)}>
         <FilterDateRangePickerField
           id={`${id}--input`}
           label={label}

packages/components/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { fn } from '@storybook/test'
+import { expect, fn, waitFor, within } from '@storybook/test'
 import Highlight from 'react-highlight'
 import { type DateRange } from '~components/Calendar'
 import { defaultMonthControls } from '~components/Calendar/_docs/controls/defaultMonthControls'
@@ -428,3 +428,38 @@ export const Validation: Story = {
     controls: { disable: true },
   },
 }
+
+export const OnSmallViewport: Story = {
+  parameters: { viewport: { defaultViewport: 'mobile1' } },
+  ...FilterDateRangePickerTemplate,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    await step('initial render complete', async () => {
+      await waitFor(() => {
+        canvas.getByRole('button', {
+          name: 'Dates',
+        })
+      })
+    })
+
+    await step('Can open the date picker', async () => {
+      await waitFor(() => {
+        const button = canvas.getByRole('button', {
+          name: 'Dates',
+        })
+        button.click()
+      })
+    })
+
+    await step('Back and Forward arrow and both visible', async () => {
+      await waitFor(() => {
+        const prevMonth = canvas.getByLabelText('Go to previous month')
+        const nextMonth = canvas.getByLabelText('Go to next month')
+
+        expect(prevMonth).toBeVisible()
+        expect(nextMonth).toBeVisible()
+      })
+    })
+  },
+}

packages/components/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx

@@ -15,6 +15,7 @@ import { type DateValidationResponse } from '~components/Filter/FilterDatePicker
 import { useDateInputHandlers } from '~components/Filter/FilterDatePicker/hooks/useDateInputHandlers'
 import { type DataAttributes } from '~components/types/DataAttributes'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
+import { useMediaQueries } from '~components/utils/useMediaQueries'
 import { DateRangeInputField, type DateRangeInputFieldProps } from '../DateRangeInputField'
 import { filterDatePickerFieldReducer } from './filterDateRangePickerFieldReducer'
 import { useEndDateValidation } from './hooks/useEndDateValidation'
@@ -84,6 +85,8 @@ export const FilterDateRangePickerField = ({
   const { formatMessage } = useIntl()
   const locale = getLocale(propsLocale)
 
+  const { queries } = useMediaQueries()
+
   const translatedDateFrom = formatMessage({
     id: 'filterDateRangePicker.dateFrom',
     defaultMessage: 'Date from',
@@ -292,7 +295,7 @@ export const FilterDateRangePickerField = ({
           dateStart: dateStartValidation.validationMessage,
           dateEnd: dateEndValidation.validationMessage,
         }}
-        classNameOverride={styles.dateRangeInputField}
+        classNameOverride={classnames(styles.dateRangeInputField)}
       />
       <CalendarRange
         disabled={disabledDays}
@@ -303,6 +306,7 @@ export const FilterDateRangePickerField = ({
         }}
         onSelect={handleCalendarSelectRange}
         month={state.startMonth}
+        numberOfMonths={queries.isSmall ? 1 : 2}
         onMonthChange={(value: Date) => dispatch({ type: 'navigate_months', date: value })}
       />
     </div>

vitest.setup.ts

@@ -2,12 +2,13 @@ import * as JestDomMatchers from '@testing-library/jest-dom/matchers'
 import { cleanup } from '@testing-library/react'
 import { afterEach, beforeEach, expect } from 'vitest'
 import 'vitest-axe/extend-expect'
-import { reactIntlMock } from '~tests'
+import { matchMediaMock, reactIntlMock } from '~tests'
 
 expect.extend(JestDomMatchers)
 
 beforeEach(() => {
   reactIntlMock()
+  matchMediaMock()
 })
 
 afterEach(() => {