@scality/core-ui 0.194.0 → 0.195.0

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

@@ -11,140 +11,11 @@ import styled, { css } from 'styled-components';
 import { CoreUITheme } from '../../style/theme';
 import { Loader } from '../loader/Loader.component';
 import { Bucket, Buckets, RemoteGroup, RemoteUser } from './CustomsIcons';
+import { iconTable } from './iconTable';
 
 // Module-level cache for imported icons
 const iconCache: Record<string, any> = {};
 
-export const iconTable = {
-  Account: 'fas faWallet',
-  Backend: 'fas faNetworkWired',
-  Tape: 'fas faTape',
-  'Node-backend': 'fas faServer',
-  'Volume-backend': 'fas faHdd',
-  'Node-pdf': 'fas faDatabase',
-  'Volume-pdf': 'fas faCompactDisc',
-  Network: 'fas faProjectDiagram',
-  'Cloud-backend': 'fas faCloud',
-  Datacenter: 'fas faWarehouse',
-  'Simple-user': 'fas faUser',
-  User: 'fas faUserCog',
-  Group: 'fas faUsers',
-  Alert: 'fas faBell',
-  Bell: 'far faBell',
-  'Lat-menu': 'fas faBars',
-  Dashboard: 'fas faDesktop',
-  Workflow: 'fas faRoute',
-  Expiration: 'fas faStopwatch',
-  Replication: 'fas faCoins',
-  Transition: 'fas faRocket',
-  Discovery: 'fas faReply',
-  Metrics: 'fas faChartLine',
-  Edit: 'fas faEdit',
-  Logs: 'far faFileAlt',
-  Lock: 'fa faLock',
-  'Lock-open': 'fa faLockOpen',
-  'Create-add': 'fas faPlus',
-  Delete: 'fas faTrash',
-  Save: 'fas faSave',
-  'External-link': 'fas faExternalLinkAlt',
-  Link: 'fas faLink',
-  Unlink: 'fas faUnlink',
-  Close: 'fas faTimes',
-  'Dropdown-down': 'fas faCaretDown',
-  'Dropdown-up': 'fas faCaretUp',
-  Search: 'fas faSearch',
-  More: 'fas faEllipsisV',
-  Info: 'fas faQuestionCircle',
-  Sync: 'fas faSync',
-  Export: 'fas faFileExport',
-  Copy: 'far faClone',
-  'Simple-upload': 'fas faUpload',
-  Upload: 'fas faFileUpload',
-  'Add-plus': 'fas faPlusSquare',
-  Minus: 'fas faMinus',
-  'Remove-minus': 'fas faMinusSquare',
-  Sort: 'fas faSort',
-  'Sort-up': 'fas faSortUp',
-  'Sort-down': 'fas faSortDown',
-  Calendar: 'fas faCalendarWeek',
-  'Calendar-minus': 'fas faCalendarMinus',
-  'Arrow-up': 'fas faArrowUp',
-  'Arrow-down': 'fas faArrowDown',
-  'Arrow-right': 'fas faArrowRight',
-  'Arrow-left': 'fas faArrowLeft',
-  'Arrow-alt-circle-up': 'fas faArrowAltCircleUp',
-  Folder: 'far faFolder',
-  File: 'far faFile',
-  'File-invoice': 'fas faFileInvoice',
-  License: 'fas faFileInvoice',
-  'Deletion-marker': 'fas faBan',
-  'Map-marker': 'fas faMapMarkerAlt',
-  Location: 'fas faMapMarkerAlt',
-  'Info-circle': 'fas faInfoCircle',
-  'Exclamation-triangle': 'fas faExclamationTriangle',
-  'Exclamation-circle': 'fas faExclamationCircle',
-  Exclamation: 'fas faExclamation',
-  Check: 'fas faCheck',
-  Protected: 'fas faShieldAlt',
-  'Chevron-left': 'fas faChevronLeft',
-  'Chevron-right': 'fas faChevronRight',
-  'Chevron-down': 'fas faChevronDown',
-  'Chevron-up': 'fas faChevronUp',
-  'Angle-right': 'fas faAngleRight',
-  'Angle-double-right': 'fas faAngleDoubleRight',
-  Language: 'fas faLanguage',
-  Theme: 'fas faPalette',
-  Documentation: 'fas faClipboardList',
-  Support: 'fas faComments',
-  EULA: 'fas faFileContract',
-  'Log-out': 'fas faSignOutAlt',
-  Hourglass: 'far faHourglass',
-  Pause: 'fas faPause',
-  'Pause-circle': 'far faPauseCircle',
-  'Play-circle': 'far faPlayCircle',
-  Upgrade: 'fas faLevelUpAlt',
-  Expansion: 'fas faExpandAlt',
-  Rebalance: 'fas faBalanceScale',
-  Maintenance: 'fas faHardHat',
-  Role: 'fas faHatCowboy',
-  'Change-erasure': 'fas faExchangeAlt',
-  'Circle-health': 'fas faCircle',
-  'Circle-empty': 'far faCircle',
-  'Dot-circle': 'fas faDotCircle',
-  'Check-circle': 'fas faCheckCircle',
-  'Times-circle': 'fas faTimesCircle',
-  Toolbox: 'fas faToolbox',
-  Cubes: 'fas faCubes',
-  Policy: 'fas faFileSignature',
-  Pen: 'fa faPen',
-  Pencil: 'fas faPencilAlt',
-  Eye: 'fas faEye',
-  EyeSlash: 'fas faEyeSlash',
-  Snowflake: 'fas faSnowflake',
-  Key: 'fas faKey',
-  Filter: 'fas faFilter',
-  Download: 'fas faDownload',
-  Certificate: 'fas faCertificate',
-  Redo: 'fas faRedoAlt',
-  Eraser: 'fas faEraser',
-  'ID-card': 'fas faIdCard',
-  Setting: 'fas faCog', //TODO: Rename to Gear in FA v6 <i class="fa-sharp fa-solid fa-gear"></i>
-  Desktop: 'fas faDesktop',
-  Globe: 'fas faGlobe',
-  Satellite: 'fas faSatelliteDish',
-  LightMode: 'fas faSun',
-  DarkMode: 'fas faMoon',
-  News: 'fas faBullhorn',
-  Ring: 'fas faRing',
-  Stop: 'fas faStop',
-  Play: 'fas faPlay',
-  Mail: 'fas faEnvelope',
-  ThumbsUp: 'far faThumbsUp',
-  ThumbsDown: 'far faThumbsDown',
-  Sidebar: 'fas faColumns',
-  Bookopen: 'fas faBookOpen',
-};
-
 type IconProps = {
   'aria-label'?: string;
   color?: string;
@@ -279,10 +150,12 @@ function NonWrappedIcon({
     }
 
     // Handle FontAwesome icons with dynamic import
-    import(`@fortawesome/${fontAwesomeType}/${iconClass}.js`).then((module) => {
-      setIcon(module[iconClass]);
-      iconCache[cacheKey] = module[iconClass];
-    });
+    import(
+      /* webpackExclude: /import\.macro\.js$/ */
+      `@fortawesome/${fontAwesomeType}/${iconClass}.js`).then((module) => {
+        setIcon(module[iconClass]);
+        iconCache[cacheKey] = module[iconClass];
+      });
     return () => setIcon(undefined);
   }, [name, iconInfo]);
 
