odaptos_design_system 2.0.5 → 2.0.7

package/src/Atoms/Typography/TextWithLink.tsx

@@ -1,73 +1,73 @@
-import React, { HTMLAttributes } from 'react';
-import styles from './TextWithLink.modules.scss';
-
-interface TextWithLinkProps extends HTMLAttributes<HTMLParagraphElement> {
-  /** Text display */
-  text: string;
-  color?: string;
-  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
-  weight?: 'semi-bold' | 'bold' | 'regular';
-  italic?: boolean;
-  textDecoration?: 'underline' | 'line-through';
-  className?: string;
-  textLink: string;
-  link: string;
-  isExternalLink?: boolean;
-}
-
-/** This text should be use to display basic text */
-export const TextWithLink = ({
-  text,
-  color = '#26292E',
-  size = 'base',
-  weight = 'semi-bold',
-  italic = false,
-  textDecoration,
-  className,
-  textLink,
-  link,
-  isExternalLink = true,
-  ...props
-}: TextWithLinkProps) => {
-  const getTextSize = (): string => {
-    if (size === 'xs') return styles.text_with_link_xs;
-    else if (size === 'sm') return styles.text_with_link_sm;
-    else if (size === 'base') return styles.text_with_link_base;
-    else if (size === 'lg') return styles.text_with_link_lg;
-    else if (size === 'xl') return styles.text_with_link_xl;
-    else if (size === 'xxl') return styles.text_with_link_xxl;
-    else if (size === 'xxxl') return styles.text_with_link_xxxl;
-    else if (size === 'xxxxl') return styles.text_with_link_xxxxl;
-    else return styles.text_with_link_base;
-  };
-  const getTextWeight = (): string => {
-    if (weight === 'semi-bold') return styles.text_with_link_semi_bold;
-    else if (weight === 'bold') return styles.text_with_link_bold;
-    else if (weight === 'regular') return styles.text_with_link_regular;
-    else return styles.text_with_link_regular;
-  };
-  const getTextDecoration = (): string => {
-    if (textDecoration === 'underline') return styles.text_with_link_underline;
-    else if (textDecoration === 'line-through')
-      return styles.text_with_link_line_through;
-    else return '';
-  };
-  return (
-    <p
-      {...props}
-      style={{ color: color }}
-      className={`${styles.text_with_link} ${
-        italic && styles.text_with_link_italic
-      } ${getTextWeight()} ${getTextDecoration()} ${className} ${getTextSize()}`}
-    >
-      {text}
-      {isExternalLink ? (
-        <a href={link} target="_blank" rel="noreferrer">
-          {textLink}
-        </a>
-      ) : (
-        <a href={link}>{textLink}</a>
-      )}
-    </p>
-  );
-};
+import React, { HTMLAttributes } from 'react';
+import styles from './TextWithLink.modules.scss';
+
+interface TextWithLinkProps extends HTMLAttributes<HTMLParagraphElement> {
+  /** Text display */
+  text: string;
+  color?: string;
+  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
+  weight?: 'semi-bold' | 'bold' | 'regular';
+  italic?: boolean;
+  textDecoration?: 'underline' | 'line-through';
+  className?: string;
+  textLink: string;
+  link: string;
+  isExternalLink?: boolean;
+}
+
+/** This text should be use to display basic text */
+export const TextWithLink = ({
+  text,
+  color = '#26292E',
+  size = 'base',
+  weight = 'semi-bold',
+  italic = false,
+  textDecoration,
+  className,
+  textLink,
+  link,
+  isExternalLink = true,
+  ...props
+}: TextWithLinkProps) => {
+  const getTextSize = (): string => {
+    if (size === 'xs') return styles.text_with_link_xs;
+    else if (size === 'sm') return styles.text_with_link_sm;
+    else if (size === 'base') return styles.text_with_link_base;
+    else if (size === 'lg') return styles.text_with_link_lg;
+    else if (size === 'xl') return styles.text_with_link_xl;
+    else if (size === 'xxl') return styles.text_with_link_xxl;
+    else if (size === 'xxxl') return styles.text_with_link_xxxl;
+    else if (size === 'xxxxl') return styles.text_with_link_xxxxl;
+    else return styles.text_with_link_base;
+  };
+  const getTextWeight = (): string => {
+    if (weight === 'semi-bold') return styles.text_with_link_semi_bold;
+    else if (weight === 'bold') return styles.text_with_link_bold;
+    else if (weight === 'regular') return styles.text_with_link_regular;
+    else return styles.text_with_link_regular;
+  };
+  const getTextDecoration = (): string => {
+    if (textDecoration === 'underline') return styles.text_with_link_underline;
+    else if (textDecoration === 'line-through')
+      return styles.text_with_link_line_through;
+    else return '';
+  };
+  return (
+    <p
+      {...props}
+      style={{ color: color }}
+      className={`${styles.text_with_link} ${
+        italic && styles.text_with_link_italic
+      } ${getTextWeight()} ${getTextDecoration()} ${className} ${getTextSize()}`}
+    >
+      {text}
+      {isExternalLink ? (
+        <a href={link} target="_blank" rel="noreferrer">
+          {textLink}
+        </a>
+      ) : (
+        <a href={link}>{textLink}</a>
+      )}
+    </p>
+  );
+};

