odaptos_design_system 2.0.189 → 2.0.191

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.189",
+  "version": "2.0.191",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -15,7 +15,6 @@
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",
-    "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "storybook": "storybook dev -p 8080",
@@ -56,7 +55,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@size-limit/preset-small-lib": "^8.2.4",
-    "@storybook/addon-essentials": "^7.0.8",
+    "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-links": "^7.0.10",
     "@storybook/addons": "^7.0.8",
@@ -73,7 +72,6 @@
     "size-limit": "^8.2.4",
     "storybook": "^7.0.8",
     "storybook-design-token": "^3.0.0-beta.3",
-    "tsdx": "^0.14.1",
     "tslib": "^2.5.0",
     "typescript": "^3.9.10"
   },
@@ -105,6 +103,7 @@
     "sass-loader": "^13.2.2",
     "storybook-addon-grid-overlay": "^0.0.9",
     "storybook-css-modules-preset": "^1.1.1",
-    "style-loader": "^3.3.2"
+    "style-loader": "^3.3.2",
+    "tsdx": "^0.14.1"
   }
 }

package/src/Atoms/Buttons/Button.modules.scss

@@ -242,7 +242,6 @@
 .button_sm {
   padding: 0rem 1rem;
   border-radius: 0.375rem;
-
   svg {
     height: 0.75rem;
     width: 0.75rem;

package/src/Atoms/Switch/Switch.tsx

@@ -71,4 +71,4 @@ export const Switch = ({
       )}
     </div>
   );
-};
+};

package/src/DesignTokens/Icons/Arrows/ArrowDoubleLineDownIcon.tsx

