odaptos_design_system 1.4.253 → 1.4.254

package/dist/Badge/Badge.d.ts

@@ -6,8 +6,9 @@ interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
     iconLeft?: JSX.Element;
     iconRight?: JSX.Element;
     number?: number;
+    customColor?: string;
     className?: string;
 }
 /** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=3073-110563&mode=dev  */
-export declare const Badge: ({ text, status, size, iconLeft, iconRight, number, className, ...props }: BadgeProps) => React.JSX.Element;
+export declare const Badge: ({ text, status, size, iconLeft, iconRight, number, customColor, className, ...props }: BadgeProps) => React.JSX.Element;
 export {};

package/dist/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ColorPickerProps {
+    color: string;
+    onChange: (color: string) => void;
+}
+export declare const ColorPicker: ({ color, onChange }: ColorPickerProps) => React.JSX.Element;
+export {};

package/dist/Thematic/Thematic.d.ts

@@ -8,6 +8,7 @@ export interface ThematicProps {
         name: string;
         color: string;
         amount: number;
+        definition?: string;
     }>;
     onClickTag?: (tag: Object) => void;
     onClickEditThematic?: (id: string) => void;
@@ -15,4 +16,4 @@ export interface ThematicProps {
     editCMSText?: string;
     deleteCMSText?: string;
 }
-export declare const Thematic: ({ id, name, color, tagsList, onClickTag, onClickEditThematic, onClickDeleteThematic, editCMSText, deleteCMSText, }: ThematicProps) => React.JSX.Element;
+export declare const Thematic: ({ id, name, definition, color, tagsList, onClickTag, onClickEditThematic, onClickDeleteThematic, editCMSText, deleteCMSText, }: ThematicProps) => React.JSX.Element;

package/dist/odaptos_design_system.cjs.development.js

@@ -7,6 +7,8 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 var material = require('@mui/material');
+var colord = require('colord');
+var mixPlugin = _interopDefault(require('colord/plugins/mix'));
 var styles$Z = require('@mui/material/styles');
 var AdapterDateFnsV3 = require('@mui/x-date-pickers/AdapterDateFnsV3');
 var enUS = require('date-fns/locale/en-US');
@@ -27,8 +29,6 @@ var TextField = _interopDefault(require('@mui/material/TextField'));
 var system = require('@mui/system');
 var Tab = _interopDefault(require('@mui/material/Tab'));
 var Tabs$1 = _interopDefault(require('@mui/material/Tabs'));
-var colord = require('colord');
-var mixPlugin = _interopDefault(require('colord/plugins/mix'));
 var dayjs = _interopDefault(require('dayjs'));
 var utc = _interopDefault(require('dayjs/plugin/utc'));
 var enGB = require('date-fns/locale/en-GB');
@@ -8763,6 +8763,7 @@ var css_248z$3 = ".Badge-modules_badge__rcW9l{align-items:center;border-radius:6
 var styles$3 = {"badge":"Badge-modules_badge__rcW9l","badge_idle":"Badge-modules_badge_idle__h2sgJ","badge_info":"Badge-modules_badge_info__pmG6r","badge_success":"Badge-modules_badge_success__B3T1K","badge_warning":"Badge-modules_badge_warning__Fv2f6","badge_critical":"Badge-modules_badge_critical__0-YAa","badge_alt":"Badge-modules_badge_alt__CEiw6","badge_sm":"Badge-modules_badge_sm__j8EcD","badge_lg":"Badge-modules_badge_lg__R8zxz","badge_base":"Badge-modules_badge_base__kFbf-"};
 styleInject(css_248z$3);
 
