@bitrise/bitkit 13.108.0 → 13.110.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.108.0",
+  "version": "13.110.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/DataWidget/DataWidget.theme.ts

@@ -0,0 +1,53 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+import { rem } from '../../utils/utils';
+
+const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(['container', 'title', 'items']);
+
+const DataWidgetTooltipTheme = defineMultiStyleConfig({
+  baseStyle: ({ infoLabel, title }) => {
+    return {
+      container: {
+        display: 'flex',
+        gap: '8',
+        alignItems: 'center',
+        height: '40',
+        paddingInlineStart: !title ? '8' : undefined,
+        paddingInlineEnd: '8',
+        width: 'fit-content',
+        boxShadow: 'small',
+      },
+      title: {
+        display: 'inline-block',
+        paddingInlineStart: '16',
+        paddingInlineEnd: infoLabel ? '12' : '16',
+        paddingY: rem(9),
+        backgroundColor: 'sys/neutral/subtle',
+        borderTopLeftRadius: rem(7),
+        borderBottomLeftRadius: rem(7),
+        textStyle: 'body/md/semibold',
+      },
+      items: {
+        display: 'flex',
+        gap: '4',
+        alignItems: 'center',
+        paddingInlineStart: '8',
+        paddingInlineEnd: '4',
+        '> div': {
+          display: 'flex',
+          gap: '4',
+          alignItems: 'center',
+        },
+        '> div + div': {
+          _before: {
+            content: `'\\B7'`,
+            fontSize: '7',
+            marginInline: 4,
+            color: 'icon/tertiary',
+          },
+        },
+      },
+    };
+  },
+});
+
+export default DataWidgetTooltipTheme;

package/src/Components/DataWidget/DataWidget.tsx

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { useMultiStyleConfig } from '@chakra-ui/react';
+import Box from '../Box/Box';
+import Card, { CardProps } from '../Card/Card';
+import Text from '../Text/Text';
+import Icon from '../Icon/Icon';
+import Tooltip from '../Tooltip/Tooltip';
+
+export interface DataWidgetProps extends CardProps {
+  additionalElement?: ReactNode;
+  children?: ReactNode;
+  infoLabel?: string;
+  title?: string;
+}
+
+const Info = ({ infoLabel }: { infoLabel: string }) => (
+  <Tooltip label={infoLabel}>
+    <Icon color="icon/tertiary" name="InfoCircle" size="16" marginInlineStart="4" verticalAlign="-3px" />
+  </Tooltip>
+);
+
+const DataWidget = (props: DataWidgetProps) => {
+  const { additionalElement, children, infoLabel, title, ...rest } = props;
+
+  const style = useMultiStyleConfig('DataWidget', { infoLabel, title });
+
+  return (
+    <Card {...rest} sx={style.container}>
+      {!!title && (
+        <Text as="span" sx={style.title}>
+          {title}
+          {!!infoLabel && <Info infoLabel={infoLabel} />}
+        </Text>
+      )}
+      <Box as="dl" sx={style.items}>
+        {children}
+      </Box>
+      {!!infoLabel && !title && <Info infoLabel={infoLabel} />}
+      {additionalElement}
+    </Card>
+  );
+};
+
+export default DataWidget;

package/src/Components/DataWidget/DataWidgetItem.tsx

@@ -0,0 +1,28 @@
+import DefinitionTooltip from '../DefinitionTooltip/DefinitionTooltip';
+import Icon from '../Icon/Icon';
+import Text from '../Text/Text';
+
+export type DataWidgetItemProps = {
+  hasWarning?: boolean;
+  label: string;
+  labelTooltip?: string;
+  value: string;
+  valueTooltip?: string;
+};
+
+const DataWidgetItem = (props: DataWidgetItemProps) => {
+  const { hasWarning, label, labelTooltip, value, valueTooltip } = props;
+  return (
+    <div>
+      {hasWarning && <Icon name="WarningColored" size="16" marginInlineEnd="4" />}
+      <Text as="dt" color="text/primary" textStyle="body/md/semibold">
+        {labelTooltip ? <DefinitionTooltip label={labelTooltip}>{label}</DefinitionTooltip> : label}
+      </Text>
+      <Text as="dd" textStyle="body/md/regular">
+        {valueTooltip ? <DefinitionTooltip label={valueTooltip}>{value}</DefinitionTooltip> : value}
+      </Text>
+    </div>
+  );
+};
+
+export default DataWidgetItem;

package/src/Components/components.theme.ts

@@ -48,6 +48,7 @@ import FilterSwitch from './Filter/FilterSwitch/FilterSwitch.theme';
 import TagsInput from './Form/TagsInput/TagsInput.theme';
 import DraggableCard from './DraggableCard/DraggableCard.theme';
 import SelectableTag from './SelectableTag/SelectableTag.theme';
+import DataWidget from './DataWidget/DataWidget.theme';
 
 const components = {
   Accordion,
@@ -58,6 +59,7 @@ const components = {
   Card,
   Checkbox,
   ColorButton,
+  DataWidget,
   Divider,
   Drawer,
   Dropdown,

package/src/index.ts

@@ -335,3 +335,9 @@ export { default as SelectableTag } from './Components/SelectableTag/SelectableT
 
 export type { SelectableTagGroupProps } from './Components/SelectableTag/SelectableTagGroup';
 export { default as SelectableTagGroup } from './Components/SelectableTag/SelectableTagGroup';
+
+export type { DataWidgetProps } from './Components/DataWidget/DataWidget';
+export { default as DataWidget } from './Components/DataWidget/DataWidget';
+
+export type { DataWidgetItemProps } from './Components/DataWidget/DataWidgetItem';
+export { default as DataWidgetItem } from './Components/DataWidget/DataWidgetItem';