odaptos_design_system 2.0.5 → 2.0.6

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

@@ -1,64 +1,64 @@
-import React from 'react';
-import {
-  Text,
-  IconButton,
-  QuestionCircledIcon,
-  Tooltip,
-} from '../../../../../';
-import styles from '../../../FeaturesTable.module.scss';
-import { RowCell } from './RowCell';
-
-type Tier = 'Tier1' | 'Tier2' | 'Tier3' | 'Tier4';
-
-interface FeatureRowProps {
-  feature: any;
-  isLastOfTable?: boolean;
-}
-
-export const FeatureRow = ({
-  feature,
-  isLastOfTable = false,
-}: FeatureRowProps) => {
-  const tierList: Tier[] = ['Tier1', 'Tier2', 'Tier3', 'Tier4'];
-
-  return (
-    <div
-      className={`${styles.featureRow} ${isLastOfTable ? styles.lastRow : ''}`}
-    >
-      <div className={styles.featureName}>
-        <Text
-          size="sm"
-          weight="regular"
-          text={feature.Name}
-          className={styles.overflow2Lines}
-        />
-        {feature.TooltipDescription && (
-          <Tooltip
-            tooltipDescription={feature.TooltipDescription}
-            placement="right"
-          >
-            <IconButton
-              icon={<QuestionCircledIcon />}
-              variant="tertiary"
-              size="xxs"
-              className={styles.tooltipButton}
-            />
-          </Tooltip>
-        )}
-      </div>
-      {tierList.map((tier, index) => {
-        const tierPrefix = feature[tier] ? feature[tier].Prefix : undefined;
-        const tierValue = feature[tier] ? feature[tier].Value : undefined;
-        const tierSufix = feature[tier] ? feature[tier].Sufix : undefined;
-        return (
-          <RowCell
-            key={`${feature.Name}-${index}`}
-            prefix={tierPrefix}
-            value={tierValue}
-            sufix={tierSufix}
-          />
-        );
-      })}
-    </div>
-  );
-};
+import React from 'react';
+import {
+  Text,
+  IconButton,
+  QuestionCircledIcon,
+  Tooltip,
+} from '../../../../../';
+import styles from '../../../FeaturesTable.module.scss';
+import { RowCell } from './RowCell';
+
+type Tier = 'Tier1' | 'Tier2' | 'Tier3' | 'Tier4';
+
+interface FeatureRowProps {
+  feature: any;
+  isLastOfTable?: boolean;
+}
+
+export const FeatureRow = ({
+  feature,
+  isLastOfTable = false,
+}: FeatureRowProps) => {
+  const tierList: Tier[] = ['Tier1', 'Tier2', 'Tier3', 'Tier4'];
+
+  return (
+    <div
+      className={`${styles.featureRow} ${isLastOfTable ? styles.lastRow : ''}`}
+    >
+      <div className={styles.featureName}>
+        <Text
+          size="sm"
+          weight="regular"
+          text={feature.Name}
+          className={styles.overflow2Lines}
+        />
+        {feature.TooltipDescription && (
+          <Tooltip
+            tooltipDescription={feature.TooltipDescription}
+            placement="right"
+          >
+            <IconButton
+              icon={<QuestionCircledIcon />}
+              variant="tertiary"
+              size="xxs"
+              className={styles.tooltipButton}
+            />
+          </Tooltip>
+        )}
+      </div>
+      {tierList.map((tier, index) => {
+        const tierPrefix = feature[tier] ? feature[tier].Prefix : undefined;
+        const tierValue = feature[tier] ? feature[tier].Value : undefined;
+        const tierSufix = feature[tier] ? feature[tier].Sufix : undefined;
+        return (
+          <RowCell
+            key={`${feature.Name}-${index}`}
+            prefix={tierPrefix}
+            value={tierValue}
+            sufix={tierSufix}
+          />
+        );
+      })}
+    </div>
+  );
+};

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

