@bitrise/bitkit 13.110.0 → 13.111.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.110.0",
+  "version": "13.111.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/LabeledData/LabeledData.tsx

@@ -0,0 +1,96 @@
+import Box, { BoxProps } from '../Box/Box';
+import Icon, { TypeIconName } from '../Icon/Icon';
+import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
+import Text, { TextProps } from '../Text/Text';
+
+export interface LabeledDataProps extends BoxProps {
+  as?: 'div' | 'dl';
+  data: string;
+  label: string;
+  secondaryLabel?: string;
+  size?: 'sm' | 'md' | 'lg';
+  tooltip?: Omit<TooltipProps, 'children'>;
+  trend?: 'positive' | 'negative' | 'neutral';
+  trendColorScheme?: 'red' | 'green' | 'grey';
+  trendValue?: string;
+}
+
+const LabeledData = ({
+  as = 'div',
+  data,
+  label,
+  secondaryLabel,
+  size = 'sm',
+  tooltip,
+  trend,
+  trendValue,
+  trendColorScheme,
+  ...rest
+}: LabeledDataProps): JSX.Element => {
+  const trendIconSize = size === 'sm' ? '16' : '24';
+  const trendSign = trend === 'negative' ? '-' : '+';
+  const labelColor = size === 'sm' ? 'text/primary' : 'text/secondary';
+
+  let trendIconName: TypeIconName | undefined;
+  switch (trend) {
+    case 'positive':
+      trendIconName = 'ArrowUp';
+      break;
+    case 'negative':
+      trendIconName = 'ArrowDown';
+      break;
+    case 'neutral':
+      trendIconName = 'MinusClose';
+      break;
+  }
+
+  let trendIconColor: string | undefined;
+  let trendColor: TextProps['color'] | undefined;
+  switch (trendColorScheme) {
+    case 'red':
+      trendColor = 'text/negative';
+      trendIconColor = 'icon/negative';
+      break;
+    case 'green':
+      trendIconColor = 'icon/positive';
+      trendColor = 'text/positive';
+      break;
+    default:
+      trendColor = 'text/secondary';
+      trendIconColor = 'icon/tertiary';
+  }
+
+  return (
+    <Box as={as} display="flex" flexDirection="column" gap="4" {...rest}>
+      <Box as="dt" display="flex" alignItems="center" gap="4" color={labelColor} textStyle="comp/input/label">
+        {label}
+        {tooltip && (
+          <Tooltip {...tooltip}>
+            <Icon color="icon.tertiary" name="InfoCircle" size="16" />
+          </Tooltip>
+        )}
+      </Box>
+      <Box as="dd" display="flex" alignItems="center" gap="4" color="text/body" textStyle={`comp/data/${size}`}>
+        {data}
+        {trendIconName && trendValue && <Icon color={trendIconColor} name={trendIconName} size={trendIconSize} />}
+      </Box>
+      {((trendSign && trendValue) || !!secondaryLabel) && (
+        <Box as="dd" display="flex" gap="4" color={trendColor} textStyle="body/md/regular">
+          {trendSign && trendValue && (
+            <>
+              {trendSign}
+              {trendValue}
+            </>
+          )}
+          {secondaryLabel && (
+            <Text as="span" color="text/tertiary">
+              {secondaryLabel}
+            </Text>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default LabeledData;

package/src/Components/LabeledData/LabeledDataList.tsx

@@ -0,0 +1,8 @@
+import { forwardRef } from '@chakra-ui/react';
+import Box, { BoxProps } from '../Box/Box';
+
+const LabeledDataList = forwardRef<BoxProps, 'dl'>((props, ref) => {
+  return <Box as="dl" ref={ref} {...props} />;
+});
+
+export default LabeledDataList;

package/src/index.ts

@@ -166,6 +166,9 @@ export { default as AccordionItem } from './Components/Accordion/AccordionItem';
 export type { LightBoxProps } from './Components/LightBox/LightBox';
 export { default as LightBox } from './Components/LightBox/LightBox';
 
+export type { LabeledDataProps } from './Components/LabeledData/LabeledData';
+export { default as LabeledData } from './Components/LabeledData/LabeledData';
+
 export type { AspectRatioProps } from './Components/AspectRatio/AspectRatio';
 export { default as AspectRatio } from './Components/AspectRatio/AspectRatio';