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

package/package.json

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

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

@@ -1,5 +1,4 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { sortObjectByKey } from '../../utils/storyUtils';
 import Divider from '../Divider/Divider';
 import Card from './Card';
 import CardContent from './CardContent';
@@ -10,26 +9,36 @@ export default {
   subcomponents: { CardContent },
 } as ComponentMeta<typeof Card>;
 
-export const WithProps: ComponentStory<typeof Card> = (props) => (
+export const WithProps: ComponentStory<typeof Card> = ({ contentProps, ...props }) => (
   <Card {...props}>
-    <CardContent>The quick brown fox jumps over the lazy dog.</CardContent>
+    <CardContent {...contentProps}>The quick brown fox jumps over the lazy dog.</CardContent>
   </Card>
 );
 
-WithProps.args = sortObjectByKey({
+WithProps.args = {
   ...Card.defaultProps,
+  boxShadow: 'medium',
   className: '',
-});
+  withBorder: false,
+  contentProps: {
+    padding: '24',
+  },
+};
 
-export const DividedContent: ComponentStory<typeof Card> = (props) => (
+export const DividedContent: ComponentStory<typeof Card> = ({ contentProps, ...props }) => (
   <Card {...props}>
-    <CardContent>The quick brown fox jumps over the lazy dog.</CardContent>
+    <CardContent {...contentProps}>The quick brown fox jumps over the lazy dog.</CardContent>
     <Divider />
-    <CardContent>The quick brown fox jumps over the lazy dog.</CardContent>
+    <CardContent {...contentProps}>The quick brown fox jumps over the lazy dog.</CardContent>
   </Card>
 );
 
-DividedContent.args = sortObjectByKey({
+DividedContent.args = {
   ...Card.defaultProps,
+  boxShadow: 'medium',
   className: '',
-});
+  withBorder: false,
+  contentProps: {
+    padding: '24',
+  },
+};

package/src/Components/Card/Card.tsx

@@ -7,18 +7,24 @@ import Box, { BoxProps } from '../Box/Box';
 export interface CardProps extends BoxProps {
   borderRadius?: keyof Radii;
   boxShadow?: keyof Shadows;
+  withBorder?: boolean;
 }
 
 /**
  * Basic container element with default box shadow and border radius. Use with `CardContent` to add padding.
  */
 const Card = forwardRef<CardProps, 'div'>((props, ref) => {
+  const { withBorder, ...rest } = props;
   const properties = {
     backgroundColor: 'white',
     display: 'block',
     width: '100%',
-    ...props,
+    ...rest,
   } as BoxProps;
+  if (withBorder) {
+    properties.border = '1px solid';
+    properties.borderColor = 'neutral.93';
+  }
   if (props.as === 'button' && !(props as HTMLChakraProps<'button'>).type) {
     (properties as HTMLChakraProps<'button'>).type = 'button';
   }
@@ -28,7 +34,6 @@ const Card = forwardRef<CardProps, 'div'>((props, ref) => {
 Card.defaultProps = {
   as: 'div',
   borderRadius: '8',
-  boxShadow: 'small',
 } as CardProps;
 
 export default Card;

package/src/Components/Card/CardContent.tsx

@@ -10,8 +10,6 @@ const CardContent = (props: CardContentProps) => {
   return <Box {...props} />;
 };
 
-CardContent.defaultProps = {
-  padding: '24',
-} as CardContentProps;
+CardContent.defaultProps = {} as CardContentProps;
 
 export default CardContent;

package/src/Foundations/Colors/DesignTokens.tsx

@@ -34,7 +34,7 @@ const DesignTokens = () => {
           plugin called “Theemo”.
         </Text>
       </Box>
-      <Card marginBottom="96">
+      <Card boxShadow="medium" marginBottom="96" padding="24">
         <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 marginTop="24">
+    <Card boxShadow="medium" marginTop="24" padding="24">
       <HStack spacing="0" sx={{ alignItems: 'flex-start', marginBottom: '16' }}>
         <VStack spacing="0">
           <InfoHeader

package/src/Foundations/Radii/Radii.examples.tsx

@@ -1,6 +1,7 @@
 import { HStack, VStack } from '@chakra-ui/react';
 import Box from '../../Components/Box/Box';
 import Card from '../../Components/Card/Card';
+import CardContent from '../../Components/Card/CardContent';
 import Provider from '../../Components/Provider/Provider';
 import Text from '../../Components/Text/Text';
 import radii from './Radii';
@@ -10,27 +11,15 @@ export const Radii = () => (
     <Text as="h2" size="8">
       Radii (round corners)
     </Text>
-    <HStack
-      as={Card}
-      spacing="24"
-      sx={{
-        marginTop: '24',
-      }}
-    >
-      {Object.keys(radii).map((size) => (
-        <VStack key={size}>
-          <Box
-            sx={{
-              border: '0.1875rem solid',
-              borderColor: 'brand.primary',
-              borderRadius: size,
-              height: '64',
-              width: '64',
-            }}
-          />
-          <Text>{size}</Text>
-        </VStack>
-      ))}
-    </HStack>
+    <Card boxShadow="medium" marginTop="24">
+      <HStack as={CardContent} padding="24" spacing="24">
+        {Object.keys(radii).map((size) => (
+          <VStack key={size}>
+            <Box border="0.1875rem solid" borderColor="brand.primary" borderRadius={size} height="64" width="64" />
+            <Text>{size}</Text>
+          </VStack>
+        ))}
+      </HStack>
+    </Card>
   </Provider>
 );

package/src/Foundations/Shadows/Shadows.examples.tsx

@@ -10,25 +10,15 @@ export const Shadows = () => (
     <Text as="h2" size="8">
       Shadows
     </Text>
-    <HStack
-      as={Card}
-      spacing="32"
-      sx={{
-        marginTop: '24',
-      }}
-    >
-      {Object.keys(shadows).map((key) => (
-        <VStack key={key}>
-          <Box
-            sx={{
-              width: 32,
-              height: 32,
-              boxShadow: key,
-            }}
-          />
-          <Text>{key}</Text>
-        </VStack>
-      ))}
-    </HStack>
+    <Card boxShadow="medium" marginTop="24">
+      <HStack as={Card} padding="24" spacing="32">
+        {Object.keys(shadows).map((key) => (
+          <VStack key={key}>
+            <Box boxShadow={key} height="32" width="32" />
+            <Text as="span">{key}</Text>
+          </VStack>
+        ))}
+      </HStack>
+    </Card>
   </Provider>
 );

package/src/Foundations/Sizes/Sizes.examples.tsx

@@ -1,6 +1,7 @@
 import { HStack, VStack } from '@chakra-ui/react';
 import Box from '../../Components/Box/Box';
 import Card from '../../Components/Card/Card';
+import CardContent from '../../Components/Card/CardContent';
 import Provider from '../../Components/Provider/Provider';
 import Text from '../../Components/Text/Text';
 import sizes from './Sizes';
@@ -10,26 +11,15 @@ export const Sizes = () => (
     <Text as="h2" size="8">
       Sizes
     </Text>
-    <HStack
-      as={Card}
-      spacing="24"
-      sx={{
-        alignItems: 'flex-end',
-        marginTop: '24',
-      }}
-    >
-      {Object.keys(sizes).map((size) => (
-        <VStack key={size}>
-          <Box
-            sx={{
-              width: size,
-              height: size,
-              background: 'brand.primary',
-            }}
-          />
-          <Text>{size}</Text>
-        </VStack>
-      ))}
-    </HStack>
+    <Card boxShadow="medium" marginTop="24">
+      <HStack as={CardContent} alignItems="flex-end" padding="24" spacing="24">
+        {Object.keys(sizes).map((size) => (
+          <VStack key={size}>
+            <Box backgroundColor="brand.primary" height={size} width={size} />
+            <Text>{size}</Text>
+          </VStack>
+        ))}
+      </HStack>
+    </Card>
   </Provider>
 );

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 marginTop="24">
+    <Card boxShadow="medium" marginTop="24" padding="24">
       <VStack as="ol" spacing={24} sx={style}>
         <Text as="li" size="1">
           {typography.fontSizes[1]} / {typography.lineHeights[1]} / Normal / Uppercase