@bitrise/bitkit 12.20.3 → 12.21.0

package/package.json

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

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

@@ -0,0 +1,32 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const GoogleColor = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 18 24" fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M21.0399 12.2046C21.0399 11.5664 20.9826 10.9527 20.8763 10.3636H12.3999V13.845H17.2435C17.0349 14.97 16.4008 15.9232 15.4476 16.5614V18.8196H18.3563C20.0581 17.2527 21.0399 14.9455 21.0399 12.2046Z"
+      fill="#4285F4"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.3999 21C14.8299 21 16.8672 20.1941 18.3563 18.8195L15.4476 16.5613C14.6417 17.1013 13.6108 17.4204 12.3999 17.4204C10.0558 17.4204 8.07172 15.8372 7.364 13.71H4.35718V16.0418C5.83809 18.9831 8.88172 21 12.3999 21Z"
+      fill="#34A853"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.36399 13.7099C7.18399 13.1699 7.08172 12.5931 7.08172 11.9999C7.08172 11.4068 7.18399 10.8299 7.36399 10.2899V7.95813H4.35718C3.74763 9.17313 3.3999 10.5477 3.3999 11.9999C3.3999 13.4522 3.74763 14.8268 4.35718 16.0418L7.36399 13.7099Z"
+      fill="#FBBC05"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.3999 6.57955C13.7213 6.57955 14.9076 7.03364 15.8404 7.92545L18.4217 5.34409C16.8631 3.89182 14.8258 3 12.3999 3C8.88172 3 5.83809 5.01682 4.35718 7.95818L7.364 10.29C8.07172 8.16273 10.0558 6.57955 12.3999 6.57955Z"
+      fill="#EA4335"
+    />
+  </Icon>
+));
+
+export default GoogleColor;

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

@@ -89,6 +89,7 @@ export { default as GitlabPlain } from './GitlabPlain';
 export { default as GitlabShadedWhite } from './GitlabShadedWhite';
 export { default as Globe } from './Globe';
 export { default as Go } from './Go';
+export { default as GoogleColor } from './GoogleColor';
 export { default as Group } from './Group';
 export { default as Heart } from './Heart';
 export { default as HidePassword } from './HidePassword';

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

@@ -0,0 +1,32 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const GoogleColor = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M21.0399 12.2046C21.0399 11.5664 20.9826 10.9527 20.8763 10.3636H12.3999V13.845H17.2435C17.0349 14.97 16.4008 15.9232 15.4476 16.5614V18.8196H18.3563C20.0581 17.2527 21.0399 14.9455 21.0399 12.2046Z"
+      fill="#4285F4"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.3999 21C14.8299 21 16.8672 20.1941 18.3563 18.8195L15.4476 16.5613C14.6417 17.1013 13.6108 17.4204 12.3999 17.4204C10.0558 17.4204 8.07172 15.8372 7.364 13.71H4.35718V16.0418C5.83809 18.9831 8.88172 21 12.3999 21Z"
+      fill="#34A853"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.36399 13.7099C7.18399 13.1699 7.08172 12.5931 7.08172 11.9999C7.08172 11.4068 7.18399 10.8299 7.36399 10.2899V7.95813H4.35718C3.74763 9.17313 3.3999 10.5477 3.3999 11.9999C3.3999 13.4522 3.74763 14.8268 4.35718 16.0418L7.36399 13.7099Z"
+      fill="#FBBC05"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.3999 6.57955C13.7213 6.57955 14.9076 7.03364 15.8404 7.92545L18.4217 5.34409C16.8631 3.89182 14.8258 3 12.3999 3C8.88172 3 5.83809 5.01682 4.35718 7.95818L7.364 10.29C8.07172 8.16273 10.0558 6.57955 12.3999 6.57955Z"
+      fill="#EA4335"
+    />
+  </Icon>
+));
+
+export default GoogleColor;

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

@@ -89,6 +89,7 @@ export { default as GitlabPlain } from './GitlabPlain';
 export { default as GitlabShadedWhite } from './GitlabShadedWhite';
 export { default as Globe } from './Globe';
 export { default as Go } from './Go';
+export { default as GoogleColor } from './GoogleColor';
 export { default as Group } from './Group';
 export { default as Heart } from './Heart';
 export { default as HidePassword } from './HidePassword';

package/src/Components/Notification/Notification.tsx

@@ -66,7 +66,7 @@ const Notification = forwardRef<NotificationProps, 'div'>((props, ref) => {
   let actionButton;
   const actionPlacement = action?.placement ?? 'end';
   if (action) {
-    actionButton = <NotificationAction marginRight="12" {...action} alignSelf="center" />;
+    actionButton = <NotificationAction marginRight="12" {...action} alignSelf={['start', 'center']} />;
   }
   const actionContext = useMemo(() => ({ colorScheme }), [colorScheme]);
   // This is needed when the actionButton is rendered with a one-liner text.
@@ -76,10 +76,12 @@ const Notification = forwardRef<NotificationProps, 'div'>((props, ref) => {
     <ChakraAlert ref={ref} {...rest} colorScheme={colorScheme}>
       <ActionContext.Provider value={actionContext}>
         {showIcon && cloneElement(icon, { flexShrink: 0, marginTop })}
-        <Box wordBreak="break-word" flexGrow={actionPlacement === 'end' ? 1 : undefined} marginTop={marginTop}>
-          {children}
+        <Box display="flex" justifyContent="start" flexDirection={['column', 'row']} gap={16} flexGrow={1}>
+          <Box wordBreak="break-word" flexGrow={actionPlacement === 'end' ? 1 : undefined} marginTop={marginTop}>
+            {children}
+          </Box>
+          {actionButton}
         </Box>
-        {actionButton}
         {onClose && (
           <CloseButton
             flexShrink={0}