# @planview/pv-toolbar

React implementation of **Planview Design System** `Toolbar` following the [specification](https://design.planview.com/components/toolbar/toolbar).

Go to the [official documentation](https://planview-ds.github.io/react-pvds/?path=/docs/pv-toolbar-getting-started--docs) for more details

## Setup

You can install `@planview/pv-toolbar` in multiple ways:

-   With NPM

```sh
npm install @planview/pv-toolbar --save
```

-   With Yarn

```sh
yarn add @planview/pv-toolbar
```

## Usage

```jsx
import * as React from 'react'
import {
    Toolbar,
    ToolbarButtonEmpty,
    ToolbarButtonPrimary,
    ToolbarButtonDestructive,
    ToolbarSectionLeft,
    ToolbarSectionRight,
    ToolbarSeparator
} from '@planview/pv-toolbar'

function MyToolbarImplementation {
    return (
       <Toolbar>
            <ToolbarSectionLeft>
                <ToolbarButtonEmpty
                    onClick={() => setCurrentValue('hit button filter')}
                    icon={<Filter />}
                    tooltip="Filter"
                    aria-label="Filter"
                />
                <ToolbarSeparator />
                <ToolbarButtonDestructive
                    icon={<Activity />}
                    onClick={() => {
                        setCurrentValue('hit button activity')
                    }}
                >
                    Activity
                </ToolbarButtonDestructive>
            </ToolbarSectionLeft>
            <ToolbarSectionRight>
                <ToolbarButtonPrimary
                    onClick={() => setCurrentValue('hit button help')}
                    tooltip="Help"
                    displayOn="desktop"
                    icon={<Help />}
                />
                <ToolbarButtonEmpty
                    onClick={() => setCurrentValue('hit button resize')}
                    tooltip="Resize"
                    displayOn="desktop"
                    icon={<ResizeFull />}
                />
            </ToolbarSectionRight>
        </Toolbar>
    )
)
```