@bitrise/bitkit 9.12.0 → 9.12.1-alpha-chakra.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.12.0",
+  "version": "9.12.1-alpha-chakra.3",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -76,6 +76,7 @@
     "@types/cheerio": "^0.22.31",
     "@types/clipboard": "^2.0.1",
     "@types/enzyme": "^3.10.12",
+    "@types/fscreen": "^1.0.1",
     "@types/jest": "^27.5.0",
     "@types/lodash.sample": "^4.2.7",
     "@types/lodash.shuffle": "^4.2.7",

package/src/Components/Card/Card.stories.tsx

@@ -1,18 +1,35 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { sortObjectByKey } from '../../utils/storyUtils';
+import Divider from '../Divider/Divider';
 import Card from './Card';
+import CardContent from './CardContent';
 
 export default {
   title: 'Components/Card',
   component: Card,
+  subcomponents: { CardContent },
 } as ComponentMeta<typeof Card>;
 
-const Template: ComponentStory<typeof Card> = (props) => <Card {...props} />;
-
-export const WithProps = Template.bind({});
+export const WithProps: ComponentStory<typeof Card> = (props) => (
+  <Card {...props}>
+    <CardContent>The quick brown fox jumps over the lazy dog.</CardContent>
+  </Card>
+);
 
 WithProps.args = sortObjectByKey({
   ...Card.defaultProps,
-  children: 'The quick brown fox jumps over the lazy dog.',
+  className: '',
+});
+
+export const DividedContent: ComponentStory<typeof Card> = (props) => (
+  <Card {...props}>
+    <CardContent>The quick brown fox jumps over the lazy dog.</CardContent>
+    <Divider />
+    <CardContent>The quick brown fox jumps over the lazy dog.</CardContent>
+  </Card>
+);
+
+DividedContent.args = sortObjectByKey({
+  ...Card.defaultProps,
   className: '',
 });

package/src/Components/Card/Card.tsx

@@ -1,27 +1,34 @@
 import React from 'react';
-import { forwardRef } from '@chakra-ui/react';
+import { forwardRef, HTMLChakraProps } from '@chakra-ui/react';
 import { Radii } from '../../Foundations/Radii/Radii';
 import { Shadows } from '../../Foundations/Shadows/Shadows';
-import { Sizes } from '../../Foundations/Sizes/Sizes';
 import Box, { BoxProps } from '../Box/Box';
 
 export interface CardProps extends BoxProps {
   borderRadius?: keyof Radii;
   boxShadow?: keyof Shadows;
-  padding?: keyof Sizes;
 }
 
 /**
- * Basic container element with default box shadow, border radius and padding.
+ * Basic container element with default box shadow and border radius. Use with `CardContent` to add padding.
  */
 const Card = forwardRef<CardProps, 'div'>((props, ref) => {
-  return <Box {...props} ref={ref} />;
+  const properties = {
+    backgroundColor: 'white',
+    display: 'block',
+    width: '100%',
+    ...props,
+  } as BoxProps;
+  if (props.as === 'button' && !(props as HTMLChakraProps<'button'>).type) {
+    (properties as HTMLChakraProps<'button'>).type = 'button';
+  }
+  return <Box {...properties} ref={ref} />;
 });
 
 Card.defaultProps = {
-  borderRadius: '12',
-  boxShadow: 'medium',
-  padding: '24',
+  as: 'div',
+  borderRadius: '8',
+  boxShadow: 'small',
 } as CardProps;
 
 export default Card;

package/src/Components/Card/CardContent.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Box, { BoxProps } from '../Box/Box';
+
+export type CardContentProps = BoxProps;
+
+/**
+ * Basic container element with default box shadow, border radius and padding.
+ */
+const CardContent = (props: CardContentProps) => {
+  return <Box {...props} />;
+};
+
+CardContent.defaultProps = {
+  padding: '24',
+} as CardContentProps;
+
+export default CardContent;

package/src/Foundations/Colors/DesignTokens.tsx

@@ -34,7 +34,7 @@ const DesignTokens = () => {
           plugin called “Theemo”.
         </Text>
       </Box>
-      <Card sx={{ marginBottom: '96' }}>
+      <Card marginBottom="96">
         <VStack align="flex-start" as="ul" spacing="32">
           {Object.keys(TOKENS).map((token: string) => (
             <HStack as="li" key={token} spacing="32">

package/src/Foundations/Colors/Palette.tsx

@@ -76,7 +76,7 @@ const Palette = () => (
     <Text as="h2" size="8">
       Full palette
     </Text>
-    <Card sx={{ marginTop: '24' }}>
+    <Card marginTop="24">
       <HStack spacing="0" sx={{ alignItems: 'flex-start', marginBottom: '16' }}>
         <VStack spacing="0">
           <InfoHeader

package/src/Foundations/Typography/Typography.examples.tsx

@@ -31,7 +31,7 @@ export const FontSizes = () => (
     <Text sx={{ marginTop: '8' }}>
       <strong>Text transform:</strong> None, UPPERCASE
     </Text>
-    <Card sx={{ marginTop: '24' }}>
+    <Card marginTop="24">
       <VStack as="ol" spacing={24} sx={style}>
         <Text as="li" size="1">
           {typography.fontSizes[1]} / {typography.lineHeights[1]} / Normal / Uppercase

package/src/index.ts

@@ -55,18 +55,6 @@ export { default as Button } from './Old/Button/Button';
 export type { Props as ButtonsProps } from './Old/Button/Buttons';
 export { default as Buttons } from './Old/Button/Buttons';
 
-export type { Props as CardProps } from './Old/Card/Card';
-export { default as Card } from './Old/Card/Card';
-
-export type { Props as CardButtonProps } from './Old/Card/CardButton';
-export { default as CardButton } from './Old/Card/CardButton';
-
-export type { Props as CardContentProps } from './Old/Card/CardContent';
-export { default as CardContent } from './Old/Card/CardContent';
-
-export type { Props as CardDividerProps } from './Old/Card/CardDivider';
-export { default as CardDivider } from './Old/Card/CardDivider';
-
 export type { Props as CheckboxProps } from './Old/Checkbox/Checkbox';
 export { default as Checkbox } from './Old/Checkbox/Checkbox';
 
@@ -294,3 +282,9 @@ export { default as OverflowMenuItem } from './Components/OverflowMenu/OverflowM
 
 export type { DividerProps } from './Components/Divider/Divider';
 export { default as Divider } from './Components/Divider/Divider';
+
+export type { CardProps } from './Components/Card/Card';
+export { default as Card } from './Components/Card/Card';
+
+export type { CardContentProps } from './Components/Card/CardContent';
+export { default as CardContent } from './Components/Card/CardContent';