+colord.extend([mixPlugin]); //Used for the .tints() method of colord
 /** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=3073-110563&mode=dev  */
 const Badge = ({
   text,
@@ -8771,35 +8772,52 @@ const Badge = ({
   iconLeft,
   iconRight,
   number,
+  customColor,
   className,
   ...props
 }) => {
-  const getStatusColor = () => {
-    if (status === 'idle') {
-      return '#64666A';
-    } else if (status === 'success') return '#3C743D';else if (status === 'info') return '#004799';else if (status === 'warning') return '#6E4F00';else if (status === 'critical') return '#98312E';else if (status === 'alt') return '#5C1994';else return '#004799';
+  const tagCustomColor = customColor ? colord.colord(customColor) : undefined;
+  const getTextColor = () => {
+    if (tagCustomColor) {
+      return tagCustomColor.tints(5)[4].toHex();
+    } else if (status === 'idle') return '#64666A';else if (status === 'success') return '#3C743D';else if (status === 'info') return '#004799';else if (status === 'warning') return '#6E4F00';else if (status === 'critical') return '#98312E';else if (status === 'alt') return '#5C1994';else return '#004799';
   };
   const getTextSize = () => {
     if (size === 'lg') return 'base';else if (size === 'sm') return 'xs';else if (size === 'base') return 'sm';else return size;
   };
   const getStyleByStatus = () => {
-    if (status === 'idle') return styles$3.badge_idle;else if (status === 'info') return styles$3.badge_info;else if (status === 'success') return styles$3.badge_success;else if (status === 'warning') return styles$3.badge_warning;else if (status === 'critical') return styles$3.badge_critical;else if (status === 'alt') return styles$3.badge_alt;else return styles$3.badge;
+    if (customColor) {
+      return styles$3.badge_custom;
+    } else if (status === 'idle') return styles$3.badge_idle;else if (status === 'info') return styles$3.badge_info;else if (status === 'success') return styles$3.badge_success;else if (status === 'warning') return styles$3.badge_warning;else if (status === 'critical') return styles$3.badge_critical;else if (status === 'alt') return styles$3.badge_alt;else return styles$3.badge;
   };
   const getSizeByStatus = () => {
     if (size === 'sm') return styles$3.badge_sm;else if (size === 'lg') return styles$3.badge_lg;else if (size === 'base') return styles$3.badge_base;else return styles$3.badge_base;
   };
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    style: {
+      backgroundColor: customColor
+    },
     className: `${styles$3.badge} ${getStyleByStatus()} ${getSizeByStatus()} ${className ?? ''}`
-  }), iconLeft && iconLeft, /*#__PURE__*/React__default.createElement(Text, {
+  }), iconLeft && /*#__PURE__*/React__default.cloneElement(iconLeft, {
+    style: {
+      fill: getTextColor(),
+      stroke: getTextColor()
+    }
+  }), /*#__PURE__*/React__default.createElement(Text, {
     size: getTextSize(),
     text: text,
-    color: getStatusColor()
+    color: getTextColor()
   }), number && /*#__PURE__*/React__default.createElement(Text, {
     size: getTextSize(),
     text: `${number}`,
-    color: getStatusColor(),
+    color: getTextColor(),
     weight: "bold"
-  }), iconRight && iconRight);
+  }), iconRight && /*#__PURE__*/React__default.cloneElement(iconRight, {
+    style: {
+      fill: getTextColor(),
+      stroke: getTextColor()
+    }
+  }));
 };
 
 var css_248z$4 = "@import \"../../styles/index.css\";.TextForButton-modules_button_text__ti6YE{font-family:var(--sdFontFamilyPoppins);font-weight:var(--sdFontWeightMedium);letter-spacing:var(--sdLetterSpacingButtons);margin:unset;padding:.125rem 0;text-align:left}.TextForButton-modules_button_text_bold__L1fLC{font-weight:var(--sdFontWeightSemibold)}.TextForButton-modules_button_text_sm__NXijI{font-size:var(--sdFontSizeSm);line-height:var(--sdLineHeight140)}.TextForButton-modules_button_text_base__5ToZ9{font-size:var(--sdFontSizeBase);line-height:var(--sdLineHeight150)}.TextForButton-modules_button_text_lg__s-LLo{font-size:var(--sdFontSizeLg);line-height:var(--sdLineHeight150)}";
