@bitrise/bitkit 9.25.0 → 9.26.1

package/package.json

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

package/src/Components/EmptyState/EmptyState.stories.tsx

@@ -0,0 +1,18 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Button from '../Button/Button';
+import EmptyState, { EmptyStateProps } from './EmptyState';
+
+export default {
+  title: 'Components/EmptyState',
+  component: EmptyState,
+} as ComponentMeta<typeof EmptyState>;
+
+export const WithProps: ComponentStory<typeof EmptyState> = (props) => <EmptyState {...props} />;
+WithProps.args = {
+  children: <Button variant="secondary">This is added as children</Button>,
+  description:
+    'After you have created a group, you will be able to add group members, and assign access for the group to apps in this Workspace.',
+  iconName: 'Wow',
+  maxContentWidth: '35rem',
+  title: 'Your groups will appear here',
+} as EmptyStateProps;

package/src/Components/EmptyState/EmptyState.theme.ts

@@ -0,0 +1,36 @@
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+
+const EmptyStateTheme: ComponentStyleConfig = {
+  parts: ['box', 'title', 'description'],
+  baseStyle: ({ maxContentWidth }) => ({
+    box: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingX: '16',
+      paddingY: {
+        mobile: '32',
+        desktop: '48',
+      },
+      backgroundColor: 'neutral.95',
+      borderRadius: '4',
+      color: 'text.secondary',
+      textAlign: 'center',
+    },
+    title: {
+      marginTop: '8',
+      fontWeight: 'bold',
+      maxWidth: maxContentWidth || '35rem',
+    },
+    description: {
+      marginTop: '8',
+      maxWidth: maxContentWidth || '35rem',
+      '+ *': {
+        marginTop: '16',
+      },
+    },
+  }),
+};
+
+export default EmptyStateTheme;

package/src/Components/EmptyState/EmptyState.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useMultiStyleConfig } from '@chakra-ui/react';
+import Box, { BoxProps } from '../Box/Box';
+import Icon, { TypeIconName } from '../Icon/Icon';
+import Text from '../Text/Text';
+
+export interface EmptyStateProps extends BoxProps {
+  description?: string;
+  iconName: TypeIconName;
+  maxContentWidth?: string;
+  title: string;
+}
+
+const EmptyState = ({ children, description, iconName, maxContentWidth, title, ...rest }: EmptyStateProps) => {
+  const css = useMultiStyleConfig('EmptyState', { maxContentWidth });
+
+  return (
+    <Box __css={css.box} {...rest}>
+      <Icon aria-label={title} name={iconName} size="32" />
+      <Text as="h5" sx={css.title}>
+        {title}
+      </Text>
+      {description && (
+        <Text sx={css.description} size="2">
+          {description}
+        </Text>
+      )}
+      {children}
+    </Box>
+  );
+};
+
+export default EmptyState;

package/src/Components/Select/Select.tsx

@@ -8,7 +8,7 @@ export interface SelectProps extends ChakraSelectProps {
 }
 
 const Select = (props: SelectProps) => {
-  const { iconName = 'DropdownArrows', size, ...rest } = props;
+  const { iconName = 'DropdownArrows', size, placeholder, children, ...rest } = props;
   const iconSize = size === 'medium' ? '24' : '16';
   const properties: ChakraSelectProps = {
     icon: <Icon name={iconName} fontSize={iconSize} size={iconSize} />,
@@ -16,7 +16,16 @@ const Select = (props: SelectProps) => {
     variant: 'select',
     ...rest,
   };
-  return <ChakraSelect {...properties} />;
+  return (
+    <ChakraSelect {...properties}>
+      {placeholder && (
+        <option selected hidden disabled value="">
+          {placeholder}
+        </option>
+      )}
+      {children}
+    </ChakraSelect>
+  );
 };
 
 Select.defaultProps = {

package/src/Foundations/Breakpoints/Breakpoints.ts

@@ -0,0 +1,7 @@
+const breakpoints = {
+  mobile: '0rem',
+  desktop: '53rem', // 848px
+  wide: '101rem', // 1616px
+};
+
+export default breakpoints;

package/src/theme.ts

@@ -3,6 +3,7 @@ import Button from './Components/Button/Button.theme';
 import Card from './Components/Card/Card.theme';
 import ColorButton from './Components/ColorButton/ColorButton.theme';
 import Divider from './Components/Divider/Divider.theme';
+import EmptyState from './Components/EmptyState/EmptyState.theme';
 import Link from './Components/Link/Link.theme';
 import Menu from './Components/Menu/Menu.theme';
 import Select from './Components/Select/Select.theme';
@@ -12,6 +13,7 @@ import Notification from './Components/Notification/Notification.theme';
 import Tooltip from './Components/Tooltip/Tooltip.theme';
 import CloseButton from './Components/CloseButton/CloseButton.theme';
 
+import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
 import radii from './Foundations/Radii/Radii';
 import shadows from './Foundations/Shadows/Shadows';
@@ -22,6 +24,7 @@ const theme = {
   config: {
     cssVarPrefix: '',
   },
+  breakpoints,
   colors,
   ...typography,
   radii,
@@ -57,6 +60,7 @@ const theme = {
     Card,
     ColorButton,
     Divider,
+    EmptyState,
     Link,
     Menu,
     Select,