npm - @scality/core-ui - Versions diffs - 0.173.0 → 0.175.0 - Mend

@scality/core-ui 0.173.0 → 0.175.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/dist/components/barchartv2/Barchart.component.d.ts CHANGED Viewed

@@ -79,6 +79,7 @@ interface CustomTickProps {
  */
 export declare const formatDate: (timestamp: number, interval: number) => React.ReactNode;
 export declare const CustomTick: ({ x, y, payload, visibleTicksCount, width, type, }: CustomTickProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StyledResponsiveContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("recharts").ResponsiveContainerProps & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const Barchart: <T extends BarchartBars>(props: BarchartProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Barchart.component.d.ts.map

package/dist/components/barchartv2/Barchart.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"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~~AA2EF~~,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,YAAY,SAAS,aAAa,CAAC,CAAC,CAAC,~~4CAuJvE~~,CAAC"}
1	+ {"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"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"}

package/dist/components/barchartv2/Barchart.component.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
 import styled, { useTheme } from 'styled-components';
 import { spacing, Stack, Wrap } from '../../spacing';
 import { chartColors, fontSize } from '../../style/theme';
@@ -55,7 +55,7 @@ export const CustomTick = ({ x, y, payload, visibleTicksCount, width, type, }) =
     const theme = useTheme();
     const tickWidth = width / visibleTicksCount - CHART_CONSTANTS.TICK_WIDTH_OFFSET;
     const centerX = x - tickWidth / 2;
-    return (_jsx("foreignObject", { x: centerX, y: y, width: tickWidth, color: theme.textSecondary, overflow: "visible", children: _jsx(ConstrainedText, { color: "textSecondary", text: _jsx(Text, { variant: "Smaller", children: type.type === 'time'
+    return (_jsx("foreignObject", { x: centerX, y: y - 8, width: tickWidth, color: theme.textSecondary, overflow: "visible", children: _jsx(ConstrainedText, { color: "textSecondary", text: _jsx(Text, { variant: "Smaller", children: type.type === 'time'
                     ? formatDate(payload.value, type.timeRange.interval)
                     : String(payload.value) }), centered: true, tooltipStyle: {
                 backgroundColor: theme.backgroundLevel1,
@@ -65,7 +65,7 @@ export const CustomTick = ({ x, y, payload, visibleTicksCount, width, type, }) =
                 position: 'absolute',
             } }) }));
 };
-const StyledResponsiveContainer = styled(ResponsiveContainer) `
+export const StyledResponsiveContainer = styled(ResponsiveContainer) `
   // Avoid tooltip over constrained text to be cut off
   & .recharts-surface {
     overflow: visible;
@@ -105,22 +105,20 @@ export const Barchart = (props) => {
         return acc;
     }, {});
     const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } = useChartData(bars || [], type, colorSet || {}, stacked, defaultSort, unitRange, stackedBarSort);
-    return (_jsxs(Stack, { direction: "vertical", gap: "r8", children: [_jsx(ChartHeader, { title: title, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isError || (!bars && !isLoading) ? (_jsx(Error, { height: height })) : isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(BarChart, { data: rechartsData, accessibilityLayer: true, barSize: type.type === 'category'
+    return (_jsxs(Stack, { direction: "vertical", children: [_jsx(ChartHeader, { title: title, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isError || (!bars && !isLoading) ? (_jsx(Error, { height: height })) : isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(BarChart, { data: rechartsData, accessibilityLayer: true, barSize: type.type === 'category'
                         ? type.gap === 0
                             ? undefined
                             : CHART_CONSTANTS.BAR_SIZE
-                        : CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, barCategoryGap: type.type === 'category' ? type.gap : undefined, children: [_jsx(CartesianGrid, { vertical: false, horizontal: false, fill: theme.backgroundLevel1 }), rechartsBars.map((bar) => {
+                        : CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, barCategoryGap: type.type === 'category' ? type.gap : undefined, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), rechartsBars.map((bar) => {
                             const { fill, dataKey, stackId } = bar;
                             return (_jsx(Bar, { dataKey: dataKey, fill: chartColors[fill] || fill, minPointSize: stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE, stackId: stackId, isAnimationActive: false, onMouseOver: () => setHoveredValue(dataKey), onMouseLeave: () => setHoveredValue(undefined) }, dataKey));
-                        }), _jsx(YAxis, { tickCount: 1, unit: ` ${unitLabel}`, domain: [0, roundReferenceValue], tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator
-                            , axisLine: false, tick: {
+                        }), _jsx(YAxis, { tickCount: 1, interval: 0, unit: ` ${unitLabel}`, domain: [0, roundReferenceValue], tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator
+                            , axisLine: { stroke: theme.border }, tick: {
                                 fill: theme.textSecondary,
                                 fontSize: fontSize.smaller,
-                            }, tickLine: false, label: {
-                                fill: theme.textSecondary,
-                            }, orientation: "right" }), _jsx(ReferenceLine, { y: roundReferenceValue, fill: theme.border, strokeWidth: 0.5 }), _jsx(XAxis, { dataKey: "category", tick: (props) => _jsx(CustomTick, { ...props, type: type }), type: "category", interval: 0, allowDataOverflow: true, tickLine: {
-                                stroke: theme.textSecondary,
+                            }, orientation: "right" }), _jsx(XAxis, { dataKey: "category", tick: (props) => _jsx(CustomTick, { ...props, type: type }), type: "category", interval: 0, allowDataOverflow: true, tickLine: {
+                                stroke: theme.border,
                             }, axisLine: {
-                                stroke: theme.textSecondary,
+                                stroke: theme.border,
                             } }), _jsx(Tooltip, { content: (props) => (_jsx(BarchartTooltip, { type: type, colorSet: colorSet, tooltipProps: props, hoveredValue: hoveredValue, tooltip: tooltip, unitLabel: unitLabel })), cursor: false })] }) }))] }));
 };

package/dist/components/icon/Icon.component.d.ts CHANGED Viewed

@@ -128,6 +128,7 @@ export declare const iconTable: {
     Mail: string;
     ThumbsUp: string;
     ThumbsDown: string;
+    Sidebar: string;
 };
 type IconProps = {
     'aria-label'?: string;

package/dist/components/icon/Icon.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,eAAO,MAAM,SAAS~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HrB~~,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAOtG,CAAC;AAgBF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AA2DF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
1	+ {"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIrB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAOtG,CAAC;AAgBF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AA2DF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/icon/Icon.component.js CHANGED Viewed

@@ -133,6 +133,7 @@ export const iconTable = {
     Mail: 'fas faEnvelope',
     ThumbsUp: 'far faThumbsUp',
     ThumbsDown: 'far faThumbsDown',
+    Sidebar: 'fas faColumns',
 };
 export const customIcons = {
     'Remote-user': ({ 'aria-label': ariaLabel, color, size }) => (_jsx(RemoteUser, { ariaLabel: ariaLabel, color: color, size: size })),

package/dist/components/inputv2/inputv2.d.ts CHANGED Viewed

@@ -1,19 +1,24 @@
 import { InputHTMLAttributes } from 'react';
 import { IconName } from '../icon/Icon.component';
+import { CoreUITheme } from '../../style/theme';
 export declare const convertSizeToRem: (size?: "1" | "2/3" | "1/2" | "1/3") => "14rem" | "6rem" | "10rem" | "20.5rem";
 export type InputSize = '1' | '2/3' | '1/2' | '1/3';
 export type InputProps = {
     error?: string;
     id: string;
     leftIcon?: IconName;
+    leftIconColor?: keyof CoreUITheme;
     rightIcon?: IconName;
+    rightIconColor?: keyof CoreUITheme;
     size?: InputSize;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
 export declare const Input: import("react").ForwardRefExoticComponent<{
     error?: string;
     id: string;
     leftIcon?: IconName;
+    leftIconColor?: keyof CoreUITheme;
     rightIcon?: IconName;
+    rightIconColor?: keyof CoreUITheme;
     size?: InputSize;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=inputv2.d.ts.map

package/dist/components/inputv2/inputv2.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"inputv2.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputv2/inputv2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;~~AAExD~~,eAAO,MAAM,gBAAgB,UAAW,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,2CAKlE,CAAC;AAwFF,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEpD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,KAAK;~~YAPR~~,MAAM;QACV,MAAM;eACC,QAAQ;~~gBACP~~,QAAQ;~~WACb~~,SAAS;~~0GAmDjB~~,CAAC"}
1	+ {"version":3,"file":"inputv2.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputv2/inputv2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,eAAO,MAAM,gBAAgB,UAAW,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,2CAKlE,CAAC;AAwFF,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEpD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,WAAW,CAAC;IAClC,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,WAAW,CAAC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,KAAK;YATR,MAAM;QACV,MAAM;eACC,QAAQ;oBACH,MAAM,WAAW;gBACrB,QAAQ;qBACH,MAAM,WAAW;WAC3B,SAAS;0GAyDjB,CAAC"}

package/dist/components/inputv2/inputv2.js CHANGED Viewed

@@ -81,10 +81,10 @@ const InputBorder = styled.div `
 `;
 const SelfCenterredIcon = styled(Icon) `
   align-self: center;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${(props) => props.theme[props.color]};
 `;
-export const Input = forwardRef(({ error, disabled, id, leftIcon, rightIcon, placeholder, size, ...inputProps }, ref) => {
+export const Input = forwardRef(({ error, disabled, id, leftIcon, leftIconColor = 'textSecondary', rightIcon, rightIconColor = 'textSecondary', placeholder, size, ...inputProps }, ref) => {
     const { isContextAvailable, disabled: disabledFromFieldContext, error: errorFromFieldContext, } = useFieldContext();
     placeholder = placeholder ? `Example: ${placeholder}` : undefined;
-    return (_jsx(InputBorder, { disabled: !!(disabled || disabledFromFieldContext), hasError: !!(error || errorFromFieldContext), width: convertSizeToRem(size), children: _jsxs(InputContainer, { isContextAvailable: isContextAvailable, disabled: !!(disabled || disabledFromFieldContext), hasError: !!(error || errorFromFieldContext), children: [leftIcon && _jsx(SelfCenterredIcon, { name: leftIcon }), _jsx(StyledInput, { ref: ref, disabled: disabled || disabledFromFieldContext, "aria-invalid": !!(error || errorFromFieldContext), "aria-describedby": `${DESCRIPTION_PREFIX}${id}`, hasIcon: !!(leftIcon || rightIcon), id: id, ...inputProps, placeholder: placeholder }), rightIcon && _jsx(SelfCenterredIcon, { name: rightIcon })] }) }));
+    return (_jsx(InputBorder, { disabled: !!(disabled || disabledFromFieldContext), hasError: !!(error || errorFromFieldContext), width: convertSizeToRem(size), children: _jsxs(InputContainer, { isContextAvailable: isContextAvailable, disabled: !!(disabled || disabledFromFieldContext), hasError: !!(error || errorFromFieldContext), children: [leftIcon && (_jsx(SelfCenterredIcon, { name: leftIcon, color: leftIconColor })), _jsx(StyledInput, { ref: ref, disabled: disabled || disabledFromFieldContext, "aria-invalid": !!(error || errorFromFieldContext), "aria-describedby": `${DESCRIPTION_PREFIX}${id}`, hasIcon: !!(leftIcon || rightIcon), id: id, ...inputProps, placeholder: placeholder }), rightIcon && (_jsx(SelfCenterredIcon, { name: rightIcon, color: rightIconColor }))] }) }));
 });

package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAOL~~,mBAAmB,EAGpB,MAAM,UAAU,CAAC;AAqClB,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEzC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;CAC7B,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EACF;QACE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;QAC3B,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;KAC5B,GACD,SAAS,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CACzB,wBAAwB,GACxB,qBAAqB,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,CACd,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,EACjD,SAAS,CAAC,EAAE,MAAM,EAClB,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,KAC9B,KAAK,CAAC,SAAS,CAAC;CACtB,CAAC;AA6FF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,UAAwB,EACxB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,aAAa,EACb,GAAG,IAAI,EACR,EAAE,cAAc,~~2CAwWhB~~"}
1	+ {"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,mBAAmB,EAGpB,MAAM,UAAU,CAAC;AAqClB,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEzC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;CAC7B,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EACF;QACE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;QAC3B,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;KAC5B,GACD,SAAS,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CACzB,wBAAwB,GACxB,qBAAqB,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,CACd,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,EACjD,SAAS,CAAC,EAAE,MAAM,EAClB,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,KAC9B,KAAK,CAAC,SAAS,CAAC;CACtB,CAAC;AA6FF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,UAAwB,EACxB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,aAAa,EACb,GAAG,IAAI,EACR,EAAE,cAAc,2CA2WhB"}

package/dist/components/linetimeseriechart/linetimeseriechart.component.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CartesianGrid, Line, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { CartesianGrid, Line, LineChart, ReferenceLine, Tooltip, XAxis, YAxis, } from 'recharts';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
 import { spacing } from '../../spacing';
@@ -15,11 +15,11 @@ import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
 import { formatXAxisLabel } from './utils';
 import { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, } from '../charttooltip/ChartTooltip';
 import { LegendShape } from '../chartlegend/ChartLegend';
+import { StyledResponsiveContainer } from '../barchartv2/Barchart.component';
 const LineTemporalChartWrapper = styled.div `
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  flex: 1;
 `;
 const ChartHeader = styled.div `
   display: flex;
@@ -220,10 +220,10 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
     }, [series, getColor, selectedResources]);
     // Format time for display the tick in the x axis
     const formatXAxisLabelCallback = useCallback((timestamp) => formatXAxisLabel(timestamp, timeFormat, chartData), [timeFormat, chartData]);
-    return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(ChartHeader, { children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(Box, { ml: spacing.r4, children: _jsx(TooltipComponent, { placement: 'right', overlay: _jsx(SmallerText, { children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) }) })), isLoading && _jsx(Loader, {})] }), _jsx("div", { onFocus: () => setIsChartActive(true), onBlur: () => setIsChartActive(false), onFocusCapture: () => setIsChartActive(true), onBlurCapture: () => setIsChartActive(false), children: _jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { data: rechartsData, ref: chartRef, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, syncId: syncId, onMouseEnter: () => setIsChartActive(true), onMouseLeave: () => setIsChartActive(false), children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ['dataMin', 'dataMax'], ticks: xAxisTicks, tickFormatter: formatXAxisLabelCallback, tickCount: 5, tick: {
+    return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(ChartHeader, { children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(Box, { ml: spacing.r4, children: _jsx(TooltipComponent, { placement: 'right', overlay: _jsx(SmallerText, { children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) }) })), isLoading && _jsx(Loader, {})] }), _jsx("div", { onFocus: () => setIsChartActive(true), onBlur: () => setIsChartActive(false), onFocusCapture: () => setIsChartActive(true), onBlurCapture: () => setIsChartActive(false), children: _jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { data: rechartsData, ref: chartRef, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, syncId: syncId, onMouseEnter: () => setIsChartActive(true), onMouseLeave: () => setIsChartActive(false), accessibilityLayer: true, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ['dataMin', 'dataMax'], ticks: xAxisTicks, tickFormatter: formatXAxisLabelCallback, tickCount: 5, tick: {
                                     fill: theme.textSecondary,
                                     fontSize: fontSize.smaller,
-                                }, axisLine: { stroke: theme.border } }), _jsx(YAxis, { orientation: "right", allowDataOverflow: false, label: {
+                                }, axisLine: { stroke: theme.border } }), _jsx(YAxis, { orientation: "right", label: {
                                     value: yAxisTitle,
                                     angle: 90,
                                     position: 'insideRight',
@@ -239,8 +239,8 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
                                         : [0, topValue], axisLine: { stroke: theme.border }, tick: {
                                     fill: theme.textSecondary,
                                     fontSize: fontSize.smaller,
-                                }, tickFormatter: (value) => Math.round(value).toString(), tickCount: 5, interval: 'preserveStartEnd' }), _jsx(Tooltip, { content: (props) => (_jsx(LineTimeSerieChartTooltip, { unitLabel: unitLabel, timeFormat: timeFormat, renderTooltip: renderTooltip, tooltipProps: props, isChartActive: isChartActive, hoveredValue: hoveredValue })) }), yAxisType === 'symmetrical' && (_jsx(ReferenceLine, { y: 0, stroke: theme.border })), Object.entries(groupedSeries).map(([resource, resourceSeries]) => resourceSeries.map((serie, serieIndex) => {
+                                }, tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value.toFixed(0)), tickCount: 5, interval: 0 }), _jsx(Tooltip, { content: (props) => (_jsx(LineTimeSerieChartTooltip, { unitLabel: unitLabel, timeFormat: timeFormat, renderTooltip: renderTooltip, tooltipProps: props, isChartActive: isChartActive, hoveredValue: hoveredValue })) }), yAxisType === 'symmetrical' && (_jsx(ReferenceLine, { y: 0, stroke: theme.border })), Object.entries(groupedSeries).map(([resource, resourceSeries]) => resourceSeries.map((serie, serieIndex) => {
                                 const label = serie.getTooltipLabel(serie.metricPrefix, serie.resource);
-                                return (_jsx(Line, { type: "monotone", dataKey: label, stroke: colorMapping[resource], dot: false, isAnimationActive: false, onMouseEnter: () => setHoveredValue(label), onMouseLeave: () => setHoveredValue(undefined) }, `${title}-${resource}-${serieIndex}`));
+                                return (_jsx(Line, { type: "monotone", dataKey: label, stroke: colorMapping[resource], dot: false, isAnimationActive: false, strokeDasharray: serie.isLineDashed ? '4 4' : undefined, onMouseEnter: () => setHoveredValue(label), onMouseLeave: () => setHoveredValue(undefined) }, `${title}-${resource}-${serieIndex}`));
                             }))] }) }) })] }));
 }

package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollbarWrapper.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;~~AAmDF~~,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAO5C;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
1	+ {"version":3,"file":"ScrollbarWrapper.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAqDF,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAO5C;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/scrollbarwrapper/ScrollbarWrapper.component.js CHANGED Viewed

@@ -20,6 +20,7 @@ ${(props) => {
         width: 4px;
         height: 4px;
         min-height: 20px;
+        background: ${brand.border}; // fallback for gradient themes
         background: ${brand.buttonSecondary};
         border-radius: 4px;
         -webkit-border-radius: 4px;
@@ -42,6 +43,7 @@ ${(props) => {
       }
       // Firefox
+      scrollbar-color: ${brand.border} ${brand.backgroundLevel3}; // fallback for gradient themes
       scrollbar-color: ${brand.buttonSecondary} ${brand.backgroundLevel3};
       scrollbar-width: thin;
     }

package/dist/components/searchinput/SearchInput.component.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 import { ChangeEvent } from 'react';
+import { IconName } from '../icon/Icon.component';
 import { InputSize } from '../inputv2/inputv2';
+import { CoreUITheme } from '../../style/theme';
 export type Props = {
     placeholder?: string;
     value: string;
@@ -9,6 +11,8 @@ export type Props = {
     id?: string;
     size?: InputSize;
     autoComplete?: 'on' | 'off';
+    searchIcon?: IconName;
+    searchIconColor?: keyof CoreUITheme;
 };
 declare const SearchInput: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
 export { SearchInput };

package/dist/components/searchinput/SearchInput.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;~~AAG7E~~,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;~~CAC7B~~,CAAC;AAuCF,QAAA,MAAM,WAAW,~~2FAuFhB~~,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
1	+ {"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAE7E,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAC5B,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,WAAW,CAAC;CACrC,CAAC;AAuCF,QAAA,MAAM,WAAW,2FA0FhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/searchinput/SearchInput.component.js CHANGED Viewed

@@ -38,7 +38,7 @@ const ClearButton = styled.div `
   right: 1px;
   top: 0px;
 `;
-const SearchInput = forwardRef(({ placeholder, value, onChange, onReset, disabled, id, size, autoComplete = 'on', ...rest }, forwardedRef) => {
+const SearchInput = forwardRef(({ placeholder, value, onChange, onReset, disabled, id, size, autoComplete = 'on', searchIcon = 'Search', searchIconColor = 'textSecondary', ...rest }, forwardedRef) => {
     const myInputRef = useRef(null);
     const debounce = useRef(null);
     const [debouncedValue, setDebouncedValue] = useState(value);
@@ -64,7 +64,7 @@ const SearchInput = forwardRef(({ placeholder, value, onChange, onReset, disable
             onChange(e);
         }, 300);
     };
-    return (_jsxs(SearchInputContainer, { className: "sc-searchinput", disabled: disabled, ...rest, children: [_jsx(Input, { autoComplete: autoComplete, min: '1', id: id || 'search', type: "search", "aria-label": "search", name: "search", placeholder: placeholder, value: debouncedValue, onChange: handleChange, onReset: reset, size: size, leftIcon: "Search", className: "search-box", disabled: disabled, ref: (element) => {
+    return (_jsxs(SearchInputContainer, { className: "sc-searchinput", disabled: disabled, ...rest, children: [_jsx(Input, { autoComplete: autoComplete, min: '1', id: id || 'search', type: "search", "aria-label": "search", name: "search", placeholder: placeholder, value: debouncedValue, onChange: handleChange, onReset: reset, size: size, leftIcon: searchIcon, leftIconColor: searchIconColor, className: "search-box", disabled: disabled, ref: (element) => {
                     myInputRef.current = element;
                     if (typeof forwardedRef === 'function') {
                         forwardedRef(element);

package/dist/components/sparkline/sparkline.component.d.ts CHANGED Viewed

@@ -6,11 +6,12 @@ type SparklineProps = {
     startingTimeStamp: number;
     sampleDuration: number;
     sampleInterval: number;
+    yAxisType?: 'default' | 'percentage';
 };
 /**
  * Sparkline is a simple dynamically sized area chart.
  * Used to show trends in data over time.
  */
-export declare function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval }: SparklineProps): import("react/jsx-runtime").JSX.Element;
+export declare function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval, yAxisType }: SparklineProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=sparkline.component.d.ts.map

package/dist/components/sparkline/sparkline.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sparkline.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sparkline/sparkline.component.tsx"],"names":[],"mappings":"AAMA,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE;QACL,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAC,IAAI,CAAC,EAAE,CAAC;QAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,~~CAAA~~;~~CACvB~~,CAAC;AAEF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,cAAc,EAAE,EAAE,cAAc,~~2CAiCrG~~"}
1	+ {"version":3,"file":"sparkline.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sparkline/sparkline.component.tsx"],"names":[],"mappings":"AAMA,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE;QACL,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAC,IAAI,CAAC,EAAE,CAAC;QAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;CACtC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,cAAc,2CAkChH"}

package/dist/components/sparkline/sparkline.component.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer, YAxis } from "recharts";
 import { useTheme } from "styled-components";
 import { chartColors } from "../../style/theme";
 import { addMissingDataPoint } from "../linetemporalchart/ChartUtil";
@@ -8,7 +8,7 @@ import { addMissingDataPoint } from "../linetemporalchart/ChartUtil";
  * Sparkline is a simple dynamically sized area chart.
  * Used to show trends in data over time.
  */
-export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval }) {
+export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval, yAxisType }) {
     var _a;
     const data = useMemo(() => {
         const dataMdp = addMissingDataPoint(serie.data, startingTimeStamp, sampleDuration, sampleInterval);
@@ -16,5 +16,5 @@ export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInte
     }, [serie.data]);
     const color = (_a = serie.color) !== null && _a !== void 0 ? _a : chartColors.lineColor1;
     const strokeGridColor = useTheme().border;
-    return (_jsx(ResponsiveContainer, { children: _jsxs(AreaChart, { data: data, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: `gradient-${color}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.7 }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.1 })] }) }), _jsx(CartesianGrid, { horizontal: false, stroke: strokeGridColor, strokeOpacity: 0.5 }), _jsx(Area, { type: "linear", dataKey: "y", stroke: color, fill: `url(#gradient-${color})`, dot: false, activeDot: false, isAnimationActive: false })] }) }));
+    return (_jsx(ResponsiveContainer, { children: _jsxs(AreaChart, { data: data, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: `gradient-${color}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.7 }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.1 })] }) }), _jsx(CartesianGrid, { horizontal: false, stroke: strokeGridColor, strokeOpacity: 0.5 }), _jsx(Area, { type: "linear", dataKey: "y", stroke: color, fill: `url(#gradient-${color})`, dot: false, activeDot: false, isAnimationActive: false }), yAxisType === 'percentage' && _jsx(YAxis, { domain: [0, 100], hide: true })] }) }));
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.173.0",
+  "version": "0.175.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",

package/src/lib/components/barchartv2/Barchart.component.tsx CHANGED Viewed

@@ -158,7 +158,7 @@ export const CustomTick = ({
   return (
     <foreignObject
       x={centerX}
-      y={y}
+      y={y - 8}
       width={tickWidth}
       color={theme.textSecondary}
       overflow="visible"
@@ -185,7 +185,7 @@ export const CustomTick = ({
   );
 };
-const StyledResponsiveContainer = styled(ResponsiveContainer)`
+export const StyledResponsiveContainer = styled(ResponsiveContainer)`
   // Avoid tooltip over constrained text to be cut off
   & .recharts-surface {
     overflow: visible;
@@ -304,7 +304,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
     );
   return (
-    <Stack direction="vertical" gap="r8">
+    <Stack direction="vertical">
       <ChartHeader
         title={title}
         secondaryTitle={secondaryTitle}
@@ -332,9 +332,13 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
             barCategoryGap={type.type === 'category' ? type.gap : undefined}
           >
             <CartesianGrid
-              vertical={false}
-              horizontal={false}
-              fill={theme.backgroundLevel1}
+              vertical={true}
+              horizontal={true}
+              verticalPoints={[0]}
+              horizontalPoints={[0]}
+              stroke={theme.border}
+              fill={theme.backgroundLevel4}
+              strokeWidth={1}
             />
             {rechartsBars.map((bar) => {
               const { fill, dataKey, stackId } = bar;
@@ -354,29 +358,21 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
             <YAxis
               tickCount={1}
+              interval={0}
               unit={` ${unitLabel}`}
               domain={[0, roundReferenceValue]}
               tickFormatter={
                 (value) =>
                   new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator
               }
-              axisLine={false}
+              axisLine={{ stroke: theme.border }}
               tick={{
                 fill: theme.textSecondary,
                 fontSize: fontSize.smaller,
               }}
-              tickLine={false}
-              label={{
-                fill: theme.textSecondary,
-              }}
               orientation="right"
             />
-            <ReferenceLine
-              y={roundReferenceValue}
-              fill={theme.border}
-              strokeWidth={0.5} // Reduce stroke width to make it less visible
-            />
             <XAxis
               dataKey="category"
               tick={(props) => <CustomTick {...props} type={type} />}
@@ -384,10 +380,10 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
               interval={0}
               allowDataOverflow={true}
               tickLine={{
-                stroke: theme.textSecondary,
+                stroke: theme.border,
               }}
               axisLine={{
-                stroke: theme.textSecondary,
+                stroke: theme.border,
               }}
             />

package/src/lib/components/icon/Icon.component.tsx CHANGED Viewed

@@ -142,6 +142,7 @@ export const iconTable = {
   Mail: 'fas faEnvelope',
   ThumbsUp: 'far faThumbsUp',
   ThumbsDown: 'far faThumbsDown',
+  Sidebar: 'fas faColumns',
 };
 type IconProps = {

package/src/lib/components/inputv2/inputv2.tsx CHANGED Viewed

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
 import { DESCRIPTION_PREFIX, useFieldContext } from '../form/Form.component';
 import { Icon, IconName } from '../icon/Icon.component';
+import { CoreUITheme } from '../../style/theme';
 export const convertSizeToRem = (size?: '1' | '2/3' | '1/2' | '1/3') => {
   if (size === '2/3') return '14rem';
@@ -92,9 +93,9 @@ const InputBorder = styled.div<{
   }
 `;
-const SelfCenterredIcon = styled(Icon)`
+const SelfCenterredIcon = styled(Icon)<{ color: keyof CoreUITheme }>`
   align-self: center;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${(props) => props.theme[props.color]};
 `;
 export type InputSize = '1' | '2/3' | '1/2' | '1/3';
@@ -103,7 +104,9 @@ export type InputProps = {
   error?: string;
   id: string;
   leftIcon?: IconName;
+  leftIconColor?: keyof CoreUITheme;
   rightIcon?: IconName;
+  rightIconColor?: keyof CoreUITheme;
   size?: InputSize;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
@@ -114,7 +117,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       disabled,
       id,
       leftIcon,
+      leftIconColor = 'textSecondary',
       rightIcon,
+      rightIconColor = 'textSecondary',
       placeholder,
       size,
       ...inputProps
@@ -139,7 +144,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           disabled={!!(disabled || disabledFromFieldContext)}
           hasError={!!(error || errorFromFieldContext)}
         >
-          {leftIcon && <SelfCenterredIcon name={leftIcon} />}
+          {leftIcon && (
+            <SelfCenterredIcon name={leftIcon} color={leftIconColor} />
+          )}
           <StyledInput
             ref={ref}
             disabled={disabled || disabledFromFieldContext}
@@ -150,7 +157,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             {...inputProps}
             placeholder={placeholder}
           />
-          {rightIcon && <SelfCenterredIcon name={rightIcon} />}
+          {rightIcon && (
+            <SelfCenterredIcon name={rightIcon} color={rightIconColor} />
+          )}
         </InputContainer>
       </InputBorder>
     );

package/src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx CHANGED Viewed

@@ -3,7 +3,6 @@ import {
   Line,
   LineChart,
   ReferenceLine,
-  ResponsiveContainer,
   Tooltip,
   TooltipContentProps,
   XAxis,
@@ -32,12 +31,12 @@ import {
   ChartTooltipItemsContainer,
 } from '../charttooltip/ChartTooltip';
 import { LegendShape } from '../chartlegend/ChartLegend';
+import { StyledResponsiveContainer } from '../barchartv2/Barchart.component';
 const LineTemporalChartWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  flex: 1;
 `;
 const ChartHeader = styled.div`
@@ -467,7 +466,7 @@ export function LineTimeSerieChart({
         onFocusCapture={() => setIsChartActive(true)}
         onBlurCapture={() => setIsChartActive(false)}
       >
-        <ResponsiveContainer width="100%" height={height}>
+        <StyledResponsiveContainer width="100%" height={height}>
           <LineChart
             data={rechartsData}
             ref={chartRef}
@@ -476,6 +475,7 @@ export function LineTimeSerieChart({
             syncId={syncId}
             onMouseEnter={() => setIsChartActive(true)}
             onMouseLeave={() => setIsChartActive(false)}
+            accessibilityLayer
           >
             <CartesianGrid
               vertical={true}
@@ -501,7 +501,6 @@ export function LineTimeSerieChart({
             />
             <YAxis
               orientation="right"
-              allowDataOverflow={false}
               label={{
                 value: yAxisTitle,
                 angle: 90,
@@ -524,9 +523,11 @@ export function LineTimeSerieChart({
                 fill: theme.textSecondary,
                 fontSize: fontSize.smaller,
               }}
-              tickFormatter={(value) => Math.round(value).toString()}
+              tickFormatter={(value) =>
+                new Intl.NumberFormat('fr-FR').format(value.toFixed(0))
+              }
               tickCount={5}
-              interval={'preserveStartEnd'}
+              interval={0}
             />
             <Tooltip
               content={(props: TooltipContentProps<number, string>) => (
@@ -560,6 +561,7 @@ export function LineTimeSerieChart({
                     stroke={colorMapping[resource]}
                     dot={false}
                     isAnimationActive={false}
+                    strokeDasharray={serie.isLineDashed ? '4 4' : undefined}
                     onMouseEnter={() => setHoveredValue(label)}
                     onMouseLeave={() => setHoveredValue(undefined)}
                   />
@@ -567,7 +569,7 @@ export function LineTimeSerieChart({
               }),
             )}
           </LineChart>
-        </ResponsiveContainer>
+        </StyledResponsiveContainer>
       </div>
     </LineTemporalChartWrapper>
   );

package/src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import styled, { createGlobalStyle, css } from 'styled-components';
+import { createGlobalStyle, css } from 'styled-components';
 type Props = {
   children: React.ReactNode;
@@ -24,6 +24,7 @@ ${(props) => {
         width: 4px;
         height: 4px;
         min-height: 20px;
+        background: ${brand.border}; // fallback for gradient themes
         background: ${brand.buttonSecondary};
         border-radius: 4px;
         -webkit-border-radius: 4px;
@@ -46,6 +47,7 @@ ${(props) => {
       }
       // Firefox
+      scrollbar-color: ${brand.border} ${brand.backgroundLevel3}; // fallback for gradient themes
       scrollbar-color: ${brand.buttonSecondary} ${brand.backgroundLevel3};
       scrollbar-width: thin;
     }

package/src/lib/components/searchinput/SearchInput.component.tsx CHANGED Viewed

@@ -1,9 +1,11 @@
 import { ChangeEvent, forwardRef, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { Icon } from '../icon/Icon.component';
+import { Icon, IconName } from '../icon/Icon.component';
 import { Input, InputSize } from '../inputv2/inputv2';
 import { Button } from '../buttonv2/Buttonv2.component';
 import { spacing } from '../../spacing';
+import { CoreUITheme } from '../../style/theme';
 export type Props = {
   placeholder?: string;
   value: string;
@@ -13,6 +15,8 @@ export type Props = {
   id?: string;
   size?: InputSize;
   autoComplete?: 'on' | 'off';
+  searchIcon?: IconName;
+  searchIconColor?: keyof CoreUITheme;
 };
 const SearchInputContainer = styled.div<{
   docked?: boolean;
@@ -63,6 +67,8 @@ const SearchInput = forwardRef(
       id,
       size,
       autoComplete = 'on',
+      searchIcon = 'Search',
+      searchIconColor = 'textSecondary',
       ...rest
     }: Props,
     forwardedRef,
@@ -115,7 +121,8 @@ const SearchInput = forwardRef(
           onChange={handleChange}
           onReset={reset}
           size={size}
-          leftIcon="Search"
+          leftIcon={searchIcon}
+          leftIconColor={searchIconColor}
           className="search-box"
           disabled={disabled}
           ref={(element) => {

package/src/lib/components/sparkline/sparkline.component.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer, YAxis } from "recharts";
 import { useTheme } from "styled-components";
 import { chartColors } from "../../style/theme";
 import { addMissingDataPoint } from "../linetemporalchart/ChartUtil";
@@ -11,14 +11,15 @@ type SparklineProps = {
   },
   startingTimeStamp: number,
   sampleDuration: number,
-  sampleInterval: number
+  sampleInterval: number,
+  yAxisType?: 'default' | 'percentage',
 };
 /**
  * Sparkline is a simple dynamically sized area chart.
  * Used to show trends in data over time.
  */
-export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval }: SparklineProps) {
+export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval, yAxisType }: SparklineProps) {
   const data = useMemo(
     () => {
       const dataMdp = addMissingDataPoint(serie.data, startingTimeStamp, sampleDuration, sampleInterval);
@@ -48,6 +49,7 @@ export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInte
         activeDot={false}
         isAnimationActive={false}
       />
+      {yAxisType === 'percentage' && <YAxis domain={[0, 100]} hide />}
       </AreaChart>
     </ResponsiveContainer>
   );

package/stories/SearchInput/searchinput.stories.tsx CHANGED Viewed

@@ -97,3 +97,77 @@ export const Debounce = {
     );
   },
 };
+export const WithCustomIconColor = {
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <Wrapper>
+        <Title>SearchInput with Custom Icon Colors</Title>
+        <div
+          style={{
+            width: '250px',
+            marginBottom: '20px',
+          }}
+        >
+          <SearchInput
+            placeholder="Primary color..."
+            value={value}
+            onChange={(e) => {
+              setValue(e.target.value);
+              action('on input change')(e.target.value);
+            }}
+            onReset={() => {
+              setValue('');
+              action('on input reset')();
+            }}
+            searchIconColor="infoPrimary"
+            {...args}
+          />
+        </div>
+        <div
+          style={{
+            width: '250px',
+            marginBottom: '20px',
+          }}
+        >
+          <SearchInput
+            placeholder="Success color..."
+            value={value}
+            onChange={(e) => {
+              setValue(e.target.value);
+              action('on input change')(e.target.value);
+            }}
+            onReset={() => {
+              setValue('');
+              action('on input reset')();
+            }}
+            searchIconColor="statusHealthy"
+            {...args}
+          />
+        </div>
+        <div
+          style={{
+            width: '250px',
+            marginBottom: '20px',
+          }}
+        >
+          <SearchInput
+            placeholder="Warning color..."
+            value={value}
+            onChange={(e) => {
+              setValue(e.target.value);
+              action('on input change')(e.target.value);
+            }}
+            onReset={() => {
+              setValue('');
+              action('on input reset')();
+            }}
+            searchIconColor="statusWarning"
+            {...args}
+          />
+        </div>
+      </Wrapper>
+    );
+  },
+};

package/stories/sparkline.stories.tsx CHANGED Viewed

@@ -166,3 +166,22 @@ export const FlatWithMissingData: Story = {
     },
   },
 };
+export const PercentageYAxis: Story = {
+  args: {
+    serie: {
+      data: trendingUpData,
+    },
+    startingTimeStamp: 1740405600,
+    sampleDuration: 7200,
+    sampleInterval: 720,
+    yAxisType: 'percentage',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Sparkline with Y-axis range is set as [0-100].',
+      },
+    },
+  },
+};

package/stories/icons.mdx DELETED Viewed

@@ -1,115 +0,0 @@
-import ImageFile from './pictures/icon-design-system.png';
-import { Meta } from '@storybook/addon-docs';
-import { Icon } from '../src/lib/components/icon/Icon.component';
-import { QueryClientProvider, QueryClient } from 'react-query';
-<Meta title="Style/Icons" />
-# Icons
-## Style
-Icon style should be consistent.
-The style is rather outlined.
-If two options are possible when choosing an icon, choose the simpler one.
-<img src={ImageFile} />
-## Size
-When next to a text, the icon and the text should have the same size.
-## Icon set table
-|                                                    Icons                                                     | Name                 | Category      | Origin | FontAwesome name     | FontAwesome code                                | Icon Style & Prefix | FA free | Use case                                                |
-| :----------------------------------------------------------------------------------------------------------: | -------------------- | ------------- | ------ | -------------------- | ----------------------------------------------- | ------------------- | ------- | ------------------------------------------------------- |
-|                                    <i className="fas fa-wallet fa-3x" />                                     | Account              | Entities      | FA     | wallet               | `<i className="fas fa-wallet" />`               | solid Style (fas)   | yes     | Hero                                                    |
-|                                 <i className="fas fa-network-wired fa-3x" />                                 | Backend              | Entities      | FA     | network-wired        | `<i className="fas fa-network-wired" />`        | solid Style (fas)   | yes     | Hero                                                    |
-|                                     <i className="fas fa-tape fa-3x" />                                      | Tape                 | Entities      | FA     | tape                 | `<i className="fas fa-tape" />`                 | solid Style (fas)   | yes     | Hero                                                    |
-|                                    <i className="fas fa-server fa-3x" />                                     | Node-backend         | Entities      | FA     | server               | `<i className="fas fa-server" />`               | solid Style (fas)   | yes     | Hero                                                    |
-|                                      <i className="fas fa-hdd fa-3x" />                                      | Volume-backend       | Entities      | FA     | hdd                  | `<i className="fas fa-hdd" />`                  | solid Style (fas)   | yes     | Hero                                                    |
-|                                   <i className="fas fa-database fa-3x" />                                    | Node-ptf             | Entities      | FA     | database             | `<i className="fas fa-database" />`             | solid Style (fas)   | yes     | Hero                                                    |
-|                                 <i className="fas fa-compact-disc fa-3x" />                                  | Volume-ptf           | Entities      | FA     | compact-disc         | `<i className="fas fa-compact-disc" />`         | solid Style (fas)   | yes     | Hero                                                    |
-|                                <i className="fas fa-project-diagram fa-3x" />                                | Network              | Entities      | FA     | project-diagram      | `<i className="fas fa-project-diagram" />`      | solid Style (fas)   | yes     | Hero                                                    |
-|                                 <i className="fas fa-glass-whiskey fa-3x" />                                 | Bucket               | Entities      | FA     | glass-whiskey        | `<i className="fas fa-glass-whiskey" />`        | solid Style (fas)   | yes     | Hero                                                    |
-|                                     <i className="fas fa-cloud fa-3x" />                                     | Cloud-backend        | Entities      | FA     | cloud                | `<i className="fas fa-cloud" />`                | solid Style (fas)   | yes     | Hero                                                    |
-|                                   <i className="fas fa-warehouse fa-3x" />                                   | Datacenter           | Entities      | FA     | warehouse            | `<i className="fas fa-warehouse" />`            | solid Style (fas)   | yes     | Hero                                                    |
-|                                   <i className="fas fa-user-cog fa-3x" />                                    | User                 | Menu          | FA     | user-cog             | `<i className="fas fa-user-cog" />`             | solid Style (fas)   | yes     | Top navbar                                              |
-|                                     <i className="fas fa-bell fa-3x" />                                      | Alert                | Menu          | FA     | bell                 | `<i className="fas fa-bell" />`                 | solid Style (fas)   | yes     |                                                         |
-|                                     <i className="fas fa-bars fa-3x" />                                      | Lat-menu             | Menu          | FA     | bars                 | `<i className="fas fa-bars" />`                 | solid Style (fas)   | yes     | Expanded version of lat navbar                          |
-|                                    <i className="fas fa-desktop fa-3x" />                                    | Dashboard            | Menu          | FA     | desktop              | `<i className="fas fa-desktop" />`              | solid Style (fas)   | yes     |                                                         |
-|                                   <i className="fas fa-stopwatch fa-3x" />                                   | Expiration           | Workflow      | FA     | stopwatch            | `<i className="fas fa-stopwatch" />`            | solid Style (fas)   | yes     |                                                         |
-|                                     <i className="fas fa-coins fa-3x" />                                     | Replication          | Workflow      | FA     | coins                | `<i className="fas fa-coins" />`                | solid Style (fas)   | yes     |                                                         |
-|                                    <i className="fas fa-rocket fa-3x" />                                     | Transition           | Workflow      | FA     | rocket               | `<i className="fas fa-rocket" />`               | solid Style (fas)   | yes     |                                                         |
-|                                     <i className="fas fa-reply fa-3x" />                                     | Discovery            | Workflow      | FA     | reply                | `<i className="fas fa-reply" />`                | solid Style (fas)   | yes     |                                                         |
-|                                  <i className="fas fa-chart-line fa-3x" />                                   | Metrics              | Action icon   | FA     | chart-line           | `<i className="fas fa-chart-line" />`           | solid Style (fas)   | yes     | Last column of Tables                                   |
-|                                   <i className="far fa-file-alt fa-3x" />                                    | Logs                 | Action icon   | FA     | file-alt             | `<i className="far fa-file-alt" />`             | regular Style (far) | yes     |                                                         |
-|                                     <i className="fas fa-edit fa-3x" />                                      | Edit                 | Action icon   | FA     | edit                 | `<i className="fas fa-edit" />`                 | solid Style (fas)   | yes     | Field editable                                          |
-|                                     <i className="fas fa-plus fa-3x" />                                      | Create-add           | Button-action | FA     | plus                 | `<i className="fas fa-plus" />`                 | solid Style (fas)   | yes     | New entity creation                                     |
-|                                     <i className="fas fa-trash fa-3x" />                                     | Delete               | Button-action | FA     | trash                | `<i className="fas fa-trash" />`                | solid Style (fas)   | yes     | Entity deletion                                         |
-|                                     <i className="fas fa-save fa-3x" />                                      | Save                 | Button-action | FA     | save                 | `<i className="fas fa-save" />`                 | solid Style (fas)   | yes     | Save changes on an entity                               |
-|                               <i className="fas fa-external-link-alt fa-3x" />                               | External-link        | Button-action | FA     | external-link-alt    | `<i className="fas fa-external-link-alt" />`    | solid Style (fas)   | yes     | Open an external link                                   |
-|                                     <i className="fas fa-times fa-3x" />                                     | Close                | Button-action | FA     | times                | `<i className="fas fa-times" />`                | solid Style (fas)   | yes     | Close a window/modal                                    |
-|                                  <i className="fas fa-caret-down fa-3x" />                                   | Dropdown-down        | Button-action | FA     | caret-down           | `<i className="fas fa-caret-down" />`           | solid Style (fas)   | yes     | Expand a drop-down                                      |
-|                                   <i className="fas fa-caret-up fa-3x" />                                    | Dropdown-up          | Button-action | FA     | caret-up             | `<i className="fas fa-caret-up" />`             | solid Style (fas)   | yes     | Dropdown expanded                                       |
-|                                    <i className="fas fa-search fa-3x" />                                     | Search               | Button-action | FA     | search               | `<i className="fas fa-search" />`               | solid Style (fas)   | yes     | Search bar                                              |
-|                                  <i className="fas fa-ellipsis-v fa-3x" />                                   | More                 | Button-action | FA     | ellipsis-v           | `<i className="fas fa-ellipsis-v" />`           | solid Style (fas)   | yes     | End of tables (not enough space to display all actions) |
-|                                <i className="fas fa-question-circle fa-3x" />                                | Info                 | Button-action | FA     | question-circle      | `<i className="fas fa-question-circle" />`      | solid Style (fas)   | yes     | Display tooltip info AND "About" (top menu)             |
-|                                     <i className="fas fa-sync fa-3x" />                                      | Sync                 | Button-action | FA     | sync                 | `<i className="fas fa-sync" />`                 | solid Style (fas)   | yes     | Refresh the metrics                                     |
-|                                  <i className="fas fa-file-export fa-3x" />                                  | Export               | Button-action | FA     | file-export          | `<i className="fas fa-file-export" />`          | solid Style (fas)   | yes     | Export the data in predefined format                    |
-|                                     <i className="far fa-clone fa-3x" />                                     | Copy                 | Button-action | FA     | clone                | `<i className="far fa-clone" />`                | regular Style (far) | yes     | Small icon next to a field that can be copied           |
-|                                  <i className="fas fa-file-upload fa-3x" />                                  | Upload               | Button-action | FA     | file-upload          | `<i className="fas fa-file-upload" />`          | solid Style (fas)   | yes     | Upload object                                           |
-|                                  <i className="fas fa-plus-square fa-3x" />                                  | Add-plus             | Button-action | FA     | plus-square          | `<i className="fas fa-plus-square" />`          | solid Style (fas)   | yes     | Add an item in a list                                   |
-|                                 <i className="fas fa-minus-square fa-3x" />                                  | Remove-minus         | Button-action | FA     | minus-square         | `<i className="fas fa-minus-square" />`         | solid Style (fas)   | yes     | Remove an item in a list                                |
-|                                     <i className="fas fa-sort fa-3x" />                                      | Sort                 | Table         | FA     | sort                 | `<i className="fas fa-sort" />`                 | solid Style (fas)   | yes     | Sort                                                    |
-|                                    <i className="fas fa-sort-up fa-3x" />                                    | Sort-up              | Table         | FA     | sort-up              | `<i className="fas fa-sort-up" />`              | solid Style (fas)   | yes     | Sort                                                    |
-|                                   <i className="fas fa-sort-down fa-3x" />                                   | Sort-down            | Table         | FA     | sort-down            | `<i className="fas fa-sort-down" />`            | solid Style (fas)   | yes     | Sort                                                    |
-|                                 <i className="fas fa-calendar-week fa-3x" />                                 | Calendar             | Pill          | FA     | calendar-week        | `<i className="fas fa-calendar-week" />`        | solid Style (fas)   | yes     | Metric over a period                                    |
-|                                   <i className="fas fa-arrow-up fa-3x" />                                    | Arrow-up             | Pill          | FA     | arrow-up             | `<i className="fas fa-arrow-up" />`             | solid Style (fas)   | yes     | Show an increase in trend                               |
-|                                  <i className="fas fa-arrow-down fa-3x" />                                   | Arrow-down           | Pill          | FA     | arrow-down           | `<i className="fas fa-arrow-down" />`           | solid Style (fas)   | yes     | Show a decrease in trend                                |
-|                                    <i className="far fa-folder fa-3x" />                                     | Folder               | Browsing      | FA     | folder               | `<i className="far fa-folder" />`               | regular Style (far) | yes     | Browsing                                                |
-|                                     <i className="far fa-file fa-3x" />                                      | File                 | Browsing      | FA     | file                 | `<i className="far fa-file" />`                 | regular Style (far) | yes     | Browsing                                                |
-|                                      <i className="fas fa-ban fa-3x" />                                      | Deletion-marker      | Browsing      | FA     | ban                  | `<i className="fas fa-ban" />`                  | solid Style (fas)   | yes     | Browsing - deletion markers on objects                  |
-|                                  <i className="fas fa-info-circle fa-3x" />                                  | Info-circle          | Status        | FA     | info-circle          | `<i className="fas fa-info-circle" />`          | solid Style (fas)   | yes     | Grey empty state-status (charts, tables)                |
-|                             <i className="fas fa-exclamation-triangle fa-3x" />                              | Exclamation-triangle | Status        | FA     | exclamation-triangle | `<i className="fas fa-exclamation-triangle" />` | solid Style (fas)   | yes     | Yellow warning status (alerts list)                     |
-|                              <i className="fas fa-exclamation-circle fa-3x" />                               | Exclamation-circle   | Status        | FA     | exclamation-circle   | `<i className="fas fa-exclamation-circle" />`   | solid Style (fas)   | yes     | Red critical alerts                                     |
-|                                     <i className="fas fa-check fa-3x" />                                     | Check                | Status        | FA     | check                | `<i className="fas fa-check" />`                | solid Style (fas)   | yes     | Healthy status AND successful operation                 |
-|                                  <i className="fas fa-shield-alt fa-3x" />                                   | Protected            | Status        | FA     | shield-alt           | `<i className="fas fa-shield-alt" />`           | solid Style (fas)   | yes     | Extra protection status                                 |
-|                                     <i className="fas fa-bars fa-3x" />                                      | Bars                 | Menu          | FA     | bars                 | `<i className="fas fa-bars" />`                 | solid Style (fas)   | yes     | Expand/collapse the lat navbar                          |
-|                                    <i className="fas fa-link   fa-3x" />                                     | Bound                | Status        | FA     | link                 | `<i className="fas fa-link" />`                 | solid Style (fas)   | yes     | Bound status                                            |
-|                                   <i className="fas fa-unlink   fa-3x" />                                    | Unbound              | Status        | FA     | unlink               | `<i className="fas fa-unlink" />`               | solid Style (fas)   | yes     | Unbound status                                          |
-|                                 <i className="fas fa-exclamation   fa-3x" />                                 | Exclamation          | Status        | FA     | exclamation          | `<i className="fas fa-exclamation" />`          | solid Style (fas)   | yes     | Issue status                                            |
-|                                    <i className="fas fa-minus   fa-3x" />                                    | Hyphen               | Status        | FA     | minus                | `<i class="fas fa-minus" />`                    | solid Style (fas)   | yes     | No status, in tables                                    |
-|                                <i className="fas   fa-times-circle fa-3x" />                                 | Remove-circle        | Action        | FA     | times-circle         | `<i class="fas fa-times-circle" />`             | solid Style (fas)   | yes     | Remove a criteria in a search                           |
-|                                 <i className="fas fa-file-upload   fa-3x" />                                 | Object-upload        | Action        | FA     | file-upload          | `<i class="fas fa-file-upload" />`              | solid Style (fas)   | yes     | When uploading an object                                |
-|                                 <i className="fas fa-chevron-left fa-3x" />                                  | Chevron-left         | Navigation    | FA     | chevron-left         | `<i className="fas fa-chevron-left" />`         | solid Style (fas)   | yes     | Expand tabs                                             |
-|                                 <i className="fas fa-chevron-right fa-3x" />                                 | Chevron-right        | Navigation    | FA     | chevron-right        | `<i className="fas fa-chevron-right" />`        | solid Style (fas)   | yes     | Expand tables                                           |
-|                              <i className="fas fa-angle-double-right fa-3x" />                               | Angle-double-right   | Status        | FA     | angle-double-right   | `<i className="fas fa-angle-double-right" />`   | solid Style (fas)   | yes     | Show an increase "From 1 value to another one"          |
-|                                   <i className="fas fa-language fa-3x" />                                    | Language             | Menu          | FA     | language             | `<i className="fas fa-language" />`             | solid Style (fas)   | yes     | Select the language in the top menu                     |
-|                                    <i className="fas fa-palette fa-3x" />                                    | Theme                | Menu          | FA     | palette              | `<i className="fas fa-palette" />`              | solid Style (fas)   | yes     | Select the theme in the top menu                        |
-|                                <i className="fas fa-clipboard-list fa-3x" />                                 | Documentation        | Menu          | FA     | clipboard-list       | `<i className="fas fa-clipboard-list" />`       | solid Style (fas)   | yes     | Access to the documentation link                        |
-|                                   <i className="fas fa-comments fa-3x" />                                    | Support              | Menu          | FA     | comments             | `<i className="fas fa-comments" />`             | solid Style (fas)   | yes     | Access to the support link                              |
-|                                 <i className="fas fa-file-contract fa-3x" />                                 | EULA                 | Menu          | FA     | file-contract        | `<i className="fas fa-file-contract" />`        | solid Style (fas)   | yes     | Access to the "Terms of use" link                       |
-|                                 <i className="fas fa-sign-out-alt fa-3x" />                                  | Log-out              | Menu          | FA     | sign-out-alt         | `<i className="fas fa-sign-out-alt" />`         | solid Style (fas)   | yes     | Log out action                                          |
-|                                   <i className="far fa-hourglass fa-3x" />                                   | Hourglass            | Status        | FA     | hourglass            | `<i className="far fa-hourglass" />`            | regular Style (far) | ?       | Workflow delayed                                        |
-|                                     <i className="fas fa-pause fa-3x" />                                     | Pause                | Status        | FA     | pause                | `<i className="fas fa-pause" />`                | solid Style (fas)   | yes     | Workflow paused                                         |
-|                                     <i className="fas fa-stop fa-3x" />                                      | Stop                 | Status        | FA     | stop                 | `<i className="fas fa-stop" />`                 | solid Style (fas)   | yes     | Upload stop                                             |
-|                                     <i className="fas fa-play fa-3x" />                                      | Play                 | Status        | FA     | play                 | `<i className="fas fa-play" />`                 | solid Style (fas)   | yes     | Upload play                                             |
-|                                 <i className="fas fa-level-up-alt fa-3x" />                                  | Upgrade              | Button-action | FA     | level-up-alt         | `<i className="fas fa-level-up-alt" />`         | solid Style (fas)   | yes     | Upgrade version                                         |
-|                                  <i className="fas fa-expand-alt fa-3x" />                                   | Expansion            | Button-action | FA     | expand-alt           | `<i className="fas fa-expand-alt" />`           | solid Style (fas)   | yes     | Expand with no rebalancing                              |
-|                                 <i className="fas fa-balance-scale fa-3x" />                                 | Rebalance            | Button-action | FA     | balance-scale        | `<i className="fas fa-balance-scale" />`        | solid Style (fas)   | yes     | Expand with rebalancing                                 |
-|                                   <i className="fas fa-hard-hat fa-3x" />                                    | Maintenance          | Button-action | FA     | hard-hat             | `<i className="fas fa-hard-hat" />`             | solid Style (fas)   | yes     | Switch to "maintenance mode"                            |
-|                                 <i className="fas fa-exchange-alt fa-3x" />                                  | Change-erasure       | Button-action | FA     | exchange-alt         | `<i className="fas fa-exchange-alt" />`         | solid Style (fas)   | yes     | Change erasure code level                               |
-|                                    <i className="fas fa-circle fa-3x" />                                     | Circle-health        | Status        | FA     | circle               | `<i className="fas-circle" />`                  | solid Style (fas)   | yes     | Display status (Healthy, Warning, Critical)             |
-|                                    <i className="far fa-circle fa-3x" />                                     | Circle-empty         | Status        | FA     | circle               | `<i className="far-circle" />`                  | regular Style (far) | yes     | Display empty health status                             |
-|                                    <i className="fas fa-toolbox fa-3x" />                                    | Services             | Status        | FA     | toolbox              | `<i className="fas fa-toolbox" />`              | solid Style (fas)   | yes     | Status icon for Services                                |
-|                                     <i className="fas fa-cubes fa-3x" />                                     | Data-services        | Hero          | FA     | cubes                | `<i className="fas fa-cubes" />`                | solid Style (fas)   | yes     | Hero icon for Data-services                             |
-|                                  <i className="fas fa-arrow-right fa-3x" />                                  | Arrow-right          | Navigation    | FA     | arrow-right          | `<i className="fas fa-right-up" />`             | solid Style (fas)   | yes     | Button as "Continue", next step                         |
-|                                  <i className="fas fa-arrow-left fa-3x" />                                   | Arrow-left           | Navigation    | FA     | arrow-left           | `<i className="fas fa-arrow-left" />`           | solid Style (fas)   | yes     | Go back to a previous status/page                       |
-|                                  <i className="fas fa-certificate fa-3x" />                                  | Certificate          | Entities      | FA     | certificate          | `<i className="fas fa-certificate" />`          | solid Style (fas)   | yes     | Certificate                                             |
-|                                   <i className="fas fa-download fa-3x" />                                    | Download             | Action icon   | FA     | download             | `<i className="fas fa-download" />`             | solid Style (fas)   | yes     | Download                                                |
-|                                    <i className="fas fa-id-card fa-3x" />                                    | ID-card              | Entities      | FA     | id-card              | `<i className="fas fa-id-card"/>`               | solid Style (fas)   | yes     | Identity                                                |
-|                                      <i className="fas fa-cog fa-3x" />                                      | Setting              | Action        | FA     | cog                  | `<i className="fas fa-cog"/>`                   | solid Style (fas)   | yes     | Global Settings                                         |
-|                                     <i className="fas fa-ring fa-3x" />                                      | Ring                 | Entities      | FA     | ring                 | `<i className="fas fa-ring"/>`                  | solid Style (fas)   | yes     | Ring                                                    |
-| <QueryClientProvider client={new QueryClient()}><Icon name="Remote-user" size="3x" /></QueryClientProvider>  | Remote-user          | Entities      | Custom | -                    | -                                               | custom icon         | -       | Remote user in Identity UI                              |
-| <QueryClientProvider client={new QueryClient()}><Icon name="Remote-group" size="3x" /></QueryClientProvider> | Remote-group         | Entities      | Custom | -                    | -                                               | custom icon         | -       | Remote group in Identity UI                             |