odaptos_design_system 2.0.4 → 2.0.6

package/src/Organisms/TimePicker/TimePicker.modules.scss

@@ -1,67 +1,67 @@
-.time_picker {
-  width: 100%;
-  min-width: 13rem;
-
-  span {
-    font-family: OpenSans;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 1rem;
-    line-height: 1.3;
-    letter-spacing: 0.03em;
-    text-align: left;
-    margin: unset;
-  }
-  label {
-    font-family: OpenSans;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 1rem;
-    line-height: 1.3;
-    letter-spacing: 0.03em;
-    text-align: left;
-    margin: unset;
-  }
-
-  .MuiAutocomplete-endAdornment {
-    display: flex;
-    gap: 0.5rem;
-    margin-top: -0.35rem !important;
-  }
-
-  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;
-  }
-
-  svg {
-    height: 1rem;
-    width: 1rem;
-  }
-}
-
-.input_top_label {
-  margin-bottom: 0.625rem;
-}
-
-.MuiOutlinedInput-root.MuiInputBase-root.MuiInputBase-formControl {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.text_below {
-  margin: 0.25rem 0.5rem 0.25rem 0.75rem;
-}
-
-.icon {
-  width: 1rem !important;
-  height: 1rem !important;
-  margin-left: 0.25rem;
-}
+.time_picker {
+  width: 100%;
+  min-width: 13rem;
+
+  span {
+    font-family: OpenSans;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 1.3;
+    letter-spacing: 0.03em;
+    text-align: left;
+    margin: unset;
+  }
+  label {
+    font-family: OpenSans;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 1.3;
+    letter-spacing: 0.03em;
+    text-align: left;
+    margin: unset;
+  }
+
+  .MuiAutocomplete-endAdornment {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: -0.35rem !important;
+  }
+
+  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;
+  }
+
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+
+.input_top_label {
+  margin-bottom: 0.625rem;
+}
+
+.MuiOutlinedInput-root.MuiInputBase-root.MuiInputBase-formControl {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.text_below {
+  margin: 0.25rem 0.5rem 0.25rem 0.75rem;
+}
+
+.icon {
+  width: 1rem !important;
+  height: 1rem !important;
+  margin-left: 0.25rem;
+}

package/src/Organisms/TimePicker/TimePicker.tsx

@@ -1,242 +1,242 @@
-import React from 'react';
-import dayjs, { Dayjs } from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
-import { Locale } from 'date-fns/locale/types';
-import { de } from 'date-fns/locale/de';
-import { enUS } from 'date-fns/locale/en-US';
-import { enGB } from 'date-fns/locale/en-GB';
-import { fr } from 'date-fns/locale/fr';
-import { it } from 'date-fns/locale/it';
-import { es } from 'date-fns/locale/es';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { TimePicker as MuiTimePicker } from '@mui/x-date-pickers/TimePicker';
-import { colors, Text, ClockIcon, RemoveCircledIcon } from '../../';
-import { TextField } from '@mui/material';
-
-import styles from './TimePicker.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',
-        },
-      },
-    },
-  },
-});
-
-dayjs.extend(utc);
-
-const TimePickerStyledComponent = (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 TimePickerProps {
-  className?: string;
-  label?: string;
-  topLabel?: string | undefined;
-  topLabelWeight?: 'semi-bold' | 'bold' | 'regular';
-  topLabelSize?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
-  value?: Date | Dayjs | null;
-  format?: string;
-  disabled?: boolean;
-  locale?: string | 'en' | 'en-gb' | 'fr' | 'it' | 'de' | 'es';
-  required?: boolean;
-  errorText?: string;
-  helperText?: string;
-  onChange?: (date: Date | Dayjs | null) => void;
-  onBlur?: () => void;
-}
-
-type Locales = {
-  [key: string]: Locale | undefined; // Le type des valeurs peut dépendre du contenu des modules (en, fr, it, etc.)
-};
-
-const locales: Locales = {
-  en: enUS,
-  fr: fr,
-  it: it,
-  'en-gb': enGB,
-  de: de,
-  es: es,
-};
-export const TimePicker: React.FC<TimePickerProps> = ({
-  className,
-  label,
-  topLabel,
-  topLabelWeight,
-  topLabelSize,
-  value,
-  format,
-  disabled,
-  locale = 'en',
-  required,
-  errorText,
-  helperText,
-  onChange,
-  onBlur,
-}) => {
-  return (
-    <div style={{ width: '100%' }}>
-      <LocalizationProvider
-        dateAdapter={AdapterDateFns}
-        adapterLocale={locales[locale]}
-      >
-        <div
-          className={`${styles.time_picker} ${
-            className ? className : undefined
-          }`}
-        >
-          {topLabel && (
-            <Text
-              text={`${topLabel ? topLabel : ''}`}
-              weight={topLabelWeight || 'bold'}
-              size={topLabelSize || 'base'}
-              className={styles.input_top_label}
-              required={required}
-            />
-          )}
-          <MuiTimePicker
-            label={label}
-            value={value}
-            format={format}
-            closeOnSelect={true}
-            slots={{
-              openPickerIcon: () => (
-                <ClockIcon
-                  fill={disabled ? colors.neutral_500 : colors.black}
-                />
-              ),
-              clearIcon: () => (
-                <RemoveCircledIcon
-                  fill={disabled ? colors.neutral_500 : colors.black}
-                />
-              ),
-
-              textField: TimePickerStyledComponent,
-            }}
-            slotProps={{
-              field: {
-                clearable: true,
-                label,
-                onBlur,
-              },
-            }}
-            disabled={disabled}
-            onChange={onChange}
-          />
-          {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 dayjs, { Dayjs } from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { Locale } from 'date-fns/locale/types';
+import { de } from 'date-fns/locale/de';
+import { enUS } from 'date-fns/locale/en-US';
+import { enGB } from 'date-fns/locale/en-GB';
+import { fr } from 'date-fns/locale/fr';
+import { it } from 'date-fns/locale/it';
+import { es } from 'date-fns/locale/es';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { TimePicker as MuiTimePicker } from '@mui/x-date-pickers/TimePicker';
+import { colors, Text, ClockIcon, RemoveCircledIcon } from '../../';
+import { TextField } from '@mui/material';
+
+import styles from './TimePicker.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',
+        },
+      },
+    },
+  },
+});
+
+dayjs.extend(utc);
+
+const TimePickerStyledComponent = (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 TimePickerProps {
+  className?: string;
+  label?: string;
+  topLabel?: string | undefined;
+  topLabelWeight?: 'semi-bold' | 'bold' | 'regular';
+  topLabelSize?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
+  value?: Date | Dayjs | null;
+  format?: string;
+  disabled?: boolean;
+  locale?: string | 'en' | 'en-gb' | 'fr' | 'it' | 'de' | 'es';
+  required?: boolean;
+  errorText?: string;
+  helperText?: string;
+  onChange?: (date: Date | Dayjs | null) => void;
+  onBlur?: () => void;
+}
+
+type Locales = {
+  [key: string]: Locale | undefined; // Le type des valeurs peut dépendre du contenu des modules (en, fr, it, etc.)
+};
+
+const locales: Locales = {
+  en: enUS,
+  fr: fr,
+  it: it,
+  'en-gb': enGB,
+  de: de,
+  es: es,
+};
+export const TimePicker: React.FC<TimePickerProps> = ({
+  className,
+  label,
+  topLabel,
+  topLabelWeight,
+  topLabelSize,
+  value,
+  format,
+  disabled,
+  locale = 'en',
+  required,
+  errorText,
+  helperText,
+  onChange,
+  onBlur,
+}) => {
+  return (
+    <div style={{ width: '100%' }}>
+      <LocalizationProvider
+        dateAdapter={AdapterDateFns}
+        adapterLocale={locales[locale]}
+      >
+        <div
+          className={`${styles.time_picker} ${
+            className ? className : undefined
+          }`}
+        >
+          {topLabel && (
+            <Text
+              text={`${topLabel ? topLabel : ''}`}
+              weight={topLabelWeight || 'bold'}
+              size={topLabelSize || 'base'}
+              className={styles.input_top_label}
+              required={required}
+            />
+          )}
+          <MuiTimePicker
+            label={label}
+            value={value}
+            format={format}
+            closeOnSelect={true}
+            slots={{
+              openPickerIcon: () => (
+                <ClockIcon
+                  fill={disabled ? colors.neutral_500 : colors.black}
+                />
+              ),
+              clearIcon: () => (
+                <RemoveCircledIcon
+                  fill={disabled ? colors.neutral_500 : colors.black}
+                />
+              ),
+
+              textField: TimePickerStyledComponent,
+            }}
+            slotProps={{
+              field: {
+                clearable: true,
+                label,
+                onBlur,
+              },
+            }}
+            disabled={disabled}
+            onChange={onChange}
+          />
+          {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>
+  );
+};