# <AddSectionsTab /> Component

## Description

A tab in the "Add New" Item Drawer with all of the available sections that can be added to the page

- As a user, I would like to see a separate "Sections" tab in the Add New Item drawer
- As a user, I would like to see a categorized list of all the available sections that I can add to my page
- As a user, I would like to be able to search and filter that list
- As a user, I would like to be able to add any of the sections to my page (via drag/drop, double-clicking on it, or a separate "add to page" button)
- As a user, I would like to be able see a larger preview of any of the sections in the list
- As a user, I would like to be able to add the section from the preview popup

## Screens / States

![](http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/components_blocks_add.png)

## Checklist

This component should...

- Rendering > Should render in the dom
- Rendering > Should show a list of section previews, the number of previews shown should match the number of sections provided in the sections array
- Rendering > Should show a list of categories (as determined by the category array in the props) that the user can filter through
- Events > Should trigger the onAddSection event when one of the section preview [add to page] buttons are clicked
- Methods > Should filter the list of layouts being displayed when a category chip is toggled
- Methods > Should filter the list of layouts being displayed when the search text field is typed in

## Usage

To install it...

> npm install @sandcastle/components

Add it to your project...

```
import * as React from 'react'
import * as AddSectionsTab from '@sandcastle/components/AddSectionsTab`

export default () => (
  <AddSectionsTab

  />
)
```

## Best Practices

To do: Add any Best Practices here

## Lifecycle Hooks

To do: Add any Lifecycle Hooks here

## Related Components

To do: Add any Related Components here