odaptos_design_system 1.0.0 → 1.2.0

package/src/Notifications/Toast.tsx

@@ -0,0 +1,92 @@
+import { HTMLAttributes } from 'react';
+import { AddIcon } from '../Icons';
+import { Link } from '../Typography/Link';
+import { Text } from '../Typography/Text';
+import styles from './Toast.modules.scss';
+
+interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+  content: string;
+  textLink?: string;
+  link?: string;
+  className?: string;
+  type: 'error' | 'warning' | 'success' | 'info';
+  onClose?: () => void;
+}
+
+/**
+ * Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2527-33231&mode=dev
+ */
+export const Toast = ({
+  content,
+  textLink,
+  link,
+  className,
+  type,
+  onClose,
+  ...props
+}: ToastProps) => {
+  const getTextColor = () => {
+    if (type === 'error') {
+      return '#98312E';
+    } else if (type === 'warning') {
+      return '#9E7200';
+    } else if (type === 'success') {
+      return '#3C743D';
+    } else {
+      return '#004799';
+    }
+  };
+
+  const getCloseBtnStyleByType = () => {
+    if (type === 'error') {
+      return styles.close_toast_btn_error;
+    } else if (type === 'warning') {
+      return styles.close_toast_btn_warning;
+    } else if (type === 'success') {
+      return styles.close_toast_btn_success;
+    } else {
+      return styles.close_toast_btn_info;
+    }
+  };
+  const getToastStyleByType = () => {
+    if (type === 'error') {
+      return styles.notification_toast_error;
+    } else if (type === 'warning') {
+      return styles.notification_toast_warning;
+    } else if (type === 'success') {
+      return styles.notification_toast_success;
+    } else {
+      return styles.notification_toast_info;
+    }
+  };
+
+  return (
+    <div
+      {...props}
+      className={`${
+        styles.notification_toast
+      } ${getToastStyleByType()} ${className}`}
+    >
+      <div className={styles.notification_toast_content}>
+        <Text
+          text={content}
+          weight="regular"
+          size="base"
+          color={getTextColor()}
+        />
+
+        {link && textLink && (
+          <Link text={textLink} link={link} className={styles.toast_link} />
+        )}
+      </div>
+      <button
+        className={`${styles.close_toast_btn} ${getCloseBtnStyleByType()}`}
+        onClick={() => {
+          if (onClose) onClose;
+        }}
+      >
+        <AddIcon />
+      </button>
+    </div>
+  );
+};

package/src/Popover/Popover.modules.scss

@@ -0,0 +1,47 @@
+.popover {
+  position: absolute;
+  z-index: 99;
+  display: flex;
+  width: 9.375rem;
+  padding: 0.5rem;
+  height: fit-content;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-neutral-clear-shades-350, #bcbdbe);
+  background: var(--color-neutral-basics-white, #fff);
+
+  .popover_header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    svg {
+      width: 1rem;
+      height: 1rem;
+      fill: red;
+      stroke: red;
+    }
+  }
+}
+.popover.open {
+  display: block;
+}
+
+.popover_action {
+  display: flex;
+  align-items: center;
+  border-radius: 0.3125rem;
+  cursor: pointer;
+  gap: 0.5rem;
+  svg {
+    width: 1rem;
+    height: 1rem;
+    fill: black;
+    stroke: black;
+  }
+  &:hover {
+    background-color: var(--gray-lighter);
+  }
+}

package/src/Popover/Popover.tsx

