@bitrise/bitkit 12.35.1 → 12.36.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.35.1",
+  "version": "12.36.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 }: CardProps) => {
+    return {
+      backgroundColor: 'neutral.100',
+      display: 'block',
+      width: '100%',
+      borderRadius: '8',
+      border: '1px solid',
+      _focusVisible: {
+        boxShadow: 'outline',
+      },
+      _hover:
+        as === 'a' || as === 'button'
+          ? {
+              backgroundColor: 'neutral.95',
+              borderColor: 'neutral.90',
+            }
+          : undefined,
+    };
   },
   variants: {
     elevated: {

package/src/Components/Card/Card.tsx

@@ -6,7 +6,7 @@ import Box, { BoxProps } from '../Box/Box';
 export interface CardProps extends BoxProps {
   borderRadius?: keyof Radii;
   boxShadow?: keyof Shadows;
-  withBorder?: boolean;
+  href?: string;
   variant?: 'elevated' | 'outline';
 }
 
@@ -14,35 +14,21 @@ export interface CardProps extends BoxProps {
  * 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, ...rest } = props;
+  const css = useStyleConfig('Card', { as, variant });
 
   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;