@lunit/oui 2.4.3 → 2.4.5

package/dist/components/LoadingIndicator/LoadingIndicator.d.ts

@@ -1,3 +1,3 @@
 import type { LoadingIndicatorProps } from './LoadingIndicator.types';
-declare const LoadingIndicator: ({ message, details, loadingAnimation, }: LoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+declare const LoadingIndicator: ({ message, details, loadingAnimation, dataTestId, }: LoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element;
 export default LoadingIndicator;

package/dist/components/LoadingIndicator/LoadingIndicator.js

@@ -4,7 +4,7 @@ import { Player } from '@lottiefiles/react-lottie-player';
 import { LoadingOverlay, LoadingIndicatorBox, LoadingMessage, LoadingDetails, } from './LoadingIndicator.styled';
 const DotLoadingAnimation = require('./assets/DotLoadingAnimation.json');
 const DnaLoadingAnimation = require('./assets/DnaLoadingAnimation.json');
-const LoadingIndicator = ({ message, details, loadingAnimation = 'dot', }) => {
-    return (_jsx(LoadingOverlay, { children: _jsxs(LoadingIndicatorBox, { children: [_jsx(Player, { autoplay: true, loop: true, src: loadingAnimation === 'dot' ? DotLoadingAnimation : DnaLoadingAnimation, style: { height: '112px', width: '140px' } }), _jsx(LoadingMessage, { children: message }), _jsx(LoadingDetails, { children: details || (_jsxs(_Fragment, { children: ["Please wait.", _jsx("br", {}), "It may take a few minutes."] })) })] }) }));
+const LoadingIndicator = ({ message, details, loadingAnimation = 'dot', dataTestId = 'loading-indicator', }) => {
+    return (_jsx(LoadingOverlay, { children: _jsxs(LoadingIndicatorBox, { "data-testid": dataTestId, children: [_jsx(Player, { autoplay: true, loop: true, src: loadingAnimation === 'dot' ? DotLoadingAnimation : DnaLoadingAnimation, style: { height: '112px', width: '140px' } }), _jsx(LoadingMessage, { children: message }), _jsx(LoadingDetails, { children: details || (_jsxs(_Fragment, { children: ["Please wait.", _jsx("br", {}), "It may take a few minutes."] })) })] }) }));
 };
 export default LoadingIndicator;

package/dist/components/LoadingIndicator/LoadingIndicator.types.d.ts

@@ -3,4 +3,5 @@ export interface LoadingIndicatorProps {
     message?: string;
     details?: ReactNode;
     loadingAnimation?: 'dot' | 'dna';
+    dataTestId?: string;
 }

package/dist/presentations/AnalysisBar/AnalysisBar.d.ts

@@ -1,3 +1,3 @@
 import type { AnalysisBarProps } from './AnalysisBar.types';
-declare const AnalysisBar: ({ componentType, expressionValue, caption, expressionLevels, expressionLabels, segments, isDimmed, }: AnalysisBarProps) => import("react/jsx-runtime").JSX.Element;
+declare const AnalysisBar: ({ componentType, isCutoff, expressionValue, caption, expressionLevels, expressionLabels, segments, isDimmed, }: AnalysisBarProps) => import("react/jsx-runtime").JSX.Element;
 export default AnalysisBar;

package/dist/presentations/AnalysisBar/AnalysisBar.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { findIndex as _findIndex } from 'lodash';
 import { Box } from '@mui/material';
 import { AnalysisBarSegmentContainer, AnalysisBarOuter, AxisLabels, GraphAxisLabel, GraphScoreIndicator, GraphSegment, } from './AnalysisBar.styled';
 import { parseStringValToNumber } from './AnalysisBar.utils';
 import HeatmapGraphSVG from './HeatmapGraphIcon/HeatmapGraphSVG';
-const Segments = ({ segments }) => {
+const Segments = ({ segments, isCutoff }) => {
     if (!segments) {
         return null;
     }
     const validSegments = segments.filter((segment) => segment.width > 0);
+    const combinedWidth = segments.length > 1 ? segments[0].width + segments[1].width : 0;
+    const onePercentSegmentIndex = _findIndex(segments, (segment) => segment.width > 0 && segment.width <= 1);
     if (segments?.length === 1 && segments[0].color === 'jet') {
         return (_jsx(Box, { sx: { width: '100%', height: '14px', transform: 'scaleY(0.8)' }, children: _jsx(HeatmapGraphSVG, {}) }));
     }
@@ -15,18 +18,18 @@ const Segments = ({ segments }) => {
             if (segment.color === 'jet') {
                 return _jsx(HeatmapGraphSVG, { width: `${segment.width}%` });
             }
-            return (_jsx(GraphSegment, { color: segment.color, width: segment.width, isFirstSegment: i === 0, isLastSegment: i === segments.length - 1 }, i));
+            return (_jsx(GraphSegment, { color: segment.color, width: segment.width, isFirstSegment: i === 0, isLastSegment: i === segments.length - 1, isCutoff: isCutoff, combinedWidth: combinedWidth, isNextSegment: i === onePercentSegmentIndex + 1, isOnePercentSegment: segment.width <= 1 }, i));
         }) }));
 };
