Merge branch '461/rebrand-proposals-table' into 463/rebrand-proposal-…

…details

src/components/dropdown/dropdown.module.scss

@@ -41,9 +41,10 @@
 
 .dropdownIcon {
   & > img {
-    width: 20px;
-    height: 20px;
+    width: 24px;
+    height: 24px;
     transition: transform 250ms;
+    margin-right: 8px;
   }
 
   &.open {

src/components/dropdown/dropdown.tsx

@@ -10,6 +10,7 @@ interface DropdownProps {
   icon?: ReactNode;
   alignIcon?: 'start' | 'center' | 'end';
   className?: string;
+  openClassName?: string;
 }
 
 interface DropdownMenuProps {
@@ -46,7 +47,7 @@ export const DropdownMenuItem = ({ children, className, onClick }: DropdownMenuI
   </div>
 );
 
-const Dropdown = ({ children, menu, icon, alignIcon = 'center', className }: DropdownProps) => {
+const Dropdown = ({ children, menu, icon, alignIcon = 'center', className, openClassName }: DropdownProps) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const toggleOpen = () => setOpen(!open);
@@ -70,7 +71,7 @@ const Dropdown = ({ children, menu, icon, alignIcon = 'center', className }: Dro
   }, []);
 
   return (
-    <div className={classNames(styles.dropdown, className)} ref={dropdownRef}>
+    <div className={classNames(styles.dropdown, open && openClassName, className)} ref={dropdownRef}>
       <div
         className={classNames(styles.dropdownButton, {
           [styles.alignStart]: alignIcon === 'start',

src/components/form/form.module.scss

@@ -0,0 +1,134 @@
+@import '../../styles/variables.module.scss';
+@import '../../styles/fonts.module.scss';
+
+.inputWrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.container {
+  position: relative;
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  background-color: white;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  transition: border-color 0.2s;
+
+  &:focus-within {
+    border: 1px solid $color-dark-blue-25;
+  }
+
+  &.error {
+    border: 1px solid $color-action-error-300;
+  }
+}
+
+.input {
+  width: 100%;
+  background-color: transparent;
+
+  input,
+  textarea {
+    width: 100%;
+    border: none;
+    outline: none;
+    box-shadow: none;
+    padding: 14px 16px;
+    box-sizing: border-box;
+    background-color: inherit;
+    color: $color-dark-blue-400;
+    overflow: auto;
+    @include font-body-12;
+
+    @media (min-width: $sm) {
+      @include font-body-9;
+    }
+
+    @media (min-width: $md) {
+      @include font-body-6;
+      padding: 18px 24px;
+    }
+
+    &::placeholder {
+      color: $color-dark-blue-50;
+    }
+  }
+
+  textarea {
+    min-height: 180px;
+    resize: vertical;
+  }
+
+  input:not([value='']),
+  textarea:not(:empty) {
+    padding-right: 38px;
+
+    @media (min-width: $md) {
+      padding-right: 46px;
+    }
+  }
+}
+
+.clearButton {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: $color-dark-blue-300;
+  transition: opacity 0.2s;
+
+  &:disabled {
+    opacity: 0;
+    pointer-events: none;
+    width: 0;
+    transition: none;
+  }
+
+  @media (min-width: $sm) {
+    top: 18px;
+  }
+
+  @media (min-width: $md) {
+    top: 24px;
+    right: 24px;
+  }
+}
+
+.helperText {
+  @include font-body-15;
+  color: $color-dark-blue-400;
+
+  &.error {
+    color: $color-action-error-800;
+  }
+
+  @media (min-width: $sm) {
+    @include font-body-12;
+  }
+
+  @media (min-width: $md) {
+    @include font-body-9;
+  }
+}
+
+// removing input background color/text color for Chrome autocomplete
+.input {
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    box-shadow: 0 0 0 30px #030303 inset !important;
+  }
+
+  input:-webkit-autofill {
+    -webkit-text-fill-color: #fff !important;
+  }
+}

src/components/form/index.ts

@@ -0,0 +1,2 @@
+export { default as Textarea } from './textarea';
+export { default as Input } from './input';

src/components/form/input-wrapper.tsx

@@ -0,0 +1,35 @@
+import { ChangeEventHandler, ReactNode } from 'react';
+import { CrossIcon } from '../icons';
+import classNames from 'classnames';
+import styles from './form.module.scss';
+
+interface Props {
+  children: ReactNode;
+  error?: boolean;
+  helperText?: string;
+  value: string;
+  onChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}
+
+export const InputWrapper = (props: Props) => {
+  const { children, value, helperText, error, onChange } = props;
+
+  const clearInput = () => {
+    onChange({ target: { value: '' } } as any);
+  };
+
+  return (
+    <div className={styles.inputWrapper}>
+      <div className={classNames(styles.container, { [styles.error]: error })}>
+        {children}
+
+        <button className={styles.clearButton} disabled={!value} onClick={clearInput}>
+          <CrossIcon />
+          <span className="sr-only">Clear input</span>
+        </button>
+      </div>
+
+      {helperText && <span className={classNames(styles.helperText, { [styles.error]: error })}>{helperText}</span>}
+    </div>
+  );
+};

src/components/form/input.tsx

@@ -0,0 +1,43 @@
+import { ChangeEventHandler, useCallback } from 'react';
+import NumberFormat from 'react-number-format';
+import { InputWrapper } from './input-wrapper';
+import styles from './form.module.scss';
+
+type Props = {
+  autoFocus?: boolean;
+  id: string;
+  helperText?: string;
+  error?: boolean;
+  placeholder?: string;
+  type?: 'text' | 'number';
+  value: string;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+};
+
+const Input = ({ type = 'text', ...componentProps }: Props) => {
+  const CustomNumberInput = useCallback((props: any) => {
+    return (
+      <div className={styles.input}>
+        <input {...props} />
+      </div>
+    );
+  }, []);
+
+  if (type === 'number') {
+    return (
+      <InputWrapper {...componentProps}>
+        <NumberFormat {...componentProps} customInput={CustomNumberInput} decimalScale={18} />
+      </InputWrapper>
+    );
+  }
+
+  return (
+    <InputWrapper {...componentProps}>
+      <div className={styles.input}>
+        <input {...componentProps} />
+      </div>
+    </InputWrapper>
+  );
+};
+
+export default Input;

src/components/form/textarea.tsx

@@ -0,0 +1,24 @@
+import { ChangeEventHandler } from 'react';
+import { InputWrapper } from './input-wrapper';
+import styles from './form.module.scss';
+
+type Props = {
+  id: string;
+  helperText?: string;
+  error?: boolean;
+  placeholder?: string;
+  value: string;
+  onChange: ChangeEventHandler<HTMLTextAreaElement>;
+};
+
+const Textarea = (props: Props) => {
+  return (
+    <InputWrapper {...props}>
+      <div className={styles.input}>
+        <textarea className={styles.input} {...props} />
+      </div>
+    </InputWrapper>
+  );
+};
+
+export default Textarea;

src/components/icons/check-circle-fill.tsx

@@ -0,0 +1,30 @@
+import { ComponentProps } from 'react';
+
+interface Props extends ComponentProps<'svg'> {
+  theme?: 'dark' | 'light';
+}
+
+export const CheckCircleFillIcon = ({ theme = 'light', ...props }: Props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none" {...props}>
+      <mask id="path-1-inside-1_10049_29682" fill="white">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.00033 17.3327C13.6027 17.3327 17.3337 13.6017 17.3337 8.99935C17.3337 4.39698 13.6027 0.666016 9.00033 0.666016C4.39795 0.666016 0.666992 4.39698 0.666992 8.99935C0.666992 13.6017 4.39795 17.3327 9.00033 17.3327ZM13.8415 6.82514C14.2077 6.45903 14.2077 5.86544 13.8415 5.49932C13.4754 5.1332 12.8818 5.1332 12.5157 5.49932L7.50675 10.5083L5.91303 8.91457C5.54692 8.54845 4.95333 8.54845 4.58721 8.91457C4.22109 9.28068 4.22109 9.87427 4.58721 10.2404L6.84384 12.497C7.20995 12.8631 7.80355 12.8631 8.16966 12.497L13.8415 6.82514Z"
+        />
+      </mask>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.00033 17.3327C13.6027 17.3327 17.3337 13.6017 17.3337 8.99935C17.3337 4.39698 13.6027 0.666016 9.00033 0.666016C4.39795 0.666016 0.666992 4.39698 0.666992 8.99935C0.666992 13.6017 4.39795 17.3327 9.00033 17.3327ZM13.8415 6.82514C14.2077 6.45903 14.2077 5.86544 13.8415 5.49932C13.4754 5.1332 12.8818 5.1332 12.5157 5.49932L7.50675 10.5083L5.91303 8.91457C5.54692 8.54845 4.95333 8.54845 4.58721 8.91457C4.22109 9.28068 4.22109 9.87427 4.58721 10.2404L6.84384 12.497C7.20995 12.8631 7.80355 12.8631 8.16966 12.497L13.8415 6.82514Z"
+        fill={theme === 'light' ? '#4049A8' : '#FAFAFA'}
+      />
+      <path
+        d="M13.8415 6.82514L13.2523 6.23589L13.8415 6.82514ZM7.50675 10.5083L6.91749 11.0975L7.50675 11.6868L8.09601 11.0975L7.50675 10.5083ZM5.91303 8.91457L6.50229 8.32531L6.50229 8.32531L5.91303 8.91457ZM4.58721 8.91457L3.99795 8.32531L3.99795 8.32531L4.58721 8.91457ZM4.58721 10.2404L3.99795 10.8296L4.58721 10.2404ZM6.84384 12.497L7.43309 11.9078L6.84384 12.497ZM8.16966 12.497L8.75892 13.0863L8.16966 12.497ZM16.5003 8.99935C16.5003 13.1415 13.1425 16.4993 9.00033 16.4993V18.166C14.0629 18.166 18.167 14.062 18.167 8.99935H16.5003ZM9.00033 1.49935C13.1425 1.49935 16.5003 4.85721 16.5003 8.99935H18.167C18.167 3.93674 14.0629 -0.167318 9.00033 -0.167318V1.49935ZM1.50033 8.99935C1.50033 4.85721 4.85819 1.49935 9.00033 1.49935V-0.167318C3.93772 -0.167318 -0.166341 3.93674 -0.166341 8.99935H1.50033ZM9.00033 16.4993C4.85819 16.4993 1.50033 13.1415 1.50033 8.99935H-0.166341C-0.166341 14.062 3.93772 18.166 9.00033 18.166V16.4993ZM13.2523 6.08857C13.293 6.12925 13.293 6.19521 13.2523 6.23589L14.4308 7.4144C15.1223 6.72285 15.1223 5.60162 14.4308 4.91006L13.2523 6.08857ZM13.105 6.08857C13.1456 6.04789 13.2116 6.04789 13.2523 6.08857L14.4308 4.91006C13.7392 4.21851 12.618 4.21851 11.9265 4.91006L13.105 6.08857ZM8.09601 11.0975L13.105 6.08857L11.9265 4.91006L6.91749 9.91903L8.09601 11.0975ZM5.32378 9.50382L6.91749 11.0975L8.09601 9.91903L6.50229 8.32531L5.32378 9.50382ZM5.17646 9.50382C5.21714 9.46314 5.2831 9.46314 5.32378 9.50382L6.50229 8.32531C5.81074 7.63376 4.68951 7.63376 3.99795 8.32531L5.17646 9.50382ZM5.17647 9.65114C5.13579 9.61046 5.13579 9.5445 5.17647 9.50382L3.99795 8.32531C3.3064 9.01686 3.3064 10.1381 3.99795 10.8296L5.17647 9.65114ZM7.43309 11.9078L5.17647 9.65114L3.99795 10.8296L6.25458 13.0863L7.43309 11.9078ZM7.58041 11.9078C7.53973 11.9484 7.47377 11.9484 7.43309 11.9078L6.25458 13.0863C6.94614 13.7778 8.06737 13.7778 8.75892 13.0863L7.58041 11.9078ZM13.2523 6.23589L7.58041 11.9078L8.75892 13.0863L14.4308 7.4144L13.2523 6.23589Z"
+        fill={theme === 'light' ? '#4049A8' : '#FAFAFA'}
+        mask="url(#path-1-inside-1_10049_29682)"
+      />
+    </svg>
+  );
+};

src/components/icons/checkbox-radio.tsx

@@ -0,0 +1,27 @@
+import { ComponentProps } from 'react';
+
+interface Props extends ComponentProps<'svg'> {
+  theme?: 'dark' | 'light';
+}
+
+export const CheckboxRadioIcon = ({ theme = 'light', ...props }: Props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+      <g clipPath="url(#clip0_10054_89269)">
+        <path
+          d="M19.375 10C19.375 15.1777 15.1777 19.375 10 19.375C4.82233 19.375 0.625 15.1777 0.625 10C0.625 4.82233 4.82233 0.625 10 0.625C15.1777 0.625 19.375 4.82233 19.375 10Z"
+          fill={theme === 'light' ? '#F8FAFD' : '#0C1143'}
+          stroke={theme === 'light' ? '#99A0E4' : '#D1D5FD'}
+          stroke-width="1.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_10054_89269">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

src/components/icons/cross.tsx

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+
+export const CrossIcon = ({ ...props }: ComponentProps<'svg'>) => {
+  return (
+    <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M4.5 5L11.5 12" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+      <path
+        d="M4.5 12.001L7.99973 8.50125L11.5 5.00098"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

src/components/icons/index.ts

@@ -1,4 +1,8 @@
+import { CheckCircleFillIcon } from './check-circle-fill';
+import { CheckboxRadioIcon } from './checkbox-radio';
 import { CloseIcon } from './close';
+import { CrossIcon } from './cross';
 import { HelpOutlineIcon } from './help-outline';
+import { InfoCircleIcon } from './info-circle';
 
-export { CloseIcon, HelpOutlineIcon };
+export { CheckCircleFillIcon, CheckboxRadioIcon, CloseIcon, CrossIcon, HelpOutlineIcon, InfoCircleIcon };

src/components/icons/info-circle.tsx

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+
+export const InfoCircleIcon = (props: ComponentProps<'svg'>) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <circle cx="8.00065" cy="7.99967" r="6.16667" stroke="currentColor" />
+      <path d="M7 7H8.0038L8.0038 11H9" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+      <circle cx="7.90078" cy="5.1" r="0.6" fill="currentColor" />
+    </svg>
+  );
+};

src/components/input/index.ts

@@ -1 +1 @@
-export { default } from './input';
+export { default as Input } from './input';