odaptos_design_system 2.0.5 → 2.0.7

package/src/Organisms/NumberField/NumberField.module.scss

@@ -1,60 +1,60 @@
-.input {
-  width: 100%;
-  font-family: var(--sdFontFamilyOpenSans);
-  font-style: normal;
-  font-weight: var(--sdFontWeightRegular);
-  font-size: var(--sdTypoTextNoDecorationRegularBase);
-  line-height: var(--sdLineHeight130);
-  letter-spacing: var(--sdLetterSpacingButtons);
-  text-align: left;
-  margin: unset;
-
-  svg {
-    height: 1rem;
-    width: 1rem;
-  }
-}
-
-input {
-  font-family: var(--sdFontFamilyOpenSans);
-  font-style: normal;
-  font-weight: var(--sdFontWeightRegular);
-  font-size: var(--sdTypoTextNoDecorationRegularBase);
-  line-height: var(--sdLineHeight130);
-  letter-spacing: var(--sdLetterSpacingButtons);
-  text-align: left;
-  margin: unset;
-}
-
-input.input {
-  height: 1rem;
-}
-.MuiInputBase-root-MuiOutlinedInput-root {
-  font-family: var(--sdFontFamilyOpenSans);
-  font-style: normal;
-  font-weight: var(--sdFontWeightRegular);
-  font-size: var(--sdTypoTextNoDecorationRegularBase);
-  line-height: var(--sdLineHeight130);
-  letter-spacing: var(--sdLetterSpacingButtons);
-  text-align: left;
-  margin: unset;
-}
-
-.input_top_label {
-  margin-bottom: 0.625rem;
-}
-.input .MuiInputBase-input {
-  color: var(--gray-black);
-  font-family: 'OpenSans';
-  font-size: 1rem;
-  padding: 0.375rem 0.75rem;
-}
-
-.text_below {
-  margin: 0.25rem 0.5rem 0.25rem 0.75rem;
-}
-
-.textSideInput {
-  white-space: nowrap;
-  margin-right: 0.3rem;
-}
+.input {
+  width: 100%;
+  font-family: var(--sdFontFamilyOpenSans);
+  font-style: normal;
+  font-weight: var(--sdFontWeightRegular);
+  font-size: var(--sdTypoTextNoDecorationRegularBase);
+  line-height: var(--sdLineHeight130);
+  letter-spacing: var(--sdLetterSpacingButtons);
+  text-align: left;
+  margin: unset;
+
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+
+input {
+  font-family: var(--sdFontFamilyOpenSans);
+  font-style: normal;
+  font-weight: var(--sdFontWeightRegular);
+  font-size: var(--sdTypoTextNoDecorationRegularBase);
+  line-height: var(--sdLineHeight130);
+  letter-spacing: var(--sdLetterSpacingButtons);
+  text-align: left;
+  margin: unset;
+}
+
+input.input {
+  height: 1rem;
+}
+.MuiInputBase-root-MuiOutlinedInput-root {
+  font-family: var(--sdFontFamilyOpenSans);
+  font-style: normal;
+  font-weight: var(--sdFontWeightRegular);
+  font-size: var(--sdTypoTextNoDecorationRegularBase);
+  line-height: var(--sdLineHeight130);
+  letter-spacing: var(--sdLetterSpacingButtons);
+  text-align: left;
+  margin: unset;
+}
+
+.input_top_label {
+  margin-bottom: 0.625rem;
+}
+.input .MuiInputBase-input {
+  color: var(--gray-black);
+  font-family: 'OpenSans';
+  font-size: 1rem;
+  padding: 0.375rem 0.75rem;
+}
+
+.text_below {
+  margin: 0.25rem 0.5rem 0.25rem 0.75rem;
+}
+
+.textSideInput {
+  white-space: nowrap;
+  margin-right: 0.3rem;
+}

package/src/Organisms/NumberField/NumberField.tsx

@@ -1,244 +1,244 @@
-import React from 'react';
-import { InputAdornment, TextField } from '@mui/material';
-import { colors, Text } from '../../';
-import styles from './NumberField.module.scss';
-import { styled } from '@mui/material/styles';
-
-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;
-  rightText?: string;
-  leftIcon?: JSX.Element;
-  leftText?: string;
-  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: number | null;
-  onChange: (value: number) => void;
-  onBlur?: (event: any) => void;
-  onKeyDown?: () => void;
-  disabled?: boolean;
-  type?: 'number' | 'text' | 'password';
-  id?: string;
-  helperText?: string;
-  errorText?: string;
-  error?: boolean;
-  multiline?: boolean;
-  rows?: number;
-  min?: number | null;
-  max?: number | null;
-  inputProps?: any;
-}
-
-/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=738-5899&mode=dev */
-export const NumberField = (props: InputProps) => {
-  const {
-    className,
-    rightIcon,
-    rightText,
-    leftIcon,
-    leftText,
-    variant,
-    topLabel,
-    topLabelWeight,
-    topLabelSize,
-    placeholder = '',
-    label,
-    required = false,
-    name,
-    value,
-    onChange,
-    onBlur,
-    disabled,
-    error,
-    id,
-    helperText,
-    errorText,
-    inputProps,
-    max,
-    min,
-  } = props;
-
-  const endAdornment = rightIcon ? (
-    <InputAdornment position="end">{rightIcon}</InputAdornment>
-  ) : rightText ? (
-    <Text
-      text={rightText}
-      weight="bold"
-      className={styles.textSideInput}
-      size="sm"
-    />
-  ) : undefined;
-  const startAdornment = leftIcon ? (
-    <InputAdornment position="start">{leftIcon}</InputAdornment>
-  ) : leftText ? (
-    <Text
-      text={leftText}
-      weight="bold"
-      className={styles.textSideInput}
-      size="sm"
-    />
-  ) : 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={(e) => {
-          var value = parseInt(e.target.value, 10);
-
-          if (max && value > max) value = max;
-          if (min && value < min) value = min;
-          if (min === 0 && value < 0) value = 0;
-
-          onChange && onChange(value);
-        }}
-        label={`${label && topLabel === undefined ? label : ''}`}
-        placeholder={`${placeholder}`}
-        name={name}
-        type={'number'}
-        value={value ? value : ''}
-        disabled={disabled}
-        required={required}
-        error={error}
-        onBlur={onBlur}
-      />
-      {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 { colors, Text } from '../../';
+import styles from './NumberField.module.scss';
+import { styled } from '@mui/material/styles';
+
+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;
+  rightText?: string;
+  leftIcon?: JSX.Element;
+  leftText?: string;
+  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: number | null;
+  onChange: (value: number) => void;
+  onBlur?: (event: any) => void;
+  onKeyDown?: () => void;
+  disabled?: boolean;
+  type?: 'number' | 'text' | 'password';
+  id?: string;
+  helperText?: string;
+  errorText?: string;
+  error?: boolean;
+  multiline?: boolean;
+  rows?: number;
+  min?: number | null;
+  max?: number | null;
+  inputProps?: any;
+}
+
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=738-5899&mode=dev */
+export const NumberField = (props: InputProps) => {
+  const {
+    className,
+    rightIcon,
+    rightText,
+    leftIcon,
+    leftText,
+    variant,
+    topLabel,
+    topLabelWeight,
+    topLabelSize,
+    placeholder = '',
+    label,
+    required = false,
+    name,
+    value,
+    onChange,
+    onBlur,
+    disabled,
+    error,
+    id,
+    helperText,
+    errorText,
+    inputProps,
+    max,
+    min,
+  } = props;
+
+  const endAdornment = rightIcon ? (
+    <InputAdornment position="end">{rightIcon}</InputAdornment>
+  ) : rightText ? (
+    <Text
+      text={rightText}
+      weight="bold"
+      className={styles.textSideInput}
+      size="sm"
+    />
+  ) : undefined;
+  const startAdornment = leftIcon ? (
+    <InputAdornment position="start">{leftIcon}</InputAdornment>
+  ) : leftText ? (
+    <Text
+      text={leftText}
+      weight="bold"
+      className={styles.textSideInput}
+      size="sm"
+    />
+  ) : 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={(e) => {
+          var value = parseInt(e.target.value, 10);
+
+          if (max && value > max) value = max;
+          if (min && value < min) value = min;
+          if (min === 0 && value < 0) value = 0;
+
+          onChange && onChange(value);
+        }}
+        label={`${label && topLabel === undefined ? label : ''}`}
+        placeholder={`${placeholder}`}
+        name={name}
+        type={'number'}
+        value={value ? value : ''}
+        disabled={disabled}
+        required={required}
+        error={error}
+        onBlur={onBlur}
+      />
+      {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>
+  );
+};