-const AnalysisBar = ({ componentType = 'analysisBar', expressionValue, caption, expressionLevels = [], expressionLabels = [], segments, isDimmed = false, }) => {
+const AnalysisBar = ({ componentType = 'analysisBar', isCutoff = false, expressionValue, caption, expressionLevels = [], expressionLabels = [], segments, isDimmed = false, }) => {
     if (!componentType)
         throw new Error("The 'componentType' prop is required.");
     if (!expressionLevels.length)
         throw new Error("The 'expressionLevels' prop must contain at least one item.");
     const validSegments = segments.filter((segment) => segment.width > 0);
-    return (_jsxs(AnalysisBarOuter, { className: "analysis-bar", isDimmed: isDimmed, children: [_jsxs(AnalysisBarSegmentContainer, { children: [expressionValue && (_jsx(GraphScoreIndicator, { value: expressionValue, isJet: segments?.[0].color === 'jet' })), _jsx(Segments, { segments: validSegments })] }), (expressionLevels.length > 0 || caption) && (_jsxs(AxisLabels, { children: [expressionLevels.length > 0 &&
+    return (_jsxs(AnalysisBarOuter, { className: "analysis-bar", isDimmed: isDimmed, children: [_jsxs(AnalysisBarSegmentContainer, { children: [expressionValue && (_jsx(GraphScoreIndicator, { value: expressionValue, isCutoff: isCutoff, isJet: segments?.[0].color === 'jet' })), _jsx(Segments, { segments: validSegments, isCutoff: isCutoff })] }), (expressionLevels.length > 0 || caption) && (_jsxs(AxisLabels, { children: [expressionLevels.length > 0 &&
                         expressionLevels.map((val, i) => {
-                            return (_jsx(GraphAxisLabel, { label: expressionLabels[i] || val, leftPos: parseStringValToNumber(val) }, i));
-                        }), caption && (_jsx(GraphAxisLabel, { label: caption, leftPos: 50 }))] }))] }));
+                            return (_jsx(GraphAxisLabel, { label: expressionLabels[i] || val, isCutoff: isCutoff, leftPos: parseStringValToNumber(val) }, i));
+                        }), caption && (_jsx(GraphAxisLabel, { label: caption, isCutoff: isCutoff, leftPos: 50 }))] }))] }));
 };
 export default AnalysisBar;

package/dist/presentations/AnalysisBar/AnalysisBar.styled.d.ts

