@bitrise/bitkit 9.21.0-alpha-chakra.3 → 9.22.0

package/package.json

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

package/src/Components/Select/Select.stories.tsx

@@ -0,0 +1,38 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { sortObjectByKey } from '../../utils/storyUtils';
+import Select from './Select';
+
+export default {
+  title: 'Components/Select',
+  component: Select,
+  argTypes: {
+    onChange: {
+      action: 'onChange event',
+    },
+  },
+} as ComponentMeta<typeof Select>;
+
+const args = {
+  ...Select.defaultProps,
+  isDisabled: false,
+  isInvalid: false,
+  isRequired: false,
+};
+
+const children = (
+  <>
+    <option value="all">All status</option>
+    <option value="successful">Successful</option>
+    <option value="failed">Failed</option>
+    <option value="aborted">Aborted</option>
+    <option value="on_hold">On hold</option>
+  </>
+);
+
+const Template: ComponentStory<typeof Select> = (props) => <Select {...props}>{children}</Select>;
+
+export const WithProps = Template.bind({});
+WithProps.args = sortObjectByKey({
+  ...args,
+  placeholder: 'Select build status',
+});

package/src/Components/Select/Select.theme.ts

@@ -0,0 +1,51 @@
+const SelectTheme = {
+  baseStyle: {
+    field: {
+      appearance: 'none',
+      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
+      border: '0.0625rem solid',
+      borderColor: 'neutral.90',
+      borderRadius: '4',
+      color: 'purple.10',
+      position: 'relative',
+      width: '100%',
+      _hover: {
+        bgGradient: 'linear(to-b, neutral.93, neutral.93)',
+      },
+      _active: {
+        bgGradient: 'linear(to-b, neutral.90, neutral.90)',
+        borderColor: 'neutral.80',
+      },
+      _disabled: {
+        color: 'neutral.70',
+        pointerEvents: 'none',
+      },
+    },
+    icon: {
+      right: '8',
+      _disabled: {
+        opacity: '0.2',
+      },
+    },
+  },
+  sizes: {
+    small: {
+      field: {
+        fontSize: '2',
+        height: '32',
+        paddingLeft: '12',
+        paddingRight: '32',
+      },
+    },
+    medium: {
+      field: {
+        fontSize: '3',
+        height: '48',
+        paddingLeft: '16',
+        paddingRight: '32',
+      },
+    },
+  },
+};
+
+export default SelectTheme;

package/src/Components/Select/Select.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Select as ChakraSelect, SelectProps as ChakraSelectProps } from '@chakra-ui/react';
+import Icon, { TypeIconName } from '../Icon/Icon';
+
+export interface SelectProps extends ChakraSelectProps {
+  iconName?: TypeIconName;
+  size?: 'small' | 'medium';
+}
+
+const Select = (props: SelectProps) => {
+  const { iconName = 'DropdownArrows', size, ...rest } = props;
+  const iconSize = size === 'medium' ? '24' : '16';
+  const properties: ChakraSelectProps = {
+    icon: <Icon name={iconName} fontSize={iconSize} size={iconSize} />,
+    size,
+    variant: 'select',
+    ...rest,
+  };
+  return <ChakraSelect {...properties} />;
+};
+
+Select.defaultProps = {
+  iconName: 'DropdownArrows',
+  size: 'medium',
+} as SelectProps;
+
+export default Select;

package/src/index.ts

@@ -65,3 +65,6 @@ export { default as IconButton } from './Components/IconButton/IconButton';
 
 export type { TooltipProps } from './Components/Tooltip/Tooltip';
 export { default as Tooltip } from './Components/Tooltip/Tooltip';
+
+export type { SelectProps } from './Components/Select/Select';
+export { default as Select } from './Components/Select/Select';

package/src/theme.ts

@@ -5,6 +5,7 @@ import ColorButton from './Components/ColorButton/ColorButton.theme';
 import Divider from './Components/Divider/Divider.theme';
 import Link from './Components/Link/Link.theme';
 import Menu from './Components/Menu/Menu.theme';
+import Select from './Components/Select/Select.theme';
 import Tabs from './Components/Tabs/Tabs.theme';
 import Text from './Components/Text/Text.theme';
 import Tooltip from './Components/Tooltip/Tooltip.theme';
@@ -56,6 +57,7 @@ const theme = {
     Divider,
     Link,
     Menu,
+    Select,
     Tabs,
     Text,
     Tooltip,