@popsure/dirty-swan 0.62.3 → 0.63.0

package/src/lib/components/comparisonTable/index.stories.tsx

@@ -254,6 +254,14 @@ const story = {
     collapsibleSections: {
       description: 'Make table groups with a label collapsible',
     },
+    scrollOnOpen: {
+      description:
+        'When enabled, the page scrolls to the top of a newly expanded section.',
+    },
+    scrollTopOffset: {
+      description:
+        'Offset in pixels from the top of the viewport when scrolling to an expanded section.',
+    },
     cellWidth: {
       description: 'Width of a table content cell',
     },
@@ -287,7 +295,9 @@ const story = {
     showDetailsCaption: 'Show details',
     hideScrollBars: false,
     hideScrollBarsMobile: true,
-    collapsibleSections: false,
+    collapsibleSections: true,
+    scrollOnOpen: true,
+    scrollTopOffset: 0,
     cellWidth: undefined,
     firstColumnWidth: undefined,
     stickyHeaderTopOffset: 0,
@@ -325,6 +335,8 @@ export const ComparisonTableStory = {
     data,
     headers,
     collapsibleSections,
+    scrollOnOpen,
+    scrollTopOffset,
     hideDetails,
     classNameOverrides,
     hideDetailsCaption,
@@ -341,6 +353,8 @@ export const ComparisonTableStory = {
         data={data}
         headers={headers}
         collapsibleSections={collapsibleSections}
+        scrollOnOpen={scrollOnOpen}
+        scrollTopOffset={scrollTopOffset}
         hideDetails={hideDetails}
         classNameOverrides={classNameOverrides}
         hideDetailsCaption={hideDetailsCaption}

package/src/lib/components/comparisonTable/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';
 
 import { AccordionItem } from './components/AccordionItem';
@@ -52,6 +52,8 @@ export interface ComparisonTableProps<T> {
   hideScrollBars?: boolean;
   hideScrollBarsMobile?: boolean;
   collapsibleSections?: boolean;
+  scrollOnOpen?: boolean;
+  scrollTopOffset?: number;
   cellWidth?: number;
   firstColumnWidth?: number;
   stickyHeaderTopOffset?: number;
@@ -83,6 +85,8 @@ const ComparisonTable = <T extends { id: number }>(
     hideScrollBars,
     hideScrollBarsMobile = true,
     collapsibleSections,
+    scrollOnOpen,
+    scrollTopOffset = 0,
     cellWidth,
     firstColumnWidth,
     stickyHeaderTopOffset,
@@ -94,8 +98,6 @@ const ComparisonTable = <T extends { id: number }>(
     headerWidth,
     headerId,
     contentContainerRef,
-    selectedSection,
-    setSelectedSection,
     selectedTabIndex,
     headerRefCallbackRef,
     handleArrowsClick,
@@ -103,6 +105,9 @@ const ComparisonTable = <T extends { id: number }>(
     showMore,
   } = useComparisonTable({ onSelectionChanged });
 
+  const [openSectionId, setOpenSectionId] = useState<number | null>(null);
+  const stickyHeaderRef = useRef<HTMLDivElement>(null);
+
   const cssVariablesStyle = {
     '--tableWidth': `${headerWidth}px`,
     ...(cellWidth ? { '--cellWidth': `${cellWidth}px` } : {}),
@@ -125,6 +130,7 @@ const ComparisonTable = <T extends { id: number }>(
         })}
       >
         <div
+          ref={stickyHeaderRef}
           id={headerId}
           className={classNames(baseStyles.header, classNameOverrides?.header)}
         >
@@ -190,6 +196,18 @@ const ComparisonTable = <T extends { id: number }>(
                         )}
                         label={headerGroup.label}
                         headerClassName="p24 br8"
+                        isOpen={openSectionId === headerGroup.id}
+                        onToggle={() =>
+                          setOpenSectionId((prev) =>
+                            prev === headerGroup.id ? null : headerGroup.id
+                          )
+                        }
+                        scrollOnOpen={scrollOnOpen}
+                        scrollTopOffset={
+                          scrollTopOffset +
+                          (stickyHeaderRef.current?.getBoundingClientRect()
+                            .height ?? 0)
+                        }
                       >
                         <ScrollSyncPane>
                           <div

package/src/lib/components/dateSelector/components/Calendar.tsx

@@ -1,9 +1,10 @@
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import dayjs from 'dayjs';
 import DayPicker from 'react-day-picker';
 
 import { useOnClickOutside } from '../../../hooks/useOnClickOutside';
 import { CalendarIcon } from '../../icon/icons';
+import { CalendarCaption } from './CalendarCaption';
 
 import styles from './style.module.scss';
 import './datepicker.scss';
@@ -19,6 +20,7 @@ export interface CalendarProps {
   firstDayOfWeek?: number;
   isOpen?: boolean;
   setCalendarOpen: (isOpen: boolean) => void;
+  defaultDayPickerDate?: string;
 }
 
 export const Calendar = ({
@@ -30,26 +32,29 @@ export const Calendar = ({
   dayjsLocale,
   firstDayOfWeek,
   setCalendarOpen,
-  isOpen
+  isOpen,
+  defaultDayPickerDate,
 }: CalendarProps) => {
   const localeDate = dayjsLocale
     ? dayjs().locale(dayjsLocale).localeData()
     : dayjs().locale('en').localeData();
 
   const localizedWeekdays = localeDate.weekdays();
-  const localizedWeekdaysShort = localeDate.weekdaysShort();
+  const localizedWeekdaysShort = localeDate.weekdaysMin();
   const localizedMonths = localeDate.months();
 
   const calendarContainerRef = useRef<HTMLDivElement | null>(null);
+  const [displayedMonth, setDisplayedMonth] = useState<Date | undefined>(undefined);
 
-  const calendarDefaultDate =
-    dayjs().year() >= yearBoundaries.min && dayjs().year() <= yearBoundaries.max
+  const calendarDefaultDate = defaultDayPickerDate
+    ? dayjs(defaultDayPickerDate).toDate()
+    : dayjs().year() >= yearBoundaries.min && dayjs().year() <= yearBoundaries.max
       ? dayjs().toDate()
       : dayjs().set('year', yearBoundaries.max).toDate();
 
   const selectedDateInDateType = value
     ? dayjs(value).toDate()
-    : calendarDefaultDate;
+    : undefined;
   const dateCalendarFromMonth = dayjs(String(yearBoundaries.min))
     .startOf('year')
     .toDate();
@@ -57,6 +62,20 @@ export const Calendar = ({
     .endOf('year')
     .toDate();
 
+  const currentMonth = displayedMonth ?? selectedDateInDateType ?? calendarDefaultDate;
+
+  const handlePrevMonth = () => {
+    const prev = new Date(currentMonth);
+    prev.setMonth(prev.getMonth() - 1);
+    setDisplayedMonth(prev);
+  };
+
+  const handleNextMonth = () => {
+    const next = new Date(currentMonth);
+    next.setMonth(next.getMonth() + 1);
+    setDisplayedMonth(next);
+  };
+
   useOnClickOutside(calendarContainerRef, () => setCalendarOpen(false));
 
   if (!displayCalendar) {
@@ -80,7 +99,7 @@ export const Calendar = ({
 
       {isOpen && (
         <DayPicker
-          month={selectedDateInDateType}
+          month={displayedMonth ?? selectedDateInDateType ?? calendarDefaultDate}
           showOutsideDays={true}
           fromMonth={dateCalendarFromMonth}
           toMonth={dateCalendarToMonth}
@@ -99,6 +118,18 @@ export const Calendar = ({
               setCalendarOpen(false);
             }
           }}
+          navbarElement={() => null}
+          onMonthChange={(month: Date) => setDisplayedMonth(month)}
+          captionElement={({ date }: { date: Date }) => (
+            <CalendarCaption
+              date={date}
+              months={localizedMonths}
+              yearBoundaries={yearBoundaries}
+              onMonthChange={(newDate) => setDisplayedMonth(newDate)}
+              onPrevClick={handlePrevMonth}
+              onNextClick={handleNextMonth}
+            />
+          )}
           pagedNavigation={true}
           disabledDays={{
             before: dateCalendarFromMonth,

package/src/lib/components/dateSelector/components/CalendarCaption.tsx

@@ -0,0 +1,175 @@
+import { useState, useRef, useCallback } from 'react';
+import classNames from 'classnames';
+
+import { useOnClickOutside } from '../../../hooks/useOnClickOutside';
+import styles from './calendarCaption.module.scss';
+
+interface CalendarCaptionProps {
+  date: Date;
+  months: string[];
+  yearBoundaries: { min: number; max: number };
+  onMonthChange: (date: Date) => void;
+  onPrevClick: () => void;
+  onNextClick: () => void;
+}
+
+export const CalendarCaption = ({
+  date,
+  months,
+  yearBoundaries,
+  onMonthChange,
+  onPrevClick,
+  onNextClick,
+}: CalendarCaptionProps) => {
+  const [openDropdown, setOpenDropdown] = useState<
+    'month' | 'year' | null
+  >(null);
+
+  const captionRef = useRef<HTMLDivElement | null>(null);
+
+  const closeDropdowns = useCallback(() => setOpenDropdown(null), []);
+
+  useOnClickOutside(captionRef, closeDropdowns);
+
+  const currentMonth = date.getMonth();
+  const currentYear = date.getFullYear();
+
+  const fromMonth = new Date(yearBoundaries.min, 0);
+  const toMonth = new Date(yearBoundaries.max, 11);
+
+  const isMonthDisabled = (monthIndex: number) => {
+    const candidate = new Date(currentYear, monthIndex);
+    return candidate < fromMonth || candidate > toMonth;
+  };
+
+  const years: number[] = [];
+  for (let y = yearBoundaries.min; y <= yearBoundaries.max; y++) {
+    years.push(y);
+  }
+
+  const handleMonthSelect = (monthIndex: number) => {
+    onMonthChange(new Date(currentYear, monthIndex));
+    setOpenDropdown(null);
+  };
+
+  const handleYearSelect = (year: number) => {
+    onMonthChange(new Date(year, currentMonth));
+    setOpenDropdown(null);
+  };
+
+  const toggleDropdown = (dropdown: 'month' | 'year') => {
+    setOpenDropdown((prev) => (prev === dropdown ? null : dropdown));
+  };
+
+  const isPrevDisabled =
+    currentYear === yearBoundaries.min && currentMonth === 0;
+  const isNextDisabled =
+    currentYear === yearBoundaries.max && currentMonth === 11;
+
+  return (
+    <div className={styles.caption} ref={captionRef}>
+      <button
+        type="button"
+        className={classNames(styles.navButton, styles.navButtonPrev)}
+        onClick={onPrevClick}
+        disabled={isPrevDisabled}
+        data-testid="calendar-nav-prev"
+      />
+
+      <div className={styles.dropdownContainer}>
+        <button
+          type="button"
+          className={styles.captionButton}
+          onClick={() => toggleDropdown('month')}
+          data-testid="calendar-caption-month"
+        >
+          {months[currentMonth]}
+          <span
+            className={classNames(styles.chevron, {
+              [styles.chevronOpen]: openDropdown === 'month',
+            })}
+          />
+        </button>
+
+        {openDropdown === 'month' && (
+          <div className={styles.dropdown} data-testid="month-dropdown">
+            <div className={styles.mobileHeader}>
+              <button
+                type="button"
+                className={styles.mobileCloseButton}
+                onClick={closeDropdowns}
+              >
+                ✕
+              </button>
+            </div>
+            {months.map((monthName, index) => (
+              <button
+                key={monthName}
+                type="button"
+                className={classNames(styles.dropdownItem, {
+                  [styles.dropdownItemSelected]: index === currentMonth,
+                })}
+                disabled={isMonthDisabled(index)}
+                onClick={() => handleMonthSelect(index)}
+              >
+                <span className={styles.radio} />
+                {monthName}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className={styles.dropdownContainer}>
+        <button
+          type="button"
+          className={styles.captionButton}
+          onClick={() => toggleDropdown('year')}
+          data-testid="calendar-caption-year"
+        >
+          {currentYear}
+          <span
+            className={classNames(styles.chevron, {
+              [styles.chevronOpen]: openDropdown === 'year',
+            })}
+          />
+        </button>
+
+        {openDropdown === 'year' && (
+          <div className={styles.dropdown} data-testid="year-dropdown">
+            <div className={styles.mobileHeader}>
+              <button
+                type="button"
+                className={styles.mobileCloseButton}
+                onClick={closeDropdowns}
+              >
+                ✕
+              </button>
+            </div>
+            {years.map((year) => (
+              <button
+                key={year}
+                type="button"
+                className={classNames(styles.dropdownItem, {
+                  [styles.dropdownItemSelected]: year === currentYear,
+                })}
+                onClick={() => handleYearSelect(year)}
+              >
+                <span className={styles.radio} />
+                {year}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <button
+        type="button"
+        className={classNames(styles.navButton, styles.navButtonNext)}
+        onClick={onNextClick}
+        disabled={isNextDisabled}
+        data-testid="calendar-nav-next"
+      />
+    </div>
+  );
+};

package/src/lib/components/dateSelector/components/calendarCaption.module.scss

@@ -0,0 +1,168 @@
+@use '../../../scss/public/grid' as *;
+@use '../../../scss/public/colors' as *;
+
+.caption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  position: relative;
+}
+
+.navButton {
+  width: 48px;
+  height: 48px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  background-position: center;
+  background-size: 50%;
+  background-repeat: no-repeat;
+  flex-shrink: 0;
+
+  &:hover:not(:disabled) {
+    border-radius: 50%;
+    background-color: $ds-orange-200;
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+}
+
+.navButtonPrev {
+  background-image: url('../../icon/assets/chevron-left.svg');
+}
+
+.navButtonNext {
+  background-image: url('../../icon/assets/chevron-right.svg');
+}
+
+.captionButton {
+  background: none;
+  border: 1px solid $ds-neutral-300;
+  cursor: pointer;
+  font-weight: 700;
+  color: $ds-neutral-900;
+  padding: 8px 12px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+
+  &:hover {
+    background-color: $ds-orange-200;
+  }
+}
+
+.chevron {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid $ds-neutral-600;
+  border-bottom: 2px solid $ds-neutral-600;
+  transform: rotate(45deg);
+  margin-left: 2px;
+  margin-bottom: 2px;
+  transition: transform 0.2s;
+}
+
+.chevronOpen {
+  transform: rotate(-135deg);
+  margin-bottom: -2px;
+}
+
+.dropdownContainer {
+  position: relative;
+}
+
+.dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: white;
+  border: 1px solid $ds-neutral-300;
+  border-radius: 12px;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
+  z-index: 200;
+  max-height: 240px;
+  overflow-y: auto;
+  min-width: 140px;
+  padding: 8px 0;
+
+  @include p-size-mobile {
+    position: fixed;
+    top: 16px;
+    left: 16px;
+    right: 16px;
+    bottom: 16px;
+    width: auto;
+    height: fit-content;
+    max-height: calc(100vh - 32px);
+    transform: none;
+    border-radius: 16px;
+    display: flex;
+    flex-direction: column;
+    padding: 16px 0;
+    min-width: unset;
+  }
+}
+
+.dropdownItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 8px 16px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  text-align: left;
+  color: $ds-neutral-900;
+  white-space: nowrap;
+
+  &:hover:not(:disabled) {
+    background-color: $ds-orange-200;
+  }
+
+  &:disabled {
+    color: $ds-neutral-400;
+    cursor: not-allowed;
+  }
+
+  @include p-size-mobile {
+    padding: 16px 24px;
+    font-size: 18px;
+  }
+}
+
+.radio {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid $ds-neutral-400;
+  flex-shrink: 0;
+}
+
+.dropdownItemSelected {
+  font-weight: 700;
+  background-color: $ds-orange-100;
+
+  .radio {
+    border-color: $ds-neutral-900;
+    background-color: $ds-neutral-900;
+    box-shadow: inset 0 0 0 3px white;
+  }
+}
+
+.mobileHeader {
+  display: none;
+}
+
+.mobileCloseButton {
+  display: none;
+}