odaptos_design_system 2.0.5 → 2.0.7

package/src/Molecules/PricingCard/PricingCard.tsx

@@ -1,284 +1,284 @@
-import React from 'react';
-import styles from './PricingCard.module.scss';
-import {
-  Button,
-  colors,
-  IconButton,
-  Text,
-  Title,
-  Tooltip,
-  CheckedIcon,
-  QuestionCircledIcon,
-} from '../../';
-
-interface Feature {
-  featureName: string;
-  tooltipText: string;
-}
-
-interface PricingCardProps {
-  cardInfo: {
-    title: string;
-    description: string;
-    monthlyPrice: number;
-    yearlyPrice: number;
-    featuredSectionTitle?: string;
-    featuredSectionTitleTooltip?: string;
-  };
-  cmsContent: any;
-  isYearlyOrMonthly: 'yearly' | 'monthly';
-  interviewsNumber?: number;
-  featuresList: Feature[];
-  isDark?: boolean;
-  isHighlighted: boolean;
-  highlightMessage?: string;
-  onClick: () => void;
-  tier: 1 | 2 | 3 | 4;
-  yourPlanText?: string;
-  language?: 'en' | 'fr' | 'es';
-}
-
-export const PricingCard = ({
-  cardInfo: {
-    title,
-    description,
-    monthlyPrice,
-    yearlyPrice,
-    featuredSectionTitle,
-    featuredSectionTitleTooltip,
-  },
-  cmsContent,
-  isYearlyOrMonthly,
-  interviewsNumber,
-  featuresList,
-  isDark = false,
-  isHighlighted = false,
-  highlightMessage = '',
-  onClick,
-  tier = 1,
-  yourPlanText,
-  language,
-}: PricingCardProps) => {
-  //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.GetStartedForFree,
-    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.pricingCard +
-        (isHighlighted ? ` ${styles.highlighted}` : '') +
-        (isDark ? ` ${styles.dark}` : '')
-      }
-    >
-      {isHighlighted && highlightMessage && (
-        <div className={styles.highlightMessage}>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            fill="none"
-          >
-            <g clipPath="url(#clip0_2109_4739)">
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M12.1575 7.80149L7.25888 15.7622C7.14154 15.9528 6.91221 16.0422 6.69688 15.9815C6.48154 15.9202 6.33288 15.7242 6.33288 15.5002V10.0002H4.51554C4.30488 10.0002 4.09821 9.94416 3.91688 9.83816C3.73554 9.73149 3.58554 9.57883 3.48288 9.39549C3.38021 9.21149 3.32888 9.00416 3.33354 8.79416C3.33754 8.58349 3.39821 8.37816 3.50821 8.19949L8.40688 0.238159C8.52421 0.0474925 8.75354 -0.0418408 8.96888 0.0188259C9.18421 0.0801592 9.33288 0.276159 9.33288 0.500159V6.00016H11.1509C11.3609 6.00016 11.5675 6.05616 11.7489 6.16283C11.9302 6.26949 12.0802 6.42216 12.1822 6.60549C12.2849 6.78883 12.3369 6.99683 12.3322 7.20683C12.3282 7.41683 12.2675 7.62216 12.1575 7.80149ZM11.3055 7.27749C11.3229 7.25016 11.3322 7.21816 11.3329 7.18616C11.3335 7.15349 11.3255 7.12149 11.3095 7.09349C11.2935 7.06483 11.2709 7.04149 11.2429 7.02549C11.2149 7.00883 11.1829 7.00016 11.1509 7.00016H8.83288C8.55688 7.00016 8.33288 6.77616 8.33288 6.50016V2.26683L4.36021 8.72349C4.34288 8.75149 4.33354 8.78283 4.33288 8.81483C4.33221 8.84749 4.34021 8.87883 4.35621 8.90749C4.37154 8.93549 4.39488 8.95883 4.42221 8.97549C4.45021 8.99149 4.48221 9.00016 4.51421 9.00016H6.83288C7.10888 9.00016 7.33288 9.22416 7.33288 9.50016V13.7335L11.3055 7.27749Z"
-                fill="white"
-              />
-            </g>
-            <defs>
-              <clipPath id="clip0_2109_4739">
-                <rect width="16" height="16" fill="white" />
-              </clipPath>
-            </defs>
-          </svg>
-          <Title
-            size="base"
-            weight="regular"
-            text={highlightMessage}
-            color="#fff"
-          />
-        </div>
-      )}
-
-      <div className={styles.mainContent}>
-        <div
-          style={{
-            height: language === 'fr' ? '20rem' : '18rem',
-            display: 'flex',
-            flexDirection: 'column',
-          }}
-        >
-          <div className={styles.header}>
-            <div className={styles.header_top}>
-              <Title
-                size="xl"
-                weight="bold"
-                text={title}
-                color={isDark ? '#fff' : ''}
-              />
-              {yourPlanText && (
-                <div className={styles.tag}>
-                  <Text size="xs" text={yourPlanText} color={colors.white} />
-                </div>
-              )}
-            </div>
-            <div className={styles.description}>
-              <Text
-                size="base"
-                weight="semi-bold"
-                text={description}
-                color={isDark ? 'white' : ''}
-              />
-            </div>
-          </div>
-          <div className={styles.pricing}>
-            <Text
-              size="base"
-              weight="bold"
-              text={
-                isYearlyOrMonthly === 'yearly' && tier !== 4
-                  ? `${cmsContent.Currency || '$'}${monthlyPrice} / ${
-                      cmsContent.Month
-                    }`
-                  : '-'
-              }
-              color={
-                isYearlyOrMonthly === 'yearly' && tier !== 4
-                  ? colors.neutral_800
-                  : 'transparent'
-              }
-              className={styles.lineThrough}
-            />
-
-            <div className={styles.price}>
-              {tier === 4 ? (
-                <Title
-                  size="xxl"
-                  weight="bold"
-                  text={cmsContent.LetsTalk}
-                  color={isDark ? '#fff' : ''}
-                />
-              ) : (
-                <div className={styles.amount}>
-                  <Title
-                    size="xxxl"
-                    weight="bold"
-                    text={`
-                  ${cmsContent.Currency || '$'}${
-                      isYearlyOrMonthly === 'yearly'
-                        ? yearlyPrice
-                        : monthlyPrice
-                    } 
-              `}
-                    color={isDark ? '#fff' : ''}
-                  />
-                  <Text
-                    size="base"
-                    weight="regular"
-                    text={`/
-                  ${tier === 1 ? cmsContent.ForLife : cmsContent.Month}
-              `}
-                    color={isDark ? 'white' : colors.neutral_550}
-                  />
-                </div>
-              )}
-            </div>
-
-            <div className={styles.interviews}>
-              {tier === 4 ? (
-                <Text
-                  size="sm"
-                  weight="semi-bold"
-                  text={cmsContent.LearnMore}
-                  color={isDark ? 'white' : ''}
-                />
-              ) : (
-                <Text
-                  size="sm"
-                  weight="semi-bold"
-                  text={`${cmsContent.UpTo} ${interviewsNumber} ${
-                    cmsContent.Interviews
-                  } / ${
-                    isYearlyOrMonthly === 'monthly'
-                      ? cmsContent.Month
-                      : cmsContent.Year
-                  }`}
-                  color={isDark ? 'white' : ''}
-                />
-              )}
-              <Tooltip tooltipDescription={featuredSectionTitleTooltip} arrow>
-                <IconButton
-                  variant="tertiary"
-                  icon={<QuestionCircledIcon fill={isDark ? '#fff' : ''} />}
-                />
-              </Tooltip>
-            </div>
-          </div>
-        </div>
-        <Button
-          text={buttonText[tier]}
-          size="base"
-          variant={buttonVariant[tier]}
-          className={styles.button}
-          disabled={yourPlanText ? true : false}
-          customBackground={buttonBackgrounds[tier]}
-          onClick={onClick}
-        />
-        <div className={styles.features}>
-          <Text
-            size="base"
-            weight="semi-bold"
-            text={featuredSectionTitle || cmsContent.Includes}
-            color={isDark ? 'white' : ''}
-          />
-          <ul className={styles.featuresList}>
-            {featuresList.map((feature, index) => (
-              <li className={styles.feature} key={index}>
-                <CheckedIcon className={styles.icon} />
-                <Text
-                  size="sm"
-                  weight="regular"
-                  text={feature.featureName}
-                  color={isDark ? '#fff' : ''}
-                />
-                <Tooltip
-                  tooltipDescription={feature.tooltipText}
-                  placement="right"
-                >
-                  <IconButton
-                    icon={<QuestionCircledIcon fill={isDark ? '#fff' : ''} />}
-                    variant={isDark ? 'tertiary-alt' : 'tertiary'}
-                    size="xxs"
-                    className={styles.tooltipButton}
-                  />
-                </Tooltip>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-};
+import React from 'react';
+import styles from './PricingCard.module.scss';
+import {
+  Button,
+  colors,
+  IconButton,
+  Text,
+  Title,
+  Tooltip,
+  CheckedIcon,
+  QuestionCircledIcon,
+} from '../../';
+
+interface Feature {
+  featureName: string;
+  tooltipText: string;
+}
+
+interface PricingCardProps {
+  cardInfo: {
+    title: string;
+    description: string;
+    monthlyPrice: number;
+    yearlyPrice: number;
+    featuredSectionTitle?: string;
+    featuredSectionTitleTooltip?: string;
+  };
+  cmsContent: any;
+  isYearlyOrMonthly: 'yearly' | 'monthly';
+  interviewsNumber?: number;
+  featuresList: Feature[];
+  isDark?: boolean;
+  isHighlighted: boolean;
+  highlightMessage?: string;
+  onClick: () => void;
+  tier: 1 | 2 | 3 | 4;
+  yourPlanText?: string;
+  language?: 'en' | 'fr' | 'es';
+}
+
+export const PricingCard = ({
+  cardInfo: {
+    title,
+    description,
+    monthlyPrice,
+    yearlyPrice,
+    featuredSectionTitle,
+    featuredSectionTitleTooltip,
+  },
+  cmsContent,
+  isYearlyOrMonthly,
+  interviewsNumber,
+  featuresList,
+  isDark = false,
+  isHighlighted = false,
+  highlightMessage = '',
+  onClick,
+  tier = 1,
+  yourPlanText,
+  language,
+}: PricingCardProps) => {
+  //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.GetStartedForFree,
+    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.pricingCard +
+        (isHighlighted ? ` ${styles.highlighted}` : '') +
+        (isDark ? ` ${styles.dark}` : '')
+      }
+    >
+      {isHighlighted && highlightMessage && (
+        <div className={styles.highlightMessage}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+          >
+            <g clipPath="url(#clip0_2109_4739)">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M12.1575 7.80149L7.25888 15.7622C7.14154 15.9528 6.91221 16.0422 6.69688 15.9815C6.48154 15.9202 6.33288 15.7242 6.33288 15.5002V10.0002H4.51554C4.30488 10.0002 4.09821 9.94416 3.91688 9.83816C3.73554 9.73149 3.58554 9.57883 3.48288 9.39549C3.38021 9.21149 3.32888 9.00416 3.33354 8.79416C3.33754 8.58349 3.39821 8.37816 3.50821 8.19949L8.40688 0.238159C8.52421 0.0474925 8.75354 -0.0418408 8.96888 0.0188259C9.18421 0.0801592 9.33288 0.276159 9.33288 0.500159V6.00016H11.1509C11.3609 6.00016 11.5675 6.05616 11.7489 6.16283C11.9302 6.26949 12.0802 6.42216 12.1822 6.60549C12.2849 6.78883 12.3369 6.99683 12.3322 7.20683C12.3282 7.41683 12.2675 7.62216 12.1575 7.80149ZM11.3055 7.27749C11.3229 7.25016 11.3322 7.21816 11.3329 7.18616C11.3335 7.15349 11.3255 7.12149 11.3095 7.09349C11.2935 7.06483 11.2709 7.04149 11.2429 7.02549C11.2149 7.00883 11.1829 7.00016 11.1509 7.00016H8.83288C8.55688 7.00016 8.33288 6.77616 8.33288 6.50016V2.26683L4.36021 8.72349C4.34288 8.75149 4.33354 8.78283 4.33288 8.81483C4.33221 8.84749 4.34021 8.87883 4.35621 8.90749C4.37154 8.93549 4.39488 8.95883 4.42221 8.97549C4.45021 8.99149 4.48221 9.00016 4.51421 9.00016H6.83288C7.10888 9.00016 7.33288 9.22416 7.33288 9.50016V13.7335L11.3055 7.27749Z"
+                fill="white"
+              />
+            </g>
+            <defs>
+              <clipPath id="clip0_2109_4739">
+                <rect width="16" height="16" fill="white" />
+              </clipPath>
+            </defs>
+          </svg>
+          <Title
+            size="base"
+            weight="regular"
+            text={highlightMessage}
+            color="#fff"
+          />
+        </div>
+      )}
+
+      <div className={styles.mainContent}>
+        <div
+          style={{
+            height: language === 'fr' ? '20rem' : '18rem',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <div className={styles.header}>
+            <div className={styles.header_top}>
+              <Title
+                size="xl"
+                weight="bold"
+                text={title}
+                color={isDark ? '#fff' : ''}
+              />
+              {yourPlanText && (
+                <div className={styles.tag}>
+                  <Text size="xs" text={yourPlanText} color={colors.white} />
+                </div>
+              )}
+            </div>
+            <div className={styles.description}>
+              <Text
+                size="base"
+                weight="semi-bold"
+                text={description}
+                color={isDark ? 'white' : ''}
+              />
+            </div>
+          </div>
+          <div className={styles.pricing}>
+            <Text
+              size="base"
+              weight="bold"
+              text={
+                isYearlyOrMonthly === 'yearly' && tier !== 4
+                  ? `${cmsContent.Currency || '$'}${monthlyPrice} / ${
+                      cmsContent.Month
+                    }`
+                  : '-'
+              }
+              color={
+                isYearlyOrMonthly === 'yearly' && tier !== 4
+                  ? colors.neutral_800
+                  : 'transparent'
+              }
+              className={styles.lineThrough}
+            />
+
+            <div className={styles.price}>
+              {tier === 4 ? (
+                <Title
+                  size="xxl"
+                  weight="bold"
+                  text={cmsContent.LetsTalk}
+                  color={isDark ? '#fff' : ''}
+                />
+              ) : (
+                <div className={styles.amount}>
+                  <Title
+                    size="xxxl"
+                    weight="bold"
+                    text={`
+                  ${cmsContent.Currency || '$'}${
+                      isYearlyOrMonthly === 'yearly'
+                        ? yearlyPrice
+                        : monthlyPrice
+                    } 
+              `}
+                    color={isDark ? '#fff' : ''}
+                  />
+                  <Text
+                    size="base"
+                    weight="regular"
+                    text={`/
+                  ${tier === 1 ? cmsContent.ForLife : cmsContent.Month}
+              `}
+                    color={isDark ? 'white' : colors.neutral_550}
+                  />
+                </div>
+              )}
+            </div>
+
+            <div className={styles.interviews}>
+              {tier === 4 ? (
+                <Text
+                  size="sm"
+                  weight="semi-bold"
+                  text={cmsContent.LearnMore}
+                  color={isDark ? 'white' : ''}
+                />
+              ) : (
+                <Text
+                  size="sm"
+                  weight="semi-bold"
+                  text={`${cmsContent.UpTo} ${interviewsNumber} ${
+                    cmsContent.Interviews
+                  } / ${
+                    isYearlyOrMonthly === 'monthly'
+                      ? cmsContent.Month
+                      : cmsContent.Year
+                  }`}
+                  color={isDark ? 'white' : ''}
+                />
+              )}
+              <Tooltip tooltipDescription={featuredSectionTitleTooltip} arrow>
+                <IconButton
+                  variant="tertiary"
+                  icon={<QuestionCircledIcon fill={isDark ? '#fff' : ''} />}
+                />
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+        <Button
+          text={buttonText[tier]}
+          size="base"
+          variant={buttonVariant[tier]}
+          className={styles.button}
+          disabled={yourPlanText ? true : false}
+          customBackground={buttonBackgrounds[tier]}
+          onClick={onClick}
+        />
+        <div className={styles.features}>
+          <Text
+            size="base"
+            weight="semi-bold"
+            text={featuredSectionTitle || cmsContent.Includes}
+            color={isDark ? 'white' : ''}
+          />
+          <ul className={styles.featuresList}>
+            {featuresList.map((feature, index) => (
+              <li className={styles.feature} key={index}>
+                <CheckedIcon className={styles.icon} />
+                <Text
+                  size="sm"
+                  weight="regular"
+                  text={feature.featureName}
+                  color={isDark ? '#fff' : ''}
+                />
+                <Tooltip
+                  tooltipDescription={feature.tooltipText}
+                  placement="right"
+                >
+                  <IconButton
+                    icon={<QuestionCircledIcon fill={isDark ? '#fff' : ''} />}
+                    variant={isDark ? 'tertiary-alt' : 'tertiary'}
+                    size="xxs"
+                    className={styles.tooltipButton}
+                  />
+                </Tooltip>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/Molecules/StarRating/StarRating.module.scss

@@ -1,24 +1,24 @@
-.star_button {
-  background-color: transparent;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  padding: 0;
-
-  svg {
-    width: 1rem;
-    height: 1rem;
-  }
-}
-.on {
-  color: #f9dc4d;
-}
-.off {
-  color: transparent;
-}
-
-.star_rating {
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
-}
+.star_button {
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+.on {
+  color: #f9dc4d;
+}
+.off {
+  color: transparent;
+}
+
+.star_rating {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}