odaptos_design_system 1.0.0 → 1.2.0

package/src/Typography/Text.tsx

@@ -1,34 +1,64 @@
-import React, { HTMLAttributes } from 'react';
-import './Text.css';
+import { HTMLAttributes } from 'react';
+import styles from './Text.modules.scss';
 
 interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
   /** Text display */
   text: string;
   color?: string;
   size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
-  titleWeight?: 'semi-bold' | 'bold' | 'regular';
+  weight?: 'semi-bold' | 'bold' | 'regular';
   italic?: boolean;
   textDecoration?: 'underline' | 'line-through';
   className?: string;
+  required?: boolean;
 }
 
-/** This text should be use to display basic text */
+/** This text should be use to display basic text
+ * Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=52-751&mode=dev
+ */
 export const Text = ({
-  text = 'Component to use for the basic texts',
+  text,
   color = 'black',
   size = 'base',
-  titleWeight = 'semi-bold',
+  weight = 'regular',
   italic = false,
   textDecoration,
   className,
+  required,
   ...props
 }: TextProps) => {
+  const getTextSize = (): string => {
+    if (size === 'xs') return styles.text_xs;
+    else if (size === 'sm') return styles.text_sm;
+    else if (size === 'base') return styles.text_base;
+    else if (size === 'lg') return styles.text_lg;
+    else if (size === 'xl') return styles.text_xl;
+    else if (size === 'xxl') return styles.text_xxl;
+    else if (size === 'xxxl') return styles.text_xxxl;
+    else if (size === 'xxxxl') return styles.text_xxxxl;
+    else return styles.text_base;
+  };
+  const getTextWeight = (): string => {
+    if (weight === 'semi-bold') return styles.text_semi_bold;
+    else if (weight === 'bold') return styles.text_bold;
+    else if (weight === 'regular') return styles.text_regular;
+    else return styles.text_regular;
+  };
+  const getTextDecoration = (): string => {
+    if (textDecoration === 'underline') return styles.text_underline;
+    else if (textDecoration === 'line-through') return styles.text_line_through;
+    else return '';
+  };
+
   return (
     <p
       {...props}
       style={{ color: color }}
-      className={`text ${italic && 'italic'} ${titleWeight} ${textDecoration &&
-        textDecoration} ${className} ${size}`}
+      className={`${styles.text} ${
+        italic ? styles.text_italic : ''
+      } ${getTextWeight()} ${getTextDecoration()} ${className ?? ''} ${
+        required && styles.text_required
+      } ${getTextSize()}`}
     >
       {text}
     </p>

package/src/Typography/{TextForButton.css → TextForButton.modules.scss}

@@ -1,29 +1,29 @@
-@import '../../../example/index.css';
+@import '../../example/index.css';
 
-.text {
+.button_text {
   font-family: var(--sdFontFamilyPoppins);
   font-weight: var(--sdFontWeightMedium);
   letter-spacing: var(--sdLetterSpacingButtons);
   text-align: left;
   margin: unset;
-  padding: 2px 0px;
+  padding: 0.125rem 0px;
 }
 
-.text.bold {
+.button_text_bold {
   font-weight: var(--sdFontWeightSemibold);
 }
 
-.sm {
+.button_text_sm {
   font-size: var(--sdFontSizeSm);
   line-height: var(--sdLineHeight140);
 }
 
-.base {
+.button_text_base {
   font-size: var(--sdFontSizeBase);
   line-height: var(--sdLineHeight150);
 }
 
-.lg {
-  font-size: var(--sdFontSizeBase);
+.button_text_lg {
+  font-size: var(--sdFontSizeLg);
   line-height: var(--sdLineHeight150);
 }

package/src/Typography/TextForButton.tsx

@@ -1,5 +1,5 @@
-import React, { HTMLAttributes } from 'react';
-import './TextForButton.css';
+import { HTMLAttributes } from 'react';
+import styles from './TextForButton.modules.scss';
 
 interface TextForButtonProps extends HTMLAttributes<HTMLParagraphElement> {
   /** Text display in the Button component  */
@@ -10,20 +10,30 @@ interface TextForButtonProps extends HTMLAttributes<HTMLParagraphElement> {
   size?: 'sm' | 'base' | 'lg';
 }
 
-/** This button should only be used in the Button component  */
+/** This button should only be used in the Button component
+ * Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=52-787&mode=dev
+ */
 export const TextForButton = ({
-  text = 'Text display in button component',
+  text,
   color = 'black',
   bold = false,
   className,
   size = 'base',
   ...props
 }: TextForButtonProps) => {
+  const getTextSize = (): string => {
+    if (size === 'sm') return styles.button_text_sm;
+    else if (size === 'base') return styles.button_text_base;
+    else if (size === 'lg') return styles.button_text_lg;
+    else return styles.button_text_base;
+  };
   return (
     <p
       {...props}
       style={{ color: color }}
-      className={`text ${bold && 'bold'} ${className} ${size}`}
+      className={`${styles.button_text} ${
+        bold ? styles.button_text_bold : ''
+      } ${className ?? ''} ${getTextSize()}`}
     >
       {text}
     </p>

package/src/Typography/{TextForDropDownItem.css → TextForDropDownItem.modules.scss}

@@ -1,34 +1,31 @@
-@import '../../../example/index.css';
+@import '../../example/index.css';
 
-.text {
+.dropdown_text {
   font-family: var(--sdFontFamilyOpenSans);
-  font-weight: var(--sdFontWeightRegular);
-  padding: 2px 0px;
+  font-weight: var(--sdFontWeightMedium);
+  padding: 0.125rem 0px;
+  margin: unset;
 }
 
 /* Size classNames */
-.xs {
-  font-size: var(--sdFontSizeXs);
-  line-height: var(--sdLineHeight130);
+.dropdown_text_xs {
+  font-size: var(--sdFontSizeBase);
+  line-height: var(--sdLineHeight150);
   letter-spacing: var(--sdLetterSpacingButtons);
 }
 
-.sm {
+.dropdown_text_sm {
   font-size: var(--sdFontSizeSm);
   line-height: var(--sdLineHeight140);
 }
 
-.base {
+.dropdown_text_base {
   font-size: var(--sdFontSizeBase);
   line-height: var(--sdLineHeight150);
 }
 
 /* fontWeight classNames */
 
-.text.bold {
+.dropdown_text_bold {
   font-weight: var(--sdFontWeightBold);
 }
-
-.text.bold.xs {
-  line-height: var(--sdLineHeight120);
-}

package/src/Typography/TextForDropDownItem.tsx

@@ -1,5 +1,5 @@
-import React, { HTMLAttributes } from 'react';
-import './TextForDropDownItem.css';
+import { HTMLAttributes } from 'react';
+import styles from './TextForDropDownItem.modules.scss';
 
 interface TextForDropDownItemProps
   extends HTMLAttributes<HTMLParagraphElement> {
@@ -11,7 +11,9 @@ interface TextForDropDownItemProps
   size?: 'xs' | 'sm' | 'base';
 }
 
-/** This text should only be used for the dropdown items text  */
+/** This text should only be used for the dropdown items text
+ * Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=788-4739&mode=dev
+ */
 export const TextForDropDownItem = ({
   text = 'Text for drop down item',
   color = 'black',
@@ -20,11 +22,19 @@ export const TextForDropDownItem = ({
   className,
   ...props
 }: TextForDropDownItemProps) => {
+  const getTextSize = (): string => {
+    if (size === 'xs') return styles.dropdown_text_xs;
+    else if (size === 'sm') return styles.dropdown_text_sm;
+    else if (size === 'base') return styles.dropdown_text_base;
+    else return styles.dropdown_text_base;
+  };
   return (
     <p
       {...props}
       style={{ color: color }}
-      className={`text ${bold && 'bold'} ${size} ${className}`}
+      className={`${styles.dropdown_text} ${
+        bold && styles.dropdown_text_bold
+      } ${getTextSize()} ${className}`}
     >
       {text}
     </p>

package/src/Typography/TextWithLink.modules.scss

@@ -0,0 +1,281 @@
+@import '../../example/index.css';
+
+.text_with_link {
+  font-family: var(--sdFontFamilyOpenSans);
+  font-style: normal;
+  font-weight: var(--sdFontWeightRegular);
+  font-size: var(--sdFontSizeXs);
+  line-height: var(--sdLineHeight130);
+  letter-spacing: var(--sdLetterSpacingButtons);
+  text-align: left;
+  margin: unset;
+  a {
+    margin-left: 0.5rem;
+    color: var(--color-primary-500, #07f);
+  }
+}
+
+.text_with_link_underline {
+  text-decoration: var(--sdUnderline);
+}
+
+.text_with_link_line_through {
+  text-decoration: var(--sdLineThrough);
+}
+
+.text_with_link_required::after {
+  content: ' *';
+  color: red;
+}
+
+/* Regular */
+
+.text_with_link.text_with_link_xs.text_with_link_regular {
+  font: var(--sdTypoTextNoDecorationRegularXs);
+  padding: 0.063rem 0px;
+}
+
+.tetext_with_linkxt.text_with_link_sm.text_with_link_regular {
+  font: var(--sdTypoTextNoDecorationRegularSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_base.text_with_link_regular {
+  font: var(--sdTypoTextNoDecorationRegularBase);
+  padding: 0.125rem 0px;
+}
+
+.text_with_link.text_with_link_lg.text_with_link_regular {
+  font: var(--sdTypoTextNoDecorationRegularLg);
+  padding: 0.125rem 0px;
+}
+
+.text_with_link.text_with_link_xl.text_with_link_regular {
+  font: var(--sdTypoTextNoDecorationRegularXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_xxl.text_with_link_regular {
+  font: var(--sdTypoTextNoDecorationRegular2xl);
+  padding: 0px;
+}
+
+.text_with_link.text_with_link_xxxl.text_with_link_regular {
+  font: var(--sdTypoTextNoDecorationRegular3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_xxxxl.text_with_link_regular {
+  font: var(--sdTypoTextNoDecorationRegular4xl);
+  padding: 0.188rem 0px 0.063rem;
+}
+
+/* Regular Italic */
+
+.text_with_link.text_with_link_xs.text_with_link_regular.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationItalicXs);
+  padding: 0.063rem 0px 0.125rem;
+}
+
+.text_with_link.text_with_link_sm.text_with_link_regular.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationItalicSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_base.text-regular.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationItalicBase);
+  padding: 0.125rem 0px;
+}
+
+.text_with_link.text_with_link_lg.text_with_link_regular.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationItalicLg);
+  padding: 0.125rem 0px;
+}
+
+.text_with_link.text_with_link_xl.text_with_link_regular.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationItalicXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_xxl.text_with_link_regular.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationItalic2xl);
+  padding: 0px;
+}
+
+.text_with_link.text_with_link_xxxl.text_with_link_regular.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationItalic3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_xxxxl.text_with_link_regular.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationItalic4xl);
+  padding: 0.188rem 0px 0.063rem;
+}
+
+/* Bold */
+
+.text_with_link.text_with_link_xs.text_with_link_bold {
+  font: var(--sdTypoTextNoDecorationBoldXs);
+  padding: 0.063rem 0px 0.125rem;
+}
+
+.text_with_link.text_with_link_sm.text_with_link_bold {
+  font: var(--sdTypoTextNoDecorationBoldSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_base.text_with_link_bold {
+  font: var(--sdTypoTextNoDecorationBoldBase);
+  padding: 0.125rem 0px;
+}
+
+.text_with_link.text_with_link_lg.text_with_link_bold {
+  font: var(--sdTypoTextNoDecorationBoldLg);
+  padding: 0.125rem 0px;
+}
+
+.text_with_link.text_with_link_xl.text_with_link_bold {
+  font: var(--sdTypoTextNoDecorationBoldXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_xxl.text_with_link_bold {
+  font: var(--sdTypoTextNoDecorationBold2xl);
+  padding: 0px;
+}
+
+.text_with_link.text_with_link_xxxl.text_with_link_bold {
+  font: var(--sdTypoTextNoDecorationBold3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_xxxxl.text_with_link_bold {
+  font: var(--sdTypoTextNoDecorationBold4xl);
+  padding: 0.188rem 0px 0.063rem;
+}
+
+/* Bold Italic */
+
+.text_with_link.text_with_link_xs.text_with_link_bold.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalicXs);
+  padding: 0.063rem 0px 0.125rem;
+}
+
+.text_with_link.text_with_link_sm.text_with_link_bold.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalicSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_base.text_with_link_bold.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalicBase);
+  padding: 0.125rem 0px;
+}
+
+.text_with_link.text_with_link_lg.text_with_link_bold.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalicLg);
+  padding: 0.125rem 0px;
+}
+
+.text_with_link.text_with_link_xl.text_with_link_bold.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalicXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_xxl.text_with_link_bold.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalic2xl);
+  padding: 0px;
+}
+
+.text_with_link.text_with_link_xxxl.text_with_link_bold.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalic3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_xxxxl.text_with_link_bold.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalic4xl);
+  padding: 0.188rem 0px 0.063rem;
+}
+
+/* Semi Bold */
+
+.text_with_link.text_with_link_xs.text_with_link_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBoldXs);
+  padding: 0.063rem 0px 0.125rem;
+}
+
+.text_with_link.text_with_link_sm.text_with_link_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBoldSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_base.text_with_link_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBoldBase);
+  padding: 0.125rem 0px;
+}
+
+.text_with_link.text_with_link_lg.text_with_link_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBoldLg);
+  padding: 0.125rem 0px;
+}
+
+.text_with_link.text_with_link_xl.text_with_link_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBoldXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_xxl.text_with_link_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBold2xl);
+  padding: 0px;
+}
+
+.text_with_link.text_with_link_xxxl.text_with_link_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBold3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_xxxxl.text_with_link_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBold4xl);
+  padding: 0.188rem 0px 0.063rem;
+}
+
+/* Semi Bold Italic */
+
+.text_with_link.text_with_link_xs.text_with_link_semi_bold.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalicXs);
+  padding: 0.063rem 0px 0.125rem;
+}
+
+.text_with_link.text_with_link_sm.text_with_link_semi_bold.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalicSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_base.text_with_link_semi_bold.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalicBase);
+  padding: 0.125rem 0px;
+}
+
+.text_with_link.text_with_link_lg.text_with_link_semi_bold.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalicLg);
+  padding: 0.125rem 0px;
+}
+
+.text_with_link.text_with_link_xl.text_with_link_semi_bold.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalicXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_xxl.text_with_link_semi_bold.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalic2xl);
+  padding: 0px;
+}
+
+.text_with_link.text_with_link_xxxl.text_with_link_semi_bold.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalic3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text_with_link.text_with_link_xxxxl.text_with_link_semi_bold.text_with_link_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalic4xl);
+  padding: 0.188rem 0px 0.063rem;
+}

