odaptos_design_system 2.0.4 → 2.0.6

package/src/Atoms/TimeInterval/TimeInterval.tsx

@@ -1,52 +1,52 @@
-import React from 'react';
-import { colors, Text } from '../../';
-import styles from './TimeInterval.module.scss';
-
-export interface TimeIntervalProps {
-  startTime: number;
-  endTime?: number;
-  onClick: (nb: number) => void;
-  className?: string;
-}
-
-export const TimeInterval = ({
-  startTime,
-  endTime,
-  onClick,
-  className,
-}: TimeIntervalProps) => {
-  const formatTime = (seconds: number) => {
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-    const secs = seconds % 60;
-
-    const hoursStr = Math.round(hours).toString().padStart(2, '0');
-    const minutesStr = Math.round(minutes).toString().padStart(2, '0');
-    const secondsStr = Math.round(secs).toString().padStart(2, '0');
-
-    if (hours !== 0) return `${hoursStr}:${minutesStr}:${secondsStr}`;
-    else return `${minutesStr}:${secondsStr}`;
-  };
-
-  let displayFormattedTime = formatTime(startTime);
-
-  if (endTime) {
-    displayFormattedTime += ` - ${formatTime(endTime)}`;
-  }
-
-  return (
-    <div
-      className={`${styles.time_interval} ${className}`}
-      onClick={() => onClick(startTime)}
-    >
-      <Text
-        className={styles.times_text}
-        size="sm"
-        weight="semi-bold"
-        color={colors.blue_500}
-        text={displayFormattedTime}
-        textDecoration="underline"
-      />
-    </div>
-  );
-};
+import React from 'react';
+import { colors, Text } from '../../';
+import styles from './TimeInterval.module.scss';
+
+export interface TimeIntervalProps {
+  startTime: number;
+  endTime?: number;
+  onClick: (nb: number) => void;
+  className?: string;
+}
+
+export const TimeInterval = ({
+  startTime,
+  endTime,
+  onClick,
+  className,
+}: TimeIntervalProps) => {
+  const formatTime = (seconds: number) => {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = seconds % 60;
+
+    const hoursStr = Math.round(hours).toString().padStart(2, '0');
+    const minutesStr = Math.round(minutes).toString().padStart(2, '0');
+    const secondsStr = Math.round(secs).toString().padStart(2, '0');
+
+    if (hours !== 0) return `${hoursStr}:${minutesStr}:${secondsStr}`;
+    else return `${minutesStr}:${secondsStr}`;
+  };
+
+  let displayFormattedTime = formatTime(startTime);
+
+  if (endTime) {
+    displayFormattedTime += ` - ${formatTime(endTime)}`;
+  }
+
+  return (
+    <div
+      className={`${styles.time_interval} ${className}`}
+      onClick={() => onClick(startTime)}
+    >
+      <Text
+        className={styles.times_text}
+        size="sm"
+        weight="semi-bold"
+        color={colors.blue_500}
+        text={displayFormattedTime}
+        textDecoration="underline"
+      />
+    </div>
+  );
+};

package/src/Atoms/Tooltip/Layout/TooltipCustomLayout.module.scss

@@ -1,54 +1,54 @@
-.tooltip_layout {
-  display: flex;
-  padding: 1rem;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 1rem;
-  border-radius: 0.25rem;
-
-  &_header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    align-self: stretch;
-  }
-
-  &_optional_url {
-    color: #00040a;
-    font-family: 'OpenSans';
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 140%;
-    text-decoration-line: underline;
-
-    &:visited {
-      color: #64666a;
-    }
-  }
-  &_optional_url_simplified {
-    color: #99c9ff;
-    font-family: 'OpenSans';
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 140%;
-    text-decoration-line: underline;
-
-    &:visited {
-      color: #e5f1ff;
-    }
-  }
-
-  &_actions {
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-start;
-    gap: 0.5rem;
-    align-self: stretch;
-  }
-}
-
-.tooltip_simplified {
-  padding: 0.25rem 0.5rem;
-}
+.tooltip_layout {
+  display: flex;
+  padding: 1rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  border-radius: 0.25rem;
+
+  &_header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+  }
+
+  &_optional_url {
+    color: #00040a;
+    font-family: 'OpenSans';
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 140%;
+    text-decoration-line: underline;
+
+    &:visited {
+      color: #64666a;
+    }
+  }
+  &_optional_url_simplified {
+    color: #99c9ff;
+    font-family: 'OpenSans';
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 140%;
+    text-decoration-line: underline;
+
+    &:visited {
+      color: #e5f1ff;
+    }
+  }
+
+  &_actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    gap: 0.5rem;
+    align-self: stretch;
+  }
+}
+
+.tooltip_simplified {
+  padding: 0.25rem 0.5rem;
+}

