@bitrise/bitkit 12.43.5 → 12.44.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.43.5",
+  "version": "12.44.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Toggletip/Toggletip.theme.ts

@@ -0,0 +1,22 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+import { rem } from '../../utils/utils';
+
+const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(['content', 'trigger']);
+
+const Toggletip = defineMultiStyleConfig({
+  baseStyle: {
+    content: {
+      padding: '16',
+      maxWidth: rem(320),
+    },
+    link: {
+      color: 'purple.70',
+      _hover: {
+        color: 'purple.60',
+        textDecoration: 'underline',
+      },
+    },
+  },
+});
+
+export default Toggletip;

package/src/Components/Toggletip/Toggletip.tsx

@@ -0,0 +1,75 @@
+import { ReactNode } from 'react';
+import { BoxProps, FlexboxProps, useMultiStyleConfig } from '@chakra-ui/react';
+import Popover, { PopoverProps } from '../Popover/Popover';
+import PopoverContent from '../Popover/PopoverContent';
+import PopoverTrigger from '../Popover/PopoverTrigger';
+import Box from '../Box/Box';
+import Text from '../Text/Text';
+import Link from '../Link/Link';
+import { ButtonProps } from '../Button/Button';
+import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
+
+export type ToggletipProps = Omit<PopoverProps, 'children'> & {
+  children: ReactNode;
+  label: string;
+  learnMoreUrl?: string;
+  button?: {
+    onClick?: ButtonProps['onClick'];
+    href?: string;
+    label: string;
+  };
+  popoverTrigger?: Omit<BoxProps, 'children'>;
+};
+
+const Toggletip = (props: ToggletipProps) => {
+  const { children, label, learnMoreUrl, button, popoverTrigger, ...rest } = props;
+
+  const style = useMultiStyleConfig('Toggletip');
+
+  let justifyContent: FlexboxProps['justifyContent'] = 'space-between';
+
+  if (!learnMoreUrl) {
+    justifyContent = 'flex-end';
+  } else if (!button) {
+    justifyContent = 'flex-start';
+  }
+
+  const buttonProps = button?.href
+    ? ({
+        as: 'a' as const,
+        href: button?.href,
+      } as ColorButtonProps)
+    : {
+        as: 'button' as const,
+        onClick: button?.onClick,
+      };
+
+  return (
+    <Popover placement="top" variant="dark" withArrow {...rest}>
+      <PopoverTrigger>
+        <Box as="button" {...(popoverTrigger || {})}>
+          {children}
+        </Box>
+      </PopoverTrigger>
+      <PopoverContent sx={style.content}>
+        <Text>{label}</Text>
+        {(learnMoreUrl || button) && (
+          <Box display="flex" justifyContent={justifyContent} alignItems="center" marginTop="16">
+            {learnMoreUrl && (
+              <Link sx={style.link} href={learnMoreUrl} isExternal>
+                Learn more
+              </Link>
+            )}
+            {button && (
+              <ColorButton {...buttonProps} colorScheme="neutral">
+                {button?.label}
+              </ColorButton>
+            )}
+          </Box>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default Toggletip;

package/src/index.ts

@@ -304,3 +304,6 @@ export { default as ExpandableCard } from './Components/ExpandableCard/Expandabl
 
 export type { FileInputProps } from './Components/Form/FileInput/FileInput';
 export { default as FileInput } from './Components/Form/FileInput/FileInput';
+
+export type { ToggletipProps as ToggleTooltipProps } from './Components/Toggletip/Toggletip';
+export { default as Toggletip } from './Components/Toggletip/Toggletip';

package/src/theme.ts

@@ -49,6 +49,7 @@ import shadows from './Foundations/Shadows/Shadows';
 import sizes from './Foundations/Sizes/Sizes';
 import typography from './Foundations/Typography/Typography';
 import zIndices from './Foundations/Zindex/Zindex';
+import Toggletip from './Components/Toggletip/Toggletip.theme';
 
 const theme = {
   config: {
@@ -127,6 +128,7 @@ const theme = {
     Note,
     CodeBlock,
     DefinitionTooltip,
+    Toggletip,
     ExpandableCard,
     FileInput,
   },