odaptos_design_system 1.0.0 → 1.2.0

package/src/Tag/Tag.modules.scss

@@ -0,0 +1,58 @@
+.tag {
+  display: flex;
+  padding: 0px 0.75rem;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+  max-width: 10rem;
+  width: fit-content;
+}
+
+.tag_idle {
+  background: var(--color-neutral-dark-shades-600, #717376);
+  svg {
+    stroke: #ffffff !important;
+    fill: #ffffff !important;
+  }
+}
+.tag_info {
+  background: var(--color-primary-100, #e5f1ff);
+  svg {
+    stroke: #004799 !important;
+    fill: #004799 !important;
+  }
+}
+.tag_success {
+  background: var(--color-extended-green-100, #e8f5ea);
+  svg {
+    stroke: #3c743d !important;
+    fill: #3c743d !important;
+  }
+}
+.tag_warning {
+  background: var(--color-extended-yellow-100, #fff3d6);
+  svg {
+    stroke: #6e4f00 !important;
+    fill: #6e4f00 !important;
+  }
+}
+.tag_critical {
+  background: var(--color-extended-red-100, #fddbdb);
+  svg {
+    stroke: #98312e !important;
+    fill: #98312e !important;
+  }
+}
+.tag_sm {
+  svg {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+}
+
+.tag_base {
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}

package/src/Tag/Tag.tsx

@@ -0,0 +1,63 @@
+import { HTMLAttributes } from 'react';
+import styles from './Tag.modules.scss';
+import { Text } from '../Typography/Text';
+
+interface TagProps extends HTMLAttributes<HTMLDivElement> {
+  text: string;
+  status: 'idle' | 'success' | 'info' | 'warning' | 'critical';
+  size: 'sm' | 'base';
+  iconLeft: JSX.Element;
+  iconRight: JSX.Element;
+  className?: string;
+}
+
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=1359-33355&mode=dev  */
+export const Tag = ({
+  text,
+  status = 'idle',
+  size = 'base',
+  iconLeft,
+  iconRight,
+  className,
+  ...props
+}: TagProps) => {
+  const getStatusColor = (): string => {
+    if (status === 'idle') {
+      return '#FFFFFF';
+    } else if (status === 'success') return '#3C743D';
+    else if (status === 'info') return '#004799';
+    else if (status === 'warning') return '#6E4F00';
+    else if (status === 'critical') return '#98312E';
+    else return '#004799';
+  };
+
+  const getTagStatus = (): string => {
+    if (status === 'idle') {
+      return styles.tag_idle;
+    } else if (status === 'success') return styles.tag_success;
+    else if (status === 'info') return styles.tag_info;
+    else if (status === 'warning') return styles.tag_warning;
+    else if (status === 'critical') return styles.tag_critical;
+    else return styles.tag_idle;
+  };
+
+  const getTagSize = (): string => {
+    if (size === 'sm') {
+      return styles.tag_sm;
+    } else if (size === 'base') return styles.tag_base;
+    else return styles.tag_base;
+  };
+
+  return (
+    <div
+      {...props}
+      className={`${styles.tag} ${getTagStatus()} ${getTagSize()} ${
+        className ?? ''
+      }`}
+    >
+      {iconLeft && iconLeft}
+      <Text size={size} text={text} color={getStatusColor()} />
+      {iconRight && iconRight}
+    </div>
+  );
+};

package/src/TextInput/TextInput.scss

@@ -0,0 +1,50 @@
+.input {
+  min-width: 12.5rem;
+  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;
+}
+
+input {
+  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/TextInput/TextInput.tsx

@@ -0,0 +1,212 @@
+import { InputAdornment, TextField } from '@mui/material';
+import { Text } from '../Typography/Text';
+import './TextInput.scss';
+import { styled } from '@mui/material/styles';
+
+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 InputProps {
+  className?: string;
+  rightIcon?: JSX.Element;
+  leftIcon?: JSX.Element;
+  variant?: 'filled' | 'standard' | 'outlined';
+  topLabel?: string | undefined;
+  placeholder?: string;
+  label?: string;
+  required?: boolean | undefined;
+  name?: string;
+  value: string | number;
+  onChange: (event: any) => void;
+  onBlur?: (event: any) => void;
+  onKeyDown?: () => void;
+  disabled?: boolean;
+  type?: 'number' | 'text' | 'password';
+  id?: string;
+  helperText?: string;
+  errorText?: string;
+  error?: boolean;
+  multiline?: boolean;
+  rows?: number;
+  inputProps?: any;
+}
+
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=738-5899&mode=dev */
+export const TextInput = (props: InputProps) => {
+  const {
+    className,
+    rightIcon,
+    leftIcon,
+    variant,
+    topLabel,
+    placeholder = '',
+    label,
+    required = false,
+    name,
+    value,
+    onChange,
+    onBlur,
+    disabled,
+    error,
+    type,
+    id,
+    helperText,
+    errorText,
+    multiline,
+    rows,
+    inputProps,
+    onKeyDown,
+  } = props;
+
+  const endAdornment = rightIcon ? (
+    <InputAdornment position="end">{rightIcon}</InputAdornment>
+  ) : undefined;
+  const startAdornment = leftIcon ? (
+    <InputAdornment position="end">{leftIcon}</InputAdornment>
+  ) : undefined;
+
+  const InputLabelProps = label === undefined ? { shrink: false } : {};
+
+  return (
+    <div className={`${className}`} id={id}>
+      {topLabel && (
+        <Text
+          text={`${topLabel ? topLabel : ''}`}
+          weight="bold"
+          size="base"
+          className={'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 ? label : ''}`}
+        placeholder={`${placeholder}`}
+        name={name}
+        type={type ?? 'text'}
+        value={value ? value : ''}
+        disabled={disabled}
+        required={required}
+        error={error}
+        onBlur={onBlur}
+        rows={rows}
+        multiline={multiline}
+        onKeyPress={(e) => {
+          if (e.key === 'Enter' && onKeyDown) {
+            onKeyDown();
+          }
+        }}
+      />
+      {errorText && error && (
+        <Text
+          size="xs"
+          color="#F54C4C"
+          italic
+          text={errorText}
+          className="text-below"
+        />
+      )}
+      {helperText && (
+        <Text size="xs" italic text={helperText} className="text-below" />
+      )}
+    </div>
+  );
+};

package/src/Textarea/Textarea.module.scss

@@ -0,0 +1,19 @@
+.text_area_container {
+  width: 100%;
+
+  .helperTexts {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
+
+    .counter {
+      margin-left: auto;
+    }
+  }
+
+  font-family: Open Sans;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+}

package/src/Textarea/Textarea.tsx

@@ -0,0 +1,88 @@
+import { useState } from 'react';
+import { TextInput } from '../TextInput/TextInput';
+import { Text } from '../Typography/Text';
+
+import styles from './Textarea.module.scss';
+
+interface TextareaProps {
+  className?: string;
+  topLabel?: string;
+  placeholder?: string;
+  label?: string;
+  required?: boolean;
+  name?: string;
+  value: string | number;
+  onChange: (event: any) => void;
+  onBlur?: (event: any) => void;
+  id?: string;
+  rows?: number;
+  error?: boolean;
+  maxCharacters: number;
+  errorText?: string;
+  helperText?: string;
+  disabled?: boolean;
+}
+
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=738-6407&mode=dev */
+export const Textarea = ({
+  name,
+  label,
+  className,
+  id,
+  onChange,
+  onBlur,
+  placeholder,
+  value,
+  rows,
+  maxCharacters,
+  topLabel,
+  errorText,
+  helperText,
+  error,
+  disabled,
+  required = false,
+}: TextareaProps) => {
+  const [charCount, setCharCount] = useState(0);
+
+  const handleChange = (e: any) => {
+    const newCharCount = e.target.value.length;
+    if (newCharCount <= maxCharacters) {
+      setCharCount(newCharCount);
+      onChange(e);
+    }
+  };
+
+  return (
+    <div className={styles.text_area_container}>
+      <TextInput
+        name={name}
+        variant="outlined"
+        multiline={true}
+        label={label}
+        rows={rows ? rows : 4}
+        placeholder={placeholder}
+        className={className}
+        id={id}
+        onChange={handleChange}
+        onBlur={onBlur}
+        inputProps={{ maxLength: maxCharacters }}
+        topLabel={topLabel ? topLabel : ''}
+        value={value}
+        error={error}
+        required={required}
+        disabled={disabled}
+      />
+      <div className={styles.helperTexts}>
+        {helperText && <Text text={helperText} size="xs" weight="regular" />}
+        {errorText && error && (
+          <Text text={errorText} size="xs" weight="regular" color="#F54C4C" />
+        )}
+        <Text
+          text={`${charCount} / ${maxCharacters}`}
+          size="xs"
+          className={styles.counter}
+        />
+      </div>
+    </div>
+  );
+};

package/src/Tooltip/Layout/TooltipCustomLayout.module.scss

@@ -0,0 +1,24 @@
+.tooltip_layout {
+  display: flex;
+  padding: 1rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  border-radius: 0.25rem;
+  background: var(--color-neutral-basics-white, #fff);
+
+  &_header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+  }
+
+  &_actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    gap: 0.5rem;
+    align-self: stretch;
+  }
+}

package/src/Tooltip/Layout/TooltipCustomLayout.tsx

@@ -0,0 +1,104 @@
+import { Button } from '../../Buttons/Button';
+import { IconButton } from '../../Buttons/IconButton';
+import { Text } from '../../Typography/Text';
+import { Title } from '../../Typography/Title';
+
+import styles from './TooltipCustomLayout.module.scss';
+
+interface TooltipLayoutProps {
+  tooltipTitle: string;
+  closeButton?: JSX.Element;
+  onClickClose?: () => void;
+  tooltipDescription?: string;
+  customContent?: JSX.Element;
+  buttonOneText?: string;
+  buttonTwoText?: string;
+  buttonOneVariant?:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'tertiary-alt'
+    | 'alert'
+    | 'success';
+  buttonTwoVariant?:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'tertiary-alt'
+    | 'alert'
+    | 'success';
+  buttonOneIconLeft?: JSX.Element;
+  buttonTwoIconLeft?: JSX.Element;
+  buttonOneIconRight?: JSX.Element;
+  buttonTwoIconRight?: JSX.Element;
+  buttonOneOnClick?: () => void;
+  buttonTwoOnClick?: () => void;
+}
+
+export const TooltipLayout = ({
+  tooltipTitle,
+  closeButton,
+  onClickClose,
+  tooltipDescription,
+  customContent,
+  buttonOneText,
+  buttonTwoText,
+  buttonOneIconLeft,
+  buttonTwoIconLeft,
+  buttonOneIconRight,
+  buttonTwoIconRight,
+  buttonOneVariant,
+  buttonTwoVariant,
+  buttonOneOnClick,
+  buttonTwoOnClick,
+}: TooltipLayoutProps) => {
+  return (
+    <div className={styles.tooltip_layout}>
+      <div>
+        <div className={styles.tooltip_layout_header}>
+          <Title text={tooltipTitle} size="sm" weight="bold" />
+          {closeButton && (
+            <IconButton
+              icon={closeButton}
+              onClick={onClickClose}
+              variant="tertiary"
+              size="xs"
+            />
+          )}
+        </div>
+        {tooltipDescription && (
+          <Text
+            text={tooltipDescription}
+            size="xs"
+            className={styles.tooltip_layout_description}
+          />
+        )}
+        {customContent && (
+          <div className={styles.tooltip_layout_content}>{customContent}</div>
+        )}
+      </div>
+      <div className={styles.tooltip_layout_actions}>
+        {buttonOneText && (
+          <Button
+            text={buttonOneText}
+            size="sm"
+            variant={buttonOneVariant}
+            onClick={buttonOneOnClick}
+            iconLeft={buttonOneIconLeft}
+            iconRight={buttonOneIconRight}
+          />
+        )}
+        {buttonTwoText && (
+          <Button
+            text={buttonTwoText}
+            size="sm"
+            variant={buttonTwoVariant}
+            onClick={buttonTwoOnClick}
+            iconLeft={buttonTwoIconLeft}
+            iconRight={buttonTwoIconRight}
+          />
+        )}
+      </div>
+    </div>
+  );
+};