@@ -15,7 +15,7 @@ export default function ArrowDoubleLineDownIcon({
 }: SvgIconProps & CustomSvgProps) {
   return (
     <SvgIcon
-      strokeWidth={strokeWidth ?? 0.5}
+      strokeWidth={strokeWidth ?? 0.1}
       stroke={stroke ? stroke : 'currentColor'}
       sx={{ height: getIconSize(size), width: getIconSize(size) }}
       {...rest}

package/src/DesignTokens/Icons/Arrows/ArrowDoubleLineLeftIcon.tsx

@@ -15,7 +15,7 @@ export default function ArrowDoubleLineLeftIcon({
 }: SvgIconProps & CustomSvgProps) {
   return (
     <SvgIcon
-      strokeWidth={strokeWidth ?? 0.5}
+      strokeWidth={strokeWidth ?? 0.1}
       stroke={stroke ? stroke : 'currentColor'}
       sx={{ height: getIconSize(size), width: getIconSize(size) }}
       {...rest}

package/src/DesignTokens/Icons/Arrows/ArrowDoubleLineRightIcon.tsx

@@ -15,7 +15,7 @@ export default function ArrowDoubleLineRightIcon({
 }: SvgIconProps & CustomSvgProps) {
   return (
     <SvgIcon
-      strokeWidth={strokeWidth ?? 0.5}
+      strokeWidth={strokeWidth ?? 0.1}
       stroke={stroke ? stroke : 'currentColor'}
       sx={{ height: getIconSize(size), width: getIconSize(size) }}
       {...rest}

package/src/DesignTokens/Icons/Arrows/ArrowDoubleLineUpIcon.tsx

@@ -15,7 +15,7 @@ export default function ArrowDoubleLineUpIcon({
 }: SvgIconProps & CustomSvgProps) {
   return (
     <SvgIcon
-      strokeWidth={strokeWidth ?? 0.5}
+      strokeWidth={strokeWidth ?? 0.1}
       stroke={stroke ? stroke : 'currentColor'}
       sx={{ height: getIconSize(size), width: getIconSize(size) }}
       {...rest}

package/src/DesignTokens/Icons/Arrows/ArrowLineDownIcon.tsx

@@ -15,7 +15,7 @@ export default function ArrowLineDowIcon({
 }: SvgIconProps & CustomSvgProps) {
   return (
     <SvgIcon
-      strokeWidth={strokeWidth ?? 0.5}
+      strokeWidth={strokeWidth ?? 0.1}
       stroke={stroke ? stroke : 'currentColor'}
       sx={{ height: getIconSize(size), width: getIconSize(size) }}
       {...rest}

package/src/DesignTokens/Icons/Arrows/ArrowLineLeftIcon.tsx

@@ -15,7 +15,7 @@ export default function ArrowLineLeftIcon({
 }: SvgIconProps & CustomSvgProps) {
   return (
     <SvgIcon
-      strokeWidth={strokeWidth ?? 0.5}
+      strokeWidth={strokeWidth ?? 0.1}
       stroke={stroke ? stroke : 'currentColor'}
       sx={{ height: getIconSize(size), width: getIconSize(size) }}
       {...rest}

package/src/DesignTokens/Icons/Arrows/ArrowLineRightIcon.tsx

@@ -15,7 +15,7 @@ export default function ArrowLineRightIcon({
 }: SvgIconProps & CustomSvgProps) {
   return (
     <SvgIcon
-      strokeWidth={strokeWidth ?? 0.5}
+      strokeWidth={strokeWidth ?? 0.1}
       stroke={stroke ? stroke : 'currentColor'}
       sx={{ height: getIconSize(size), width: getIconSize(size) }}
       {...rest}

package/src/DesignTokens/Icons/Arrows/ArrowLineUpIcon.tsx

@@ -15,7 +15,7 @@ export default function ArrowLineUpIcon({
 }: SvgIconProps & CustomSvgProps) {
   return (
     <SvgIcon
-      strokeWidth={strokeWidth ?? 0.5}
+      strokeWidth={strokeWidth ?? 0.1}
       stroke={stroke ? stroke : 'currentColor'}
       sx={{ height: getIconSize(size), width: getIconSize(size) }}
       {...rest}

package/src/DesignTokens/Icons/Arrows/ArrowPointerDown.tsx

@@ -15,7 +15,7 @@ export default function ArrowPointerDown({
 }: SvgIconProps & CustomSvgProps) {
   return (
     <SvgIcon
-      strokeWidth={strokeWidth ?? 0.5}
+      strokeWidth={strokeWidth ?? 0.1}
       stroke={stroke ? stroke : 'currentColor'}
       sx={{ height: getIconSize(size), width: getIconSize(size) }}
       {...rest}

package/src/DesignTokens/Icons/Arrows/ArrowPointerDownLeft.tsx

@@ -15,7 +15,7 @@ export default function ArrowPointerDownLeft({
 }: SvgIconProps & CustomSvgProps) {
   return (
     <SvgIcon
-      strokeWidth={strokeWidth ?? 0.5}
+      strokeWidth={strokeWidth ?? 0.1}
       stroke={stroke ? stroke : 'currentColor'}
       sx={{ height: getIconSize(size), width: getIconSize(size) }}
       {...rest}

package/src/DesignTokens/Icons/Arrows/ArrowPointerDownRight.tsx

@@ -15,7 +15,7 @@ export default function ArrowPointerDownRight({
 }: SvgIconProps & CustomSvgProps) {
   return (
     <SvgIcon
-      strokeWidth={strokeWidth ?? 0.5}
+      strokeWidth={strokeWidth ?? 0.1}
       stroke={stroke ? stroke : 'currentColor'}
       sx={{ height: getIconSize(size), width: getIconSize(size) }}
       {...rest}

package/src/DesignTokens/Icons/Arrows/ArrowPointerLeft.tsx

@@ -15,7 +15,7 @@ export default function ArrowPointerLeft({
 }: SvgIconProps & CustomSvgProps) {
   return (
     <SvgIcon
-      strokeWidth={strokeWidth ?? 0.5}
+      strokeWidth={strokeWidth ?? 0.1}
       stroke={stroke ? stroke : 'currentColor'}
       sx={{ height: getIconSize(size), width: getIconSize(size) }}
       {...rest}

package/src/DesignTokens/Icons/Arrows/ArrowPointerUp.tsx

@@ -15,7 +15,7 @@ export default function ArrowPointerUp({
 }: SvgIconProps & CustomSvgProps) {
   return (
     <SvgIcon
-      strokeWidth={strokeWidth ?? 0.5}
+      strokeWidth={strokeWidth ?? 0.1}
       stroke={stroke ? stroke : 'currentColor'}
       sx={{ height: getIconSize(size), width: getIconSize(size) }}
       {...rest}

package/src/DesignTokens/Icons/Arrows/ArrowPointerUpLeft.tsx

@@ -15,7 +15,7 @@ export default function ArrowPointerUpLeft({
 }: SvgIconProps & CustomSvgProps) {
   return (
     <SvgIcon
-      strokeWidth={strokeWidth ?? 0.5}
+      strokeWidth={strokeWidth ?? 0.1}
       stroke={stroke ? stroke : 'currentColor'}
       sx={{ height: getIconSize(size), width: getIconSize(size) }}
       {...rest}

package/src/DesignTokens/Icons/Arrows/ArrowPointerUpRight.tsx

@@ -15,7 +15,7 @@ export default function ArrowPointerUpRight({
 }: SvgIconProps & CustomSvgProps) {
   return (
     <SvgIcon
-      strokeWidth={strokeWidth ?? 0.5}
+      strokeWidth={strokeWidth ?? 0.1}
       stroke={stroke ? stroke : 'currentColor'}
       sx={{ height: getIconSize(size), width: getIconSize(size) }}
       {...rest}

package/src/DesignTokens/Icons/Interaction/AddIcon.tsx

@@ -14,7 +14,7 @@ export default function AddIcon({
 }: SvgIconProps & CustomSvgProps) {
   return (
     <SvgIcon
-      strokeWidth={strokeWidth ?? 0.5}
+      strokeWidth={strokeWidth ?? 0.1}
       stroke={stroke ? stroke : 'currentColor'}
       sx={{ height: getIconSize(size), width: getIconSize(size) }}
       {...rest}

package/src/DesignTokens/Icons/Miscellaneous/TaskIcon.tsx

@@ -32,13 +32,11 @@ export default function TaskIcon({
             fillRule="evenodd"
             clipRule="evenodd"
             d="M10 0C10.2761 0 10.5 0.223858 10.5 0.5V20.5C10.5 20.7761 10.2761 21 10 21C9.72386 21 9.5 20.7761 9.5 20.5V0.5C9.5 0.223858 9.72386 0 10 0Z"
-            fill={fill}
           />
           <path
             fillRule="evenodd"
             clipRule="evenodd"
             d="M3.87267 20.4089C3.57858 20.6572 3.5 20.8591 3.5 21C3.5 21.1409 3.57858 21.3428 3.87267 21.5911C4.16445 21.8375 4.6163 22.0819 5.21842 22.2969C6.4183 22.7254 8.1088 23 10 23C11.8912 23 13.5817 22.7254 14.7816 22.2969C15.3837 22.0819 15.8356 21.8375 16.1273 21.5911C16.4214 21.3428 16.5 21.1409 16.5 21C16.5 20.8591 16.4214 20.6572 16.1273 20.4089C15.8356 20.1625 15.3837 19.9181 14.7816 19.7031C13.5817 19.2746 11.8912 19 10 19C8.1088 19 6.4183 19.2746 5.21842 19.7031C4.6163 19.9181 4.16445 20.1625 3.87267 20.4089ZM4.88208 18.7614C6.2157 18.2851 8.02521 18 10 18C11.9748 18 13.7843 18.2851 15.1179 18.7614C15.7825 18.9987 16.3558 19.293 16.7725 19.6449C17.1868 19.9947 17.5 20.4506 17.5 21C17.5 21.5494 17.1868 22.0053 16.7725 22.3551C16.3558 22.707 15.7825 23.0013 15.1179 23.2386C13.7843 23.7149 11.9748 24 10 24C8.02521 24 6.2157 23.7149 4.88208 23.2386C4.21745 23.0013 3.64418 22.707 3.22752 22.3551C2.81318 22.0053 2.5 21.5494 2.5 21C2.5 20.4506 2.81318 19.9947 3.22752 19.6449C3.64418 19.293 4.21745 18.9987 4.88208 18.7614Z"
-            fill={fill}
           />
           <path
             fillRule="evenodd"

package/src/Molecules/Interviews/StartInterview.modules.scss

@@ -0,0 +1,14 @@
+.start_interview_container {
+  display: flex;
+  padding: 0.5rem 0.75rem;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  border-radius: 0.5rem;
+  border: 1px solid #66adff;
+  background: #e5f1ff;
+  gap: 0.5rem;
+  button {
+    width: 100%;
+  }
+}

package/src/Molecules/Interviews/StartInterview.tsx

@@ -0,0 +1,27 @@
+import React, { HTMLAttributes } from 'react';
+import styles from './StartInterview.modules.scss';
+import { Button, Text, SendIcon } from '../../index';
+
+export interface StartInterviewProps extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  buttonText: string;
+  buttonIcon?: JSX.Element;
+  onClick: () => void;
+  className?: string;
+}
+
+export const StartInterview = ({
+  title,
+  buttonText,
+  buttonIcon,
+  onClick,
+  className,
+  ...props
+}: StartInterviewProps) => {
+  return (
+    <div className={styles.start_interview_container} {...props}>
+      <Text text={title} weight="bold" />
+      <Button text={buttonText} iconRight={buttonIcon ?? <SendIcon />} />
+    </div>
+  );
+};

package/src/Molecules/Interviews/Task.modules.scss

@@ -92,12 +92,9 @@
 .clickable {
   cursor: pointer;
 }
-
 .disabled_task {
   display: flex;
   flex-direction: column;
-  padding: 0px;
-  justify-content: center;
   align-items: flex-start;
   gap: 0.5rem;
   border-radius: 0.5rem;

package/src/Molecules/PricingCard/PricingCard.tsx

@@ -46,11 +46,13 @@ export const PricingCard = ({
     4: cmsContent.ContactUs,
   };
 
+  const monthlyPriceWithDiscount = Math.floor(Number(yearlyPrice) / 12);
+
   const euroPrice = isYearly
-    ? `(${monthlyPrice} ${currency})`
+    ? `(${monthlyPriceWithDiscount} ${currency})`
     : `(${yearlyPrice} ${currency})`;
   const dollarPrice = isYearly
-    ? `(${currency}${monthlyPrice} USD)`
+    ? `(${currency}${monthlyPriceWithDiscount} USD)`
     : `(${currency}${yearlyPrice} USD)`;
 
   return (

package/src/Organisms/MultiSelect/MultiSelect.scss

@@ -0,0 +1,76 @@
+.newAutocomplete {
+  width: 100%;
+  min-width: 16rem;
+
+  span {
+    font-family: OpenSans;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1.3;
+    letter-spacing: 0.03em;
+    text-align: left;
+    margin: unset;
+  }
+  label {
+    font-family: OpenSans;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1.3;
+    letter-spacing: 0.03em;
+    text-align: left;
+    margin: unset;
+  }
+
+  .MuiAutocomplete-endAdornment {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: -0.35rem !important;
+  }
+
+  .tags-container {
+    display: flex;
+    max-width: 80%;
+    flex-wrap: nowrap;
+    overflow: scroll;
+    gap: 0.5rem;
+    padding: 0 0.25rem;
+    span {
+      font-size: 0.75rem;
+    }
+    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;
+}
+
+.icon {
+  width: 1rem !important;
+  height: 1rem !important;
+  margin-left: 0.25rem;
+}
+.no_scrollbar {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}

package/src/Organisms/SingleSelect/SingleSelect.modules.scss

@@ -105,4 +105,4 @@
   width: 1rem !important;
   height: 1rem !important;
   margin-left: 0.25rem;
-}
+}

package/src/Organisms/SingleSelect/SingleSelect.tsx

@@ -182,16 +182,14 @@ export const SingleSelect = ({
       <Autocomplete
         id={inputId}
         value={value}
+        defaultValue={defaultValue}
         inputValue={inputValue}
         onInputChange={(_event, newInputValue) => {
           setInputValue(newInputValue);
         }}
         onChange={(_event, newValue) => {
-          const e = {
-            target: { name: name, value: newValue },
-          };
           setValue(newValue);
-          onChange(e);
+          onChange(newValue);
         }}
         options={options ?? []}
         multiple={false}
@@ -204,9 +202,7 @@ export const SingleSelect = ({
           else return '';
         }}
         isOptionEqualToValue={(option, value) => {
-          if (value._id && option._id) return option._id === value._id;
-          else if (value && value !== '') return option.value === value.value;
-          else return false;
+          return option.value === value.value;
         }}
         renderInput={(params) => (
           <CssTextField

package/src/Organisms/Table/rows.modules.scss

@@ -35,4 +35,4 @@
 
     border-radius: 0rem 0rem 0.25rem 0.25rem;
   }
-}
+}

package/src/Organisms/Textarea/Textarea.tsx

@@ -56,11 +56,11 @@ export const Textarea = ({
   const [charCount, setCharCount] = useState(0);
 
   const handleChange = (e: any) => {
-    const newCharCount = e.target.value.length;
-    if (newCharCount <= maxCharacters) {
-      setCharCount(newCharCount);
-      onChange(e);
-    }
+    // const newCharCount = e?.target?.value?.length;
+    // if (newCharCount <= maxCharacters) {
+    // setCharCount(newCharCount);
+    onChange(e);
+    // }
   };
 
   useEffect(() => {