package/src/Atoms/Tooltip/Layout/TooltipCustomLayout.tsx

@@ -1,140 +1,140 @@
-import React from 'react';
-import { Button, IconButton, Text, Title } from '../../../';
-
-import styles from './TooltipCustomLayout.module.scss';
-
-interface TooltipLayoutProps {
-  tooltipTitle?: string;
-  closeButton?: JSX.Element;
-  onClickClose?: () => void;
-  tooltipDescription?: string;
-  optionalUrl?: string;
-  optionalUrlText?: string;
-  customContent?: JSX.Element;
-  buttonOneText?: string;
-  buttonTwoText?: string;
-  buttonOneVariant?:
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'tertiary-alt'
-    | 'alert'
-    | 'success';
-  buttonTwoVariant?:
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'tertiary-alt'
-    | 'alert'
-    | 'success';
-  buttonOneIconLeft?: JSX.Element;
-  buttonTwoIconLeft?: JSX.Element;
-  buttonOneIconRight?: JSX.Element;
-  buttonTwoIconRight?: JSX.Element;
-  buttonOneOnClick?: () => void;
-  buttonTwoOnClick?: () => void;
-  isTooltipSimplified?: boolean;
-}
-
-export const TooltipLayout = ({
-  tooltipTitle,
-  closeButton,
-  onClickClose,
-  tooltipDescription,
-  optionalUrl,
-  optionalUrlText,
-  customContent,
-  buttonOneText,
-  buttonTwoText,
-  buttonOneIconLeft,
-  buttonTwoIconLeft,
-  buttonOneIconRight,
-  buttonTwoIconRight,
-  buttonOneVariant,
-  buttonTwoVariant,
-  buttonOneOnClick,
-  buttonTwoOnClick,
-  isTooltipSimplified,
-}: TooltipLayoutProps) => {
-  return (
-    <div
-      className={`${styles.tooltip_layout} ${
-        isTooltipSimplified ? styles.tooltip_simplified : ''
-      }`}
-    >
-      <div>
-        <div className={styles.tooltip_layout_header}>
-          {tooltipTitle && (
-            <Title text={tooltipTitle} size="sm" weight="bold" />
-          )}
-          {closeButton && (
-            <IconButton
-              icon={closeButton}
-              onClick={onClickClose}
-              variant="tertiary"
-              size="xs"
-            />
-          )}
-        </div>
-        {tooltipDescription && (
-          <Text
-            text={tooltipDescription}
-            size="sm"
-            className={styles.tooltip_layout_description}
-            color={isTooltipSimplified ? '#fff' : '#000'}
-          />
-        )}
-        {optionalUrl && optionalUrlText && (
-          <a
-            href={optionalUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className={
-              isTooltipSimplified
-                ? styles.tooltip_layout_optional_url_simplified
-                : styles.tooltip_layout_optional_url
-            }
-          >
-            {optionalUrlText}
-          </a>
-        )}
-        {customContent && (
-          <div className={styles.tooltip_layout_content}>{customContent}</div>
-        )}
-      </div>
-      {(buttonOneText ||
-        buttonOneVariant ||
-        buttonOneOnClick ||
-        buttonOneIconLeft ||
-        buttonOneIconRight ||
-        buttonTwoText ||
-        buttonTwoVariant ||
-        buttonTwoOnClick ||
-        buttonTwoIconLeft ||
-        buttonTwoIconRight) && (
-        <div className={styles.tooltip_layout_actions}>
-          {buttonOneText && (
-            <Button
-              text={buttonOneText}
-              size="sm"
-              variant={buttonOneVariant}
-              onClick={buttonOneOnClick}
-              iconLeft={buttonOneIconLeft}
-              iconRight={buttonOneIconRight}
-            />
-          )}
-          {buttonTwoText && (
-            <Button
-              text={buttonTwoText}
-              size="sm"
-              variant={buttonTwoVariant}
-              onClick={buttonTwoOnClick}
-              iconLeft={buttonTwoIconLeft}
-              iconRight={buttonTwoIconRight}
-            />
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
+import React from 'react';
+import { Button, IconButton, Text, Title } from '../../../';
+
+import styles from './TooltipCustomLayout.module.scss';
+
+interface TooltipLayoutProps {
+  tooltipTitle?: string;
+  closeButton?: JSX.Element;
+  onClickClose?: () => void;
+  tooltipDescription?: string;
+  optionalUrl?: string;
+  optionalUrlText?: string;
+  customContent?: JSX.Element;
+  buttonOneText?: string;
+  buttonTwoText?: string;
+  buttonOneVariant?:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'tertiary-alt'
+    | 'alert'
+    | 'success';
+  buttonTwoVariant?:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'tertiary-alt'
+    | 'alert'
+    | 'success';
+  buttonOneIconLeft?: JSX.Element;
+  buttonTwoIconLeft?: JSX.Element;
+  buttonOneIconRight?: JSX.Element;
+  buttonTwoIconRight?: JSX.Element;
+  buttonOneOnClick?: () => void;
+  buttonTwoOnClick?: () => void;
+  isTooltipSimplified?: boolean;
+}
+
+export const TooltipLayout = ({
+  tooltipTitle,
+  closeButton,
+  onClickClose,
+  tooltipDescription,
+  optionalUrl,
+  optionalUrlText,
+  customContent,
+  buttonOneText,
+  buttonTwoText,
+  buttonOneIconLeft,
+  buttonTwoIconLeft,
+  buttonOneIconRight,
+  buttonTwoIconRight,
+  buttonOneVariant,
+  buttonTwoVariant,
+  buttonOneOnClick,
+  buttonTwoOnClick,
+  isTooltipSimplified,
+}: TooltipLayoutProps) => {
+  return (
+    <div
+      className={`${styles.tooltip_layout} ${
+        isTooltipSimplified ? styles.tooltip_simplified : ''
+      }`}
+    >
+      <div>
+        <div className={styles.tooltip_layout_header}>
+          {tooltipTitle && (
+            <Title text={tooltipTitle} size="sm" weight="bold" />
+          )}
+          {closeButton && (
+            <IconButton
+              icon={closeButton}
+              onClick={onClickClose}
+              variant="tertiary"
+              size="xs"
+            />
+          )}
+        </div>
+        {tooltipDescription && (
+          <Text
+            text={tooltipDescription}
+            size="sm"
+            className={styles.tooltip_layout_description}
+            color={isTooltipSimplified ? '#fff' : '#000'}
+          />
+        )}
+        {optionalUrl && optionalUrlText && (
+          <a
+            href={optionalUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={
+              isTooltipSimplified
+                ? styles.tooltip_layout_optional_url_simplified
+                : styles.tooltip_layout_optional_url
+            }
+          >
+            {optionalUrlText}
+          </a>
+        )}
+        {customContent && (
+          <div className={styles.tooltip_layout_content}>{customContent}</div>
+        )}
+      </div>
+      {(buttonOneText ||
+        buttonOneVariant ||
+        buttonOneOnClick ||
+        buttonOneIconLeft ||
+        buttonOneIconRight ||
+        buttonTwoText ||
+        buttonTwoVariant ||
+        buttonTwoOnClick ||
+        buttonTwoIconLeft ||
+        buttonTwoIconRight) && (
+        <div className={styles.tooltip_layout_actions}>
+          {buttonOneText && (
+            <Button
+              text={buttonOneText}
+              size="sm"
+              variant={buttonOneVariant}
+              onClick={buttonOneOnClick}
+              iconLeft={buttonOneIconLeft}
+              iconRight={buttonOneIconRight}
+            />
+          )}
+          {buttonTwoText && (
+            <Button
+              text={buttonTwoText}
+              size="sm"
+              variant={buttonTwoVariant}
+              onClick={buttonTwoOnClick}
+              iconLeft={buttonTwoIconLeft}
+              iconRight={buttonTwoIconRight}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};