@popsure/dirty-swan 0.48.1 → 0.49.2

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

@@ -47,16 +47,27 @@ export interface ComparisonTableProps<T> {
   headers: Array<TableHeader<T>>;
   data: Array<T>;
   hideDetails?: boolean;
+  hideDetailsCaption?: string;
+  showDetailsCaption?: string;
   hideScrollBars?: boolean;
+  hideScrollBarsMobile?: boolean;
   collapsibleSections?: boolean;
   cellWidth?: number;
   firstColumnWidth?: number;
   stickyHeaderTopOffset?: number;
   growContent?: boolean;
-  styles?: {
-    header?: string;
-    container?: string;
-  };
+  classNameOverrides?: ClassNameOverrides;
+  onSelectionChanged?: (selectedIndex: number) => void;
+}
+
+export interface ClassNameOverrides {
+  header?: string;
+  container?: string;
+  cell?: string;
+  headerCell?: string;
+  collapsibleSection?: string;
+  section?: string;
+  hideDetailsButton?: string;
 }
 
 const ComparisonTable = <T extends { id: number }>(
@@ -66,13 +77,17 @@ const ComparisonTable = <T extends { id: number }>(
     headers,
     data,
     hideDetails,
-    styles,
+    hideDetailsCaption = 'Hide details',
+    showDetailsCaption = 'Show details',
+    classNameOverrides,
     hideScrollBars,
+    hideScrollBarsMobile,
     collapsibleSections,
     cellWidth,
     firstColumnWidth,
     stickyHeaderTopOffset,
     growContent,
+    onSelectionChanged,
   } = props;
 
   const {
@@ -85,8 +100,7 @@ const ComparisonTable = <T extends { id: number }>(
     handleArrowsClick,
     toggleMoreRows,
     showMore,
-    headerId,
-  } = useComparisonTable();
+  } = useComparisonTable({ onSelectionChanged });
 
   const cssVariablesStyle = {
     '--tableWidth': `${headerWidth}px`,
@@ -101,16 +115,19 @@ const ComparisonTable = <T extends { id: number }>(
   } as React.CSSProperties;
 
   return (
-    <ScrollSync onSync={scrollContainerCallbackRef}>
-      <div style={cssVariablesStyle}>
-        <div className={classNames(baseStyles.header, styles?.header)}>
-          <ScrollSyncPane>
-            <div
-              id={headerId}
-              className={classNames(baseStyles.container, {
-                [baseStyles.noScrollBars]: hideScrollBars,
-              })}
-            >
+    <ScrollSync>
+      <div
+        style={cssVariablesStyle}
+        className={classNames({
+          [baseStyles.noScrollBars]: hideScrollBars,
+          [baseStyles.noScrollBarsMobile]: hideScrollBarsMobile,
+        })}
+      >
+        <div
+          className={classNames(baseStyles.header, classNameOverrides?.header)}
+        >
+          <ScrollSyncPane innerRef={scrollContainerCallbackRef}>
+            <div className={classNames(baseStyles.container)}>
               <div className={classNames(baseStyles['overflow-container'])}>
                 <div className={baseStyles['group-container']}>
                   <TableArrows
@@ -126,6 +143,7 @@ const ComparisonTable = <T extends { id: number }>(
                     cell={headers[0].cells[0]}
                     data={data}
                     isRowHeader
+                    cellClassName={classNameOverrides?.headerCell}
                   />
                 </div>
               </div>
@@ -148,7 +166,13 @@ const ComparisonTable = <T extends { id: number }>(
                   if (index === 0 && headerGroupIndex === 0) return null;
 
                   return (
-                    <Row<T> key={rowId} rowId={rowId} cell={cell} data={data} />
+                    <Row<T>
+                      key={rowId}
+                      rowId={rowId}
+                      cell={cell}
+                      data={data}
+                      cellClassName={classNameOverrides?.cell}
+                    />
                   );
                 });
 
@@ -158,7 +182,10 @@ const ComparisonTable = <T extends { id: number }>(
                   <Fragment key={idString}>
                     {headerGroup.label && collapsibleSections ? (
                       <AccordionItem
-                        className="mt8"
+                        className={classNames(
+                          'mt16',
+                          classNameOverrides?.collapsibleSection
+                        )}
                         label={headerGroup.label}
                         headerClassName="p24 br8"
                         isOpen={selectedSection === idString}
@@ -169,7 +196,8 @@ const ComparisonTable = <T extends { id: number }>(
                           <div
                             className={classNames(
                               baseStyles.container,
-                              styles?.container,
+                              'pb16',
+                              classNameOverrides?.container,
                               {
                                 [baseStyles.noScrollBars]: hideScrollBars,
                               }
@@ -188,12 +216,19 @@ const ComparisonTable = <T extends { id: number }>(
                         </ScrollSyncPane>
                       </AccordionItem>
                     ) : (
-                      <div key={idString}>
+                      <section
+                        key={idString}
+                        className={classNames(
+                          baseStyles.section,
+                          classNameOverrides?.section
+                        )}
+                      >
                         <ScrollSyncPane>
                           <div
                             className={classNames(
                               baseStyles.container,
-                              styles?.container,
+                              'pb16',
+                              classNameOverrides?.container,
                               {
                                 [baseStyles.noScrollBars]: hideScrollBars,
                               }
@@ -224,7 +259,7 @@ const ComparisonTable = <T extends { id: number }>(
                             </div>
                           </div>
                         </ScrollSyncPane>
-                      </div>
+                      </section>
                     )}
                   </Fragment>
                 );
@@ -239,11 +274,15 @@ const ComparisonTable = <T extends { id: number }>(
             >
               <div>
                 <button
-                  className={`w100 d-flex p-a p-h4 c-pointer ${baseStyles['show-details-button']}`}
+                  className={classNames(
+                    'w100 d-flex p-a p-h4 c-pointer',
+                    baseStyles['show-details-button'],
+                    classNameOverrides?.hideDetailsButton
+                  )}
                   onClick={toggleMoreRows}
                   type="button"
                 >
-                  {showMore ? 'Hide details' : 'Show details'}
+                  {showMore ? hideDetailsCaption : showDetailsCaption}
                   <Chevron
                     className={showMore ? '' : baseStyles['icon-inverted']}
                   />

package/src/lib/components/comparisonTable/style.module.scss

@@ -21,9 +21,30 @@
     width: 0;
     height: 0;
   }
+}
+
+.noScrollBarsMobile {
+  @include p-size-mobile {
+    * {
+      // Disable the scrollbar in all browsers
+      scrollbar-width: none; /* Firefox */
+      -ms-overflow-style: none; /* Internet Explorer 10+ */
+      -webkit-scrollbar {
+        /* WebKit */
+        width: 0;
+        height: 0;
+        display: none;
+      }
+    }
+  }
+}
+
+.section + .section {
+  margin-top: 48px;
 
-  // Disable snapping since it's not needed without scrollbars
-  scroll-snap-type: unset;
+  @include p-size-tablet {
+    margin-top: 72px;
+  }
 }
 
 .overflow-container {
@@ -44,16 +65,10 @@
   background-color: $ds-grey-100;
   border-radius: 8px;
 
-  margin-top: 48px;
-
   & > h4 {
     padding: 24px;
     display: inline-block;
   }
-
-  @include p-size-tablet {
-    margin-top: 72px;
-  }
 }
 
 .sticky {

package/src/lib/components/dateSelector/index.test.tsx

@@ -52,14 +52,44 @@ describe('DateSelector component', () => {
     expect(callback).toHaveBeenCalledWith('2023-07-03');
   });
 
-  it('should call onChange empty when invalid date', async () => {
+  it('should not call onChange when there is an invalid date that has not been completely filled', async () => {
     const callback = jest.fn();
     const { getByLabelText, user } = setup(undefined, callback);
 
     await user.type(getByLabelText('Day'), '5');
 
     expect(getByLabelText('Day')).toHaveValue('5');
-    expect(callback).toHaveBeenCalledWith('');
+    expect(callback).not.toHaveBeenCalled();
+
+    await user.type(getByLabelText('Month'), '4');
+
+    expect(getByLabelText('Month')).toHaveValue('4');
+    expect(callback).not.toHaveBeenCalled();
+
+    await user.type(getByLabelText('Year'), '2020');
+
+    expect(getByLabelText('Year')).toHaveValue('2020');
+    expect(callback).toHaveBeenCalledWith("2020-04-05");
+  });
+
+  it('should show error boundaries error for min date onChange empty when year out of boundaries', async () => {
+    const callback = jest.fn();
+    const date = '2010-01-01';
+    const { getByTestId } = setup(date, callback);
+
+    expect(getByTestId('date-error-message')).toBeVisible();
+    expect(getByTestId('date-error-message')).toHaveTextContent('Please choose a date after 2019');
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('should show error boundaries error for ,ax date onChange empty when year out of boundaries', async () => {
+    const callback = jest.fn();
+    const date = '2100-01-01';
+    const { getByTestId } = setup(date, callback);
+
+    expect(getByTestId('date-error-message')).toBeVisible();
+    expect(getByTestId('date-error-message')).toHaveTextContent('Please choose a date before 2026');
+    expect(callback).not.toHaveBeenCalled();
   });
 
   it('should call onChange empty when year out of boundaries', async () => {

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

@@ -37,6 +37,8 @@ export interface DateSelectorProps {
     year?: string;
     yearFormat?: string;
     error?: string;
+    errorBeforeMinYear?: string;
+    errorAfterMaxYear?: string;
   };
   firstDayOfWeek?: number;
   inputProps?: (key: keyof CalendarDate) => Partial<DateSelectorInputProps>;
@@ -52,34 +54,37 @@ const defaultPlaceholders: DateSelectorProps["placeholders"] = {
   error: "Please enter a valid date"
 }
 
-type ErrorField = 'all' | 'day' | 'month' | 'year' | undefined;
+type ErrorType = 'afterMax' | 'beforeMin' | 'default';
 
 const isDateValid = (
   date: string | undefined,
-  yearBoundaries: DateSelectorProps["yearBoundaries"]
+  yearBoundaries: DateSelectorProps["yearBoundaries"],
+  dateObject: Partial<CalendarDate>,
 ): {
   isValid: boolean;
-  field?: ErrorField;
+  errorType?: ErrorType;
 } => {
   const { min = 0, max = 0 } = yearBoundaries;
-
+  
   if (!date) {
-    return { isValid: false, field: 'all' };
+    return { isValid: false, errorType: 'default' };
   }
 
+  const isValidYear = dateObject?.year && String(dateObject?.year).length === 4;
+
   if (max && dayjs(date).isAfter(`${max}-01-01`, 'year')) { 
-    return { isValid: false, field: 'year' };
+    return { isValid: false, errorType: isValidYear ? 'afterMax' : 'default' };
   }
   
   if (min && dayjs(date).isBefore(`${min}-01-01`, 'year')) {  
-    return { isValid: false, field: 'year' };
+    return { isValid: false, errorType: isValidYear ? 'beforeMin' : 'default' };
   }
   
-  const isDateValid = dayjs(date, COLLECTABLE_DATE_FORMAT, true).isValid();
+  const isValidDate = dayjs(date, COLLECTABLE_DATE_FORMAT, true).isValid();
 
   return {
-    isValid: isDateValid,
-    field: isDateValid ? undefined : 'all',
+    isValid: isValidDate,
+    errorType: 'default'
   };
 }
 
@@ -100,7 +105,7 @@ export const DateSelector = ({
 
   const itemsRef = useRef<HTMLInputElement[]>([]);
   const [isDirty, setIsDirty] = useState(false);
-  const [hasError, setHasError] = useState<ErrorField>();
+  const [hasError, setHasError] = useState<ErrorType>();
   const [isCalendarOpen, setIsCalendarOpen] = useState(false);
   const [internalValue, setInternalValue] = useState<Partial<CalendarDate>>({});
 
@@ -108,9 +113,9 @@ export const DateSelector = ({
     const calendarDateValue = value ? isoStringtoCalendarDate(value) : undefined;
 
     if(value !== calendarDateValue && calendarDateValue?.day && calendarDateValue?.month && calendarDateValue?.year) {
-      const { isValid, field } = isDateValid(value, yearBoundaries)
+      const { isValid, errorType } = isDateValid(value, yearBoundaries, calendarDateValue)
       setInternalValue(calendarDateValue)
-      setHasError(isValid ? undefined : field);
+      setHasError(isValid ? undefined : errorType);
       setIsDirty(true);
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -127,15 +132,19 @@ export const DateSelector = ({
       year: tempValue.year || 0,
     })
     
-    const { isValid, field } = isDateValid(formattedDate, yearBoundaries);
-
-    if (dayjs(formattedDate, COLLECTABLE_DATE_FORMAT, true).isValid()) {
+    const { isValid, errorType } = isDateValid(formattedDate, yearBoundaries, tempValue);
+    const isDateInValidFormat = dayjs(formattedDate, COLLECTABLE_DATE_FORMAT, true).isValid();
+    
+    if (isDateInValidFormat) {
       setIsDirty(true);
     }
 
-    setHasError(isValid ? undefined : field);
-    onChange(isValid ? formattedDate : "");
+    setHasError(isValid ? undefined : errorType);
     setIsCalendarOpen(false);
+
+    if (isDateInValidFormat || isDirty) {
+      onChange(isValid ? formattedDate : "");
+    }
   };
 
   const handleOnKeyDown = (event: KeyboardEvent<HTMLInputElement>, index: number) => {
@@ -212,7 +221,7 @@ export const DateSelector = ({
     placeholder: placeholders?.[`${key}Format` as FormatPlaceholder] ?? "",
     labelInsideInput: true,
     value: internalValue[key] ?? '',
-    error: (hasError && [key, 'all'].includes(hasError)) && isDirty,
+    error: hasError && isDirty,
     type: "text", 
     inputMode: "numeric",
     ref: (el: HTMLInputElement) => { itemsRef.current[index] = el }, 
@@ -249,8 +258,18 @@ export const DateSelector = ({
       </div>
 
       {hasError && isDirty && (
-        <p className="p-p--small tc-red-500 w100 mt8">
-          {placeholders.error}
+        <p 
+          className={classNames(
+            hasError && isDirty ? 'd-block' : 'd-none',
+            "p-p--small tc-red-500 w100 mt8"
+          )}
+          data-testid="date-error-message"
+        >
+          {{
+            default: placeholders.error,
+            afterMax: placeholders.errorAfterMaxYear || `Please choose a date before ${yearBoundaries.max + 1}`,
+            beforeMin: placeholders.errorBeforeMinYear || `Please choose a date after ${yearBoundaries.min - 1}`,
+          }[hasError || "default"]}
         </p>
       )}
     </div>