odaptos_design_system 2.0.5 → 2.0.7

package/src/Organisms/TextInput/TextInput.tsx

@@ -1,222 +1,222 @@
-import React from 'react';
-import { InputAdornment, TextField } from '@mui/material';
-import styles from './TextInput.modules.scss';
-import { styled } from '@mui/material/styles';
-import { Text, colors } from '../../';
-
-const CssTextField = styled(TextField)({
-  '& .MuiInputBase-input': {
-    color: '#26292E',
-    fontFamily: 'OpenSans !important',
-    fontSize: '1rem',
-  },
-  '& .MuiInputBase-input.Mui-disabled': {
-    color: '#26292E',
-    fontFamily: 'OpenSans !important',
-    fontSize: '1rem',
-  },
-  '& .MuiInputBase-input.MuiOutlinedInput-input.Mui-disabled': {
-    WebkitTextFillColor: colors.neutral_600,
-  },
-  '& .Mui-error': {
-    color: '#26292E',
-  },
-  '& .MuiFormHelperText-root': {
-    color: '#F54C4C',
-  },
-  '& .MuiFormLabel-asterisk': {
-    color: '#F54C4C',
-  },
-  '& .MuiOutlinedInput-root.Mui-disabled': {
-    cursor: 'not-allowed',
-    color: '#26292E',
-    fieldset: {
-      borderColor: '#BCBDBE',
-    },
-    '&:hover fieldset': {
-      borderColor: '#BCBDBE',
-    },
-  },
-  '& label': {
-    color: '#26292E',
-    fontFamily: 'OpenSans !important',
-    fontSize: '1rem',
-  },
-  '& label.Mui-disabled.Mui-error': {
-    color: '#26292E',
-    opacity: 0.5,
-    fontFamily: 'OpenSans !important',
-    fontSize: '1rem',
-  },
-  '& label.Mui-focused': {
-    color: '#26292E',
-    fontFamily: 'OpenSans',
-    fontSize: '1rem',
-    backgroundColor: 'transparent',
-    marginRight: 5,
-    paddingRight: 5,
-  },
-  '& .MuiOutlinedInput-root': {
-    fontFamily: 'OpenSans',
-    '& fieldset': {
-      borderColor: '#96989A',
-    },
-    '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
-      display: 'none',
-    },
-    '& input[type=number]': {
-      MozAppearance: 'textfield',
-    },
-    '&:hover fieldset': {
-      borderColor: '#0077FF',
-    },
-    '&.Mui-focused fieldset': {
-      borderColor: '#0077FF',
-    },
-    '&.Mui-error fieldset': {
-      borderColor: '#F54C4C',
-    },
-    '&.Mui-disabled .Mui-focused fieldset': {
-      borderColor: 'rgba(0, 119, 255, 0.5)',
-    },
-    '& .MuiAutocomplete-endAdornment': {
-      height: '99%',
-      marginTop: '-0.20rem',
-      '& .MuiButtonBase-root': {
-        height: '99%',
-        '&:hover': {
-          background: 'transparent',
-        },
-      },
-    },
-  },
-});
-
-interface InputProps {
-  className?: string;
-  rightIcon?: JSX.Element;
-  leftIcon?: JSX.Element;
-  variant?: 'filled' | 'standard' | 'outlined';
-  topLabel?: string | undefined;
-  topLabelWeight?: 'semi-bold' | 'bold' | 'regular';
-  topLabelSize?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
-  placeholder?: string;
-  label?: string;
-  required?: boolean | undefined;
-  name?: string;
-  value: string | number;
-  onChange: (event: any) => void;
-  onBlur?: (event: any) => void;
-  onKeyDown?: () => void;
-  disabled?: boolean;
-  type?: 'number' | 'text' | 'password';
-  id?: string;
-  helperText?: string;
-  errorText?: string;
-  error?: boolean;
-  multiline?: boolean;
-  inputProps?: any;
-}
-
-/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=738-5899&mode=dev */
-export const TextInput = (props: InputProps) => {
-  const {
-    className,
-    rightIcon,
-    leftIcon,
-    variant,
-    topLabel,
-    topLabelWeight,
-    topLabelSize,
-    placeholder = '',
-    label,
-    required = false,
-    name,
-    value,
-    onChange,
-    onBlur,
-    disabled,
-    error,
-    type,
-    id,
-    helperText,
-    errorText,
-    multiline,
-    inputProps,
-    onKeyDown,
-  } = props;
-
-  const endAdornment = rightIcon ? (
-    <InputAdornment position="end">{rightIcon}</InputAdornment>
-  ) : undefined;
-  const startAdornment = leftIcon ? (
-    <InputAdornment position="start">{leftIcon}</InputAdornment>
-  ) : undefined;
-
-  const InputLabelProps = label === undefined ? { shrink: false } : {};
-
-  return (
-    <div className={`${className} ${styles.input}`} id={id}>
-      {topLabel && (
-        <Text
-          text={`${topLabel ? topLabel : ''}`}
-          weight={topLabelWeight || 'bold'}
-          size={topLabelSize || 'base'}
-          className={styles.input_top_label}
-          required={required}
-        />
-      )}
-      <CssTextField
-        fullWidth
-        size="small"
-        InputProps={{
-          endAdornment,
-          startAdornment,
-          style: {
-            fontFamily: 'OpenSans',
-            fontSize: '1rem',
-          },
-        }}
-        InputLabelProps={{
-          style: { fontFamily: 'OpenSans', fontSize: '1rem' },
-          ...InputLabelProps,
-        }}
-        inputProps={inputProps}
-        variant={variant}
-        onChange={onChange}
-        label={`${label && topLabel === undefined ? label : ''}`}
-        placeholder={`${placeholder}`}
-        name={name}
-        type={type ?? 'text'}
-        value={value ? value : ''}
-        disabled={disabled}
-        required={required}
-        error={error}
-        onBlur={onBlur}
-        multiline={multiline}
-        onKeyUp={(e: any) => {
-          if (e.key === 'Enter' && onKeyDown) {
-            onKeyDown();
-          }
-        }}
-      />
-      {errorText && error && (
-        <Text
-          size="xs"
-          color="#F54C4C"
-          italic
-          text={errorText}
-          className={styles.text_below}
-        />
-      )}
-      {helperText && (
-        <Text
-          size="xs"
-          italic
-          text={helperText}
-          className={styles.text_below}
-        />
-      )}
-    </div>
-  );
-};
+import React from 'react';
+import { InputAdornment, TextField } from '@mui/material';
+import styles from './TextInput.modules.scss';
+import { styled } from '@mui/material/styles';
+import { Text, colors } from '../../';
+
+const CssTextField = styled(TextField)({
+  '& .MuiInputBase-input': {
+    color: '#26292E',
+    fontFamily: 'OpenSans !important',
+    fontSize: '1rem',
+  },
+  '& .MuiInputBase-input.Mui-disabled': {
+    color: '#26292E',
+    fontFamily: 'OpenSans !important',
+    fontSize: '1rem',
+  },
+  '& .MuiInputBase-input.MuiOutlinedInput-input.Mui-disabled': {
+    WebkitTextFillColor: colors.neutral_600,
+  },
+  '& .Mui-error': {
+    color: '#26292E',
+  },
+  '& .MuiFormHelperText-root': {
+    color: '#F54C4C',
+  },
+  '& .MuiFormLabel-asterisk': {
+    color: '#F54C4C',
+  },
+  '& .MuiOutlinedInput-root.Mui-disabled': {
+    cursor: 'not-allowed',
+    color: '#26292E',
+    fieldset: {
+      borderColor: '#BCBDBE',
+    },
+    '&:hover fieldset': {
+      borderColor: '#BCBDBE',
+    },
+  },
+  '& label': {
+    color: '#26292E',
+    fontFamily: 'OpenSans !important',
+    fontSize: '1rem',
+  },
+  '& label.Mui-disabled.Mui-error': {
+    color: '#26292E',
+    opacity: 0.5,
+    fontFamily: 'OpenSans !important',
+    fontSize: '1rem',
+  },
+  '& label.Mui-focused': {
+    color: '#26292E',
+    fontFamily: 'OpenSans',
+    fontSize: '1rem',
+    backgroundColor: 'transparent',
+    marginRight: 5,
+    paddingRight: 5,
+  },
+  '& .MuiOutlinedInput-root': {
+    fontFamily: 'OpenSans',
+    '& fieldset': {
+      borderColor: '#96989A',
+    },
+    '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
+      display: 'none',
+    },
+    '& input[type=number]': {
+      MozAppearance: 'textfield',
+    },
+    '&:hover fieldset': {
+      borderColor: '#0077FF',
+    },
+    '&.Mui-focused fieldset': {
+      borderColor: '#0077FF',
+    },
+    '&.Mui-error fieldset': {
+      borderColor: '#F54C4C',
+    },
+    '&.Mui-disabled .Mui-focused fieldset': {
+      borderColor: 'rgba(0, 119, 255, 0.5)',
+    },
+    '& .MuiAutocomplete-endAdornment': {
+      height: '99%',
+      marginTop: '-0.20rem',
+      '& .MuiButtonBase-root': {
+        height: '99%',
+        '&:hover': {
+          background: 'transparent',
+        },
+      },
+    },
+  },
+});
+
+interface InputProps {
+  className?: string;
+  rightIcon?: JSX.Element;
+  leftIcon?: JSX.Element;
+  variant?: 'filled' | 'standard' | 'outlined';
+  topLabel?: string | undefined;
+  topLabelWeight?: 'semi-bold' | 'bold' | 'regular';
+  topLabelSize?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
+  placeholder?: string;
+  label?: string;
+  required?: boolean | undefined;
+  name?: string;
+  value: string | number;
+  onChange: (event: any) => void;
+  onBlur?: (event: any) => void;
+  onKeyDown?: () => void;
+  disabled?: boolean;
+  type?: 'number' | 'text' | 'password';
+  id?: string;
+  helperText?: string;
+  errorText?: string;
+  error?: boolean;
+  multiline?: boolean;
+  inputProps?: any;
+}
+
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=738-5899&mode=dev */
+export const TextInput = (props: InputProps) => {
+  const {
+    className,
+    rightIcon,
+    leftIcon,
+    variant,
+    topLabel,
+    topLabelWeight,
+    topLabelSize,
+    placeholder = '',
+    label,
+    required = false,
+    name,
+    value,
+    onChange,
+    onBlur,
+    disabled,
+    error,
+    type,
+    id,
+    helperText,
+    errorText,
+    multiline,
+    inputProps,
+    onKeyDown,
+  } = props;
+
+  const endAdornment = rightIcon ? (
+    <InputAdornment position="end">{rightIcon}</InputAdornment>
+  ) : undefined;
+  const startAdornment = leftIcon ? (
+    <InputAdornment position="start">{leftIcon}</InputAdornment>
+  ) : undefined;
+
+  const InputLabelProps = label === undefined ? { shrink: false } : {};
+
+  return (
+    <div className={`${className} ${styles.input}`} id={id}>
+      {topLabel && (
+        <Text
+          text={`${topLabel ? topLabel : ''}`}
+          weight={topLabelWeight || 'bold'}
+          size={topLabelSize || 'base'}
+          className={styles.input_top_label}
+          required={required}
+        />
+      )}
+      <CssTextField
+        fullWidth
+        size="small"
+        InputProps={{
+          endAdornment,
+          startAdornment,
+          style: {
+            fontFamily: 'OpenSans',
+            fontSize: '1rem',
+          },
+        }}
+        InputLabelProps={{
+          style: { fontFamily: 'OpenSans', fontSize: '1rem' },
+          ...InputLabelProps,
+        }}
+        inputProps={inputProps}
+        variant={variant}
+        onChange={onChange}
+        label={`${label && topLabel === undefined ? label : ''}`}
+        placeholder={`${placeholder}`}
+        name={name}
+        type={type ?? 'text'}
+        value={value ? value : ''}
+        disabled={disabled}
+        required={required}
+        error={error}
+        onBlur={onBlur}
+        multiline={multiline}
+        onKeyUp={(e: any) => {
+          if (e.key === 'Enter' && onKeyDown) {
+            onKeyDown();
+          }
+        }}
+      />
+      {errorText && error && (
+        <Text
+          size="xs"
+          color="#F54C4C"
+          italic
+          text={errorText}
+          className={styles.text_below}
+        />
+      )}
+      {helperText && (
+        <Text
+          size="xs"
+          italic
+          text={helperText}
+          className={styles.text_below}
+        />
+      )}
+    </div>
+  );
+};

