odaptos_design_system 2.0.4 → 2.0.6

package/src/hooks/useClickOutside.ts

@@ -1,30 +1,30 @@
-import React, { useCallback, useEffect } from 'react';
-
-interface Props {
-  isOpen: boolean;
-  handler: (event: React.MouseEvent<HTMLElement>) => void;
-  elementRef: React.RefObject<HTMLDivElement>;
-}
-
-export const useOnClickOutside = ({ handler, elementRef, isOpen }: Props) => {
-  const listener = useCallback(
-    (event: any) => {
-      if (elementRef && elementRef.current && elementRef.current.parentElement && !elementRef.current.parentElement.contains(event.target)) {
-        handler(event);
-      }
-    },
-    [elementRef, handler]
-  );
-
-  useEffect(() => {
-    if (isOpen && elementRef) {
-      document.addEventListener('click', listener);
-      document.addEventListener('touchstart', listener);
-    }
-
-    return () => {
-      document.removeEventListener('click', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [isOpen, listener, elementRef]);
-};
+import React, { useCallback, useEffect } from 'react';
+
+interface Props {
+  isOpen: boolean;
+  handler: (event: React.MouseEvent<HTMLElement>) => void;
+  elementRef: React.RefObject<HTMLDivElement>;
+}
+
+export const useOnClickOutside = ({ handler, elementRef, isOpen }: Props) => {
+  const listener = useCallback(
+    (event: any) => {
+      if (elementRef && elementRef.current && elementRef.current.parentElement && !elementRef.current.parentElement.contains(event.target)) {
+        handler(event);
+      }
+    },
+    [elementRef, handler]
+  );
+
+  useEffect(() => {
+    if (isOpen && elementRef) {
+      document.addEventListener('click', listener);
+      document.addEventListener('touchstart', listener);
+    }
+
+    return () => {
+      document.removeEventListener('click', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [isOpen, listener, elementRef]);
+};

package/src/index.ts

@@ -1,74 +1,74 @@
-export * from './Molecules/Accordion/Accordion';
-export * from './Atoms/Avatar/Avatar';
-export * from './Atoms/Badge/Badge';
-export * from './Atoms/Box/Box';
-export * from './Atoms/Buttons/Button';
-export * from './Atoms/Buttons/IconButton';
-export * from './Atoms/Cards/Card';
-export * from './Atoms/Cards/CardButton';
-export * from './Molecules/ChatMessage/ChatMessage';
-export * from './Atoms/Checkbox/Checkbox';
-export * from './DesignTokens/ColorGuide/colors';
-export * from './Atoms/ColorPicker/ColorPicker';
-export * from './Atoms/DataProtectionDisclaimer/DataProtectionDisclaimer';
-export * from './Organisms/DatePicker/DatePicker';
-export * from './Molecules/FeaturesTable/FeaturesTable';
-export * from './Organisms/FormQuestions/FormQuestions';
-export * from './Atoms/QuestionButton/QuestionButton';
-export * from './DesignTokens/Icons';
-export * from './Molecules/Interviews/Chat';
-export * from './Molecules/Interviews/ChatInput';
-export * from './Molecules/Interviews/CircledIconButton';
-export * from './Molecules/Interviews/ControlsBar';
-export * from './Molecules/Interviews/EndRecording';
-export * from './Molecules/Interviews/InterviewButton';
-export * from './Molecules/Interviews/MarkUpBar';
-export * from './Molecules/Interviews/Scenario';
-export * from './Molecules/Interviews/SusExplanation';
-export * from './Molecules/Interviews/Task';
-export * from './Molecules/Interviews/WelcomeMessage';
-export * from './Molecules/LogoSlider/LogoSlider';
-export * from './Organisms/Modal/Modal';
-export * from './Organisms/MultiSelect/MultiSelect';
-export * from './Organisms/MultiSelect/MultiSelectWithCategories';
-export * from './Molecules/Notifications/Banner';
-export * from './Molecules/Notifications/NotificationIcon';
-export * from './Molecules/Notifications/Toast';
-export * from './Organisms/NumberField/NumberField';
-export * from './Atoms/NumbersCode/NumbersCode';
-export * from './Organisms/PasswordField/PasswordField';
-export * from './Atoms/PopoverBeta/PopoverBeta';
-export * from './Molecules/PricingCard/PricingCard';
-export * from './Atoms/Radio/Radio';
-export * from './Organisms/RatingScale/RatingScale';
-export * from './Atoms/Search/Search';
-export * from './Organisms/SingleSelect/SingleSelect';
-export * from './Molecules/StarRating/StarRating';
-export * from './Atoms/Switch/Switch';
-export * from './Organisms/Table/TableFooter';
-export * from './Organisms/Table/header';
-export * from './Organisms/Table/index';
-export * from './Organisms/Table/rows';
-export * from './Organisms/Table/table-cell';
-export * from './Molecules/Tabs/Tabs';
-export * from './Molecules/Tabs/TabsUnderLine';
-export * from './Atoms/Tag/Tag';
-export * from './Organisms/TextInput/TextInput';
-export * from './Organisms/Textarea/Textarea';
-export * from './Molecules/Thematic/Thematic';
-export * from './Atoms/TimeInterval/TimeInterval';
-export * from './Organisms/TimePicker/TimePicker';
-export * from './Molecules/ToggleTab/ToggleTab';
-export * from './Atoms/Tooltip/Tooltip';
-export * from './Atoms/SquareText/SquareText';
-export * from './Atoms/Typography/Caption';
-export * from './Atoms/Typography/Link';
-export * from './Atoms/Typography/Text';
-export * from './Atoms/Typography/TextForButton';
-export * from './Atoms/Typography/TextForDropDownItem';
-export * from './Atoms/Typography/TextWithLink';
-export * from './Atoms/Typography/Title';
-export * from './Molecules/UserIndicator/UserIndicator';
-export * from './utils/changeColorLuminance';
-export * from './utils/getIconSize';
-export * from './utils/getReadableTextColor';
+export * from './Molecules/Accordion/Accordion';
+export * from './Atoms/Avatar/Avatar';
+export * from './Atoms/Badge/Badge';
+export * from './Atoms/Box/Box';
+export * from './Atoms/Buttons/Button';
+export * from './Atoms/Buttons/IconButton';
+export * from './Atoms/Cards/Card';
+export * from './Atoms/Cards/CardButton';
+export * from './Molecules/ChatMessage/ChatMessage';
+export * from './Atoms/Checkbox/Checkbox';
+export * from './DesignTokens/ColorGuide/colors';
+export * from './Atoms/ColorPicker/ColorPicker';
+export * from './Atoms/DataProtectionDisclaimer/DataProtectionDisclaimer';
+export * from './Organisms/DatePicker/DatePicker';
+export * from './Molecules/FeaturesTable/FeaturesTable';
+export * from './Organisms/FormQuestions/FormQuestions';
+export * from './Atoms/QuestionButton/QuestionButton';
+export * from './DesignTokens/Icons';
+export * from './Molecules/Interviews/Chat';
+export * from './Molecules/Interviews/ChatInput';
+export * from './Molecules/Interviews/CircledIconButton';
+export * from './Molecules/Interviews/ControlsBar';
+export * from './Molecules/Interviews/EndRecording';
+export * from './Molecules/Interviews/InterviewButton';
+export * from './Molecules/Interviews/MarkUpBar';
+export * from './Molecules/Interviews/Scenario';
+export * from './Molecules/Interviews/SusExplanation';
+export * from './Molecules/Interviews/Task';
+export * from './Molecules/Interviews/WelcomeMessage';
+export * from './Molecules/LogoSlider/LogoSlider';
+export * from './Organisms/Modal/Modal';
+export * from './Organisms/MultiSelect/MultiSelect';
+export * from './Organisms/MultiSelect/MultiSelectWithCategories';
+export * from './Molecules/Notifications/Banner';
+export * from './Molecules/Notifications/NotificationIcon';
+export * from './Molecules/Notifications/Toast';
+export * from './Organisms/NumberField/NumberField';
+export * from './Atoms/NumbersCode/NumbersCode';
+export * from './Organisms/PasswordField/PasswordField';
+export * from './Atoms/PopoverBeta/PopoverBeta';
+export * from './Molecules/PricingCard/PricingCard';
+export * from './Atoms/Radio/Radio';
+export * from './Organisms/RatingScale/RatingScale';
+export * from './Atoms/Search/Search';
+export * from './Organisms/SingleSelect/SingleSelect';
+export * from './Molecules/StarRating/StarRating';
+export * from './Atoms/Switch/Switch';
+export * from './Organisms/Table/TableFooter';
+export * from './Organisms/Table/header';
+export * from './Organisms/Table/index';
+export * from './Organisms/Table/rows';
+export * from './Organisms/Table/table-cell';
+export * from './Molecules/Tabs/Tabs';
+export * from './Molecules/Tabs/TabsUnderLine';
+export * from './Atoms/Tag/Tag';
+export * from './Organisms/TextInput/TextInput';
+export * from './Organisms/Textarea/Textarea';
+export * from './Molecules/Thematic/Thematic';
+export * from './Atoms/TimeInterval/TimeInterval';
+export * from './Organisms/TimePicker/TimePicker';
+export * from './Molecules/ToggleTab/ToggleTab';
+export * from './Atoms/Tooltip/Tooltip';
+export * from './Atoms/SquareText/SquareText';
+export * from './Atoms/Typography/Caption';
+export * from './Atoms/Typography/Link';
+export * from './Atoms/Typography/Text';
+export * from './Atoms/Typography/TextForButton';
+export * from './Atoms/Typography/TextForDropDownItem';
+export * from './Atoms/Typography/TextWithLink';
+export * from './Atoms/Typography/Title';
+export * from './Molecules/UserIndicator/UserIndicator';
+export * from './utils/changeColorLuminance';
+export * from './utils/getIconSize';
+export * from './utils/getReadableTextColor';

package/src/utils/changeColorLuminance.ts

@@ -1,22 +1,22 @@
-import { Colord, colord } from 'colord';
-
-/**
- * Calculates a light color based on the input color and target luminance.
- * @param color - The color to calculate the light color for.
- * @param targetLuminance - The target luminance for the light color.
- * @returns The light color in hexadecimal format.
- */
-export const changeColorLuminance = (
-  color: Colord,
-  targetLuminance: number
-) => {
-  let hsl = color.toHsl();
-
-  // Set the lightness to the target luminance
-  hsl.l = targetLuminance;
-
-  // Convert the HSL color back to a Colord instance
-  let bgColor = colord(hsl);
-
-  return bgColor.toHex();
-};
+import { Colord, colord } from 'colord';
+
+/**
+ * Calculates a light color based on the input color and target luminance.
+ * @param color - The color to calculate the light color for.
+ * @param targetLuminance - The target luminance for the light color.
+ * @returns The light color in hexadecimal format.
+ */
+export const changeColorLuminance = (
+  color: Colord,
+  targetLuminance: number
+) => {
+  let hsl = color.toHsl();
+
+  // Set the lightness to the target luminance
+  hsl.l = targetLuminance;
+
+  // Convert the HSL color back to a Colord instance
+  let bgColor = colord(hsl);
+
+  return bgColor.toHex();
+};

package/src/utils/getIconSize.ts

@@ -1,7 +1,7 @@
-export const getIconSize = (size: 'sm' | 'base' | 'lg' | 'xl') => {
-  if (size === 'sm') return '0.75rem';
-  else if (size === 'base') return '1rem';
-  else if (size === 'lg') return '1.25rem';
-  else if (size === 'xl') return '1.5rem';
-  else return '1rem';
-};
+export const getIconSize = (size: 'sm' | 'base' | 'lg' | 'xl') => {
+  if (size === 'sm') return '0.75rem';
+  else if (size === 'base') return '1rem';
+  else if (size === 'lg') return '1.25rem';
+  else if (size === 'xl') return '1.5rem';
+  else return '1rem';
+};

package/src/utils/getReadableTextColor.ts

@@ -1,36 +1,36 @@
-import { colord, extend } from 'colord';
-import { Colord } from 'colord';
-import mixPlugin from 'colord/plugins/mix';
-import a11yPlugin from 'colord/plugins/a11y';
-
-extend([mixPlugin]);
-extend([a11yPlugin]);
-
-/**
- * Calculates a readable text color based on the background color and readable acording to the WCAG AA standard.
- * @param backgroundColor - The background color to calculate the readable text color for.
- * @returns The readable text color in hexadecimal format.
- */
-export const getReadableTextColor = (backgroundColor: Colord): string => {
-  let textColor = backgroundColor;
-
-  const maxIterations = 50; // Set a limit to the number of iterations
-  const saturationThreshold = 90;
-
-  let iterations = 0;
-  while (
-    !textColor.isReadable(backgroundColor, { level: 'AAA' }) &&
-    iterations < maxIterations
-  ) {
-    // If the text color is not readable on the background color, adjust its lightness and saturation
-    let hsl = textColor.toHsl();
-    hsl.l = backgroundColor.luminance() > 0.5 ? hsl.l - 2 : hsl.l + 2; // Decrease the lightness for light backgrounds and increase it for dark backgrounds 5% each iteration
-    if (hsl.s > saturationThreshold) {
-      hsl.s = 90; // Decrease the saturation if it's above the threshold
-    }
-    textColor = colord(hsl);
-    iterations++;
-  }
-
-  return textColor.toHex();
-};
+import { colord, extend } from 'colord';
+import { Colord } from 'colord';
+import mixPlugin from 'colord/plugins/mix';
+import a11yPlugin from 'colord/plugins/a11y';
+
+extend([mixPlugin]);
+extend([a11yPlugin]);
+
+/**
+ * Calculates a readable text color based on the background color and readable acording to the WCAG AA standard.
+ * @param backgroundColor - The background color to calculate the readable text color for.
+ * @returns The readable text color in hexadecimal format.
+ */
+export const getReadableTextColor = (backgroundColor: Colord): string => {
+  let textColor = backgroundColor;
+
+  const maxIterations = 50; // Set a limit to the number of iterations
+  const saturationThreshold = 90;
+
+  let iterations = 0;
+  while (
+    !textColor.isReadable(backgroundColor, { level: 'AAA' }) &&
+    iterations < maxIterations
+  ) {
+    // If the text color is not readable on the background color, adjust its lightness and saturation
+    let hsl = textColor.toHsl();
+    hsl.l = backgroundColor.luminance() > 0.5 ? hsl.l - 2 : hsl.l + 2; // Decrease the lightness for light backgrounds and increase it for dark backgrounds 5% each iteration
+    if (hsl.s > saturationThreshold) {
+      hsl.s = 90; // Decrease the saturation if it's above the threshold
+    }
+    textColor = colord(hsl);
+    iterations++;
+  }
+
+  return textColor.toHex();
+};