odaptos_design_system 2.0.5 → 2.0.7

package/src/Organisms/DatePicker/DatePicker.tsx

@@ -1,268 +1,268 @@
-import React from 'react';
-import { colors, Text, AgendaIcon, RemoveCircledIcon } from '../../';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
-import { enUS } from 'date-fns/locale/en-US';
-import { fr } from 'date-fns/locale/fr';
-import { it } from 'date-fns/locale/it';
-import { de } from 'date-fns/locale/de';
-import { es } from 'date-fns/locale/es';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
-import { TextField } from '@mui/material';
-
-import styles from './DatePicker.modules.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',
-        },
-      },
-    },
-  },
-});
-
-const DatePickerStyledComponent = (params: any) => (
-  <CssTextField
-    {...params}
-    variant="outlined"
-    fullWidth
-    label={`${
-      params.label && params.topLabel === undefined ? params.label : ''
-    }`}
-    placeholder={params.placeholder}
-    size="small"
-    required={params.required}
-    error={params.error}
-    onBlur={params.onBlur}
-  />
-);
-
-export interface DatePickerProps {
-  className?: string;
-  label?: string;
-  topLabel?: string | undefined;
-  topLabelWeight?: 'semi-bold' | 'bold' | 'regular';
-  topLabelSize?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
-  value?: Date | null;
-  openTo?: 'day' | 'month' | 'year';
-  format?: string;
-  helperText?: string;
-  disabled?: boolean;
-  disableFuture?: boolean;
-  disablePast?: boolean;
-  loading?: boolean;
-  locale?: 'enUS' | 'fr' | 'it' | 'de' | 'es';
-  maxDate?: Date | undefined;
-  minDate?: Date | undefined;
-  placeholder?: string;
-  required?: boolean;
-  error?: boolean;
-  errorText?: string;
-  views?: Array<'day' | 'month' | 'year'>;
-  renderLoading?: () => React.ReactNode;
-  onChange?: (date: Date | null) => void;
-  onBlur?: () => void;
-}
-
-export const DatePicker: React.FC<DatePickerProps> = ({
-  className,
-  label,
-  topLabel,
-  topLabelWeight,
-  topLabelSize,
-  value,
-  openTo = 'day',
-  format,
-  disabled,
-  disableFuture,
-  disablePast,
-  loading,
-  locale = 'enUS',
-  maxDate,
-  minDate,
-  required,
-  errorText,
-  helperText,
-  views = ['day', 'month', 'year'],
-  renderLoading,
-  onChange,
-  onBlur,
-}) => {
-  return (
-    <div style={{ width: '100%' }}>
-      <LocalizationProvider
-        dateAdapter={AdapterDateFns}
-        adapterLocale={
-          locale === 'enUS'
-            ? enUS
-            : locale === 'fr'
-            ? fr
-            : locale === 'it'
-            ? it
-            : locale === 'de'
-            ? de
-            : locale === 'es'
-            ? es
-            : enUS
-        }
-      >
-        <div
-          className={`${styles.date_picker} ${
-            className ? className : undefined
-          }`}
-        >
-          {topLabel && (
-            <Text
-              text={`${topLabel ? topLabel : ''}`}
-              weight={topLabelWeight || 'bold'}
-              size={topLabelSize || 'base'}
-              className={styles.input_top_label}
-              required={required}
-            />
-          )}
-          <MuiDatePicker
-            label={label}
-            value={value}
-            views={views}
-            openTo={openTo}
-            format={format}
-            slots={{
-              openPickerIcon: () => (
-                <AgendaIcon
-                  fill={disabled ? colors.neutral_500 : colors.black}
-                />
-              ),
-              clearIcon: () => (
-                <RemoveCircledIcon
-                  fill={disabled ? colors.neutral_500 : colors.black}
-                />
-              ),
-              textField: DatePickerStyledComponent,
-            }}
-            slotProps={{
-              field: {
-                clearable: true,
-                label,
-                onBlur,
-              },
-            }}
-            disabled={disabled}
-            disableFuture={disableFuture}
-            disablePast={disablePast}
-            loading={loading}
-            maxDate={maxDate}
-            minDate={minDate}
-            renderLoading={renderLoading}
-            onChange={(date) => {
-              try {
-                if (onChange) {
-                  onChange(date);
-                }
-              } catch (error) {
-                console.error('Error in onChange function: ', error);
-              }
-            }}
-          />
-          {errorText && (
-            <Text
-              size="xs"
-              color="#F54C4C"
-              italic
-              text={errorText}
-              className={styles.text_below}
-            />
-          )}
-          {helperText && (
-            <Text
-              size="xs"
-              italic
-              text={helperText}
-              className={styles.text_below}
-            />
-          )}
-        </div>
-      </LocalizationProvider>
-    </div>
-  );
-};
+import React from 'react';
+import { colors, Text, AgendaIcon, RemoveCircledIcon } from '../../';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { enUS } from 'date-fns/locale/en-US';
+import { fr } from 'date-fns/locale/fr';
+import { it } from 'date-fns/locale/it';
+import { de } from 'date-fns/locale/de';
+import { es } from 'date-fns/locale/es';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
+import { TextField } from '@mui/material';
+
+import styles from './DatePicker.modules.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',
+        },
+      },
+    },
+  },
+});
+
+const DatePickerStyledComponent = (params: any) => (
+  <CssTextField
+    {...params}
+    variant="outlined"
+    fullWidth
+    label={`${
+      params.label && params.topLabel === undefined ? params.label : ''
+    }`}
+    placeholder={params.placeholder}
+    size="small"
+    required={params.required}
+    error={params.error}
+    onBlur={params.onBlur}
+  />
+);
+
+export interface DatePickerProps {
+  className?: string;
+  label?: string;
+  topLabel?: string | undefined;
+  topLabelWeight?: 'semi-bold' | 'bold' | 'regular';
+  topLabelSize?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
+  value?: Date | null;
+  openTo?: 'day' | 'month' | 'year';
+  format?: string;
+  helperText?: string;
+  disabled?: boolean;
+  disableFuture?: boolean;
+  disablePast?: boolean;
+  loading?: boolean;
+  locale?: 'enUS' | 'fr' | 'it' | 'de' | 'es';
+  maxDate?: Date | undefined;
+  minDate?: Date | undefined;
+  placeholder?: string;
+  required?: boolean;
+  error?: boolean;
+  errorText?: string;
+  views?: Array<'day' | 'month' | 'year'>;
+  renderLoading?: () => React.ReactNode;
+  onChange?: (date: Date | null) => void;
+  onBlur?: () => void;
+}
+
+export const DatePicker: React.FC<DatePickerProps> = ({
+  className,
+  label,
+  topLabel,
+  topLabelWeight,
+  topLabelSize,
+  value,
+  openTo = 'day',
+  format,
+  disabled,
+  disableFuture,
+  disablePast,
+  loading,
+  locale = 'enUS',
+  maxDate,
+  minDate,
+  required,
+  errorText,
+  helperText,
+  views = ['day', 'month', 'year'],
+  renderLoading,
+  onChange,
+  onBlur,
+}) => {
+  return (
+    <div style={{ width: '100%' }}>
+      <LocalizationProvider
+        dateAdapter={AdapterDateFns}
+        adapterLocale={
+          locale === 'enUS'
+            ? enUS
+            : locale === 'fr'
+            ? fr
+            : locale === 'it'
+            ? it
+            : locale === 'de'
+            ? de
+            : locale === 'es'
+            ? es
+            : enUS
+        }
+      >
+        <div
+          className={`${styles.date_picker} ${
+            className ? className : undefined
+          }`}
+        >
+          {topLabel && (
+            <Text
+              text={`${topLabel ? topLabel : ''}`}
+              weight={topLabelWeight || 'bold'}
+              size={topLabelSize || 'base'}
+              className={styles.input_top_label}
+              required={required}
+            />
+          )}
+          <MuiDatePicker
+            label={label}
+            value={value}
+            views={views}
+            openTo={openTo}
+            format={format}
+            slots={{
+              openPickerIcon: () => (
+                <AgendaIcon
+                  fill={disabled ? colors.neutral_500 : colors.black}
+                />
+              ),
+              clearIcon: () => (
+                <RemoveCircledIcon
+                  fill={disabled ? colors.neutral_500 : colors.black}
+                />
+              ),
+              textField: DatePickerStyledComponent,
+            }}
+            slotProps={{
+              field: {
+                clearable: true,
+                label,
+                onBlur,
+              },
+            }}
+            disabled={disabled}
+            disableFuture={disableFuture}
+            disablePast={disablePast}
+            loading={loading}
+            maxDate={maxDate}
+            minDate={minDate}
+            renderLoading={renderLoading}
+            onChange={(date) => {
+              try {
+                if (onChange) {
+                  onChange(date);
+                }
+              } catch (error) {
+                console.error('Error in onChange function: ', error);
+              }
+            }}
+          />
+          {errorText && (
+            <Text
+              size="xs"
+              color="#F54C4C"
+              italic
+              text={errorText}
+              className={styles.text_below}
+            />
+          )}
+          {helperText && (
+            <Text
+              size="xs"
+              italic
+              text={helperText}
+              className={styles.text_below}
+            />
+          )}
+        </div>
+      </LocalizationProvider>
+    </div>
+  );
+};

