# Info Drawer

A right hand drawer information drawer. This feature consists of the `<InfoDrawer />` component itself -- which will need to be placed once somewhere in your application, an `<InfoDrawerProvider />` component which needs to be rendered higher up in the tree than the `<InfoDrawer />` component and any component that wishes to manage the drawer, and a `useInfoDrawer` hook that allows the consumer to set the drawers `title`, `content`, and `isOpen` state.

## <InfoDrawer />

The UI for the actual information drawer. You will likely want to render this fairly high up in your render tree. The `<InfoDrawer>` component accepts three props: `variation`, `heightVariation`, and `className`

### Props

#### orientBottom

The `orientBottom` prop allows the consumer to have the info drawer on the bottom of the page.  By default the drawer will be on the right side of the page.
#### variation

The `variation` prop allows the consumer to set the type of info drawer being used. This primarily translates to a background color. The options are:

- blue
- default

If the prop is omitted, `default` is used.

#### heightVariation

The `heightVariation` prop switches between a more traditional full height drawer and a drawer who's height is governed by it's content. The options for this prop are:

- full
- dynamic

If the prop is omitted, `dynamic` is used.

#### className

This is the className prop that is passed through to the underlying element.

## <InfoDrawerProvider />

The context provider for the info drawer. This component is necessary to allow other components deeper in the render tree, using the accompanying `useInfoDrawer` hook to control the state of the `<InfoDrawer />` component. It does not accept and props.

## useInfoDrawer

The `useInfoDrawer` hook allows the consumer to configure certain aspects of the drawer and to control it's state. The consumer can pass a configuration object to the hook to initialize it in the context of that component with a `onClose` callback to be called when ever the drawer is closed.

The hook itself returns an object that includes the current state of the drawer, and a setter to update the drawer's state. The updater takes and object that is then shallowly merged with the existing state.

```javascript
const { content, isOpen, setInfoDrawer, title } = useInfoDrawer({ onClose })
```

### Configuration

#### onClose

The `onClose` option regsiters a callback that will be called when ever the drawer is closed either programatically, or by user action. The callback is automatically cleaned up when the consuming component is removed from the render tree (unmounted).

### Return values

#### title

The current value of the title in the info drawer can be read from this value. Be aware the the `title` value may include JSX so there is no guarantee that the value will be a string.

> Note that the header is rendered in a BRC `<Header />` component with its size prop set to `small` (16px).

#### content

The current value of the main content in the info drawer can be read from this value. Be aware the the `content` value may include JSX so there is no guarantee that the value will be a string. If a functional component is provided, the value returned from `useInfoDrawer` will be passed in as props

Static JSX content:
```jsx
{
  content: <div>some content</div>
}
```

Functional component:
```jsx
{
  content: ({ isOpen }) => <div>some content {isOpen ? 'Open' : 'Closed'}</div>
}
```

Functional component using hooks and custom props
```jsx
const ContentComponent = ({ isOpen, customProp }) => {
  const [value, setValue] = useState(0) // hooks can be used as normal
  return (
    <>
      <div>{customProp}</div>
      <div>some content {isOpen ? 'Open' : 'Closed'}</div>
    </>
  )
}

{
  content: ContentComponent,
  contentProps: { customProp: 'Hello world' },
}
```

#### contentProps

These props are passed to `content` if is component function.  See example above.

#### isOpen

The current open state of the info drawer can be read from this value.

#### setInfoDrawer

The values of any of `title`, `content`, or `isOpen` may only be udated using the `setInfoDrawer` function. It is up to the consumer to control the state of the drawer. It should also be noted that any other component in the render tree may also use the `useInfoDrawer` hook to change it's state. The current state of the drawer can always be determined by interogating the values returned from the hook.