@@ -13209,7 +13227,7 @@ var css_248z$Q = ".Tag-modules_tag__H7-4Y{align-items:center;border-radius:.25re
 var styles$Q = {"tag":"Tag-modules_tag__H7-4Y","tag_idle":"Tag-modules_tag_idle__Fq6m8","tag_info":"Tag-modules_tag_info__aMPRZ","tag_violet":"Tag-modules_tag_violet__fcKoT","tag_light":"Tag-modules_tag_light__OskUB","tag_success":"Tag-modules_tag_success__2LvMD","tag_warning":"Tag-modules_tag_warning__AIt1v","tag_critical":"Tag-modules_tag_critical__LQoYS","tag_sm":"Tag-modules_tag_sm__6woOo","tag_base":"Tag-modules_tag_base__NFJol"};
 styleInject(css_248z$Q);
 
-colord.extend([mixPlugin]);
+colord.extend([mixPlugin]); //Used for the .tints() method of colord
 /** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=1359-33355&mode=dev  */
 const Tag = ({
   text,
@@ -13356,6 +13374,7 @@ styleInject(css_248z$S);
 const Thematic = ({
   id,
   name,
+  definition,
   color,
   tagsList = [],
   onClickTag,
@@ -13385,6 +13404,18 @@ const Thematic = ({
       onClickTag(tag);
     }
   };
+  const handleOnClickEditThematic = id => {
+    if (onClickEditThematic) {
+      onClickEditThematic(id);
+    }
+    setIsPopoverOpen(false);
+  };
+  const handleOnClickDeleteThematic = id => {
+    if (onClickDeleteThematic) {
+      onClickDeleteThematic(id);
+    }
+    setIsPopoverOpen(false);
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: styles$S.thematic,
     style: {
@@ -13393,11 +13424,16 @@ const Thematic = ({
     }
   }, /*#__PURE__*/React__default.createElement("div", {
     className: styles$S.thematic__header
-  }, /*#__PURE__*/React__default.createElement(Badge, {
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    tooltipDescription: definition,
+    placement: "top",
+    isTooltipActive: !!definition,
+    arrow: true
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Badge, {
     text: name,
     size: "base",
     status: "success"
-  }), /*#__PURE__*/React__default.createElement(IconButton, {
+  }))), /*#__PURE__*/React__default.createElement(IconButton, {
     icon: /*#__PURE__*/React__default.createElement(MenuVerticalIcon, {
       fill: borderColor,
       stroke: borderColor
@@ -13421,8 +13457,8 @@ const Thematic = ({
     className: styles$S.dropdown
   }, /*#__PURE__*/React__default.createElement("div", {
     className: styles$S.item,
-    onClick: onClickEditThematic ? () => onClickEditThematic(id) : () => console.log('No id provided for duplication')
-  }, /*#__PURE__*/React__default.createElement(FilesIcon, {
+    onClick: () => handleOnClickEditThematic(id)
+  }, /*#__PURE__*/React__default.createElement(EditIcon, {
     fill: colors.black,
     size: "base"
   }), /*#__PURE__*/React__default.createElement(Text, {
@@ -13432,7 +13468,7 @@ const Thematic = ({
     className: styles$S.divider
   }), /*#__PURE__*/React__default.createElement("div", {
     className: styles$S.item,
-    onClick: onClickDeleteThematic ? () => onClickDeleteThematic(id) : () => console.log('No id provided for deletion')
+    onClick: () => handleOnClickDeleteThematic(id)
   }, /*#__PURE__*/React__default.createElement(BinIcon, {
     fill: colors.red_500,
     size: "base"
@@ -13445,13 +13481,18 @@ const Thematic = ({
     key: `${tag}-${idx}`,
     className: styles$S.tag,
     onClick: () => handleOnClickTag(tag)
-  }, /*#__PURE__*/React__default.createElement(Tag, {
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    tooltipDescription: tag.definition,
+    placement: "top",
+    isTooltipActive: !!tag.definition,
+    arrow: true
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Tag, {
     text: tag.name,
     customColor: tag.color,
     size: "base",
     amountNumber: tag.amount,
     className: styles$S.overflow_tag
-  })))));
+  })))))));
 };
 
 var css_248z$T = ".TimeInterval-module_time_interval__C1ITD{align-items:center;cursor:pointer;display:flex}";