@bitrise/bitkit 10.1.0 → 10.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "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
+      avatarUrl="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,51 @@
+import { Children } from 'react';
+import {
+  Breadcrumb as ChakraBreadcrumb,
+  BreadcrumbProps as ChakraBreadcrumbProps,
+  BreadcrumbItem,
+  BreadcrumbSeparator,
+  forwardRef,
+  useBreakpointValue,
+} from '@chakra-ui/react';
+import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
+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, ...rest } = props;
+  const isMobile = !!useBreakpointValue({ [BREAKPOINTS.MOBILE]: true, [BREAKPOINTS.DESKTOP]: false }, 'desktop');
+
+  const childrenCount = Children.count(children);
+  const items = Children.map(children, (child, index) => {
+    return (
+      <BreadcrumbItem>
+        {hasSeparatorBeforeFirst && index === 0 && <BreadcrumbSeparator marginLeft="0" />}
+        {child}
+        {hasSeparatorAfterLast && index === childrenCount - 1 && <BreadcrumbSeparator />}
+      </BreadcrumbItem>
+    );
+  });
+
+  const defaultIconName = isMobile ? 'ChevronLeft' : 'ChevronRight';
+  const properties = {
+    separator: <Icon name={separatorIconName || defaultIconName} color="neutral.70" size="16" />,
+    ...rest,
+  };
+  return (
+    <ChakraBreadcrumb {...properties} ref={ref}>
+      {items}
+    </ChakraBreadcrumb>
+  );
+});
+
+Breadcrumb.defaultProps = {};
+
+export default Breadcrumb;

package/src/Components/Breadcrumb/BreadcrumbLink.tsx

@@ -0,0 +1,34 @@
+import {
+  BreadcrumbLink as ChakraBreadcrumbLink,
+  BreadcrumbLinkProps as ChakraBreadcrumbLinkProps,
+  forwardRef,
+  useBreakpointValue,
+} from '@chakra-ui/react';
+import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
+import Avatar from '../Avatar/Avatar';
+
+export interface BreadcrumbLinkProps extends ChakraBreadcrumbLinkProps {
+  avatarName?: string;
+  avatarUrl?: string;
+}
+
+const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, 'a'>((props, ref) => {
+  const { avatarName, avatarUrl, children, isCurrentPage, ...rest } = props;
+  const isMobile = !!useBreakpointValue({ [BREAKPOINTS.MOBILE]: true, [BREAKPOINTS.DESKTOP]: false }, 'desktop');
+
+  const properties: ChakraBreadcrumbLinkProps = {
+    color: isCurrentPage ? 'neutral.40' : 'inherit',
+    isCurrentPage,
+    ...rest,
+  };
+  return (
+    <ChakraBreadcrumbLink {...properties} color={isCurrentPage ? 'neutral.40' : 'inherit'} ref={ref}>
+      {!isMobile && (avatarName || avatarUrl) && (
+        <Avatar name={avatarName || children?.toString()} src={avatarUrl} borderRadius="4" />
+      )}
+      {children}
+    </ChakraBreadcrumbLink>
+  );
+});
+
+export default BreadcrumbLink;

package/src/index.ts

@@ -133,4 +133,10 @@ 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';
+
 export { BREAKPOINTS } from './Foundations/Breakpoints/Breakpoints';

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,