@bitrise/bitkit 9.13.0-alpha-button-release.4 → 9.13.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.13.0-alpha-button-release.4",
+  "version": "9.13.1",
   "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,44 @@
 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: ComponentStory<typeof Card> = ({ contentProps, ...props }) => (
+  <Card {...props}>
+    <CardContent {...contentProps}>The quick brown fox jumps over the lazy dog.</CardContent>
+  </Card>
+);
 
-export const WithProps = Template.bind({});
+WithProps.args = {
+  ...Card.defaultProps,
+  boxShadow: 'medium',
+  className: '',
+  withBorder: false,
+  contentProps: {
+    padding: '24',
+  },
+};
+
+export const DividedContent: ComponentStory<typeof Card> = ({ contentProps, ...props }) => (
+  <Card {...props}>
+    <CardContent {...contentProps}>The quick brown fox jumps over the lazy dog.</CardContent>
+    <Divider />
+    <CardContent {...contentProps}>The quick brown fox jumps over the lazy dog.</CardContent>
+  </Card>
+);
 
-WithProps.args = sortObjectByKey({
+DividedContent.args = {
   ...Card.defaultProps,
-  children: 'The quick brown fox jumps over the lazy dog.',
+  boxShadow: 'medium',
   className: '',
-});
+  withBorder: false,
+  contentProps: {
+    padding: '24',
+  },
+};

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

@@ -0,0 +1,9 @@
+const CardTheme = {
+  baseStyle: {
+    _focusVisible: {
+      boxShadow: 'outline',
+    },
+  },
+};
+
+export default CardTheme;

package/src/Components/Card/Card.tsx

@@ -1,27 +1,47 @@
+/* eslint-disable no-underscore-dangle */
 import React from 'react';
-import { forwardRef } from '@chakra-ui/react';
+import { forwardRef, HTMLChakraProps, useStyleConfig } 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;
+  withBorder?: boolean;
 }
 
 /**
- * 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 { withBorder, ...rest } = props;
+  const css = useStyleConfig('Card');
+
+  const properties = {
+    backgroundColor: 'white',
+    display: 'block',
+    width: '100%',
+    ...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';
+  }
+  if (props.as === 'a' || props.as === 'button') {
+    properties._hover = {
+      boxShadow: '0 0 0px 2px var(--colors-purple-50)',
+    };
+  }
+  return <Box __css={css} {...properties} ref={ref} />;
 });
 
 Card.defaultProps = {
-  borderRadius: '12',
-  boxShadow: 'medium',
-  padding: '24',
+  as: 'div',
+  borderRadius: '8',
 } as CardProps;
 
 export default Card;

package/src/Components/Card/CardContent.tsx

@@ -0,0 +1,15 @@
+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 = {} 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 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 sx={{ 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 sx={{ 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

package/src/index.ts

@@ -22,3 +22,9 @@ export { default as Button } from './Components/Button/Button';
 
 export type { ButtonGroupProps } from './Components/ButtonGroup/ButtonGroup';
 export { default as ButtonGroup } from './Components/ButtonGroup/ButtonGroup';
+
+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';

package/src/old.ts

@@ -49,18 +49,6 @@ export { default as Base } from './Old/Base/Base';
 export type { Props as BoundsProps } from './Old/Bounds/Bounds';
 export { default as Bounds } from './Old/Bounds/Bounds';
 
-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';
 

package/src/theme.ts

@@ -1,4 +1,5 @@
 import Button from './Components/Button/Button.theme';
+import Card from './Components/Card/Card.theme';
 import Divider from './Components/Divider/Divider.theme';
 import Link from './Components/Link/Link.theme';
 import Menu from './Components/Menu/Menu.theme';
@@ -45,6 +46,7 @@ const theme = {
   },
   components: {
     Button,
+    Card,
     Divider,
     Link,
     Menu,