odaptos_design_system 1.4.13 → 1.4.14

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.13",
+  "version": "1.4.14",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/Buttons/Button.modules.scss

@@ -33,7 +33,7 @@
 
 .button_secondary {
   background: transparent;
-  border: 1px solid transparent;
+  border: 1px solid var(--color-neutral-basics-black, #00040a);
   &:hover {
     border: 1px solid var(--color-neutral-basics-black, #00040a);
     background: var(--color-neutral-clear-shades-200, #e1e1e2);

package/src/DatePicker/DatePicker.modules.scss

@@ -0,0 +1,55 @@
+.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;
+
+  svg {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+}
+
+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/DatePicker/DatePicker.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Text } from '../Typography/Text';
+import styles from './DatePicker.modules.scss';
+import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
+
+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 DatePicker = (props: InputProps) => {
+  const {
+    className,
+    topLabel,
+    required = false,
+    value,
+    onChange,
+    error,
+    id,
+    helperText,
+    errorText,
+  } = props;
+
+  return (
+    <div className={`${className} ${styles.input}`} id={id}>
+      {topLabel && (
+        <Text
+          text={`${topLabel ? topLabel : ''}`}
+          weight="bold"
+          size="base"
+          className={styles.input_top_label}
+          required={required}
+        />
+      )}
+      <MuiDatePicker
+        label="Controlled picker"
+        value={value}
+        onChange={onChange}
+      />
+
+      {errorText && error && (
+        <Text
+          size="xs"
+          color="#F54C4C"
+          italic
+          text={errorText}
+          className={styles.text_below}
+        />
+      )}
+      {helperText && (
+        <Text
+          size="xs"
+          italic
+          text={helperText}
+          className={styles.text_below}
+        />
+      )}
+    </div>
+  );
+};

package/src/Icons/Interaction/BinIcon.tsx

@@ -20,31 +20,36 @@ export default function BinIcon({
         viewBox="0 0 24 24"
         fill="none"
       >
-        <g clipPath="url(#clip0_122_177)">
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25ZM0.75 12C0.75 5.7868 5.7868 0.75 12 0.75C18.2132 0.75 23.25 5.7868 23.25 12C23.25 18.2132 18.2132 23.25 12 23.25C5.7868 23.25 0.75 18.2132 0.75 12Z"
-            fill={fill}
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M12 7.5C12.4142 7.5 12.75 7.83579 12.75 8.25V12C12.75 12.4142 12.4142 12.75 12 12.75C11.5858 12.75 11.25 12.4142 11.25 12V8.25C11.25 7.83579 11.5858 7.5 12 7.5Z"
-            fill={fill}
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M11.4697 11.4696C11.7627 11.1768 12.2375 11.1768 12.5304 11.4697L17.2174 16.1577C17.5102 16.4507 17.5102 16.9255 17.2173 17.2184C16.9243 17.5112 16.4495 17.5112 16.1566 17.2183L11.4696 12.5303C11.1768 12.2373 11.1768 11.7625 11.4697 11.4696Z"
-            fill={fill}
-          />
-        </g>
-        <defs>
-          <clipPath id="clip0_122_177">
-            <rect width="24" height="24" fill="white" />
-          </clipPath>
-        </defs>
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M3.46143 5.07692C3.46143 4.6627 3.79722 4.32692 4.21143 4.32692H19.7883C20.2025 4.32692 20.5383 4.6627 20.5383 5.07692V20.6538C20.5383 21.3118 20.277 21.9427 19.8117 22.408C19.3465 22.8733 18.7155 23.1346 18.0576 23.1346H5.94219C5.28431 23.1346 4.65329 22.8733 4.18801 22.408C3.72278 21.9428 3.46143 21.3118 3.46143 20.6538V5.07692ZM4.96143 5.82692V20.6538C4.96143 20.914 5.06476 21.1634 5.2487 21.3474C5.43258 21.5313 5.68203 21.6346 5.94219 21.6346H18.0576C18.3177 21.6346 18.5671 21.5313 18.7511 21.3474C18.935 21.1635 19.0383 20.914 19.0383 20.6538V5.82692H4.96143Z"
+          fill={fill}
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M9.40381 9.5192C9.81802 9.5192 10.1538 9.85498 10.1538 10.2692V17.1923C10.1538 17.6065 9.81802 17.9423 9.40381 17.9423C8.9896 17.9423 8.65381 17.6065 8.65381 17.1923V10.2692C8.65381 9.85498 8.9896 9.5192 9.40381 9.5192Z"
+          fill={fill}
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M14.5962 9.5192C15.0104 9.5192 15.3462 9.85498 15.3462 10.2692V17.1923C15.3462 17.6065 15.0104 17.9423 14.5962 17.9423C14.182 17.9423 13.8462 17.6065 13.8462 17.1923V10.2692C13.8462 9.85498 14.182 9.5192 14.5962 9.5192Z"
+          fill={fill}
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M0 5.07692C0 4.6627 0.335786 4.32692 0.75 4.32692H23.25C23.6642 4.32692 24 4.6627 24 5.07692C24 5.49113 23.6642 5.82692 23.25 5.82692H0.75C0.335786 5.82692 0 5.49113 0 5.07692Z"
+          fill={fill}
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M7.64971 1.59198C8.11494 1.12675 8.74593 0.865387 9.40386 0.865387H14.5962C15.2541 0.865387 15.8851 1.12677 16.3503 1.59197C16.8156 2.05725 17.0769 2.68827 17.0769 3.34616V5.07693C17.0769 5.49114 16.7411 5.82693 16.3269 5.82693H7.6731C7.25889 5.82693 6.9231 5.49114 6.9231 5.07693V3.34616C6.9231 2.68823 7.18446 2.05722 7.64971 1.59198ZM9.40386 2.36539C9.14375 2.36539 8.89429 2.46872 8.71036 2.65265C8.52644 2.83656 8.4231 3.08603 8.4231 3.34616V4.32693H15.5769V3.34616C15.5769 3.08599 15.4736 2.83655 15.2897 2.65266C15.1057 2.4687 14.8563 2.36539 14.5962 2.36539H9.40386Z"
+          fill={fill}
+        />
       </svg>
     </SvgIcon>
   );

package/src/Notifications/Banner.modules.scss

@@ -5,6 +5,13 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 1rem;
+
+  h2 {
+    white-space: break-spaces;
+  }
+  p {
+    white-space: break-spaces;
+  }
 }
 
 .notification_banner_header {

package/src/SingleSelect/SingleSelect.tsx

@@ -139,10 +139,10 @@ export const SingleSelect = ({
   }, [defaultValue]);
 
   return (
-    <div className={`${className}`}>
+    <div className={`${className && className}`} style={{ width: '100%' }}>
       {topLabel && (
         <Text
-          text={`${topLabel ? topLabel : ''} ${required ? '*' : ''}`}
+          text={`${topLabel ? topLabel : ''}`}
           weight="bold"
           size="base"
           className={styles.input_top_label}