@popsure/dirty-swan 0.62.3 → 0.63.0

package/src/lib/components/dateSelector/components/datepicker.scss

@@ -205,17 +205,20 @@
 .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
   position: relative;
 
-  background-color: $ds-purple-600;
-  color: #f0f8ff;
+  background-color: $ds-orange-500;
+  color: $ds-neutral-900;
 }
 
 .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):hover {
-  background-color: $ds-purple-700;
+  background-color: $ds-orange-500;
 }
 
 .DayPicker:not(.DayPicker--interactionDisabled)
   .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
-  background-color: $ds-purple-300;
+  background-color: white;
+  outline: 2px solid $ds-orange-600;
+  outline-offset: -2px;
+  border-radius: 50%;
 }
 
 .DayPickerInput {
@@ -241,7 +244,6 @@
   top: -112px;
   z-index: 100;
   background-color: white;
-  border: 1px solid #d2d2d8;
   box-shadow: 0px 0px 32px rgba(210, 210, 216, 0.25);
   border-radius: 16px;
   display: inline-block;
@@ -249,46 +251,24 @@
 
   @include p-size-mobile {
     position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    width: fit-content;
+    height: fit-content;
   }
 }
 
 .DayPicker-wrapper {
-  padding: 8px 24px 24px 24px;
+  padding: 0 16px 24px 16px;
 }
 
 .DayPicker-NavBar {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  position: absolute;
-  left: 0;
-}
-
-.DayPicker-NavButton {
-  position: unset;
-  margin-top: 0;
-  width: 48px;
-  height: 48px;
-}
-
-.DayPicker-NavButton:hover {
-  opacity: 1;
-  border-radius: 50%;
-  background-color: $ds-purple-300;
-}
-
-.DayPicker-NavButton--prev {
-  background-image: url('../../icon/assets/chevron-left.svg');
-  margin-left: 16px;
+  display: none;
 }
 
-.DayPicker-NavButton--next {
-  background-image: url('../../icon/assets/chevron-right.svg');
-  margin-right: 16px;
-}
 
 .DayPicker-Months {
   display: flex;
@@ -298,24 +278,25 @@
 }
 
 .DayPicker-Month {
-  display: table;
+  display: block;
   margin: 0;
-  border-spacing: 0;
-  border-collapse: collapse;
-
   user-select: none;
-
   font: 16px;
+  width: 308px;
 }
 
 .DayPicker-Caption {
-  margin: 0 0 24px 0;
+  display: block;
+  margin: 0 0 16px 0;
   padding: unset;
-  text-align: center;
 }
 
