import { Story, Preview, Meta, html } from '@open-wc/demoing-storybook';
import '@lion/checkbox-group/lion-checkbox-group.js';
import '@lion/checkbox/lion-checkbox.js';
import '@lion/fieldset/lion-fieldset.js';
import '@lion/form/lion-form.js';
import '@lion/input-amount/lion-input-amount.js';
import '@lion/input-date/lion-input-date.js';
import '@lion/input-email/lion-input-email.js';
import '@lion/input-iban/lion-input-iban.js';
import '@lion/input-range/lion-input-range.js';
import '@lion/input/lion-input.js';
import '@lion/option/lion-option.js';
import '@lion/radio-group/lion-radio-group.js';
import '@lion/radio/lion-radio.js';
import '@lion/select/lion-select.js';
import '@lion/select-rich/lion-options.js';
import '@lion/select-rich/lion-select-rich.js';
import '@lion/textarea/lion-textarea.js';
import { MinLength, Required } from '@lion/validate';

<Meta title="Forms/Features Overview" />

# Features Overview

This is a meta package to show interaction between various form elements.
For usage and installation please see the appropriate packages.

## Umbrella Form

<Preview>
  <Story name="Example">
    {html`
      <lion-form>
        <form>
          <lion-input
            name="first_name"
            label="First Name"
            .validators="${[new Required()]}"
          ></lion-input>
          <lion-input
            name="last_name"
            label="Last Name"
            .validators="${[new Required()]}"
          ></lion-input>
          <lion-input-date
            name="date"
            label="Date of application"
            .modelValue="${new Date('2000-12-12')}"
            .validators="${[new Required()]}"
          ></lion-input-date>
          <lion-textarea
            name="bio"
            label="Biography"
            .validators="${[new Required(), new MinLength(10)]}"
            help-text="Please enter at least 10 characters"
          ></lion-textarea>
          <lion-input-amount name="money" label="Money"></lion-input-amount>
          <lion-input-iban name="iban" label="Iban"></lion-input-iban>
          <lion-input-email name="email" label="Email"></lion-input-email>
          <lion-checkbox-group
            label="What do you like?"
            name="checkers"
            .validators="${[new Required()]}"
          >
            <lion-checkbox name="checkers[]" value="foo" label="I like foo"></lion-checkbox>
            <lion-checkbox name="checkers[]" value="bar" label="I like bar"></lion-checkbox>
            <lion-checkbox name="checkers[]" value="baz" label="I like baz"></lion-checkbox>
          </lion-checkbox-group>
          <lion-radio-group
            name="dinosaurs"
            label="Favorite dinosaur"
            .validators="${[new Required()]}"
          >
            <lion-radio name="dinosaurs[]" value="allosaurus" label="allosaurus"></lion-radio>
            <lion-radio name="dinosaurs[]" value="brontosaurus" label="brontosaurus"></lion-radio>
            <lion-radio name="dinosaurs[]" value="diplodocus" label="diplodocus"></lion-radio>
          </lion-radio-group>
          <lion-select-rich name="favoriteColor" label="Favorite color">
            <lion-options slot="input">
              <lion-option .choiceValue=${'red'}>Red</lion-option>
              <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
              <lion-option .choiceValue=${'teal'}>Teal</lion-option>
            </lion-options>
          </lion-select-rich>
          <lion-select
            label="Lyrics"
            name="lyrics"
            .validators="${[new Required()]}"
          >
            <select slot="input">
              <option value="1">Fire up that loud</option>
              <option value="2">Another round of shots...</option>
              <option value="3">Drop down for what?</option>
            </select>
          </lion-select>
          <lion-input-range
            name="range"
            min="1"
            max="5"
            .modelValue="${2.3}"
            unit="%"
            step="0.1"
            label="Input range"
          ></lion-input-range>
          <lion-checkbox-group name="terms" .validators="${[new Required()]}">
            <lion-checkbox
              name="terms[]"
              label="I blindly accept all terms and conditions"
            ></lion-checkbox>
          </lion-checkbox-group>
          <lion-textarea name="comments" label="Comments"></lion-textarea>
          <div class="buttons">
            <lion-button raised>Submit</lion-button>
            <lion-button
              type="button"
              raised
              @click=${ev => ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}
              >Reset</lion-button
            >
          </div>
        </form>
      </lion-form>
    `}
  </Story>
</Preview>

```js
import '@lion/checkbox-group/lion-checkbox-group.js';
import '@lion/checkbox/lion-checkbox.js';
import '@lion/fieldset/lion-fieldset.js';
import '@lion/form/lion-form.js';
import '@lion/input-amount/lion-input-amount.js';
import '@lion/input-date/lion-input-date.js';
import '@lion/input-email/lion-input-email.js';
import '@lion/input-iban/lion-input-iban.js';
import '@lion/input-range/lion-input-range.js';
import '@lion/input/lion-input.js';
import '@lion/option/lion-option.js';
import '@lion/radio-group/lion-radio-group.js';
import '@lion/radio/lion-radio.js';
import '@lion/select/lion-select.js';
import '@lion/select-rich/lion-options.js';
import '@lion/select-rich/lion-select-rich.js';
import '@lion/textarea/lion-textarea.js';
import { MinLength, Required } from '@lion/validate';
```
