@capillarytech/blaze-ui 0.1.6-alpha.42 → 0.1.6-alpha.43

package/CapTooltipWithInfo/CapTooltipWithInfo.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { CapTooltip, CapIcon } from '../';
+import withStyles from '../utils/withStyles';
+import { tooltipWithInfoStyles } from './styles';
+
+/**
+ * CapTooltipWithInfo - A component that combines an info icon with a tooltip
+ * for displaying additional information on hover or other trigger events.
+ */
+const CapTooltipWithInfo = ({
+  title,
+  iconSize = 's',
+  iconType = 'info-circle',
+  placement = 'top',
+  trigger = 'hover',
+  className = '',
+  tooltipProps = {},
+  iconProps = {},
+  ...rest
+}) => {
+  return (
+    <span 
+      className={classnames('cap-tooltip-with-info', className)} 
+      {...rest}
+    >
+      <CapTooltip
+        title={title}
+        placement={placement}
+        trigger={trigger}
+        {...tooltipProps}
+      >
+        <span className="cap-tooltip-with-info-icon">
+          <CapIcon 
+            type={iconType}
+            size={iconSize}
+            {...iconProps}
+          />
+        </span>
+      </CapTooltip>
+    </span>
+  );
+};
+
+CapTooltipWithInfo.propTypes = {
+  /** Content to display in the tooltip */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  /** Size of the info icon */
+  iconSize: PropTypes.oneOf(['xs', 's', 'm', 'l']),
+  /** Type of icon to display */
+  iconType: PropTypes.string,
+  /** Placement of the tooltip relative to the icon */
+  placement: PropTypes.oneOf([
+    'top', 'left', 'right', 'bottom',
+    'topLeft', 'topRight', 'bottomLeft', 'bottomRight',
+    'leftTop', 'leftBottom', 'rightTop', 'rightBottom',
+  ]),
+  /** How the tooltip is triggered */
+  trigger: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+  /** Additional class name */
+  className: PropTypes.string,
+  /** Additional props passed to the CapTooltip component */
+  tooltipProps: PropTypes.object,
+  /** Additional props passed to the CapIcon component */
+  iconProps: PropTypes.object,
+};
+
+CapTooltipWithInfo.defaultProps = {
+  iconSize: 's',
+  iconType: 'info-circle',
+  placement: 'top',
+  trigger: 'hover',
+  className: '',
+  tooltipProps: {},
+  iconProps: {},
+};
+
+export default withStyles(CapTooltipWithInfo, tooltipWithInfoStyles);

package/CapTooltipWithInfo/index.js

@@ -0,0 +1,3 @@
+import CapTooltipWithInfo from './CapTooltipWithInfo';
+
+export default CapTooltipWithInfo;

package/CapTooltipWithInfo/styles.js

@@ -0,0 +1,22 @@
+import { css } from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+export const tooltipWithInfoStyles = css`
+  &.cap-tooltip-with-info {
+    display: inline-flex;
+    align-items: center;
+    cursor: default;
+    
+    .cap-tooltip-with-info-icon {
+      color: ${styledVars.CAP_G06};
+      margin-left: 4px;
+      cursor: help;
+      
+      &:hover {
+        color: ${styledVars.CAP_G07};
+      }
+    }
+  }
+`;
+
+export default tooltipWithInfoStyles;

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -5,9 +5,9 @@ import classnames from 'classnames';
 import { TreeSelect, Input, Button } from 'antd-v5';
 import styled from 'styled-components';
 import * as styledVars from '../styled/variables';
-import { CapLabel, CapTooltip, CapRow, CapIcon } from '../';
+import { CapLabel, CapTooltipWithInfo, CapRow, CapIcon } from '../';
 import withStyles from '../utils/withStyles';
-import { SelectWrapper, selectStyles } from './styles';
+import { SelectWrapper, HeaderWrapper, selectStyles } from './styles';
 
 const StyledTreeSelect = styled(TreeSelect)`
   ${selectStyles}
@@ -157,18 +157,16 @@ const CapUnifiedSelect = ({
     if (!headerLabel && !tooltip) return null;
     return (
       <>
-      <CapRow 
-        className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header')}
-        align="middle"
-        gap={8}
-      >
+      <HeaderWrapper className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header')}>
         {headerLabel && <CapLabel type="label16" className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-label')}>{headerLabel}</CapLabel>}
         {tooltip && (
-          <CapTooltip title={tooltip} className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-tooltip')}>
-            <CapIcon type="info-circle" size="s" />
-          </CapTooltip>
+          <CapTooltipWithInfo 
+            title={tooltip} 
+            className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-tooltip')}
+            iconProps={{ disabled }}
+          />
         )}
-      </CapRow>
+      </HeaderWrapper>
       <div className="cap-unified-select-header-byline-text">
         {bylineText && <CapLabel className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-byline-text')}>{bylineText}</CapLabel>}
       </div>

package/index.js

@@ -7,6 +7,7 @@ export { default as CapSkeleton } from './CapSkeleton';
 export { default as CapSpin } from './CapSpin';
 export { default as CapTable } from './CapTable';
 export { default as CapTooltip } from './CapTooltip';
+export { default as CapTooltipWithInfo } from './CapTooltipWithInfo';
 export { default as CapUnifiedSelect } from './CapUnifiedSelect';
 
 // Export utilities

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/blaze-ui",
   "author": "Capillary Technologies",
-  "version": "0.1.6-alpha.42",
+  "version": "0.1.6-alpha.43",
   "description": "Capillary UI component library with Ant Design v5",
   "main": "./index.js",
   "sideEffects": [