@@ -319,4 +192,4 @@ function Icon({ withWrapper, ...props }: Props) {
   return <NonWrappedIcon {...props} />;
 }
 
-export { Icon };
+export { Icon, iconTable };

package/src/lib/components/icon/iconTable.ts

@@ -0,0 +1,137 @@
+/**
+ * Maps human-readable icon names to FontAwesome icon info.
+ * Format: 'iconType iconClass' where:
+ * - iconType: 'fas' (solid), 'far' (regular)
+ * - iconClass: the FA v7 icon class name (e.g., 'faWallet')
+ *
+ * Updated to FA v7 naming conventions.
+ */
+export const iconTable = {
+  Account: 'fas faWallet',
+  Backend: 'fas faNetworkWired',
+  Tape: 'fas faTape',
+  'Node-backend': 'fas faServer',
+  'Volume-backend': 'fas faHardDrive',
+  'Node-pdf': 'fas faDatabase',
+  'Volume-pdf': 'fas faCompactDisc',
+  Network: 'fas faDiagramProject',
+  'Cloud-backend': 'fas faCloud',
+  Datacenter: 'fas faWarehouse',
+  'Simple-user': 'fas faUser',
+  User: 'fas faUserGear',
+  Group: 'fas faUsers',
+  Alert: 'fas faBell',
+  Bell: 'far faBell',
+  'Lat-menu': 'fas faBars',
+  Dashboard: 'fas faDesktop',
+  Workflow: 'fas faRoute',
+  Expiration: 'fas faStopwatch',
+  Replication: 'fas faCoins',
+  Transition: 'fas faRocket',
+  Discovery: 'fas faReply',
+  Metrics: 'fas faChartLine',
+  Edit: 'fas faPenToSquare',
+  Logs: 'far faFileLines',
+  Lock: 'fas faLock',
+  'Lock-open': 'fas faLockOpen',
+  'Create-add': 'fas faPlus',
+  Delete: 'fas faTrash',
+  Save: 'fas faFloppyDisk',
+  'External-link': 'fas faArrowUpRightFromSquare',
+  Link: 'fas faLink',
+  Unlink: 'fas faLinkSlash',
+  Close: 'fas faXmark',
+  'Dropdown-down': 'fas faCaretDown',
+  'Dropdown-up': 'fas faCaretUp',
+  Search: 'fas faMagnifyingGlass',
+  More: 'fas faEllipsisVertical',
+  Info: 'fas faCircleQuestion',
+  Sync: 'fas faRotate',
+  Export: 'fas faFileExport',
+  Copy: 'far faClone',
+  'Simple-upload': 'fas faUpload',
+  Upload: 'fas faFileArrowUp',
+  'Add-plus': 'fas faSquarePlus',
+  Minus: 'fas faMinus',
+  'Remove-minus': 'fas faSquareMinus',
+  Sort: 'fas faSort',
+  'Sort-up': 'fas faSortUp',
+  'Sort-down': 'fas faSortDown',
+  Calendar: 'fas faCalendarWeek',
+  'Calendar-minus': 'fas faCalendarMinus',
+  'Arrow-up': 'fas faArrowUp',
+  'Arrow-down': 'fas faArrowDown',
+  'Arrow-right': 'fas faArrowRight',
+  'Arrow-left': 'fas faArrowLeft',
+  'Arrow-alt-circle-up': 'fas faCircleArrowUp',
+  Folder: 'far faFolder',
+  File: 'far faFile',
+  'File-invoice': 'fas faFileInvoice',
+  License: 'fas faFileInvoice',
+  'Deletion-marker': 'fas faBan',
+  'Map-marker': 'fas faLocationDot',
+  Location: 'fas faLocationDot',
+  'Info-circle': 'fas faCircleInfo',
+  'Exclamation-triangle': 'fas faTriangleExclamation',
+  'Exclamation-circle': 'fas faCircleExclamation',
+  Exclamation: 'fas faExclamation',
+  Check: 'fas faCheck',
+  Protected: 'fas faShieldHalved',
+  'Chevron-left': 'fas faChevronLeft',
+  'Chevron-right': 'fas faChevronRight',
+  'Chevron-down': 'fas faChevronDown',
+  'Chevron-up': 'fas faChevronUp',
+  'Angle-right': 'fas faAngleRight',
+  'Angle-double-right': 'fas faAnglesRight',
+  Language: 'fas faLanguage',
+  Theme: 'fas faPalette',
+  Documentation: 'fas faClipboardList',
+  Support: 'fas faComments',
+  EULA: 'fas faFileContract',
+  'Log-out': 'fas faRightFromBracket',
+  Hourglass: 'far faHourglass',
+  Pause: 'fas faPause',
+  'Pause-circle': 'far faCirclePause',
+  'Play-circle': 'far faCirclePlay',
+  Upgrade: 'fas faArrowTurnUp',
+  Expansion: 'fas faUpRightAndDownLeftFromCenter',
+  Rebalance: 'fas faScaleBalanced',
+  Maintenance: 'fas faHelmetSafety',
+  Role: 'fas faHatCowboy',
+  'Change-erasure': 'fas faArrowRightArrowLeft',
+  'Circle-health': 'fas faCircle',
+  'Circle-empty': 'far faCircle',
+  'Dot-circle': 'fas faCircleDot',
+  'Check-circle': 'fas faCircleCheck',
+  'Times-circle': 'fas faCircleXmark',
+  Toolbox: 'fas faToolbox',
+  Cubes: 'fas faCubes',
+  Policy: 'fas faFileSignature',
+  Pen: 'fas faPen',
+  Pencil: 'fas faPencil',
+  Eye: 'fas faEye',
+  EyeSlash: 'fas faEyeSlash',
+  Snowflake: 'fas faSnowflake',
+  Key: 'fas faKey',
+  Filter: 'fas faFilter',
+  Download: 'fas faDownload',
+  Certificate: 'fas faCertificate',
+  Redo: 'fas faRotateRight',
+  Eraser: 'fas faEraser',
+  'ID-card': 'fas faIdCard',
+  Setting: 'fas faGear',
+  Desktop: 'fas faDesktop',
+  Globe: 'fas faGlobe',
+  Satellite: 'fas faSatelliteDish',
+  LightMode: 'fas faSun',
+  DarkMode: 'fas faMoon',
+  News: 'fas faBullhorn',
+  Ring: 'fas faRing',
+  Stop: 'fas faStop',
+  Play: 'fas faPlay',
+  Mail: 'fas faEnvelope',
+  ThumbsUp: 'far faThumbsUp',
+  ThumbsDown: 'far faThumbsDown',
+  Sidebar: 'fas faTableColumns',
+  Bookopen: 'fas faBookOpen',
+};

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