package/src/Organisms/FormQuestions/FormQuestions.module.scss

@@ -1,52 +1,52 @@
-.formQuestionsContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 0.875rem;
-}
-
-.formQuestionsContent {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 0.875rem;
-}
-
-.questionContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 0.75rem;
-  width: 100%;
-}
-
-.questionText {
-  color: var(--Color-Neutral-Dark-Shades-950, #26292e);
-
-  font-family: 'Poppins';
-  font-size: 24px;
-  font-weight: 700;
-}
-
-.topText {
-  color: var(--Color-Neutral-Dark-Shades-950, #26292e);
-
-  font-family: 'Open Sans';
-  font-size: 16px;
-  width: 100%;
-  font-weight: 400;
-}
-
-.buttons {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.backButton {
-  margin-right: auto;
-}
-
-.nextButton {
-  margin-left: auto;
-}
+.formQuestionsContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.875rem;
+}
+
+.formQuestionsContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.875rem;
+}
+
+.questionContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.questionText {
+  color: var(--Color-Neutral-Dark-Shades-950, #26292e);
+
+  font-family: 'Poppins';
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.topText {
+  color: var(--Color-Neutral-Dark-Shades-950, #26292e);
+
+  font-family: 'Open Sans';
+  font-size: 16px;
+  width: 100%;
+  font-weight: 400;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.backButton {
+  margin-right: auto;
+}
+
+.nextButton {
+  margin-left: auto;
+}