@@ -1,29 +1,29 @@
-import React from 'react';
-import styles from '../../../FeaturesTable.module.scss';
-import { CheckedIcon, Text } from '../../../../../';
-
-interface RowCellProps {
-  prefix?: string;
-  value?: string;
-  sufix?: string;
-}
-
-export const RowCell = ({ prefix = '', value, sufix = '' }: RowCellProps) => {
-  const yesValues = ['yes', 'oui', 'sí', 'si', 'ja'];
-  const noValues = ['no', 'non', 'nein', 'não', 'nao'];
-
-  const showCheckmark = value ? yesValues.includes(value.toLowerCase()) : false;
-  const hideCheckmark = value ? noValues.includes(value.toLowerCase()) : false;
-
-  return (
-    <div className={styles.rowCell}>
-      {prefix && <Text size="sm" weight="regular" text={prefix} />}
-      {showCheckmark ? (
-        <CheckedIcon className={styles.checkedIcon} />
-      ) : hideCheckmark || !value ? null : (
-        <Text size="sm" weight="bold" text={value} />
-      )}
-      {sufix && <Text size="sm" weight="regular" text={sufix} />}
-    </div>
-  );
-};
+import React from 'react';
+import styles from '../../../FeaturesTable.module.scss';
+import { CheckedIcon, Text } from '../../../../../';
+
+interface RowCellProps {
+  prefix?: string;
+  value?: string;
+  sufix?: string;
+}
+
+export const RowCell = ({ prefix = '', value, sufix = '' }: RowCellProps) => {
+  const yesValues = ['yes', 'oui', 'sí', 'si', 'ja'];
+  const noValues = ['no', 'non', 'nein', 'não', 'nao'];
+
+  const showCheckmark = value ? yesValues.includes(value.toLowerCase()) : false;
+  const hideCheckmark = value ? noValues.includes(value.toLowerCase()) : false;
+
+  return (
+    <div className={styles.rowCell}>
+      {prefix && <Text size="sm" weight="regular" text={prefix} />}
+      {showCheckmark ? (
+        <CheckedIcon className={styles.checkedIcon} />
+      ) : hideCheckmark || !value ? null : (
+        <Text size="sm" weight="bold" text={value} />
+      )}
+      {sufix && <Text size="sm" weight="regular" text={sufix} />}
+    </div>
+  );
+};

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

@@ -1,16 +1,16 @@
-import React from 'react';
-import { Text } from '../../../../../';
-
-import styles from '../../../FeaturesTable.module.scss';
-
-interface SectionTitleRowProps {
-  sectionName: string;
-}
-
-export const SectionTitleRow = ({ sectionName = '' }: SectionTitleRowProps) => {
-  return (
-    <div className={styles.sectionTitleRow}>
-      <Text size="sm" weight="bold" text={sectionName} />
-    </div>
-  );
-};
+import React from 'react';
+import { Text } from '../../../../../';
+
+import styles from '../../../FeaturesTable.module.scss';
+
+interface SectionTitleRowProps {
+  sectionName: string;
+}
+
+export const SectionTitleRow = ({ sectionName = '' }: SectionTitleRowProps) => {
+  return (
+    <div className={styles.sectionTitleRow}>
+      <Text size="sm" weight="bold" text={sectionName} />
+    </div>
+  );
+};

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

