Improve stories for components

Author: Kubit

src/components/slider/utils/slider.utils.ts

@@ -1,3 +1,5 @@
+import { translateValue } from '@/utils';
+
 import { SliderOffsetBoundaries, SliderType } from '../types';
 
 export const calculateChange = ({
@@ -239,46 +241,6 @@ export const getScale = ({
   return { showScale, scaleOffsets };
 };
 
-/**
- * Translates a value from one range to another.
- *
- * @param inputMin - The minimum value of the input range.
- * @param inputMax - The maximum value of the input range.
- * @param outputMin - The minimum value of the output range.
- * @param outputMax - The maximum value of the output range.
- * @param value - The input value to be translated.
- *
- * @returns The translated value in the output range.
- *
- * @example
- * // Translates 50 from the range [0, 100] to the range [5, 10]
- * const output = translateValue({inputMin: 0, inputMax: 100, outputMin: 5, outputMax: 10, value: 50});
- * console.log(output); // 7.5
- */
-const translateValue = ({
-  inputMin,
-  inputMax,
-  outputMin,
-  outputMax,
-  value,
-}: {
-  inputMin: number;
-  inputMax: number;
-  outputMin: number;
-  outputMax: number;
-  value: number;
-}): number => {
-  const inputRange = inputMax - inputMin;
-  const outputRange = outputMax - outputMin;
-
-  const scaledInputValue = (value - inputMin) / inputRange;
-
-  let outputValue = outputMin + scaledInputValue * outputRange;
-  outputValue = Math.min(outputMax, Math.max(outputMin, outputValue));
-
-  return outputValue;
-};
-
 export const getOffset = ({
   range,
   max,

src/components/storybook/replaceContent/replaceContent.tsx

@@ -13,6 +13,7 @@ interface IReplaceContent extends AriaType {
   id?: string;
   role?: ROLES;
   as?: React.ElementType;
+  tabIndex?: number;
 }
 
 export const ReplaceContent = React.forwardRef(

src/components/table/__tests__/table.test.tsx

@@ -331,7 +331,7 @@ const mockDivider = {
       dividerContent: {
         leftLabel: { content: '18 DIC Lorem ipsum' },
         icon: { icon: 'UNICORN', altText: 'Icon alt text' },
-        tooltip: {
+        iconTooltip: {
           title: { content: 'Tooltip title' },
           content: { content: 'Tooltip content' },
         },
@@ -352,7 +352,7 @@ const mockDividerFromHeader = {
         dividerContent: {
           leftLabel: { content: val.date },
           icon: { icon: 'UNICORN', altText: 'Icon alt text' },
-          tooltip: {
+          iconTooltip: {
             title: { content: 'Tooltip title' },
             content: { content: 'Tooltip content' },
           },

src/components/table/stories/mockDivider.tsx

@@ -94,8 +94,8 @@ export const mockTableWithDivider = {
       transactionNumber: '0000',
       dividerContent: {
         leftLabel: { content: '18 DIC Lorem ipsum' },
-        icon: { icon: 'UNICORN', altText: 'Icon alt text' },
-        tooltip: {
+        icon: { icon: ICONS.ICON_PLACEHOLDER, altText: 'Icon alt text' },
+        iconTooltip: {
           title: { content: 'Tooltip title' },
           content: { content: 'Tooltip content' },
         },
@@ -110,8 +110,8 @@ export const mockTableWithDivider = {
       transactionNumber: '0000',
       dividerContent: {
         leftLabel: { content: '18 DIC Lorem ipsum' },
-        icon: { icon: 'UNICORN', altText: 'Icon alt text' },
-        tooltip: {
+        icon: { icon: ICONS.ICON_PLACEHOLDER, altText: 'Icon alt text' },
+        iconTooltip: {
           title: { content: 'Tooltip title' },
           content: { content: 'Tooltip content' },
         },
@@ -124,8 +124,8 @@ export const mockTableWithDivider = {
       accountNumber: '****333333',
       dividerContent: {
         leftLabel: { content: '19 DIC Lorem ipsum' },
-        icon: { icon: 'UNICORN', altText: 'Icon alt text' },
-        tooltip: {
+        icon: { icon: ICONS.ICON_PLACEHOLDER, altText: 'Icon alt text' },
+        iconTooltip: {
           title: { content: 'Tooltip title' },
           content: { content: 'Tooltip content' },
         },