@@ -35,7 +35,7 @@ describe('IconHelper', () => {
       expect(screen.getByText(tooltipMessage)).toBeVisible();
     });
   });
-  it('should be able to change accessible label with title', async () => {
+  it('should render with title prop (passed to FontAwesome as native tooltip)', async () => {
     const { Wrapper } = getWrapper();
     render(
       <Wrapper>
@@ -46,7 +46,7 @@ describe('IconHelper', () => {
       </Wrapper>,
     );
     await waitFor(() => {
-      expect(screen.getByLabelText('Info Helper Testing')).toBeInTheDocument();
+      expect(screen.getByRole('img', { name: /Info/i })).toBeInTheDocument();
     });
   });
 });

package/src/lib/components/inputlist/InputList.component.tsx

@@ -1,7 +1,7 @@
 import { HTMLProps, forwardRef } from 'react';
 import { RefCallBack } from 'react-hook-form';
 import { Box } from '../box/Box';
-import { Input } from '../inputv2/inputv2';
+import { Input, InputSize } from '../inputv2/inputv2';
 import { AddButton, SubButton } from './InputButtons';
 
 export type InputListProps<T> = Omit<HTMLProps<HTMLInputElement>, 'size'> & {
@@ -15,6 +15,7 @@ export type InputListProps<T> = Omit<HTMLProps<HTMLInputElement>, 'size'> & {
   disabled?: boolean;
   maxItems?: number;
   value: T[];
+  size?: InputSize;
 };
 
 function InternalInputList<
@@ -33,6 +34,7 @@ function InternalInputList<
     maxItems,
     value,
     name,
+    size = '1/2',
     ...rest
   }: InputListProps<T>,
   _,
@@ -64,7 +66,7 @@ function InternalInputList<
           <Input
             id={`${name}[${index}]`}
             aria-label={`${name}${index}`}
-            size="1/2"
+            size={size}
             value={val}
             onChange={(evt) => {
               const tempValues = [...value];

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

@@ -81,19 +81,19 @@ const InputBorder = styled.div<{
   height: ${spacing.r32};
   border: ${spacing.r1} solid
     ${(props) =>
-      props.hasError ? props.theme.statusCritical : props.theme.border};
+    props.hasError ? props.theme.statusCritical : props.theme.border};
   border-radius: ${spacing.r4};
   &:hover {
     ${(props) =>
-      !props.disabled &&
-      `border: ${spacing.r1} solid ${props.theme.infoPrimary};`}
+    !props.disabled &&
+    `border: ${spacing.r1} solid ${props.theme.infoPrimary};`}
   }
   &:focus-within {
     border: ${spacing.r1} solid ${(props) => props.theme.infoPrimary};
   }
 `;
 
-const SelfCenterredIcon = styled(Icon)<{ color: keyof CoreUITheme }>`
+const SelfCenterredIcon = styled(Icon) <{ color: keyof CoreUITheme }>`
   align-self: center;
   color: ${(props) => props.theme[props.color]};
 `;
@@ -108,6 +108,7 @@ export type InputProps = {
   rightIcon?: IconName;
   rightIconColor?: keyof CoreUITheme;
   size?: InputSize;
+  noPlaceholderPrefix?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
@@ -122,6 +123,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       rightIconColor = 'textSecondary',
       placeholder,
       size,
+      noPlaceholderPrefix,
       ...inputProps
     },
     ref,
@@ -131,7 +133,11 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       disabled: disabledFromFieldContext,
       error: errorFromFieldContext,
     } = useFieldContext();
-    placeholder = placeholder ? `Example: ${placeholder}` : undefined;
+    placeholder = placeholder
+      ? noPlaceholderPrefix
+        ? placeholder
+        : `Example: ${placeholder}`
+      : undefined;
 
     return (
       <InputBorder

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

@@ -117,6 +117,7 @@ const SearchInput = forwardRef(
           aria-label="search"
           name="search"
           placeholder={placeholder}
+          noPlaceholderPrefix
           value={debouncedValue}
           onChange={handleChange}
           onReset={reset}

package/src/lib/components/searchinput/SearchInput.test.tsx

@@ -15,7 +15,7 @@ describe('SearchInput', () => {
     clearButton: () => screen.queryByRole('button'),
   };
   it('should render the SearchInput component', async () => {
-    render(<SearchInputRender value="" onChange={() => {}} />);
+    render(<SearchInputRender value="" onChange={() => { }} />);
     await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
 
     const searchInput = selectors.searchInput();
@@ -24,15 +24,15 @@ describe('SearchInput', () => {
 
   it('should render the SearchInput component with placeholder', () => {
     render(
-      <SearchInputRender value="" onChange={() => {}} placeholder="Search" />,
+      <SearchInputRender value="" onChange={() => { }} placeholder="Search" />,
     );
 
-    const searchInput = screen.queryByPlaceholderText('Example: Search');
+    const searchInput = screen.queryByPlaceholderText('Search');
     expect(searchInput).toBeInTheDocument();
   });
 
   it('should render the SearchInput component with disabled prop', () => {
-    render(<SearchInputRender value="" onChange={() => {}} disabled />);
+    render(<SearchInputRender value="" onChange={() => { }} disabled />);
 
     const searchInput = selectors.searchInput();
     expect(searchInput).toBeInTheDocument();
@@ -55,7 +55,7 @@ describe('SearchInput', () => {
   });
 
   it('should have a clear button when the input is not empty', () => {
-    render(<SearchInputRender value="" onChange={() => {}} />);
+    render(<SearchInputRender value="" onChange={() => { }} />);
 
     // clear button should not be rendered as value is empty
     let clearButton = selectors.clearButton();
@@ -72,7 +72,7 @@ describe('SearchInput', () => {
   it('should call the onReset function when the clear button is clicked and clear the input value', async () => {
     const onReset = jest.fn();
     render(
-      <SearchInputRender value="test" onChange={() => {}} onReset={onReset} />,
+      <SearchInputRender value="test" onChange={() => { }} onReset={onReset} />,
     );
     const searchInput = selectors.searchInput();
     const clearButton = selectors.clearButton();

package/src/lib/components/text/Text.component.tsx

@@ -16,6 +16,13 @@ type Props = {
   children: React.ReactNode | string;
   status?: Status;
   id?: string;
+} & TextProps;
+type TextProps = {
+  color?: keyof CoreUITheme;
+  variant?: TextVariant;
+  isEmphazed?: boolean;
+  isGentleEmphazed?: boolean;
+  compact?: boolean;
 };
 const BasicTextStyle = styled.span`
   color: ${(props) => props.theme.textPrimary};
@@ -33,7 +40,7 @@ const LargerTextStyle = styled(BasicTextStyle)`
 const EmphaseTextStyle = styled(BasicTextStyle)`
   font-weight: 700;
 `;
-const StatusTextStyle = styled(BasicTextStyle)<{ statusColor: string }>`
+const StatusTextStyle = styled(BasicTextStyle) <{ statusColor: string }>`
   color: ${(props) => props.theme[`${props.statusColor}`]};
 `;
 const LargetStyle = styled(BasicTextStyle)`
@@ -70,7 +77,7 @@ const getStatusColor = (status?: Status) => {
   return statusColor;
 };
 
-export const SmallerEmphaseTextStyle = styled(SmallerTextStyle)<{
+export const SmallerEmphaseTextStyle = styled(SmallerTextStyle) <{
   statusColor: string;
 }>`
   font-weight: 700;
@@ -122,7 +129,7 @@ export function SmallerEmphaseText({ children, status, ...rest }: Props) {
 export function ChartTitleText({ children, ...rest }: Props) {
   return <ChartTitleTextStyle {...rest}>{children}</ChartTitleTextStyle>;
 }
-export const GentleEmphaseSecondaryText = styled(SecondaryText)<{
+export const GentleEmphaseSecondaryText = styled(SecondaryText) <{
   alignRight?: boolean;
 }>`
   font-style: italic;
@@ -135,12 +142,7 @@ export const GentleEmphaseSecondaryText = styled(SecondaryText)<{
       : ''}
 `;
 
-export const Text = styled.span<{
-  variant?: TextVariant;
-  color?: keyof CoreUITheme;
-  isEmphazed?: boolean;
-  isGentleEmphazed?: boolean;
-}>`
+export const Text = styled.span<TextProps>`
   ${(props) => props.color && `color: ${props.theme[props.color]};`}
   ${(props) =>
     props.variant === 'Larger'
@@ -187,8 +189,14 @@ export const Text = styled.span<{
     
   ${(props) =>
     props.variant === 'ChartTitle' && `letter-spacing: ${spacing.r2};`}
-`;
 
+  ${(props) => props.compact && `line-height: 1.2;`}
+`;
+export const HelperText = ({ children, color, ...rest }: Props) => {
+  return (
+    <Text variant="Smaller" isEmphazed compact color={color} {...rest}>{children}</Text>
+  );
+}
 export const Link = styled.a`
   font-size: 1rem;
   line-height: ${spacing.r24};

package/src/lib/index.ts

@@ -11,8 +11,8 @@ export {
   STATUS_INFO,
   STATUS_UNKNOWN,
   STATUS_NONE,
-  Status,
 } from './components/constants';
+export type { Status } from './components/constants';
 export { Layout } from './components/layout/Layout.component';
 export { Loader } from './components/loader/Loader.component';
 export { Modal } from './components/modal/Modal.component';
@@ -78,5 +78,5 @@ export { InfoMessage } from './components/infomessage/InfoMessage.component';
 export { InputList } from './components/inputlist/InputList.component';
 export { InlineInput } from './components/inlineinput/InlineInput';
 export { UnsuccessfulResult } from './components/UnsuccessfulResult.component';
-export { CoreUITheme } from './style/theme';
+export type { CoreUITheme } from './style/theme';
 export { formatISONumber } from './utils';

package/src/lib/next.ts

@@ -21,8 +21,6 @@ export { Accordion } from './components/accordion/Accordion.component';
 // Export all chart components from the consolidated charts folder
 export {
   Barchart,
-  BarchartSortFn,
-  BarchartTooltipFn,
   BarchartTooltip,
   LineTimeSerieChart,
   GlobalHealthBar,
@@ -40,6 +38,8 @@ export {
 export type {
   BarchartProps,
   BarchartBars,
+  BarchartSortFn,
+  BarchartTooltipFn,
   LineChartProps,
   Serie,
   GlobalHealthProps,
@@ -49,4 +49,4 @@ export type {
   CategoryType,
 } from './components/charts';
 
-export { CoreUITheme } from './style/theme';
+export type { CoreUITheme } from './style/theme';

package/src/lib/utils.ts

@@ -25,6 +25,10 @@ export const getThemeVariantSelector = () => (props) => {
   return theme[key];
 };
 
+/** Returns the theme color key for a given variant (e.g. for use with Icon color prop). */
+export const getVariantThemeKey = (variant: string): string =>
+  variantMapping[variant] ?? variant;
+
 export const hex2RGB = (str: string): [number, number, number] => {
   const [, short, long] = String(str).match(RGB_HEX) || [];
 

package/stories/banner.stories.tsx

@@ -9,22 +9,24 @@ export default {
   component: Banner,
   decorators: [(story) => <Wrapper>{story()}</Wrapper>],
   args: {
-    icon: 'Exclamation-circle',
+    withDefaultIcon: true,
   },
   argTypes: {
+    withDefaultIcon: { control: 'boolean' },
     icon: iconArgType,
   },
 };
 
 export const Playground = {
-  render: ({ icon, variant, children, ...args }) => {
+  render: ({ withDefaultIcon, icon, variant, children, ...args }) => {
     return (
       <Banner
-        icon={icon && <Icon name={icon}></Icon>}
+        withDefaultIcon={withDefaultIcon}
+        icon={icon ? <Icon name={icon} /> : undefined}
         variant={variant}
         children={children}
         {...args}
-      ></Banner>
+      />
     );
   },
   args: {
@@ -35,23 +37,38 @@ export const Playground = {
     variant: { control: { disable: false } },
     title: { control: { disable: false } },
     children: { control: { disable: false } },
+    withDefaultIcon: { control: { disable: false } },
     icon: { control: { disable: false } },
   },
 };
 
+/** No icon. */
 export const Default = {
   ...Playground,
   args: {
     children: 'There is an alert',
     variant: 'base',
+    withDefaultIcon: false,
     icon: undefined,
   },
 };
 
+/** Simple default: withDefaultIcon + variant. Info-circle for base, Exclamation-circle otherwise. */
+export const WithIcon = {
+  args: {
+    withDefaultIcon: true,
+    variant: 'base',
+    title: 'Info',
+    children: 'Use withDefaultIcon for the default icon (Info-circle on base, Exclamation-circle on warning/danger/etc.).',
+  },
+};
+
 export const SuccessBanner = {
   ...Playground,
   args: {
-    variant: 'success',
+    variant: 'healthy',
+    withDefaultIcon: false,
+    icon: 'Check-circle',
     title: 'Success',
     children: 'There is a success',
   },
@@ -60,16 +77,31 @@ export const SuccessBanner = {
 export const WarningBanner = {
   ...Playground,
   args: {
+    withDefaultIcon: true,
     variant: 'warning',
     title: 'Warning',
     children: 'There is a warning',
   },
 };
+
 export const ErrorBanner = {
   ...Playground,
   args: {
+    withDefaultIcon: true,
     variant: 'danger',
     title: 'Error',
     children: 'There is an error',
   },
 };
+
+/** Custom icon when default (Exclamation-circle / Info-circle) is not desired. */
+export const WithCustomIcon = {
+  ...Playground,
+  args: {
+    variant: 'base',
+    withDefaultIcon: false,
+    icon: 'Exclamation-circle',
+    title: 'Custom',
+    children: 'Use the icon prop when you need a specific icon other than the withDefaultIcon default.',
+  },
+};