@@ -1,37 +1,37 @@
-import React from 'react';
-import styles from '../../FeaturesTable.module.scss';
-
-import HeaderCell from './components/HeaderCell';
-import { Title } from '../../../../';
-
-interface TableHeaderProps {
-  plans: any;
-  cmsContent: any;
-  actionsArray: any;
-}
-
-const TableHeader: React.FC<TableHeaderProps> = ({
-  plans,
-  cmsContent,
-  actionsArray,
-}) => {
-  return (
-    <div className={styles.tableHeader}>
-      <div className={styles.headerTitle}>
-        <Title size="base" weight="semi-bold" text={'Plans'} />
-      </div>
-      {plans.map((plan: any, index: number) => (
-        <HeaderCell
-          key={index}
-          planName={plan.Name}
-          monthlyPrice={plan.MonthlyPrice}
-          cmsContent={cmsContent}
-          tier={index + 1}
-          action={actionsArray[index]}
-        />
-      ))}
-    </div>
-  );
-};
-
-export default TableHeader;
+import React from 'react';
+import styles from '../../FeaturesTable.module.scss';
+
+import HeaderCell from './components/HeaderCell';
+import { Title } from '../../../../';
+
+interface TableHeaderProps {
+  plans: any;
+  cmsContent: any;
+  actionsArray: any;
+}
+
+const TableHeader: React.FC<TableHeaderProps> = ({
+  plans,
+  cmsContent,
+  actionsArray,
+}) => {
+  return (
+    <div className={styles.tableHeader}>
+      <div className={styles.headerTitle}>
+        <Title size="base" weight="semi-bold" text={'Plans'} />
+      </div>
+      {plans.map((plan: any, index: number) => (
+        <HeaderCell
+          key={index}
+          planName={plan.Name}
+          monthlyPrice={plan.MonthlyPrice}
+          cmsContent={cmsContent}
+          tier={index + 1}
+          action={actionsArray[index]}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default TableHeader;

package/src/Molecules/FeaturesTable/components/TableHeader/components/HeaderCell.tsx

@@ -1,69 +1,69 @@
-import React from 'react';
-import styles from '../../../FeaturesTable.module.scss';
-import { Title, Text, Button } from '../../../../../';
-
-interface HeaderCellProps {
-  planName: string;
-  monthlyPrice: number;
-  cmsContent: any;
-  action: () => void;
-  tier: number;
-}
-
-const HeaderCell: React.FC<HeaderCellProps> = ({
-  planName,
-  monthlyPrice,
-  cmsContent,
-  action,
-  tier,
-}) => {
-  //Map the tier to the button text and variant
-  const buttonVariant: { [key: number]: 'primary' | 'secondary' | 'success' } =
-    {
-      1: 'secondary',
-      2: 'primary',
-      3: 'success',
-      4: 'success',
-    };
-
-  const buttonText: { [key: number]: string } = {
-    1: cmsContent.GetStarted,
-    2: cmsContent.GetStarted,
-    3: cmsContent.GetStarted,
-    4: cmsContent.ContactUs,
-  };
-
-  const buttonBackgrounds: { [key: number]: string } = {
-    1: '',
-    2: 'linear-gradient(180deg, #4B4E52 0%, #26292E 100%)',
-    3: 'linear-gradient(135.07deg, #0077FF 0%, #9024F6 98.4%)',
-    4: 'linear-gradient(135.07deg, #0077FF 0%, #9024F6 98.4%)',
-  };
-
-  return (
-    <div className={styles.headerCell}>
-      <Title size="base" weight="semi-bold" text={planName} />
-      {tier === 4 ? (
-        <Title size="base" weight="bold" text={cmsContent.LetsTalk} />
-      ) : (
-        <div className={styles.priceContainer}>
-          <Title
-            size="base"
-            weight="bold"
-            text={`${cmsContent.Currency || '$'}${monthlyPrice}`}
-          />
-          <Text size="sm" text={`/ ${cmsContent.Month}`} />
-        </div>
-      )}
-
-      <Button
-        text={buttonText[tier]}
-        variant={buttonVariant[tier]}
-        customBackground={buttonBackgrounds[tier]}
-        onClick={action}
-      />
-    </div>
-  );
-};
-
-export default HeaderCell;
+import React from 'react';
+import styles from '../../../FeaturesTable.module.scss';
+import { Title, Text, Button } from '../../../../../';
+
+interface HeaderCellProps {
+  planName: string;
+  monthlyPrice: number;
+  cmsContent: any;
+  action: () => void;
+  tier: number;
+}
+
+const HeaderCell: React.FC<HeaderCellProps> = ({
+  planName,
+  monthlyPrice,
+  cmsContent,
+  action,
+  tier,
+}) => {
+  //Map the tier to the button text and variant
+  const buttonVariant: { [key: number]: 'primary' | 'secondary' | 'success' } =
+    {
+      1: 'secondary',
+      2: 'primary',
+      3: 'success',
+      4: 'success',
+    };
+
+  const buttonText: { [key: number]: string } = {
+    1: cmsContent.GetStarted,
+    2: cmsContent.GetStarted,
+    3: cmsContent.GetStarted,
+    4: cmsContent.ContactUs,
+  };
+
+  const buttonBackgrounds: { [key: number]: string } = {
+    1: '',
+    2: 'linear-gradient(180deg, #4B4E52 0%, #26292E 100%)',
+    3: 'linear-gradient(135.07deg, #0077FF 0%, #9024F6 98.4%)',
+    4: 'linear-gradient(135.07deg, #0077FF 0%, #9024F6 98.4%)',
+  };
+
+  return (
+    <div className={styles.headerCell}>
+      <Title size="base" weight="semi-bold" text={planName} />
+      {tier === 4 ? (
+        <Title size="base" weight="bold" text={cmsContent.LetsTalk} />
+      ) : (
+        <div className={styles.priceContainer}>
+          <Title
+            size="base"
+            weight="bold"
+            text={`${cmsContent.Currency || '$'}${monthlyPrice}`}
+          />
+          <Text size="sm" text={`/ ${cmsContent.Month}`} />
+        </div>
+      )}
+
+      <Button
+        text={buttonText[tier]}
+        variant={buttonVariant[tier]}
+        customBackground={buttonBackgrounds[tier]}
+        onClick={action}
+      />
+    </div>
+  );
+};
+
+export default HeaderCell;