@bitrise/bitkit 13.109.0 → 13.111.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.109.0",
+  "version": "13.111.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -38,7 +38,7 @@
     "@floating-ui/react-dom-interactions": "^0.8.1",
     "@fontsource/figtree": "^5.0.20",
     "@fontsource/source-code-pro": "^5.0.18",
-    "framer-motion": "^11.2.12",
+    "framer-motion": "^11.2.13",
     "luxon": "^3.4.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -67,7 +67,7 @@
     "@storybook/react": "^8.1.11",
     "@storybook/react-webpack5": "^8.1.11",
     "@storybook/theming": "^8.1.11",
-    "@testing-library/dom": "^10.2.0",
+    "@testing-library/dom": "^10.3.1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -75,20 +75,20 @@
     "@types/luxon": "^3.4.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
     "axios": "^1.7.2",
     "eslint": "^8.57.0",
-    "glob": "^10.4.2",
+    "glob": "^10.4.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^24.1.0",
     "prettier": "^3.3.2",
-    "react-hook-form": "^7.52.0",
-    "release-it": "^17.4.0",
+    "react-hook-form": "^7.52.1",
+    "release-it": "^17.4.1",
     "storybook": "^8.1.11",
     "ts-jest": "^29.1.5",
-    "typescript": "^5.5.2"
+    "typescript": "^5.5.3"
   },
   "files": [
     "src",

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';