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

package/package.json

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

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

@@ -11,7 +11,7 @@ export default {
 const Template: ComponentStory<typeof Breadcrumb> = (props) => (
   <Breadcrumb {...props}>
     <BreadcrumbLink
-      avatarSrc="https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png"
+      avatarUrl="https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png"
       href="#"
     >
       Bitrise #Core

package/src/Components/Breadcrumb/Breadcrumb.tsx

@@ -5,6 +5,7 @@ import {
   BreadcrumbItem,
   BreadcrumbSeparator,
   forwardRef,
+  useBreakpointValue,
 } from '@chakra-ui/react';
 import Icon, { TypeIconName } from '../Icon/Icon';
 
@@ -18,13 +19,9 @@ export interface BreadcrumbProps extends ChakraBreadcrumbProps {
  * 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 { children, hasSeparatorAfterLast, hasSeparatorBeforeFirst, separatorIconName, ...rest } = props;
+  const isMobile = !!useBreakpointValue({ mobile: true, desktop: false }, 'desktop');
+
   const childrenCount = Children.count(children);
   const items = Children.map(children, (child, index) => {
     return (
@@ -36,8 +33,9 @@ const Breadcrumb = forwardRef<BreadcrumbProps, 'nav'>((props, ref) => {
     );
   });
 
+  const defaultIconName = isMobile ? 'ChevronLeft' : 'ChevronRight';
   const properties = {
-    separator: <Icon name={separatorIconName} textColor="neutral.70" size="16" />,
+    separator: <Icon name={separatorIconName || defaultIconName} color="neutral.70" size="16" />,
     ...rest,
   };
   return (
@@ -47,8 +45,6 @@ const Breadcrumb = forwardRef<BreadcrumbProps, 'nav'>((props, ref) => {
   );
 });
 
-Breadcrumb.defaultProps = {
-  separatorIconName: 'ChevronRight',
-};
+Breadcrumb.defaultProps = {};
 
 export default Breadcrumb;

package/src/Components/Breadcrumb/BreadcrumbLink.tsx

@@ -2,16 +2,19 @@ import {
   BreadcrumbLink as ChakraBreadcrumbLink,
   BreadcrumbLinkProps as ChakraBreadcrumbLinkProps,
   forwardRef,
+  useBreakpointValue,
 } from '@chakra-ui/react';
 import Avatar from '../Avatar/Avatar';
 
 export interface BreadcrumbLinkProps extends ChakraBreadcrumbLinkProps {
   avatarName?: string;
-  avatarSrc?: string;
+  avatarUrl?: string;
 }
 
 const Breadcrumb = forwardRef<BreadcrumbLinkProps, 'a'>((props, ref) => {
-  const { avatarName, avatarSrc, children, isCurrentPage, ...rest } = props;
+  const { avatarName, avatarUrl, children, isCurrentPage, ...rest } = props;
+  const isMobile = !!useBreakpointValue({ mobile: true, desktop: false }, 'desktop');
+
   const properties: ChakraBreadcrumbLinkProps = {
     color: isCurrentPage ? 'neutral.40' : 'inherit',
     isCurrentPage,
@@ -19,8 +22,8 @@ const Breadcrumb = forwardRef<BreadcrumbLinkProps, 'a'>((props, ref) => {
   };
   return (
     <ChakraBreadcrumbLink {...properties} color={isCurrentPage ? 'neutral.40' : 'inherit'} ref={ref}>
-      {(avatarName || avatarSrc) && (
-        <Avatar name={avatarName || children?.toString()} src={avatarSrc} borderRadius="4" />
+      {!isMobile && (avatarName || avatarUrl) && (
+        <Avatar name={avatarName || children?.toString()} src={avatarUrl} borderRadius="4" />
       )}
       {children}
     </ChakraBreadcrumbLink>