@scality/core-ui 0.151.0 → 0.153.0

package/dist/components/dropdown/Dropdown.component.d.ts

@@ -1,3 +1,4 @@
+import { Placement } from '@floating-ui/dom';
 export type Item = {
     label: string;
     name?: string;
@@ -13,7 +14,8 @@ type Props = {
     items: Items;
     icon?: JSX.Element;
     caret?: boolean;
+    placement?: Placement;
 };
-declare function Dropdown({ items, text, icon, size, variant, title, caret, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Dropdown({ items, text, icon, size, variant, title, caret, placement, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export { Dropdown };
 //# sourceMappingURL=Dropdown.component.d.ts.map

package/dist/components/dropdown/Dropdown.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dropdown/Dropdown.component.tsx"],"names":[],"mappings":"AAgBA,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC9B,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AA4DF,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,IAAa,EACb,OAA2B,EAC3B,KAAK,EACL,KAAY,EACZ,GAAG,IAAI,EACR,EAAE,KAAK,2CAgEP;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Dropdown.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dropdown/Dropdown.component.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAgB,SAAS,EAAS,MAAM,kBAAkB,CAAC;AAGlE,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC9B,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AA6DF,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,IAAa,EACb,OAA2B,EAC3B,KAAK,EACL,KAAY,EACZ,SAAoB,EACpB,GAAG,IAAI,EACR,EAAE,KAAK,2CA2EP;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/dropdown/Dropdown.component.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
 import styled from 'styled-components';
 import { ButtonStyled, ButtonIcon, ButtonText, } from '../button/Button.component';
 import { zIndex } from '../../style/theme';
@@ -8,6 +9,8 @@ import { getThemePropSelector } from '../../utils';
 import { Icon } from '../icon/Icon.component';
 import { useSelect } from 'downshift';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
+import { flip, offset, shift } from '@floating-ui/dom';
+import { useFloating, useInteractions, autoUpdate } from '@floating-ui/react';
 const DropdownStyled = styled.div `
   position: relative;
   user-select: none;
@@ -27,7 +30,6 @@ const DropdownMenuStyled = styled.ul `
   max-height: 200px;
   min-width: 100%;
   overflow: auto;
-  border-bottom: 0.3px solid ${getThemePropSelector('border')};
   display: ${(props) => (props.isOpen ? 'auto' : 'none')};
 `;
 const DropdownMenuItemStyled = styled.li `
@@ -66,17 +68,23 @@ const TriggerStyled = styled(Trigger) `
     color: ${(props) => props.theme.textPrimary};
   }
 `;
-function Dropdown({ items, text, icon, size = 'base', variant = 'buttonSecondary', title, caret = true, ...rest }) {
+function Dropdown({ items, text, icon, size = 'base', variant = 'buttonSecondary', title, caret = true, placement = 'bottom', ...rest }) {
     const { isOpen, getToggleButtonProps, getMenuProps, getItemProps, highlightedIndex, } = useSelect({
         items,
         itemToString: (item) => (item === null || item === void 0 ? void 0 : item.label) || '',
     });
-    return (_jsx(DropdownStyled, { active: open, variant: variant, className: "sc-dropdown", ...rest, children: _jsxs(TriggerStyled, { variant: variant, size: size, className: "trigger", title: title, ...getToggleButtonProps(), children: [icon && (_jsx(ButtonIcon, { text: text, size: size, children: icon })), text && _jsx(ButtonText, { className: "sc-trigger-text", children: text }), caret && (_jsx(Caret, { children: _jsx(Icon, { name: "Dropdown-down" }) })), _jsx(DropdownMenuStyled, { className: "menu-item", isOpen: isOpen, ...getMenuProps(), children: items.map((item, index) => {
-                        return (_jsx(DropdownMenuItemStyled, { className: "menu-item-label", variant: item.variant, ...item, ...getItemProps({
-                                item,
-                                index,
-                                onClick: item.onClick,
-                            }), isSelected: index === highlightedIndex, children: item.label }, item.label));
-                    }) })] }) }));
+    const { refs, floatingStyles } = useFloating({
+        middleware: [offset(10), flip(), shift()],
+        placement: placement,
+        whileElementsMounted: autoUpdate,
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions();
+    return (_jsxs(DropdownStyled, { variant: variant, className: "sc-dropdown", ...rest, ref: refs.setReference, children: [_jsxs(TriggerStyled, { variant: variant, size: size, className: "trigger", title: title, ...getToggleButtonProps(), ...getReferenceProps(), children: [icon && (_jsx(ButtonIcon, { text: text, size: size, children: icon })), text && _jsx(ButtonText, { className: "sc-trigger-text", children: text }), caret && (_jsx(Caret, { children: _jsx(Icon, { name: "Dropdown-down" }) }))] }), _jsx(DropdownMenuStyled, { className: "menu-item", isOpen: isOpen, style: floatingStyles, ...getFloatingProps(), ...getMenuProps({ ref: refs.setFloating }), children: items.map((item, index) => {
+                    return (_jsx(DropdownMenuItemStyled, { className: "menu-item-label", variant: item.variant, ...item, ...getItemProps({
+                            item,
+                            index,
+                            onClick: item.onClick,
+                        }), isSelected: index === highlightedIndex, children: item.label }, item.label));
+                }) })] }));
 }
 export { Dropdown };

package/dist/components/form/Form.component.js

@@ -5,7 +5,7 @@ import { spacing, Stack, Wrap } from '../../spacing';
 import { convertRemToPixels } from '../../utils';
 import { Box } from '../box/Box';
 import { Icon } from '../icon/Icon.component';
-import { IconHelp } from '../IconHelper';
+import { IconHelp } from '../iconhelper/IconHelper';
 import { ScrollbarWrapper } from '../scrollbarwrapper/ScrollbarWrapper.component';
 import { Text } from '../text/Text.component';
 const DESCRIPTION_PREFIX = 'describe-';

package/dist/components/icon/CustomsIcons.d.ts

@@ -0,0 +1,12 @@
+export declare const useGetColor: (color: string | undefined) => string;
+export declare const RemoteUser: ({ ariaLabel, color, size }: {
+    ariaLabel: any;
+    color: any;
+    size: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const RemoteGroup: ({ ariaLabel, color, size }: {
+    ariaLabel: any;
+    color: any;
+    size: any;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CustomsIcons.d.ts.map

package/dist/components/icon/CustomsIcons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomsIcons.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/CustomsIcons.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,UAAW,MAAM,GAAG,SAAS,KAAG,MAKvD,CAAC;AAEF,eAAO,MAAM,UAAU;;;;6CAoBtB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;6CAoBvB,CAAC"}

package/dist/components/icon/CustomsIcons.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from 'styled-components';
+export const useGetColor = (color) => {
+    const theme = useTheme();
+    if (!color)
+        return 'currentColor';
+    return theme[color] || color;
+};
+export const RemoteUser = ({ ariaLabel, color, size }) => {
+    const getColor = useGetColor(color);
+    return (_jsxs("svg", { viewBox: "0 0 19 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: 'svg-inline--fa ' + (size ? `fa-${size}` : ''), "aria-label": ariaLabel, children: [_jsx("path", { d: "M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z", fill: getColor }), _jsx("path", { d: "M9.18043 7.97631C8.0165 7.97631 7.08207 7.01268 7.08207 5.81237C7.08207 4.62897 8.0165 3.64844 9.18043 3.64844C10.328 3.64844 11.2788 4.62897 11.2788 5.81237C11.2788 7.01268 10.328 7.97631 9.18043 7.97631ZM10.6394 8.51729C11.8526 8.51729 12.8526 9.54854 12.8526 10.7996V11.4927C12.8526 11.9492 12.4919 12.3042 12.0657 12.3042H6.29519C5.85256 12.3042 5.5083 11.9492 5.5083 11.4927V10.7996C5.5083 9.54854 6.49191 8.51729 7.70502 8.51729H7.98371C8.34437 8.70325 8.7542 8.78778 9.18043 8.78778C9.60666 8.78778 10.0001 8.70325 10.3608 8.51729H10.6394Z", fill: getColor })] }));
+};
+export const RemoteGroup = ({ ariaLabel, color, size }) => {
+    const getColor = useGetColor(color);
+    return (_jsxs("svg", { viewBox: "0 0 19 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: 'svg-inline--fa ' + (size ? `fa-${size}` : ''), "aria-label": ariaLabel, children: [_jsx("path", { d: "M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z", fill: getColor }), _jsx("path", { d: "M4.8 7.85714C4.125 7.85714 3.6 7.29464 3.6 6.57143C3.6 5.8683 4.125 5.28571 4.8 5.28571C5.45625 5.28571 6 5.8683 6 6.57143C6 7.29464 5.45625 7.85714 4.8 7.85714ZM13.2 7.85714C12.525 7.85714 12 7.29464 12 6.57143C12 5.8683 12.525 5.28571 13.2 5.28571C13.8563 5.28571 14.4 5.8683 14.4 6.57143C14.4 7.29464 13.8563 7.85714 13.2 7.85714ZM13.8 8.5C14.4563 8.5 15 9.08259 15 9.78571V10.4286C15 10.7902 14.7188 11.0714 14.4 11.0714H13.1625C13.0313 10.1272 12.5063 9.32366 11.7375 8.8817C11.9625 8.66071 12.2625 8.5 12.6 8.5H13.8ZM9 8.5C7.8375 8.5 6.9 7.49554 6.9 6.25C6.9 5.02455 7.8375 4 9 4C10.1438 4 11.1 5.02455 11.1 6.25C11.1 7.49554 10.1438 8.5 9 8.5ZM10.425 9.14286C11.625 9.14286 12.6 10.1875 12.6 11.4732V12.0357C12.6 12.5781 12.1875 13 11.7 13H6.3C5.79375 13 5.4 12.5781 5.4 12.0357V11.4732C5.4 10.1875 6.35625 9.14286 7.55625 9.14286H7.70625C8.1 9.34375 8.53125 9.46429 9 9.46429C9.45 9.46429 9.88125 9.34375 10.275 9.14286H10.425ZM6.24375 8.8817C5.475 9.32366 4.95 10.1272 4.81875 11.0714H3.6C3.2625 11.0714 3 10.7902 3 10.4286V9.78571C3 9.08259 3.525 8.5 4.2 8.5H5.4C5.71875 8.5 6.01875 8.66071 6.24375 8.8817Z", fill: getColor })] }));
+};

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

@@ -1,6 +1,6 @@
+import { SizeProp } from '@fortawesome/fontawesome-svg-core';
 import { CSSProperties } from 'react';
 import { CoreUITheme } from '../../style/theme';
-import { SizeProp } from '@fortawesome/fontawesome-svg-core';
 export declare const iconTable: {
     Account: string;
     Backend: string;
@@ -148,6 +148,7 @@ type Props = {
     withWrapper?: boolean;
     style?: CSSProperties;
     onClick?: (event: MouseEvent) => void;
+    title?: string;
 };
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     size: SizeProp;

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAG7D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HrB,CAAC;AASF,eAAO,MAAM,WAAW;;;;;;;;;;;CAqCvB,CAAC;AAaF,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,UAAU,KAAK,IAAI,CAAC;CACvC,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAuEF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"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;AAGf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HrB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;CAOvB,CAAC;AAaF,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,UAAU,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAyEF,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

@@ -1,9 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState, } from 'react';
-import styled, { css, useTheme } from 'styled-components';
-import { Loader } from '../loader/Loader.component';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useEffect, useState, } from 'react';
 import { useQuery } from 'react-query';
+import styled, { css } from 'styled-components';
+import { Loader } from '../loader/Loader.component';
+import { RemoteGroup, RemoteUser } from './CustomsIcons';
 export const iconTable = {
     Account: 'fas faWallet',
     Backend: 'fas faNetworkWired',
@@ -129,15 +130,9 @@ export const iconTable = {
     Stop: 'fas faStop',
     Play: 'fas faPlay',
 };
-const getColor = (color) => {
-    const theme = useTheme();
-    if (!color)
-        return 'currentColor';
-    return theme[color] || color;
-};
 export const customIcons = {
-    'Remote-user': ({ ariaLabel, color, size }) => (_jsxs("svg", { viewBox: "0 0 19 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: 'svg-inline--fa ' + (size ? `fa-${size}` : ''), "aria-label": ariaLabel, children: [_jsx("path", { d: "M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z", fill: getColor(color) }), _jsx("path", { d: "M9.18043 7.97631C8.0165 7.97631 7.08207 7.01268 7.08207 5.81237C7.08207 4.62897 8.0165 3.64844 9.18043 3.64844C10.328 3.64844 11.2788 4.62897 11.2788 5.81237C11.2788 7.01268 10.328 7.97631 9.18043 7.97631ZM10.6394 8.51729C11.8526 8.51729 12.8526 9.54854 12.8526 10.7996V11.4927C12.8526 11.9492 12.4919 12.3042 12.0657 12.3042H6.29519C5.85256 12.3042 5.5083 11.9492 5.5083 11.4927V10.7996C5.5083 9.54854 6.49191 8.51729 7.70502 8.51729H7.98371C8.34437 8.70325 8.7542 8.78778 9.18043 8.78778C9.60666 8.78778 10.0001 8.70325 10.3608 8.51729H10.6394Z", fill: getColor(color) })] })),
-    'Remote-group': ({ ariaLabel, color, size }) => (_jsxs("svg", { viewBox: "0 0 19 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: 'svg-inline--fa ' + (size ? `fa-${size}` : ''), "aria-label": ariaLabel, children: [_jsx("path", { d: "M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z", fill: getColor(color) }), _jsx("path", { d: "M4.8 7.85714C4.125 7.85714 3.6 7.29464 3.6 6.57143C3.6 5.8683 4.125 5.28571 4.8 5.28571C5.45625 5.28571 6 5.8683 6 6.57143C6 7.29464 5.45625 7.85714 4.8 7.85714ZM13.2 7.85714C12.525 7.85714 12 7.29464 12 6.57143C12 5.8683 12.525 5.28571 13.2 5.28571C13.8563 5.28571 14.4 5.8683 14.4 6.57143C14.4 7.29464 13.8563 7.85714 13.2 7.85714ZM13.8 8.5C14.4563 8.5 15 9.08259 15 9.78571V10.4286C15 10.7902 14.7188 11.0714 14.4 11.0714H13.1625C13.0313 10.1272 12.5063 9.32366 11.7375 8.8817C11.9625 8.66071 12.2625 8.5 12.6 8.5H13.8ZM9 8.5C7.8375 8.5 6.9 7.49554 6.9 6.25C6.9 5.02455 7.8375 4 9 4C10.1438 4 11.1 5.02455 11.1 6.25C11.1 7.49554 10.1438 8.5 9 8.5ZM10.425 9.14286C11.625 9.14286 12.6 10.1875 12.6 11.4732V12.0357C12.6 12.5781 12.1875 13 11.7 13H6.3C5.79375 13 5.4 12.5781 5.4 12.0357V11.4732C5.4 10.1875 6.35625 9.14286 7.55625 9.14286H7.70625C8.1 9.34375 8.53125 9.46429 9 9.46429C9.45 9.46429 9.88125 9.34375 10.275 9.14286H10.425ZM6.24375 8.8817C5.475 9.32366 4.95 10.1272 4.81875 11.0714H3.6C3.2625 11.0714 3 10.7902 3 10.4286V9.78571C3 9.08259 3.525 8.5 4.2 8.5H5.4C5.71875 8.5 6.01875 8.66071 6.24375 8.8817Z", fill: getColor(color) })] })),
+    'Remote-user': ({ ariaLabel, color, size }) => (_jsx(RemoteUser, { ariaLabel: ariaLabel, color: color, size: size })),
+    'Remote-group': ({ ariaLabel, color, size }) => (_jsx(RemoteGroup, { ariaLabel: ariaLabel, color: color, size: size })),
 };
 const IconStyled = styled(FontAwesomeIcon) `
   ${(props) => {
@@ -193,7 +188,7 @@ export const IconWrapper = styled.div `
   align-items: center;
   border-radius: 100%;
 `;
-function NonWrappedIcon({ name, size = '1x', color = undefined, ariaLabel = '', ...rest }) {
+function NonWrappedIcon({ name, size = '1x', color = undefined, ariaLabel = '', title, ...rest }) {
     const iconInfo = iconTable[name] || customIcons[name];
     if (!iconInfo)
         throw new Error(`${name}: is not a valid icon.`);
@@ -222,7 +217,7 @@ function NonWrappedIcon({ name, size = '1x', color = undefined, ariaLabel = '',
             }
         },
     });
-    return (_jsxs(_Fragment, { children: [(status === 'loading' || status === 'error') && (_jsx(DelayedFallback, { "aria-label": `${name} ${ariaLabel}`, children: _jsx(Loader, { size: "base" }) })), status === 'success' && (_jsx(data.default, { name: name, color: color, size: size, ariaLabel: ariaLabel, ...rest }))] }));
+    return (_jsxs(_Fragment, { children: [(status === 'loading' || status === 'error') && (_jsx(DelayedFallback, { "aria-label": `${name} ${ariaLabel}`, children: _jsx(Loader, { size: "base" }) })), status === 'success' && (_jsx(data.default, { name: name, color: color, size: size, ariaLabel: ariaLabel, title: title, ...rest }))] }));
 }
 function Icon({ withWrapper, ...props }) {
     if (withWrapper) {

package/dist/components/{IconHelper.d.ts → iconhelper/IconHelper.d.ts}

@@ -1,10 +1,11 @@
 import { CSSProperties, ReactNode } from 'react';
-import { Position } from './tooltip/Tooltip.component';
+import { Position } from '../tooltip/Tooltip.component';
 type IconHelpProps = {
     tooltipMessage: ReactNode;
     placement?: Position;
     overlayStyle?: CSSProperties;
+    title?: string;
 };
-export declare const IconHelp: ({ tooltipMessage, overlayStyle, placement, }: IconHelpProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconHelp: ({ tooltipMessage, overlayStyle, placement, title, }: IconHelpProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=IconHelper.d.ts.map

package/dist/components/iconhelper/IconHelper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconHelper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/iconhelper/IconHelper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAW,MAAM,8BAA8B,CAAC;AAEjE,KAAK,aAAa,GAAG;IACnB,cAAc,EAAE,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,QAAQ,wDAKlB,aAAa,4CAQf,CAAC"}

package/dist/components/iconhelper/IconHelper.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '../icon/Icon.component';
+import { Tooltip } from '../tooltip/Tooltip.component';
+export const IconHelp = ({ tooltipMessage, overlayStyle, placement = 'right', title, }) => (_jsx(Tooltip, { overlay: tooltipMessage, placement: placement, overlayStyle: overlayStyle, children: _jsx(Icon, { name: "Info", color: "buttonSecondary", title: title }) }));

package/dist/components/navbar/Navbar.component.js

@@ -19,8 +19,8 @@ const NavbarContainer = styled.div `
     .sc-trigger-text {
       color: ${getThemePropSelector('textPrimary')};
     }
-    border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel3};
     box-sizing: border-box;
+    border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel2};
   `};
 `;
 const NavbarMenu = styled.div `
@@ -104,7 +104,7 @@ const NavbarMenuItem = styled.div `
       &:hover {
         background-color: ${getThemePropSelector('highlight')};
       }
-      height: ${navbarHeight};
+      height: auto;
       font-size: ${fontSize.base};
     }
     .menu-item {

package/dist/components/statusicon/StatusIcon.component.d.ts

@@ -0,0 +1,11 @@
+export declare enum Status {
+    HEALTHY = "healthy",
+    WARNING = "warning",
+    CRITICAL = "critical",
+    UNKNOWN = "unknown",
+    LOADING = "loading"
+}
+export declare const StatusIcon: ({ status }: {
+    status: Status;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StatusIcon.component.d.ts.map

package/dist/components/statusicon/StatusIcon.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIcon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/statusicon/StatusIcon.component.tsx"],"names":[],"mappings":"AASA,oBAAY,MAAM;IAChB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAED,eAAO,MAAM,UAAU,eAAgB;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,4CAqCxD,CAAC"}

package/dist/components/statusicon/StatusIcon.component.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '../icon/Icon.component';
+import { STATUS_WARNING, STATUS_CRITICAL, STATUS_HEALTHY, } from '../../components/constants';
+import { Loader } from '../loader/Loader.component';
+export var Status;
+(function (Status) {
+    Status["HEALTHY"] = "healthy";
+    Status["WARNING"] = "warning";
+    Status["CRITICAL"] = "critical";
+    Status["UNKNOWN"] = "unknown";
+    Status["LOADING"] = "loading";
+})(Status || (Status = {}));
+export const StatusIcon = ({ status }) => {
+    if (status === 'loading') {
+        return _jsx(Loader, {});
+    }
+    const icon = (() => {
+        switch (status) {
+            case STATUS_HEALTHY:
+                return {
+                    color: 'statusHealthy',
+                    name: 'Check-circle',
+                    label: 'Healthy status icon',
+                };
+            case STATUS_WARNING:
+                return {
+                    color: 'statusWarning',
+                    name: 'Times-circle',
+                    label: 'Warning status icon',
+                };
+            case STATUS_CRITICAL:
+                return {
+                    color: 'statusCritical',
+                    name: 'Times-circle',
+                    label: 'Critical status icon',
+                };
+            default:
+                return {
+                    color: 'textTertiary',
+                    name: 'Info',
+                    label: 'Information status icon',
+                };
+        }
+    })();
+    return _jsx(Icon, { color: icon.color, name: icon.name, "aria-label": icon.label });
+};

package/dist/components/tablev2/TableUtils.d.ts

@@ -1,7 +1,8 @@
-declare const STATUS_CRITICAL = "critical";
-declare const STATUS_WARNING = "warning";
-declare const STATUS_NONE = "none";
-declare const STATUS_HEALTH = "healthy";
+export declare const STATUS_CRITICAL = "critical";
+export declare const STATUS_WARNING = "warning";
+export declare const STATUS_NONE = "none";
+export declare const STATUS_HEALTH = "healthy";
+export declare const STATUS_UNKNOWN = "unknown";
 type StatusType = typeof STATUS_CRITICAL | typeof STATUS_WARNING | typeof STATUS_NONE | typeof STATUS_HEALTH;
 export declare function compareHealth(status1: StatusType, status2: StatusType): number | undefined;
 export declare function convertRemToPixels(rem: any): number;

package/dist/components/tablev2/TableUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableUtils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/TableUtils.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,eAAe,aAAa,CAAC;AACnC,QAAA,MAAM,cAAc,YAAY,CAAC;AACjC,QAAA,MAAM,WAAW,SAAS,CAAC;AAC3B,QAAA,MAAM,aAAa,YAAY,CAAC;AAEhC,KAAK,UAAU,GACX,OAAO,eAAe,GACtB,OAAO,cAAc,GACrB,OAAO,WAAW,GAClB,OAAO,aAAa,CAAC;AAGzB,wBAAgB,aAAa,CAC3B,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,UAAU,GAClB,MAAM,GAAG,SAAS,CAuBpB;AAED,wBAAgB,kBAAkB,CAAC,GAAG,KAAA,UAErC;AACD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAE/D,MAAM,MAAM,gBAAgB,GACxB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,CAAC;AAGvB,eAAO,MAAM,cAAc;;;;;CAK1B,CAAC;AAEF,KAAK,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC;AAEnE,eAAO,MAAM,kBAAkB,SACvB,iBAAiB,eACV;IACX,EAAE,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,EAAE,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3C,WACQ,cAAc,WA2BxB,CAAC"}
+{"version":3,"file":"TableUtils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/TableUtils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,aAAa,CAAC;AAC1C,eAAO,MAAM,cAAc,YAAY,CAAC;AACxC,eAAO,MAAM,WAAW,SAAS,CAAC;AAClC,eAAO,MAAM,aAAa,YAAY,CAAC;AACvC,eAAO,MAAM,cAAc,YAAY,CAAC;AAExC,KAAK,UAAU,GACX,OAAO,eAAe,GACtB,OAAO,cAAc,GACrB,OAAO,WAAW,GAClB,OAAO,aAAa,CAAC;AAGzB,wBAAgB,aAAa,CAC3B,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,UAAU,GAClB,MAAM,GAAG,SAAS,CAuBpB;AAED,wBAAgB,kBAAkB,CAAC,GAAG,KAAA,UAErC;AACD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAE/D,MAAM,MAAM,gBAAgB,GACxB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,CAAC;AAGvB,eAAO,MAAM,cAAc;;;;;CAK1B,CAAC;AAEF,KAAK,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC;AAEnE,eAAO,MAAM,kBAAkB,SACvB,iBAAiB,eACV;IACX,EAAE,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,EAAE,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3C,WACQ,cAAc,WA2BxB,CAAC"}

package/dist/components/tablev2/TableUtils.js

@@ -1,7 +1,8 @@
-const STATUS_CRITICAL = 'critical';
-const STATUS_WARNING = 'warning';
-const STATUS_NONE = 'none';
-const STATUS_HEALTH = 'healthy';
+export const STATUS_CRITICAL = 'critical';
+export const STATUS_WARNING = 'warning';
+export const STATUS_NONE = 'none';
+export const STATUS_HEALTH = 'healthy';
+export const STATUS_UNKNOWN = 'unknown';
 // some common customized sortTypes
 export function compareHealth(status1, status2) {
     if (![STATUS_WARNING, STATUS_CRITICAL, STATUS_NONE, STATUS_HEALTH].includes(status1) ||

package/dist/index.d.ts

@@ -51,7 +51,7 @@ export { Stack, Wrap, spacing } from './spacing';
 export { Form, FormSection, FormGroup } from './components/form/Form.component';
 export { FormattedDateTime } from './components/date/FormattedDateTime';
 export { getDateDaysDiff } from './components/date/dateDiffer';
-export { IconHelp } from './components/IconHelper';
+export { IconHelp } from './components/iconhelper/IconHelper';
 export { Dropzone } from './components/dropzone/Dropzone';
 export { Toast } from './components/toast/Toast.component';
 export { ToastProvider, useToast } from './components/toast/ToastProvider';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -51,7 +51,7 @@ export { Stack, Wrap, spacing } from './spacing';
 export { Form, FormSection, FormGroup } from './components/form/Form.component';
 export { FormattedDateTime } from './components/date/FormattedDateTime';
 export { getDateDaysDiff } from './components/date/dateDiffer';
-export { IconHelp } from './components/IconHelper';
+export { IconHelp } from './components/iconhelper/IconHelper';
 export { Dropzone } from './components/dropzone/Dropzone';
 export { Toast } from './components/toast/Toast.component';
 export { ToastProvider, useToast } from './components/toast/ToastProvider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.151.0",
+  "version": "0.153.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -98,6 +98,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.3",
+    "@floating-ui/react": "^0.26.28",
     "@fortawesome/fontawesome-free": "^5.10.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-regular-svg-icons": "^5.15.3",

package/src/lib/components/dropdown/Dropdown.component.tsx

@@ -1,7 +1,5 @@
 // @ts-nocheck
-import { useState, useCallback } from 'react';
-import styled, { css } from 'styled-components';
-
+import styled from 'styled-components';
 import {
   ButtonStyled,
   ButtonIcon,
@@ -14,6 +12,9 @@ import { getThemePropSelector } from '../../utils';
 import { Icon } from '../icon/Icon.component';
 import { useSelect } from 'downshift';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
+import { flip, offset, Placement, shift } from '@floating-ui/dom';
+import { useFloating, useInteractions, autoUpdate } from '@floating-ui/react';
+
 export type Item = {
   label: string;
   name?: string;
@@ -29,6 +30,7 @@ type Props = {
   items: Items;
   icon?: JSX.Element;
   caret?: boolean;
+  placement?: Placement;
 };
 const DropdownStyled = styled.div`
   position: relative;
@@ -39,6 +41,7 @@ const DropdownStyled = styled.div`
     border-radius: 0;
   }
 `;
+
 const DropdownMenuStyled = styled.ul`
   position: absolute;
   margin: 0;
@@ -49,9 +52,9 @@ const DropdownMenuStyled = styled.ul`
   max-height: 200px;
   min-width: 100%;
   overflow: auto;
-  border-bottom: 0.3px solid ${getThemePropSelector('border')};
   display: ${(props) => (props.isOpen ? 'auto' : 'none')};
 `;
+
 const DropdownMenuItemStyled = styled.li`
   display: flex;
   align-items: center;
@@ -97,6 +100,7 @@ function Dropdown({
   variant = 'buttonSecondary',
   title,
   caret = true,
+  placement = 'bottom',
   ...rest
 }: Props) {
   const {
@@ -109,12 +113,21 @@ function Dropdown({
     items,
     itemToString: (item) => item?.label || '',
   });
+
+  const { refs, floatingStyles } = useFloating({
+    middleware: [offset(10), flip(), shift()],
+    placement: placement,
+    whileElementsMounted: autoUpdate,
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions();
+
   return (
     <DropdownStyled
-      active={open}
       variant={variant}
       className="sc-dropdown"
       {...rest}
+      ref={refs.setReference}
     >
       <TriggerStyled
         variant={variant}
@@ -122,6 +135,7 @@ function Dropdown({
         className="trigger"
         title={title}
         {...getToggleButtonProps()}
+        {...getReferenceProps()}
       >
         {icon && (
           <ButtonIcon text={text} size={size}>
@@ -134,32 +148,33 @@ function Dropdown({
             <Icon name="Dropdown-down" />
           </Caret>
         )}
-
-        <DropdownMenuStyled
-          className="menu-item"
-          isOpen={isOpen}
-          {...getMenuProps()}
-        >
-          {items.map((item, index) => {
-            return (
-              <DropdownMenuItemStyled
-                className="menu-item-label"
-                key={item.label}
-                variant={item.variant}
-                {...item}
-                {...getItemProps({
-                  item,
-                  index,
-                  onClick: item.onClick,
-                })}
-                isSelected={index === highlightedIndex}
-              >
-                {item.label}
-              </DropdownMenuItemStyled>
-            );
-          })}
-        </DropdownMenuStyled>
       </TriggerStyled>
+      <DropdownMenuStyled
+        className="menu-item"
+        isOpen={isOpen}
+        style={floatingStyles}
+        {...getFloatingProps()}
+        {...getMenuProps({ ref: refs.setFloating })}
+      >
+        {items.map((item, index) => {
+          return (
+            <DropdownMenuItemStyled
+              className="menu-item-label"
+              key={item.label}
+              variant={item.variant}
+              {...item}
+              {...getItemProps({
+                item,
+                index,
+                onClick: item.onClick,
+              })}
+              isSelected={index === highlightedIndex}
+            >
+              {item.label}
+            </DropdownMenuItemStyled>
+          );
+        })}
+      </DropdownMenuStyled>
     </DropdownStyled>
   );
 }

package/src/lib/components/form/Form.component.tsx

@@ -16,7 +16,7 @@ import { spacing, Stack, Wrap } from '../../spacing';
 import { convertRemToPixels } from '../../utils';
 import { Box } from '../box/Box';
 import { Icon, IconName } from '../icon/Icon.component';
-import { IconHelp } from '../IconHelper';
+import { IconHelp } from '../iconhelper/IconHelper';
 import { ScrollbarWrapper } from '../scrollbarwrapper/ScrollbarWrapper.component';
 import { Text } from '../text/Text.component';
 

package/src/lib/components/icon/CustomsIcons.tsx

@@ -0,0 +1,52 @@
+import { useTheme } from 'styled-components';
+
+export const useGetColor = (color: string | undefined): string => {
+  const theme = useTheme();
+  if (!color) return 'currentColor';
+
+  return theme[color] || color;
+};
+
+export const RemoteUser = ({ ariaLabel, color, size }) => {
+  const getColor = useGetColor(color);
+  return (
+    <svg
+      viewBox="0 0 19 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={'svg-inline--fa ' + (size ? `fa-${size}` : '')}
+      aria-label={ariaLabel}
+    >
+      <path
+        d="M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z"
+        fill={getColor}
+      />
+      <path
+        d="M9.18043 7.97631C8.0165 7.97631 7.08207 7.01268 7.08207 5.81237C7.08207 4.62897 8.0165 3.64844 9.18043 3.64844C10.328 3.64844 11.2788 4.62897 11.2788 5.81237C11.2788 7.01268 10.328 7.97631 9.18043 7.97631ZM10.6394 8.51729C11.8526 8.51729 12.8526 9.54854 12.8526 10.7996V11.4927C12.8526 11.9492 12.4919 12.3042 12.0657 12.3042H6.29519C5.85256 12.3042 5.5083 11.9492 5.5083 11.4927V10.7996C5.5083 9.54854 6.49191 8.51729 7.70502 8.51729H7.98371C8.34437 8.70325 8.7542 8.78778 9.18043 8.78778C9.60666 8.78778 10.0001 8.70325 10.3608 8.51729H10.6394Z"
+        fill={getColor}
+      />
+    </svg>
+  );
+};
+
+export const RemoteGroup = ({ ariaLabel, color, size }) => {
+  const getColor = useGetColor(color);
+  return (
+    <svg
+      viewBox="0 0 19 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={'svg-inline--fa ' + (size ? `fa-${size}` : '')}
+      aria-label={ariaLabel}
+    >
+      <path
+        d="M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z"
+        fill={getColor}
+      />
+      <path
+        d="M4.8 7.85714C4.125 7.85714 3.6 7.29464 3.6 6.57143C3.6 5.8683 4.125 5.28571 4.8 5.28571C5.45625 5.28571 6 5.8683 6 6.57143C6 7.29464 5.45625 7.85714 4.8 7.85714ZM13.2 7.85714C12.525 7.85714 12 7.29464 12 6.57143C12 5.8683 12.525 5.28571 13.2 5.28571C13.8563 5.28571 14.4 5.8683 14.4 6.57143C14.4 7.29464 13.8563 7.85714 13.2 7.85714ZM13.8 8.5C14.4563 8.5 15 9.08259 15 9.78571V10.4286C15 10.7902 14.7188 11.0714 14.4 11.0714H13.1625C13.0313 10.1272 12.5063 9.32366 11.7375 8.8817C11.9625 8.66071 12.2625 8.5 12.6 8.5H13.8ZM9 8.5C7.8375 8.5 6.9 7.49554 6.9 6.25C6.9 5.02455 7.8375 4 9 4C10.1438 4 11.1 5.02455 11.1 6.25C11.1 7.49554 10.1438 8.5 9 8.5ZM10.425 9.14286C11.625 9.14286 12.6 10.1875 12.6 11.4732V12.0357C12.6 12.5781 12.1875 13 11.7 13H6.3C5.79375 13 5.4 12.5781 5.4 12.0357V11.4732C5.4 10.1875 6.35625 9.14286 7.55625 9.14286H7.70625C8.1 9.34375 8.53125 9.46429 9 9.46429C9.45 9.46429 9.88125 9.34375 10.275 9.14286H10.425ZM6.24375 8.8817C5.475 9.32366 4.95 10.1272 4.81875 11.0714H3.6C3.2625 11.0714 3 10.7902 3 10.4286V9.78571C3 9.08259 3.525 8.5 4.2 8.5H5.4C5.71875 8.5 6.01875 8.66071 6.24375 8.8817Z"
+        fill={getColor}
+      />
+    </svg>
+  );
+};

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

@@ -1,17 +1,17 @@
-import React, {
+import { SizeProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
   CSSProperties,
   HTMLProps,
   PropsWithChildren,
   useEffect,
   useState,
 } from 'react';
-import styled, { css, useTheme } from 'styled-components';
+import { useQuery } from 'react-query';
+import styled, { css } from 'styled-components';
 import { CoreUITheme } from '../../style/theme';
-
 import { Loader } from '../loader/Loader.component';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { SizeProp } from '@fortawesome/fontawesome-svg-core';
-import { useQuery } from 'react-query';
+import { RemoteGroup, RemoteUser } from './CustomsIcons';
 
 export const iconTable = {
   Account: 'fas faWallet',
@@ -139,49 +139,12 @@ export const iconTable = {
   Play: 'fas faPlay',
 };
 
-const getColor = (color: string | undefined): string => {
-  const theme = useTheme();
-  if (!color) return 'currentColor';
-
-  return theme[color] || color;
-};
-
 export const customIcons = {
   'Remote-user': ({ ariaLabel, color, size }) => (
-    <svg
-      viewBox="0 0 19 17"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={'svg-inline--fa ' + (size ? `fa-${size}` : '')}
-      aria-label={ariaLabel}
-    >
-      <path
-        d="M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z"
-        fill={getColor(color)}
-      />
-      <path
-        d="M9.18043 7.97631C8.0165 7.97631 7.08207 7.01268 7.08207 5.81237C7.08207 4.62897 8.0165 3.64844 9.18043 3.64844C10.328 3.64844 11.2788 4.62897 11.2788 5.81237C11.2788 7.01268 10.328 7.97631 9.18043 7.97631ZM10.6394 8.51729C11.8526 8.51729 12.8526 9.54854 12.8526 10.7996V11.4927C12.8526 11.9492 12.4919 12.3042 12.0657 12.3042H6.29519C5.85256 12.3042 5.5083 11.9492 5.5083 11.4927V10.7996C5.5083 9.54854 6.49191 8.51729 7.70502 8.51729H7.98371C8.34437 8.70325 8.7542 8.78778 9.18043 8.78778C9.60666 8.78778 10.0001 8.70325 10.3608 8.51729H10.6394Z"
-        fill={getColor(color)}
-      />
-    </svg>
+    <RemoteUser ariaLabel={ariaLabel} color={color} size={size} />
   ),
   'Remote-group': ({ ariaLabel, color, size }) => (
-    <svg
-      viewBox="0 0 19 17"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={'svg-inline--fa ' + (size ? `fa-${size}` : '')}
-      aria-label={ariaLabel}
-    >
-      <path
-        d="M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z"
-        fill={getColor(color)}
-      />
-      <path
-        d="M4.8 7.85714C4.125 7.85714 3.6 7.29464 3.6 6.57143C3.6 5.8683 4.125 5.28571 4.8 5.28571C5.45625 5.28571 6 5.8683 6 6.57143C6 7.29464 5.45625 7.85714 4.8 7.85714ZM13.2 7.85714C12.525 7.85714 12 7.29464 12 6.57143C12 5.8683 12.525 5.28571 13.2 5.28571C13.8563 5.28571 14.4 5.8683 14.4 6.57143C14.4 7.29464 13.8563 7.85714 13.2 7.85714ZM13.8 8.5C14.4563 8.5 15 9.08259 15 9.78571V10.4286C15 10.7902 14.7188 11.0714 14.4 11.0714H13.1625C13.0313 10.1272 12.5063 9.32366 11.7375 8.8817C11.9625 8.66071 12.2625 8.5 12.6 8.5H13.8ZM9 8.5C7.8375 8.5 6.9 7.49554 6.9 6.25C6.9 5.02455 7.8375 4 9 4C10.1438 4 11.1 5.02455 11.1 6.25C11.1 7.49554 10.1438 8.5 9 8.5ZM10.425 9.14286C11.625 9.14286 12.6 10.1875 12.6 11.4732V12.0357C12.6 12.5781 12.1875 13 11.7 13H6.3C5.79375 13 5.4 12.5781 5.4 12.0357V11.4732C5.4 10.1875 6.35625 9.14286 7.55625 9.14286H7.70625C8.1 9.34375 8.53125 9.46429 9 9.46429C9.45 9.46429 9.88125 9.34375 10.275 9.14286H10.425ZM6.24375 8.8817C5.475 9.32366 4.95 10.1272 4.81875 11.0714H3.6C3.2625 11.0714 3 10.7902 3 10.4286V9.78571C3 9.08259 3.525 8.5 4.2 8.5H5.4C5.71875 8.5 6.01875 8.66071 6.24375 8.8817Z"
-        fill={getColor(color)}
-      />
-    </svg>
+    <RemoteGroup ariaLabel={ariaLabel} color={color} size={size} />
   ),
 };
 
@@ -206,6 +169,7 @@ type Props = {
   withWrapper?: boolean;
   style?: CSSProperties;
   onClick?: (event: MouseEvent) => void;
+  title?: string;
 };
 
 const DelayedFallback = ({
@@ -236,16 +200,16 @@ export const IconWrapper = styled.div<{ size: SizeProp }>`
         height: 2.5rem;
       `
         : props.size === 'sm'
-        ? `
+          ? `
         width: 1.75rem;
         height: 1.75rem;
       `
-        : props.size === 'xs'
-        ? `
+          : props.size === 'xs'
+            ? `
         width: 1.5rem;
         height: 1.5rem;
       `
-        : `
+            : `
         width: ${parseInt(props.size.replace('x', '')) * 2}rem;
         height: ${parseInt(props.size.replace('x', '')) * 2}rem;
       `}
@@ -263,6 +227,7 @@ function NonWrappedIcon({
   size = '1x',
   color = undefined,
   ariaLabel = '',
+  title,
   ...rest
 }: Omit<Props, 'withWrapper'>) {
   const iconInfo = iconTable[name] || customIcons[name];
@@ -320,6 +285,7 @@ function NonWrappedIcon({
           color={color}
           size={size}
           ariaLabel={ariaLabel}
+          title={title}
           {...rest}
         />
       )}

package/src/lib/components/iconhelper/IconHelper.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { getWrapper } from '../../testUtils';
+
+import userEvent from '@testing-library/user-event';
+import { IconHelp } from './IconHelper';
+
+describe('IconHelper', () => {
+  const selectors = {
+    icon: () => screen.getByRole('img'),
+  };
+  const renderIcon = (tooltipMessage: React.ReactNode) => {
+    const { Wrapper } = getWrapper();
+    render(
+      <Wrapper>
+        <IconHelp tooltipMessage={tooltipMessage} title="Info" />
+      </Wrapper>,
+    );
+  };
+  it('should render correctly', async () => {
+    renderIcon('This is a tooltip');
+    await waitFor(() => {
+      expect(selectors.icon()).toBeInTheDocument();
+    });
+  });
+  it('should display tooltip on hover', async () => {
+    const tooltipMessage = 'This is another tooltip';
+    renderIcon(tooltipMessage);
+
+    await waitFor(() => {
+      expect(selectors.icon()).toBeInTheDocument();
+    });
+    userEvent.hover(selectors.icon());
+    await waitFor(() => {
+      expect(screen.getByText(tooltipMessage)).toBeVisible();
+    });
+  });
+  it('should be able to change accessible label with title', async () => {
+    const { Wrapper } = getWrapper();
+    render(
+      <Wrapper>
+        <IconHelp
+          tooltipMessage={'This is a tooltip'}
+          title="Info Helper Testing"
+        />
+      </Wrapper>,
+    );
+    await waitFor(() => {
+      expect(screen.getByLabelText('Info Helper Testing')).toBeInTheDocument();
+    });
+  });
+});

package/src/lib/components/{IconHelper.tsx → iconhelper/IconHelper.tsx}

@@ -1,23 +1,25 @@
 import { CSSProperties, ReactNode } from 'react';
-import { Icon } from './icon/Icon.component';
-import { Position, Tooltip } from './tooltip/Tooltip.component';
+import { Icon } from '../icon/Icon.component';
+import { Position, Tooltip } from '../tooltip/Tooltip.component';
 
 type IconHelpProps = {
   tooltipMessage: ReactNode;
   placement?: Position;
   overlayStyle?: CSSProperties;
+  title?: string;
 };
 
 export const IconHelp = ({
   tooltipMessage,
   overlayStyle,
   placement = 'right',
+  title,
 }: IconHelpProps) => (
   <Tooltip
     overlay={tooltipMessage}
     placement={placement}
     overlayStyle={overlayStyle}
   >
-    <Icon name="Info" color="buttonSecondary" />
+    <Icon name="Info" color="buttonSecondary" title={title} />
   </Tooltip>
 );

package/src/lib/components/navbar/Navbar.component.tsx

@@ -36,8 +36,8 @@ const NavbarContainer = styled.div`
     .sc-trigger-text {
       color: ${getThemePropSelector('textPrimary')};
     }
-    border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel3};
     box-sizing: border-box;
+    border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel2};
   `};
 `;
 const NavbarMenu = styled.div`
@@ -122,7 +122,7 @@ const NavbarMenuItem = styled.div`
       &:hover {
         background-color: ${getThemePropSelector('highlight')};
       }
-      height: ${navbarHeight};
+      height: auto;
       font-size: ${fontSize.base};
     }
     .menu-item {

package/src/lib/components/statusicon/StatusIcon.component.tsx

@@ -0,0 +1,55 @@
+import { Icon, IconName } from '../icon/Icon.component';
+import {
+  STATUS_WARNING,
+  STATUS_CRITICAL,
+  STATUS_HEALTHY,
+} from '../../components/constants';
+import { CoreUITheme } from '../../style/theme';
+import { Loader } from '../loader/Loader.component';
+
+export enum Status {
+  HEALTHY = 'healthy',
+  WARNING = 'warning',
+  CRITICAL = 'critical',
+  UNKNOWN = 'unknown',
+  LOADING = 'loading',
+}
+
+export const StatusIcon = ({ status }: { status: Status }) => {
+  if (status === 'loading') {
+    return <Loader />;
+  }
+  const icon: { color: keyof CoreUITheme; name: IconName; label: string } =
+    (() => {
+      switch (status) {
+        case STATUS_HEALTHY:
+          return {
+            color: 'statusHealthy',
+            name: 'Check-circle',
+            label: 'Healthy status icon',
+          };
+
+        case STATUS_WARNING:
+          return {
+            color: 'statusWarning',
+            name: 'Times-circle',
+            label: 'Warning status icon',
+          };
+
+        case STATUS_CRITICAL:
+          return {
+            color: 'statusCritical',
+            name: 'Times-circle',
+            label: 'Critical status icon',
+          };
+        default:
+          return {
+            color: 'textTertiary',
+            name: 'Info',
+            label: 'Information status icon',
+          };
+      }
+    })();
+
+  return <Icon color={icon.color} name={icon.name} aria-label={icon.label} />;
+};

package/src/lib/components/tablev2/TableUtils.ts

@@ -1,7 +1,8 @@
-const STATUS_CRITICAL = 'critical';
-const STATUS_WARNING = 'warning';
-const STATUS_NONE = 'none';
-const STATUS_HEALTH = 'healthy';
+export const STATUS_CRITICAL = 'critical';
+export const STATUS_WARNING = 'warning';
+export const STATUS_NONE = 'none';
+export const STATUS_HEALTH = 'healthy';
+export const STATUS_UNKNOWN = 'unknown';
 
 type StatusType =
   | typeof STATUS_CRITICAL
@@ -34,8 +35,8 @@ export function compareHealth(
   return weights[status1] === weights[status2]
     ? 0
     : weights[status1] > weights[status2]
-    ? 1
-    : -1;
+      ? 1
+      : -1;
 }
 
 export function convertRemToPixels(rem) {

package/src/lib/index.ts

@@ -72,7 +72,7 @@ export { Stack, Wrap, spacing } from './spacing';
 export { Form, FormSection, FormGroup } from './components/form/Form.component';
 export { FormattedDateTime } from './components/date/FormattedDateTime';
 export { getDateDaysDiff } from './components/date/dateDiffer';
-export { IconHelp } from './components/IconHelper';
+export { IconHelp } from './components/iconhelper/IconHelper';
 export { Dropzone } from './components/dropzone/Dropzone';
 export { Toast } from './components/toast/Toast.component';
 export { ToastProvider, useToast } from './components/toast/ToastProvider';

package/stories/modal.stories.tsx

@@ -2,7 +2,7 @@ import { Modal } from '../src/lib/components/modal/Modal.component';
 import { action } from '@storybook/addon-actions';
 import { Wrapper } from './common';
 import { Table } from '../src/lib/components/tablev2/Tablev2.component';
-import { IconHelp } from '../src/lib/components/IconHelper';
+import { IconHelp } from '../src/lib/components/iconhelper/IconHelper';
 import { Stack } from '../src/lib/spacing';
 import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
 import { useArgs } from '@storybook/preview-api';

package/stories/statusicon.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  Status,
+  StatusIcon,
+} from '../src/lib/components/statusicon/StatusIcon.component';
+import { Wrapper } from './common';
+import { Stack, Text } from '../src/lib';
+
+export default {
+  title: 'Components/statusIcon',
+  component: StatusIcon,
+};
+
+export const Playground = {
+  args: {
+    status: 'healthy',
+  },
+};
+export const Default = {
+  render: ({}) => {
+    return (
+      <Wrapper>
+        <Stack>
+          <Text>Healthy status </Text>
+          <StatusIcon status={Status.HEALTHY} />{' '}
+        </Stack>
+        <Stack>
+          <Text>Warning status </Text>
+          <StatusIcon status={Status.WARNING} />
+        </Stack>
+        <Stack>
+          <Text>Critical status </Text>
+          <StatusIcon status={Status.CRITICAL} />
+        </Stack>
+        <Stack>
+          <Text>Loading status </Text>
+          <StatusIcon status={Status.LOADING} />
+        </Stack>
+        <Stack>
+          <Text>Unknown status </Text>
+          <StatusIcon status={Status.UNKNOWN} />
+        </Stack>
+      </Wrapper>
+    );
+  },
+};

package/dist/components/IconHelper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconHelper.d.ts","sourceRoot":"","sources":["../../src/lib/components/IconHelper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAW,MAAM,6BAA6B,CAAC;AAEhE,KAAK,aAAa,GAAG;IACnB,cAAc,EAAE,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,QAAQ,iDAIlB,aAAa,4CAQf,CAAC"}

package/dist/components/IconHelper.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon } from './icon/Icon.component';
-import { Tooltip } from './tooltip/Tooltip.component';
-export const IconHelp = ({ tooltipMessage, overlayStyle, placement = 'right', }) => (_jsx(Tooltip, { overlay: tooltipMessage, placement: placement, overlayStyle: overlayStyle, children: _jsx(Icon, { name: "Info", color: "buttonSecondary" }) }));