-.DayPicker-Weekdays {
-  display: table-header-group;
+.DayPicker-Weekdays,
+.DayPicker-Body {
+  display: table;
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
 }
 
 .DayPicker-WeekdaysRow {
@@ -335,17 +316,15 @@
   text-decoration: none;
 }
 
-.DayPicker-Body {
-  display: table-row-group;
-}
-
 .DayPicker-Week {
   display: table-row;
 }
 
 .DayPicker-Day {
   display: table-cell;
-  padding: 0.5em;
+  width: 44px;
+  height: 44px;
+  padding: 0;
   border-radius: 50%;
   vertical-align: middle;
   text-align: center;
@@ -354,42 +333,19 @@
   font: normal 16px Lato;
 }
 
-.DayPicker-WeekNumber {
-  display: table-cell;
-  padding: 0.5em;
-  min-width: 1em;
-  border-right: 1px solid #eaecec;
-  color: #8b9898;
-  vertical-align: middle;
-  text-align: right;
-  font-size: 0.75em;
-  cursor: pointer;
-}
-
 .DayPicker--interactionDisabled .DayPicker-Day {
   cursor: default;
 }
 
-.DayPicker-Footer {
-  padding-top: 0.5em;
-}
-
-.DayPicker-TodayButton {
-  border: none;
-  background-color: transparent;
-  background-image: none;
-  box-shadow: none;
-  color: #4a90e2;
-  font-size: 0.875em;
-  cursor: pointer;
-}
-
 .DayPicker-Day--outside {
   color: $ds-neutral-400;
   cursor: pointer;
 
   &:hover {
-    background: $ds-purple-300;
+    background: white;
+    outline: 2px solid $ds-orange-600;
+    outline-offset: -2px;
+    border-radius: 50%;
   }
 }
 

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

@@ -48,14 +48,18 @@ const story = {
     firstDayOfWeek: {
       description: `Index of the first day of the week (0 = Sunday, 1 = Monday, etc.)`,
     },
+    defaultDayPickerDate: {
+      description: 'Default date the calendar opens to when no value is set',
+      control: 'text',
+    },
   },
   args: {
     yearBoundaries: {
       min: 1920,
       max: 2001,
     },
-    displayCalendar: false,
-    value: '2000-12-12',
+    displayCalendar: true,
+    defaultDayPickerDate: '1990-01-01',
   },
   parameters: {
     componentSubtitle:
@@ -78,6 +82,7 @@ export const DateSelectorStory = {
     onChange,
     yearBoundaries,
     value,
+    defaultDayPickerDate,
   }: DateSelectorProps) => {
     const [newValue, setValue] = useState(value);
 
@@ -92,6 +97,7 @@ export const DateSelectorStory = {
         displayCalendar={displayCalendar}
         yearBoundaries={yearBoundaries}
         value={newValue}
+        defaultDayPickerDate={defaultDayPickerDate}
       />
     );
   },

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

@@ -42,6 +42,7 @@ export interface DateSelectorProps {
   };
   firstDayOfWeek?: number;
   inputProps?: (key: keyof CalendarDate) => Partial<DateSelectorInputProps>;
+  defaultDayPickerDate?: string;
 }
 
 const defaultPlaceholders: DateSelectorProps["placeholders"] = {
@@ -97,6 +98,7 @@ export const DateSelector = ({
   dayjsLocale,
   firstDayOfWeek = 0,
   inputProps,
+  defaultDayPickerDate,
 }: DateSelectorProps) => {
   const placeholders = {
     ...defaultPlaceholders,
@@ -254,6 +256,7 @@ export const DateSelector = ({
           setCalendarOpen={setIsCalendarOpen}
           value={value}
           onChange={onChange}
+          defaultDayPickerDate={defaultDayPickerDate}
         />
       </div>
 

package/src/lib/components/icon/assets/chevron-left.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15 19L7 12L15 5" stroke="#8E8CEE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 19L7 12L15 5" stroke="#26262E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/lib/components/icon/assets/chevron-right.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 19L16 12L8 5" stroke="#8E8CEE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 19L16 12L8 5" stroke="#26262E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/lib/components/table/Table.stories.tsx

@@ -143,6 +143,48 @@ const initialData: TableData = [
         { rating: { type: 'zap', value: 3 } },
         { rating: { type: 'star', value: 3 } },
       ],
+      [
+        { text: 'Rating', modalContent: 'info' },
+        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+        { rating: { type: 'zap', value: 3 } },
+        { rating: { type: 'star', value: 3 } },
+      ],
+      [
+        { text: 'Rating', modalContent: 'info' },
+        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+        { rating: { type: 'zap', value: 3 } },
+        { rating: { type: 'star', value: 3 } },
+      ],
+      [
+        { text: 'Rating', modalContent: 'info' },
+        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+        { rating: { type: 'zap', value: 3 } },
+        { rating: { type: 'star', value: 3 } },
+      ],
+      [
+        { text: 'Rating', modalContent: 'info' },
+        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+        { rating: { type: 'zap', value: 3 } },
+        { rating: { type: 'star', value: 3 } },
+      ],
+      [
+        { text: 'Rating', modalContent: 'info' },
+        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+        { rating: { type: 'zap', value: 3 } },
+        { rating: { type: 'star', value: 3 } },
+      ],
+      [
+        { text: 'Rating', modalContent: 'info' },
+        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+        { rating: { type: 'zap', value: 3 } },
+        { rating: { type: 'star', value: 3 } },
+      ],
+      [
+        { text: 'Rating', modalContent: 'info' },
+        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+        { rating: { type: 'zap', value: 3 } },
+        { rating: { type: 'star', value: 3 } },
+      ],
       [
         {
           type: 'CARD',
@@ -203,6 +245,14 @@ const story = {
     collapsibleSections: {
       subContent: 'This property allows to collapse the sections of the table.',
     },
+    scrollOnOpen: {
+      subContent:
+        'When enabled, the page scrolls to the top of a newly expanded section.',
+    },
+    scrollTopOffset: {
+      subContent:
+        'Offset in pixels from the top of the viewport when scrolling to an expanded section.',
+    },
     hideDetails: {
       subContent: 'This property allows to hide the details of the table.',
     },
@@ -244,7 +294,9 @@ const story = {
   },
   args: {
     tableData: initialData,
-    collapsibleSections: false,
+    collapsibleSections: true,
+    scrollOnOpen: true,
+    scrollTopOffset: 0,
     hideDetails: false,
     stickyHeaderTopOffset: 0,
     title: 'Title of the table',
@@ -255,12 +307,15 @@ const story = {
     },
     hideColumns: [],
     hideRows: [],
+    hideTableNavigation: true,
   },
 };
 
 export const TableStory = {
   render: ({
     collapsibleSections,
+    scrollOnOpen,
+    scrollTopOffset,
     tableData,
     hideColumns,
     hideDetails,
@@ -269,6 +324,7 @@ export const TableStory = {
     textOverrides,
     title,
     activeSection,
+    hideTableNavigation,
   }: TableProps) => {
     const [price, setPrice] = useState(999);
     return (
@@ -301,6 +357,8 @@ export const TableStory = {
             },
           }}
           collapsibleSections={collapsibleSections}
+          scrollOnOpen={scrollOnOpen}
+          scrollTopOffset={scrollTopOffset}
           tableData={tableData}
           hideColumns={hideColumns}
           hideDetails={hideDetails}
@@ -309,6 +367,7 @@ export const TableStory = {
           textOverrides={textOverrides}
           title={title}
           activeSection={activeSection}
+          hideTableNavigation={hideTableNavigation}
         />
       </div>
     );

package/src/lib/components/table/Table.tsx

@@ -39,11 +39,14 @@ export interface TableProps {
   modalContentRenderer?: (content: ReactNode) => ReactNode;
   onModalOpen?: ModalFunction;
   onSelectionChanged?: (index: number) => void;
+  scrollOnOpen?: boolean;
+  scrollTopOffset?: number;
   stickyHeaderTopOffset?: number;
   tableData: TableData;
   textOverrides?: TextOverrides;
   title: string;
   activeSection?: number;
+  hideTableNavigation?: boolean;
 }
 
 const defaultTextOverrides = {
@@ -62,11 +65,14 @@ const Table = ({
   modalContentRenderer,
   onModalOpen,
   onSelectionChanged,
+  scrollOnOpen,
+  scrollTopOffset = 0,
   stickyHeaderTopOffset = 0,
   tableData,
   textOverrides: definedTextOverrides,
   title,
   activeSection: externalActiveSection,
+  hideTableNavigation = false,
 }: TableProps) => {
   const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };
   const isMobile = useMediaQuery('BELOW_MOBILE');
@@ -74,6 +80,7 @@ const Table = ({
   const [shouldHideDetails, setShouldHideDetails] = useState(true);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const headerRef = useRef<HTMLDivElement | null>(null);
+  const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
   const columnsLength = tableData[0].rows[0].length;
 
   useScrollSync(headerRef, containerRef, !isMobile);
@@ -126,30 +133,33 @@ const Table = ({
             />
           )}
 
-          <TableControls
-            activeSection={activeSection}
-            columnsLength={columnsLength}
-            navigateTable={navigateTable}
-            stickyHeaderTopOffset={stickyHeaderTopOffset}
-          >
-            <TableCell
-              {...(isBaseCell(currentActiveSection)
-                ? {
-                    openModal: (body: ReactNode) =>
-                      handleOpenModal({
-                        body,
-                        title: currentActiveSection?.text,
-                      }),
-                  }
-                : {})}
-              {...activeCellProps}
-              imageComponent={imageComponent}
-              isNavigation
-            />
-          </TableControls>
+          {!hideTableNavigation && (
+            <TableControls
+              activeSection={activeSection}
+              columnsLength={columnsLength}
+              navigateTable={navigateTable}
+              stickyHeaderTopOffset={stickyHeaderTopOffset}
+            >
+              <TableCell
+                {...(isBaseCell(currentActiveSection)
+                  ? {
+                      openModal: (body: ReactNode) =>
+                        handleOpenModal({
+                          body,
+                          title: currentActiveSection?.text,
+                        }),
+                    }
+                  : {})}
+                {...activeCellProps}
+                imageComponent={imageComponent}
+                isNavigation
+              />
+            </TableControls>
+          )}
         </>
       ) : (
         <div
+          ref={stickyHeaderRef}
           aria-hidden
           className={styles.stickyHeader}
           style={{ top: `${stickyHeaderTopOffset}px` }}
@@ -175,6 +185,9 @@ const Table = ({
           title={title}
           className={className}
           collapsibleSections={collapsibleSections}
+          scrollOnOpen={scrollOnOpen}
+          scrollTopOffset={scrollTopOffset}
+          stickyHeaderRef={stickyHeaderRef}
           hideColumns={hideColumns}
           hideDetails={hideDetails}
           hideRows={hideRows}

package/src/lib/components/table/components/TableContents/Collapsible.tsx

@@ -4,9 +4,10 @@ import classNames from 'classnames';
 interface CollapsibleProps {
   children: ReactNode;
   isExpanded?: boolean;
+  onTransitionEnd?: () => void;
 }
 
-export const Collapsible = ({ children, isExpanded }: CollapsibleProps) => {
+export const Collapsible = ({ children, isExpanded, onTransitionEnd }: CollapsibleProps) => {
   const [height, setHeight] = useState<number | undefined>();
 
   const observerRef = useRef<ResizeObserver | null>(null);
@@ -45,6 +46,7 @@ export const Collapsible = ({ children, isExpanded }: CollapsibleProps) => {
       style={{
         maxHeight: isExpanded ? height : '0px',
       }}
+      onTransitionEnd={isExpanded ? onTransitionEnd : undefined}
     >
       {children}
     </div>

package/src/lib/components/table/components/TableContents/TableContents.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { MutableRefObject, useCallback, useRef, useState } from 'react';
 import { TableSection } from '../TableSection/TableSection';
 import { ChevronDownIcon, ChevronUpIcon } from '../../../icon';
 import { Card } from '../../../cards/card';
@@ -12,6 +12,9 @@ import { IconRenderer } from '../IconRenderer/IconRenderer';
 export interface TableContentsProps {
   className?: string;
   collapsibleSections?: boolean;
+  scrollOnOpen?: boolean;
+  scrollTopOffset?: number;
+  stickyHeaderRef?: MutableRefObject<HTMLDivElement | null>;
   tableData: TableData;
   hideColumns?: number[];
   hideDetails?: boolean;
@@ -27,6 +30,9 @@ export interface TableContentsProps {
 const TableContents = ({
   className,
   collapsibleSections,
+  scrollOnOpen,
+  scrollTopOffset = 0,
+  stickyHeaderRef,
   tableData,
   hideColumns = [],
   hideDetails,
@@ -39,14 +45,33 @@ const TableContents = ({
   imageComponent,
 }: TableContentsProps) => {
   const [isSectionOpen, setOpenSection] = useState<number | null>(null);
+  const lastToggledSection = useRef<number | null>(null);
+  const sectionRefs = useRef<Record<number, HTMLDivElement | null>>({});
   const firstHeadRow = tableData?.[0]?.rows?.[0];
   const tableWidth = isMobile ? `${firstHeadRow?.length * 50}%` : '';
   const handleToggleSection = (index: number) => {
+    lastToggledSection.current = isSectionOpen === index ? null : index;
     setOpenSection((currentSection) =>
       currentSection === index ? null : index
     );
   };
 
+  const handleScrollToSection = useCallback(
+    (index: number) => {
+      if (scrollOnOpen && lastToggledSection.current === index && sectionRefs.current[index]) {
+        const headerHeight =
+          stickyHeaderRef?.current?.getBoundingClientRect().height ?? 0;
+        const top =
+          sectionRefs.current[index]!.getBoundingClientRect().top +
+          window.scrollY -
+          scrollTopOffset -
+          headerHeight;
+        window.scrollTo({ top, behavior: 'smooth' });
+      }
+    },
+    [scrollOnOpen, scrollTopOffset, stickyHeaderRef]
+  );
+
   // Calculate global row offset for each section
   let globalRowOffset = 0;
 
@@ -69,7 +94,7 @@ const TableContents = ({
           .filter(localRowIndex => localRowIndex >= 0 && localRowIndex < rows.length);
 
         const result = (isFirstSection || isVisible) && (
-          <div key={index}>
+          <div key={index} ref={(el) => { sectionRefs.current[index] = el; }}>
             {section?.title && (
               <div className={styles.cardWrapper}>
                 <div className={classNames(styles.card, 'p0')}>
@@ -103,7 +128,10 @@ const TableContents = ({
               </div>
             )}
 
-            <Collapsible isExpanded={isExpanded}>
+            <Collapsible
+              isExpanded={isExpanded}
+              onTransitionEnd={() => handleScrollToSection(index)}
+            >
               <TableSection
                 className={classNames(className, 'mb24')}
                 tableCellRows={

package/src/lib/index.tsx

@@ -16,7 +16,7 @@ import {
 } from './components/informationBox';
 import IbanInput from './components/input/iban';
 import { CurrencyInput } from './components/input/currency';
-import { Badge } from './components/badge';
+import { Badge, BadgeProps } from './components/badge';
 import { Checkbox } from './components/input/checkbox';
 import { Radio } from './components/input/radio';
 import {
@@ -120,6 +120,7 @@ export {
 
 export type {
   AccordionProps,
+  BadgeProps,
   IllustrationKeys,
   InformationBoxProps,
   InputProps,

package/dist/cjs/lib/components/icon/icons/AccidentCar.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { IconWrapperProps } from '../IconWrapper';
-declare const _default: (props: IconWrapperProps) => import("react").FunctionComponentElement<IconWrapperProps>;
-export default _default;

package/dist/cjs/lib/components/icon/icons/BikeBicycle.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { IconWrapperProps } from '../IconWrapper';
-declare const _default: (props: IconWrapperProps) => import("react").FunctionComponentElement<IconWrapperProps>;
-export default _default;

package/dist/cjs/lib/components/icon/icons/Blog.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { IconWrapperProps } from '../IconWrapper';
-declare const _default: (props: IconWrapperProps) => import("react").FunctionComponentElement<IconWrapperProps>;
-export default _default;

package/dist/cjs/lib/components/icon/icons/Bone.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { IconWrapperProps } from '../IconWrapper';
-declare const _default: (props: IconWrapperProps) => import("react").FunctionComponentElement<IconWrapperProps>;
-export default _default;

package/dist/cjs/lib/components/icon/icons/Car.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { IconWrapperProps } from '../IconWrapper';
-declare const _default: (props: IconWrapperProps) => import("react").FunctionComponentElement<IconWrapperProps>;
-export default _default;

package/dist/cjs/lib/components/icon/icons/CarTraffic.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { IconWrapperProps } from '../IconWrapper';
-declare const _default: (props: IconWrapperProps) => import("react").FunctionComponentElement<IconWrapperProps>;
-export default _default;

package/dist/cjs/lib/components/icon/icons/ChainBikeBroken.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { IconWrapperProps } from '../IconWrapper';
-declare const _default: (props: IconWrapperProps) => import("react").FunctionComponentElement<IconWrapperProps>;
-export default _default;

package/dist/cjs/lib/components/icon/icons/CoinsMoney.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { IconWrapperProps } from '../IconWrapper';
-declare const _default: (props: IconWrapperProps) => import("react").FunctionComponentElement<IconWrapperProps>;
-export default _default;

package/dist/cjs/lib/components/icon/icons/DeathFuneral.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { IconWrapperProps } from '../IconWrapper';
-declare const _default: (props: IconWrapperProps) => import("react").FunctionComponentElement<IconWrapperProps>;
-export default _default;

package/dist/cjs/lib/components/icon/icons/DentalTreatmentTooth.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { IconWrapperProps } from '../IconWrapper';
-declare const _default: (props: IconWrapperProps) => import("react").FunctionComponentElement<IconWrapperProps>;
-export default _default;

package/dist/cjs/lib/components/icon/icons/Files.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { IconWrapperProps } from '../IconWrapper';
-declare const _default: (props: IconWrapperProps) => import("react").FunctionComponentElement<IconWrapperProps>;
-export default _default;

package/dist/cjs/lib/components/icon/icons/Fire.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { IconWrapperProps } from '../IconWrapper';
-declare const _default: (props: IconWrapperProps) => import("react").FunctionComponentElement<IconWrapperProps>;
-export default _default;

package/dist/cjs/lib/components/icon/icons/Glass.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { IconWrapperProps } from '../IconWrapper';
-declare const _default: (props: IconWrapperProps) => import("react").FunctionComponentElement<IconWrapperProps>;
-export default _default;