@bitrise/bitkit 12.45.0 → 12.46.0

package/package.json

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

package/src/Components/Note/Note.theme.ts

@@ -21,13 +21,14 @@ const decorationColor = {
   success: 'green.50',
 };
 const NoteTheme = {
-  parts: ['container', 'icon', 'body'],
-  baseStyle({ status }: { status: Status }) {
+  parts: ['container', 'icon', 'body', 'buttonContainer'],
+  baseStyle({ isExpanded, status }: { isExpanded: boolean; status: Status }) {
     return {
       wrapper: {
         display: 'flex',
         boxShadow: 'medium',
         borderRadius: '8',
+        position: 'relative',
       },
       decoration: {
         color: decorationColor[status],
@@ -46,13 +47,30 @@ const NoteTheme = {
         flexGrow: 1,
         paddingTop: '24',
         paddingRight: '24',
-        paddingBottom: '32',
+        paddingBottom: ['80', '32'],
         paddingLeft: '16',
         borderTopRightRadius: '8',
         borderBottomRightRadius: '8',
         borderWidth: '1px',
         borderLeft: 'none',
         borderColor: borderColor[status],
+        overflow: 'hidden',
+      },
+      buttonContainer: {
+        position: 'absolute',
+        left: isExpanded ? 'auto' : '40px',
+        right: 1,
+        bottom: 1,
+        textAlign: 'right',
+        paddingX: '24',
+        paddingTop: '80',
+        paddingBottom: '16',
+        background: isExpanded ? undefined : 'linear-gradient(0deg, #FFF 12.57%, rgba(255, 255, 255, 0.00) 100%)',
+        borderBottomRadius: '8',
+        svg: {
+          transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+          transition: '300ms',
+        },
       },
     };
   },

package/src/Components/Note/Note.tsx

@@ -1,7 +1,9 @@
-import { ReactNode } from 'react';
+import { useState, ReactNode } from 'react';
 import { useMultiStyleConfig } from '@chakra-ui/react';
 import Box from '../Box/Box';
+import Collapse from '../Collapse/Collapse';
 import Icon from '../Icon/Icon';
+import Button from '../Button/Button';
 
 export type Status = 'info' | 'success' | 'error' | 'warning';
 const iconNames = {
@@ -10,14 +12,54 @@ const iconNames = {
   error: 'ErrorGeneral',
   warning: 'Warning',
 } as const;
-const Note = ({ children, status }: { children: ReactNode; status: Status }) => {
-  const { container, decoration, wrapper } = useMultiStyleConfig('Note', { status });
+
+export type NoteProps = {
+  children: ReactNode;
+  startingHeight?: number;
+  status: Status;
+};
+
+type ContainerProps = { children: ReactNode; isExpanded: boolean; startingHeight?: number };
+
+const Container = ({ children, isExpanded, startingHeight }: ContainerProps) => {
+  if (startingHeight) {
+    return (
+      <Collapse
+        in={isExpanded}
+        startingHeight={startingHeight}
+        transition={{ enter: { duration: 0.5 }, exit: { duration: 0.5 } }}
+      >
+        {children}
+      </Collapse>
+    );
+  }
+  return <>{children}</>;
+};
+
+const Note = ({ children, startingHeight, status }: NoteProps) => {
+  const [isExpanded, setExpanded] = useState(false);
+  const { buttonContainer, container, decoration, wrapper } = useMultiStyleConfig('Note', {
+    isExpanded,
+    status,
+  });
+
   return (
     <Box __css={wrapper}>
       <Box __css={decoration}>
         <Icon size="24" name={iconNames[status]} />
       </Box>
-      <Box __css={container}>{children}</Box>
+      <Box __css={container}>
+        <Container isExpanded={isExpanded} startingHeight={startingHeight}>
+          {children}
+        </Container>
+      </Box>
+      {!!startingHeight && (
+        <Box __css={buttonContainer}>
+          <Button leftIconName="ChevronDown" onClick={() => setExpanded(!isExpanded)} size="small" variant="secondary">
+            {isExpanded ? 'Show less' : 'Show more'}
+          </Button>
+        </Box>
+      )}
     </Box>
   );
 };

package/src/index.ts

@@ -283,6 +283,7 @@ export { default as SelectableRow } from './Components/Table/SelectableRow';
 export type { TagProps } from './Components/Tag/Tag';
 export { default as Tag } from './Components/Tag/Tag';
 
+export type { NoteProps } from './Components/Note/Note';
 export { default as Note } from './Components/Note/Note';
 export { default as MarkdownContent } from './Components/Note/NoteMarkdownContent';
 export { default as CodeBlock } from './Components/CodeBlock/CodeBlock';