package/src/Organisms/Textarea/Textarea.module.scss

@@ -1,19 +1,19 @@
-.text_area_container {
-  width: 100%;
-
-  .helperTexts {
-    display: flex;
-    justify-content: space-between;
-    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
-
-    .counter {
-      margin-left: auto;
-    }
-  }
-
-  font-family: OpenSans;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 150%;
-}
+.text_area_container {
+  width: 100%;
+
+  .helperTexts {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
+
+    .counter {
+      margin-left: auto;
+    }
+  }
+
+  font-family: OpenSans;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+}

package/src/Organisms/Textarea/Textarea.tsx

@@ -1,97 +1,97 @@
-import React, { useEffect, useState } from 'react';
-import { TextInput, Text } from '../../';
-
-import styles from './Textarea.module.scss';
-
-interface TextareaProps {
-  className?: string;
-  topLabel?: string;
-  topLabelWeight?: 'semi-bold' | 'bold' | 'regular';
-  topLabelSize?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
-  placeholder?: string;
-  label?: string;
-  required?: boolean;
-  name?: string;
-  value: string | number;
-  onChange: (event: any) => void;
-  onBlur?: (event: any) => void;
-  onKeyDown?: () => void;
-  id?: string;
-  error?: boolean;
-  maxCharacters: number;
-  errorText?: string;
-  helperText?: string;
-  disabled?: boolean;
-}
-
-/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=738-6407&mode=dev */
-export const Textarea = ({
-  name,
-  label,
-  className,
-  id,
-  onChange,
-  onBlur,
-  placeholder,
-  value,
-  maxCharacters,
-  topLabel,
-  topLabelWeight,
-  topLabelSize,
-  errorText,
-  helperText,
-  error,
-  disabled,
-  required = false,
-  onKeyDown,
-}: TextareaProps) => {
-  const [charCount, setCharCount] = useState(0);
-
-  const handleChange = (e: any) => {
-    const newCharCount = e.target.value.length;
-    if (newCharCount <= maxCharacters) {
-      setCharCount(newCharCount);
-      onChange(e);
-    }
-  };
-
-  useEffect(() => {
-    setCharCount(String(value).length);
-  }, []);
-
-  return (
-    <div className={styles.text_area_container}>
-      <TextInput
-        name={name}
-        variant="outlined"
-        multiline
-        label={label}
-        placeholder={placeholder}
-        className={className}
-        id={id}
-        onChange={handleChange}
-        onBlur={onBlur}
-        onKeyDown={onKeyDown}
-        inputProps={{ maxLength: maxCharacters }}
-        topLabel={topLabel}
-        value={value}
-        error={error}
-        required={required}
-        disabled={disabled}
-        topLabelWeight={topLabelWeight}
-        topLabelSize={topLabelSize}
-      />
-      <div className={styles.helperTexts}>
-        {helperText && <Text text={helperText} size="xs" weight="regular" />}
-        {errorText && error && (
-          <Text text={errorText} size="xs" weight="regular" color="#F54C4C" />
-        )}
-        <Text
-          text={`${charCount} / ${maxCharacters}`}
-          size="xs"
-          className={styles.counter}
-        />
-      </div>
-    </div>
-  );
-};
+import React, { useEffect, useState } from 'react';
+import { TextInput, Text } from '../../';
+
+import styles from './Textarea.module.scss';
+
+interface TextareaProps {
+  className?: string;
+  topLabel?: string;
+  topLabelWeight?: 'semi-bold' | 'bold' | 'regular';
+  topLabelSize?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
+  placeholder?: string;
+  label?: string;
+  required?: boolean;
+  name?: string;
+  value: string | number;
+  onChange: (event: any) => void;
+  onBlur?: (event: any) => void;
+  onKeyDown?: () => void;
+  id?: string;
+  error?: boolean;
+  maxCharacters: number;
+  errorText?: string;
+  helperText?: string;
+  disabled?: boolean;
+}
+
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=738-6407&mode=dev */
+export const Textarea = ({
+  name,
+  label,
+  className,
+  id,
+  onChange,
+  onBlur,
+  placeholder,
+  value,
+  maxCharacters,
+  topLabel,
+  topLabelWeight,
+  topLabelSize,
+  errorText,
+  helperText,
+  error,
+  disabled,
+  required = false,
+  onKeyDown,
+}: TextareaProps) => {
+  const [charCount, setCharCount] = useState(0);
+
+  const handleChange = (e: any) => {
+    const newCharCount = e.target.value.length;
+    if (newCharCount <= maxCharacters) {
+      setCharCount(newCharCount);
+      onChange(e);
+    }
+  };
+
+  useEffect(() => {
+    setCharCount(String(value).length);
+  }, []);
+
+  return (
+    <div className={styles.text_area_container}>
+      <TextInput
+        name={name}
+        variant="outlined"
+        multiline
+        label={label}
+        placeholder={placeholder}
+        className={className}
+        id={id}
+        onChange={handleChange}
+        onBlur={onBlur}
+        onKeyDown={onKeyDown}
+        inputProps={{ maxLength: maxCharacters }}
+        topLabel={topLabel}
+        value={value}
+        error={error}
+        required={required}
+        disabled={disabled}
+        topLabelWeight={topLabelWeight}
+        topLabelSize={topLabelSize}
+      />
+      <div className={styles.helperTexts}>
+        {helperText && <Text text={helperText} size="xs" weight="regular" />}
+        {errorText && error && (
+          <Text text={errorText} size="xs" weight="regular" color="#F54C4C" />
+        )}
+        <Text
+          text={`${charCount} / ${maxCharacters}`}
+          size="xs"
+          className={styles.counter}
+        />
+      </div>
+    </div>
+  );
+};