package/src/Atoms/Typography/Title.modules.scss

@@ -1,82 +1,82 @@
-@import '../../../styles/index.css';
-
-.title {
-  font-family: var(--sdFontFamilyPoppins);
-  text-align: left;
-  margin: unset;
-}
-
-.title_italic {
-  font-style: italic;
-}
-.title_normal {
-  font-style: normal;
-}
-
-.title_required::after {
-  content: ' *';
-  color: red;
-}
-
-/* Size classNames */
-.title_xs {
-  font-size: var(--sdFontSizeXs);
-  line-height: var(--sdLineHeight130);
-  padding: 0.063rem 0px;
-}
-
-.title_sm {
-  font-size: var(--sdFontSizeSm);
-  line-height: var(--sdLineHeight140);
-  padding: 0.188rem 0px 0.063rem;
-}
-
-.title_base {
-  font-size: var(--sdFontSizeBase);
-  line-height: var(--sdLineHeight150);
-  padding: 0.125rem 0px;
-}
-
-.title_lg {
-  font-size: var(--sdFontSizeLg);
-  line-height: var(--sdLineHeight140);
-  padding: 0.188rem 0px 0.063rem;
-}
-
-.title_xl {
-  font-size: var(--sdFontSizeXl);
-  line-height: var(--sdLineHeight150);
-  padding: 0.125rem 0px;
-}
-
-.title_xxl {
-  font-size: var(--sdFontSize2xl);
-  line-height: var(--sdLineHeight150);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.title_xxxl {
-  font-size: var(--sdFontSize3xl);
-  line-height: 150%;
-  padding: 0.188rem 0px 0.063rem;
-}
-
-.title_xxxxl {
-  font-size: var(--sdFontSize4xl);
-  line-height: var(--sdLineHeight150);
-  padding: 0.125rem 0px;
-}
-
-/* fontWeight classNames */
-
-.title_bold {
-  font-weight: var(--sdFontWeightBold);
-}
-
-.title_semi_bold {
-  font-weight: var(--sdFontWeightSemibold);
-}
-
-.title_regular {
-  font-weight: var(--sdFontWeightRegular);
-}
+@import '../../../styles/index.css';
+
+.title {
+  font-family: var(--sdFontFamilyPoppins);
+  text-align: left;
+  margin: unset;
+}
+
+.title_italic {
+  font-style: italic;
+}
+.title_normal {
+  font-style: normal;
+}
+
+.title_required::after {
+  content: ' *';
+  color: red;
+}
+
+/* Size classNames */
+.title_xs {
+  font-size: var(--sdFontSizeXs);
+  line-height: var(--sdLineHeight130);
+  padding: 0.063rem 0px;
+}
+
+.title_sm {
+  font-size: var(--sdFontSizeSm);
+  line-height: var(--sdLineHeight140);
+  padding: 0.188rem 0px 0.063rem;
+}
+
+.title_base {
+  font-size: var(--sdFontSizeBase);
+  line-height: var(--sdLineHeight150);
+  padding: 0.125rem 0px;
+}
+
+.title_lg {
+  font-size: var(--sdFontSizeLg);
+  line-height: var(--sdLineHeight140);
+  padding: 0.188rem 0px 0.063rem;
+}
+
+.title_xl {
+  font-size: var(--sdFontSizeXl);
+  line-height: var(--sdLineHeight150);
+  padding: 0.125rem 0px;
+}
+
+.title_xxl {
+  font-size: var(--sdFontSize2xl);
+  line-height: var(--sdLineHeight150);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.title_xxxl {
+  font-size: var(--sdFontSize3xl);
+  line-height: 150%;
+  padding: 0.188rem 0px 0.063rem;
+}
+
+.title_xxxxl {
+  font-size: var(--sdFontSize4xl);
+  line-height: var(--sdLineHeight150);
+  padding: 0.125rem 0px;
+}
+
+/* fontWeight classNames */
+
+.title_bold {
+  font-weight: var(--sdFontWeightBold);
+}
+
+.title_semi_bold {
+  font-weight: var(--sdFontWeightSemibold);
+}
+
+.title_regular {
+  font-weight: var(--sdFontWeightRegular);
+}

package/src/Atoms/Typography/Title.tsx

@@ -1,148 +1,148 @@
-import React, { HTMLAttributes } from 'react';
-import styles from './Title.modules.scss';
-
-interface TitleProps extends HTMLAttributes<HTMLParagraphElement> {
-  /** Text display in the Title  */
-  text: string;
-  color?: string;
-  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
-  weight?: 'semi-bold' | 'bold' | 'regular';
-  italic?: boolean;
-  type?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  className?: string;
-  required?: boolean;
-}
-
-/** This text should only be used to display titles
- * Figma link: https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=52-357&mode=dev
- */
-export const Title = ({
-  text,
-  color = '#26292E',
-  size = 'base',
-  weight = 'semi-bold',
-  italic = false,
-  className,
-  type = 'h2',
-  required,
-  ...props
-}: TitleProps) => {
-  const getTextSize = (): string => {
-    if (size === 'xs') return styles.title_xs;
-    else if (size === 'sm') return styles.title_sm;
-    else if (size === 'base') return styles.title_base;
-    else if (size === 'lg') return styles.title_lg;
-    else if (size === 'xl') return styles.title_xl;
-    else if (size === 'xxl') return styles.title_xxl;
-    else if (size === 'xxxl') return styles.title_xxxl;
-    else if (size === 'xxxxl') return styles.title_xxxxl;
-    else return styles.title_base;
-  };
-  const getTextWeight = (): string => {
-    if (weight === 'semi-bold') return styles.title_semi_bold;
-    else if (weight === 'bold') return styles.title_bold;
-    else if (weight === 'regular') return styles.title_regular;
-    else return styles.title_regular;
-  };
-
-  switch (type) {
-    case 'h1':
-      return (
-        <h1
-          {...props}
-          style={{ color: color }}
-          className={`${styles.title} ${
-            italic ? styles.title_italic : styles.title_normal
-          } ${getTextWeight()} ${className ?? ''} ${getTextSize()} ${
-            required && styles.title_required
-          }`}
-        >
-          {text}
-        </h1>
-      );
-    case 'h2':
-      return (
-        <h2
-          {...props}
-          style={{ color: color }}
-          className={`${styles.title} ${
-            italic ? styles.title_italic : styles.title_normal
-          } ${getTextWeight()} ${className ?? ''} ${getTextSize()} ${
-            required && styles.title_required
-          }`}
-        >
-          {text}
-        </h2>
-      );
-    case 'h3':
-      return (
-        <h3
-          {...props}
-          style={{ color: color }}
-          className={`${styles.title} ${
-            italic ? styles.title_italic : styles.title_normal
-          } ${getTextWeight()} ${className ?? ''} ${getTextSize()} ${
-            required && styles.title_required
-          }`}
-        >
-          {text}
-        </h3>
-      );
-    case 'h4':
-      return (
-        <h4
-          {...props}
-          style={{ color: color }}
-          className={`${styles.title} ${
-            italic ? styles.title_italic : styles.title_normal
-          } ${getTextWeight()} ${className ?? ''} ${getTextSize()} ${
-            required && styles.title_required
-          }`}
-        >
-          {text}
-        </h4>
-      );
-    case 'h5':
-      return (
-        <h5
-          {...props}
-          style={{ color: color }}
-          className={`${styles.title} ${
-            italic ? styles.title_italic : styles.title_normal
-          } ${getTextWeight()} ${className ?? ''} ${getTextSize()} ${
-            required && styles.title_required
-          }`}
-        >
-          {text}
-        </h5>
-      );
-    case 'h6':
-      return (
-        <h6
-          {...props}
-          style={{ color: color }}
-          className={`${styles.title} ${
-            italic ? styles.title_italic : styles.title_normal
-          } ${getTextWeight()} ${className ?? ''} ${getTextSize()} ${
-            required && styles.title_required
-          }`}
-        >
-          {text}
-        </h6>
-      );
-    default:
-      return (
-        <h2
-          {...props}
-          style={{ color: color }}
-          className={`${styles.title} ${
-            italic ? styles.title_italic : styles.title_normal
-          } ${getTextWeight()} ${className ?? ''} ${getTextSize()} ${
-            required && styles.title_required
-          }`}
-        >
-          {text}
-        </h2>
-      );
-  }
-};
+import React, { HTMLAttributes } from 'react';
+import styles from './Title.modules.scss';
+
+interface TitleProps extends HTMLAttributes<HTMLParagraphElement> {
+  /** Text display in the Title  */
+  text: string;
+  color?: string;
+  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
+  weight?: 'semi-bold' | 'bold' | 'regular';
+  italic?: boolean;
+  type?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  className?: string;
+  required?: boolean;
+}
+
+/** This text should only be used to display titles
+ * Figma link: https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=52-357&mode=dev
+ */
+export const Title = ({
+  text,
+  color = '#26292E',
+  size = 'base',
+  weight = 'semi-bold',
+  italic = false,
+  className,
+  type = 'h2',
+  required,
+  ...props
+}: TitleProps) => {
+  const getTextSize = (): string => {
+    if (size === 'xs') return styles.title_xs;
+    else if (size === 'sm') return styles.title_sm;
+    else if (size === 'base') return styles.title_base;
+    else if (size === 'lg') return styles.title_lg;
+    else if (size === 'xl') return styles.title_xl;
+    else if (size === 'xxl') return styles.title_xxl;
+    else if (size === 'xxxl') return styles.title_xxxl;
+    else if (size === 'xxxxl') return styles.title_xxxxl;
+    else return styles.title_base;
+  };
+  const getTextWeight = (): string => {
+    if (weight === 'semi-bold') return styles.title_semi_bold;
+    else if (weight === 'bold') return styles.title_bold;
+    else if (weight === 'regular') return styles.title_regular;
+    else return styles.title_regular;
+  };
+
+  switch (type) {
+    case 'h1':
+      return (
+        <h1
+          {...props}
+          style={{ color: color }}
+          className={`${styles.title} ${
+            italic ? styles.title_italic : styles.title_normal
+          } ${getTextWeight()} ${className ?? ''} ${getTextSize()} ${
+            required && styles.title_required
+          }`}
+        >
+          {text}
+        </h1>
+      );
+    case 'h2':
+      return (
+        <h2
+          {...props}
+          style={{ color: color }}
+          className={`${styles.title} ${
+            italic ? styles.title_italic : styles.title_normal
+          } ${getTextWeight()} ${className ?? ''} ${getTextSize()} ${
+            required && styles.title_required
+          }`}
+        >
+          {text}
+        </h2>
+      );
+    case 'h3':
+      return (
+        <h3
+          {...props}
+          style={{ color: color }}
+          className={`${styles.title} ${
+            italic ? styles.title_italic : styles.title_normal
+          } ${getTextWeight()} ${className ?? ''} ${getTextSize()} ${
+            required && styles.title_required
+          }`}
+        >
+          {text}
+        </h3>
+      );
+    case 'h4':
+      return (
+        <h4
+          {...props}
+          style={{ color: color }}
+          className={`${styles.title} ${
+            italic ? styles.title_italic : styles.title_normal
+          } ${getTextWeight()} ${className ?? ''} ${getTextSize()} ${
+            required && styles.title_required
+          }`}
+        >
+          {text}
+        </h4>
+      );
+    case 'h5':
+      return (
+        <h5
+          {...props}
+          style={{ color: color }}
+          className={`${styles.title} ${
+            italic ? styles.title_italic : styles.title_normal
+          } ${getTextWeight()} ${className ?? ''} ${getTextSize()} ${
+            required && styles.title_required
+          }`}
+        >
+          {text}
+        </h5>
+      );
+    case 'h6':
+      return (
+        <h6
+          {...props}
+          style={{ color: color }}
+          className={`${styles.title} ${
+            italic ? styles.title_italic : styles.title_normal
+          } ${getTextWeight()} ${className ?? ''} ${getTextSize()} ${
+            required && styles.title_required
+          }`}
+        >
+          {text}
+        </h6>
+      );
+    default:
+      return (
+        <h2
+          {...props}
+          style={{ color: color }}
+          className={`${styles.title} ${
+            italic ? styles.title_italic : styles.title_normal
+          } ${getTextWeight()} ${className ?? ''} ${getTextSize()} ${
+            required && styles.title_required
+          }`}
+        >
+          {text}
+        </h2>
+      );
+  }
+};