@popsure/dirty-swan 0.66.17 → 0.66.19

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

@@ -1,4 +1,5 @@
 @use '../../../../scss/public/colors' as colors;
+@use '../../../../scss/public/grid' as *;
 
 .container {
   width: var(--growContent, min-content);
@@ -21,17 +22,32 @@
 
 .headerButton {
   border: none;
-  background: colors.$ds-orange-50;
+  border-bottom: 1px solid colors.$ds-neutral-300;
+  background: white;
+  color: colors.$ds-neutral-900;
   column-gap: 16px;
   cursor: pointer;
   font-family: inherit;
   outline: none;
+  padding: 24px 0;
   position: relative;
   text-align: inherit;
-  transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
+  transition: color 0.3s ease-in-out, transform 0.2s ease-in-out;
+
+  @include p-size-tablet {
+    padding: 24px;
+  }
+
+  &[aria-expanded='true'] {
+    border-bottom-color: transparent;
+  }
 
   &:hover {
-    background: colors.$ds-orange-100;
+    color: colors.$ds-neutral-700;
+
+    :global(.p-h3) {
+      color: colors.$ds-neutral-700;
+    }
   }
 }
 

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

@@ -74,13 +74,14 @@ export const AccordionItem = ({
       className={`d-flex fd-column ${styles.container} ${className}`}
     >
       <button
+        aria-expanded={isOpen}
         className={`d-flex ai-center jc-between ${styles.headerButton} ${headerClassName}`}
         onClick={handleClick}
         type="button"
       >
         <div className={`d-flex ai-center ${styles.iconAndTextContainer}`}>
           {typeof label === 'string' ? (
-            <h4 className="p-h4">{label}</h4>
+            <h4 className="p-h3">{label}</h4>
           ) : (
             <>{label}</>
           )}

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

@@ -20,6 +20,7 @@ const Row = <T extends { id: number }>(props: RowProps<T>) => {
       key={rowId}
       className={classNames('d-flex w-100', {
         [styles.header]: isRowHeader,
+        [styles.row]: !isRowHeader,
       })}
     >
       <h4
@@ -47,7 +48,7 @@ const Row = <T extends { id: number }>(props: RowProps<T>) => {
 
           return (
             <div
-              className={classNames('ta-center', styles.cell, cellClassName)}
+              className={classNames('ta-left', styles.cell, cellClassName)}
               key={`${rowId}-${item.id}`}
             >
               {

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

@@ -3,9 +3,28 @@
 
 $cell-min-width: var(--cellWidth, 211px); // 195 + 16px
 
+.row {
+  border-bottom: 1px solid $ds-neutral-300;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
 .header {
   position: relative;
 
+  .cell {
+    align-items: flex-start;
+    justify-content: center;
+    text-align: center;
+
+    @include p-size-tablet {
+      justify-content: flex-start;
+      text-align: left;
+    }
+  }
+
   & > div {
     width: var(--tableWidth);
     max-width: 100vw;
@@ -24,7 +43,7 @@ $cell-min-width: var(--cellWidth, 211px); // 195 + 16px
 
 .cell {
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
 
   scroll-snap-align: end;
@@ -84,8 +103,6 @@ h4.cell {
 
   display: none;
 
-  line-height: 38px;
-
   @include p-size-tablet {
     display: flex;
   }
@@ -102,13 +119,11 @@ h4.cell {
   width: 50vw;
 
   @include p-size-tablet {
-    border-right: 1px solid $ds-neutral-50;
     flex: 1 0 288px;
   }
 }
 
 h4.addon {
-  border-right: none;
   max-width: calc(100vw - 64px);
   width: 100%;
 

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

@@ -2,11 +2,22 @@ import {
   ComparisonTable,
   ComparisonTableProps,
   TableButton,
+  TableInfoButton,
   TableRating,
   TableRowHeader,
   TableTrueFalse,
 } from '.';
 import { CardButton } from '../cards';
+import {
+  ActivityIcon,
+  DentalToothTeethIcon,
+  DependentsFamilyIcon,
+  EyeVisionIcon,
+  GlobeNetworkEarthIcon,
+  HeartIcon,
+  HospitalBuildingIcon,
+} from '../icon';
+import { MiniProgressBar } from '../table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar';
 
 const headers = [
   {
@@ -372,6 +383,365 @@ export const ComparisonTableStory = {
   name: 'ComparisonTable',
 };
 
+interface PlanData {
+  id: number;
+  name: string;
+  cashback: string | boolean;
+  dependents: string | boolean;
+  deductible: string | boolean;
+  generalDoctor: string;
+  specialist: string;
+  dentalCleanings: string | boolean;
+  dentalTreatments: string | boolean;
+  physiotherapy: string | boolean;
+  mentalHealth: string | boolean;
+  glasses: string | boolean;
+  laserEyeSurgery: string | boolean;
+  pregnancyCheckups: string | boolean;
+  childbirth: string | boolean;
+  hospitalAccommodation: string;
+  sickDayPayout: string | boolean;
+  emergencyAbroad: string | boolean;
+  repatriation: boolean;
+}
+
+const planData: PlanData[] = [
+  {
+    id: 1,
+    name: 'Standard',
+    cashback: 'Available',
+    dependents: 'Optional',
+    deductible: '€0 / €1,200 / €3,000',
+    generalDoctor: '100%',
+    specialist: '80%',
+    dentalCleanings: '80%',
+    dentalTreatments: false,
+    physiotherapy: '75%-90%',
+    mentalHealth: false,
+    glasses: false,
+    laserEyeSurgery: false,
+    pregnancyCheckups: '100%',
+    childbirth: 'Shared room',
+    hospitalAccommodation: 'Shared room',
+    sickDayPayout: '€2,000',
+    emergencyAbroad: 'Up to 6 weeks',
+    repatriation: false,
+  },
+  {
+    id: 2,
+    name: 'Plus',
+    cashback: 'Available',
+    dependents: 'Optional',
+    deductible: '€0 / €1,200 / €3,000',
+    generalDoctor: '100%',
+    specialist: '100%',
+    dentalCleanings: '90%',
+    dentalTreatments: '75%-90%',
+    physiotherapy: '80%-100%',
+    mentalHealth: '80%',
+    glasses: 'Up to €300',
+    laserEyeSurgery: false,
+    pregnancyCheckups: '100%',
+    childbirth: 'Twin room',
+    hospitalAccommodation: 'Twin room',
+    sickDayPayout: '€3,500',
+    emergencyAbroad: 'Up to 6 months',
+    repatriation: true,
+  },
+  {
+    id: 3,
+    name: 'Premium',
+    cashback: 'Available',
+    dependents: 'Optional',
+    deductible: '€0 / €1,200 / €3,000',
+    generalDoctor: '100%',
+    specialist: '100%',
+    dentalCleanings: '100%',
+    dentalTreatments: '80%-100%',
+    physiotherapy: '100%',
+    mentalHealth: '100%',
+    glasses: 'Up to €500',
+    laserEyeSurgery: 'Up to €1,000',
+    pregnancyCheckups: '100%',
+    childbirth: 'Private room',
+    hospitalAccommodation: 'Private room',
+    sickDayPayout: '€5,000',
+    emergencyAbroad: 'Unlimited',
+    repatriation: true,
+  },
+  {
+    id: 4,
+    name: 'Public',
+    cashback: false,
+    dependents: true,
+    deductible: false,
+    generalDoctor: '100%',
+    specialist: 'Referral needed',
+    dentalCleanings: false,
+    dentalTreatments: false,
+    physiotherapy: 'Copay applies',
+    mentalHealth: 'Limited sessions',
+    glasses: false,
+    laserEyeSurgery: false,
+    pregnancyCheckups: '100%',
+    childbirth: 'Shared room',
+    hospitalAccommodation: 'Shared room',
+    sickDayPayout: '70% of income',
+    emergencyAbroad: 'EU only',
+    repatriation: false,
+  },
+];
+
+const progressLookup: Record<string, number> = {
+  '30%': 1,
+  '50%': 2,
+  '70%': 3,
+  '75%': 4,
+  '80%': 4,
+  '90%': 4,
+  '75%-90%': 4,
+  '75%-100%': 4,
+  '80%-100%': 4,
+  '100%': 5,
+};
+
+const renderStringWithProgress = (value: string) => (
+  <div className="d-flex fd-column">
+    {value}
+    {progressLookup[value] !== undefined && (
+      <MiniProgressBar nFilledBars={progressLookup[value]} />
+    )}
+  </div>
+);
+
+const renderStringOrBoolean = (value: string | boolean) =>
+  typeof value === 'string' ? (
+    renderStringWithProgress(value)
+  ) : (
+    <TableTrueFalse value={value} />
+  );
+
+const renderPlanName = (name: string) => <p className="p-h3">{name}</p>;
+
+const renderWithInfo = (value: string | boolean) => (
+  <div className="d-flex ai-center gap8">
+    {typeof value === 'string' ? value : <TableTrueFalse value={value} />}
+    <TableInfoButton onClick={() => {}} />
+  </div>
+);
+
+const renderDeductible = (value: string | boolean) =>
+  typeof value === 'string' ? (
+    <div>
+      <p className="p-p">{value}</p>
+      <p className="p-p tc-neutral-500">Adjustable</p>
+    </div>
+  ) : (
+    <TableTrueFalse value={value} />
+  );
+
+const sectionLabel = (icon: React.ReactNode, title: string) => (
+  <p className="d-flex ai-center p-h3 c-gap8">
+    {icon} {title}
+  </p>
+);
+
+const privateHealthHeaders: Array<
+  ComparisonTableProps<PlanData>['headers'][number]
+> = [
+  {
+    id: 0,
+    label: '',
+    default: true,
+    cells: [
+      {
+        key: 'name',
+        label: 'Our plans',
+        render: renderPlanName,
+      },
+      {
+        key: 'cashback',
+        label: 'Cashback',
+        render: renderStringOrBoolean,
+      },
+      {
+        key: 'dependents',
+        label: 'Dependents coverage',
+        render: renderWithInfo,
+      },
+      {
+        key: 'deductible',
+        label: <TableRowHeader label="Deductible" onClickInfo={() => {}} />,
+        render: renderDeductible,
+      },
+    ],
+  },
+  {
+    id: 1,
+    label: sectionLabel(<HeartIcon size={20} noMargin />, 'General'),
+    cells: [
+      {
+        key: 'generalDoctor',
+        label: (
+          <TableRowHeader
+            label="General doctors' visits"
+            onClickInfo={() => {}}
+          />
+        ),
+        render: renderStringOrBoolean,
+      },
+      {
+        key: 'specialist',
+        label: <TableRowHeader label="Specialists" onClickInfo={() => {}} />,
+        render: renderStringOrBoolean,
+      },
+    ],
+  },
+  {
+    id: 2,
+    label: sectionLabel(<DentalToothTeethIcon size={20} noMargin />, 'Dental'),
+    cells: [
+      {
+        key: 'dentalCleanings',
+        label: <TableRowHeader label="Dental cleanings" />,
+        render: renderStringOrBoolean,
+      },
+      {
+        key: 'dentalTreatments',
+        label: (
+          <TableRowHeader label="Dental treatments" onClickInfo={() => {}} />
+        ),
+        render: renderStringOrBoolean,
+      },
+    ],
+  },
+  {
+    id: 3,
+    label: sectionLabel(
+      <ActivityIcon size={20} noMargin />,
+      'Treatment and therapies'
+    ),
+    cells: [
+      {
+        key: 'physiotherapy',
+        label: <TableRowHeader label="Physiotherapy" onClickInfo={() => {}} />,
+        render: renderStringOrBoolean,
+      },
+      {
+        key: 'mentalHealth',
+        label: <TableRowHeader label="Mental health therapy" />,
+        render: renderStringOrBoolean,
+      },
+    ],
+  },
+  {
+    id: 4,
+    label: sectionLabel(<EyeVisionIcon size={20} noMargin />, 'Vision'),
+    cells: [
+      {
+        key: 'glasses',
+        label: (
+          <TableRowHeader
+            label="Glasses & contact lenses"
+            onClickInfo={() => {}}
+          />
+        ),
+        render: renderStringOrBoolean,
+      },
+      {
+        key: 'laserEyeSurgery',
+        label: <TableRowHeader label="Laser eye surgery" />,
+        render: renderStringOrBoolean,
+      },
+    ],
+  },
+  {
+    id: 5,
+    label: sectionLabel(
+      <DependentsFamilyIcon size={20} noMargin />,
+      'Pregnancy and childbirth'
+    ),
+    cells: [
+      {
+        key: 'pregnancyCheckups',
+        label: <TableRowHeader label="Pregnancy check-ups" />,
+        render: renderStringOrBoolean,
+      },
+      {
+        key: 'childbirth',
+        label: <TableRowHeader label="Childbirth" onClickInfo={() => {}} />,
+        render: renderStringOrBoolean,
+      },
+    ],
+  },
+  {
+    id: 6,
+    label: sectionLabel(
+      <HospitalBuildingIcon size={20} noMargin />,
+      'Hospital'
+    ),
+    cells: [
+      {
+        key: 'hospitalAccommodation',
+        label: <TableRowHeader label="Accommodation" onClickInfo={() => {}} />,
+        render: renderStringOrBoolean,
+      },
+      {
+        key: 'sickDayPayout',
+        label: (
+          <TableRowHeader
+            label="Sick day payout"
+            subtitle="After 6 weeks of illness"
+          />
+        ),
+        render: renderStringOrBoolean,
+      },
+    ],
+  },
+  {
+    id: 7,
+    label: sectionLabel(
+      <GlobeNetworkEarthIcon size={20} noMargin />,
+      'Outside of Germany'
+    ),
+    cells: [
+      {
+        key: 'emergencyAbroad',
+        label: (
+          <TableRowHeader
+            label="Emergency care abroad"
+            onClickInfo={() => {}}
+          />
+        ),
+        render: renderStringOrBoolean,
+      },
+      {
+        key: 'repatriation',
+        label: <TableRowHeader label="Medical repatriation" />,
+        render: renderStringOrBoolean,
+      },
+    ],
+  },
+];
+
+export const PrivateHealthQuoteWidget = {
+  render: () => (
+    <div className="bg-white">
+      <ComparisonTable
+        data={planData}
+        headers={privateHealthHeaders}
+        collapsibleSections
+        hideScrollBarsMobile
+        hideDetails
+        showDetailsCaption="What's covered?"
+        hideDetailsCaption="Hide details"
+      />
+    </div>
+  ),
+
+  name: 'Private Health - Quote Widget',
+};
+
 export const HeaderType = () => (
   <pre>
     {`export interface Header<T> {

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

@@ -124,7 +124,7 @@ const ComparisonTable = <T extends { id: number }>(
     <ScrollSync onSync={headerRefCallbackRef}>
       <div
         style={cssVariablesStyle}
-        className={classNames({
+        className={classNames(baseStyles.card, {
           [baseStyles.noScrollBars]: hideScrollBars,
           [baseStyles.noScrollBarsMobile]: hideScrollBarsMobile,
         })}
@@ -191,11 +191,9 @@ const ComparisonTable = <T extends { id: number }>(
                     {headerGroup.label && collapsibleSections ? (
                       <AccordionItem
                         className={classNames(
-                          baseStyles['collapsible-section'],
                           classNameOverrides?.collapsibleSection
                         )}
                         label={headerGroup.label}
-                        headerClassName="p24 br8"
                         isOpen={openSectionId === headerGroup.id}
                         onToggle={() =>
                           setOpenSectionId((prev) =>
@@ -213,7 +211,6 @@ const ComparisonTable = <T extends { id: number }>(
                           <div
                             className={classNames(
                               baseStyles.container,
-                              'pb16',
                               classNameOverrides?.container,
                               {
                                 [baseStyles.noScrollBars]: hideScrollBars,
@@ -244,7 +241,6 @@ const ComparisonTable = <T extends { id: number }>(
                           <div
                             className={classNames(
                               baseStyles.container,
-                              'pb16',
                               classNameOverrides?.container,
                               {
                                 [baseStyles.noScrollBars]: hideScrollBars,

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

@@ -1,6 +1,16 @@
 @use "../../scss/public/grid" as *;
 @use "../../scss/public/colors" as *;
 
+.card {
+  border: 1px solid $ds-neutral-200;
+  border-radius: 12px;
+  padding: 24px;
+
+  section:last-of-type > button {
+    border-bottom: none;
+  }
+}
+
 .container {
   width: 100%;
   overflow-x: auto;
@@ -39,10 +49,6 @@
   }
 }
 
-.collapsible-section {
-  margin-top: 6px;
-}
-
 .section + .section {
   margin-top: 48px;
 
@@ -82,10 +88,6 @@
 
   top: 0;
   left: 0;
-
-  @include p-size-tablet {
-    border-right: 1px solid $ds-neutral-50;
-  }
 }
 
 .header {

package/src/lib/components/table/Table.module.scss

@@ -6,7 +6,7 @@
   position: relative;
   border: 1px solid $ds-neutral-200;
   border-radius: 12px;
-  padding: 24px 24px 0;
+  padding: 24px;
 }
 
 .container {

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

@@ -581,7 +581,6 @@ export const SinglePlanQuoteWebsite = {
         tableData={singlePlanWebsiteData}
         title="Single plan quote website"
         collapsibleSections
-        hideTableNavigation
       />
     </div>
   ),
@@ -612,8 +611,8 @@ const twoPlanWebsiteData: TableData = [
           text: 'Monthly price',
           description: 'Label description with additional pricing context',
         },
-        { text: '~€14-35', fontVariant: 'PRICE' },
-        { text: '~€50-91', fontVariant: 'PRICE' },
+        { text: '~€14-35', fontVariant: 'PRICE', modalContent: 'Price info' },
+        { text: '~€50-91', fontVariant: 'PRICE', modalContent: 'Price info' },
       ],
       [
         {
@@ -727,7 +726,6 @@ export const TwoPlanQuoteWebsite = {
         tableData={twoPlanWebsiteData}
         title="Two plan quote website"
         collapsibleSections
-        hideTableNavigation
       />
     </div>
   ),
@@ -767,9 +765,9 @@ const threePlanWebsiteData: TableData = [
       ],
       [
         { text: 'Monthly price' },
-        { text: '€–', fontVariant: 'PRICE' },
-        { text: '€–', fontVariant: 'PRICE' },
-        { text: '€–', fontVariant: 'PRICE' },
+        { text: '€–', fontVariant: 'PRICE', modalContent: 'Price info' },
+        { text: '€–', fontVariant: 'PRICE', modalContent: 'Price info' },
+        { text: '€–', fontVariant: 'PRICE', modalContent: 'Price info' },
       ],
       [
         { text: 'Label with star rating' },
@@ -849,7 +847,6 @@ export const ThreePlanQuoteWebsite = {
         tableData={threePlanWebsiteData}
         title="Three plan quote website"
         collapsibleSections
-        hideTableNavigation
       />
     </div>
   ),

package/src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx

@@ -127,7 +127,7 @@ export const BaseCell = ({
             </span>
           )}
 
-          <div className="d-inline">
+          <div className="d-flex ai-center">
             {text && fontVariant === 'NORMAL' && (
               <div className={classNames(
                 "p-p d-inline",

package/src/lib/components/table/components/TableCell/CTACell/CTACell.tsx

@@ -13,6 +13,7 @@ export type CTACellProps = {
   buttonCaption?: ReactNode;
   grey?: boolean;
   narrow?: boolean;
+  centered?: boolean;
   href: string;
   className?: string;
   dataTestId?: string;
@@ -26,6 +27,7 @@ export const CTACell = ({
   icon,
   grey,
   narrow,
+  centered,
   href,
   buttonCaption,
   imageComponent,
@@ -40,7 +42,9 @@ export const CTACell = ({
 
   return (
     <div
-      className={classNames(className, "ta-left")}
+      className={classNames(className, 'ta-left', {
+        'd-flex fd-column ai-center': centered,
+      })}
       data-cy={dataCy}
       data-testid={dataTestId}
     >

package/src/lib/components/table/components/TableCell/TableCell.module.scss

@@ -23,6 +23,10 @@
   }
 }
 
+.navigationTitle {
+  padding-left: 0;
+}
+
 .headerCell {
   vertical-align: top;
 }