@bitrise/bitkit 9.40.0 → 9.41.0-alpha-chakra.1

package/package.json

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

package/src/Components/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,30 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Breadcrumb from './Breadcrumb';
+import BreadcrumbLink from './BreadcrumbLink';
+
+export default {
+  title: 'Components/Breadcrumb',
+  component: Breadcrumb,
+  subcomponents: { BreadcrumbLink },
+} as ComponentMeta<typeof Breadcrumb>;
+
+const Template: ComponentStory<typeof Breadcrumb> = (props) => (
+  <Breadcrumb {...props}>
+    <BreadcrumbLink
+      avatarSrc="https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png"
+      href="#"
+    >
+      Bitrise #Core
+    </BreadcrumbLink>
+    <BreadcrumbLink avatarName="Bitkit" href="#">
+      bitkit
+    </BreadcrumbLink>
+    <BreadcrumbLink isCurrentPage>settings</BreadcrumbLink>
+  </Breadcrumb>
+);
+
+export const WithProps = Template.bind({});
+WithProps.args = {
+  hasSeparatorAfterLast: false,
+  hasSeparatorBeforeFirst: false,
+};

package/src/Components/Breadcrumb/Breadcrumb.theme.ts

@@ -0,0 +1,25 @@
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+
+const BreadcrumbTheme: SystemStyleObject = {
+  baseStyle: {
+    container: {
+      '> ol': {
+        display: 'flex',
+        alignItems: 'center',
+      },
+    },
+    link: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8',
+      '[aria-current]': {
+        color: 'red',
+      },
+    },
+    separator: {
+      display: 'flex',
+    },
+  },
+};
+
+export default BreadcrumbTheme;

package/src/Components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,54 @@
+import { Children } from 'react';
+import {
+  Breadcrumb as ChakraBreadcrumb,
+  BreadcrumbProps as ChakraBreadcrumbProps,
+  BreadcrumbItem,
+  BreadcrumbSeparator,
+  forwardRef,
+} from '@chakra-ui/react';
+import Icon, { TypeIconName } from '../Icon/Icon';
+
+export interface BreadcrumbProps extends ChakraBreadcrumbProps {
+  hasSeparatorAfterLast?: boolean;
+  hasSeparatorBeforeFirst?: boolean;
+  separatorIconName?: TypeIconName;
+}
+
+/**
+ * Breadcrumbs is a navigation pattern that helps users understand the hierarchy of a website.
+ */
+const Breadcrumb = forwardRef<BreadcrumbProps, 'nav'>((props, ref) => {
+  const {
+    children,
+    hasSeparatorAfterLast,
+    hasSeparatorBeforeFirst,
+    separatorIconName = 'ChevronRight',
+    ...rest
+  } = props;
+  const childrenCount = Children.count(children);
+  const items = Children.map(children, (child, index) => {
+    return (
+      <BreadcrumbItem>
+        {hasSeparatorBeforeFirst && index === 0 && <BreadcrumbSeparator />}
+        {child}
+        {hasSeparatorAfterLast && index === childrenCount - 1 && <BreadcrumbSeparator />}
+      </BreadcrumbItem>
+    );
+  });
+
+  const properties = {
+    separator: <Icon name={separatorIconName} textColor="neutral.70" size="16" />,
+    ...rest,
+  };
+  return (
+    <ChakraBreadcrumb {...properties} ref={ref}>
+      {items}
+    </ChakraBreadcrumb>
+  );
+});
+
+Breadcrumb.defaultProps = {
+  separatorIconName: 'ChevronRight',
+};
+
+export default Breadcrumb;

package/src/Components/Breadcrumb/BreadcrumbLink.tsx

@@ -0,0 +1,30 @@
+import {
+  BreadcrumbLink as ChakraBreadcrumbLink,
+  BreadcrumbLinkProps as ChakraBreadcrumbLinkProps,
+  forwardRef,
+} from '@chakra-ui/react';
+import Avatar from '../Avatar/Avatar';
+
+export interface BreadcrumbLinkProps extends ChakraBreadcrumbLinkProps {
+  avatarName?: string;
+  avatarSrc?: string;
+}
+
+const Breadcrumb = forwardRef<BreadcrumbLinkProps, 'a'>((props, ref) => {
+  const { avatarName, avatarSrc, children, isCurrentPage, ...rest } = props;
+  const properties: ChakraBreadcrumbLinkProps = {
+    color: isCurrentPage ? 'neutral.40' : 'inherit',
+    isCurrentPage,
+    ...rest,
+  };
+  return (
+    <ChakraBreadcrumbLink {...properties} color={isCurrentPage ? 'neutral.40' : 'inherit'} ref={ref}>
+      {(avatarName || avatarSrc) && (
+        <Avatar name={avatarName || children?.toString()} src={avatarSrc} borderRadius="4" />
+      )}
+      {children}
+    </ChakraBreadcrumbLink>
+  );
+});
+
+export default Breadcrumb;

package/src/Components/Form/Checkbox/CheckboxGroup.tsx

@@ -1,7 +1,7 @@
 import { CheckboxGroup as ChakraCheckboxGroup, CheckboxGroupProps as ChakraCheckboxGroupProps } from '@chakra-ui/react';
 import Box, { BoxProps } from '../../Box/Box';
 
-export type CheckboxGroupProps = ChakraCheckboxGroupProps & BoxProps;
+export type CheckboxGroupProps = ChakraCheckboxGroupProps & Omit<BoxProps, 'onChange'>;
 
 /**
  * CheckboxGroup component to help manage the checked state of its children Checkbox components and conveniently pass a few shared style props to each.

package/src/Components/Form/Radio/RadioGroup.tsx

@@ -1,7 +1,7 @@
 import { RadioGroup as ChakraRadioGroup, RadioGroupProps as ChakraRadioGroupProps } from '@chakra-ui/react';
 import Box, { BoxProps } from '../../Box/Box';
 
-export type RadioGroupProps = ChakraRadioGroupProps & BoxProps;
+export type RadioGroupProps = ChakraRadioGroupProps & Omit<BoxProps, 'onChange'>;
 
 /**
  * RadioGroup component to help manage Radio components and conveniently pass a few shared style props to each.

package/src/index.ts

@@ -132,3 +132,9 @@ export { default as RadioGroup } from './Components/Form/Radio/RadioGroup';
 
 export type { ImageProps } from './Components/Image/Image';
 export { default as Image } from './Components/Image/Image';
+
+export type { BreadcrumbProps } from './Components/Breadcrumb/Breadcrumb';
+export { default as Breadcrumb } from './Components/Breadcrumb/Breadcrumb';
+
+export type { BreadcrumbLinkProps } from './Components/Breadcrumb/BreadcrumbLink';
+export { default as BreadcrumbLink } from './Components/Breadcrumb/BreadcrumbLink';

package/src/theme.ts

@@ -1,5 +1,6 @@
 import Avatar from './Components/Avatar/Avatar.theme';
 import Badge from './Components/Badge/Badge.theme';
+import Breadcrumb from './Components/Breadcrumb/Breadcrumb.theme';
 import Button from './Components/Button/Button.theme';
 import Card from './Components/Card/Card.theme';
 import Checkbox from './Components/Form/Checkbox/Checkbox.theme';
@@ -65,6 +66,7 @@ const theme = {
   components: {
     Avatar,
     Badge,
+    Breadcrumb,
     Button,
     Card,
     Checkbox,