odaptos_design_system 1.4.13 → 1.4.15

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.13",
+  "version": "1.4.15",
   "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/Icons/Miscellaneous/AppWindowPieIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export default function AppWindowPieIcon({
+  stroke,
+  strokeWidth,
+  fill,
+  ...rest
+}: SvgIconProps) {
+  return (
+    <SvgIcon
+      strokeWidth={strokeWidth ?? 0.1}
+      stroke={stroke ? stroke : 'currentColor'}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M21 1.60001H3C1.4 1.60001 0.800003 2.90001 0.800003 3.80001V20.3C0.800003 21.9 2.1 22.5 3 22.5H21C22.6 22.5 23.2 21.2 23.2 20.3V3.80001C23.2 2.10001 21.9 1.60001 21 1.60001ZM3 3.00001H21C21.3 3.00001 21.8 3.10001 21.8 3.80001V6.10001H2.2V3.80001C2.2 3.50001 2.3 3.00001 3 3.00001ZM21 21.1H3C2.7 21.1 2.2 21 2.2 20.3V7.50001H21.8V20.3C21.8 20.5 21.7 21.1 21 21.1ZM13.8 12.3C13.5 11.7 13.2 11.1 12.7 10.6C12.2 10.1 11.6 9.70001 11 9.50001C10.4 9.20001 9.7 9.10001 9 9.10001C8.3 9.10001 7.7 9.20001 7 9.50001C6.4 9.80001 5.8 10.1 5.3 10.6C4.8 11.1 4.4 11.7 4.2 12.3C3.9 12.9 3.8 13.6 3.8 14.3C3.8 15.7 4.3 17 5.3 18C6.3 19 7.6 19.5 9 19.5C10.4 19.5 11.7 19 12.7 18C13.7 17 14.2 15.7 14.2 14.3C14.2 13.6 14.1 12.9 13.8 12.3ZM11.7 11.6C12.1 12 12.3 12.4 12.5 12.8C12.7 13.3 12.8 13.8 12.8 14.3C12.8 15.1 12.6 15.8 12.1 16.4L9.7 14V10.6C9.93739 10.6 10.1122 10.6626 10.3234 10.7383L10.3235 10.7383L10.3236 10.7384C10.3793 10.7583 10.4375 10.7792 10.5 10.8C10.9 10.9 11.3 11.2 11.7 11.6ZM6.3 16.9C5.6 16.2 5.2 15.2 5.2 14.2C5.2 13.7 5.3 13.2 5.5 12.7C5.7 12.2 6 11.8 6.3 11.5C6.7 11.1 7.1 10.9 7.5 10.7C7.7 10.6 8 10.5 8.3 10.5V14.2C8.3 14.4 8.4 14.6 8.5 14.7L11.1 17.3C9.7 18.4 7.6 18.2 6.3 16.9ZM16.5 10.6H19.5C19.9 10.6 20.2 10.9 20.2 11.3C20.2 11.7 19.9 12 19.5 12H16.5C16.1 12 15.8 11.7 15.8 11.3C15.8 10.9 16.1 10.6 16.5 10.6ZM19.5 13.6H16.5C16.1 13.6 15.8 13.9 15.8 14.3C15.8 14.7 16.1 15 16.5 15H19.5C19.9 15 20.2 14.7 20.2 14.3C20.2 13.9 19.9 13.6 19.5 13.6ZM16.5 16.6H19.5C19.9 16.6 20.2 16.9 20.2 17.3C20.2 17.7 19.9 18 19.5 18H16.5C16.1 18 15.8 17.7 15.8 17.3C15.8 16.9 16.1 16.6 16.5 16.6Z"
+          fill="#00040A"
+        />
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/Icons/index.ts

@@ -70,6 +70,7 @@ export { default as RecordingIcon } from './MediaControl/RecordingIcon';
 export { default as VolumeIcon } from './MediaControl/VolumeIcon';
 export { default as AddSeatIcon } from './Miscellaneous/AddSeatIcon';
 export { default as AddUsersIcon } from './Miscellaneous/AddUsersIcon';
+export { default as AppWindowPieIcon } from './Miscellaneous/AppWindowPieIcon';
 export { default as BillPdfIcon } from './Miscellaneous/BillPdfIcon';
 export { default as BinocularIcon } from './Miscellaneous/BinocularIcon';
 export { default as BrainIcon } from './Miscellaneous/BrainIcon';
@@ -93,8 +94,8 @@ export { default as LinkIcon } from './Miscellaneous/LinkIcon';
 export { default as MetaAnalyseIcon } from './Miscellaneous/MetaAnalyseIcon';
 export { default as ModeratedIcon } from './Miscellaneous/ModeratedIcon';
 export { default as NbOfUsersIcon } from './Miscellaneous/NbOfUsersIcon';
-export { default as OfficeDrawerIcon } from './Miscellaneous/OfficeDrawerIcon';
 export { default as NeutralBackgroudIcon } from './Miscellaneous/NeutralBackgroudIcon';
+export { default as OfficeDrawerIcon } from './Miscellaneous/OfficeDrawerIcon';
 export { default as RefreshIcon } from './Miscellaneous/RefreshIcon';
 export { default as ReportIcon } from './Miscellaneous/ReportIcon';
 export { default as SeatIcon } from './Miscellaneous/SeatIcon';

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}