@@ -0,0 +1,77 @@
+import React, { useRef } from 'react';
+import { RemoveCircledIcon } from '../Icons';
+import { Text } from '../Typography/Text';
+import { IconButton } from '../Buttons/IconButton';
+import { useOnClickOutside } from '../hooks/useClickOutside';
+import styles from './Popover.modules.scss';
+
+interface Item {
+  label: string;
+  onClick?: () => void;
+  icon: JSX.Element;
+  hide?: boolean;
+  className?: string;
+}
+
+interface PopoverProps {
+  open: boolean;
+  title: string;
+  className?: string;
+  items: Item[];
+  onClose: () => void;
+  style?: React.CSSProperties;
+}
+
+export const Popover = ({
+  onClose,
+  open,
+  title,
+  className,
+  items,
+  style,
+}: PopoverProps) => {
+  const ref = useRef(null);
+
+  useOnClickOutside({
+    handler: onClose,
+    elementRef: ref,
+    isOpen: open,
+  });
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`${styles.popover} ${open && styles.open} ${className}`}
+      ref={ref}
+      style={style}
+    >
+      <div className={styles.popover_header}>
+        <Text text={title} color="gray" size="sm" />
+        <IconButton
+          size="xxs"
+          variant="tertiary"
+          onClick={onClose}
+          icon={<RemoveCircledIcon />}
+        />
+      </div>
+      {items.map((item, index) => {
+        if (item.hide) {
+          return null;
+        }
+        return (
+          <div
+            className={`${styles.popover_action} ${item.className}`}
+            key={index}
+            onClick={item.onClick}
+          >
+            {item.icon && item.icon}
+            <Text text={item.label} size="sm" />
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/Radio/Radio.module.scss

@@ -0,0 +1,9 @@
+.radioBtnWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  .MuiRadio-root {
+    height: 16px;
+    width: 16px;
+  }
+}

package/src/Radio/Radio.tsx

@@ -0,0 +1,82 @@
+import { styled } from '@mui/material/styles';
+import { Radio as MuiRadio } from '@mui/material';
+import { Text } from '../Typography/Text';
+import styles from './Radio.module.scss';
+
+const BpIcon = styled('span')(() => ({
+  borderRadius: '50%',
+  width: 16,
+  height: 16,
+  border: '1px solid #A6A29E',
+  backgroundColor: '#f5f8fa',
+  backgroundImage:
+    'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
+  '.Mui-focusVisible &': {
+    outline: '2px auto rgba(19,124,189,.6)',
+    outlineOffset: 2,
+  },
+  'input:disabled ~ &': {
+    boxShadow: 'none',
+    background: 'rgba(206,217,224,.5)',
+  },
+}));
+
+const BpCheckedIcon = styled(BpIcon)({
+  backgroundColor: '#0077FF',
+  border: 'none',
+  width: 16,
+  height: 16,
+  backgroundImage:
+    'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
+  '&:before': {
+    display: 'block',
+    width: 16,
+    height: 16,
+    backgroundImage: 'radial-gradient(#fff,#fff 28%,transparent 32%)',
+    content: '""',
+  },
+});
+
+interface RadioProps {
+  label?: string;
+  leftLabel?: string;
+  onChange: () => void;
+  onBlur?: () => void;
+  checked: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  value?: any;
+  name?: string;
+  className?: string;
+}
+
+export const Radio = ({
+  label,
+  checked,
+  disabled,
+  onChange,
+  required,
+  value,
+  leftLabel,
+  name,
+  className,
+}: RadioProps) => {
+  return (
+    <div className={`${styles.radioBtnWrapper} ${className}`}>
+      {leftLabel && <Text text={leftLabel} size="sm" />}
+      <MuiRadio
+        disableRipple
+        color="default"
+        checkedIcon={<BpCheckedIcon />}
+        icon={<BpIcon />}
+        checked={checked}
+        disabled={disabled}
+        onChange={onChange}
+        required={required}
+        value={value}
+        name={name}
+      />
+      {label && <Text text={label} size="sm" />}
+    </div>
+  );
+};

package/src/Search/Search.tsx

@@ -0,0 +1,25 @@
+import { SearchCircledIcon } from '../Icons';
+import { TextInput } from '../TextInput/TextInput';
+
+interface RadioProps {
+  searchInput: string | number;
+  placeholder?: string;
+  onChange: (e: any) => void;
+}
+
+export const Search = ({ searchInput, onChange, placeholder }: RadioProps) => {
+  return (
+    <TextInput
+      value={searchInput}
+      placeholder={placeholder ?? 'Search'}
+      rightIcon={
+        <SearchCircledIcon
+          fill="black"
+          stroke="black"
+          style={{ height: '1rem', width: '1rem' }}
+        />
+      }
+      onChange={onChange}
+    />
+  );
+};

package/src/SingleSelect/SingleSelect.scss

@@ -0,0 +1,62 @@
+.newAutocomplete {
+  width: 100%;
+  min-width: 16rem;
+
+  span {
+    font-family: Open Sans;
+    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: Open Sans;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1rem;
+    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;
+    margin-top: -0.35rem !important;
+  }
+
+  .tags-container {
+    display: flex;
+    max-width: 90%;
+    flex-wrap: nowrap;
+    overflow: scroll;
+    gap: 0.5rem;
+    padding: 0 0.5rem;
+    p {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.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;
+}

package/src/SingleSelect/SingleSelect.tsx

@@ -0,0 +1,209 @@
+import Autocomplete from '@mui/material/Autocomplete';
+import { TextField } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React, { useEffect, useState } from 'react';
+import { ArrowLineDownIcon, RemoveCircledIcon } from '../Icons';
+import { Text } from '../Typography/Text';
+import './SingleSelect.scss';
+
+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.20rem',
+      '& .MuiButtonBase-root': {
+        height: '99%',
+        '&:hover': {
+          background: 'transparent',
+        },
+      },
+    },
+  },
+});
+interface SingleSelectProps {
+  label: string;
+  placeholder?: string;
+  name?: string;
+  className?: string;
+  id?: string;
+  topLabel?: string;
+  disabled?: boolean;
+  required?: boolean;
+  error?: boolean;
+  helperText?: string;
+  errorText?: string;
+  defaultValue: any;
+  options: any[];
+  onChange: (value: any) => void;
+  onBlur?: () => void;
+}
+
+/**
+ * Use this component for single selection !!
+ */
+export const SingleSelect = ({
+  options,
+  label,
+  placeholder,
+  name,
+  className,
+  onChange,
+  disabled,
+  defaultValue,
+  topLabel,
+  id,
+  required,
+  error,
+  helperText,
+  errorText,
+  onBlur,
+  ...props
+}: SingleSelectProps) => {
+  const [value, setValue] = useState(
+    defaultValue === undefined ? null : defaultValue
+  );
+  const [inputValue, setInputValue] = React.useState('');
+
+  useEffect(() => {
+    setValue(defaultValue === undefined ? null : 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}
+        placeholder={label}
+        multiple={false}
+        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}
+          />
+        )}
+        clearIcon={<RemoveCircledIcon fill="black" />}
+        popupIcon={<ArrowLineDownIcon fill="black" />}
+        className={`newAutocomplete ${className}`}
+        {...props}
+      />
+      {errorText && (
+        <Text
+          size="xs"
+          color="#F54C4C"
+          italic
+          text={errorText}
+          className="text-below"
+        />
+      )}
+      {helperText && (
+        <Text size="xs" italic text={helperText} className="text-below" />
+      )}
+    </div>
+  );
+};

package/src/Step/Step.module.scss

@@ -0,0 +1,54 @@
+.step_number {
+  display: flex;
+  max-width: 1.5rem;
+  max-height: 1.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 62.4375rem;
+  border: 1px solid var(--color-neutral-basics-black, #00040a);
+}
+.left_container {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.step_container {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.step_icon_container {
+  display: flex;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  align-self: stretch;
+  height: 100%;
+}
+.step_line {
+  width: 0.0625rem;
+  height: 1.875rem;
+  background: #8a8b8e;
+  margin-left: 0.7rem;
+}
+.step_completed_icon {
+  color: #5cbb65;
+  stroke: #5cbb65;
+  fill: #5cbb65;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.step_warning_icon {
+  color: #f54c4c;
+  stroke: #f54c4c;
+  fill: #f54c4c;
+  width: 1.5rem;
+  height: 1.5rem;
+}