# <SectionsLegend /> Component

## Description

A quick at-a-glance way to see a manage all the sections on that page

• As a user I would like to see all the sections on my page
• As a user I would like a way to easily open the [Add New Section] drawer
• As a user I would like to reorder them up and down using drag-and-drop and have the order immediately reflected in the editor canvas
• As a user I would like to toggle between seeing and not seeing this view in case I want to focus only on the editor canvas
• As a user I would like the section in the editor canvas to highlight when i mouse over
• As a user I would like the section in the editor canvas to activate when I click on the section

## Screens / States

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

## Checklist

This component should...

- Rendering > Should render in the dom
- Rendering > Should show a title in the dom that matches the title string passed in the prosp
- Rendering > Should show a list of <SectionItem /> elements...the amount should match the number of sections passed in the sections array
- Event > Should trigger the onChange event when the sections are re-ordered via drag-and-drop
- Methods > Should return an updated list of settings from the onChange event return function when the sections are re-ordered via drag and drop

## Usage

To install it...

> npm install @sandcastle/components

Add it to your project...

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

export default () => (
  <SectionsLegend

  />
)
```

## 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