import {
  withWebComponentsKnobs,
  Story,
  Preview,
  Meta,
  Props,
  action,
  withKnobs,
  text,
  number,
  html,
} from '../../index.js';

import '../demo-wc-card.js';

<Meta
  title="Demo Card/Docs"
  parameters={{ component: 'demo-wc-card', options: { selectedPanel: 'storybookjs/knobs/panel' } }}
/>

# Demo Web Component Card

A component meant to display small information with additional data on the back.

## Features:

- looks like a game card
- content in the front
- data in the back

## How to use

### Installation

```bash
yarn add @foo/demo-wc-card
```

```js
import '@foo/demo-wc-card/demo-wc-card.js';
```

<Preview withToolbar>
  <Story name="Simple">
    {html`
      <demo-wc-card>Hello World</demo-wc-card>
    `}
  </Story>
</Preview>

## API

<Props of="demo-wc-card" />

## Playground

For each story you see here you have a menu point on the left.
Click on canvas and then knobs to see and modify the public api.

### Variations

###### Header

<Story name="Custom Header">
  {html`
    <demo-wc-card header="Harry Potter">A character that is part of a book series...</demo-wc-card>
  `}
</Story>

###### Back Side

<Story name="Show Back">
  {html`
    <demo-wc-card back-side>Hello World</demo-wc-card>
  `}
</Story>

###### Providing Rows

<Story name="Provide Rows">
  {() => {
    const rows = [
      { header: 'health', value: '200' },
      { header: 'mana', value: '100' },
    ];
    return html`
      <demo-wc-card back-side .rows=${rows}>
        A card with data on the back
      </demo-wc-card>
    `;
  }}
</Story>
