odaptos_design_system 1.0.0 → 1.2.0

package/src/MultiSelect/MultiSelect.scss

@@ -0,0 +1,66 @@
+.newAutocomplete {
+  width: 100%;
+  min-width: 16rem;
+
+  span {
+    font-family: Open Sans;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1.3;
+    letter-spacing: 0.03em;
+    text-align: left;
+    margin: unset;
+  }
+  label {
+    font-family: Open Sans;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1.3;
+    letter-spacing: 0.03em;
+    text-align: left;
+    margin: unset;
+  }
+
+  .MuiAutocomplete-endAdornment {
+    svg {
+      width: 1rem;
+      height: 1rem;
+    }
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .tags-container {
+    display: flex;
+    max-width: 80%;
+    flex-wrap: nowrap;
+    overflow: scroll;
+    gap: 0.5rem;
+    padding: 0 0.25rem;
+    span {
+      font-size: 0.75rem;
+    }
+    p {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.MuiOutlinedInput-root.MuiInputBase-root.MuiInputBase-formControl {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.no_scrollbar {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}

package/src/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,226 @@
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import { styled } from '@mui/material/styles';
+import React, { useEffect, useState } from 'react';
+import { ArrowLineDownIcon, RemoveCircledIcon } from '../Icons';
+import { Text } from '../Typography/Text';
+import { TextForButton } from '../Typography/TextForButton';
+import { Checkbox } from '../Checkbox/Checkbox';
+import './MultiSelect.scss';
+import Chip from '@mui/material/Chip';
+
+const CssTextField = styled(TextField)({
+  '& .MuiInputBase-input': {
+    color: '#26292E',
+    fontFamily: 'Open Sans !important',
+    fontSize: '1rem',
+  },
+  '& .MuiInputBase-input.Mui-disabled': {
+    color: '#26292E',
+    fontFamily: 'Open Sans !important',
+    fontSize: '1rem',
+  },
+  '& .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: '#66adff',
+    },
+  },
+  '& label': {
+    color: '#26292E',
+    fontFamily: 'Open Sans !important',
+    fontSize: '1rem',
+  },
+  '& label.Mui-disabled.Mui-error': {
+    color: '#26292E',
+    opacity: 0.5,
+    fontFamily: 'Open Sans !important',
+    fontSize: '1rem',
+  },
+  '& label.Mui-focused': {
+    color: '#26292E',
+    fontFamily: 'Open Sans',
+    fontSize: '1rem',
+    backgroundColor: '#fff',
+    marginRight: 5,
+    paddingRight: 5,
+  },
+  '& .MuiOutlinedInput-root': {
+    fontFamily: 'Open Sans',
+    '& 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.35rem',
+      '& .MuiButtonBase-root': {
+        height: '99%',
+        '&:hover': {
+          background: 'transparent',
+        },
+      },
+    },
+    MuiInput: {
+      input: {
+        '&::placeholder': {
+          fontSize: '1rem',
+        },
+      },
+    },
+  },
+});
+
+interface MultiSelectProps {
+  label: string;
+  placeholder?: string;
+  name?: string;
+  className?: string;
+  id?: string;
+  topLabel?: string;
+  disabled?: boolean;
+  required?: boolean;
+  defaultValue: any;
+  options: any[];
+  onChange: (value: any) => void;
+  deleteOption: (value: any) => void;
+}
+
+/**
+ * Use this component for multiselection !!
+ */
+export const MultiSelect = ({
+  options,
+  label,
+  placeholder,
+  name,
+  className,
+  onChange,
+  disabled,
+  defaultValue,
+  topLabel,
+  id,
+  required,
+  deleteOption,
+  ...props
+}: MultiSelectProps) => {
+  const [value, setValue] = useState(
+    defaultValue === undefined ? [] : [defaultValue]
+  );
+  const [inputValue, setInputValue] = React.useState('');
+
+  useEffect(() => {
+    setValue(defaultValue === undefined ? [] : [defaultValue]);
+  }, [defaultValue]);
+
+  return (
+    <div className={`${className}`}>
+      {topLabel && (
+        <Text
+          text={`${topLabel ? topLabel : ''} ${required ? '*' : ''}`}
+          weight="bold"
+          size="base"
+          className={'input_top_label'}
+          required={required}
+        />
+      )}
+
+      <Autocomplete
+        id="tags-standard"
+        value={value}
+        defaultValue={defaultValue}
+        inputValue={inputValue}
+        onInputChange={(_event, newInputValue) => {
+          setInputValue(newInputValue);
+        }}
+        onChange={(_event, newValue) => {
+          setValue(newValue);
+          onChange(newValue);
+        }}
+        options={
+          options ? options : [{ label: 'Loading...', value: 0, year: 100 }]
+        }
+        placeholder={label}
+        multiple={true}
+        autoComplete={options.length > 10}
+        disableCloseOnSelect
+        size="small"
+        fullWidth
+        disabled={disabled}
+        getOptionLabel={(option) => {
+          return option.label;
+        }}
+        isOptionEqualToValue={(option, value) => {
+          return option.value === value.value;
+        }}
+        renderInput={(params) => (
+          <CssTextField
+            {...params}
+            variant="outlined"
+            label={label}
+            placeholder={placeholder}
+            size="small"
+            required={required}
+            name={name}
+          />
+        )}
+        renderTags={(value) => {
+          return (
+            <div className="tags-container no_scrollbar">
+              {value.map((option, index) => (
+                <Chip
+                  label={option.label}
+                  size="small"
+                  key={`chipt-option-${index}`}
+                  onDelete={() => deleteOption(option)}
+                />
+              ))}
+            </div>
+          );
+        }}
+        renderOption={(props, option, { selected }) => {
+          return (
+            <li {...props} style={{ gap: '0.5rem' }}>
+              <Checkbox checked={selected} onChange={() => null} />
+              <TextForButton text={option.label} size="sm" />
+            </li>
+          );
+        }}
+        clearIcon={<RemoveCircledIcon fill="black" />}
+        popupIcon={<ArrowLineDownIcon fill="black" />}
+        className={`newAutocomplete ${className}`}
+        {...props}
+      />
+    </div>
+  );
+};

package/src/MultiSelect/utils/textInputStyle.ts

@@ -0,0 +1,78 @@
+export const getDisabledStyle = (disabled: boolean | undefined) => {
+  if (disabled) {
+    return {
+      '& .MuiInputLabel-root': {
+        color: 'lightgray',
+        marginTop: '0.5rem',
+      },
+      '& .MuiOutlinedInput-root': {
+        marginTop: '0.5rem',
+        '& .MuiAutocomplete-endAdornment': {
+          height: '99%',
+          marginTop: '-0.20rem',
+          '& .MuiButtonBase-root': {
+            height: '99%',
+            '&:hover': {
+              background: 'transparent',
+            },
+          },
+        },
+        cursor: 'not-allowed',
+        '& > fieldset': {
+          borderColor: 'lightgray',
+          '&:hover': { borderColor: 'lightgray' },
+        },
+        '&:hover fieldset': {
+          borderColor: 'lightgray',
+        },
+        'input:disabled': {
+          cursor: 'not-allowed',
+        },
+        p: {
+          color: 'gray',
+          fontFamily: 'OpenSans',
+          fontSize: '1rem',
+        },
+      },
+    };
+  } else
+    return {
+      '& .MuiInputLabel-root': { marginTop: '0.5rem' },
+      '& .MuiOutlinedInput-root': {
+        marginTop: '0.5rem',
+        '& .MuiAutocomplete-endAdornment': {
+          height: '99%',
+          marginTop: '-0.20rem',
+          '& .MuiButtonBase-root': {
+            height: '99%',
+            '&:hover': {
+              background: 'transparent',
+            },
+          },
+        },
+        p: {
+          fontFamily: 'OpenSans',
+          fontSize: '1rem',
+        },
+      },
+    };
+};
+export const getRequiredStyle = (
+  required: boolean | undefined,
+  topLabel: string | undefined
+) => {
+  if (required && !topLabel) {
+    return {
+      '.MuiFormLabel-asterisk': {
+        color: '#db3131',
+        '&$error': {
+          color: '#db3131',
+        },
+      },
+    };
+  } else if (required && topLabel)
+    return {
+      '.MuiFormLabel-asterisk': { display: 'none' },
+    };
+  else return {};
+};

package/src/Notifications/Banner.modules.scss

@@ -0,0 +1,35 @@
+.notification_banner {
+  display: flex;
+  max-width: 87.5rem;
+  padding: 1.5rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.notification_banner_header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.notification_banner_error {
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-extended-red-500, #f54c4c);
+  background: var(--color-extended-red-100, #fddbdb);
+}
+.notification_banner_warning {
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-extended-yellow-500, #ffb800);
+  background: var(--color-extended-yellow-100, #fff3d6);
+}
+.notification_banner_info {
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-primary-500, #07f);
+  background: var(--color-primary-100, #e5f1ff);
+}
+.notification_banner_success {
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-extended-green-500, #5cbb65);
+  background: var(--color-extended-green-100, #e8f5ea);
+}

package/src/Notifications/Banner.tsx

@@ -0,0 +1,103 @@
+import { HTMLAttributes } from 'react';
+import { AlertCircledIcon, CheckedCircled, InfoCircledIcon } from '../Icons';
+import { TextWithLink } from '../Typography/TextWithLink';
+import { Text } from '../Typography/Text';
+import { Title } from '../Typography/Title';
+import styles from './Banner.modules.scss';
+
+interface BannerProps extends HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  content?: string;
+  textLink?: string;
+  link?: string;
+  className?: string;
+  type: 'error' | 'warning' | 'success' | 'info';
+}
+
+/**
+ * Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2527-33150&mode=dev
+ */
+export const Banner = ({
+  title,
+  content,
+  textLink,
+  link,
+  className,
+  type,
+  ...props
+}: BannerProps) => {
+  const getBannerIcon = () => {
+    if (type === 'error') {
+      return <AlertCircledIcon fill="#98312E" stroke="#98312E" />;
+    } else if (type === 'warning') {
+      return <AlertCircledIcon fill="#9E7200" stroke="#9E7200" />;
+    } else if (type === 'success') {
+      return <CheckedCircled stroke="#3C743D" fill="#3C743D" />;
+    } else {
+      return <InfoCircledIcon stroke="#004799" fill="#004799" />;
+    }
+  };
+
+  const getTextColor = () => {
+    if (type === 'error') {
+      return '#98312E';
+    } else if (type === 'warning') {
+      return '#9E7200';
+    } else if (type === 'success') {
+      return '#3C743D';
+    } else {
+      return '#004799';
+    }
+  };
+
+  const getBannerColor = () => {
+    if (type === 'error') {
+      return styles.notification_banner_error;
+    } else if (type === 'warning') {
+      return styles.notification_banner_warning;
+    } else if (type === 'success') {
+      return styles.notification_banner_success;
+    } else {
+      return styles.notification_banner_info;
+    }
+  };
+
+  return (
+    <div
+      {...props}
+      className={`${
+        styles.notification_banner
+      } ${getBannerColor()} ${className}`}
+    >
+      <div className={styles.notification_banner_header}>
+        {getBannerIcon()}
+        {title && (
+          <Title
+            text={title}
+            weight="semi-bold"
+            size="base"
+            color={getTextColor()}
+          />
+        )}
+      </div>
+      {content && textLink && link && (
+        <TextWithLink
+          text={content}
+          weight="regular"
+          size="base"
+          color={getTextColor()}
+          textLink={textLink}
+          link={link}
+        />
+      )}
+      {content && !textLink && !link && (
+        <Text
+          text={content}
+          weight="regular"
+          size="base"
+          color={getTextColor()}
+        />
+      )}
+    </div>
+  );
+};

package/src/Notifications/NotificationIcon.tsx

@@ -0,0 +1,26 @@
+import { HTMLAttributes } from 'react';
+import { AlarmBellStatusIcon, AlamBellIdleIcon } from '../Icons';
+
+interface TagProps extends HTMLAttributes<HTMLDivElement> {
+  type: 'idle' | 'info' | 'warning' | 'critical';
+  className: string;
+}
+
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2527-33256&mode=dev  */
+export const NotificationIcon = ({ type = 'idle', className }: TagProps) => {
+  const getStatusColor = (): string => {
+    if (type === 'info') return '#0077FF';
+    else if (type === 'warning') return '#FFB800';
+    else if (type === 'critical') return '#F54C4C';
+    else return '#004799';
+  };
+
+  if (type === 'idle') return <AlamBellIdleIcon className={className} />;
+  return (
+    <AlarmBellStatusIcon
+      className={className}
+      stroke={getStatusColor()}
+      fill={getStatusColor()}
+    />
+  );
+};

package/src/Notifications/Toast.modules.scss

@@ -0,0 +1,87 @@
+.notification_toast {
+  display: flex;
+  width: 27rem;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.5rem;
+  position: relative;
+  padding-right: 2.75rem;
+  transform: translateX(170%);
+  animation: moveleft 0.5s linear forwards;
+  .notification_toast_content {
+    display: flex;
+    padding: 1rem;
+    flex-direction: row;
+    align-items: flex-end;
+    gap: 0.625rem;
+    flex: 1 0 0;
+
+    .toast_link {
+      white-space: nowrap;
+    }
+  }
+  @keyframes moveleft {
+    100% {
+      transform: translateX(95%);
+    }
+  }
+
+  .close_toast_btn {
+    display: flex;
+    width: 2.75rem;
+    height: 100% !important;
+    min-height: 100% !important;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    border: none;
+    border-radius: 0rem 0.4375rem 0.4375rem 0rem;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    svg {
+      fill: white;
+      stroke: white;
+      transform: rotate(45deg);
+    }
+  }
+  .close_toast_btn_error {
+    border: 1px solid var(--color-extended-red-500, #f54c4c);
+    background: var(--color-extended-red-500, #f54c4c);
+  }
+  .close_toast_btn_warning {
+    border: 1px solid var(--color-extended-yellow-500, #ffb800);
+    background: var(--color-extended-yellow-500, #ffb800);
+  }
+  .close_toast_btn_info {
+    border: 1px solid var(--color-primary-500, #07f);
+    background: var(--color-primary-500, #07f);
+  }
+  .close_toast_btn_success {
+    border: 1px solid var(--color-extended-green-500, #5cbb65);
+    background: var(--color-extended-green-500, #5cbb65);
+  }
+}
+
+.notification_toast_error {
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-extended-red-500, #f54c4c);
+  background: var(--color-extended-red-100, #fddbdb);
+}
+.notification_toast_warning {
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-extended-yellow-500, #ffb800);
+  background: var(--color-extended-yellow-100, #fff3d6);
+}
+.notification_toast_info {
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-primary-500, #07f);
+  background: var(--color-primary-100, #e5f1ff);
+}
+.notification_toast_success {
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-extended-green-500, #5cbb65);
+  background: var(--color-extended-green-100, #e8f5ea);
+}