odaptos_design_system 2.0.69 → 2.0.71

package/package.json

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

package/src/Atoms/Tag/Tag.modules.scss

@@ -1,4 +1,15 @@
 .tag {
+  display: flex;
+  padding: 0rem 0.375rem;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+  width: fit-content;
+  p {
+    white-space: nowrap;
+  }
+}
+.tag_ellipsis {
   display: flex;
   padding: 0rem 0.375rem;
   align-items: center;

package/src/Atoms/Tag/Tag.tsx

@@ -26,6 +26,7 @@ interface TagProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
   canBeRemoved?: boolean;
   tooltipText?: string;
+  areEllipsisActive?: boolean;
 }
 
 /** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=1359-33355&mode=dev  */
@@ -41,6 +42,7 @@ export const Tag = ({
   className,
   canBeRemoved = false,
   tooltipText,
+  areEllipsisActive = true,
   ...props
 }: TagProps) => {
   const tagCustomColor = customColor ? colord(customColor) : undefined;
@@ -105,15 +107,17 @@ export const Tag = ({
     <Tooltip
       tooltipDescription={tooltipText ?? text}
       arrow
-      isTooltipActive={isEllipsisActive}
+      isTooltipActive={areEllipsisActive ? isEllipsisActive : false}
     >
       <div
         {...props}
         id={id}
         style={{ backgroundColor: customColor }}
-        className={`${styles.tag} ${getTagStatus()} ${getTagSize()} ${
-          className ?? ''
-        } ${canBeRemoved && styles.canBeRemoved}`}
+        className={`${
+          areEllipsisActive ? styles.tag_ellipsis : styles.tag
+        } ${getTagStatus()} ${getTagSize()} ${className ?? ''} ${
+          canBeRemoved && styles.canBeRemoved
+        }`}
       >
         {iconLeft &&
           React.cloneElement(iconLeft, {

package/src/Molecules/Interviews/SelfPrortocolTaskContainer.tsx

@@ -5,7 +5,7 @@ import { Text, Button } from '../..';
 interface SelfProtocolTaskContainerProps {
   smallTitle?: string;
   mainTitle: string;
-  description: string;
+  description?: string;
   ctaText: string;
   buttonIcon?: JSX.Element;
   onClick: () => void;
@@ -34,7 +34,7 @@ const SelfProtocolTaskContainer: React.FC<SelfProtocolTaskContainerProps> = ({
       >
         {smallTitle && <Text text={smallTitle} size="xs" />}
         <Text text={mainTitle} weight="bold" size="base" />
-        <Text text={description} size="sm" />
+        {description && <Text text={description} size="sm" />}
         <Button
           id={buttonId}
           text={ctaText}

package/src/Molecules/Interviews/SelfProtocolManager.tsx

@@ -155,7 +155,6 @@ export const SelfProtocolManager = ({
                   key={task._id}
                   smallTitle={getTaskTitle(task)}
                   mainTitle={task.description}
-                  description={task.notes}
                   ctaText={texts.nextTaskCTA}
                   buttonIcon={<SendIcon />}
                   onClick={() => sendTask(task)}

package/src/Organisms/MultiSelect/MultiSelect.tsx

@@ -254,7 +254,12 @@ export const MultiSelect = ({
         }}
         renderOption={(props, option, { selected }) => {
           return (
-            <li {...props} key={`${props.id}`} style={{ gap: '0.5rem' }}>
+            <li
+              {...props}
+              id={option.value}
+              key={`${props.id}`}
+              style={{ gap: '0.5rem' }}
+            >
               <Checkbox checked={selected} onChange={() => null} />
               <TextForButton text={option.label} size="sm" />
             </li>

package/src/Organisms/MultiSelect/MultiSelectWithCategories.tsx

@@ -276,7 +276,12 @@ export const MultiSelectWithCategories = ({
         }}
         renderOption={(props, option, { selected }) => {
           return (
-            <li {...props} key={`${props.id}`} style={{ gap: '0.5rem' }}>
+            <li
+              {...props}
+              id={option.value}
+              key={`${props.id}`}
+              style={{ gap: '0.5rem' }}
+            >
               <Checkbox checked={selected} onChange={() => null} />
               <TextForButton text={option.label} size="sm" />
             </li>

package/src/Organisms/SingleSelect/SingleSelect.tsx

@@ -227,7 +227,7 @@ export const SingleSelect = ({
         className={`${styles.newAutocomplete}`}
         renderOption={(props, option) => {
           return (
-            <li {...props} key={option.value}>
+            <li {...props} key={option.value} id={option.value}>
               <TextForButton text={option.label} size="sm" />
             </li>
           );