package/src/Typography/TextWithLink.tsx

@@ -0,0 +1,65 @@
+import { 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;
+}
+
+/** This text should be use to display basic text */
+export const TextWithLink = ({
+  text,
+  color = 'black',
+  size = 'base',
+  weight = 'semi-bold',
+  italic = false,
+  textDecoration,
+  className,
+  textLink,
+  link,
+  ...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}
+      <a href={link}>{textLink}</a>
+    </p>
+  );
+};

package/src/Typography/{Title.css → Title.modules.scss}

@@ -1,76 +1,78 @@
-@import '../../../example/index.css';
+@import '../../example/index.css';
 
-.text {
+.title {
   font-family: var(--sdFontFamilyPoppins);
-  font-weight: var(--sdFontWeightSemibold);
   letter-spacing: var(--sdLetterSpacingHeadings);
   text-align: left;
   margin: unset;
 }
 
-.italic {
+.title_italic {
   font-style: italic;
 }
+.title_normal {
+  font-style: normal;
+}
 
 /* Size classNames */
-.xs {
-  font-size: var(--sdFontSizeSm);
-  line-height: var(--sdLineHeight140);
-  padding: 1px 0px;
+.title_xs {
+  font-size: var(--sdFontSizeXs);
+  line-height: var(--sdLineHeight130);
+  padding: 0.063rem 0px;
 }
 
-.sm {
+.title_sm {
   font-size: var(--sdFontSizeSm);
   line-height: var(--sdLineHeight140);
-  padding: 3px 0px 1px;
+  padding: 0.188rem 0px 0.063rem;
 }
 
-.base {
+.title_base {
   font-size: var(--sdFontSizeBase);
   line-height: var(--sdLineHeight150);
-  padding: 2px 0px;
+  padding: 0.125rem 0px;
 }
 
-.lg {
+.title_lg {
   font-size: var(--sdFontSizeLg);
   line-height: var(--sdLineHeight140);
-  padding: 3px 0px 1px;
+  padding: 0.188rem 0px 0.063rem;
 }
 
-.xl {
+.title_xl {
   font-size: var(--sdFontSizeXl);
   line-height: var(--sdLineHeight150);
-  padding: 2px 0px;
+  padding: 0.125rem 0px;
 }
 
-.xxl {
+.title_xxl {
   font-size: var(--sdFontSize2xl);
   line-height: var(--sdLineHeight150);
-  padding: 1px 0px 3px;
+  padding: 0.063rem 0px 0.188rem;
 }
 
-.xxxl {
+.title_xxxl {
   font-size: var(--sdFontSize3xl);
   line-height: 150%;
-  padding: 3px 0px 1px;
+  padding: 0.188rem 0px 0.063rem;
 }
 
-.xxxxl {
+.title_xxxxl {
   font-size: var(--sdFontSize4xl);
   line-height: var(--sdLineHeight150);
-  padding: 2px 0px;
+  padding: 0.125rem 0px;
 }
 
 /* fontWeight classNames */
 
-.bold {
+.title_bold {
   font-weight: var(--sdFontWeightBold);
 }
 
-.semi-bold {
+.title_semi_bold {
   font-weight: var(--sdFontWeightSemibold);
 }
 
-.regular {
+.title_regular {
   font-weight: var(--sdFontWeightRegular);
 }