odaptos_design_system 2.0.5 → 2.0.7

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

@@ -1,277 +1,277 @@
-@import '../../../styles/index.css';
-
-.text {
-  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;
-}
-
-.text_underline {
-  text-decoration: var(--sdUnderline);
-}
-
-.text_line_through {
-  text-decoration: var(--sdLineThrough);
-}
-
-.text_required::after {
-  content: ' *';
-  color: red;
-}
-
-/* Regular */
-
-.text.text_xs.text_regular {
-  font: var(--sdTypoTextNoDecorationRegularXs);
-  padding: 0.063rem 0px;
-}
-
-.text.text_sm.text_regular {
-  font: var(--sdTypoTextNoDecorationRegularSm);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_base.text_regular {
-  font: var(--sdTypoTextNoDecorationRegularBase);
-  padding: 0.125rem 0px;
-}
-
-.text.text_lg.text_regular {
-  font: var(--sdTypoTextNoDecorationRegularLg);
-  padding: 0.125rem 0px;
-}
-
-.text.text_xl.text_regular {
-  font: var(--sdTypoTextNoDecorationRegularXl);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_xxl.text_regular {
-  font: var(--sdTypoTextNoDecorationRegular2xl);
-  padding: 0px;
-}
-
-.text.text_xxxl.text_regular {
-  font: var(--sdTypoTextNoDecorationRegular3xl);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_xxxxl.text_regular {
-  font: var(--sdTypoTextNoDecorationRegular4xl);
-  padding: 0.188rem 0px 0.063rem;
-}
-
-/* Regular Italic */
-
-.text.text_xs.text_regular.text_italic {
-  font: var(--sdTypoTextNoDecorationItalicXs);
-  padding: 0.063rem 0px 0.125rem;
-}
-
-.text.text_sm.text_regular.text_italic {
-  font: var(--sdTypoTextNoDecorationItalicSm);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_base.text_regular.text_italic {
-  font: var(--sdTypoTextNoDecorationItalicBase);
-  padding: 0.125rem 0px;
-}
-
-.text.text_lg.text_regular.text_italic {
-  font: var(--sdTypoTextNoDecorationItalicLg);
-  padding: 0.125rem 0px;
-}
-
-.text.text_xl.text_regular.text_italic {
-  font: var(--sdTypoTextNoDecorationItalicXl);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_xxl.text_regular.text_italic {
-  font: var(--sdTypoTextNoDecorationItalic2xl);
-  padding: 0px;
-}
-
-.text.text_xxxl.text_regular.text_italic {
-  font: var(--sdTypoTextNoDecorationItalic3xl);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_xxxxl.text_regular.text_italic {
-  font: var(--sdTypoTextNoDecorationItalic4xl);
-  padding: 0.188rem 0px 0.063rem;
-}
-
-/* Bold */
-
-.text.text_xs.text_bold {
-  font: var(--sdTypoTextNoDecorationBoldXs);
-  padding: 0.063rem 0px 0.125rem;
-}
-
-.text.text_sm.text_bold {
-  font: var(--sdTypoTextNoDecorationBoldSm);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_base.text_bold {
-  font: var(--sdTypoTextNoDecorationBoldBase);
-  padding: 0.125rem 0px;
-}
-
-.text.text_lg.text_bold {
-  font: var(--sdTypoTextNoDecorationBoldLg);
-  padding: 0.125rem 0px;
-}
-
-.text.text_xl.text_bold {
-  font: var(--sdTypoTextNoDecorationBoldXl);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_xxl.text_bold {
-  font: var(--sdTypoTextNoDecorationBold2xl);
-  padding: 0px;
-}
-
-.text.text_xxxl.text_bold {
-  font: var(--sdTypoTextNoDecorationBold3xl);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_xxxxl.text_bold {
-  font: var(--sdTypoTextNoDecorationBold4xl);
-  padding: 0.188rem 0px 0.063rem;
-}
-
-/* Bold Italic */
-
-.text.text_xs.text_bold.text_italic {
-  font: var(--sdTypoTextNoDecorationBoldItalicXs);
-  padding: 0.063rem 0px 0.125rem;
-}
-
-.text.text_sm.text_bold.text_italic {
-  font: var(--sdTypoTextNoDecorationBoldItalicSm);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_base.text_bold.text_italic {
-  font: var(--sdTypoTextNoDecorationBoldItalicBase);
-  padding: 0.125rem 0px;
-}
-
-.text.text_lg.text_bold.text_italic {
-  font: var(--sdTypoTextNoDecorationBoldItalicLg);
-  padding: 0.125rem 0px;
-}
-
-.text.text_xl.text_bold.text_italic {
-  font: var(--sdTypoTextNoDecorationBoldItalicXl);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_xxl.text_bold.text_italic {
-  font: var(--sdTypoTextNoDecorationBoldItalic2xl);
-  padding: 0px;
-}
-
-.text.text_xxxl.text_bold.text_italic {
-  font: var(--sdTypoTextNoDecorationBoldItalic3xl);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_xxxxl.text_bold.text_italic {
-  font: var(--sdTypoTextNoDecorationBoldItalic4xl);
-  padding: 0.188rem 0px 0.063rem;
-}
-
-/* Semi Bold */
-
-.text.text_xs.text_semi_bold {
-  font: var(--sdTypoTextNoDecorationSemiBoldXs);
-  padding: 0.063rem 0px 0.125rem;
-}
-
-.text.text_sm.text_semi_bold {
-  font: var(--sdTypoTextNoDecorationSemiBoldSm);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_base.text_semi_bold {
-  font: var(--sdTypoTextNoDecorationSemiBoldBase);
-  padding: 0.125rem 0px;
-}
-
-.text.text_lg.text_semi_bold {
-  font: var(--sdTypoTextNoDecorationSemiBoldLg);
-  padding: 0.125rem 0px;
-}
-
-.text.text_xl.text_semi_bold {
-  font: var(--sdTypoTextNoDecorationSemiBoldXl);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_xxl.text_semi_bold {
-  font: var(--sdTypoTextNoDecorationSemiBold2xl);
-  padding: 0px;
-}
-
-.text.text_xxxl.text_semi_bold {
-  font: var(--sdTypoTextNoDecorationSemiBold3xl);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_xxxxl.text_semi_bold {
-  font: var(--sdTypoTextNoDecorationSemiBold4xl);
-  padding: 0.188rem 0px 0.063rem;
-}
-
-/* Semi Bold Italic */
-
-.text.text_xs.text_semi_bold.text_italic {
-  font: var(--sdTypoTextNoDecorationSemiBoldItalicXs);
-  padding: 0.063rem 0px 0.125rem;
-}
-
-.text.text_sm.text_semi_bold.text_italic {
-  font: var(--sdTypoTextNoDecorationSemiBoldItalicSm);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_base.text_semi_bold.text_italic {
-  font: var(--sdTypoTextNoDecorationSemiBoldItalicBase);
-  padding: 0.125rem 0px;
-}
-
-.text.text_lg.text_semi_bold.text_italic {
-  font: var(--sdTypoTextNoDecorationSemiBoldItalicLg);
-  padding: 0.125rem 0px;
-}
-
-.text.text_xl.text_semi_bold.text_italic {
-  font: var(--sdTypoTextNoDecorationSemiBoldItalicXl);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_xxl.text_semi_bold.text_italic {
-  font: var(--sdTypoTextNoDecorationSemiBoldItalic2xl);
-  padding: 0px;
-}
-
-.text.text_xxxl.text_semi_bold.text_italic {
-  font: var(--sdTypoTextNoDecorationSemiBoldItalic3xl);
-  padding: 0.063rem 0px 0.188rem;
-}
-
-.text.text_xxxxl.text_semi_bold.text_italic {
-  font: var(--sdTypoTextNoDecorationSemiBoldItalic4xl);
-  padding: 0.188rem 0px 0.063rem;
-}
+@import '../../../styles/index.css';
+
+.text {
+  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;
+}
+
+.text_underline {
+  text-decoration: var(--sdUnderline);
+}
+
+.text_line_through {
+  text-decoration: var(--sdLineThrough);
+}
+
+.text_required::after {
+  content: ' *';
+  color: red;
+}
+
+/* Regular */
+
+.text.text_xs.text_regular {
+  font: var(--sdTypoTextNoDecorationRegularXs);
+  padding: 0.063rem 0px;
+}
+
+.text.text_sm.text_regular {
+  font: var(--sdTypoTextNoDecorationRegularSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_base.text_regular {
+  font: var(--sdTypoTextNoDecorationRegularBase);
+  padding: 0.125rem 0px;
+}
+
+.text.text_lg.text_regular {
+  font: var(--sdTypoTextNoDecorationRegularLg);
+  padding: 0.125rem 0px;
+}
+
+.text.text_xl.text_regular {
+  font: var(--sdTypoTextNoDecorationRegularXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxl.text_regular {
+  font: var(--sdTypoTextNoDecorationRegular2xl);
+  padding: 0px;
+}
+
+.text.text_xxxl.text_regular {
+  font: var(--sdTypoTextNoDecorationRegular3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxxxl.text_regular {
+  font: var(--sdTypoTextNoDecorationRegular4xl);
+  padding: 0.188rem 0px 0.063rem;
+}
+
+/* Regular Italic */
+
+.text.text_xs.text_regular.text_italic {
+  font: var(--sdTypoTextNoDecorationItalicXs);
+  padding: 0.063rem 0px 0.125rem;
+}
+
+.text.text_sm.text_regular.text_italic {
+  font: var(--sdTypoTextNoDecorationItalicSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_base.text_regular.text_italic {
+  font: var(--sdTypoTextNoDecorationItalicBase);
+  padding: 0.125rem 0px;
+}
+
+.text.text_lg.text_regular.text_italic {
+  font: var(--sdTypoTextNoDecorationItalicLg);
+  padding: 0.125rem 0px;
+}
+
+.text.text_xl.text_regular.text_italic {
+  font: var(--sdTypoTextNoDecorationItalicXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxl.text_regular.text_italic {
+  font: var(--sdTypoTextNoDecorationItalic2xl);
+  padding: 0px;
+}
+
+.text.text_xxxl.text_regular.text_italic {
+  font: var(--sdTypoTextNoDecorationItalic3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxxxl.text_regular.text_italic {
+  font: var(--sdTypoTextNoDecorationItalic4xl);
+  padding: 0.188rem 0px 0.063rem;
+}
+
+/* Bold */
+
+.text.text_xs.text_bold {
+  font: var(--sdTypoTextNoDecorationBoldXs);
+  padding: 0.063rem 0px 0.125rem;
+}
+
+.text.text_sm.text_bold {
+  font: var(--sdTypoTextNoDecorationBoldSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_base.text_bold {
+  font: var(--sdTypoTextNoDecorationBoldBase);
+  padding: 0.125rem 0px;
+}
+
+.text.text_lg.text_bold {
+  font: var(--sdTypoTextNoDecorationBoldLg);
+  padding: 0.125rem 0px;
+}
+
+.text.text_xl.text_bold {
+  font: var(--sdTypoTextNoDecorationBoldXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxl.text_bold {
+  font: var(--sdTypoTextNoDecorationBold2xl);
+  padding: 0px;
+}
+
+.text.text_xxxl.text_bold {
+  font: var(--sdTypoTextNoDecorationBold3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxxxl.text_bold {
+  font: var(--sdTypoTextNoDecorationBold4xl);
+  padding: 0.188rem 0px 0.063rem;
+}
+
+/* Bold Italic */
+
+.text.text_xs.text_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalicXs);
+  padding: 0.063rem 0px 0.125rem;
+}
+
+.text.text_sm.text_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalicSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_base.text_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalicBase);
+  padding: 0.125rem 0px;
+}
+
+.text.text_lg.text_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalicLg);
+  padding: 0.125rem 0px;
+}
+
+.text.text_xl.text_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalicXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxl.text_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalic2xl);
+  padding: 0px;
+}
+
+.text.text_xxxl.text_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalic3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxxxl.text_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalic4xl);
+  padding: 0.188rem 0px 0.063rem;
+}
+
+/* Semi Bold */
+
+.text.text_xs.text_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBoldXs);
+  padding: 0.063rem 0px 0.125rem;
+}
+
+.text.text_sm.text_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBoldSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_base.text_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBoldBase);
+  padding: 0.125rem 0px;
+}
+
+.text.text_lg.text_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBoldLg);
+  padding: 0.125rem 0px;
+}
+
+.text.text_xl.text_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBoldXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxl.text_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBold2xl);
+  padding: 0px;
+}
+
+.text.text_xxxl.text_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBold3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxxxl.text_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBold4xl);
+  padding: 0.188rem 0px 0.063rem;
+}
+
+/* Semi Bold Italic */
+
+.text.text_xs.text_semi_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalicXs);
+  padding: 0.063rem 0px 0.125rem;
+}
+
+.text.text_sm.text_semi_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalicSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_base.text_semi_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalicBase);
+  padding: 0.125rem 0px;
+}
+
+.text.text_lg.text_semi_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalicLg);
+  padding: 0.125rem 0px;
+}
+
+.text.text_xl.text_semi_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalicXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxl.text_semi_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalic2xl);
+  padding: 0px;
+}
+
+.text.text_xxxl.text_semi_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalic3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxxxl.text_semi_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalic4xl);
+  padding: 0.188rem 0px 0.063rem;
+}

package/src/Atoms/Typography/Text.tsx

@@ -1,69 +1,69 @@
-import React, { 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';
-  weight?: 'semi-bold' | 'bold' | 'regular';
-  italic?: boolean;
-  textDecoration?: 'underline' | 'line-through';
-  className?: string;
-  required?: boolean;
-  id?: string;
-}
-
-/** 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,
-  color = '#26292E',
-  size = 'base',
-  weight = 'regular',
-  italic = false,
-  textDecoration,
-  className,
-  required,
-  id,
-  ...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}
-      id={id}
-      style={{ color: color }}
-      className={`${styles.text} ${
-        italic ? styles.text_italic : ''
-      } ${getTextWeight()} ${getTextDecoration()} ${className ?? ''} ${
-        required && styles.text_required
-      } ${getTextSize()}`}
-    >
-      {text}
-    </p>
-  );
-};
+import React, { 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';
+  weight?: 'semi-bold' | 'bold' | 'regular';
+  italic?: boolean;
+  textDecoration?: 'underline' | 'line-through';
+  className?: string;
+  required?: boolean;
+  id?: string;
+}
+
+/** 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,
+  color = '#26292E',
+  size = 'base',
+  weight = 'regular',
+  italic = false,
+  textDecoration,
+  className,
+  required,
+  id,
+  ...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}
+      id={id}
+      style={{ color: color }}
+      className={`${styles.text} ${
+        italic ? styles.text_italic : ''
+      } ${getTextWeight()} ${getTextDecoration()} ${className ?? ''} ${
+        required && styles.text_required
+      } ${getTextSize()}`}
+    >
+      {text}
+    </p>
+  );
+};