odaptos_design_system 2.0.5 → 2.0.7

package/src/Organisms/PasswordField/PasswordField.module.scss

@@ -1,55 +1,55 @@
-.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;
-}
+.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;
+}

package/src/Organisms/PasswordField/PasswordField.tsx

@@ -1,231 +1,231 @@
-import React, { useState } from 'react';
-import { InputAdornment, TextField } from '@mui/material';
-import styles from './PasswordField.module.scss';
-import { styled } from '@mui/material/styles';
-import { colors, IconButton, ViewIcon, ViewOffIcon, Text } 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;
-  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;
-  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 PasswordField = (props: InputProps) => {
-  const {
-    className,
-    leftIcon,
-    variant,
-    topLabel,
-    topLabelWeight,
-    topLabelSize,
-    placeholder = '',
-    label,
-    required = false,
-    name,
-    value,
-    onChange,
-    onBlur,
-    disabled,
-    error,
-    id,
-    helperText,
-    errorText,
-    multiline,
-    inputProps,
-    onKeyDown,
-  } = props;
-
-  const [showPassword, setShowPassword] = useState('password');
-
-  const endAdornment = (
-    <InputAdornment position="end">
-      <IconButton
-        size="xs"
-        variant="tertiary"
-        icon={showPassword === 'password' ? <ViewIcon /> : <ViewOffIcon />}
-        onClick={() => {
-          if (showPassword === 'password') setShowPassword('text');
-          else setShowPassword('password');
-        }}
-      />
-    </InputAdornment>
-  );
-  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={showPassword}
-        autoComplete="current-password"
-        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, { useState } from 'react';
+import { InputAdornment, TextField } from '@mui/material';
+import styles from './PasswordField.module.scss';
+import { styled } from '@mui/material/styles';
+import { colors, IconButton, ViewIcon, ViewOffIcon, Text } 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;
+  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;
+  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 PasswordField = (props: InputProps) => {
+  const {
+    className,
+    leftIcon,
+    variant,
+    topLabel,
+    topLabelWeight,
+    topLabelSize,
+    placeholder = '',
+    label,
+    required = false,
+    name,
+    value,
+    onChange,
+    onBlur,
+    disabled,
+    error,
+    id,
+    helperText,
+    errorText,
+    multiline,
+    inputProps,
+    onKeyDown,
+  } = props;
+
+  const [showPassword, setShowPassword] = useState('password');
+
+  const endAdornment = (
+    <InputAdornment position="end">
+      <IconButton
+        size="xs"
+        variant="tertiary"
+        icon={showPassword === 'password' ? <ViewIcon /> : <ViewOffIcon />}
+        onClick={() => {
+          if (showPassword === 'password') setShowPassword('text');
+          else setShowPassword('password');
+        }}
+      />
+    </InputAdornment>
+  );
+  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={showPassword}
+        autoComplete="current-password"
+        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/RatingScale/RatingScale.module.scss

@@ -1,27 +1,27 @@
-.ratingScale {
-
-    .formControl {
-        width: 100%;
-
-        .radioGroup {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            width: 100%;
-            justify-content: space-between;
-
-            .radioContainer {
-                display: flex;
-                gap: 0.25rem;
-
-                .radio {
-                }
-            }
-        }
-    }
-
-    .ratingScaleText {
-        display: flex;
-        justify-content: space-between;
-    }
+.ratingScale {
+
+    .formControl {
+        width: 100%;
+
+        .radioGroup {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            width: 100%;
+            justify-content: space-between;
+
+            .radioContainer {
+                display: flex;
+                gap: 0.25rem;
+
+                .radio {
+                }
+            }
+        }
+    }
+
+    .ratingScaleText {
+        display: flex;
+        justify-content: space-between;
+    }
 }