@bitrise/bitkit 9.17.0-alpha-chakra.3 → 9.17.0-alpha-badge.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.17.0-alpha-chakra.3",
+  "version": "9.17.0-alpha-badge.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -55,7 +55,7 @@
     "@babel/core": "^7.18.2",
     "@bitrise/eslint-plugin": "^2.1.0",
     "@chakra-ui/cli": "^1.9.0",
-    "@chakra-ui/storybook-addon": "^1.0.3",
+    "@chakra-ui/storybook-addon": "^3.0.2",
     "@commitlint/cli": "^16.3.0",
     "@commitlint/config-conventional": "^16.2.4",
     "@google-cloud/storage": "^5.19.4",

package/src/Components/Badge/Badge.stories.tsx

@@ -0,0 +1,13 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Badge from './Badge';
+
+export default {
+  title: 'Components/Badge',
+  component: Badge,
+} as ComponentMeta<typeof Badge>;
+
+export const WithProps: ComponentStory<typeof Badge> = (props) => <Badge {...props} />;
+WithProps.args = {
+  children: 'Coming soon',
+  ...Badge.defaultProps,
+};

package/src/Components/Badge/Badge.theme.ts

@@ -0,0 +1,15 @@
+const BadgeTheme = {
+  baseStyle: {
+    display: 'inline-block',
+    paddingX: '8',
+    paddingY: '3',
+    fontSize: '1',
+    lineHeight: '1',
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+    borderRadius: '4',
+    cursor: 'default',
+  },
+};
+
+export default BadgeTheme;

package/src/Components/Badge/Badge.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Badge as ChakraBadge, BadgeProps as ChakraBadgeProps } from '@chakra-ui/react';
+
+export type BadgeProps = ChakraBadgeProps;
+
+/**
+ * Badges are used to highlight an item's status for quick recognition.
+ */
+const Badge = (props: BadgeProps) => {
+  return <ChakraBadge {...props} />;
+};
+
+Badge.defaultProps = {
+  color: 'neutral.100',
+  backgroundColor: 'purple.40',
+} as BadgeProps;
+
+export default Badge;

package/src/index.ts

@@ -1,7 +1,6 @@
 export * from './old';
 export * from './types/chakra';
 export * from './utils/chakra';
-export * from './hooks';
 
 export type { LinkProps } from './Components/Link/Link';
 export { default as Link } from './Components/Link/Link';
@@ -38,18 +37,3 @@ export { default as Box } from './Components/Box/Box';
 
 export type { ColorButtonProps } from './Components/ColorButton/ColorButton';
 export { default as ColorButton } from './Components/ColorButton/ColorButton';
-
-export type { TabsProps } from './Components/Tabs/Tabs';
-export { default as Tabs } from './Components/Tabs/Tabs';
-
-export type { TabListProps } from './Components/Tabs/TabList';
-export { default as TabList } from './Components/Tabs/TabList';
-
-export type { TabProps } from './Components/Tabs/Tab';
-export { default as Tab } from './Components/Tabs/Tab';
-
-export type { TabPanelsProps } from './Components/Tabs/TabPanels';
-export { default as TabPanels } from './Components/Tabs/TabPanels';
-
-export type { TabPanelProps } from './Components/Tabs/TabPanel';
-export { default as TabPanel } from './Components/Tabs/TabPanel';

package/src/old.ts

@@ -226,6 +226,12 @@ export { default as TableHeaderRow } from './Old/Table/TableHeaderRow';
 export type { Props as TableRowProps } from './Old/Table/TableRow';
 export { default as TableRow } from './Old/Table/TableRow';
 
+export type { Props as TabProps } from './Old/Tabs/Tab';
+export { default as Tab } from './Old/Tabs/Tab';
+
+export type { Props as TabsProps } from './Old/Tabs/Tabs';
+export { default as Tabs } from './Old/Tabs/Tabs';
+
 export type { Props as TextareaProps } from './Old/Textarea/Textarea';
 export { default as Textarea } from './Old/Textarea/Textarea';
 

package/src/theme.ts

@@ -1,10 +1,10 @@
+import Badge from './Components/Badge/Badge.theme';
 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 Link from './Components/Link/Link.theme';
 import Menu from './Components/Menu/Menu.theme';
-import Tabs from './Components/Tabs/Tabs.theme';
 import Text from './Components/Text/Text.theme';
 
 import colors from './Foundations/Colors/Colors';
@@ -47,13 +47,13 @@ const theme = {
     },
   },
   components: {
+    Badge,
     Button,
     Card,
     ColorButton,
     Divider,
     Link,
     Menu,
-    Tabs,
     Text,
   },
 };