@bitrise/bitkit 12.35.1 → 12.37.0

package/package.json

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

package/src/Components/Card/Card.theme.ts

@@ -1,10 +1,24 @@
+import { CardProps } from './Card';
+
 const CardTheme = {
-  baseStyle: {
-    _focusVisible: {
-      boxShadow: 'medium',
-    },
-    borderRadius: '8',
-    border: '1px solid',
+  baseStyle: ({ as, withHover }: CardProps) => {
+    return {
+      backgroundColor: 'neutral.100',
+      display: 'block',
+      width: '100%',
+      borderRadius: '8',
+      border: '1px solid',
+      _focusVisible: {
+        boxShadow: 'outline',
+      },
+      _hover:
+        as === 'a' || as === 'button' || withHover
+          ? {
+              backgroundColor: 'neutral.95',
+              borderColor: 'neutral.90',
+            }
+          : undefined,
+    };
   },
   variants: {
     elevated: {

package/src/Components/Card/Card.tsx

@@ -6,43 +6,30 @@ import Box, { BoxProps } from '../Box/Box';
 export interface CardProps extends BoxProps {
   borderRadius?: keyof Radii;
   boxShadow?: keyof Shadows;
-  withBorder?: boolean;
+  href?: string;
   variant?: 'elevated' | 'outline';
+  withHover?: boolean;
 }
 
 /**
  * Basic container element with default box shadow and border radius.
  */
 const Card = forwardRef<CardProps, 'div'>((props, ref) => {
-  const { withBorder, variant, ...rest } = props;
-  const css = useStyleConfig('Card', { variant });
+  const { as, variant, withHover, ...rest } = props;
+  const css = useStyleConfig('Card', { as, variant, withHover });
 
   const properties = {
-    backgroundColor: 'white',
-    display: 'block',
-    width: '100%',
+    as,
     ...rest,
   } as BoxProps;
-  if (!withBorder) {
-    css.border = 'none';
-  }
   if (props.as === 'button' && !(props as HTMLChakraProps<'button'>).type) {
     (properties as HTMLChakraProps<'button'>).type = 'button';
   }
-  // eslint-disable-next-line no-underscore-dangle
-  if ((props.as === 'a' || props.as === 'button') && !rest._hover) {
-    // eslint-disable-next-line no-underscore-dangle
-    properties._hover = {
-      boxShadow: '0 0 0px 2px var(--colors-purple-50)',
-    };
-  }
   return <Box __css={css} {...properties} ref={ref} />;
 });
 
 Card.defaultProps = {
   as: 'div',
-  borderRadius: '8',
-  withBorder: true,
   variant: 'elevated',
 } as CardProps;
 

package/src/Components/LinkBox/LinkBox.tsx

@@ -0,0 +1,9 @@
+import { LinkBox as ChakraLinkBox, LinkBoxProps, forwardRef } from '@chakra-ui/react';
+
+const LinkBox = forwardRef<LinkBoxProps, 'div'>((props, ref) => {
+  return <ChakraLinkBox {...props} ref={ref} />;
+});
+
+export type { LinkBoxProps };
+
+export default LinkBox;

package/src/Components/LinkOverlay/LinkOverlay.tsx

@@ -0,0 +1,9 @@
+import { LinkOverlay as ChakraLinkOverlay, LinkOverlayProps, forwardRef } from '@chakra-ui/react';
+
+const LinkOverlay = forwardRef<LinkOverlayProps, 'a'>((props, ref) => {
+  return <ChakraLinkOverlay {...props} ref={ref} />;
+});
+
+export type { LinkOverlayProps };
+
+export default LinkOverlay;

package/src/index.ts

@@ -289,3 +289,9 @@ export { default as CodeBlock } from './Components/CodeBlock/CodeBlock';
 
 export type { DefinitionTooltipProps } from './Components/DefinitionTooltip/DefinitionTooltip';
 export { default as DefinitionTooltip } from './Components/DefinitionTooltip/DefinitionTooltip';
+
+export type { LinkBoxProps } from './Components/LinkBox/LinkBox';
+export { default as LinkBox } from './Components/LinkBox/LinkBox';
+
+export type { LinkOverlayProps } from './Components/LinkOverlay/LinkOverlay';
+export { default as LinkOverlay } from './Components/LinkOverlay/LinkOverlay';