@@ -7,13 +7,15 @@ export declare const AnalysisBarOuter: import("@emotion/styled").StyledComponent
 export declare const AnalysisBarSegmentContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const GraphScoreIndicator: ({ value, isJet }: {
+export declare const GraphScoreIndicator: ({ value, isCutoff, isJet, }: {
     value: string;
+    isCutoff?: boolean | undefined;
     isJet?: boolean | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const GraphAxisLabel: ({ label, leftPos }: {
+export declare const GraphAxisLabel: ({ label, leftPos, isCutoff, }: {
     label: string;
     leftPos: number;
+    isCutoff?: boolean | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const AxisLabels: ({ children }: {
     percent?: boolean;
@@ -24,6 +26,10 @@ export declare const AnalysisBarCaption: ({ label }: {
 interface GraphSegmentProps {
     color: string | undefined;
     width: number;
+    isCutoff?: boolean;
+    combinedWidth?: number;
+    isNextSegment?: boolean;
+    isOnePercentSegment?: boolean;
     isFirstSegment: boolean;
     isLastSegment: boolean;
 }

package/dist/presentations/AnalysisBar/AnalysisBar.styled.js

@@ -42,8 +42,16 @@ const GraphScoreIndicatorPip = styled('span')(() => {
         boxSizing: 'content-box',
     };
 });
-export const GraphScoreIndicator = ({ value, isJet }) => {
-    const leftPos = `${parseStringValToNumber(value)}%`;
+export const GraphScoreIndicator = ({ value, isCutoff, isJet, }) => {
+    let leftPos = `${parseStringValToNumber(value)}%`;
+    if (isCutoff) {
+        if (+value <= 1) {
+            leftPos = '12px';
+        }
+        if (+value > 1 && +value <= 7) {
+            leftPos = '20px';
+        }
+    }
     return (_jsxs(GraphScoreIndicatorContainer, { className: "analysis-bar-score-indicator", sx: {
             left: leftPos,
             transform: isJet ? 'translateX(-50%) translateY(8px)' : 'translateX(-50%)',
@@ -59,8 +67,11 @@ const GraphAxisLabelContainer = styled('span')(() => {
         alignItems: 'center',
     };
 });
-export const GraphAxisLabel = ({ label, leftPos }) => {
+export const GraphAxisLabel = ({ label, leftPos, isCutoff, }) => {
     const getLeft = (value) => {
+        if (isCutoff && +value > 0 && +value <= 1) {
+            return '12px';
+        }
         return `${clampBarLabelPosition(value)}%`;
     };
     return (_jsx(GraphAxisLabelContainer, { sx: {
@@ -84,8 +95,8 @@ export const AnalysisBarCaption = ({ label }) => {
             width: 'auto',
         }, className: "analysis-bar-caption", children: _jsx(Typography, { variant: "small_body_m5", sx: { textAlign: 'center' }, children: label }) }));
 };
-const segmentStyle = (color, width, isFirstSegment, isLastSegment) => {
-    return {
+const segmentStyle = (color, width, isFirstSegment, isLastSegment, isCutoff, combinedWidth, isNextSegment, isOnePercentSegment) => {
+    const baseStyle = {
         backgroundColor: color,
         height: '8px',
         borderTopLeftRadius: isFirstSegment ? '2px' : '0px',
@@ -94,13 +105,34 @@ const segmentStyle = (color, width, isFirstSegment, isLastSegment) => {
         borderBottomRightRadius: isLastSegment ? '2px' : '0px',
         width: `${width}%`,
     };
+    if (isOnePercentSegment) {
+        return {
+            ...baseStyle,
+            width: '12px',
+            minWidth: '12px',
+            maxWidth: '12px',
+        };
+    }
+    return {
+        ...baseStyle,
+        width: isCutoff && isNextSegment ? `calc(${combinedWidth}% - 12px)` : `${width}%`,
+    };
 };
 export const GraphSegment = styled('span', {
-    shouldForwardProp: (prop) => !['color', 'width', 'isFirstSegment', 'isLastSegment'].includes(prop.toString()),
-})(({ color, width, isFirstSegment, isLastSegment }) => {
+    shouldForwardProp: (prop) => ![
+        'color',
+        'width',
+        'isFirstSegment',
+        'isLastSegment',
+        'isCutoff',
+        'combinedWidth',
+        'isNextSegment',
+        'isOnePercentSegment',
+    ].includes(prop.toString()),
+})(({ color, width, isFirstSegment, isLastSegment, isCutoff, combinedWidth, isNextSegment, isOnePercentSegment, }) => {
     // cover undefined and empty string
     const barColor = color && color.length ? color : 'red';
     return {
-        ...segmentStyle(barColor, width, isFirstSegment, isLastSegment), // fallback color
+        ...segmentStyle(barColor, width, isFirstSegment, isLastSegment, isCutoff, combinedWidth, isNextSegment, isOnePercentSegment), // fallback color
     };
 });

package/dist/presentations/AnalysisBar/AnalysisBar.types.d.ts

@@ -1,5 +1,6 @@
 export interface AnalysisBarProps {
     componentType: 'analysisBar';
+    isCutoff?: boolean;
     expressionLevels?: string[];
     caption?: string;
     segments?: {

package/dist/presentations/ToggleControl/ToggleControl.js

@@ -19,7 +19,7 @@ const ToggleControl = ({ componentType = 'toggle', title, size = 'medium', symbo
         throw new Error("The 'checked' prop is required.");
     if (typeof checked !== 'boolean')
         throw new Error("The 'checked' prop must be a boolean.");
-    return (_jsxs(ToggleControlOuter, { "data-toggle-name": `toggle-control-${title?.replace(/\s/g, '-')}`, hasBar: !!bar || !!content.length, style: { marginBottom: isParent ? '4px' : '0' }, children: [_jsxs(ToggleControlContainer, { className: "toggle-inner-container", size: size, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: '6px' }, className: "toggle-label", children: [!!tooltip.length && (_jsx(Tooltip, { arrow: true, size: "large", title: _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: tooltip.map((item) => (_jsxs(Box, { children: [item.componentType === 'freeText' && (_jsx(FreeText, { componentType: item.componentType, size: item.size, content: item.content })), item.componentType === 'statistic' && (_jsx(Statistic, { componentType: item.componentType, title: item.title, size: item.size, layout: item.layout, symbol: item.symbol, color: item.color }))] }, uuidV4()))) }), children: _jsx(Box, { sx: {
+    return (_jsxs(ToggleControlOuter, { "data-testid": `toggle-control-${title?.replace(/\s/g, '-')}`, hasBar: !!bar || !!content.length, style: { marginBottom: isParent ? '4px' : '0' }, children: [_jsxs(ToggleControlContainer, { className: "toggle-inner-container", size: size, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: '6px' }, className: "toggle-label", children: [!!tooltip.length && (_jsx(Tooltip, { arrow: true, size: "large", title: _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: tooltip.map((item) => (_jsxs(Box, { children: [item.componentType === 'freeText' && (_jsx(FreeText, { componentType: item.componentType, size: item.size, content: item.content })), item.componentType === 'statistic' && (_jsx(Statistic, { componentType: item.componentType, title: item.title, size: item.size, layout: item.layout, symbol: item.symbol, color: item.color }))] }, uuidV4()))) }), children: _jsx(Box, { sx: {
                                         display: 'flex',
                                         alignItems: 'center',
                                     }, children: _jsx(Information, {}) }) })), symbol && (_jsx(PresentationSymbolIcon, { symbol: symbol, color: color, isDimmed: isDimmed || !checked })), _jsx(PresentationTypography, { size: size, isDimmed: isDimmed || !checked, children: title })] }), _jsx(StyledToggle, { disabled: disabled || isDimmed, checked: checked, toggleColor: theme.palette.lunitTeal[70], onChange: onChange })] }), content.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: content.map((item) => (_jsx(Statistic, { ...item, isDimmed: isDimmed || !checked }, uuidV4()))) }, uuidV4())), bar && (_jsx(Box, { sx: { padding: '0 8px', fontSize: '14px', lineHeight: '8px' }, children: _jsx(AnalysisBar, { isDimmed: isDimmed || !checked, componentType: bar.componentType, expressionValue: bar.expressionValue, expressionLevels: bar.expressionLevels, expressionLabels: bar.expressionLabels, caption: bar.caption, segments: bar.segments }) }))] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "2.4.3",
+  "version": "2.4.5",
   "validate-branch-name": {
     "pattern": "^(main|develop)|(feature|fix|release|hotfix|qe)/.+$",
     "errorMsg": "The branch name is not correct. Please check the pattern. (ex. feature/add-something)"