feat: add Collapsible component

ui/components/package.json

@@ -30,6 +30,7 @@
   "license": "MIT",
   "dependencies": {
     "react": "^16.8.3",
+    "react-animate-height": "^2.0.20",
     "react-dom": "^16.8.3",
     "react-popper-tooltip": "^2.10.1",
     "react-tabs": "^3.1.0",

ui/components/src/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Box, Button } from 'theme-ui';
+import { Collapsible } from './Collapsible';
+
+export default {
+  title: 'Components/Collapsible',
+  component: Collapsible,
+};
+
+export const simple = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  return (
+    <Box>
+      <Button onClick={() => setIsOpen(!isOpen)}>
+        {isOpen ? 'close' : 'open'}
+      </Button>
+      <Collapsible isOpen={isOpen}>content</Collapsible>
+    </Box>
+  );
+};

ui/components/src/Collapsible/Collapsible.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import AnimateHeight, { AnimateHeightProps } from 'react-animate-height';
+
+export type CollapsibleProps = AnimateHeightProps & {
+  isOpen: boolean;
+};
+export const Collapsible: FC<CollapsibleProps> = ({
+  children,
+  isOpen,
+  ...rest
+}) => {
+  return (
+    <AnimateHeight {...rest} height={isOpen ? 'auto' : 0}>
+      {children}
+    </AnimateHeight>
+  );
+};

yarn.lock

@@ -13280,6 +13280,14 @@ rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-animate-height@^2.0.20:
+  version "2.0.20"
+  resolved "https://registry.yarnpkg.com/react-animate-height/-/react-animate-height-2.0.20.tgz#e519c33a41cb39c071e8115bb3c4f9daad6c703f"
+  integrity sha512-gs6j9oSiWNAnquEVpPMdTe/kwsdVORkRYsgPju4VfM1wKwai7pdmwob//1ECmCQTD8S0NfRDDBk0l7MJGFNmbw==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.1"
+
 react-clientside-effect@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"