@bitrise/bitkit 12.13.0 → 12.14.1

package/package.json

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

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

@@ -2,20 +2,13 @@ import type { SystemStyleObject } from '@chakra-ui/theme-tools';
 
 const BreadcrumbTheme: SystemStyleObject = {
   baseStyle: {
-    container: {
-      '> ol': {
-        display: 'flex',
-        alignItems: 'center',
-      },
+    list: {
+      display: 'flex',
+      alignItems: 'center',
     },
     item: {
       _last: {
         minWidth: 0,
-
-        '.breadcrumbLinkText': {
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-        },
       },
     },
     link: {
@@ -24,9 +17,19 @@ const BreadcrumbTheme: SystemStyleObject = {
       gap: '8',
       whiteSpace: 'nowrap',
       minWidth: 0,
+      _activeLink: {
+        color: 'neutral.10',
+      },
+    },
+    linkText: {
+      color: 'purple.50',
+      _groupHover: {
+        textDecoration: 'underline',
+      },
     },
     separator: {
       display: 'flex',
+      color: 'neutral.80',
     },
   },
 };

package/src/Components/Breadcrumb/Breadcrumb.tsx

@@ -35,7 +35,7 @@ const Breadcrumb = forwardRef<BreadcrumbProps, 'nav'>((props, ref) => {
 
   const defaultIconName = isMobile ? 'ChevronLeft' : 'ChevronRight';
   const properties = {
-    separator: <Icon name={separatorIconName || defaultIconName} color="neutral.70" size="16" />,
+    separator: <Icon name={separatorIconName || defaultIconName} size="24" />,
     ...rest,
   };
   return (
@@ -45,6 +45,4 @@ const Breadcrumb = forwardRef<BreadcrumbProps, 'nav'>((props, ref) => {
   );
 });
 
-Breadcrumb.defaultProps = {};
-
 export default Breadcrumb;

package/src/Components/Breadcrumb/BreadcrumbLink.tsx

@@ -2,10 +2,11 @@ import {
   BreadcrumbLink as ChakraBreadcrumbLink,
   BreadcrumbLinkProps as ChakraBreadcrumbLinkProps,
   forwardRef,
+  useMultiStyleConfig,
 } from '@chakra-ui/react';
 import Avatar from '../Avatar/Avatar';
 import { useResponsive } from '../../hooks';
-import Box from '../Box/Box';
+import Text from '../Text/Text';
 
 export interface BreadcrumbLinkProps extends ChakraBreadcrumbLinkProps {
   avatarName?: string;
@@ -17,18 +18,18 @@ const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, 'a'>((props, ref) => {
   const { isMobile } = useResponsive();
 
   const properties: ChakraBreadcrumbLinkProps = {
-    color: isCurrentPage ? 'neutral.40' : 'inherit',
     isCurrentPage,
     ...rest,
   };
+  const style = useMultiStyleConfig('Breadcrumb');
   return (
-    <ChakraBreadcrumbLink {...properties} color={isCurrentPage ? 'neutral.40' : 'inherit'} ref={ref}>
+    <ChakraBreadcrumbLink {...properties} role="group" ref={ref}>
       {!isMobile && (avatarName || avatarUrl) && (
         <Avatar name={avatarName || children?.toString()} src={avatarUrl} borderRadius="4" />
       )}
-      <Box as="span" className="breadcrumbLinkText">
+      <Text as="span" hasEllipsis sx={isCurrentPage ? undefined : style.linkText}>
         {children}
-      </Box>
+      </Text>
     </ChakraBreadcrumbLink>
   );
 });

package/src/Components/Icons/16x16/Siren.tsx

@@ -0,0 +1,17 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const Siren = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path d="m13 2h-2v4h2z" />
+    <path d="m12 13v-2c-.0145 0-.0289.0003-.0433.0009-2.72921.0234-4.93674 2.2335-4.95608 4.9637-.00041.0117-.00062.0235-.00062.0354h2v.0315c.00032-.0102-.00001-.0212 0-.0315 0-1.6567 1.3434-2.9997 3-3z" />
+    <path
+      clipRule="evenodd"
+      d="m12 8c-4.41828 0-8 3.5817-8 8v4h-2v2h20v-2h-2v-4c0-4.4183-3.5817-8-8-8zm6 12h-12v-4c0-3.3137 2.68629-6 6-6 3.3137 0 6 2.6863 6 6z"
+      fillRule="evenodd"
+    />
+    <path d="m2.87891 5.29297 1.41421-1.41421 2.82843 2.82842-1.41422 1.41422z" />
+    <path d="m21.2427 5.29297-1.4142-1.41421-2.8285 2.82842 1.4142 1.41422z" />
+  </Icon>
+));
+
+export default Siren;

package/src/Components/Icons/16x16/index.ts

@@ -152,6 +152,7 @@ export { default as Settings } from './Settings';
 export { default as Ship } from './Ship';
 export { default as ShowPassword } from './ShowPassword';
 export { default as Shuffle } from './Shuffle';
+export { default as Siren } from './Siren';
 export { default as Sort } from './Sort';
 export { default as Stability } from './Stability';
 export { default as Stack } from './Stack';

package/src/Components/Icons/24x24/Siren.tsx

@@ -0,0 +1,17 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const Siren = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path d="m13 2h-2v4h2z" />
+    <path d="m12 13v-2c-.0145 0-.0289.0003-.0433.0009-2.72921.0234-4.93674 2.2335-4.95608 4.9637-.00041.0117-.00062.0235-.00062.0354h2v.0315c.00032-.0102-.00001-.0212 0-.0315 0-1.6567 1.3434-2.9997 3-3z" />
+    <path
+      clipRule="evenodd"
+      d="m12 8c-4.41828 0-8 3.5817-8 8v4h-2v2h20v-2h-2v-4c0-4.4183-3.5817-8-8-8zm6 12h-12v-4c0-3.3137 2.68629-6 6-6 3.3137 0 6 2.6863 6 6z"
+      fillRule="evenodd"
+    />
+    <path d="m2.87891 5.29297 1.41421-1.41421 2.82843 2.82842-1.41422 1.41422z" />
+    <path d="m21.2427 5.29297-1.4142-1.41421-2.8285 2.82842 1.4142 1.41422z" />
+  </Icon>
+));
+
+export default Siren;

package/src/Components/Icons/24x24/index.ts

@@ -152,6 +152,7 @@ export { default as Settings } from './Settings';
 export { default as Ship } from './Ship';
 export { default as ShowPassword } from './ShowPassword';
 export { default as Shuffle } from './Shuffle';
+export { default as Siren } from './Siren';
 export { default as Sort } from './Sort';
 export { default as Stability } from './Stability';
 export { default as Stack } from './Stack';