@popsure/dirty-swan 0.66.16 → 0.66.18

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 {