import { Meta, Canvas } from '@storybook/addon-docs/blocks'
import * as LogoStories from './logos.stories'

<Meta title="pv-toolbar/Product Logos" />

# Planview Product Logos

These components are intended to be used in the `NavigationBar` component

### Responsiveness

The logo components will collapse to only display the symbol from breakpoint `Tablet portrait` and lower.

### Usage

If logo is provided `url` and `label`, the logo will be wrapped in an `<a>`-element with tooltip and label added to the element for assistive technologies to read. It will also be navigable using arrow-keys inside the `NavigationBar`.

If no `url` is provided, the logo will be wrapped in a div but it is still good practice to pass the component the `label` prop.

```tsx
import { LogoChangePoint, NavigationBar } from '@planview/pv-toolbar'

const AppNavigation = () => (
    <NavigationBar
        logo={<LogoChangePoint label="ChangePoint home" url={'/'} />}
    >
        {...otherContent}
    </NavigationBar>
)
```

## Product Logos

_Note: All logos are displayed within a `NavigationBar`. This means the logos will display with names on bigger screens and with symbol only on smaller screens. (separators and background are not part of logos)_

### Planview

<Canvas of={LogoStories.Planview} />

### Adaptive Work

<Canvas of={LogoStories.AdaptiveWork} />

### Advisor

<Canvas of={LogoStories.Advisor} />

### Advisor Express

<Canvas of={LogoStories.AdvisorExpress} />

### AgilePlace

<Canvas of={LogoStories.AgilePlace} />

### Barometer

<Canvas of={LogoStories.Barometer} />

### ChangePoint

<Canvas of={LogoStories.ChangePoint} />

### Daptiv

<Canvas of={LogoStories.Daptiv} />

### Enterprise Architecture

<Canvas of={LogoStories.EA} />

### Hub

<Canvas of={LogoStories.Hub} />

### IdeaPlace

<Canvas of={LogoStories.IdeaPlace} />

### OKR

<Canvas of={LogoStories.OKR} />

### Portfolios

<Canvas of={LogoStories.Portfolios} />

### PPM Pro

<Canvas of={LogoStories.PPMPro} />

### ProjectPlace

<Canvas of={LogoStories.ProjectPlace} />

### PV Admin

<Canvas of={LogoStories.PVAdmin} />

### Release and Verify

<Canvas of={LogoStories.ReleaseAndVerify} />

### Roadmaps

<Canvas of={LogoStories.Roadmaps} />

### Viz

<Canvas of={LogoStories.Viz} />

### Project Advantage

<Canvas of={LogoStories.ProjectAdvantage} />