Added collapsible elements

src/components/Collapsible/CollapsibleToggle.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react'
+import useCollapsibleState from './useCollapsibleState'
+import Clickable, { ClickableProps } from '../Clickable'
+
+const CollapsibleToggle: FC<CollapsibleToggleProps> = ({
+  toggle,
+  children,
+  ...props
+}) => {
+  return (
+    <Clickable onClick={toggle} {...props}>
+      {children}
+    </Clickable>
+  )
+}
+
+export type CollapsibleToggleProps = ReturnType<typeof useCollapsibleState> &
+  ClickableProps
+
+export default CollapsibleToggle

src/components/Collapsible/collapsible.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import Collapsible from './index'
+import CollapsibleToggle from './CollapsibleToggle'
+import { AdaptProvider } from '..'
+import useCollapsibleState from './useCollapsibleState'
+
+export default {
+  title: 'Collapsible',
+  decorators: [storyFn => <AdaptProvider>{storyFn()}</AdaptProvider>],
+}
+
+export const basic = () => {
+  const collapse = useCollapsibleState()
+  return (
+    <>
+      <CollapsibleToggle {...collapse}>Toggle</CollapsibleToggle>
+      <Collapsible {...collapse}>Hello Button</Collapsible>
+    </>
+  )
+}

src/components/Collapsible/index.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react'
+import Box, { BoxProps } from '../Box'
+
+const Collapsible: FC<CollapsibleProps> = ({
+  collapsed,
+  children,
+  ...props
+}) => {
+  return collapsed ? <Box {...props}>{children}</Box> : null
+}
+
+export type CollapsibleProps = { collapsed?: boolean } & BoxProps
+
+export default Collapsible

src/components/Collapsible/useCollapsibleState.tsx

@@ -0,0 +1,24 @@
+import { useState, useCallback } from 'react'
+
+export default function useCollapsibleState(initalState: boolean = false) {
+  const [collapsed, setCollapsed] = useState<boolean>(initalState)
+
+  const toggle = useCallback(() => {
+    setCollapsed(!collapsed)
+  }, [collapsed])
+
+  const collapse = useCallback(() => {
+    setCollapsed(true)
+  }, [collapsed])
+
+  const uncollapse = useCallback(() => {
+    setCollapsed(false)
+  }, [collapsed])
+
+  return {
+    collapsed,
+    toggle,
+    collapse,
+    uncollapse,
+  }
+}

src/components/index.ts

@@ -12,6 +12,10 @@ import Input from './Forms/Input'
 import Label from './Forms/Label'
 import Spinner from './Spinner'
 
+import Collapsible from './Collapsible'
+import CollapsibleToggle from './Collapsible/CollapsibleToggle'
+import useCollapsibleState from './Collapsible/useCollapsibleState'
+
 export {
   Box,
   Clickable,
@@ -24,4 +28,7 @@ export {
   Paragraph,
   Input,
   Label,
+  Collapsible,
+  CollapsibleToggle,
+  useCollapsibleState,
 }