odaptos_design_system 2.0.5 → 2.0.7

package/src/Molecules/FeaturesTable/FeaturesTable.module.scss

@@ -1,212 +1,212 @@
-.featuresTable {
-  /* Elevation (new)/2dp (sm) */
-  box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.08),
-    0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-  border-radius: 0.25rem;
-
-  .tableHeader {
-    display: flex;
-    padding: 0.5rem;
-    background-color: #f9fafc;
-    border-radius: 0.25rem 0.25rem 0rem 0rem;
-    border: 1px solid var(--Color-Neutral-Clear-Shades-300, #d5d5d6);
-
-    .headerTitle {
-      flex: 1;
-    }
-
-    .headerCell {
-      flex: 1;
-      padding: 0.5rem;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 0.5rem;
-
-      .priceContainer {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 0.5rem;
-      }
-    }
-  }
-
-  .tableBody {
-    .featureGroup {
-      .sectionTitleRow {
-        display: flex;
-        align-items: center;
-        background-color: #f9fafc;
-        height: 4rem;
-        padding: 0.5rem 1rem;
-        border-right: 1px solid #d5d5d6;
-        border-bottom: 1px solid #d5d5d6;
-        border-left: 1px solid #d5d5d6;
-      }
-
-      .featureRow {
-        display: flex;
-        align-items: center;
-        height: 4rem;
-        padding: 0.5rem;
-        border-right: 1px solid #d5d5d6;
-        border-bottom: 1px solid #d5d5d6;
-        border-left: 1px solid #d5d5d6;
-        background-color: #fff;
-
-        .featureName {
-          display: flex;
-          align-items: center;
-          flex: 1;
-          gap: 0.5rem;
-          padding: 0.5rem;
-          .overflow2Lines {
-            display: -webkit-box;
-            max-width: 95%;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
-        }
-
-        .rowCell {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          flex: 1;
-          gap: 0.5rem;
-          padding: 0.5rem;
-
-          .checkedIcon {
-            width: 1.5rem;
-            height: 1.5rem;
-            fill: #5cbb65;
-          }
-        }
-      }
-
-      .lastRow {
-        border-radius: 0 0 0.25rem 0.25rem;
-      }
-    }
-  }
-}
-
-//Responsive design for screens under 1440px
-@media (max-width: 1439px) {
-  .featuresTable {
-    .tableHeader {
-      .headerCell {
-        p {
-          font-size: 0.75rem;
-        }
-      }
-    }
-
-    .tableBody {
-      .featureGroup {
-        .featureRow {
-          .featureName {
-            p {
-              font-size: 0.75rem;
-            }
-          }
-
-          .rowCell {
-            flex-direction: column;
-            gap: 0;
-
-            p {
-              font-size: 0.75rem;
-              text-align: center;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-//Responsive design for screens under 1024px
-@media (max-width: 1024px) {
-  .featuresTable {
-    .tableHeader {
-      flex-wrap: wrap;
-
-      .headerTitle {
-        width: 100%;
-        flex: unset;
-
-        h2 {
-          text-align: center;
-        }
-      }
-
-      .headerCell {
-        p {
-          font-size: 0.65rem;
-        }
-      }
-    }
-
-    .tableBody {
-      .featureGroup {
-        .featureRow {
-          .featureName {
-            p {
-              font-size: 0.65rem;
-            }
-          }
-
-          .rowCell {
-            flex-direction: column;
-            gap: 0;
-
-            p {
-              font-size: 0.65rem;
-              text-align: center;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-//Responsive design for screens under 768px
-@media (max-width: 767px) {
-  .featuresTable {
-    .tableHeader {
-      .headerCell {
-        p {
-          font-size: 0.55rem;
-        }
-      }
-    }
-
-    .tableBody {
-      .featureGroup {
-        .featureRow {
-          .featureName {
-            p {
-              font-size: 0.5rem;
-            }
-          }
-
-          .rowCell {
-            flex-direction: column;
-            gap: 0;
-
-            p {
-              font-size: 0.5rem;
-              text-align: center;
-            }
-          }
-        }
-      }
-    }
-  }
-}
+.featuresTable {
+  /* Elevation (new)/2dp (sm) */
+  box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.08),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+
+  .tableHeader {
+    display: flex;
+    padding: 0.5rem;
+    background-color: #f9fafc;
+    border-radius: 0.25rem 0.25rem 0rem 0rem;
+    border: 1px solid var(--Color-Neutral-Clear-Shades-300, #d5d5d6);
+
+    .headerTitle {
+      flex: 1;
+    }
+
+    .headerCell {
+      flex: 1;
+      padding: 0.5rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+
+      .priceContainer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+      }
+    }
+  }
+
+  .tableBody {
+    .featureGroup {
+      .sectionTitleRow {
+        display: flex;
+        align-items: center;
+        background-color: #f9fafc;
+        height: 4rem;
+        padding: 0.5rem 1rem;
+        border-right: 1px solid #d5d5d6;
+        border-bottom: 1px solid #d5d5d6;
+        border-left: 1px solid #d5d5d6;
+      }
+
+      .featureRow {
+        display: flex;
+        align-items: center;
+        height: 4rem;
+        padding: 0.5rem;
+        border-right: 1px solid #d5d5d6;
+        border-bottom: 1px solid #d5d5d6;
+        border-left: 1px solid #d5d5d6;
+        background-color: #fff;
+
+        .featureName {
+          display: flex;
+          align-items: center;
+          flex: 1;
+          gap: 0.5rem;
+          padding: 0.5rem;
+          .overflow2Lines {
+            display: -webkit-box;
+            max-width: 95%;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+
+        .rowCell {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex: 1;
+          gap: 0.5rem;
+          padding: 0.5rem;
+
+          .checkedIcon {
+            width: 1.5rem;
+            height: 1.5rem;
+            fill: #5cbb65;
+          }
+        }
+      }
+
+      .lastRow {
+        border-radius: 0 0 0.25rem 0.25rem;
+      }
+    }
+  }
+}
+
+//Responsive design for screens under 1440px
+@media (max-width: 1439px) {
+  .featuresTable {
+    .tableHeader {
+      .headerCell {
+        p {
+          font-size: 0.75rem;
+        }
+      }
+    }
+
+    .tableBody {
+      .featureGroup {
+        .featureRow {
+          .featureName {
+            p {
+              font-size: 0.75rem;
+            }
+          }
+
+          .rowCell {
+            flex-direction: column;
+            gap: 0;
+
+            p {
+              font-size: 0.75rem;
+              text-align: center;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+//Responsive design for screens under 1024px
+@media (max-width: 1024px) {
+  .featuresTable {
+    .tableHeader {
+      flex-wrap: wrap;
+
+      .headerTitle {
+        width: 100%;
+        flex: unset;
+
+        h2 {
+          text-align: center;
+        }
+      }
+
+      .headerCell {
+        p {
+          font-size: 0.65rem;
+        }
+      }
+    }
+
+    .tableBody {
+      .featureGroup {
+        .featureRow {
+          .featureName {
+            p {
+              font-size: 0.65rem;
+            }
+          }
+
+          .rowCell {
+            flex-direction: column;
+            gap: 0;
+
+            p {
+              font-size: 0.65rem;
+              text-align: center;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+//Responsive design for screens under 768px
+@media (max-width: 767px) {
+  .featuresTable {
+    .tableHeader {
+      .headerCell {
+        p {
+          font-size: 0.55rem;
+        }
+      }
+    }
+
+    .tableBody {
+      .featureGroup {
+        .featureRow {
+          .featureName {
+            p {
+              font-size: 0.5rem;
+            }
+          }
+
+          .rowCell {
+            flex-direction: column;
+            gap: 0;
+
+            p {
+              font-size: 0.5rem;
+              text-align: center;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/Molecules/FeaturesTable/FeaturesTable.tsx

@@ -1,35 +1,35 @@
-import React from 'react';
-import styles from './FeaturesTable.module.scss';
-import TableHeader from './components/TableHeader/TableHeader';
-import TableBody from './components/TableBody/TableBody';
-
-interface FeaturesTableProps {
-  pricingCards: any;
-  featuresSections: any;
-  cmsContent: any;
-  sectionsTitleMapping: any;
-  isYearlyOrMonthly: 'yearly' | 'monthly';
-  actionsArray: any[];
-}
-
-export const FeaturesTable = ({
-  pricingCards,
-  cmsContent,
-  featuresSections,
-  sectionsTitleMapping,
-  actionsArray,
-}: FeaturesTableProps) => {
-  return (
-    <div className={styles.featuresTable}>
-      <TableHeader
-        plans={pricingCards}
-        cmsContent={cmsContent}
-        actionsArray={actionsArray}
-      />
-      <TableBody
-        featuresSections={featuresSections}
-        sectionsTitleMapping={sectionsTitleMapping}
-      />
-    </div>
-  );
-};
+import React from 'react';
+import styles from './FeaturesTable.module.scss';
+import TableHeader from './components/TableHeader/TableHeader';
+import TableBody from './components/TableBody/TableBody';
+
+interface FeaturesTableProps {
+  pricingCards: any;
+  featuresSections: any;
+  cmsContent: any;
+  sectionsTitleMapping: any;
+  isYearlyOrMonthly: 'yearly' | 'monthly';
+  actionsArray: any[];
+}
+
+export const FeaturesTable = ({
+  pricingCards,
+  cmsContent,
+  featuresSections,
+  sectionsTitleMapping,
+  actionsArray,
+}: FeaturesTableProps) => {
+  return (
+    <div className={styles.featuresTable}>
+      <TableHeader
+        plans={pricingCards}
+        cmsContent={cmsContent}
+        actionsArray={actionsArray}
+      />
+      <TableBody
+        featuresSections={featuresSections}
+        sectionsTitleMapping={sectionsTitleMapping}
+      />
+    </div>
+  );
+};

package/src/Molecules/FeaturesTable/components/TableBody/TableBody.tsx

@@ -1,54 +1,54 @@
-import React from 'react';
-import styles from '../../FeaturesTable.module.scss';
-
-import { FeatureGroup } from './components/FeatureGroup';
-
-interface TableBodyProps {
-  featuresSections: object;
-  sectionsTitleMapping: any[];
-}
-
-type SectionTitle =
-  | 'CoreFeatures'
-  | 'AnalysisFeatures'
-  | 'AIFeatures'
-  | 'UserPanelFeatures'
-  | 'CustomizationFeatures'
-  | 'ReportingFeatures'
-  | 'SharingFeatures'
-  | 'SecutiryFeatures'
-  | 'SupportFeatures'
-  | 'AdvicingFeatures'
-  | 'ExtraFeatures';
-
-const TableBody: React.FC<TableBodyProps> = ({
-  featuresSections,
-  sectionsTitleMapping,
-}: {
-  featuresSections: { [key: string]: any };
-  sectionsTitleMapping: any;
-}) => {
-  const getTitleById = (sectionTitle: string) => {
-    for (let i = 0; i < sectionsTitleMapping.length; i++) {
-      if (sectionsTitleMapping[i].Id === sectionTitle) {
-        return sectionsTitleMapping[i].Title;
-      }
-    }
-    return null; // Return null if no matching Id is found
-  };
-
-  return (
-    <div className={styles.tableBody}>
-      {Object.keys(featuresSections).map((sectionTitle, index) => (
-        <FeatureGroup
-          key={index}
-          sectionTitle={getTitleById(sectionTitle as SectionTitle)}
-          featureSection={featuresSections[sectionTitle]}
-          isLastGroup={index === Object.keys(featuresSections).length - 1}
-        />
-      ))}
-    </div>
-  );
-};
-
-export default TableBody;
+import React from 'react';
+import styles from '../../FeaturesTable.module.scss';
+
+import { FeatureGroup } from './components/FeatureGroup';
+
+interface TableBodyProps {
+  featuresSections: object;
+  sectionsTitleMapping: any[];
+}
+
+type SectionTitle =
+  | 'CoreFeatures'
+  | 'AnalysisFeatures'
+  | 'AIFeatures'
+  | 'UserPanelFeatures'
+  | 'CustomizationFeatures'
+  | 'ReportingFeatures'
+  | 'SharingFeatures'
+  | 'SecutiryFeatures'
+  | 'SupportFeatures'
+  | 'AdvicingFeatures'
+  | 'ExtraFeatures';
+
+const TableBody: React.FC<TableBodyProps> = ({
+  featuresSections,
+  sectionsTitleMapping,
+}: {
+  featuresSections: { [key: string]: any };
+  sectionsTitleMapping: any;
+}) => {
+  const getTitleById = (sectionTitle: string) => {
+    for (let i = 0; i < sectionsTitleMapping.length; i++) {
+      if (sectionsTitleMapping[i].Id === sectionTitle) {
+        return sectionsTitleMapping[i].Title;
+      }
+    }
+    return null; // Return null if no matching Id is found
+  };
+
+  return (
+    <div className={styles.tableBody}>
+      {Object.keys(featuresSections).map((sectionTitle, index) => (
+        <FeatureGroup
+          key={index}
+          sectionTitle={getTitleById(sectionTitle as SectionTitle)}
+          featureSection={featuresSections[sectionTitle]}
+          isLastGroup={index === Object.keys(featuresSections).length - 1}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default TableBody;

package/src/Molecules/FeaturesTable/components/TableBody/components/FeatureGroup.tsx

@@ -1,36 +1,36 @@
-import React from 'react';
-import styles from '../../../FeaturesTable.module.scss';
-
-import { FeatureRow } from './FeatureRow';
-import { SectionTitleRow } from './SectionTitleRow';
-
-interface FeatureGroupProps {
-  sectionTitle: string;
-  featureSection: any[];
-  isLastGroup?: boolean;
-}
-
-export const FeatureGroup = ({
-  sectionTitle,
-  featureSection,
-  isLastGroup,
-}: FeatureGroupProps) => {
-  return (
-    <div className={styles.featureGroup}>
-      {featureSection.filter((feature) => feature.isActive).length > 0 && (
-        <SectionTitleRow sectionName={sectionTitle} />
-      )}
-      {featureSection.map((feature, index) => {
-        if (feature.isActive === false || feature.isActive === undefined)
-          return null;
-        return feature.isActive === false ? null : (
-          <FeatureRow
-            key={index}
-            feature={feature}
-            isLastOfTable={isLastGroup && index === featureSection.length - 1}
-          />
-        );
-      })}
-    </div>
-  );
-};
+import React from 'react';
+import styles from '../../../FeaturesTable.module.scss';
+
+import { FeatureRow } from './FeatureRow';
+import { SectionTitleRow } from './SectionTitleRow';
+
+interface FeatureGroupProps {
+  sectionTitle: string;
+  featureSection: any[];
+  isLastGroup?: boolean;
+}
+
+export const FeatureGroup = ({
+  sectionTitle,
+  featureSection,
+  isLastGroup,
+}: FeatureGroupProps) => {
+  return (
+    <div className={styles.featureGroup}>
+      {featureSection.filter((feature) => feature.isActive).length > 0 && (
+        <SectionTitleRow sectionName={sectionTitle} />
+      )}
+      {featureSection.map((feature, index) => {
+        if (feature.isActive === false || feature.isActive === undefined)
+          return null;
+        return feature.isActive === false ? null : (
+          <FeatureRow
+            key={index}
+            feature={feature}
+            isLastOfTable={isLastGroup && index === featureSection.length - 1}
+          />
+        );
+      })}
+    </div>
+  );
+};